Eine Einführung in HTML
HTML steht für Hypertext Markup Language, und Dokumente, die diese Sprache verwenden, erstellen Webseiten. Jede Website verwendet dies, daher ist es wichtig zu verstehen, wie es funktioniert.
In diesem Tutorial-Artikel erfahren Sie alles, was Sie über HTML wissen müssen.
Was ist die <!DOCTYPE>-Deklaration?
Die <!DOCTYPE>-Deklaration ist die erste Codezeile in jeder HTML- Datei. Es teilt Webbrowsern mit, welche HTML- Version sich in einer bestimmten Datei befindet.
Jede HTML- Version ist einzigartig und hat ihre eigenen Regeln. HTML 5 ist die neueste Version der Sprache. Es ist die empfohlene Version für Entwickler und die am einfachsten zu deklarierende Version. Um ein HTML 5- Dokument zu deklarieren, fügen Sie einfach das HTML- Element zur <!DOCTYPE>-Deklaration hinzu .
Sie können ein Beispiel unten sehen:
<!DOCTYPE html>Was ist das <head>-Tag?
In jedem HTML- Dokument folgt auf die <!DOCTYPE>-Deklaration das <html> -Tag. Dieses Tag identifiziert den Stamm des Dokuments und umschließt die Tags <head> und <body> .
Das <head> -Tag ist der erste Abschnitt und enthält die <title>- und <meta> -Tags. In einigen Fällen, in denen der Entwickler jedoch internes CSS verwendet, wird das <style> -Tag auch innerhalb des <head> -Tags platziert.
In einem HTML- Dokument befindet sich nur ein <title> -Tag. Das Tag <title> enthält den Titel einer Webseite, und diese Informationen werden im Registerkartenbereich eines Webbrowsers angezeigt.
Unten sehen Sie ein Beispiel für ein Title-Tag:
<title>An Introduction to HTML</title>Eine HTML- Datei mit dem obigen <title> -Tag wird im Tab-Bereich von Browsern als „Eine Einführung in HTML“ angezeigt.
Das <meta> -Tag beschreibt den Inhalt einer Webseite und hat im Allgemeinen einen Namen und ein Inhaltsattribut. Drei der beliebtesten Arten von <meta> -Tags sind Beschreibung, Schlüsselwort und Ansichtsfenster.
Unten finden Sie ein Beispiel für ein Beschreibungs- <meta> -Tag:
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
Das Inhaltsattribut des description- Tags <meta> enthält eine Beschreibung Ihrer Webseite. Dies sind die Daten, die in einem Suchmaschinenergebnis angezeigt werden und einem potenziellen Besucher sagen, was ihn auf einer Website erwartet.
Unten sehen Sie ein Beispiel für ein <meta> -Tag mit Schlüsselwörtern:
<meta name="keywords" content="HTML, web development, etc">
Das Stichwort <meta> -Tag enthält Wörter oder Ausdrücke, die für Ihre Website relevant sind. Jedes neue Wort oder jede neue Phrase, die einem Keyword-Inhaltsattribut zugewiesen wird, wird durch ein Komma getrennt, wie Sie im obigen Beispiel sehen können.
Unten sehen Sie ein Beispiel für das <meta> -Tag des Ansichtsfensters:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Das viewport <meta> -Tag hilft bei der Erstellung responsiver Designs, indem es Ihre Webseite auf verschiedene Gerätetypen reagiert.
Was ist das <body>-Tag?
Das <body> -Tag ist der zweite Hauptabschnitt innerhalb des <html> -Root-Tags. Das <body> -Tag enthält jedes Element, das auf einer Webseite angezeigt wird.
Elemente mit einem <body> -Tag werden entweder als Inline- oder Blockelemente klassifiziert. Wenn Sie einen vollständigen HTML-Essentials-Spickzettel sehen möchten, haben wir einen zusammengestellt, damit Sie alles leichter verstehen können.
Was sind Blockelemente?
Blockelemente beginnen immer in einer neuen Zeile und nehmen die gesamte Breite der Zeile ein, auf der sie sich befinden.
Einige Blockelemente, die Sie verwenden werden, umfassen:
- Die Überschrift-Tags
- Das <p>-Tag
- Das <div>-Tag
- Das <ol>-Tag
- Das <ul>-Tag
- Das <li>-Tag
Blockelemente werden verwendet, um den Text auf der Website in einem zusammenhängenden, verdaulichen Format zu verteilen.
Was sind Überschriften-Tags?
Es gibt sechs verschiedene Arten von Überschriften-Tags: <h1> , <h2> , <h3> , <h4> , <h5> und <h6> . Das <h1> -Tag erzeugt die größte Überschrift, das <h6 > -Tag erzeugt die kleinste Überschrift und alle anderen Überschriften liegen zwischen den beiden (abhängig von ihrem Zahlenwert).
Die Überschriften-Tags werden in den Überschriften einer Webseite verwendet. Die Verwendung eines bestimmten Überschrift-Tags hängt von der Position der Überschrift auf der Webseite ab. Zum Beispiel wird das <h1> -Tag in der ersten Überschrift einer Webseite verwendet, und eine Webseite verwendet nur ein h1-Element (obwohl es mehrere h2-, h3- und h4-Elemente haben kann).
Unten sehen Sie ein Beispiel für das <h1>-Tag in Aktion:
<h1> Learning the Basics of HTML </h1>
Was ist das <p>-Tag?
Das <p> ist ein weiteres Blockelement, das im Hauptteil der Webseite verwendet wird und Absätze erstellt. Unten sehen Sie ein Beispiel für die Verwendung dieses Tags:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Was ist das <div>-Tag?
Das <div> -Tag steht für eine Division. Es wird verwendet, um Container für Gruppen anderer HTML- Elemente für Stil- oder Funktionszwecke zu erstellen.
Wenn Sie beispielsweise mit einem Raster arbeiten, müssen Sie alle Rasterelemente in einem Container ablegen. Ein <div> -Tag ist das, was Sie verwenden müssen, um den Container zu erstellen.
Was sind die Tags <ol> und <ul>?
Die Tags <ol> und <ul> werden verwendet, um Listen in HTML zu erstellen. Das <ol> -Tag erstellt geordnete Listen, während das <ul> -Tag ungeordnete Listen erstellt. Beide Tags verwenden jedoch das <li> -Tag, das Listenelemente erstellt.
Verwenden des <ol>-Tags
Eine geordnete Liste verwendet standardmäßig Zahlen. Das <ol> -Tag verfügt jedoch über ein type-Attribut, mit dem Sie explizit das Element angeben können, das Sie zum Ordnen Ihrer Liste verwenden möchten. Sie können eine Liste mit römischen Ziffern in Groß- oder Kleinschreibung, Groß- oder Kleinbuchstaben oder Zahlen bestellen.
Sie können ein Beispiel unten sehen:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Der obige Code erstellt eine geordnete Liste mit Kleinbuchstaben.
Verwenden des <ul>-Tags
Das <ul> -Tag hat auch ein type-Attribut, das einen von mehreren Werten annimmt: nämlich Scheibe, Kreis oder Quadrat. Der Datenträger ist jedoch der Standardindikator für ein neues Listenelement in einer ungeordneten Liste.
Unten ist ein Beispiel dafür, was eine ungeordnete Liste in Codeform haben möchte:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Was sind Inline-Elemente?
Ein Inline-Element beginnt nicht in einer neuen Zeile. Es beginnt an der nächsten verfügbaren Position, die sich in einer neuen Zeile befinden kann oder nicht, und verwendet nur so viel Breite wie nötig. Einige Inline-Elemente, die Sie am wahrscheinlichsten verwenden werden, umfassen:
- Das <span>-Tag
- Das <a>-Tag
- Das <img>-Tag
- Das <label>-Tag
- Das <button>-Tag
Wir werden jeden dieser Punkte im Folgenden ausführlicher besprechen.
Was ist das <span>-Tag?
Das <span> -Tag wird für Inline-Styling-Zwecke verwendet. Wenn Sie beispielsweise den Stil eines bestimmten Wortes oder Satzes innerhalb eines Absatzes ändern möchten, können Sie das <span> -Tag verwenden.
Unten ist ein Beispiel für dieses Tag:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
Die Verwendung des <span> -Tags im obigen Beispiel stellt sicher, dass die beiden Wörter innerhalb des <span> -Tags jetzt einen eindeutigen Stil haben können.
Was ist das <a>-Tag?
Das <a> -Tag wird verwendet, um Links auf einer Webseite zu erstellen. Das <a> -Tag ermöglicht es einem Entwickler, auf eine andere Website (externer Link) oder eine andere Website derselben Website (interner Link) zu verlinken. Das <a> -Tag hat zwei wichtige Attribute – href und target.
Das href-Attribut ist wichtig, da es den Wert der Linkposition speichert. Und das Zielattribut ist notwendig, weil es einem Benutzer ermöglicht, den Link in einem neuen Tab zu öffnen. Ohne das Zielattribut wird ein Link im aktuellen Tab geöffnet, und wenn es sich um einen externen Link handelt, wird der Verkehr von Ihrer Website weggeleitet.
Unten sehen Sie ein Beispiel für das <a> -Tag in Aktion:
<a href="http://google.com" target="_blank">Click this link to Google</a>Das Erlernen von HTML ist für Programmierer unerlässlich
Das Erlernen von HTML ist für alle Programmierer von entscheidender Bedeutung und sollte die Grundlagen Ihres Studiums bilden. Zum Glück ist es aber auch nicht zu kompliziert.
Nachdem Sie diese Anleitung gelesen haben, sollten Sie alles haben, was Sie brauchen, um Websites besser zu formatieren.