Diese Seite dient mir zum üben der Web-Programmiersprachen

Listen mit HTML

Es gibt geordnete Listen, die nummeriert sind und ungeordnete Listen die als Einleitung Striche oder Punkte haben. Mit css kann man diese jedoch nach belieben gestalten. Um eine ungeordnete Liste benutzt man den Tag <ul> während für geordnete Listen der Tag <ol> zum einsatz kommt. Die einzelnen Einträge der Liste kommen in den Tags <li>

  • Blubb
  • Möpp
  • Miau
  • Piep
  1. Blubb
  2. Möpp
  3. Miau
  4. Piep

Eine ungeordnete Liste:

<ul>
   <li>Blubb</li>
   <li>Möpp</li>
   <li>Miau</li>
   <li>Piep</li>
</ul>

Eine geordnete Liste:

<ol>
   <li>Blubb</li>
   <li>Möpp</li>
   <li>Miau</li>
   <li>Piep</li>
</ol>

Listen-Symbole verändern

Geordnete Listen können mehr als nur Nummern haben. Mit dem Attribut <type> und den Werten 1 / A / a / I und i lässt sich dies verändern.

  1. Blubb
  2. Möpp
  3. Miau
  4. Piep
  1. Blubb
  2. Möpp
  3. Miau
  4. Piep
  1. Blubb
  2. Möpp
  3. Miau
  4. Piep
  1. Blubb
  2. Möpp
  3. Miau
  4. Piep

Um die Listen in umgekerter Reihenfolge wieder zu geben benutzt man das Attribut <reversed> dessen Wert ebenfals reversed ist. Soll die Liste nicht mit der Ziffer 1 beginnen, kann man einen Startwert angeben. Das Attribut dazu heißt auch <start> und bekommt den Wert mit dem die Liste beginnen soll.

Description List

Listeneinträge können noch weitere Angaben haben. Statt eine Tabelle anzulegen gibt es die description Liste. Die Tags dazu lauten <dl> für die Liste und <dt> mit <dd> für die zwei Einträge.

Blubb
Bedeutung
Möpp
Sinn
Miau
Verwendung
Piep
Beschreibung
<dl>
   <dt>Blubb</dt> <dd>Bedeutung</dd>
   <dt>Möpp</dt> <dd>Sinn</dd>
   <dt>Miau</dt> <dd>Verwendung</dd>
   <dt>Piep</dt> <dd>Beschreibung</dd>
</dl>

Der zweite Eintrag wird automatisch in die nächste Zeile gesetzt und etwas eingerückt. Wenn der zweite Eintrag in die gleiche Zeile gesetzt werden soll, muss man dies per css machen. Der dd-Tag muss dabei an dem dt-Tag vorbeifließen. (dt float:left;)