Listen
Es gibt in HTML „ungeordnete Listen“, „geordnete Listen“ und Beschreibungslisten. Ungeordnete Listen haben nur ein Symbol als Aufzählungszeichen und geordnete Listen eine Nummerierung. Beschreibungslisten ermöglichen eine oder mehrere Beschreibungen zu jedem Listenelement.
Mit dem „ul“-Element können „ungeordnete Listen“ erstellt werden. Das „ul“ steht dabei für „unordered list“, was auf deutsch „ungeordnete Liste“ heißt. Die einzelnen Listenelemente werden dann mit dem „li“-Element gebildet:
<ul>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
<li>Drittes Listenelement</li>
</ul>
Mit dem „type“-Attribut kann die Form der Aufzählungszeichen definiert werden. Dabei kann das „type“-Attribut die Werte „disc“ (ausgefüllter Kreis), „circle“ (unausgefüllter Kreis) und „square“ (unausgefülltes Rechteck) annehmen. Wird das „type“-Attribut nicht verwendet, wird bei ungeordneten Listen automatisch der ausgefüllte Kreis als Aufzählungszeichen verwendet.
Beispiel 1
HTML-Datei:
Ergebnis:
Ungeordnete Liste ohne type-Attribut
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Ungeordnete Liste mit type="circle"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Ungeordnete Liste mit type="square"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Ergebnis im Browser:
Mit dem „ol“-Element können „geordnete Listen“ erstellt werden. Das „ol“ steht dabei für „ordered list“, was auf deutsch „geordnete Liste“ heißt. Die einzelnen Listenelemente werden auch hier mit dem „li“-Element gebildet:
<ol>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
<li>Drittes Listenelement</li>
</ol>
Auch bei den „Geordneten Listen“ kann mit dem „type“-Attribut die Form der Aufzählungszeichen definiert werden. Dabei kann das „type“-Attribut hier folgende Werte annehmen:
Wert | Beschreibung | Beispiel |
1 | Numerisch | 1., 2., 3., ... |
A | Alphabetisch mit großen Buchstaben | A., B., C., ... |
a | Alphabetisch mit kleinen Buchstaben | a., b., c., ... |
I | Große römische Ziffern | I., II., III., IV., V., VI., ... |
i | Kleine römische Ziffern | i., ii., iii., iv., v., vi., ... |
Beispiel 2
HTML-Datei:
Ergebnis:
Geordnete Liste ohne type-Attribut
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="A"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="a"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="I"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="i"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Ergebnis im Browser:
Mit dem „reversed“-Attribut kann die Reihenfolge umgekehrt (engl. „reversed“) werden. Da ab HTML5 alle Attribute einen Wert in Anführungsstriche haben müssen, wird die Umkehrung der Reihenfolge mit reversed=“reversed“ angegeben.
HTML-Datei:
Ergebnis:
Geordnete Liste ohne type-Attribut und "reversed"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="A" und "reversed"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="a" und "reversed"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="I" und "reversed"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Geordnete Liste mit type="i" und "reversed"
- Erstes Listenelement
- Zweites Listenelement
- Drittes Listenelement
Ergebnis im Browser:
Hinweis: Wird das „type“-Attribut und das „reversed“-Attribut nicht verwendet, werden standardmäßig nummerisch aufsteigende Aufzählungszeichen verwendet!
Beschreibungslisten bestehen aus Listenelementen und Beschreibungen zu den Listenelementen. Beschreibungslisten können z. B. für Glossare verwendet werden. Beschreibungslisten werden mit dem „dl“-Element gebildet. Dabei steht „dl“ für „description list“, was auf deutsch „Beschreibungsliste“ heißt. Die Listenelemente werden hier mit dem „dt“-Element gebildet. Das „dt“ steht für „description term“, was auf deutsch „Beschreibungs-Ausdruck“ heißt. Die zugehörige Beschreibung wird dann mit dem „dd“-Element erstellt. Das „dd“ steht für „description description“ , d. h. Beschreibungs-Beschreibung:
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Es können aber auch einem Element mehrere Beschreibungen zugeordnet werden, wie z. B. bei der Auflistung von Vokabeln:
<dl>
<dt>foot</dt>
<dd>Fuß</dd>
<dd>Sockel</dd>
<dd>Basis</dd>
<dt>home</dt>
<dd>Haus</dd>
<dd>Heim</dd>
<dd>Heimat</dd>
</dl>
Beispiel 4
HTML-Datei:
Ergebnis:
Glossar
- HTML
- Hypertext Markup Language
- Auszeichnungssprache zur Strukturierung von Webseiten
- CSS
- Cascading Style Sheets
- Stylesheet-Sprache zur Formatierung von Webseiten-Elementen
- JavaScript
- Skriptsprache zur Erstellung von dynamischen Webseiten
Ergebnis im Browser:
HTML-Listen können beliebig verschachtelt werden. Dabei können auch die verschiedenen Listen-Typen miteinander kombiniert werden.
Beispiel 5
HTML-Datei:
Ergebnis:
Rezepte
-
-
Eierkuchen
- Auch Pfannkuchen, Palatschinken, Omelettes, Plinsen
- Eierspeise aus Ei, Milch und Mehl
Zutaten:
- 0,5 Liter Milch
- 250 Gramm Mehl
- 3 Eier
- Salz
- 1 Messerspitze Backpulver
- Öl
Zubereitung:
- Alle Zutaten miteinander verrühren
- Eine Weile ziehen lassen
- Öl in der Pfanne erhitzen
- Eine Kelle Teig hineingeben
- Einseitig goldgelb backen, dann wenden
- Ggf. noch etwas Öl zugeben
-
Ergebnis im Browser:
Abschlussübung
Baue als Abschlussübung das vorhergehende Beispiel nach und erweitere es um ein Rezept für Rührei:
Nachdem du die Seite erstellt hast, kannst du dir zur Kontrolle die Lösung mit folgendem Link herunterladen: