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 hat 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".

Grafiken werden mit dem folgenden HTML-Element in eine Website eingebunden: <img src="name.svg" alt="alternative Bildbeschreibung">.

Wenn wir den HTML-Code oben anschauen, fällt auf, dass das img-Element (von englisch: image, Bild) nur einen Tag besitzt. Genau genommen hat es auch keinen Inhalt, sondern ist nur ein Platzhalter für die Grafik. Anders als ein Word-Dokument, in dem neben dem Text an sich auch die Bilder selbst gespeichert werden (und die Datei-Größen entsprechend aufblähen), gibt das img-Element nur einen Verweis auf die an anderer Stelle gespeicherte Grafik-Datei.

Das img-Tag enthält zwei Attribute:

• das src-Attribut (englisch: source = Quelle). Als Wert erhält es die URL, die „Adresse“ der Datei, die angezeigt soll.
• das alt-Attribut liefert einen Alternativtext, falls die Grafik nicht geladen oder angezeigt werden kann.

Das Attribut alt ist tatsächlich recht wichtig und es sollte dort auch möglichst eine kurze Beschreibung des Bildes notiert sein. Jetzt werden Sie wieder fragen, warum, denn die Grafik wird ja auf dem Monitor angezeigt. Da sind wir wieder bei der Zielgruppe: Für unseren Schreiner ist es wichtig, möglichst alle Menschen zu erreichen, auch die, die z. B. blind sind und sich die HTML-Seiten daher nicht auf einem Monitor ausgeben, sondern sie sich von einem Computerprogramm (einem sogenannten Screenreader) vorlesen lassen oder auf einer Braillezeile mit den Fingern lesen. Diese Menschen können dann zwar das Bild nicht sehen, erfahren aber durch die Beschreibung im alt-Attribut wenigstens, was auf dem Bild zu sehen ist.

Hier das Wichtigste in Kürze: Pfadangaben kennen Sie von Ihrem Betriebssystem. Das Verzeichnis mit Ihren persönlichen Dokumenten hat folgende Pfadangabe:

• In Windows: C:\Benutzer\Ihr Name\Dokumente\ (eigentlich: C:\Users\Ihr Name\Documents),
• in Mac OS X: /Users/Ihr Name/,
• und in den meisten Linux-Distributionen: /home/Ihr Name/

Bei HTML ist das Prinzip ähnlich. Für unsere Zwecke brauchen wir auch nicht sämtliche Unterschiede und Details zu erforschen, sondern konzentrieren uns auf das Wesentliche:

Die Bestandteile des Pfades werden nicht wie unter Windows mit einem sogenannten "Backslash" (\) getrennt, sondern mit dem normalen Schrägstrich (/), also so, wie es auch bei anderen Betriebssystemen üblich ist. Verweise und das img-Element arbeiten mit URLs (engl. Uniform Resource Locator). Dies sind vereinfacht Internetadressen. Externe URLs erkennt man am https://.… Anfangs können alle Bilder und Unterseiten im gleichen Ordner bleiben. Die URL besteht so nur aus dem Dateinamen. Langfristig ist es besser Bilder und andere Dateien in eigene Ordner zu sortieren und auf diese zu verlinken. Für unsere Zwecke ist es sinnvoll, „relative“ Pfadangaben zu verwenden. Das heißt, wir gehen von unserer jetzigen Position aus (in unserem Fall: der Order, aus dem die HTML-Datei inhalt.html geladen wurde) und beschreiben den Weg vom Ort dieser HTML-Datei zur Zieldatei bett.jpeg:

Die URL gibt an, welchen „Pfad“ der Browser gehen muss, um zur „Zieldatei“ zu gelangen. Wir müssen dem Browser Schritt für Schritt sagen, wo er lang gehen soll, um zum Ziel zu kommen. Um also von der jetzigen Position, dem Haupt-Ordner des Projekts, zum Ziel zu kommen, müssen wir Folgendes tun:

• Wir müssen in den Ordner img hinein, also ist der erste Bestandteil der Pfadangabe img. (Das geht ohne weitere Angaben, weil die Datei bilder.html, von der aus wir losgehen, im gleichen Verzeichnis liegt wie das Unterverzeichnis img.)
• Wir fügen den Schrägstrich an (/), mit dem man die Bestandteile der Pfadangabe trennt.
• Zum guten Schluss kommt der Dateiname bett.jpeg.

Aus diesen drei Schritten ergibt sich der Pfad img/bett.jpeg zur Grafik im Bilderordner.

<img src="img/tisch.jpeg" alt="Tisch" >    
<img src="img/schrank.jpeg" alt="Schrank">
<img src="img/bett.jpeg" alt="Bett">

Verzeichnisangaben in HTML-Dateien sollten immer „relativ“ sein, so, wie wir es Ihnen gerade gezeigt haben. Beachten Sie, dass in diesen Pfadangaben keine Laufwerksbezeichnungen (unter Windows z. B. C:\) oder Verzeichnisse außerhalb unseres Projekts vorkommen. Relative Pfadangaben haben den Vorteil, dass Sie Ihr Projekt als Ganzes beliebig auf Ihrer Festplatte, auf andere Laufwerke und vor allem auf einen Internetserver verschieben oder kopieren können, und die Pfadangaben trotzdem noch funktionieren. Übrigens: Wenn Sie es wirklich ernst damit meinen, Ihre Dateien ins Internet zu stellen (also so, dass diese unter einer Adresse wie etwa www.example.com erreichbar sind), dann ist es auch ratsam, die Verzeichnisstruktur so vorausschauend zu organisieren, dass Sie sie später nicht ständig ändern müssen. Viele nicht funktionierende Verweise (englisch: broken links), über die Sie sich vielleicht auch schon geärgert haben, sind durch solche nachträglichen Umstrukturierungen zustande gekommen.

Rastergrafiken, Videos und andere eingebundene Dateien haben im Allgemeinen eine intrinsische Größe, die die Außmaße des Bilds festlegt. Das img-Element räumt dem Element den nötigen Platz ein. Sie können den Browser bei der Darstellung der Bilder unterstützen, indem Sie Angaben zur Breite (width) und Höhe (height) der Grafikdatei in CSS-Pixel machen. Diese helfen, das Bild zu skalieren, den Platz beim Laden der Seite schon zu reservieren, bis auch Bilder und andere Medien geladen werden. Im oberen Beispiel sind alle Bilder gleich groß, obwohl der Kleiderschrank mehr als doppelt so groß angezeigt werden soll.

<img src="img/tisch.jpeg" alt="Tisch" width="200" height="200">    
<img src="img/schrank.jpeg" alt="Schrank" width="200" height="200">
<img src="img/bett.jpeg" alt="Bett" width="200" height="200">