Teil 6: Navigation
In diesem Teil werden wir eine Navigation einfügen, damit die Besucher zwischen den verschiedenen Seiten wechseln können.
Eine Navigation besteht eigentlich aus ganz normalen Links zu anderen Seiten. Wir beginnen mit einer ganz einfachen Variante und werden diese dann laufend verbessern, bis wir eine schöne und komplette Navigation auf allen Seiten haben.
Zuerst werden wir die Navigation nur für unsere Startseite programmieren. Erst am Schluss werden wir diese dann in alle anderen Seiten hinein kopieren.
Navigation mit Links
Öffnen Sie index.html von der Startseite.
Mit einfachen Links können wir von der Startseite auf die anderen Seiten springen. Die Navigation kommt im body-Teil noch vor dem Titel. Fügen Sie also folgende vier Links zwischen body-Tag und dem Titel ein:
index.html
<body> <a href="/">Home</a> <a href="/blog/">Blog</a> <a href="/projekte/">Projekte</a> <a href="/kontakt/">Kontakt</a> <h1 class="title">Web Portfolio von Marco</h1>
/ verweist auf das Hauptverzeichnis. Mehr dazu im Abschnitt relative und absolute URLs.
Überprüfen Sie, ob die Links auch wirklich funktionieren und Sie zur gewollten Seite bringen.
Hinweis: Wenn Sie die Seite als Datei direkt im Browser öffnen (ohne die Live-Vorschau vom Brackets-Editor), dann werden die Links nicht ganz korrekt funktionieren. Der Grund ist, dass das Dateisystem einfach den Ordnerinhalt anzeigt und nicht automatisch index.html öffnet. Sie müssen dann manuell auf index.html klicken.
Sobald Sie aber die Seite auf einem Server veröffentlichen, sollten die Links ganz normal funktionieren.
Wir lernen nun, wie man in HTML Listen erstellen kann.
Listen
Es gibt viele Situationen, in denen man Listen verwendet. In HTML gibt es drei verschiedene Arten von Listen: ungeordnete Listen, geordnete Listen und Definitionslisten. Definitionslisten werden nicht so häufig verwendet. Deshalb werden wir uns hier nur die ersten beiden genauer anschauen.
Ungeordnete Listen
Eine ungeordnete Liste ist ganz einfach eine Liste von Einträgen, bei welchen die Reihenfolge beliebig ist. Ungeordnete Listen werden in HTML mit dem Element <ul> erstellt (steht für unordered list). Für jeden Eintrag in der Liste braucht es innerhalb des <ul>-Elements ein <li>-Element (steht für list item).
Hier ein Beispiel einer Todo-Liste:
<ul> <li>Einkaufen</li> <li>Katze füttern</li> <li>Grossmutter besuchen</li> </ul>
- Einkaufen
- Katze füttern
- Grossmutter besuchen
Geordnete Listen
Bei geordneten Listen ist die Reihenfolge entscheidend und wird deshalb nummeriert. In HTML sieht sie sehr ähnlich aus wie die ungeordnete Liste: Anstelle des <ul>-Elementes wird ein <ol>-Element verwendet (steht für ordered list).
Ein typisches Beispiel für eine geordnete Liste ist die Zubereitung in einem Rezept:
<ol> <li>Eier aufschlagen, salzen und mit einer Gabel leicht verschlagen.</li> <li>Milch darunter mischen.</li> <li>Butter in einer Pfanne schmelzen und die Eimischung hineingeben.</li> <li>Wenn es cremig ist, vom Herd nehmen und mit Schnittlauch bestreuen.</li> </ol>
- Eier aufschlagen, salzen und mit einer Gabel leicht verschlagen.
- Milch darunter mischen.
- Butter in einer Pfanne schmelzen und die Eimischung hineingeben.
- Wenn es cremig ist, vom Herd nehmen und mit Schnittlauch bestreuen.
Navigation als Liste
Wir werden die Navigation von unserem Portfolio nun als ungeordnete Liste programmieren.
Die Links unserer Navigation werden also alle verpackt in <li>-Elemente, welche innerhalb eines <ul>-Elements liegen:
<ul> <li><a href="/">Home</a></li> <li><a href="/blog/">Blog</a></li> <li><a href="/projekte/">Projekte</a></li> <li><a href="/kontakt/">Kontakt</a></li> </ul>
Blogeinträge als Liste
Auf unserer Blog-Seite hatten wir noch etwas Platz gelassen, wo wir unserer Blogeinträge auflisten können. Da wir nun wissen, wie Listen in HTML erstellt werden, können wir die Blogeinträge angeben.
Öffnen Sie die Blog-Seite blog/index.html. Fügen Sie unterhalb der Überschrift “Blogeinträge” eine Liste mit Blogeinträgen ein:
blog/index.html
<h2>Blogeinträge</h2> <!-- Hier kommt eine Liste mit allen Blogeinträgen. --> <ul> <li>Weitere Einträge folgen...</li> <li><a href="zweiter-eintrag/">Zweiter Eintrag</a></li> <li><a href="erster-eintrag/">Erster Eintrag</a></li> </ul>
Wie weiter?
→ Fahren Sie weiter mit Teil 7: Bootstrap Framework verwenden.
Diese Seite ist abgeleitet von code.makery von Marco Jakob, verwendet unter CC BY.
Sie ist lizenziert unter CC BY-NC-SA von Daniel Fahrni daniel.fahrni@bzz.ch.