HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Bullet- uns Aufzählungslisten
Durch den Einsatz von Bullet- und Aufzählungslisten besteht die Möglichkeit, Gliederungen anschaulich und übersichtlich darzustellen.

HTML Quellcode:

<html>
<head>
<title>Mustermanns Blumentips</title>
<style type="text/css">
<!--
body { background-color:#33EE00; color:#002000; font-family:Times; }
ul { list-style-type:circle }
ol { list-style-type:lower-alpha }
-->
</style>
</head>

<body>
Eine ungeordnete Liste:
<ul>
<li>Unser Tip 1</li>
<li>Unser Tip 2</li>
<li>Unser Tip 3</li>
</ul>
Daneben gibt es noch die geordneten Listen:
<ol>
<li>Unser Tip 1</li>
<li>Unser Tip 2</li>
<li>Unser Tip 3</li>
</ol>
</body>
</html>

So sieht's im Browser aus...

Erklärung:

Das Element ul erzeugt in HTML eine Liste, und zwar eine "ungeordnete", d.h. es gibt keine Nummerierung der Aufzählungspinkte. Jeder darzustellende Unterpunkt wird durch das li-Tag markiert. Die Form des Aufzählungszeichens kann man in CSS durch das Attribut list-style-type festlegen. Mit dem Wert circle ist es ein Ring.

Es gibt noch weitere Aufzählungszeichen :

list-style-type:disc - gefüllte Kreisscheibe (Standardeinstellung)
list-style-type:square - Quadrat

Daneben gibt es Aufzählungs-Listen. Sie werden durch das Element ol erzeugt. Auch hier werden die Aufzählungspunkte mit li erzeugt.
Es stehen eine ganze Reihe von Aufzählungstypen zur Verfügung, die gängigsten sind:

list-style-type:decimal - Nummerierung 1, 2, 3, 4, ... (Standardeinstellung)
list-style-type:lower-alpha - alphabetische Aufzählung a, b, c, d, ...
list-style-type:upper-alpha - alphabetische Aufzählung A, B, C, D, ...
list-style-type:upper-roman - römische Nummerierung I, II, III, IV, ...
list-style-type:lower-roman - römische Nummerierung i, ii, iii, iv, ...

Daneben gibt es noch etwas ungewöhnliche Typen wie Hebräisch oder Japanisch, siehe de.selfhtml.org/navigation/css.htm#listen


[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

©2003 de Vries