Listen: nummeriert und unnummeriert
Erstellen Sie nummerierte Listen und Aufzählungslisten
Listen: nummeriert und unnummeriert ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Listen: Geordnet und ungeordnet
Willkommen zur nächsten Lektion! Heute lernen Sie, wie Sie Listen in HTML erstellen. Listen helfen dabei, Informationen zu strukturieren und leichter lesbar zu machen.
Was sind Listen?
Listen eignen sich hervorragend, um zusammengehörige Elemente zu gruppieren. HTML kennt zwei Hauptarten von Listen:
- Geordnete Listen: Die Elemente sind nummeriert (1, 2, 3 ...).
- Ungeordnete Listen: Die Elemente werden mit Aufzählungszeichen dargestellt.
Lernen wir, wie beide Arten erstellt werden!
Eine geordnete Liste erstellen
Eine geordnete Liste wird mit dem Tag <ol> erstellt. Jedes Listenelement wird mit dem Tag <li> (Listenelement) hinzugefügt.
Beispiel:
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to school</li>
</ol>
Eine ungeordnete Liste erstellen
Eine ungeordnete Liste wird mit dem Tag <ul> erstellt. Jedes Element wird wie bei geordneten Listen mit dem Tag <li> hinzugefügt.
Beispiel:
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
Verschachtelte Listen
Sie können eine Liste innerhalb einer anderen Liste erstellen. Dies wird als verschachtelte Liste bezeichnet. Sie können nummerierte und nicht nummerierte Listen ineinander verschachteln.
Beispiel:
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>
Listen mit Beschreibungen
Mit HTML können Sie außerdem Beschreibungslisten mithilfe der Tags <dl>, <dt> und <dd> erstellen:
<dl>: Definiert die Liste.<dt>: Definiert den Begriff (Titel).<dd>: Definiert die Beschreibung.
Beispiel:
<dl>
<dt>HTML</dt>
<dd>The language used to create web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Listen formatieren
Mit CSS können Sie das Erscheinungsbild Ihrer Listen ändern. Sie können beispielsweise die Art der Aufzählungszeichen oder Nummern ändern.
Beispiel:
<style>
ul {
list-style-type: square; /* Changes bullets to squares */
}
ol {
list-style-type: upper-roman; /* Changes numbers to Roman numerals */
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>
Selbst ausprobieren
Erstellen Sie eine einfache Webseite mit nummerierten und nicht nummerierten Listen. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>My To-Do List</h1>
<h2>Morning Routine</h2>
<ol>
<li>Wake up</li>
<li>Brush my teeth</li>
<li>Have breakfast</li>
</ol>
<h2>Shopping List</h2>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</body>
</html>
Großartige Arbeit!
Herzlichen Glückwunsch! Sie haben gelernt, wie man nummerierte und nicht nummerierte Listen, verschachtelte Listen und Beschreibungslisten erstellt. Diese Listen sind hilfreiche Werkzeuge, um Informationen auf Ihren Webseiten zu organisieren. In der nächsten Lektion lernen Sie, wie Sie Links hinzufügen, um verschiedene Seiten und Websites miteinander zu verbinden. Freuen Sie sich auf weitere spannende Inhalte!
Häufig gestellte Fragen
Ist die Lektion „Listen: nummeriert und unnummeriert“ kostenlos?
Ja — der vollständige Text von „Listen: nummeriert und unnummeriert“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Listen: nummeriert und unnummeriert“?
Erstellen Sie nummerierte Listen und Aufzählungslisten Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Listen: nummeriert und unnummeriert“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Überschriften und Absätze
- Listen: nummeriert und unnummeriert
- Links: Das Web verbinden
- Bilder: Bilder zu Ihrer Seite hinzufügen