Heldenshop.de Anime Illustion Affiliate werden Affiliate werden
Affiliate werden Affiliate werden Affiliate werden Affiliate werden

Tutorials – Webdesign

Hyperlinks  |  

7. Listen & Aufzählungen

Listen und Aufzählungen eignen sich ideal, um Informationen anzuordnen.
Außerdem werden Listen benutzt, um eine Seitennavigation zu erstellen – mittels CSS werden diese "gestylt" (dazu aber später mehr).

Grundsätzlich unterscheidet man zwischen nicht nummerierten Aufzählungen und nummerierten Listen.

Die nicht nummerierten Aufzählungen werden mit folgendem Tag umschlossen:

HTML-Code:

<ul> ...Text... </ul>

"ul" steht für "unordered list" (engl. unsortierte Liste).
Innerhalb dieses Bereiches wird jeder einzelne Listenpunkt du ein li-Tag ("list item", engl. Listenpunkt) eingeschlossen:

HTML-Code:

<li> ...Info... </li>

So sieht also eine nicht nummerierte Liste aus:


Das Aufzählungszeichen ist normalerweise ein gefüllter runder Punkt, kann aber auch anders eingestellt werden. Man verwendet das Attribut "type", das sowohl beim ul- also auch beim li-Tag stehen kann.
Mögliche Werte sind:
"disc" (gefüllter runder Punkt, Standardwert)
"circle" (leerer Kreis)
"square" (quadratischer Punkt)

HTML-Code:

<ul type="square">
   <li>Info 1</li>
   <li>Info 2</li>
   <li>Info 3</li>
</ul>


Die nummerierten Listen werden von folgendem Tag umschlossen:

HTML-Code:

<ol> ...Text... </ol>

"ol" steht für "ordered list" (engl. sortierte Liste).
Auch in dieser Liste werden Listenpunkte durch <li> angegeben.

Auch das ol-Tag kennt das Attribut "type", mit dem man die Nummerierungsart auswählen kann. Als Werte stehen zur Verfügung:
"1" (arabische Ziffern, Standardwert)
"A" (Großbuchstaben)
"a" (Kleinbuchstaben)
"I" (römische Zahlen)
"i" (kleingeschriebene römische Zahlen).
Desweiteren steht das Attribut "start" zur Verfügung, mit dessen Wert die Nummerierung beginnt. Will man also eine nummerierte Liste erstellen, die mit der römischen Zahl "III" (3) startet, wird folgender Code benutzt:

HTML-Code:

<ol type="I" start="3"> ...Text... </ol>


nach oben

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
© 2002-2014 by Otaku-Welt.de