Listen

Aufbau

Eine Liste besteht immer aus zwei Befehlselementen:

  • dem Listenstartbefehl, der die Art der Liste definiert (geordnet, ungeordnet, Definitionsliste)
  • dem Listenpunkt, der den Aufzählungspunkt definiert.
     
 

 
Ungeordnete Liste
beginnt / Endet mit: <ul>...</ul>
Listenpunkt: <li>...</li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 Eine ungeordnete Liste
<ul>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<li>dritter Eintrag</li>
</ul>

</body>
</html>
SO SIEHT'S AUS

 
Aufzählungszeichen definieren:
Element gefüllter Kreis (Standard): <ul type="disc"> oder <li type="disc">
Element Quadrat: <ul type="square"> oder <li type="square">
Element nicht gefüllter Kreis: <ul type="circle"> oder <li type="circle">

SO SIEHT'S AUS

Demo: Kafee-Liste; Aufgabe: Eisliste kurz Sorten auszeichnen
  

 
Geordnete (nummerierte) Listen
beginnt / Endet mit: <ol>...</ol>
Listenpunkt: <li>...</li>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 Eine ungeordnete Liste
<ol>
<li>erster Eintrag</li>
<li>zweiter Eintrag</li>
<li>dritter Eintrag</li>
</ol>

</body>
</html>
SO SIEHT'S AUS

Demo: Kaffeeliste; Aufgabe: Eisliste kurz, Sorten nummerieren

Aufzählungszeichen definieren:
 für 1, 2, 3, 4, 5: <ol type="1">
für A, B, C, D, E: <ol type="A">
für a, b, c, d, e: <ol type="a">
für I, II, III, IV, V: <ol type="I">
für i, ii, iii, iv, v: <ol type="i">

Nummerierte Listen können mit einem beliebigen Wert beginnen:
<ol type="a" start="5">

SO SIEHT'S AUS

Demo Kaffeeliste; Aufgabe: Aufgabe: Eisliste kurz, auf I & Erdbeer auf i.
 

 
Verschachtelte Listen
Zur Verschachtelung von Listen wird die untergeordnete Liste anstelle eines Aufzählungspunktes gesetzt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 Verschachtelung von Listen:
<ol type="1">
 <li>erster Eintrag</li>
 <li>zweiter Eintrag</li>
<li> Neue Liste
   <ul type="circle">
   <li>Eintrag 'A'</li>
   <li>Eintrag 'B'</li>
   </ul>
</li>
<li>dritter Eintrag</li>
</ol>

</body>
</html>
SO SIEHT'S AUS

Demo Eisliste kurz & Kaffee; Aufgabe: Eisliste lang.

 
Definitionslisten
Für Fachbegriffe und zugehörige Definitionen gedacht
beginnt / Endet mit: <dl>...</dl>
Ausdruck: <dt>...</dt>
Definition: <dd>...</dd>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Gedicht </title>
</head>
<body>
 Eine Definitionsliste
<dl>
<dt>erster Ausruck</dt>
<dd>zugehörige Definition</dd>
<dt>zweiter Ausruck</dt>
<dd>zugehörige Definition</dd>
 </dl>

</body>
</html>
SO SIEHT'S AUS
 

 
Kompakte Listen
Listen können durch das Attribut compact="compact" reduzierter dargestellt werden (wird nicht von jedem Browser interpretiert).

SO SIEHT'S AUS