8 - Navigation, Ordner und Seiten

1. Ersetzte die Rauten # im "a"-Element mit den richtigen Pfadangaben
2. Die Inhaltseite sollen in einem Ordner "seiten" abgelegt werden, erstelle folgende Navigationsliste:
   
   • Home: <a href="index.html">Home</a>
   • Seite 1: <a href="seiten/seite1.html">Seite 1</a>
   • Seite 2: <a href="seiten/seite1.html">Seite 1</a>
   • Seite 3: <a href="seiten/seite1.html">Seite 1</a>
   • Beachte: Der Ordner für die weiteren Seiten wird im Link bereits geschrieben, auch wenn er erst später erstellt wird.
3. Erstelle in deinem Projektordner "weblabor" einen Unterordner "seiten"
4. Stelle sicher, das deine index.html-Datei gespeichert ist
5. Mit "Speichern unter" erstellst du deine erste Unterseite im Unterordner: "seiten/seite1.html"
6. Öffne "seite1.html" und passe die Pfadangaben der Position der Seite entsprechend an:
   
   • Die Externe CSS-Datei: <link rel="stylesheet" href="../css/weblabor.css">
     ( Die Pfadangabe: ../ führt einen Ordner nach oben )
   • Home: <a href="../index.html">
   • Seite 1: <a href="seite1.html">
   • Seite 2: <a href="seite2.html">
   • Seite 3: <a href="seite2.html">
   • Beachte :.Die verlinkung ohne Pfadangabe, bezieht sich auf seiten die im gleichen Ordner liegen.
7. Ergänze auch den Title im head-Bereich, den Titel und den Inhaltstext.
8. Speichere "seite1.html"
9. Erstelle aus der "seite1.html" auch "seite2.html" und "seite3.html"
10. Speichere alle deine Dateien

11.  Mit Klick auf den Button "Live-Vorschau" kannst du die Startseite im Browser öffnen und durch alle Seiten navigieren.

Weiter, die Navigation Formatieren

Beispieldateien: Startseite verlinkt

Code-Beispiel 1 (Navigation in index.html)

<nav class="top">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="seiten/seite1.html">Seite 1</a></li>
        <li><a href="seiten/seite2.html">Seite 2</a></li>
        <li><a href="seiten/seite3.html">Seite 3</a></li>
    </ul>
</nav>

Code-Beispiel 2 (Navigation in seite1.html)

<nav class="top">
    <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a href="seite1.html">Seite 1</a></li>
        <li><a href="seite2.html">Seite 2</a></li>
        <li><a href="seite3.html">Seite 3</a></li>
    </ul>
</nav>