HTML cursus

Les 6: Lijsten

In deze les worden lijsten besproken. Lijsten worden voornamelijk gebruikt bij opsommingen en dus ook menu's. We onderscheiden drie soorten lijsten.

  • Geordende lijsten,
  • ongeordende lijsten,
  • en definitie lijsten.

Dit is meteen een voorbeeld van een lijst, namelijk een ongeordende.

Geordende lijsten

Hiervoor gebruiken we de ol tag. Deze heeft twee belangrijke attributen, het eerste is het type attribuut. Deze kan vijf mogelijke waarden hebben.

Waarde 1 a A I i
Omschrijving Getallen Kleine letters Hoofdletters Grote Romeinse cijfers Kleine Romeinse cijfers

De standaardwaarde is 1.

Het tweede attribuut is het start attribuut. Hiermee bepalen we met welk getal of letter de lijst moet beginnen. De waarde is altijd een getal, ongeacht het type. De standaardwaarde is uiteraard 1.

Om elementen van een lijst te definiëren, gebruiken we de li tag. Hieronder volgt een voorbeeldje, dat ineens het gebruik van de attributen illustreert.

<ol type="a" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Bekijk het resultaat van bovenstaande code. Resultaat
Opmerking

Gebruik van het start attribuut is eerder uitzonderlijk.

Ongeordende lijsten

Voor ongeordende lijsten te definiëren gebruiken we de ul tag. Deze heeft enkel een type attribuut die onderstaande waarden verwacht.

Waarde disc circle square
Omschrijving Gevulde cirkel Open cirkel Gevuld vierkantje

De standaardwaarde is disc. Een voorbeeld van een ongeordende lijst volgt hier.

<ol type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Bekijk het resultaat van bovenstaande code. Resultaat

Definitie lijsten

Om een definitie lijst te creëren, gebruiken we de dl tag. Dan voegen we een term (of willekeurige zin) in met de dt tag. Voor de omschrijving of definitie van deze term gebruiken we de dd tag. Om dit duidelijk te maken, volgt er een voorbeeldje.

<dl>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol</dd>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
</dl>
Bekijk het resultaat van bovenstaande code. Resultaat

Geneste lijsten (Lijsten in lijsten)

Het is mogelijk om een lijst in een lijst te maken. Onderstaand voorbeeld toont dit aan.

<ul type="circle">
<li>Honden
<ol type="I">
<li>Duitse herder</li>
<li>Golden Retriever</li>
<li>Pitbull</li>
</ol>
</li>
<li>Vogels
<ol type="I">
<li>Specht</li>
<li>Ekster</li>
</ol>
</li>
<li>Vissen
<ol type="I">
<li>Steur</li>
<li>Goudvis</li>
</ol>
</li>
</ul>
Bekijk het resultaat van bovenstaande code. Resultaat
Opmerking

Merk weer op dat indentatie (zoals besproken in Les 4: Tabellen op het einde) de code veel overzichtelijker zou maken.