Zurück || Weiter Index Startseite
HTML Einführung: Listen
Erstellung von Listen verschiedener Art

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Ungeordnete Listen
  2. Geordnete Listen
  3. Verschachtelte Listen
  4. Glossar / Definitionslisten

Allgemeines

Häufig kommt es vor, dass man Sachverhalte geordnet darstellen möchte. Dazu nutzt man gewöhnlich Listen oder Tabellen (die im nächsten Kapitel behandelt werden). Auch HTML stellt Tags zur Verfügung, mit denen sowohl Listen als auch Tabellen erstellt werden können.

Listen können ungeordnet, geordnet oder Glossare sein.

Ungeordnete Listen

Ungeordnete Listen (engl. unordered list) enthalten eine Anzahl von Einträgen, die logisch zwar zusammen gehören, für die aber keine explizite Sortierung nötig ist.
Eingeleitet bzw. beendet wird eine Liste mit den Tags <ul> bzw. </ul>. Ein neues Listenelement wird jeweils mit dem Tag <li> (engl. list index) eingeleitet. Für dieses Tag ist kein abschließendes Tag nötig, denn entweder beginnt ein neues Listenelement mit <li> oder die Liste wird durch </ul> abgeschlossen.

<ul>
 <li>Erster Eintrag
 <li>Zweiter Eintrag, usw.
</ul>

Normalerweise wird als Aufzählungszeichen ein dicker Punkt (Scheibe) verwendet. Mit der Option type=disc | circle | square (Scheibe, Kreis oder Quadrat) können Sie sogar ganz explizit bestimmen, welches Zeichen dafür verwendet wird:

<ul type="disc">
   ...
</ul>

<ul type="circle">
   ...
</ul>

<ul type="square">
   ...
</ul>
  • Erster Eintrag
  • Zweiter Eintrag
  • ...
  • Erster Eintrag
  • Zweiter Eintrag
  • ...
  • Erster Eintrag
  • Zweiter Eintrag
  • ...

Geordnete Listen

Geordnete Listen (engl. ordered list) sind vom Aufbau her identisch den ungeordneten Listen. Eine geordnete Liste wird durch das Tag <ol> eingeleitet und mit dem Tag </ol> abgeschlossen. Listeneinträge werden ebenfalls mit dem Tag <li> angegeben.

<ol>
 <li>Erster Eintrag
 <li>Zweiter Eintrag, usw.
</ol>

Standardmäßig erfolgt die Numerierung der Liste arabisch (1,2,3...), mit der Option type kann die Numerierung aber alphabetisch (type=A | a, groß/klein) oder römisch (type=I | i, groß/klein) erfolgen:

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

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

<ol type="i">
   ...
</ol>
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. ...
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. ...
  1. Erster Eintrag
  2. Zweiter Eintrag
  3. ...

Auf die Numerierung Ihrer Liste können Sie auch Einfluss üben: Mit <ol start=Wert> bestimmen Sie den Startwert für die Liste, mit <li value=Wert> können Sie innerhalb der Liste mit einem neuen Wert weiterzählen lassen:

<ol start=7>
 <li>bekommt "7." vorangestellt
 <li>bekommt "8." vorangestellt
 <li value=100>bekommt "100." vorangestellt
 <li>bekommt "101." vorangestellt, usw.
</ol>

Verschachtelte Listen

Das Schöne an HTML ist, dass man alle Listen ganz unproblematisch ineinander verschachteln kann. Man führt einfach die Tags <ul>...</ul> sowie <ol>...</ol> ineinander verschachtelt an. Der folgende Code gibt die nachfolgenden Listen verschachtelt aus:

<b>Was mir in Amerika gut gef&auml;llt:</b>
<ul>
 <li>In New York:
 <ol>
  <li>Rollerbladen im Central Park
  <li>Squirrels (Eichh&ouml;rnchen) ebendort!
  <li>Die Wohnung von Martin J. Murafsky
 </ol>
 <li>In Boulder und Denver (Colorado):
 <ol>
  <li>University Campus
  <li>Pearl Street Mall
  <li>Whole Foods Market
 </ol>
</ul>

Was mir in Amerika gut gefällt:

  • In New York:
    1. Rollerbladen im Central Park
    2. Squirrels (Eichhörnchen) ebendort!
    3. Die Wohnung von Martin J. Murafsky
  • In Boulder und Denver (Colorado):
    1. University Campus
    2. Pearl Street Mall
    3. Whole Foods Market

Glossare / Definitionslisten

Glossare oder Definitionslisten (engl. definition list) sind dann gefragt, wenn weder Aufzählungszeichen noch Nummerierungen nötig sind, weil die einzelnen Elemente für sich stehen können. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition. Das Tagpaar <dl>...</dl> rahmt den Glossar ein. Ein Eintrag (der zu definierende Ausdruck nämlich) wird mit <dt> (engl. definitionlist term), die zugehörige Definition mit <dd> (engl. definitionlist definition) begonnen.

Es ist auch auch möglich, mehrere Einträge/Definitionen hintereinander anzugeben, ohne dass eine Definition/ein Eintrag danach folgt bzw. vorangeht:

<dl>
 <dt>Peter Bittner
   <dd>Der weltbeste Programmierer seines Blocks
   <dd>Muttis Liebling
 <dt>Oma und Opa
   <dd>Omas Reindling ist der Beste!
</dl>

Peter Bittner
Der weltbeste Programmierer seines Blocks
Muttis Liebling
Oma und Opa
Omas Reindling ist der Beste!

Zusammenfassung und Beispiel

Nutzen wir nun das Gelernte und basteln wir ein praktisches Beispiel:

<html>
<head>
 <title>Listen</title>
</head>
<body>

<h1>Listen mit HTML</h1>

<h3>Kluge Spr&uuml;che:</h3>
<ul>
 <li>Der Philosoph ist <i>die</i> Person, die in einer dunklen
   Nacht in einem Zimmer ohne Beleuchtung eine schwarze
   Katze, die es nicht gibt, sucht und sie findet!
 <li>Wer nicht weiss wohin er geht, kann weit gehen (O. Cromwell)
 <li>Man sollte seinen Feinden verzeihen, aber nicht,
   bevor sie am Galgen h&auml;ngen (H. Heine)
</ul>

<h3>Was wir heute schon gelernt haben:</h3>
<ol>
 <li>Text in HTML
 <ol type="a">
  <li>Text mit und ohne Sonderzeichen
  <li>formatierter Text (fett, kursiv, unterstrichen)
 </ol>
 <li>Grafiken und Hintergrundgrafik einbinden
 <li>Listen
 <ol type="a">
  <li>ungeordnete Listen
  <li>geordnete Listen
  <li>Glossare/Definitionslisten
 </ol>
</ol>

<h3>Definitionen mathematischer Grundbegriffe:</h3>
<dl>
 <dt>Cauchy-Folge
   <dd>Wenn f&uuml;r jedes e&gt;0 ein N-e existiert, sodass...
 <dt>Gleichm&auml;&szlig;ige Stetigkeit
   <dd>Wenn zu jedem e&gt;0 ein Universal-N-e existiert...
 <dt>Gleichm&auml;&szlig;ige Konvergenz
   <dd>..., sodass gilt: |fn(x)-f(x)|&lt;e.
</dl>

</body>
</html>

Wird dieses Dokument in den Browser geladen, so sieht es wie folgt aus:

Im nächsten Kapitel beschäftigen wir uns mit Tabellen.

 

Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner