Online HTML-Kurs (Teil 13): Listen mit den Tags ul und ol
Außer Bildern, Links und Tabellen kann man auch Listen in HTML verwenden. Dabei muss man zwischen einer geordneten und einer ungeordneten Liste unterscheiden, wobei der Unterschied hauptsächlich in der Darstellung der Aufzählung liegt. Aber zunächst ein Beispiel für eine ungeordnete Liste:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<ul>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
</ul>
</body>
</html>
Die ungeordnete Liste wird durch einen Container mit dem <ul>-Tag erzeugt. Innerhalb dieses Containers beginnt dann die eigentliche Aufzählung. Diese Aufzählung wird mit einem weiteren Container vorgenommen, nämlich mit dem <li>-Tag, welches nur innerhalb von Listenumgebungen verwendet werden darf. Diese Art von Liste nennt man ungeordnet, da die Aufzählung anhand von Symbolen vorgenommen wird. Diese Symbole sind über die Attribute einstellbar, wie im folgenden Beispiel zu sehen:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<ul type="circle">
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
</ul>
</body>
</html>
Mit der Angabe des "type"-Attributs kann man das Aufzählungssymbol verändern. Erlaubte Werte sind "disc" (Standardeinstellung), "circle" und "square". Die fertige Liste sind dann wie folgt aus:
- Erstes Listenelement
- Zweites Listenelement
Eine geordnete Liste zählt ihre Elemente nicht durch Symbole, sondern durch Zahlen oder Buchstaben auf. Dabei verwenden wir statt dem <ul>-Tag einfach das <ol>-Tag:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<ol type="a" start="2">
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
</ol>
</body>
</html>
Wie oben zu sehen ist, kann das "type"-Attribut nun andere Werte annehmen. Hier wird nun die Art der Aufzählung festgelegt. Erlaubte Werte sind "1", "a", "A", "i" und "I" also Zahlen, Buchstaben und römische Zahlen. Ein Attribut was nun noch hinzugekommen ist, ist das "start"-Attribut mit dem angegeben werden kann, mit welcher Nummer oder ab welchem Buchstaben die Aufzählung beginnen soll.
Das Beispiel für die geordnete Liste sieht dann so aus:
- Erstes Listenelement
- Zweites Listenelement
Das <li>-Tag verfügt selbst über zwei Attribute, nämlich "type" und "value". Das "type"-Attribut darf alle Werte annehmen, die wir bei der ungeordneten und der geordneten Liste aufgeführt haben. Für das "value"-Attribut gilt das gleiche wie für das "start"-Attribut bei der geordneten Liste. Sinn und Zweck der eigenen Attribute beim <li>-Tag ist einfach, dass man innerhalb einer Liste einen Listenpunkt nach belieben aufzählen kann.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online HTML-Kurs (Teil 13): Listen mit den Tags ul und ol
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/244
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren