< Inhoudstafel

We gebruiken heel veel opsommingen in ons dagelijkse leven. Denk maar aan een opsomming van de ingrediënten en een geordend stappenplan bij het maken van een gerecht.

Als u aan lijsten denkt dan denkt u ongetwijfeld aan opsommingpunten of nummering zoals in Word of Indesign.

In HTML is een lijst een genest block-element waarbij - net als in Word - alle elementen van de lijst onder elkaar worden geplaatst.

In HTML kunt u drie soorten lijsten of opsommingen maken:

  1. Lijsten met opsommingstekens met de tag <ul> </ul> Letterlijk vertaald: unordered list = ongeordende lijst.
  2. Genummerde lijsten met de tag <ol> </ol> Letterlijk vertaald: ordered list = geordende lijst.
  3. Defenitielijsten met de tag <dl> </dl> Letterlijk vertaald: definition list = definitie lijst.

Het <ul> of <ol> element definieert het begin en einde van een lijst. Elk item van een lijst wordt gedefinieerd met behulp van het <li> element. Letterlijk vertaald: list item, dit item erft de eigenschappen van de <ol> of <ul>.

Het <ul> element is het hoofdelement en zorgt voor standaard een zwarte bol. Je kan de weergave van het icoon veranderen dit doen we later via CSS list-style-type.

De code ziet er als volgt uit:

Het <ol> element zorgt voor een genummerde of geordende lijst.

De code ziet er als volgt uit:

Een andere manier van opsomming is de definitielijst.

Het <dl> element definieert het begin en einde van een definitielijst. Je definieert een item met de <dt> tag, de <dd> tag geeft een omschrijving hiervan.

Lijsten kunnen ook genest worden, hieronder een voorbeeld van een genummerde opsomming met een ongenummerde sublijst.

Kies een eigen recept uit die je gaat maken en leg aan de hand van opsommingen uit wat je nodig hebt. Maak ook een stappenplan van hoe je het moet maken. Later gaan we dit verder stijlen.

Sla de oefening op als 'oef4Lijsten.html'.

Tip: Speciale karakters worden raar weergegeven en moeten worden vervangen door een ascii-code. Je vind een overzicht terug onder http://www.ascii.cl/htmlcodes.htm. Voorbeeld: ë - html nummer of HTML naam of decimaal (Alt-toets)235

We gaan bovenaan het h1 element ook een menu plaatsen, in het hoofdstuk hyperlinks zullen we dit verder uitbreiden.

Een menu binnen een webpagina word altijd opgemaakt via een opsomming, je hebt meer opmaak mogelijkheden in het stijldocument.

Samenvatting lijsten:

  • Er bestaan 3 soorten HTML lijsten: geordend lijst, ongeordend lijst en een definitielijst.
  • Geordende lijst gebruikt nummers.
  • Ongeordende lijst gebruikt bollen.
  • Definitielijst wordt gebruikt om terminologie te definiëren.
  • Lijsten kunnen genest worden in elkaar.