Wenn Sie sich das Screendesign der Kochbar anschauen, sehen Sie fünf nebeneinanderstehende Navigationspunkte; der jeweils aktive Punkt zeigt sich in weißer Schrift auf grünem Grund, alle anderen Dunkel- auf Hellgrau. Es liegen also fünf gleichrangige Einträge vor. Das semantisch richtige Element zur deren Auszeichnung ist eine ungeordnete Liste, also »eine Sammlung verschiedener Elemente, in der es keine Reihenfolge gibt« (vgl. Kapitel 5.6.1). Lassen Sie sich nicht dadurch verwirren, dass sich die Listenpunkte nebeneinander und nicht, wie die meisten Listen, untereinander befinden.
Die Navigation sieht also wie folgt aus:
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</body>
Der Quelltext ist noch nicht ganz perfekt:
Eine Navigation sollte niemals einen Link auf sich selbst
enthalten. Das bedeutet, wenn wir uns auf der Startseite
befinden, sollte der Navigationspunkt »Startseite«
nicht verlinkt sein, um Nutzern zu ersparen, dem Link zu folgen,
um sich dann wundern zu müssen, dass sich offensichtlich
nichts geändert hat. Das Element strong mit einer
entsprechenden Anmerkung über das Universalattribut
title ist hierbei das Element
unserer Wahl.
<body>
<h1><img src="images/logo.png" alt="Kochbar" width="288" height="100" /></h1>
<ul>
<li><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li>
<li><a href="ueber-uns.html">Kochbar</a></li>
<li><a href="speisekarte.html">Speisekarte</a></li>
<li><a href="oeffnungszeiten.html">Öffnungszeiten</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</body>
Übung: Hauptnavigation als Liste
- Ergänzen Sie Ihre
index.html. - Speichern Sie und betrachten Sie das Ergebnis im Browser. Die Seite sollte so aussehen wie Abbildung 8.9.
- Fahren Sie mit der Maus über den hervorgehobenen Navigationslink und schauen Sie sich den Tooltipp an.
An dieser Stelle sei noch mal gesagt: Lassen Sie sich nicht davon beeindrucken, dass die Navigation derzeit noch überhaupt nicht so aussieht wie im Screendesign. Wir haben bisher alles richtig gemacht. Der Rest folgt, wenn wir uns um das Styling der Site per CSS kümmern.
Mit dem Kopfbereich sind wir fertig: Logo und Navigation haben wir ausgezeichnet. Sie sind vielleicht versucht, sich nun mit den Grafiken zu beschäftigen, die den Übergang zwischen Kopf- und Inhaltsbereich bilden, aber die lassen wir zunächst außen vor. Es ist einfacher, wenn wir uns zunächst nur den tatsächlichen Inhalten widmen, also die weiteren Texte auszeichnen.
Kommen wir zur Sidebar.