Das nächste, was Herr Meier sich notiert hatte, war die Preisliste. Wir bitten hier um große Nachsicht, denn wir gehören nicht zu den Menschen, die sich maßgeschneiderte Möbel kaufen können und wählen folglich einfach Phantasiepreise für diese Beispieltabelle - denn genau darum geht es: Wir erstellen eine Tabelle für die Preise.

Das englische Wort für "Tabelle" ist table und so heißt dann auch die HTML-Tabelle table. Wenn man etwas in die Tabelle eintragen möchte, dann braucht man wiederum Elemente innerhalb von anderen Elementen: Die Elemente werden also wieder ineinander "verschachtelt". Ganz außen ist natürlich das table-Element, das die ganze Tabelle umfasst. Innen drin sind zuerst mal die Zeilen der Tabelle, auf englisch row, weswegen sie den Tag tr für table row bekommen. Da es mehrere Zeilen in der Tabelle gibt, gibt es folglich auch mehrere tr-Elemente.

Im ersten tr-Element ist das th-Element enthalten, das für die Kopfzeile steht. Das sind sozusagen die Überschriften für die Tabellenspalten (engl. table header), damit man beim Betrachten auch weiß, was denn da eigentlich in der jeweiligen Spalte überhaupt drin steht.

Im folgenden tr-Elementen ist dann endlich das enthalten, weswegen wir die Tabelle überhaupt erstellen: Die Daten im td-Element (engl. table data)!

Nun, das ist eine recht einfache Tabelle. Natürlich kann man Tabellen mit riesigen Ausmaßen erstellen, wenn man möchte. Wir aber wollen es jetzt nicht zu kompliziert machen, deswegen bleiben wir lieber bei einer kleinen, übersichtlichen Tabelle.

Vielleicht ist euch schon aufgefallen, dass wir inzwischen den Titel der Seite geändert haben. Das ist, wenn man mehrere Seiten anbietet, sehr sinnvoll, denn dann weiß der Nutzer mit einem Blick auf die Titelzeile des Browsers, wo er ist.

Nun haben wir schon zwei Seiten. Die "Hauptseite" aus der letzten Lektion und die neue Preise-Seite. Doch bevor wir uns daran machen, eine dritte Seite zusammenzubasteln, nehmen wir eine kleine Auszeit und besprechen ein paar ganz grundsätzliche Dinge.

Die Haupt-Seite einer Homepage hat meistens einen besonderen Namen: index.html. Dies ist notwendig, damit der Browser auch erkennt, welche HTML-Datei die Hauptseite einer Homepage ist. Wichtig beim Benennen von HTML-Dateien ist es, "unproblematische" Datei- und Verzeichnisnamen zu verwenden, die mit allen Betriebssystemen, Dateisystemen und Browsern funktionieren, damit man nicht später unnötige Arbeit hat. Hierzu einige Regeln:

1. Man sollte sich bei Datei- und Verzeichnisnamen auf Kleinbuchstaben (a-z), Ziffern und Striche (_ oder -) beschränken.
2. Man sollte Leerzeichen und Sonderzeichen wie deutsche Umlaute (ä, ö, ü und ß) vermeiden.

Wisst ihr noch, wofür die Abkürzung HTML steht?

Ja, das war Hypertext Markup Language. Mit Hypertext kann man auf andere Seiten oder Dokumente verlinken oder mehrere Einzelseiten zu einer "Homepage" verbinden.

Unsere erste Seite, die Begrüßungsseite, befindet sich in der Datei index.html, und die zweite Seite mit der Preistabelle in preise.html.

Allerdings besteht zwischen den beiden Seiten aus Sicht eines Besuchers bislang keine Verbindung. Aus dem Internet kennt ihr es aber bestimmt so, dass es irgendwo auf den Seiten ein Menü gibt, von dem aus man auf die anderen Seiten gelangt. So ist es z. B. auch hier auf dem Wiki, in dem ihr gerade lest: oben auf jeder Seite befindet sich ein Menü.

Das Menü besteht wiederum aus Verweisen (englisch: link, wörtlich: Verbindung, Verknüpfung), auf die man mit dem Mauszeiger draufklicken kann, sodass man automatisch auf einer anderen Seite landet.

So etwas wollen wir jetzt auch machen. Dazu erweitern wir die Homepage der Schreinerei Meier um eine weitere ungeordnete Liste, die wiederum die Verweise enthält. Da man mit einem Verweis verschiedene Webseiten aneinander "befestigen" kann (englisch: to anchor), ergibt sich somit auch der Name des Elements für Verweise: <a></a>.

In Lektion 1 hatten wir erwähnt, dass HTML-Elemente außer Tags und Inhalt auch noch "Zusatzinfos" enthalten können, die "Attribute". Sie werden vom Browser benötigt, um das Element richtig darzustellen oder zu verarbeiten. Bisher sind wir im body ohne Attribute ausgekommen, aber für einen Link benötigen wir zwei Informationen: Der Text, den der Anwender sehen soll, und die Seite, auf der man beim Anklicken des Verweises landen soll. Texte gehören in den Inhalt des Elements, und für das Klickziel verwenden wir ein Attribut.

Das benötigte Attribut heißt href (englisch: hyper reference = Hyper[text]-Referenz). Darauf folgt das Gleichheitszeichen ( und darauf, eingeschlossen in doppelte Anführungszeichen, die "Adresse" (HTML-Datei), zu der man beim Anklicken gelangen soll:

<a href="zieldatei.html">Hier klicken!</a>

"Hier klicken!" ist also der Text, auf den man dann draufklicken kann, und "zieldatei.html" ist die HTML-Datei, die nach dem Klicken angezeigt wird.

Beachtet: Linktexte sollten so aussagekräftig wie möglich sein. Das beispielhafte "Hier klicken!" ist der denkbar ungünstigste Linktext, den man notieren könnte. Eine bessere Lösung in diesem Beispiel wäre "Unsere Preise", da auf die Datei "preise.html" verlinkt werden soll.

Das ganze Menü besteht in unserem Fall aus einer ungeordneten Liste (ul) in einem nav-Element (hierzu später mehr). Damit unsere Liste nicht allzu karg aussieht, und damit wir die Dateien jetzt nicht ständig ändern müssen, bauen wir auch schon den Verweis auf die HTML-Seite mit den Bildern (die wir in der nächsten Lektion erstellen werden) ein:

<nav>
  <ul>
    <li><a tabindex="0" aria-current="page">Startseite</a></li>
    <li><a href="preise.html">Unsere Preise</a></li>
    <li><a href="bilder.html">Bilder von unseren Produkten</a></li>
  </ul>
</nav>

Wie Ihr sehen könnt, ist der erste Eintrag zwar ein Verweis, der aber anstelle des href-Attributs auf eine andere Seite ein ARIA-Attribut hat, das Screenreadern anzeigt, auf welcher Seite sich der Benutzer befindet.

Das dient dazu, dass das Menü einen einheitlichen Aufbau hat. Denn wir müssen das Menü nun ja auf allen Seiten einfügen, die zu unserem Webangebot gehören. Schließlich will der Anwender ja auf allen Seiten ein Menü haben, um auf unseren Seiten hin- und herspringen zu können. Auf den anderen Seiten muss dort, wo jetzt nur der leere Link "Startseite" steht, ein Verweis auf "index.html" eingebaut werden. Wenn wir solche "Leereinträge" jedes Mal weglassen würden, dann wäre das Menü auf jeder Seite anders aufgebaut, und das wäre für den Benutzer ziemlich verwirrend.

Das Menü haben wir außerhalb des normalen Textflusses ganz nach oben gesetzt, damit man es sofort sieht. Es ist innerhalb eines nav-Elements platziert, damit es gleich als (Haupt-)Menü erkannt wird.

Wenn Man mehr als einen Versuch durchführt, wird man vielleicht auch bemerken, dass sich die Farbe des Verweistextes ändert. Der Browser merkt sich nämlich in gewissem Rahmen, welche Verweise man bereits besucht habt und kennzeichnet bereits "besuchte" Verweise gewöhnlich in einer anderen Farbe als die noch nicht besuchten Verweise. Beobachtet auch, was passiert, wenn man auf die Datei "bilder.html" klickt, die ja noch fehlt.

Nun haben wir die Datei "preise.html" ebenfalls mit einem solchen Menü versehen. Dabei haben wir uns natürlich an der obigen Vorlage bedient, mussten aber einige Veränderungen vornehmen:

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a tabindex="0" aria-current="page">Unsere Preise</a></li>
    <li><a href="bilder.html">Bilder von unseren Produkten</a></li>
  </ul>
</nav>

Der erste Eintrag in der Liste war ursprünglich ein "leerer" Eintrag (einfacher Text), da wir uns da ja noch auf der Startseite befunden haben. Nun braucht der Anwender aber einen Weg zurück zur Startseite. Mit href="index.html" rufen wir also die Datei "index.html" ab.

Da wir uns gerade auf der Seite "Unsere Preise" befinden, ist der nächste Eintrag der "leere Eintrag".