Inhaltsverzeichnis
Listen
Eine weitere Möglichkeit Texte zu formatieren sind Listen. In Textverarbeitungsprogrammen unterscheidet man zwischen geordneten Listen (Listen mit Nummerierung) und ungeordneten Listen (Listen mit Anstrichen ohne Nummerierung). Diese beiden Listenarten gibt es auch in HTML. Der Tag <ol>...</ol> steht für eine geordnete Liste, der Tag <ul>...</ul> für eine ungeordnete Liste. Innerhalb dieser Tags werden die einzelnen Listeneinträge in den Tag <li>...</li> geklammert.
Der folgende Quelltext zeigt ein erstes Beispiel für die Verwendung von Listen.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Listenbeispiele</title> </head> <body> <h2>Listenbeispiele</h2> <h3>Eine geordnete Liste</h3> <ol> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ol> <h3>Eine ungeordnete Liste</h3> <ul> <li>Ein Eintrag</li> <li>Ein Eintrag</li> <li>Ein Eintrag</li> </ul> </body> </html>
Ergebnis im Webbrowser:
Verschachtelte Listen
Listen können auch verschachtelt sein. Dies wird im folgenden Beispiel gezeigt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Verschachtelte Listen</title> </head> <body> <h2>Verschachtelte Listen</h2> <h3>Eine geordnete Liste:</h3> <ol> <li><h4>Der erste Listeneintrag ist eine ungeordnete Liste:</h4> <ul> <li>Ein Untereintag</li> <li>Ein Untereintag</li> <li>Ein Untereintag</li> </ul> </li> <li><h4>Der zweite Listeneintrag ist eine geordnete Liste:</h4> <ol> <li>Erster Untereintag</li> <li>Zweiter Untereintag</li> <li>Dritter Untereintag</li> </ol> </li> </ol> </body> </html>
Ergebnis im Webbrowser:
Erklärvideo
Aufgaben
Aufgabe 1
Teste die dargestellten Codebeispiele!
Aufgabe 2
Erstelle den HTML-Quelltext für das folgende Listenbeispiel!
Aufgabe 3
Informiere dich unter https://wiki.selfhtml.org/ über Definitionslisten, Verzeichnis- und Menülisten und HTML-Eigenschaften von Listen! Entwirf eine eigene Beispieldatei!
Beispiel:
Hier können Fragen zum Inhalt der Seite gestellt werden.