Aufgabe:

  1. Erstelle eine geordnete Liste (<ol>) mit 3 bis 5 Unterpunkten.

  2. Erstelle eine ungeordnete Liste (<ul>) mit mindestens 3 Unterpunkten

  3. Füge die Listen in eine neue Box ein.

  4. Experimentiere mit CSS-Styling der Listen (z. B. Farbe, Abstand oder Listenzeichen).

Erklärung:

Listen helfen, Informationen zu strukturieren.

  • Geordnete Listen (<ol>): Automatische Nummerierung der Einträge, sinnvoll für Schritt-für-Schritt-Anleitungen oder Ranglisten.

  • Ungeordnete Listen (<ul>): Punkte (Bullets) ohne Reihenfolge, z. B. für Hinweise, Inventar oder Ideen.

  • Listenelemente werden mit <li> (list item) definiert.

Technische Umsetzung:

1. Geordnete Liste (<ol>)

 <ol>
  <li>Demogorgon finden</li>
  <li>Rätsel lösen</li>
  <li>Portal schließen</li> 
</ol>

  • <ol> = geordnete Liste

  • <li> = Eintrag der Liste

  • Dein Browser nummeriert automatisch

2. Ungeordnete Liste (<ul>)

<ul>
  <li>Geheimer Hinweis</li>
  <li>Magischer Schlüssel</li>       
  <li>Versteckte Nachricht</li>
</ul>

  • <ul> = ungeordnete Liste

  • Standardmäßig mit Punkten (Bullets)

3. Listen in eine Box einfügen

<section class="box">
  <h2>Missionen</h2>
  <ol>
    <li>Demogorgon finden</li>
    <li>Rätsel lösen</li>
    <li>Portal schließen</li>
  </ol>
  <ul>
    <li>Geheimer Hinweis</li>
    <li>Magischer Schlüssel</li>
    <li>Versteckte Nachricht</li>
  </ul>
</section>

4. Listen mit CSS stylen

ul li {
  color: #ff6666;
  margin-bottom: 5px;
}

ol li {
  color: #3333ff;
  margin-bottom: 8px;
}

  • color → Textfarbe

  • margin-bottom → Abstand zwischen Einträgen

  • Listenzeichen können mit list-style-type verändert werden, z. B.:

    ul {
  list-style-type: square;  /* quadratische Bullets */
}

ol {
  list-style-type: lower-roman; /* römische Zahlen */
}

Grundlegende Fachkonzepte (zum Merken)

Listenelement (<li>)

  • Eintrag innerhalb einer Liste (<ul> oder <ol>)

Geordnete Liste (<ol>)

  • Automatische Nummerierung

  • Sinnvoll für Reihenfolgen oder Schritte

Ungeordnete Liste (<ul>)

  • Punkte ohne Reihenfolge

  • Ideal für Aufzählungen, Hinweise, Inventar

CSS-List-Style

  • list-style-type = Art der Punkte oder Zahlen

  • margin und padding = Abstand und Lesbarkeit

Verschachtelte Listen

  • Listen können ineinander verschachtelt werden

  • Beispiel: ein Schritt in einer geordneten Liste enthält eine ungeordnete Unterliste

Zuletzt geändert: Dienstag, 16. Dezember 2025, 09:16