Von der Theorie in die Praxis…
Beispielseite
Um den Sinn von HTML besser zu verstehen, werfen wir dich einfach einmal ins kalte Wasser und fangen mit einer kleinen Beispiel-Webseite an. Damit soll ein kleiner Überblick dieser Einführung geboten werden.
In dieser Beispielseite führen wir die wichtigsten Elemente einer Seite ein: Den Seitentitel, Überschriften und Absätze:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Seitentitel, wird im Fenstertitel des Browsers angezeigt.</title>
</head>
<body>
<h1>Überschrift erster Ebene</h1>
<p>Absatz. Dieser wird verwendet um generell Text zu beinhalten</p>
<h2>Überschrift, Ebene 2</h2>
<p>Wieder ein Absatz</p>
<h3>Überschrift, Ebene 3</h3>
<p>Absatz mit <strong>fettem Text</strong> und <strike>durchgestrichenem Text</strike></p>
<p>Hier sieht man einen <a href="https://www.wpfox.de">Link zu wpfox.de</a></p>
<h2>Eine Liste</h2>
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
</ul>
</body>
</html>Gehen Sie einfach einmal auf „Dieses Beispiel in einem neuen Fenster ausprobieren“ und vergleichen Sie den Quelltext mit der Ausgabe.
Grundlegender Aufbau
Alle HTML-Dokumente müssen mit einer <!DOCTYPE>-Erklärung beginnen. Die Deklaration selbst ist kein HTML-Tag. Sie ist eine „Information“ für den Browser darüber, welcher Dokumententyp zu erwarten ist.
Mit dem <!DOCTYPE>-Element gibt man die zu verwendende Document Type Defininition (DTD) an, also nach welchem Standard sich das Dokument richtet. Früher war diese Angabe enorm wichtig, denn sie sorgte unter anderem dafür, dass der Browser in den sogenannten „Standardkonformen-Modus“ wechselt, also das Dokument nach den Vorgaben des W3C interpretiert.
Damit wurde früher sichergestellt, dass eine Website in allen Browsern gleich dargestellt wird. Hat man den Doctype weg gelassen, sind ältere Browser in den sogenannten Quirks-Modus gewechselt und haben damit das fehlerhafte Verhalten noch älterer Browser nachgestellt. Es sollte unbedingt im Standardsmode gearbeitet werden. Der Quirks-Modus ist nur ein Relikt aus den Browserkriegen und dient dazu, dass der Browser auch noch veraltete, falsch erstellte Dateien anzeigen kann.
In HTML 5 ist die Deklaration einfach:
<!DOCTYPE html>Das eigentliche HTML-Dokument wird zu allererst in <html>-Tags eingeschlossen. Dort finden sich dann zwei Kindelemente:
<head>für im Browserfenster nicht direkt sichtbare Zusatzinformationen<body>für den eigentlichen und für den Besucher sichtbaren Seiteninhalt
<html><head>Alle Information die im Browser nicht angezeigt werden.</head> <body>Sichtbarer Inhalt, der Im Browserfenster erscheint.</body></html>Der Dokumentkopf enthält Informationen über das Dokument, welche vom Browser nicht zwangsläufig dargestellt werden wie z.B. Steuerungsangaben für Suchmaschinen.
Das TITLE-Element
Das <title>-Element ist zwingend anzugeben. Der Titel ist sinnvoll zu wählen, da er von Suchmaschinen verwendet wird, um das grundlegende Thema des Dokumentes einzuordnen. Außerdem wird er durch den Browser in dessen Titelzeile oder als Beschriftung für das Browser-Tab angezeigt.
Meta-Daten
In den Meta-Tags werden verschiedene nützliche Anweisungen für Webserver, Webbrowser und Suchdienste im Internet notiert. Meta-Angaben können Angaben zum Autor und zum Inhalt der Datei enthalten. Sie können aber auch HTTP-Befehle absetzen, wie zum Beispiel zum automatischen Weiterleiten des Web-Browsers zu einer anderen Webadresse.
Meta-Angaben sind nicht für persönliche Anmerkungen oder Kommentare zum Quelltext der HTML-Datei gedacht. Für solche Angaben werden Kommentare benutzt.
Der HTML-Standard schreibt seit Version 4.0 keine konkreten Meta-Angaben mehr vor, sondern definiert lediglich den grundsätzlichen Aufbau einer Meta-Angabe. Zur Standardisierung von Meta-Angaben arbeitet das W3C stattdessen an einer Sprache namens Resource Description Framework (RDF).
Für jede Meta-Angabe wird ein Meta-Tag in den HTML-Dateikopf <head> gesetzt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispielseite</title>
</head>
<body>
Diese Seite ist ein Beispiel
</body>
</html>Strukturierung mit Block-Level-Elementen
Der Inhalt einer Seite wird Klassischerweise gegliedert. Dazu stehen verschiedene Element zur Verfügung. In diesen findet sich dann der eigentliche Textinhalt.
Die wichtigsten Elemente:
- Überschriften verschiedener Ebenen (
<h1>,<h2>,<h3>, usw. bis<h6>) - Absätze (
<p>) - Listen (ungeordnet
<ul>, durchnummeriert<ol>) - Tabellen (
<table>) - Zitate (
<blockquote>)
Diese Elemente nennt man Block-Level Elemente. Das bedeutet, dass sie am Anfang und am Ende einen Zeilenumbruch erzeugen, also einen Block bilden.
Listen
Der HTML-Standard kennt verschiedene Arten von Listen, wir werden hier kurz auf die drei wichtigsten Typen von Listen eingehen:
<ol>
<li>Eine geordnete Liste</li>
<li>Zur Aufzählung werden normalerweise Zahlen verwendete</li>
</ol><ul>
<li>Eine ungeordnete Liste</li>
<li>Zur Aufzählung werden normalweise Punkte verwendet</li>
</ul><dl>
<dt>English</dt>
<dd>Eine Sprache die zur Internationalen Verständigungen als "Weltsprache" ausgewählt wurde.</dd>
<dt>Deutsch</dt>
<dd>Sprache welche überwiegend in Deutschland gesprochen wird</dd>
</dl>Auszeichnung mit Inline-Elementen
Im Gegensatz dazu gibt es noch sogenannte Inline-Elemente. Diese können nur innerhalb von Block-Level Elementen benutzt werden. Sie dienen der Auszeichnung von Textteilen und Wörtern mit besonderer Bedeutung und Funktion.
Wichtige Elemente hierbei sind:
- Links
<a> - Fett
<strong> - Kursiv/Betonung
<em> - Zeilenumbrüche
<br> - und viele andere wie Zitat
<cite>, Abkürzung<abbr>, etc.
<html>
<body>
<p>In diesem Absatz demonstrieren wir einige Inline-Tags.<br/><strong>Das hier ist fetter Text</strong><br/><strong>Das hier ist hervorgehobener Text</strong><br/>Diese Zeilen werden durch Zeilenumbrüche getrennt<br/></p>
</body>
</html><p>Wichtige Aussagen können mit em <em>hervorgehoben</em> werden</p><p><strong>Dieser Text ist stark betont</strong></p><p><strike>Dieser Text ist Durchgestrichen</strike>, dieser nicht.</p><p>Das "<abbr title="Zum Beispiel">z.B.</abbr>" ist ein eine Abkürzung</p>
<p>Die <acronym title="National Aeronautics and Space Administration">NASA</acronym> ist die zivile US-Bundesbehörde für Luft- und Raumfahrt.</p>Ein Acronym ist eine besondere Art von Abkürzung, die man meistens auch so ausspricht, z.B. LKW, NATO.
<address>Musterweg 13<br />12345 Musterhausen</address><blockquote cite="Albert Einstein">Wenn man zwei Stunden lang mit einem Mädchen zusammensitzt, meint man, es wäre eine Minute. Sitzt man jedoch eine Minute auf einem heißen Ofen, meint man, es wären zwei Stunden. Das ist Relativität.</blockquote><cite>E = mc² (laut Albert Einstein)</cite><p>H<sub>2</sub>O steht für reines Wasser<br />E = mc<sup>2</sup> ist die bekannteste Formel Albert Einsteins</p><p>Ich behaupte, <del>die Erde ist eine Scheibe</del><ins>die Erde ist eine Kugel</ins></p>Das wohl wichtigste Element: Der Link
Das wichtigste HTML-Element ist wohl der Link <a> (kurz für Anchor). Er steht für die grundlegende Idee des Hypertextes im WWW. Damit kann eine Textstelle auf eine andere Webseite „verankert“ bzw. verlinkt werden.
<a href="https://www.google.de">Hier klicken</a>Der Text/Inhalt der innerhalb des Tags steht wird damit zu einem Link. Im Normalfall bedeutet dies, dass der Text unterstrichen wird und wenn der Benutzer darauf klickt, wird er auf das Verweisziel, dass mit dem Attribut href angegeben ist geleitet. Für einen anklickbaren Link muss also stets das Attribut href existieren, also das Ziel der Verlinkung.
Relative und absolute Links
| Linkform | Bedeutung |
|---|---|
| #ankername | Springt auf den Anker/ID innerhalb der aktuellen Seite. |
| datei.html | Verweist auf eine Datei im gleichen Verzeichnis |
| ../pfad/datei.html | Relativer Verweis auf eine Datei, voller Pfad wird aus aktuellem Pfad + Linkziel erzeugt |
| /pfad/datei.html | Absoluter Verweis auf eine Datei, ohne Angabe der Domain (kein Domain-Wechsel) |
| https://wpfox.de/ | Verweis auf eine andere Domain |
| https://wpfox.de/pfad/datei.html | Verweis auf andere Domain mit Angabe einer Datei (Deep-Link) |
Neben den hier gelisteten Attributen sind alle Universalattribute gültig. Grundsätzlich sind alle Attribute optional anwendbar.
Attribute
Das href-Attribut, also die Angabe eines Linkziels, ist tatsächlich optional. Somit ist sichergestellt, dass es auch Links geben kann, die nur als Ankerziel verwendet werden: <a name="foo">.
Da es laut Dokumenttypdefinition nicht möglich ist anzugeben, dass entweder href oder name angeben sein muss, sind beide Attribute optional. Ein Link ganz ohne Attribute ist also laut DTD gültig, macht aber wenig Sinn.
Mittels des Attributs name kann ein Link kann als Anker verwendet werden. Hierzu wird das href-Attribut des Links, der den Besucher an diese Stelle bringen soll auf #ankername gesetzt. „ankername“ verweist hierbei auf: Ein Link im selben Dokument mit dem entsprechenden name-Attribut, oder
ein beliebiges Element im Dokument mit dem entsprechenden id-Attribut.
Bilder mit dem img-Element
Mit dem img-Attribut werden Bilder in Webseiten eingebunden.
<img src="/editor/sample-image/" alt="ein Ausschnitt aus einer schwarzen Tastatur" />Das <img>-Tag hatte in HTML 4 zwei Pflichtattribute:
src, enthält eine URL, also die Adresse des Bildes.alt, enthält eine kurze Beschreibung des Bildes in Textform.
Das src-Attribut gibt die Adresse wo sich das Bild befindet an.
Das alt-Attribut gibt einen Alterntivtext für den Inhalt des Bildes an. Der Text wird angezeigt, wenn das Bild nicht dargestellt werden kann, da entweder Bilder im Browser deaktiviert sind, das Bild nicht verfügbar ist, oder der Benutzer sehbehindert ist. Es ist ein Pflichtattribut und muss somit bei jedem Bild angegeben werden. Damit soll sichergestellt werden, dass Webseiten barrierefrei gestaltet werden.
Ist das Bild ein reines Schmuckelement der Seite und hat somit keine inhaltliche Bedeutung, sollte ein leeres alt-Attribut alt="" zugewiesen werden.
Mit HTML5 wurde das alt-Attribut optional: Das alt-Attribut kann also weglassen werden, wenn das Bild zwar eine inhaltliche Bedeutung hat, es aber der Inhalt nicht beschrieben werden kann (z.B. sinnvoll bei Fotogalerien, wo sich kein Benutzer die Mühe gemacht hat alle Bilder zu beschriften).
Veraltete Attribute, wie width, height, ismap, usemap, align, border, hspace und vspace sollten übrigens nicht mehr verwendet werden.
Der DIV-Tag
Der <div>-Tag ist ein bedeutungsloser Container-Tag und wird benutzt, um Elemente in einem bestimmten Feld zu sammeln, um so gemeinsam gestaltet zu werden, oder Bereiche eines Dokuments übersichtlicher zu trennen. Man kann HTML-Dokumente mittels DIVs segmentieren, jedoch sollte man es dabei nicht übertreiben.
<div id="container">Hallo!</div>to be continued …
Abonniere das kostenlose KI-Update
Bleib auf dem Laufenden in Sachen Künstliche Intelligenz!
Melde Dich jetzt mit Deiner E-Mail-Adresse an und ich versorge Dich kostenlos mit News-Updates, Tools, Tipps und Empfehlungen aus den Bereichen Künstliche Intelligenz für dein Online Business, WordPress, SEO, Online-Marketing und vieles mehr.
Keine Sorge, ich mag Spam genauso wenig wie Du und gebe Deine Daten niemals weiter! Du bekommst höchstens einmal pro Woche eine E-Mail von mir. Versprochen.
