Eine neue Sprache zu lernen erfordert Zeit und Disziplin.
Ob Sie nun Italienisch für Ihren Europaurlaub lernen oder Spanisch-Hausaufgaben erledigen, es gibt viel, was in das Lesen, Schreiben und Sprechen einer Sprache einfließt, die Sie nicht regelmäßig verwenden.
Das Gleiche gilt für das Erlernen von HTML, um eine Website zu programmieren. Während Sie nicht unbedingt lernen müssen, HTML zu sprechen, um es zu verwenden, müssen Sie die Komponenten von HTML identifizieren, was sie bedeuten und wie sie auf einer Webseite erscheinen werden. HTML zu lernen ist auch ein wesentlicher Bestandteil des Website-Bauens.
Was ist HTML?
HTML steht für Hypertext Markup Language. Es ist die Standard-Auszeichnungssprache für Webseiten, die die Struktur des Inhalts definiert. Diese Elemente sind die Bausteine jeder Website.
Was ist HTML?
HTML ermöglicht es Benutzern, Abschnitte, Überschriften, Links, Absätze und mehr auf einer Website mit verschiedenen Tags und Elementen zu erstellen und zu strukturieren. Fast alles, was Sie auf einer Webseite erstellen möchten, kann mit einem bestimmten HTML-Code gemacht werden.
Auch wenn Sie denken, HTML sei knifflig, oder sagen: „Ich habe ein Symbol vergessen und alles war durcheinander!“, ist HTML sehr ähnlich wie das Lernen einer neuen Sprache. Aber sobald Sie den Dreh raus haben, wird es zur zweiten Natur, und Sie werden im Handumdrehen Webseiten mit HTML erstellen. Bereit, mehr zu lernen? Lesen Sie einfach weiter.
Möchten Sie mehr über Webentwickler erfahren? Erkunden Sie Webentwickler Produkte.
Wie funktioniert HTML?
Ich bin zu 100 Prozent sicher, dass Sie eine Website gesehen haben, die HTML-Code verwendet. Woher ich das weiß? Dieser Artikel besteht im Backend aus HTML-Tags und -Elementen.
Dieser Browser zeigt nicht die tatsächlichen HTML-Tags an, sondern verwendet sie, um spezifische Inhalte auf der Seite darzustellen, damit Besucher der Webseite sie sehen können. Normalerweise umfasst die durchschnittliche Website mehrere verschiedene Seiten mit HTML-Code, wie die Startseite, die Über-uns-Seite und die Kontaktseite, jede mit ihren eigenen einzigartigen HTML-Dokumenten.
HTML-Elemente
Die Anatomie eines HTML-Elements besteht aus einem öffnenden Tag, einem schließenden Tag und dem Inhalt dazwischen. Denken Sie an diese Elemente als Bausteine für HTML-Seiten.
Diese Tags sind Elementnamen, die von spitzen Klammern umgeben sind, in diesem Fall <p>, was für Absatz steht.
Der erste Tag ist Ihr öffnender Tag, der zweite ist der schließende Tag. Sie müssen auf die gleiche Weise geschrieben werden, außer dass der schließende Tag einen Schrägstrich vor dem Tag-Namen hat. Der Inhalt zwischen diesen beiden Tags wird im Absatzformat auf der Website angezeigt.
Tipp: Möchten Sie lernen, wie Sie mit Ihrem neuen HTML-Wissen Daten extrahieren können? Schauen Sie sich jetzt unseren Leitfaden zum Web Scraping an! Sie können auch diesen vollständigen Leitfaden zum Website-Bauen ansehen.
Häufige HTML-Tags
Es gibt viele häufige HTML-Tags, die oft bei der Erstellung einer Webseite verwendet werden. Unten sind einige der häufig verwendeten Tags aufgeführt, die zum Erstellen einer Webseite von Anfang bis Ende verwendet werden.
Dokumenttyp
Die Dokumenttyp-Deklaration hilft Browsern, Ihre Webseite korrekt anzuzeigen. Sie wird nur einmal, ganz oben auf der Seite, erscheinen.
Alle HTML-Dokumente beginnen mit dem Code, der das Dokument deklariert. Dieses Tag sieht so aus:
<!DOCTYPE html>
Das mag verwirrend erscheinen, aber im Grunde genommen setzen Sie das einfach an den Anfang Ihres Dokuments und bauen weiter.
HTML-Tag
Wie Sie vielleicht vermutet haben, wird dieses Tag so geschrieben: <html>.
Dieses Element umschließt den gesamten Inhalt auf der gesamten Seite, und Sie können es als Wurzelelement hören. Dieses Tag wird unter dem Dokument-Tag stehen und muss am Ende der Webseite mit </html> geschlossen werden.
Titel-Tag
Was ist der Titel der Seite, die Sie erstellen? Was auch immer es ist, wird im <title>-Element umschlossen und wird sich oben in Ihren Tags befinden.
<title>Seitentitel</title>
Körper-Tag
Das <body>-Element enthält den gesamten Inhalt, den Sie den Besuchern Ihrer Webseite zeigen möchten. Dazu gehören Texte, Bilder, Videos, abspielbare Audiodateien und mehr. Es muss auch am Ende der Webseite mit </body> geschlossen werden.
Überschrift-Tag
Dies wird als <h1> geschrieben und definiert eine größere Überschrift auf der Seite. Sie können mehr als ein Überschrift-Tag haben und jedes Element wird eine entsprechende Nummer haben.
<h1>Dies ist eine Überschrift.</h1>
<h2>Dies ist auch eine Überschrift.</h2>
Absatz-Tag
Das Absatz-Tag definiert, welcher Text als Absatz angezeigt wird, indem das Element <p> verwendet wird.
<p>Dies ist ein Absatz über Hunde.</p>
<p>Dies ist ein weiterer Absatz über Hunde.</p>
Listen
Die Verwendung des Tags <ul> definiert, welcher Text als nummerierte Liste <ol> oder als Aufzählungsliste <li> geschrieben wird.
Ein Beispiel für eine Aufzählungsliste wäre:
<ul>
<li>Mehl</li>
<li>Zucker</li>
<li>Butter</li>
</ul>
Die Verwendung dieses Codes würde den Text auf der Webseite wie folgt erscheinen lassen:
- Mehl
- Zucker
- Butter
Sprach-Tag
Die Sprache des Dokuments wird durch das „lang“-Tag definiert. Wenn Ihre Seite auf Englisch angezeigt wird, wäre das Tag:
<html lang=”en”>
In diesem Fall steht das en für Englisch. Andere beliebte Sprach-Tags sind es für Spanisch, fr für Französisch, it für Italienisch, he für Hebräisch und zh für Chinesisch.
Muss Ihre Webseite in einer anderen Sprache sein? Schauen Sie sich diese Liste von HTML-Sprachcodes an.
Bilder
Der Beginn Ihres Bildelements wird mit dem <img>-Tag beginnen, aber es gibt andere Komponenten, die enthalten sein müssen.
Es wird auch Quelldatei (src), alternativer Text (alt) sowie Breiten- und Höhen-Tags geben. Wenn ich ein Foto der Chicago Cubs verwende, das 600 Pixel breit und 450 Pixel hoch ist, würde das Bild-Tag so aussehen:
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
Links
Es gibt eine spezielle Möglichkeit, einen Link in Ihrem Text mit HTML hinzuzufügen. Verwenden Sie dazu das Element <a>, das für Anchor (Anker) steht.
In diesem Fall sagen wir, mein Ankertext ist G2 Learning Hub.
<a>G2 Learning Hub</a>
Geben Sie dem <a>-Element ein href-Attribut mit leeren Anführungszeichen:
<a href= “ “G2 Learning Hub</a>
Tipp: Href steht für Hypertext-Referenz.
Füllen Sie dann den Wert dieses Attributs (zwischen den Anführungszeichen) mit der URL, zu der Sie verlinken möchten.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
HTML-Wörterbuch
- <!DOCTYPE html> Dokumenttyp
- <html> HTML-Tag
- <title> Titel-Tag
- <body> Körper-Tag
- <H1> Überschrift-Tag
- <p> Absatz-Tag
- <ul> Listen-Tag
- <html lang="en"> Englisches Sprach-Tag
- <img> Bild-Tag
- <a> Anker-Link-Tag
Grundlegendes HTML-Dokument
Wenn ich ein grundlegendes HTML-Dokument erstellen würde, das alle oben aufgeführten Elemente und Tags enthält, würde es so aussehen:
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Seitentitel</title>
<body>
<h1>Dies ist Ihre erste Überschrift</h1>
<p>Dies ist ein Absatztext, der sich auf Ihre erste Überschrift bezieht.</p>
<h2>Dies ist Ihre zweite Überschrift</h2>
<p>Dies ist ein Absatztext, der sich auf Ihre zweite Überschrift bezieht.</p>
<ul>
<li>Liste</li>
<li>Liste</li>
<li>Liste</li>
</ul>
<img src=”Bild.jpg” alt=”Bild-Alt-Text” style=”width:600px;height:450px”>
Klicken Sie auf den Link <a href= “https://learn.g2crowd.com/G2”>hier</a>, um zum G2 Learning Hub zu gelangen.
</body>
</html>
Verwandt: Erfahren Sie mehr über JavaScript und wie Sie Ihre Fähigkeiten üben können!
HTML-Vorteile
Es gibt viele Vorteile, HTML zur Erstellung einer Webseite zu verwenden. Einige davon sind:
- Weit verbreitete Programmiersprache mit einer großen Community, die sie verwendet
- Läuft auf jedem Webbrowser
- Verwendet eine saubere und konsistente Auszeichnung
- Vollständig kostenlos und quelloffen
HTML-Nachteile
Wie alle Dinge, die einen Vorteil haben, hat HTML auch einige Nachteile, die Sie ebenfalls berücksichtigen müssen.
- Hauptsächlich für statische Webseiten verwendet
- Alle Webseiten müssen separat erstellt werden, auch wenn sie die gleichen Elemente und Tags verwenden
- Wenn Sie einen älteren Browser verwenden, werden möglicherweise neu entwickelte Tags nicht gerendert
Krempeln Sie die Ärmel hoch und fangen Sie an zu programmieren
Ob Sie nun ein Experte oder ein Anfänger im Erstellen einer Website sind, die Chancen stehen gut, dass Sie HTML verwenden werden, um verschiedene Webseiten zu erstellen. Auch wenn Sie sich anfangs unsicher fühlen, HTML-Code zu schreiben, wird es sich mit der Zeit wie eine zweite Natur anfühlen, und Sie werden Zeilen von Code im Schlaf lesen und schreiben.
Jetzt, da Sie HTML verstehen, könnten Sie daran interessiert sein, CSS und PHP zu lernen. Oder schauen Sie sich diese Tipps zum Programmieren von Websites an!
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
