Listen
Ordnung im Chaos der Worte
HTML-Listen sind wie die fleißigen Assistenten eines Alchemisten, die verhindern, dass deine geheimen Zutaten in einem explosiven Durcheinander enden. Ohne sie würden deine Anleitungen klingen wie das Rezept für einen missglückten Zaubertrank. Mit Listen hingegen reihen sich die Zutaten ordentlich auf, wie Fläschchen im Regal, bereit, deine Tränke zum Erfolg zu führen.
Egal ob es sich um eine wilde Sammlung von Kräutern und Elixieren handelt oder um eine streng geordnete Reihenfolge für den perfekten Trank – Listen halten alles in Ordnung. Und für die besonders geheimen Formeln gibt es sogar Definitionen, die Begriffe und ihre Bedeutung so fein verweben wie das letzte Geheimnis eines Zauberbuchs.
Aufzählungen, Ordnungen und verschachtelte Strukturen
mach Inhalte übersichtlich!
Ungeordnete Listen
Aufzählungen ohne Nummerierung
Ungeordnete Listen sind wie das magische Notizbuch eines zerstreuten Zauberers, nichts hat eine feste Reihenfolge, aber alles ist irgendwie wichtig. Ob du den Wolfswurz vor oder nach dem Einhornhaar anordnest, ist völlig egal – Hauptsache, es ist alles dabei. Beginne mit dem <ul>-Element für eine ungeordnete Liste und füge danach die Listenpunkte mit dem <li>-Element hinzu.
<ul>
<li>Einhornhaar</li>
<li>Wolfswurz</li>
<li>Feenstaub</li>
</ul>ul: unordered list
li: list-item
Geordnete Listen
Aufzählungen mit Nummerierung
Geordnete Listen sind unerlässlich, wenn du sicherstellen willst, dass der Trank nicht explodiert. Beginne mit dem <ol>-Element, füge dann jedes <li> als wichtigen Schritt hinzu: Erst der Feenstaub, dann Einhornhaar und am Ende ein Tropfen Krötenträne. So wird dein Elixier garantiert kein Desaster!
<ol>
<li>Feenstaub</li>
<li>Einhornhaar</li>
<li>Krötenträne</li>
</ol>ol: ordered list
Aufzählungspunkte ändern
Deine Aufzählung gestalten
Warum bescheiden bleiben? Mit den Attributen start, value und type kannst du deine Listen nummerieren, wie es dir beliebt. Zahlen, Buchstaben, römische Ziffern, alles ist möglich. Starte die Aufzählung mit dem Buchstaben Z oder lasse deine Liste in der Mitte anfangen. Wer braucht schon Logik, wenn Magie im Spiel ist?
<ol start="5" type="a">
<li>Rezept finden</li>
<li value="1">Zutaten</li>
<li>Zauber wirken</li>
</ol>
Listen verschachteln
Für spezifische Anweisungen
Wieso bei einer Liste aufhören, wenn du Listen in Listen verschachteln kannst? Verschachtelte Listen sind wie magische Spiegelräume, endlos tiefgründig und voller Überraschungen. Kombiniere geordnete und ungeordnete Listen und verleihe deinem Werk die Struktur, die selbst ein Labyrinth-Meister nicht besser hinbekommen würde.
<ol>
<li>Finden
<ol type="a">
<li>Den richtigen Ort</li>
<li>Das magische Artefakt</li>
</ol>
</li>
<li>Sammeln
<ul>
<li>Einhornhaar</li>
<li>Feenstaub</li>
</ul>
</li>
</ol>
Beschreibungslisten
Das magische Lexikon
Beschreibungslisten sind die geheimen Seiten eines alten Zauberbuchs. Begriffe und ihre Bedeutungen tanzen hier Seite an Seite, als würdest du einer Horde Zauberer zuhören, die sich gegenseitig über den Sinn des Lebens streiten. Mit diesem Listentyp erweckst du Definitionen zum Leben, die selbst die Weisen aus den Wolken holen könnten.
<dl>
<dt>Einhorn</dt>
<dd>Ein magisches Pferd mit einem Horn</dd>
<dt>Pegasus</dt>
<dd>Ein fliegendes Pferd</dd>
</dl>dl: description list
dt: description topic
dd: description definition
In dieser Lektion hast du gelernt…
- Wie du ungeordnete Listen (
<ul>) nutzt, um Aufzählungen ohne feste Reihenfolge zu erstellen. - Warum geordnete Listen (
<ol>) wichtig sind, wenn die Reihenfolge der Einträge eine Rolle spielt. - Wie du Listen mit Attributen (
start,type,value) anpasst, um die Nummerierung individuell zu gestalten. - Wie du Listen verschachtelst, um komplexe Strukturen und Unterpunkte übersichtlich darzustellen.
- Warum Beschreibungslisten (
<dl>,<dt>,<dd>) ideal für Definitionen sind, um Begriffe und ihre Bedeutungen sinnvoll zu verbinden.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die Zutaten der Waldalchemie
In den tiefen Schatten des Waldes brauen die Alchemisten ihre geheimnisvollen Tränke. Jede Zutat – vom Mondkraut bis zum Flüstermoos – muss mit Bedacht gewählt und ordentlich aufgelistet werden, denn selbst die mächtigsten Zauber brauchen ein gutes Rezept. Mit HTML lernst du, Listen so zu strukturieren, dass kein Blatt und kein Tropfen verloren geht. Sortiere die Zutaten und erschaffe dein erstes Heilgebräu!
Deine Aufgabe: Die Gestaltung von Listen
Benutze den Editor um den Heiltrank darzustellen. Das Resultat soll wie im Bild aussehen. Verwechsle die Zutaten nicht, sonst wird der Heiltrank ganz schnell zum Schlaftrank! Nutze dazu eine verschachtelte Liste, eine ungeordnete Liste und zum Schluss eine Beschreibungsliste.
<h1>Rezept für den Heiltrank</h1>
<!-- Geordnete Liste der Schritte -->
<ol type="I" start="1">
<li>Wasser aus der Quelle von Greenwood Hollow abfüllen</li>
<li>Die folgenden Zutaten sammeln:
<!-- Verschachtelte ungeordnete Liste -->
<ul>
<li>Mondkraut</li>
<li>Leuchtende Beeren</li>
<li>Sternenstaub</li>
</ul>
</li>
<li>Die Zutaten bei Mondschein mischen</li>
<li>Fünf Tropfen Drachenträne hinzufügen</li>
</ol>
<!-- Ungeordnete Liste der benötigten Werkzeuge -->
<h2>Benötigte Werkzeuge</h2>
<ul>
<li>Alchemie-Kessel</li>
<li>Magischer Löffel</li>
<li>Gläser zur Aufbewahrung</li>
</ul>
<!-- Beschreibungslisten für die Zutaten -->
<h2>Beschreibung der Zutaten</h2>
<dl>
<dt>Mondkraut</dt>
<dd>Eine seltene Pflanze, die nur bei Vollmond blüht.</dd>
<dt>Leuchtende Beeren</dt>
<dd>Kleine Beeren, die im Dunkeln leuchten und heilende Kräfte besitzen.</dd>
<dt>Sternenstaub</dt>
<dd>Ein magisches Pulver, das aus den Überresten von fallenden Sternen gewonnen wird.</dd>
</dl>