BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Listen / Aufzählungen


Ordnung und Übersichtlichkeit werden durch den Einsatz von Aufzählungen und Listen deutlich gesteigert. Dabei hat der Webdesigner eine große Auswahl:

Nummerierte Listen

  1. gut
  2. besser
  3. am besten
  1. good
  2. better
  3. best
  1. einmal
  2. zweimal
  3. dreimal

Es gibt fünf Arten zu nummerieren, nämlich mit arabischen Zahlen, römischen Zahlen groß und klein, Buchstaben groß und klein. Die Befehle lauten:

<ol type="1|I|i|A|a" start="1 oder höher">
<li>Text</li> so oft wie nötig und
</ol>

Wenn man mitten in der Liste ein paar Nummern auslassen und mit einer höheren fortsetzen will, so muss die Syntax für diese Zeile lauten:

<li value="X">Text</li>. "X" steht dabei für die gewünschte Zahl.

Listen mit Bullets

  • oans,
  • zwoa,
  • suffa!
  • oamol
  • geht's
  • no
  • leicht!
  • hohl
  • gleich hohl
  • immer noch gleich hohl

Diese Bullets können mit HTML-Befehlen auf drei Arten dargestellt werden: als square (=Viereck), circle (=Hohlkreis) oder disk (=Vollkreis). Letzters ist der Default und muss nicht etxra angegeben werden. Mittels CSS lassen sich noch weitere Formatierungen vornehmen. Die HTML-Befehle sind:

<ul type="disk|square|circle">
<li>Text</li> so oft wie nötig und
</ul>

"Gemischte Listen"

Natürlich kann man auch nummerierte Listen diverser Formatierungen und unformatierte Listen zu einer Gliederungsübersicht verwenden. Ein Beispiel:

  1. Webdesign
    1. HTML
    2. CSS
    3. JavaScript
  2. Multimedia
    • Bild
    • Ton
    • Video

Aufgabe 9

Öffne im Windows-Editor die Datei geruest.htm und füge eine Überschrift 3 in Verdana mit dem Text Listentypen ein. Darunter produzierst Du von jedem Listentyp ein Beispiel mit mindestens 5 Einträgen, wobei 2 nummerierte Listen regulär beginnen und enden, eine Liste bei 12 beginnt und dann weitergeht, eine Liste bei VII beginnt, mit VIII und IX fortsetzt und dann zu XXV springt und eine Liste ganz nach Belieben gestaltet werden kann. Anschließend baust Du die vermischte Liste nach und erweiterst sie um eine Gliederungsebene. Speichere das Ergebnis - mit dem <title> Listen als uebung07.htm.