HTML5: Übungsaufgaben zu ungeordneten Listen

Hier sind fünf einfache Übungen, die dabei helfen sollen, das Konzept von unsortierten Listen zu verstehen.


Aufgabe 1: Kategorien eines Webshops

Ein Webshop hat folgende Kategorien:

  • Kleidung
  • Schuhe
  • Elektronik
  • Bücher

Erstelle die HTML-Darstellung dieser Kategorien als unsortierte Liste.

Lösung:

<ul>
<li>Kleidung</li>
<li>Schuhe</li>
<li>Elektronik</li>
<li>Bücher</li>
</ul>
<!-- Alle Kategorien sind in einer unsortierten Liste aufgezählt. -->

Aufgabe 2: Produkte in deinem Warenkorb

Stell dir vor, du möchtest die Produkte in deinem Warenkorb anzeigen lassen. Diese Produkte sind:

  • T-Shirt
  • Jeans
  • Sonnenbrille

Erstelle die HTML-Darstellung einer unsortierten Liste für den Warenkorb.

Lösung:

<ul>
<li>T-Shirt</li>
<li>Jeans</li>
<li>Sonnenbrille</li>
</ul>
<!-- Die Produkte im Warenkorb werden als unsortierte Liste dargestellt. -->

Aufgabe 3: Eine Liste von Zahlungsmethoden

Ein Webshop erlaubt mehrere Zahlungsmethoden:

  • Kreditkarte
  • PayPal
  • Vorkasse

Erstelle die HTML-Darstellung für diese Zahlungsmethoden.

Lösung:

<ul>
<li>Kreditkarte</li>
<li>PayPal</li>
<li>Vorkasse</li>
</ul>
<!-- Zahlungsmethoden sind in einer unsortierten Liste aufgelistet. -->

Aufgabe 4: Kategorien einer Bibliothek

Eine Bibliothek hat folgende Kategorien:

  • Romane
  • Sachbücher
  • Kinderbücher
  • Zeitschriften

Wie sieht die HTML-Darstellung als unsortierte Liste aus?

Lösung:

<ul>
<li>Romane</li>
<li>Sachbücher</li>
<li>Kinderbücher</li>
<li>Zeitschriften</li>
</ul>
<!-- Jede Buch-Kategorie wird als ein Element der unsortierten Liste angezeigt. -->

Aufgabe 5: Beliebte Produkte in einem Webshop

Die beliebtesten Produkte sind:

  • Smartphone
  • Laptop
  • Kopfhörer

Zeichne eine unsortierte Liste mit diesen Produktnamen.

Lösung:

<ul>
<li>Smartphone</li>
<li>Laptop</li>
<li>Kopfhörer</li>
</ul>
<!-- Zeigt fein säuberlich die drei beliebtesten Produkte. -->

Diese Übungsaufgaben zeigen dir mehr über unsortierte Listen und wie sie in realen Anwendungen funktionieren – zum Beispiel in Webshops. Hier ist es besonders praktisch, unterschiedliche Elemente (Kategorien, Produkte, Zahlungsmethoden) kompakt und übersichtlich darzustellen.