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.

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

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

Das Resultat sieht so aus:

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.

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>

Im nächsten Teil sehen wir, wie die Navigation horizontal dargestellt und schön formatiert werden kann. Sobald die Navigation fertig gestellt ist, werden wir sie auch in allen anderen Seiten einfügen.

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>

Hinweis: Blogeinträge werden meist in umgekehrter Reihenfolge aufgelistet, so dass der letzte Eintrag zuoberst in der Liste erscheint.

Wie weiter?

→ Fahren Sie weiter mit Teil 7: Bootstrap Framework verwenden.

code.makery