Hier sind 5 einfache Übungen, um das Wissen über nummerierte Listen in einer praktischen Webshop-Umgebung zu festigen.

Aufgabe 1: Schritte im Bestellprozess

Ein Webshop erklärt die Schritte im Bestellprozess:

1. Artikel in den Warenkorb legen
2. Zum Warenkorb gehen
3. Zahlungsmethode auswählen
4. Bestellung abschließen

Wie sieht der HTML-Code aus?

Lösung:

<ol>
  <li>Artikel in den Warenkorb legen</li>
  <li>Zum Warenkorb gehen</li>
  <li>Zahlungsmethode auswählen</li>
  <li>Bestellung abschließen</li>
</ol>
<!-- Eine nummerierte Liste, die den Bestellprozess Schritt für Schritt zeigt. -->

Aufgabe 2: Beste Kategorien im Webshop

Ein Webshop listet seine besten Kategorien:

1. Elektronik
2. Kleidung
3. Sportartikel

Erstelle die Liste in HTML.

Lösung:

<ol>
  <li>Elektronik</li>
  <li>Kleidung</li>
  <li>Sportartikel</li>
</ol>
<!-- Die besten Kategorien sind von 1 bis 3 nummeriert. -->

Aufgabe 3: Top 3 Verkäufe rückwärts anzeigen

Zeige die Top 3 Artikel eines Webshops rückwärts an:

3. Kopfhörer
4. Smartphone
5. Laptop

Wie sieht die HTML-Lösung aus?

Lösung:

<ol reversed>
  <li>Kopfhörer</li>
  <li>Smartphone</li>
  <li>Laptop</li>
</ol>
<!-- Die Liste zählt die Artikel von Platz 3 auf Platz 1. -->

Aufgabe 4: Kategorien mit Großbuchstaben auflisten

Ein Webshop hat 3 Hauptkategorien: A. Möbel
B. Garten
C. Beleuchtung

Erstelle die HTML-Darstellung.

Lösung:

<ol type="A">
  <li>Möbel</li>
  <li>Garten</li>
  <li>Beleuchtung</li>
</ol>
<!-- Die Kategorien werden mit Großbuchstaben nummeriert. -->

Aufgabe 5: Liste beginnt bei 5

Zeige eine Liste von Kategorien, die bei Nummer 5 beginnt:

5. Kleidung
6. Technik
7. Spielzeug

Schreibe den HTML-Code.

Lösung:

<ol start="5">
  <li>Kleidung</li>
  <li>Technik</li>
  <li>Spielzeug</li>
</ol>
<!-- Die Liste beginnt bei der Nummer 5 und hört bei der Nummer 7 auf. -->

Mit diesen Aufgaben lernst du, wie einfach nummerierte Listen sein können, und du bekommst einen besseren Eindruck davon, wie sie in der Programmierung (z. B. für Webshops) verwendet werden!