← Zurück zur Übersicht

A05 – Startseite: Navigation & Links

🎯 Lernziel: Du kannst Links (<a>) setzen und eine einfache Navigation mit relativen Pfaden aufbauen, die alle fünf Seiten miteinander verbindet.

Referenz im Kurs: → Beispiele a_09_tags-textauszeichnung.html, a_10_textauszeichnung-beispiel-links.html

Stand des Projekts

Bisher hast du angelegt:

Es fehlen noch: luft.html und wasser.html – lege diese als leere Seiten mit Grundgerüst und einem Platzhalter-Text an (die füllst du in A06 und A07).

Aufgabe A05

Teil A – Navigation auf der Startseite

Öffne deine index.html und ergänze eine Navigation mit Links zu allen vier Elementseiten. Verwende dafür ein <nav>-Element:

<nav>
    <ul>
        <li><a href="feuer.html">🔥 Feuer</a></li>
        <li><a href="erde.html">🪨 Erde</a></li>
        <li><a href="luft.html">💨 Luft</a></li>>
        <li><a href="wasser.html">💧 Wasser</a></li>
    </ul>
</nav>

Teil B – Inhalt der Startseite ausbauen

Die Startseite soll eine kurze Einführung in die Vier-Elemente-Lehre enthalten. Füge nach der Navigation ein:

  1. Einen einleitenden Absatz über die Vier-Elemente-Lehre der Antike (Empedokles, Aristoteles)
  2. Für jedes der vier Elemente: eine <h2>-Überschrift, 2–3 Sätze Beschreibung und einen Link <a href="…">Mehr lesen</a> zur jeweiligen Unterseite

Teil C – Navigation auf jeder Unterseite

Füge auf feuer.html und erde.html oben eine Navigationszeile ein, die zurück zur Startseite führt und zu den anderen Seiten:

<nav>
    <a href="index.html">Startseite</a> |
    <a href="feuer.html">Feuer</a> |
    <a href="erde.html">Erde</a> |
    <a href="luft.html">Luft</a> |
    <a href="wasser.html">Wasser</a>
</nav>
💡 Relative Pfade:
Wenn alle HTML-Dateien im gleichen Ordner liegen, reicht der Dateiname als Pfad: href="feuer.html"

Liegt eine Datei in einem Unterordner: href="unterordner/seite.html"
Eine Ebene nach oben: href="../index.html"
⚠️ Wichtig beim Testen: Links funktionieren nur, wenn die Dateien tatsächlich existieren und die Schreibweise exakt übereinstimmt – Groß-/Kleinschreibung beachten! Auf einem Mac ist Feuer.html und feuer.html dasselbe – auf einem Webserver oft nicht!
🚫 Achtung: Keine Sonderzeichen oder Leerzeichen in Dateinamen! Datei- und Ordnernamen für Webseiten dürfen keine Leerzeichen, Umlaute oder Sonderzeichen enthalten. Was lokal auf dem eigenen Rechner noch funktioniert, führt spätestens auf einem Webserver zu defekten Links.

Verboten: Über uns.html  ·  vier elemente.html  ·  wässer.html
Erlaubt: ueber-uns.html  ·  vier-elemente.html  ·  wasser.html

Bewährte Konvention: nur Kleinbuchstaben, Ziffern und Bindestriche (a–z, 0–9, -).

Zusatzaufgabe

Füge einen externen Link zur Wikipedia-Seite über die Vier-Elemente-Lehre ein. Externe Links sollen in einem neuen Tab öffnen:

<a href="https://de.wikipedia.org/wiki/Vier-Elemente-Lehre" target="_blank">
    Wikipedia: Vier-Elemente-Lehre
</a>

Was bewirkt das Attribut target="_blank"?