2.10.1 Listen (list)
en List
fr Listes

• 1 Grundlagen
  • a) Prinzip
  • b) Grundlagen-Websites & Workshops
• 2 Unsortierte Listenpunkte (unsorted list)
  • a) Wahl des Listenzeichens oder kein Listenzeichen
  • b) Unsortierte Liste mit <ul> ohne Attribut (Standard)
  • c) Beispiel 1: Runder Punkt (disc) - Formatiert mit "disc"
  • d) Beispiel 2: Kreis (cercle)
  • e) Beispiel 3: Quadrat (square)
  • f) Beispiel 4: Kein Listenzeichen (none)
  • g) Workshops
• 3 Sortierte Listenpunkte (ordered list)
  • a) Bezeichnungen
  • b) Sortierte Liste mit <ol> ohne Attribut (Standard)
  • c) Wahl des Aufzählungszeichens
  • d) Beispiel 1: Zahl (decimal) - Formatiert mit "decimal"
  • e) Beispiel 2: Grossbuchstabe (upper-alpha)
  • f) Beispiel 3: Kleinbuchstabe (lower-alpha)
  • g) Beispiel 4: Grosse römische Zahl (upper-roman)
  • h) Beispiel 5: Kleine römische Zahl (lower-roman)
  • i) Workshops
• 4 Beschreibungsliste (descriptive list)
  • a) Bezeichnungen
  • b) Beispiel 1
  • c) Beispiel 2: Menüliste ohne linken Einzug
  • d) Workshop
• 5 Listeneinrückung
  • a) Prinzip und Bezeichnungen
  • b) Beispiel 1: Unsortierte Liste mit Einrückung - ul ohne Attribut (Standard)
  • c) Beispiel 2: Unsortierte Liste mit Einrückung - mit Attribut "outside"
  • d) Beispiel 3: Unsortierte Liste ohne Einrückung - mit Attribut "inside"
  • e) Beispiel 4: Sortierte Liste mit Einrückung - ohne Attribut (Standard)
  • f) Beispiel 5 Sortierte Liste mit Einrückung - mit Attribut "outside"
  • g) Beispiel 6 Sortierte Liste ohne Einrückung - mit Attribut "inside"
  • h) Workshops
• 6 Listenpunkte als Abschnitte
  • a) Beispiel 1: Ohne Abschnitt innerhalb des Listenpunktes
  • b) Beispiel 2: Mit Abschnitt innerhalb des Listenpunktes
• 7 Listenpunkte mit Grafik
  • a) Workshops
• 8 Horizontale Menüs mit Listen position:inline

-

⇧ 1 Grundlagen

• a) Prinzip
• b) Grundlagen-Websites & Workshops

-

↑ a) Prinzip

Es wird zwischen unsortierten und sortierten Listen unterschieden

• ul = unordered list = unsortierte Liste

• ol = ordered list = sortierte Liste

-

↑ b) Grundlagen-Websites & Workshops

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

• W3Schools en CSS - List

• Web Design Group en Syntax: List Style

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

-

⇧ 2 Unsortierte Listenpunkte (unsorted list)

• a) Wahl des Listenzeichens oder kein Listenzeichen
• b) Unsortierte Liste mit <ul> ohne Attribut (Standard)
• c) Beispiel 1: Runder Punkt (disc) - Formatiert mit "disc"
• d) Beispiel 2: Kreis (cercle)
• e) Beispiel 3: Quadrat (square)
• f) Beispiel 4: Kein Listenzeichen (none)
• g) Workshops

-

↑ a) Wahl des Listenzeichens oder kein Listenzeichen

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

• disc = runder Punkt (Standard, wird auch ohne dieses Attribut erreicht)

• circle = Kreis

• square = Quadrat

• none = kein Listenzeichen

-

↑ 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 runden Punkt (disc) als Listenzeichen

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

• 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) Beispiel 1: Runder Punkt (disc) - Formatiert mit "disc"

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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ d) Beispiel 2: Kreis (cercle)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ e) Beispiel 3: Quadrat (square)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ f) Beispiel 4: Kein Listenzeichen (none)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ g) Workshops

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

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

-

⇧ 3 Sortierte Listenpunkte (ordered list)

• a) Bezeichnungen
• b) Sortierte Liste mit <ol> ohne Attribut (Standard)
• c) Wahl des Aufzählungszeichens
• d) Beispiel 1: Zahl (decimal) - Formatiert mit "decimal"
• e) Beispiel 2: Grossbuchstabe (upper-alpha)
• f) Beispiel 3: Kleinbuchstabe (lower-alpha)
• g) Beispiel 4: Grosse römische Zahl (upper-roman)
• h) Beispiel 5: Kleine römische Zahl (lower-roman)
• i) Workshops

-

↑ 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

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ e) Beispiel 2: Grossbuchstabe (upper-alpha)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ f) Beispiel 3: Kleinbuchstabe (lower-alpha)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

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

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

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)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

-

↑ i) Workshops

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

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

-

⇧ 4 Beschreibungsliste (descriptive list)

• a) Bezeichnungen
• b) Beispiel 1
• c) Beispiel 2: Menüliste ohne linken Einzug
• d) Workshop

-

↑ 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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

Gesetze

Entscheidungen

• Universität des Saarlandes: Unnumbered Lists

-

↑ c) Beispiel 2: Menüliste ohne linken Einzug

1) Angabe im Quelltext

⇒ 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>

2) Ausgabe im HTML-Dokument

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
• b) Beispiel 1: Unsortierte Liste mit Einrückung - ul ohne Attribut (Standard)
• c) Beispiel 2: Unsortierte Liste mit Einrückung - mit Attribut "outside"
• d) Beispiel 3: Unsortierte Liste ohne Einrückung - mit Attribut "inside"
• e) Beispiel 4: Sortierte Liste mit Einrückung - ohne Attribut (Standard)
• f) Beispiel 5 Sortierte Liste mit Einrückung - mit Attribut "outside"
• g) Beispiel 6 Sortierte Liste ohne Einrückung - mit Attribut "inside"
• h) Workshops

-

↑ 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)

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

• Erster Punkt, Zeile 1
  Erster 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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

• Erster Punkt, Zeile 1
  Zweiter Punkt, Zeile 2

-

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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

• Erster Punkt, Zeile 1
  Erster Punkt, Zeile 2

-

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

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

1. Erster Punkt, Zeile 1
   Erster Punkt, Zeile 2
2. Zweiter 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

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

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"

1) Angabe im Quelltext

<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>

2) Ausgabe im HTML-Dokument

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

-

↑ h) Workshops

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

• W3Schools en Beispiel: Place the list-item marker

-

⇧ 6 Listenpunkte als Abschnitte

• a) Beispiel 1: Ohne Abschnitt innerhalb des Listenpunktes
• b) Beispiel 2: Mit Abschnitt innerhalb des Listenpunktes

-

↑ a) Beispiel 1: Ohne Abschnitt innerhalb des Listenpunktes

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

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

1) Angabe im Quelltext

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>

2) Ausgabe im HTML-Dokument

1. Erster Punkt Zeile 1
   Erster Punkt Zeile 2

2. Zweiter Punkt Zeile 1
   Zweiter Punkt Zeile 2

-

⇧ 7 Listenpunkte mit Grafik

• a) Workshops

-

↑ a) Workshops

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

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

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

-

⇧ 8 Horizontale Menüs mit Listen position:inline

HTML: Position: display:inline

↑