SELFHTML: HTML / Absatztypen und Textgestaltung / Aufzählungslisten (Bullet-Listen)

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung

	Aufzählungslisten (Bullet-Listen)
	Aufzählungslisten definieren Bullet-Typ festlegen Liste kompakt darstellen Menü- und Verzeichnis-Listen Weitere Möglichkeiten

Aufzählungslisten definieren

Anzeigebeispiel: So sieht's aus

Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden alle Listeneinträge mit einem Aufzählungszeichen (Bullet) versehen.

Beispiel:

<ul>
<li>Listeneintrag</li>
<li>anderer Listeneintrag</li>
<li>letzter Listeneintrag</li>
</ul>

Erläuterung:

<ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Das End-Tag </li> am Ende eines Listeneintrags ist nicht zwingend erforderlich, im Sinne SGML-konformer Kodierung jedoch sauberer. </ul> beendet die Liste.

Beachten Sie:

Wie das Bullet dargestellt wird, bestimmt der WWW-Browser. Mosaic verwendet z.B. ein eigenes grafisches Bullet-Symbol. Netscape verwendet Bullet-Symbole, die im Zeichensatz der vom Anwender eingestellten Schriftart vorkommen.

Das Verschachteln von Aufzählungslisten ist ebenfalls möglich.

Bullet-Typ festlegen

Anzeigebeispiel: So sieht's aus

Sie können für Aufzählungslisten bestimmen, wie das Aufzählungszeichen (Bullet) aussehen soll. Ob und wie der Bullet-Typ am Bildschirm angezeigt wird, hängt jedoch letztlich vom Zeichensatz der Schriftart ab, die der Anwender eingestellt hat.

Beispiel:

<ul type=circle>
<li>...</li>
</ul>
  
<ul type=square>
<li>...</li>
</ul>
  
<ul type=disc>
<li>...</li>
</ul>

Erläuterung:

Mit <ul type=circle> bestimmen Sie ein rundes Bullet (circle = Kreis).
Mit <ul type=square> bestimmen Sie ein eckiges Bullet (square = Rechteck).
Mit <ul type=disc> bestimmen Sie ein Dateisymbol als Bullet (disc = Datenträger wie Disketten oder Festplatten).

Liste kompakt darstellen

Anzeigebeispiel: So sieht's aus

Sie können angeben, daß die Liste in einer kompakteren Darstellungsform als normaler Text angezeigt wird.

Beispiel:

<ul compact>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>

Erläuterung:

Mit dem Attribut compact innerhalb des einleitenden Tags von <ul> können Sie die kompaktere Darstellung bestimmen.

Beachten Sie:

WWW-Browser ignorieren diese Angabe in der Regel noch.

Menü- und Verzeichnis-Listen

Anzeigebeispiel: So sieht's aus

Menü- und Verzeichnis-Listen werden in der Praxis kaum verwendet, sind aber im HTML-Standard seit langem verankert. Sie werden von den heutigen Browsern entweder nicht mehr oder nicht anders dargestellt als gewöhnliche Aufzählungslisten. Dennoch könnten diese Befehle für künftige Anwendungsbereiche von HTML wieder an Bedeutung gewinnen.

Beispiel:

<menu>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</menu>

<dir>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</dir>

Erläuterung:

<menu> leitet eine Menü-Liste ein, </menu> beendet die Menü-Liste. Eine Verzeichnisliste leiten Sie mit <dir> ein und beenden sie durch </dir> (dir = directory = Verzeichnis). Mit <li> beginnt in beiden Listentypen ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Das End-Tag </li> am Ende eines Listeneintrags ist nicht zwingend erforderlich, im Sinne SGML-konformer Kodierung jedoch sauberer.

Beachten Sie:

Menü-Listen dürfen - im Gegensatz zu Aufzählungslisten - keine absatzerzeugenden Elemente im Menütext enthalten. Sie sind nur für zeilenartige Listen gedacht. Verzeichnis-Listen dürfen dagegen mehrzeilige Listeneinträge haben.

Weitere Möglichkeiten

Die Tags <ul> und <li> können Universalattribute enthalten.

Wenn Sie HTML bereits etwas besser kennen, probieren Sie auch mal die Möglichkeiten aus, die Ihnen CSS Style-Sheets bieten. Denn erst damit können Sie Listen und Listenelemente nach Wunsch formatieren. Dazu müssen Sie zunächst wissen, wie man Style-Sheets definieren kann. Anschließend sind Sie in der Lage, Style-Sheet-Angaben anzuwenden. Interessant sind im hier beschriebenen Zusammenhang beispielsweise folgende Style-Sheet-Angaben:
Schriftformatierung
Abstände, Ränder, Ausrichtung
Rahmen und Innenabstände
Hintergrundfarben und -bilder
Listen und Tabellen


weiter:	Definitionslisten
zurück:	Numerierte Listen

SELFHTML/Quickbar HTML Absatztypen und Textgestaltung