HTML - Unordnete Listen

Hallo da draußen, zukünftige Web-Entwickler! Heute tauchen wir in die wunderbare Welt der HTML unordneten Listen ein. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Glaube mir, am Ende dieses Tutorials wirst du Listen wie ein Profi erstellen können!

HTML - Unordered Lists

Was ist eine Unordnete Liste?

Bevor wir uns dem Code zuwenden, lassen uns verstehen, was eine unordnete Liste ist. In HTML ist eine unordnete Liste eine Sammlung von verwandten Elementen, die keine bestimmte Reihenfolge haben. Denke daran wie eine Einkaufsliste - du musst nicht unbedingt das Brot vor der Milch oder die Äpfel vor den Bananen kaufen. Die Reihenfolge ist egal, aber sie sind alle Teil derselben Liste.

In HTML erstellen wir unordnete Listen mit dem <ul>-Tag, und jedes Element der Liste wird in <li>-Tags eingeschlossen. Sehen wir uns ein einfaches Beispiel an:

<ul>
<li>Äpfel</li>
<li>Banenen</li>
<li>Orangen</li>
</ul>

Dieser Code wird dargestellt als:

Äpfel
Banenen
Orangen

So einfach war das! Der Browser fügt automatisch Aufzählungszeichen zu jedem Element hinzu. Aber was ist, wenn du diese Aufzählungszeichen ändern möchtest? Genau dort kommt unser nächster Abschnitt ins Spiel!

Unordnete HTML-Liste - Auswählen des Listenpunktmarkers

Nun, lassen uns das ein wenig aufpeppen. HTML ermöglicht es uns, den Stil unserer Aufzählungszeichen zu ändern, oder wie wir sie im Fachjargon nennen, "Listenpunktmarker". Wir haben drei Hauptoptionen:

disc (Standard)
circle
square

Um den Marker zu ändern, verwenden wir das type-Attribut im <ul>-Tag. Sehen wir uns an, wie das funktioniert:

<ul type="disc">
<li>Diese Liste verwendet den Standard disc-Marker</li>
</ul>

<ul type="circle">
<li>Diese Liste verwendet einen kreisigen Marker</li>
</ul>

<ul type="square">
<li>Diese Liste verwendet einen quadratischen Marker</li>
</ul>

Dieser Code wird dargestellt als:

• Diese Liste verwendet den Standard disc-Marker

○ Diese Liste verwendet einen kreisigen Marker

■ Diese Liste verwendet einen quadratischen Marker

Cool, oder? Es ist, als würde man seiner Liste ein Mini-Makeover geben!

Beispiele für Unordnete Listen

Nun, da wir die Grundlagen kennen, schauen wir uns einige komplexere Beispiele an. Denke daran, Übung macht den Meister, also kopiere diese Beispiele ruhig und versuche sie selbst aus!

Geschachtelte Unordnete Listen

Manchmal möchtest du eine Liste innerhalb einer Liste erstellen. Wir nennen das eine geschachtelte Liste. Hier ist, wie du das machst:

<ul>
<li>Kaffee</li>
<li> Tee
<ul>
<li>Schwarzer Tee</li>
<li>Grüner Tee</li>
<li>Kräutertee</li>
</ul>
</li>
<li>Milch</li>
</ul>

Dies wird dargestellt als:

Kaffee
Tee
Schwarzer Tee
Grüner Tee
Kräutertee
Milch

Beachte, wie die geschachtelte Liste eingerückt ist? Das ist HTMLs Weg, zu zeigen, dass diese Elemente Unterategorien von "Tee" sind.

Unordnete Liste mit Links

Listen sind nicht nur für einfachen Text. Du kannst andere HTML-Elemente in deine Listenpunkte einfügen. Zum Beispiel, erstellen wir eine Liste von Lieblings-Websites:

<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>

Dies erstellt eine anklickbare Liste von Websites:

Unordnete Liste mit Bildern

Lassen wir es noch aufwendiger werden und fügen einige Bilder zu unserer Liste hinzu:

<ul>
<li><img src="apple.jpg" alt="Apfel"> Apfel</li>
<li><img src="banana.jpg" alt="Banane"> Banane</li>
<li><img src="orange.jpg" alt="Orange"> Orange</li>
</ul>

Dieser Code wird eine Liste mit kleinen Bildern neben jedem Fruchtname anzeigen. Es ist eine großartige Möglichkeit, deine Listen visuell ansprechender zu gestalten!

Zusammenfassung der Methoden für Unordnete Listen

Hier ist eine praktische Tabelle, die die Methoden zusammenfasst, die wir gelernt haben, um unordnete Listen zu erstellen und anzupassen:

Methode	Syntax	Beschreibung
Basic Unordered List	`<ul><li>Element</li></ul>`	Erstellt eine grundlegende unordnete Liste
Change List Marker	`<ul type="circle">`	Ändert den Stil des Listenpunktmarkers
Nested List	`<ul><li><ul><li>Geschachteltes Element</li></ul></li></ul>`	Erstellt eine Liste innerhalb einer Liste
List with Links	`<ul><li><a href="url">Link</a></li></ul>`	Erstellt eine Liste von anklickbaren Links
List with Images	`<ul><li><img src="bild.jpg"> Element</li></ul>`	Fügt Bilder zu den Listenpunkten hinzu

Und da hast du es, Leute! Du bist jetzt gut gerüstet, um unordnete Listen in HTML zu erstellen und anzupassen. Denke daran, der Schlüssel zum Beherrschen dieser Fähigkeiten ist die Übung. Also weiter experimentieren und nicht afraid to get creative!

Als wir den Abschluss näher rücken, erinnere ich mich an einen kleinen Coding-Witz: Warum hat der Entwickler seinen Job gekündigt? Weil er keine Arrays bekam! ? Keine Sorge, wir kommen noch zu Arrays. Bis dahin, weiter listen und coden!

Credits: Image by storyset

Vorheriges Tutorial:

HTML - Listen

Nächstes Tutorial:

HTML - Geordnete Listen