Eine der wichtigsten Anwendungen des Internet ist das WWW: ein weltweites Netz untereinander verlinkter sogenannter HyperText-Dokumente. Solche Dokumente werden mit Hilfe der Dokumentenbeschreibungs-Sprache HTML (für HyperText Markup Language) definiert, auf Webservern abgelegt und von Webbrowsern mit Hilfe des HyperText Transfer Protokolls (HTTP) von solchen herunter geladen.
HTML-Dokumente sind Textdokumente mit sogenanntem Markup: zusätzlichen Anweisungen zur Strukturierung. Die Struktur eines HTML-Dokuments wird durch sogenannte Tags spezifiziert, die das Dokument hierarchisch in seine Bestandteile zerlegen. Die Struktur eines einfachen HTML-Dokuments ist wie folgt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dies ist eine HTML-Seite</title>
</head>
<body>
...
</body>
</html>
Die erste Zeile ist eine sogenannte Dokumenttyp-Definition, mit der
die verwendete HTML-Version kenntlich gemacht werden kann. Bei
Verwendung der aktuellen HMTL-Version genügt die hier gezeigt Angabe
<!DOCTYPE html>.
Das eigentliche HTML-Dokument ist in die Tags <html> und </html>
eingeschlossen. Tagnamen werden zwischen spitzen Klammern notiert. Das
erste Tag heißt öffnendes und das letzte schließendes Tag, wobei
schließende Tags stets den gleichen Namen haben wie zugehörige
öffnende Tags, diesem aber ein Schrägstrich vorangestellt wird. Durch
öffnende Tags begonnene Bereiche müssen in der Regel durch ein
schließendes Tag beendet werden.1 Dabei muss die hierarchische
Struktur des Dokumentes abgebildet werden.
Ein HMTL-Dokument hat zwei Bestandteile: einen Kopf (abgesetzt durch
<head> und </head>) und einem Rumpf (abgesetzt durch <body> und
</body>). Hier wäre es falsch, das schließende </head>-Tag nach
dem öffnenden <body>-Tag zu notieren, da dies nicht der
hierarchischen Struktur des Dokumentes entsprechen würde. Der Kopf
enthält Meta-Informationen, wie hier den Zeichensatz und den Titel des
Dokumentes, die nicht angezeigt werden.2 Der Rumpf enthält den
eigentlichen Inhalt des Dokumentes, der im Browser angezeigt wird. Im
folgenden behandeln wir Tags zur Strukturierung des Rumpfes eines
HTML-Dokuments.
Überschriften werden durch Tags mit den Namen h1 bis h6 (h
für heading) deklariert. h1 bezeichnet dabei eine Überschrift erster
Ordnung, h2 eine zweiter Ordnung und so weiter. In Browsern werden
Überschriften erster Ordnung in der Regel am größten und fett
dargestellt, Überschriften zweiter Ordnung etwas kleiner und so
weiter. Die Darstellung von Dokumentbestandteilen ist jedoch explizit
nicht in HTML spezifiziert. HTML beschreibt nur die Struktur von
Dokumenten. Wie ein Dokument dargestellt werden soll, kann jedoch
gesondert mit CSS (für Cascading Style Sheets) beschrieben werden, wie
wir später noch sehen werden.
Absätze werden durch Tags mit dem Namen p (für paragraph)
begrenzt. In Browsern werden Absätze in der Regel abgesetzt notiert
und zwar unabhängig davon, wie sie in der HTML-Datei selbst formatiert
beziehungsweise umgebrochen sind. Zur Anzeige eines HTML-Dokumentes im
Browser ist nur die durch Tags deklarierte Struktur relevant nicht
jedoch die Formatierung anhand von Zeilenumbrüchen in der HTML-Datei
selbst. Bereiche, die genauso wie im Quelltext der HTML-Datei
umgebrochen werden sollen, können zwischen Tags mit dem Namen pre
(für pre-formatted text) deklariert werden. Dies ist zum Beispiel
nützlich, um Programmtext in HTML-Dokumenten anzuzeigen.
Die wichtigsten Bestandteile von HTML-Dokumenten im Vergleich zu
gewöhnlichen Dokumenten sind Verknüpfungen zu anderen
Dokumenten. Diese werden durch Tags mit dem Namen a (für anchor)
deklariert. Anders als bei den bisher vorgestellten Tags, bestehen
Verknüpfungen aus einem angezeigten Teil (dem Verknüpfungstext) und
einem nicht angezeigten Teil (dem Verknüpfungßziel). Der
Verknüpfungstext wird wie gewohnt zwischen den Tags geschrieben. Das
Verknüpfungsziel wird als sogenanntes Attribut des öffnenden Tags mit
dem Namen href (für Hyper Reference) notiert. Zum Beispiel
Beschreibt <a href="http://www.uni-kiel.de">Uni Kiel</a> eine
Verknüpfung mit dem Text Uni Kiel und dem Ziel
http://www.uni-kiel.de. Verknüpfungsziele werden also durch ihren
URI spezifiziert. Statt einen vollständigen URI als Verknüpfungsziel
anzugeben, kann der Domainname auch weggelassen werden, um ein
Dokument der selben Domain zu verlinken. Analog zu Dateisystemen kann
auch ein relativer Pfad angegeben werden, der dann ausgehend vom
Verzeichnis des aktuellen Dokumentes interpretiert wird.
Tags mit dem Namen a werden nicht nur für Verknüpfungen sondern auch
zur Markierung von Bestandteilen des Dokuments verwendet, auf die
durch Angabe des Anker-Namens nach # explizit verlinkt werden
kann. Mit <a name="Hauptteil">...</a> wird ein sogenannter Anker zu
dem umfassten Bestandteil des Dokuments deklariert. Wikipedia
deklariert Anker für die Bestandteile aller Dokumente. Wir können also
zum Beispiel durch <a href="http://de.wikipedia.org/wiki/Hypertext_Markup_Language#HTML-Struktur">HTML-Struktur</a>
direkt auf den Abschnitt “HTML-Struktur” des Wikipedia-Eintrags zu
HTML verlinken. In Browsern werden Verknüpfungen in der Regel in einer
anderen Farbe und unterstrichen dargestellt um sie von normalem Text
abzusetzen. Obwohl CSS es erlaubt die Darstellung nach Belieben
anzupassen, sollte mit solchen, von vielen internalisierten,
Konventionen nicht (oder nur aus sehr guten Gründen) gebrochen werden.
Bilder können in HTML-Dokumente eingebunden werden, indem ihr URI
als Attribut src eines Tags mit dem Namen img angegeben wird. Zum
Beispiel können wir durch <img src="http://www.uni-kiel.de/home/grafik/kopf-cau-block.gif"> das Logo
der Uni-Kiel in ein HTML-Dokument einbinden.3 Da Bei
Bildern kein eigentlicher Inhalt notiert wird, kann das schließende
Tag entfallen. Alternativ können wir auch durch einen angehängten
Schrägstrich wie in <img src="..." /> anzeigen, dass das gerade
geöffnete Tag direkt wieder geschlossen wird.
Aufzählungslisten werden in HTML durch Tags mit den Namen ol
(für ordered list) beziehungsweise ul (für unordered list)
deklariert. Geordnete Listen werden durchnummeriert während in
ungeordneten Listen die Einträge durch ein sogenanntes Bullet (zum
Beispiel einen kleinen Kreis) kenntlich gemacht werden. Die Einträge
selbst werden zwischen Tags mit dem Namen li (für list item)
notiert. Zum Beispiel wird der folgende HTML-Code zur Deklaration
einer drei-elementigen ungeordneten Liste
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<li>dritter Eintrag</li>
</ul>
im Browser wie folgt dargestellt:
Tabellen werden durch Tags mit dem Namen table deklariert. Sie
bestehen aus Zeilen, die zwischen tr (für table row) geschrieben
werden und wiederum Einträge enthalten, die durch td (für table
data) kenntlich gemacht werden. Statt td kann auch th (für table
header) verwendet werden, um den Eintrag als Überschrift zu
kennzeichnen. Zum Beispiel könnte die folgende Tabelle
<table>
<tr>
<th>Vorname</th>
<th>Nachname</th>
<tr>
<tr>
<td>Sebastian</td>
<td>Fischer</td>
</tr>
<tr>
<td>Frank</td>
<td>Huch</td>
</tr>
<tr>
<td>Kai</td>
<td>Wollweber</td>
</tr>
</table>
im Browser wie folgt dargestellt werden:
| Vorname | Nachname |
|---|---|
| Sebastian | Fischer |
| Frank | Huch |
| Kai | Wollweber |
Die genaue Formatierung kann durch CSS beeinflusst werden.
Bei der Deklaration von HTML-Dokumenten wird zwischen deren Struktur (die in HMTL spezifiziert wird) und deren Formatierung unterschieden. Letztere wird in der Formatierungs-Sprache CSS (Cascading Style Sheets) deklariert. Style Sheets werden im Kopf einer HTML-Datei definiert und können auch in gesonderte Dateien ausgelagert werden um sie in mehreren HTML-Dateien wiederzuverwenden. Im folgenden werden beide Varianten:kumentiert.
<html>
<head>
<link rel="stylesheet" type="text/css" href="format.css">
<style type="text/css">
...
</style>
<head>
<body>
...
</body>
<html>
Hier werden zunächst mit Hilfe eines link-Tags ein externes Style
Sheet format.css eingebunden und dann zwischen Tags mit dem Namen
style weitere Formatierungsangaben gemacht.
Die Formatierungsangaben selbst haben das Format
Selektor {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
...
}
wobei durch Selektor ein oder mehrer Bestandteile eines
HTML-Dokumentes ausgewählt werden können, die dann entsprechend der in
geschweifte Klammern eingeschlossenen Formatierungsanweisungen
dargestellt werden.
Zum Beispiel wird durch die folgende Angabe
h1 {
font-style: italics;
}
spezifiziert, dass Überschriften erster Ordnung kursiv dargestellt werden sollen. Es können auch mehrer Selektoren durch Kommata getrennt angegeben werden:
h1, h2, h3 {
font-style: italics;
}
Hier werden Überschriften erster bis dritter Ordnung kursiv dargestellt.
Selektoren können auch hierarchisch strukturiert werden. Zum Beispiel
bezieht sich der Selektor p ul auf alle ungeordneten Listen, die
innerhalb von Absätzen stehen. Um zu kennzeichnen, dass nur solche
Listen, die direkt innerhalb von Absätzen stehen, selektiert werden
sollen, können wir p>ul als Selektor verwenden. Um den Unterschied
der beiden Selektoren zu verdeutlichen betrachten wir den folgenden
Absatz einer möglichen HTML-Datei, der geschachtelte ungeordnete
Listen enhält.
<p>
<ul>
<li>
<ul>
<li>A.1</li>
<li>A.2</li>
</ul>
</li>
<li>B</li>
</ul>
</p>
Der Selektor p ul selektiert hier beide ungeordneten Listen, während
der Selektor p>ul nur die äußere selektiert, die direkt unterhalt
des Absatzes steht, nicht aber die innere, die innerhalb eines
Listeneintrags steht.
Nütliche Angaben zur Formatierung können Sie dem CSS-Kapitel der Seite SELFHMTL entnehmen. Nützlich sind zum Beispiel Angaben zu Rahmen in Tabellen:
table {
border-top: thin solid;
}
table, table th {
border-bottom: thin solid;
}
Eine Ausnahme dieser Regel ist das gezeigte <meta>-Tag zur
Angabe des Zeichensatzes. ↩︎
Der Titel einer HTML-Seite wird von gängigen Browsern in der Regel in der Titelzeile des Browserfensters angezeigt, aber nicht im angezeigten Dokument selbst. ↩︎
Bei der Anzeige fremder möglicherweise geschützter Bilder ist auf Grund von Copyright-Bestimmungen Vorsicht geboten. Bilder aus der Wikipedia dürfen unter bestimmten Vorraussetzungen verwendet werden. Bei Fragen konsultieren Sie bitte Ihren Anwalt. ↩︎