Listen in HTML

Ungeordnete Listen

Ungeordnete Listen verwenden Bulletpoints:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
    <li>Dritter Punkt</li>
</ul>

Geordnete Listen

Geordnete Listen verwenden Nummern oder Buchstaben:

<ol>
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
    <li>Dritter Schritt</li>
</ol>

Attribute für geordnete Listen

<!-- Beginnt bei 5 -->
<ol start="5">
    <li>Punkt fünf</li>
    <li>Punkt sechs</li>
</ol>

<!-- Andere Nummerierungsarten -->
<ol type="A">
    <li>Punkt A</li>
    <li>Punkt B</li>
</ol>

Beschreibungslisten

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language - die Struktursprache des Webs</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - für die Gestaltung von HTML-Dokumenten</dd>
</dl>

Verschachtelte Listen

Listen können auch ineinander verschachtelt werden:

<ul>
    <li>Hauptpunkt 1</li>
    <li>
        Hauptpunkt 2
        <ul>
            <li>Unterpunkt 2.1</li>
            <li>Unterpunkt 2.2</li>
        </ul>
    </li>
    <li>Hauptpunkt 3</li>
</ul>

Übung: Listen erstellen

Aufgabe: Erstellen einer Interessen- und Hobbyseite mit Listen

1. Erstellen Sie eine neue Seite “interessen.html” für Ihren Blog

   • Nutzen Sie wieder die gleiche Grundstruktur
   • Setzen Sie einen passenden Titel (“Meine Interessen und Hobbys - Mein Web-Tagebuch”)

2. Die Seite soll folgende Elemente enthalten:

   • Eine Hauptüberschrift “Meine Interessen und Hobbys”
   • Mindestens drei Abschnitte mit verschiedenen Kategorien (z.B. “Bücher”, “Filme”, “Sport”, “Reisen”, “Kochen”, etc.)

3. Für jede Kategorie:

   • Eine Unterüberschrift (h2) mit dem Namen der Kategorie
   • Eine passende Liste:
     • Für Sammlungen oder Favoriten: Ungeordnete Liste (<ul>) mit mindestens 5 Einträgen
     • Für Ranglisten/Top-Listen: Geordnete Liste (<ol>) mit mindestens 3 Einträgen
     • Für Begriffserklärungen: Eine Beschreibungsliste (<dl>) mit mindestens 3 Begriffen

4. Erweitern Sie mindestens eine Liste zu einer verschachtelten Liste:

   • z.B. unter “Reisen” eine Unterliste mit Orten, die Sie in einem bestimmten Land besucht haben
   • oder unter “Filme” eine Unterliste mit Filmen eines bestimmten Regisseurs oder Genres

Bonus

• Verwenden Sie eine Mischung aus verschiedenen Listentypen und experimentieren Sie mit der Verschachtelung
• Fügen Sie eine visuelle Unterscheidung hinzu, indem Sie bei einigen Listenpunkten die Liste händisch mit Unicode-Zeichen erzeugen (z.B. ✓ für erledigte Punkte oder ★ für besonders wichtige Punkte)
• Ändern Sie die Nummerierung der Zubereitungsschritte so, dass sie mit der Nummer 0 beginnt (für die Vorbereitung) und verwenden Sie römische Zahlen.