09 – Listen & Selektoren 📋

🎯 1. Einleitung & W3Schools

In Kapitel 09 hast du gelernt, wie man Listen strukturiert, mit CSS gestaltet und warum text-decoration: none bei Navigationen wichtig ist.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – HTML Lists
🔗 W3Schools – CSS Lists

🧠 2. KI-Prompt-Training – strukturiert denken

Deine Aufgabe: Formuliere einen Prompt, der keinen Listen-Code liefert, sondern dir hilft, zu verstehen, wie Listen strukturiert und gestaltet werden.

❌ Vermeide: „Gib mir eine Navigation als Liste.“ ✅ Fragen, die denken erzwingen:

• „Warum ist <ul> für eine Navigation semantisch korrekt – und nicht <div>?“
• „Erkläre mir, warum text-decoration: none bei Navigationslinks wichtig ist.“
• „Welche CSS-Eigenschaften werden von <ul> auf <li> vererbt – und welche nicht?“

🔍 Aufgabe 1: Analysiere – nicht erstelle!

Ein Schüler hat folgenden Code abgegeben:

<div>
  <a href="start.html">Start</a>
  <a href="kontakt.html">Kontakt</a>
</div>

<style>
  a { text-decoration: underline; }
</style>

Schreibe (auf Papier oder in Textdatei):

1. Warum ist die Verwendung von <div> für eine Navigation semantisch falsch?
2. Warum ist text-decoration: underline bei Navigationslinks oft unpassend?
3. Welche drei HTML-Elemente müsste man stattdessen verwenden – und warum?
4. Welche CSS-Eigenschaften müsste man setzen, um die Punkte zu entfernen und horizontale Ausrichtung zu erzeugen?

🧭 Aufgabe 2: Strukturiere bewusst – erst nach der Analyse!

Erstelle eine HTML-Datei liste.html mit folgenden Anforderungen:

• Eine ungeordnete Liste mit drei Themen deiner Wahl (z. B. Hobbys, Fächer)
• Eine verschachtelte Liste darin (mindestens eine Ebene tief)
• Eine Navigation als Liste im <nav>-Element
• Externe CSS-Datei css/stil.css, die:
  • Punkte bei der Navigation entfernt
  • horizontale Ausrichtung erzeugt
  • Unterstriche bei allen Links entfernt
  • verschachtelte Listen mit anderem Aufzählungszeichen gestaltet