Lektion 5: Lister

Lær at lave lister (punktopstilling). Gennemgår forskellige liste typer vha. brugbare eksempler.

Du kan lave tre forskellige type lister med med HTML. Lister med bullets, nummererede lister og lister uden numre eller bullets.

Lister med bullets

Resultatet af en simpel liste med bullets ser således ud:

• noget tekst
• og noget her

Koden til listen herover ser således ud:

<ul>
<li>noget tekst</li>
<li>og noget her</li>
</ul>

En liste med bullets starter og slutter således med <ul> ..og.. </ul>. Her imellem kan vi have X antal punkter som starter og slutter med <li> ..og.. </li>.

<ul> tag'n kan modtage koden type="" hvor der vælges hvilken form selve bullets'ne skal have. type="" kan have flg. værdier: "square", "circle" og "disc". Du kan f.eks. bruge disse typer, når duy "fletter" lister.

En flettet lister

En "flettet liste" er en liste inde i en liste. Resultatet kan f.eks. se således ud:

• Først punkt
• Andet punkt
• Første underpunkt
• Andet underpunkt
• Tredie punkt

Koden til listen herover ser således ud:

<ul>
<li>Først punkt</li>
<li>Andet punkt</li>
<ul type="circ">
<li>Første underpunkt</li>
<li>Andet underpunkt</li>
</ul>
<li>Tredie punkt</li>
</ul>

Numererede lister

Numererede lister - også kaldet <ol> lister er en smule mere avancerede end lister med bullets - <ul> lister.

Når du laver en nummereret liste er der to ting du skal tage stilling til: a) hvilken form for nummerering ønsker du, og b) hvor starter nummereringen / hvilket nummer skal de enkelte punkter have.

Vha. koden type="" i <ol> tag'n kan du bestemme hvilken nummererings type du ønsker. Koden for type= kan være: "1", "a", "A", "i" og "I".

Vha. koden start="" i <ol> tag'n kan du bestemme hvilket nummer listen skal starte på. Har du f.eks. skrevet type="I" (romertal) og start="3", vil første punkt i listen starte med tallet: III

Vha. koden value="" kan du angive hvilket nummer et givent punkt skal have.

Lad os tage et eksempel:

<ol type="I" start="3">
<li>Første punkt</li>
<li>Andet punkt</li>
<li value="10">Tredie punkt</li>
</ol>

Resultatet ser således ud:

3. Første punkt
4. Andet punkt
10. Tredie punkt

Lister uden numre og bullets

Vha. <dl> lister er det muligt at lave lister som ikke har bullets/numre og det er muligt at lave små "overskrifter" til listepunkterne. Dette er lettest at illustrere med et eksempel:

Du kan spise bær:

Jordbær

Brombær

Du kan spise grønsager:

Salat

Agurk

Du kan spise frugt:

Æble

pære

Her ser vi tre overskrifter med hver to liste punkter. Listen starter og slutter med <dl> ..og.. </dl>. En overskrift starter og slutter med <dt> ..og.. </dt>. Et punkt starter og slutter med <dd> ..og.. </dd>.

Koden til eksemplet herover ser således ud:

<dl>
<dt>Du kan spise bær:</dt>
<dd>Jordbær</dd>
<dd>Brombær</dd>
<dt>Du kan spise grønsager:</dt>
<dd>Salat</dd>
<dd>Agurk</dd>
<dt>Du kan spise frugt:</dt>
<dd>Æble</dd>
<dd>pære</dd>
</dl>

Skrevet okt. 2001 af Niels Rune Bøggild

Tilføjet af Simon Glue den 02-12-2003 - Hits: 2539