Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 10. 1 Liste (list)

2.10.1 Listen (list)
en List
fr Listes

-

1 Grundlagen

-

a) Prinzip

Es wird zwischen unsortierten und sortierten Listen unterschieden

-

b) Grundlagen-Websites & Workshops

-

2 Unsortierte Listenpunkte (unsorted list)

-

a) Wahl des Listenzeichens oder kein Listenzeichen

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

-

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

-

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

-

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

-

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

-

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

-

g) Workshops

-

3 Sortierte Listenpunkte (ordered list)

-

a) Bezeichnungen

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

-

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

-

4 Beschreibungsliste (descriptive list)

-

a) Bezeichnungen

-

b) Beispiel 1

1) Angabe im Quelltext

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

2) Ausgabe im HTML-Dokument

Gesetze
Entscheidungen

-

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

-

5 Listeneinrückung

-

a) Prinzip und Bezeichnungen

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

-

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

-

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

-

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

-

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

-

6 Listenpunkte als Abschnitte

-

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

-

8 Horizontale Menüs mit Listen position:inline

Pfeil nach rechts (Icon)
      120 x 120 Pixel HTML: Position: display:inline