6.1: Geordende / Gesorteerde lijsten

Als je een opsomming wilt gebruiken dan kent HTML de zogenaamde lijsten. Er zijn drie varianten:

de geordende/gesorteerde lijst
de ongeordende/ongesorteerde lijst
de definitie-lijst

Hierboven zie je een voorbeeld van de geordende lijst. De volgende code is hiervoor gebruikt:

<ol>
   <li>de gesorteerde lijst</li>
   <li>de ongesorteerde lijst</li>
   <li>de definitie-lijst</li>
</ol>

Eigenlijk heel eenvoudig dus. Eerst <ol> om een genummerde lijst (Ordered List) te beginnen. Vervolgens elk regeltje vooraf laten gaan door <li> (van List Item) en weer afsluiten door </li>, waardoor er een nummer aan het begin van de regel wordt geplaatst en tenslotte afsluiten met </ol>.
Merk ook meteen op dat elke regel ietst inspringt ten opzichte van de gewone tekst.

Met <ol> maak je een geordende lijst die standaard bestaat uit cijfers

In dit eenvoudige voorbeeld worden de onderwerpen uit de lijst automatisch genummerd, te beginnen bij één. Aan het element <ol> had ik ook de optie start="n" kunnen toevoegen. In dat geval was de nummering begonnen met de waarde die ik voor n zou hebben ingevuld. Dus bijvoorbeeld <ol start="21"> zou hebben geresulteerd in het volgende:

de gesorteerde lijst
de ongesorteerde lijst
de definitie-lijst

Een andere mogelijkheid was geweest om de lijst niet te nummeren, maar bijvoorbeeld vooraf te laten gaan door de letters uit het alfabet. Dat doe je door middel van de toevoeging style="list-style-type: lower-alpha;".
<ol style="list-style-type: lower-alpha;"> geeft het volgende resultaat:

de gesorteerde lijst
de ongesorteerde lijst
de definitie-lijst

Met <ol> maak je een geordende lijst die bestaat uit letters wanneer je bij <ol> toevoegt style="list-style-type: lower-alpha;".

In plaats van list-style-type: lower-alpha; kun je ook gebruik maken van list-style-type: upper-alpha;. De onderwerpen uit je lijst worden dan vooraf gegaan door hoofdletters i.p.v. kleine letters. Andere mogelijkheden zijn list-style-type: lower-roman; voor kleine Romeinse cijfers of list-style-type: upper-roman; voor grote Romeinse cijfers.

Opdracht 14: Geordende lijst

Maak een nieuwe webpagina sport.html en sla die op in een nieuwe map met de naam sport.
Vertel in deze pagina iets over je eigen sport en noem daarna in een opsommingslijst voorzien van nummers de stand in de competitie op dit moment. Markeer je eigen team.
Maak een link vanaf de index.html pagina naar sport.html pagina en maak ook de link terug.