Webdesign 7 - Listen & Aufzählungen

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:

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:

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

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:

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:

Code:

<ol type=“I“ start=”3”> … </ol>

~~~
Und wieder ist es Sonntag und ein neues Kapitel ist on
Wer Fragen hat, kann die ganz einfach hier im Forum (einfach auf "antworten" klicken, auch als Gast) loswerden oder mir eine eMail schicken.
Nächstes Mal gehts weiter mit "Bilder einbetten".

Um eure erworbenen Kenntnisse zu "testen" und zu
festigen, könnt ihr die folgende Aufgabe lösen. Die fertige Datei könnt
ihr mir dann per eMail (webmaster@otaku-welt.de) zuschicken - ich werfe
einen Blick darauf und gebe euch ein Feedback.


Aufgabe zu diesem Kurs:

Erstelle eine sortierte Liste, die durch Großbuchstaben "nummeriert" ist. Die Liste soll mit dem Buchstaben F beginnen und 7 Listenpunkte haben.