====== 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>

Hinweis: Der Link zu / verweist auf das Hauptverzeichnis. Mehr dazu im Abschnitt relative und absolute URLs.

Und so sieht die Navigation nun aus: {{navigation-links.de.png?nolink|Navigation mit Links}} Ü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.

Im Moment ist unsere Navigation einfach eine Aneinanderreihung von Links. Meistens verwendet man für eine Navigation aber eine HTML-Liste von Links. Mit einer Liste werden die Navigationselemente entweder horizontal oder vertikal zusammen gruppiert und können so später besser formatiert werden. 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 ''%%

%%''-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>
```
Das Resultat sieht dann so aus:
- 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 ''%%