[ start ] [ schulungen ] [ webdesign ]
 

[ ul, ol, li und dl, dt, dd ]

Texte als Listen aufführen

Sollten in Ihren Texten Aufzählungen, Definitionen oder andere Listen vorkommen, auch dafür gibt es in HTML passende Tags und Attribute. Das Lay-Out Ihres Texts wird übersichtlicher und klarer.
<ul>...</ul> & <li>
<ul>
<ul>
<li>...
<li>...
<li>...
</ul>
 

Das ul-Tag fasst den nächsten Absatz ( oder die nächster Absätze) als ungeordnete Liste auf; vor alle Listenpunkte wird ein Aufzählungspunkt gesetzt.

Zu Beginn der ungeordneten Liste setzten Sie das <ul>-Tag, nun fügen Sie soviele li-Tags ein, wie Sie an Punkten benötigen. Hinter jedem li-Tag steht Text, ein abschließendes li-Tag wird nicht (unbedingt) benötigt, da der nächste Listen punkt wieder mit <li> eingeleitet wird oder die Liste mit dem </ul> beendet wird.

Beispiel
type
<ul type="square">...</ul>

Das Attribut type regelt das Aussehen des Aufzählungszeichens. Sie haben die Wahl zwischen:

  • Punkt (disc)
  • Quadrat (square)
  • Kringel (circle)

<ol>...</ol> & <li>

type
<ol type="square">...</ol>

Die geordnete Liste wird wie die ungeordnete Liste aufgebaut; die Aufzählungszeichen sind hier Zahlen (arabische oder römische) oder Buchstaben.

Das wird durch das type-Attribut geregelt:
1 -> arabische zahlen: 1, 2, 3, 4
I -> römischen Zahlen: I, II, III, IV
i -> römische zahlen mit kleinen Buschstaben: i, ii, iii, iv
A -> große Buchstaben: A, B, C, D
a -> kleine Buchstaben: a,b, c, d

Beispiel
start
<ol start="5">...</ol>

Mit dem Attribut start legen Sie den Anfangswert der Aufzählung fest; der Wert ist immer eine Zahl, auch wenn Sie als type-Attribut römische Zahlen oder Buchstaben gewählt haben; für start="5" wird dann V/v oder E/e angezeigt

Beispiel
<dl>...<dt>...<dd>...</dl>
<dl>...
<dt>...
<dd>...
</dl>

Die Definitionslist gibt Ihnen die Möglichkeit unter einem Oberbegriff Unterpunkte aufzuführen und diese zu erklären.

Sie umschließen die Liste mit den dl-Tags. nach dem ersten dl-Tag haben Sie noch die Möglichkeit Text einzugeben. Als Listenpunkt fügen Sie das dt-Tag ein (ohne abschließendens Tag). mit dem dd-Tag haben Sie die Möglichkeit weitere Erklärungen zu dem Listenpunkt, noch weiter eingerückt, einzufügen (auch ohne abschließendes Tag). Fügen Sie dann für einen neuen Unterpunkt erneut ein dt-Tag ein, oder beenden Sie die Liste mit </dl>

Beispiel
   
 
 


[ schulungen ]
[ ] [ html ]
[ ] [ ] [ html-Datei ]
[ ] [ ] [ head & body ]
[ ] [ ] [ text ]
[ ] [ ] [ ] [ absatz ]
[ ] [ ] [ ] [ listen ]
[ ] [ ] [ link ]
[ ] [ ] [ tabellen ]
[ ] [ ] [ ] [ tabelle ]
[ ] [ ] [ ] [ zelle ]
[ ] [ ] [ bild ]
[ ] [ ] [ frameset ]

[ webdesign ]

   
 
 
[ eMail ]
stefan.rathgeb@wwwwerk.de