Handleiding HTML

Lijsten
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, Elementen, Ongeordende lijsten, Geordende lijsten, Definitielijsten en Het gebruik van stijlen.

Introductie

In HTML-documenten kun je verschillende soorten lijsten toepassen. De meest gebruikte zijn de ongeordende en de geordende lijst, daarnaast zijn er nog de definitielijst, de menulijst en de directorylijst.

In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. De ongeordende lijst wordt gedefinieerd met het element UL (unordered list) en de geordende lijst met het element OL (ordered list). Voor beide lijsten geldt dat een item wordt bepaald met het LI element. Met het TYPE attribuut kan de weergave van de markering vastgelegd worden. Bij de ongeordende lijst kan gekozen worden uit een drietal symbolen (disc, circle en square), bij de geordende lijst uit diverse soorten getallen en letters.
Ongeordende en geordende lijsten mogen (ook onderling) genest worden, dat wil zeggen dat binnen een lijst een nieuwe lijst opgenomen mag worden.

Een definitielijst is een lijst, welke bestaat uit termen en bijbehorende beschrijvingen. Het DL element bepaalt het begin en einde van een definitielijst en de elementen DT en DD definiëren respectievelijk de term en de beschrijving.

De menulijst (gedefinieerd met het MENU element) was oorspronkelijk bedoeld als een ongeordende lijst, waarvan de items niet meer dan één regel zouden beslaan. Bij de directorylijst (gedefinieerd met het DIR element) zou elke item niet meer dan 20 karakters moeten bevatten en zou de lijst weergegeven moeten worden in meerdere kolommen. Omdat alle belangrijke browsers zowel de menulijst als de directorylijst weergeven als de gewone ongeordende lijst, hebben de elementen MENU en DIR hun betekenis verloren. Het gebruik ervan wordt in HTML 4 daarom afgeraden en ze worden in deze handleiding ook niet behandeld.

Elementen

Voor het maken van lijsten zijn de volgende elementen beschikbaar:

DD
DIR

DL
DT

LI
MENU

OL
UL

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

Ongeordende lijsten

In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. De ongeordende lijst wordt gemaakt met de elementen UL en LI.

<UL> <LI>Dit is het eerste item van de ongeordende lijst (indien ... in)</LI> <LI>Dit is het tweede item van de ongeordende lijst</LI> <LI>Dit is het derde item van de ongeordende lijst</LI> </UL>

De browser geeft dit zo weer:

Dit is het eerste item van de ongeordende lijst (indien de tekst langer is dan op één regel past, springt deze op de volgende regels in)
Dit is het tweede item van de ongeordende lijst
Dit is het derde item van de ongeordende lijst

Door het TYPE attribuut toe te voegen aan het UL element, kan bepaald worden welk symbool gebruikt wordt als markering voor alle items van de lijst. In het volgende voorbeeld is de waarde "square" gebruikt en zou een vierkant blokje weergegeven moeten worden.

<UL TYPE="square"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </UL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
Dit is het derde item van de lijst

Het TYPE attribuut kan ook aan het LI element toegevoegd worden. Het symbool voor de markering kan daardoor voor elk item afzonderlijk bepaald worden.

<UL> <LI TYPE="square">De markering ... zijn</LI> <LI TYPE="circle">De markering ... zijn</LI> <LI TYPE="disc">De markering ... zijn</LI> </UL>

De browser geeft dit zo weer:

De markering van dit item zou een vierkant blokje moeten zijn
De markering van dit item zou een open rondje moeten zijn
De markering van dit item zou een gesloten rondje moeten zijn

Binnen een lijst mag weer een volgende lijst opgenomen worden.

<UL TYPE="square"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </UL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
- Dit is het eerste subitem
- Dit is het tweede subitem
Dit is het laatste item van de lijst

Geordende lijsten

In een geordende lijst zijn de items genummerd met behulp van een getal of een letter. De geordende lijst wordt gemaakt met de elementen OL en LI.

<OL> <LI>Dit is het eerste item van de geordende lijst (indien ... in)</LI> <LI>Dit is het tweede item van de geordende lijst</LI> <LI>Dit is het derde item van de geordende lijst</LI> </OL>

De browser geeft dit zo weer:

Dit is het eerste item van de geordende lijst (indien de tekst langer is dan op één regel past, springt deze op de volgende regels in)
Dit is het tweede item van de geordende lijst
Dit is het derde item van de geordende lijst

Door het TYPE attribuut toe te voegen aan het OL element kun je bepalen welke nummering gebruikt moet worden. Mogelijke waarden voor het TYPE attribuut zijn getallen (1), kleine letters (a), hoofdletters (A), kleine romeinse getallen (i) en grote romeinse getallen (I). In het volgende voorbeeld worden kleine letters gebruikt.

<OL TYPE="a"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </OL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
Dit is het derde item van de lijst

Met het START attribuut kun je bepalen dat de nummering niet met de eerste waarde (1, a, A, i of I) moet beginnen, maar met een andere waarde. Dat kan nuttig zijn indien je een lijst wilt onderbreken met een paragraaf tekst en daarna de nummering weer wilt doorzetten. De waarde van het START attribuut is altijd een getal, ongeacht welke nummering je gebruikt.

<OL TYPE="I" START="3"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </OL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
Dit is het derde item van de lijst

Binnen een lijst mag weer een volgende lijst opgenomen worden. Het kan daarbij handig zijn de nummering voor de geneste lijst afwijkend te maken.

<OL TYPE="1"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <OL TYPE="a"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </OL> </LI> <LI>Dit is het laatste item van de lijst</LI> </OL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
1. Dit is het eerste subitem
2. Dit is het tweede subitem
Dit is het laatste item van de lijst

Geordende en ongeordende lijsten mogen ook door elkaar gebruikt worden.

<OL TYPE="1"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst <UL TYPE="disc"> <LI>Dit is het eerste subitem</LI> <LI>Dit is het tweede subitem</LI> </UL> </LI> <LI>Dit is het laatste item van de lijst</LI> </OL>

De browser geeft dit zo weer:

Dit is het eerste item van de lijst
Dit is het tweede item van de lijst
- Dit is het eerste subitem
- Dit is het tweede subitem
Dit is het laatste item van de lijst

Definitie lijsten

<DL> <DT>Term 1</DT> <DD>Hier staat de definitie van term 1</DD> <DT>Term 2</DT> <DD>Hier staat de definitie van term 2</DD> </DL>

De browser geeft dit zo weer:

Term 1: Hier staat de definitie van term 1
Term 2: Hier staat de definitie van term 2

Indien de termen kort zijn, kan het COMPACT attribuut ervoor zorgen dat term en definitie op dezelfde regel komen te staan.

<DL COMPACT> <DT>x1</DT> <DD>Hier staat de definitie van x1</DD> <DT>x2</DT> <DD>Hier staat de definitie van x2</DD> </DL>

De browser geeft dit zo weer:

x1: Hier staat de definitie van x1
x2: Hier staat de definitie van x2

Het gebruik van stijlen

Voor alle elementen welke gebruikt worden bij het maken van lijsten, kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd voor het UL element.

<UL STYLE="font-style: italic; font-size: 14pt; color: #008080; background: #FFFF99;"> <LI>Dit is het eerste item van de lijst</LI> <LI>Dit is het tweede item van de lijst</LI> <LI>Dit is het derde item van de lijst</LI> </UL>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

Een aantal stijleigenschappen heeft speciaal betrekking op lijsten. Ze worden beschreven en met voorbeelden geïllustreerd in het onderdeel Stijleigenschappen voor lijsten. Eén van de mogelijkheden is het gebruiken van een afbeelding als markering. In het volgende voorbeeld is dat te zien.

<UL STYLE="list-style: url(redball.gif) square; background-color: #FFFF99;"> <LI>De waarde url ... wordt.</LI> <LI>De waarde square ... worden).</LI> </UL>

Standaard wordt er zowel boven als onder de lijst een blanco regel geplaatst en springt de lijst in ten opzicht van de overige tekst. Soms wil je een lijst echter direct in lijn met de tekst opnemen. Dan kun je gebruik maken van de Stijleigenschappen voor de margin. In het volgende voorbeeld is dit te zien.

<P STYLE="margin-bottom: 0px;">In dit ... gebruikt:</P> <UL STYLE="margin-left: 17px; margin-top: 0px; margin-bottom: 0px;"> <LI>margin-left</LI> <LI>margin-top</LI> <LI>margin-bottom.</LI> </UL>

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster hoe de browser dit voorbeeld weergeeft.

Niet elke browser die Cascading Style Sheets ondersteunt, heeft de margin-eigenschappen correct geïmplementeerd. Daarom wordt aangeraden bij gebruik van deze eigenschappen de weergave te controleren in de verschillende browsers en/of Browser-specifieke stijlbladen toe te passen.

Inhoud Handleiding HTML Index Inhoud Lijsten