Deine erste Homepage
Kapitel 7
Das Navigationsmenü
Mit dem Wissen um Hyperlinks aus dem vorherigen Kapitel können wir uns nun daran machen, einen wichtigen Bestandteil einer richtigen Homepage zu schaffen: Das Navigationsmenü, das uns die Orientierung auf den verschiedenen Seiten ermöglicht, aus denen unser Webauftritt einmal bestehen wird.
Hinweis:
In diesem und allen folgenden Kapiteln gibt es auch hier im Tutorial ein Navigationsmenü.
Dieses Navigationsmenü erlaubt es, die einzelnen Kapitel direkt anzuspringen.
Weil es mir wichtig erschien, dass die ersten Kapitel der Reihe nach durchgearbeitet werden,
gab es dieses Navigationsmenü in den ersten Kapiteln nicht.
Vorarbeiten
Damit ein Navigationsmenü Sinn macht, brauchen wir natürlich erst einmal mehrere Seiten, zwischen denen wir hin und her navigieren.
Bitte erstelle folgende 3 HTML Seiten:
- Startseite
- Seite Zwei
- Kontakt
- Startseite
- In die Startseite schreibst du, worum es in deinem Webauftritt geht. Du nennst diese Startseite index.html, d. h. du speicherst die Datei unter dem Namen index.html ab.
- Seite Zwei
- Auf die zweite Seite schreibst du einfach, was dir so einfällt. Wir nennen die Seite interessant_1.html
- Kontakt
- Die Seite Kontakt beinhaltet deinen Namen, Adresse, Telefon, E-Mail usw.
Natürlich kannst du zum Üben in diese Datei erst einmal Fantasiedaten schreiben. Die Seite speicherst du als kontakt.html ab.
Sind alle 3 Dateien auf deinem Server?
Kannst du sie im Browser aufrufen?
Sind sie fehlerfrei - du weißt schon, der Validator aus Kapitel 5
Dann können wir uns an unser Navigationsmenü machen.
Das Navigationsmenü ist eine unsortierte Liste, die Listenpunkte sind die Links zu unseren 3 Seiten, die wir vorbereitend erstellt haben.
Verstanden?
Ups! Was bedeuten denn die Tags <div id="navi"> am Anfang des Quellcodes und </div> am Ende des Quellcode?
Das ist ein sogenannter Container. Damit packen wir unsere Navigationsliste in einen Container namens "navi", damit wir sie später mit CSS gestalten können. Mehr zu Containern im nächsten Kapitel.
Wir bauen unser Navigationsmenü ein
Wohin soll jetzt dieser Quelltext?
Am besten ganz ans Ende unseres <body>-Bereichs - also unmittelbar vor den schließenden </body> Tag.
Anmerkung:
In einem späteren Kapitel werden wir lernen, wie dieses Navigationsmenü für alle Benutzer der Seite an die richtige Stelle "gezaubert" wird, und wie man es optisch ansprechend gestalten kann. CSS ist das Zauberwort. Doch dazu wie gesagt später mehr.
Anmerkung:
Wie dies dann später aussehen wird, kannst du auf dieser Seite schon bewundern.
Hier haben wir das Navigationsmenü mit dem Titel "Die Kapitel" überschrieben, und in eine Spalte rechts vom Inhalt platziert.
Der Screen Reader "sieht" dies natürlich nicht, und zeigt das Navigationsmenü dort, wo es im Quelltext steht, nämlich am Ende der Seite.
Dies hat den Vorteil, dass du beim Aufruf der Seite nicht erst das ganze Navigationsmenü lesen musst, sondern sofort zum Inhalt kommst.
Statt dessen gibt es am Anfang der Seite einen Link zum Navigationsmenü, hier mit dem Linktext "Sprung zur Kapitelübersicht".
Übung
Füge jetzt dein Navigationsmenü (den obigen Quelltext) auf jeder deiner 3 Seiten ein.
Wie immer: Validiere deine Seiten nach dem Ändern.
Wenn die Seiten fehlerfrei sind:
Rufe eine der Seiten im Browser auf, z. B. die Seite index.html.
Kannst du die Navigation benutzen? Kannst du zwischen den einzelnen Seiten hin und her springen, indem du die Links anklickst?
Was haben wir in dieser Lektion gelernt?
Wir haben jetzt eine "richtige" Website, die aus 3 Seiten besteht, und auf der man mittels Links zwischen den einzelnen Seiten navigieren kann.