XML-Know How

Erste eigene HTML-Seiten

Um die HTML-Elemente besser kennenzulernen, wollen wir nun zunächst eine einfache HTML-Seite aufbauen:

Beispiel:

<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

(…)

</head>

<body>

<h1>Prolog im Himmel.</h1>

<p><i>Der Herr. Die himmlischen Heerscharen. Nachher Mephistopheles.<br/>

Die drei Erzengel treten vor.</i></p>

<p>DER HERR:</p>

<p>Kennst du den Faust?</p>

<p>MEPHISTOPHELES:</p>

<p>Den Doktor?</p>

<p>DER HERR:</p>

<p>Meinen Knecht!</p>

<p>MEPHISTOPHELES:</p>

<p>Fürwahr! er dient Euch auf besondre Weise.<br/>

Nicht irdisch ist des Toren Trank noch Speise.</p>

</body>

</html>

Auch ohne weitere Formatierungsangaben wird diese Seite im Browser bereits sinnvoll dargestellt – auf der Grundlage der im Browser hinterlegten Standard-Formatierungsregeln:

Abb. 29 Darstellung der HTML-Seite im Browser

Als erstes wollen wir den Text um eine Liste erweitern. In HTML gibt es zwei Listenarten: <ul> umschließt eine »ungeordnete Liste«, <ol> eine »geordnete Liste«. Bei einer ungeordneten Liste werden die einzelnen Listenpunkte (<li>…</li>) mit einem vorangestellten Symbol (Spiegelstrich, Punkt, …) dargestellt, bei einer geordneten Liste mit einer vorangestellten Ziffer oder einem Buchstaben.

<h2>Inhaltsverzeichnis</h2>

<ol>

<li>Einleitung

<ul>

<li>Zueignung</li>

<li>Vorspiel auf dem Theater</li>

<li>Prolog im Himmel</li>

</ul>

</li>

<li>Der Tragödie erster Teil

<ul>

<li>Nacht</li>

<li>Vor dem Tor</li>

<li>Studierzimmer</li>

<li>Auerbachs Keller</li>

</ul>

</li>

</ol>

Beachten Sie, dass die Aufzählungszeichen selbst nicht im HTML-Code vorhanden sind, sondern erst im Browser während der Darstellung hinzugefügt werden. Es handelt sich hierbei abermals um die Voreinstellung des Browsers – Art und Aussehen der Aufzählungszeichen können frei bestimmt werden.

Abb. 30 Listen-Darstellung im Browser

Als nächstes fügen wir eine Tabelle ein:

<table>

<tr>

<td>Faust</td>

<td>Ein Gelehrter</td>

</tr>

<tr>

<td>Mephisto</td>

<td>Der Teufel</td>

</tr>

<tr>

<td>Margarete</td>

<td>Fausts Geliebte</td>

</tr>

</table>

Das Element <tr> (table row) umschließt dabei immer eine Tabellenzeile, <td> (table data) umschließt die einzelne Tabellenzelle:

Abb. 31 Tabellen-Darstellung im Browser

Tabellen sind ein vergleichsweise komplexes Konstrukt. Für Tabellenkopf und -fuß, Zellüberspannungen, Rahmenlinien und -farben, Hintergrundgrafiken und vieles mehr gibt es eigene Elemente oder Attribute, die hier zunächst nicht näher erläutert werden.

Hyperlinks

Zuletzt wollen wir noch Hyperlinks (Querverweise) in die Datei einfügen. Dazu legen wir Verweise vom Inhaltsverzeichnis zu den einzelnen Überschriften. Das benötigte Element lautet <a>. Es dient sowohl als Kennzeichnung für die Absprungstelle als auch für das Sprungziel innerhalb einer HTML-Datei. Unterschieden werden die beiden Konstrukte anhand des verwendeten Attributs. Ein Querverweis enthält das Attribut href (»hyperlink reference«), das Sprungziel das Attribut name oder id.

<ul>

<li>Einleitung

<ul>

<li><a href="#ziel1">Zueignung</a></li>

<li><a href="#ziel2">Vorspiel auf dem Theater</a></li>

<li><a href="#ziel3">Prolog im Himmel</a></li>

</ul>

</li>

</ul>

<h1><a name="ziel1"/>Zueignung</h1>

In diesem Beispiel wurden ausschließlich interne Querverweise angelegt, also Sprünge auf eine andere Stelle innerhalb der selben Datei. Interne Querverweise werden mit einem vorangestellten Nummernzeichen (»#«) kenntlich gemacht, danach folgt der Name des Sprungziels in derselben Notation, wie er auch am Sprungziel selbst verzeichnet ist.

Ein externer Link (also ein Verweis auf eine andere Website) wird ohne Nummernzeichen kodiert, dafür muss die vollständige URL im Attributwert wiedergegeben werden: <a href="http://www.degruyter.com">.

Abb. 32 Darstellung der Links im Browser

Die Hyperlinks werden gemäß der Voreinstellung der Browser blau und unterstrichen dargestellt. Das wollen wir später noch abändern. Das Sprungziel hingegen erfährt keine besondere typographische Kennzeichnung.