7. Listen

Ohne Theorie geht's nicht!

Listen enthalten Aufzählungen und Nummerierungen, die dazu dienen, bestimmte Punkte übersichtlich darzustellen. Wir kennen Listen z.B. aus Inhaltsverzeichnissen von Büchern.

Es werden verschiedene Typen unterschieden:
  • Ungeordnete Listen: <UL> ... </UL>
  • Geordnete Listen: <OL> ...</OL>
  • Definitionslisten: <DL> ... </DL>
Übrigens, bei dieser Aufzählung handelt es sich um eine ungeordnete Liste.

Als geordnete Liste mit Nummerierung würde diese Aufzählung so aussehen:

  1. Ungeordnete Listen: <UL> ... </UL>
  2. Geordnete Listen: <OL> ...</OL>
  3. Definitionslisten: <DL> ... </DL>
 Bei ungeordneten und geordneten Listen werden die einzelnen Listenpunkte mit dem Befehl

<LI> ... </LI>

zwischen dem Listenanfangs- und Endbefehl definiert.
Zum Beispiel:

<UL>

<LI> ... </LI>
<LI> ... </LI>

</UL>

Der Text eines Listenpunktes wird zwischen <LI> und </LI> geschrieben.

Bei einer Definitionsliste kann der Aufzählpunkt oder die Ziffer durch eigenen Text oder auch eine Grafik ersetzt werden.

Beipiel:
Länderkennzeichen:

<dl compact>
<dt>D <dd>Deutschland
<dt>NL <dd>Niederlande
<dt>A <dd>Österreich
<dt>CH <dd>Schweiz
</dl>

Und so sieht's in der Browserdarstellung aus:

Länderkennzeichen:

D
Deutschland
NL
Niederlande
A
Österreich
CH
Schweiz
Die Listenpunkte werden bei dieser Definitionsliste durch den Befehl

<DT> ... <DD> ...

festgelegt.

Ein Endbefehl ist nicht erforderlich.

Die DL-Erweiterung "compact" sorgt dafür, dass der Listenpunkt nicht versetzt dargestellt wird.
Wird "compact" weggelassen, dann sieht die Darstellung so aus:

Länderkennzeichen:

D
Deutschland
NL
Niederlande
A
Österreich
CH
Schweiz

Praxis!

Der HTML-Editor bietet viele Möglichkeiten, Listen schnell und leicht zu erstellen - etwa wie mit einer Textverarbeitung. Einfach geht es besonders dann, wenn die Listentexte bereits vor der Formatierung im Editor geschrieben wurden, wie z.B.

Meine Lieblingsfarben:
grün
blau
gelb
schwarz
lila

Nach der Markierung aller Listenpunkte können mit Hilfe der Symbole der Karteikarte "Listen" die jeweiligen Listen direkt erstellt werden.

Karteikarte LISTEN

Befehl
erzeugter Quellcode
Browserdarstellung

Unsortierte Liste (UL) mit Aufzählzeichen
 Unsortierte Liste (UL) mit Aufzählzeichen
<ul>
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ul> 		Unsortierte Liste (UL) mit Aufzählzeichen
  • grün
  • blau
  • gelb
  • schwarz
  • lila

Sortierte Liste -OL- (Nummerierung: arabische Ziffern)
 Sortierte Liste -OL- (Nummerierung: arabische Ziffern)
<ol start="1" type="1">
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ol> 		Sortierte Liste -OL- (Nummerierung: arabische Ziffern)
  1. grün
  2. blau
  3. gelb
  4. schwarz
  5. lila

Sortierte Liste (Nummerierung: römische Ziffern GROßBUCHSTABEN)
 Sortierte Liste (Nummerierung: römische Ziffern GROßBUCHSTABEN)
<ol start="1" type="I">
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ol> 		Sortierte Liste (Nummerierung: römische Ziffern GROßBUCHSTABEN)
  1. grün
  2. blau
  3. gelb
  4. schwarz
  5. lila

Sortierte Liste (Nummerierung: römische Ziffern Kleinbuchstaben)
 Sortierte Liste (Nummerierung: römische Ziffern Kleinbuchstaben)
<ol start="1" type="i">
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ol> 		Sortierte Liste (Nummerierung: römische Ziffern Kleinbuchstaben)
  1. grün
  2. blau
  3. gelb
  4. schwarz
  5. lila

Sortierte Liste (GROßBUCHSTABEN)
 Sortierte Liste (GROßBUCHSTABEN)
<ol start="1" type="A" >
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ol> 		Sortierte Liste (GROßBUCHSTABEN)
  1. grün
  2. blau
  3. gelb
  4. schwarz
  5. lila


Sortierte Liste (Kleinbuchstaben)
 Sortierte Liste (Kleinbuchstaben)
<ol start="1" type="a" >
<li>grün</li>
<li>blau</li>
<li>gelb</li>
<li>schwarz</li>
<li>lila</li>
</ol> 		Sortierte Liste (Kleinbuchstaben)
  1. grün
  2. blau
  3. gelb
  4. schwarz
  5. lila

neuer Listenpunkt
 Neuer Listenpunkt in einer unsortierten oder sortierten Liste zur manuellen Einfügung:

<li></li>

 

Definitionsliste
 Definitionsliste
<dl>
<dt>UL<dd>Unsortierte Liste
<dt>OL<dd>Sortierte Liste
<dt>DL<dd>Definitionsliste
</dl> 		Definitionsliste
UL
Unsortierte Liste
OL
Sortierte Liste
DL
Definitionsliste

 
 Definitionsliste
<dl compact>
<dt>UL<dd>Unsortierte Liste
<dt>OL<dd>Sortierte Liste
<dt>DL<dd>Definitionsliste
</dl>

compact manuell eingeben!

Definitionsliste
UL
Unsortierte Liste
OL
Sortierte Liste
DL
Definitionsliste

neuer Listenpunkt in eine Definitionsliste
 Neuer Listenpunkt in einer Definitionsliste zur manuellen Einfügung:

<dt><dd>

 

Arbeitsaufgaben

Nutze die Gelegenheit, auf deiner neuen Website Listen einzubauen.
  1. Überlege dir Anwendungsmögichkeiten
  2. Füge z.B. auf deiner Startseite (Homepage) ein Inhaltsverzeichnis in Form einer unsortierten Liste mit Links (!) zu allen anderen Seiten deiner Website ein!

Vorläufiges Ende des GRundkurses

Demnächst werden noch Stationen folgen, z.B. das Anlegen von Frames, Arbeitsaufgaben zur Vertiefung der Kurseinheiten ...

Zurück zur Übersicht "Eigene Homepage"
Home