2.8.1 Liste (list)

1 Grundlagen und Workshops

a) Prinzip

Es wird zwischen unsortierten und sortierten Listen unterschieden

• ul = unordered list = unsortierte Liste
• ol = ordered list = sortierte Liste

b) Grundlagen

• SELFHTML: Listenformatierung
  SELFHTML: list-style-type (Darstellungstyp)
  SELFHTML: Beispiel

• W3Schools: CSS - List

• Web Design Group: Syntax: List Style

c) Workshops

• HTML-Seminar: HTML-Tags für Aufzählungen

2 Unsortierte Listenpunkte (unsorted list)

a) Bezeichnungen

• ul = unordered list = nicht sortierte Liste
• ol = ordered list = sortierte Liste

b) Unsortierte Liste mit <ul> ohne Attribut (Standard)

<ul> hat zur Folge, dass für jedes <li> ein Listenzeichen gesetzt wird.

Diese Formatierung gibt einen eckigen Punkt (disc) als Listenzeichen

<ul>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
 <li>Dritter Punkt, Zeile 1<br>Dritter Punkt, Zeile 2</li>
</ul>

• Erster Punkt, Zeile 1
  Erster Punkt, Zeile 2
• Zweiter Punkt, Zeile 1
  Zweiter Punkt, Zeile 2
• Dritter Punkt, Zeile 1
  Dritter Punkt, Zeile 2

c) Wahl des Listenzeichens oder kein Listenzeichen

Mit <ul style="list-style-type:..."> kann das Listenzeichen gewählt werden:

• disc = eckiger Punkt (Standard, wird auch ohne dieses Attribut erreicht)
• circle = Kreis
• square = Quadrat
• none = kein Listenzeichen

d) Beispiel 1: Eckiger Punkt (disc) - Formatiert mit ul ohne Attribut (Standard)

<ul>
<li>Angabe im HTML-Dokument
<ul></li>
</ul>

• Angabe im HTML-Dokument <ul>

e) Beispiel 2: Eckiger Punkt (disc) - Formatiert mit "disc"

gleiches Resultat wie ohne Attribut - dieses Attribut ist demnach nicht erforderlich

<ul style="list-style-type:disc">
<li>Angabe im HTML-Dokument
<ul style="list-style-type:disc"></li>
</ul>

• Angabe im HTML-Dokument <ul style="list-style-type:disc">

e) Beispiel 3: Kreis (cercle)

<ul style="list-style-type:cerlce">
<li>Angabe im HTML-Dokument
<ul style="list-style-type:cercle"></li>
</ul>

• Angabe im HTML-Dokument <ul style="list-style-type:cercle">

f) Beispiel 4: Quadrat (square)

<ul class="link">
 <li>Angabe im HTML-Dokument
 <ul class="link"></li>
</ul>

• Angabe im HTML-Dokument <ul class="link">

g) Beispiel 5: Kein Listenzeichen (none)

<ul style="list-style-type:none">
<li>Angabe im HTML-Dokument
<ul style="list-style-type:none"></li>
</ul>

• Angabe im HTML-Dokument <ul style="list-style-type:none">

h) Workshops

• SELFHTML: list-style-type (Darstellungstyp)
  SELFHTML: Beispiel

• W3Schools: Beispiel: The different list-item markers in unordered lists

3 Sortierte Listenpunkte (ordered list)

a) Bezeichnungen

• ol = ordered list = sortierte Liste)

<ol> hat zur Folge, dass für jedes <li> eine Zahl oder ein Buchstabe gesetzt wird.

b) Sortierte Liste mit <ol> ohne Attribut (Standard)

Diese Formatierung gibt ein Zahl (decimal) 1, 2, 3, etc. als Aufzählungszeichen

<ol>	
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
 <li>Dritter Punkt, Zeile 1<br>Dritter Punkt, Zeile 2</li>
 <li>Vierter Punkt, Zeile 1<br>Vierter Punkt, Zeile 2</li>
</ol>

1. Erster Punkt, Zeile 1
   Erster Punkt, Zeile 2
2. Zweiter Punkt, Zeile 1
   Zweiter Punkt, Zeile 2
3. Dritter Punkt, Zeile 1
   Dritter Punkt, Zeile 2
4. Vierter Punkt, Zeile 1
   Vierter Punkt, Zeile 2

c) Wahl des Aufzählungszeichens

Mit <ol style="list-style-type:..."> kann das Aufzählungszeichen gewählt werden:

• decimal = Nummerierung 1.,2.,3.,4. usw.
• upper-alpha oder upper-latin = Nummerierung A.,B.,C.,D. usw.
• lower-alpha oder lower-latin = Nummerierung a.,b.,c.,d. usw.
• upper-roman = Nummerierung I.,II.,III.,IV. usw.
• lower-roman = Nummerierung i.,ii.,iii.,iv. usw.

d) Beispiel 1: Zahl (decimal) - Formatiert mit "decimal"

gleiches Resultat wie ohne Attribut - dieses Attribut ist demnach nicht erforderlich

<ol style="list-style-type:decimal">
 <li>Erster Punkt</li>
 <li>Zweiter Punkt</li>
 <li>Dritter Punkt</li>
</ol>

1. Erster Punkt
2. Zweiter Punkt
3. Ditter Punkt

e) Beispiel 2: Grossbuchstabe (upper-alpha)

<ol style="list-style-type:upper-alpha">
 <li>Erster Punkt</li>
 <li>Zweiter Punkt</li>
 <li>Dritter Punkt</li>
</ol>

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

f) Beispiel 3: Kleinbuchstabe (lower-alpha)

<ol style="list-style-type:lower-alpha">
 <li>Erster Punkt</li>
 <li>Zweiter Punkt</li>
 <li>Dritter Punkt</li>
</ol>

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

g) Beispiel 4: Grosse römische Zahl (upper-roman)

<ol style="list-style-type:upper-roman">
 <li>Erster Punkt</li>
 <li>Zweiter Punkt</li>
 <li>Dritter Punkt</li>
 <li>Vierter Punkt</li>
 <li>Fünfter Punkt</li>
 <li>Sechster Punkt</li>
</ol>

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt
4. Vierter Punkt
5. Fünfter Punkt
6. Sechster Punkt

h) Beispiel 5: Kleine römische Zahl (lower-roman)

Beispiel 5: Kleine römische Zahl (lower-roman)

<ol style="list-style-type:lower-roman">
 <li>Erster Punkt</li>
 <li>Zweiter Punkt</li>
 <li>Dritter Punkt</li>
</ol>

1. Erster Punkt
2. Zweiter Punkt
3. Dritter Punkt

i) Workshops

• SELFHTML: list-style-type (Darstellungstyp)
  SELFHTML: Beispiel

• W3Schools: Beipiel: The different list-item markers in ordered lists

4 Beschreibungsliste (descriptive list)

a) Bezeichnungen

• dl = descriptive lists = Beschreibungsliste (oder definition list = Definitionsliste=
• dt = descriptive title = Beschreibungstitel (wird linksbündig geschrieben)
• dd = description description = Beschreibungtext ( wird links eingerückt)

b) Beispiel 1

<dl>
 <dt>Gesetze</dt>
 <dd>Entscheidungen</dd>
</dl>

Gesetze

Entscheidungen

• Universität des Saarlandes: Unnumbered Lists

c) Beispiel 2: Menüliste ohne linken Einzug

⇒ Siehe auch "Web-Design"

<dl style="width:15em">
<dt style="color:white;background-color:blue;
padding:0.2em 0.6em;">
Vertikales Menü<br>Link one</dt>
<dt style="color:black;background-color:aqua;
padding:0.2em 0.6em;">
Link two</dt>
<dt style="color:white;background-color:blue;
padding:0.2em 0.6em;">
1 3 5 7 9 12 15 18 21 24 27 30</dt>
<dt style="color:black;background-color:aqua;
padding:0.2em 0.6em;">
 Link four</dt>
</dl>

Vertikales Menü
Link one

Link two

1 3 5 7 9 12 15 18 21 24 27 30

Link four

d) Workshop

• Universität des Saarlandes: Unnumbered Lists

5 Listeneinrückung

a) Prinzip und Bezeichnungen

Mit <ul resp. ol style="list-style-position:..."> wird der Einzug gewählt Es wird unterschieden zwischen:

• outside = mit Einrückung (Standard, wird auch ohne dieses Attribut erreicht)
• inside = keine Einrückung (alles linksbündig)

b) Beispiel 1: Unsortierte Liste mit Einrückung - ul ohne Attribut (Standard)

<ul>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
</ul>

• Erster Punkt, Zeile 1
  Zweiter Punkt, Zeile 2

c) Beispiel 2: Unsortierte Liste mit Einrückung - mit Attribut "outside"

gleiches Resultat wie ohne Attribut - dieses Attribut ist demnach nicht erforderlich

<ul style=list-style-position:outside">
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
</ul>

• Erster Punkt, Zeile 1
  Zweiter Punkt, Zeile 2

d) Beispiel 3: Unsortierte Liste ohne Einrückung - mit Attribut "inside"

<ul style=list-style-position:inside"& gt 
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
</ul>

• Erster Punkt, Zeile 1
  Zweiter Punkt, Zeile 2

e) Beispiel 4: Sortierte Liste mit Einrückung - ohne Attribut (Standard)

<ol>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
</ol>

1. Erster Punkt, Zeile 1
   Zweiter Punkt, Zeile 2

f) Beispiel 5 Sortierte Liste mit Einrückung - mit Attribut "outside"

gleiches Resultat wie ohne Attribut - dieses Attribut ist demnach nicht erforderlich

<ol style=list-style-position:outside"&>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
</ol>

1. Erster Punkt, Zeile 1
   Zweiter Punkt, Zeile 2
2. Zweiter Punkt, Zeile 1
   Zweiter Punkt, Zeile 2

g) Beispiel 6 Sortierte Liste ohne Einrückung - mit Attribut "inside"

<ol style=list-style-position:inside"&>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
</ol>

1. Erster Punkt, Zeile 1
   Zweiter Punkt, Zeile 2
2. Zweiter Punkt, Zeile 1
   Zweiter Punkt, Zeile 2

h) Workshops

• SELFHTML: list-style-position (Listeneinrückung)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Place the list-item marker

6 Listenpunkte als Abschnitte

a) Beispiel 1: Ohne Abschnitt innerhalb des Listenpunktes

<ol>
 <li>Erster Punkt, Zeile 1<br>Erster Punkt, Zeile 2</li>
 <li>Zweiter Punkt, Zeile 1<br>Zweiter Punkt, Zeile 2</li>
</ol>

1. Erster Punkt, Zeile 1
   Erster Punkt, Zeile 2
2. Zweiter Punkt, Zeile 1
   Zweiter Punkt, Zeile 2

b) Beispiel 2: Mit Abschnitt innerhalb des Listenpunktes

Formatierung als Abschnitt innerhalb des Listenpunktes: Ergibt grösseren Zeilenabstand zwischen den Listenpunkten

<ol>
 <li><p>Erster Punkt Zeile 1<br>
 Erster Punkt Zeile 2</p></li>
 <li><p>Zweiter Punkt Zeile 1<br>
 Zweiter Punkt Zeile 2</p></li>
</ol>

1. Erster Punkt Zeile 1
   Erster Punkt Zeile 2

2. Zweiter Punkt Zeile 1
   Zweiter Punkt Zeile 2

7 Listenpunkte mit Grafik

• SELFHTML: list-style-image (eigene Bullet-Grafik)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Set an image as the list-item marker

• Homepage-Total.de: Aufzählungszeichen mit Bild

8 Horizontale Menüs mit Listen position:inline

⇒ Siehe "Positionierung"

↑