Cursus HTML - deel 6: lijsten

Trefwoorden: HTML, website, lijst, geordende lijst, ongeordende lijst, opsommingen

1. Inleiding


In dit deel gaan we even dieper in op "lijsten". Lijsten zijn heel handig om informatie geordend weer te geven op je scherm. Volgens mij zijn lijsten in HTML heel gemakkelijk te maken en je kan er nog zeer veel mee bereiken ook. Zoals een menu maken. Er bestaan verschillende soorten lijsten, maar hier bespreek ik de geordende en ongeordende lijst.
Bij een geordende lijst worden je items genummerd of ze krijgen een opsomming. Bij een ongeordende lijst hebben je items enkel een markeringsteken zoals een cirkeltje.
Dit kan een voorbeeld zijn van een ongeordende lijst:
  • item 1
  • item 2
  • item 3

En dit is een voorbeeld van een geordende lijst met cijfers:
1. item 1
2. item 2
3. item 3

2. Ongeordende lijsten


2.1. De basis van de ongeordende lijst

Een lijst bestaat standaard een uit een tag die aangeeft dat een lijst begint en eindigt en daartussen staan dan tags die de items in de lijst aanduiden. Bij een ongeordende lijst is die begin- en eindtag ul, wat staat voor unordered list. De items worden aangeduid met de li-tag. Hier vind je een voorbeeld ter verduidelijking
CODE
  1. <ul>
  2.         <li>Dit is mijn eerste item</li>
  3.         <li>Dit is mijn tweede item</li>
  4.         <li>Dit is mijn derde item</li>
  5. </ul>

Bovenstaande code zal dit in je browser tonen, maar met een rondje als markering:
  • Dit is mijn eerste item
  • Dit is mijn tweede item
  • Dit is mijn derde item

Je kan ook verschillende lijsten in elkaar nesten om bijkomende items bij een item te vermelden. Dit doe je via deze manier
CODE
  1. <ul>
  2.         <li>Dit is mijn eerste item</li>
  3.         <li>Dit is mijn tweede item
  4.         <ul>
  5.                 <li>Dit is een bijkomend item van het tweede item</li>
  6.                 <li>Dit is nog een bijkomend item van het tweede item</li>
  7.         </ul>
  8.         </li>
  9.         <li>Dit is mijn derde item</li>
  10. </ul>

Als je dit in je HTML-document zet, zou je normaal gezien dit moeten hebben in je browser (natuurlijk weer met een andere markeringsteken)
  • Dit is mijn eerste item
  • Dit is mijn tweede item
    • Dit is een bijkomend item van het tweede item
    • Dit is nog een bijkomend item van het tweede item
  • Dit is mijn derde item


2.2. Enkele attributen bij de ongeordende lijst

Je vraagt je nu waarschijnlijk wel af, "Kan ik die markeringstekens aanpassen?". Dit is voor een deel mogelijk met HTML, namelijk via het attribuut "type". Type kan enkel deze waarden hebben: "circle", "disc"; en "square", waarbij je respectievelijk een vol rondje, een leeg rondje of een vierkantje krijgt. Je kan dit toepassen op de ul-tag, maar ook afzonderlijk op de li-tags in je lijst.
CODE
  1. <ul>
  2.         <li type="circle">Dit item heeft een markering met een vol rondje</li>
  3.         <li type="disc">Dit item heeft een markering met een leeg rondje</li>
  4.         <li type="square">Dit item heeft een markering met een vierkantje</li>
  5. </ul>

Dit zijn de mogelijkheden van HTML om opmaak toe te passen op de markeringstekens van je lijst. Het is mogelijk om je eigen afbeelding als markering te zetten, maar daarvoor moet je gaan werken met CSS.

3. Geordende lijsten


3.1. De basis van de geordende lijst

De basis van een geordende lijst is ongeveer hetzelfde als bij een ongeordende lijst. Er wordt ook gebruikt gemaakt van een tag die de lijst omvat en tags die de lijst-items aanduiden. In dit geval is het enkel de lijstomvattende tag die gewijzigd wordt. De lijst-items (li) mag je dus behouden.
Zoals je misschien al kon vermoeden gebruiken we i.p.v. de ul-tag de ol-tag, wat staat voor ordered list.
CODE
  1. <ol>
  2.         <li>Dit is mijn eerste item</li>
  3.         <li>Dit is mijn tweede item</li>
  4.         <li>Dit is mijn derde item</li>
  5. </ol>

De output in je browser van deze code is ongeveer dezelfde als de code met ul-tags, het enige verschil is dat de items nu genummerd zijn.

Ook hier kan je weer verschillende lijsten nesten. Het is ook mogelijk om ongeordende en geordende lijsten samen te nesten. Ik denk niet dat het echt nodig is, maar voor de duidelijkheid toch even een codevoorbeeld van twee geordende lijsten die genest zijn.
CODE
  1. <ol>
  2.         <li>Dit is mijn eerste item</li>
  3.         <li>Dit is mijn tweede item
  4.         <ol>
  5.                 <li>Dit is een bijkomend item van het tweede item</li>
  6.                 <li>Dit is nog een bijkomend item van het tweede item</li>
  7.         </ol>
  8.         </li>
  9.         <li>Dit is mijn derde item</li>
  10. </ol>


3.2. Enkele attributen bij de geordende lijst

Ook bij geordende lijsten is het mogelijk om het type-attribuut te gebruiken om de opsommingstekens aan te passen. Deze keer niet met "circle", "disc"; en "square" als verplichte waarden, maar met "1", "a", "A", "i" of "I". Hier kan je zien voor wat ze staan:
waardeopsommingstekenvoorbeeld
1Nummers1. ,2., 3., 4., ...
aAlfabetisch met kleine lettersa., b., c., d., ...
AAlfabetisch met grote letters A., B., C., D., ...
iKleine romeinse cijfersi., ii., iii., iv., ...
IGrote romeinse cijfersI., II., III., IV., ...

Hier is het niet mogelijk om de items een verschillend teken te geven. Je kan type alleen maar toepassen op de ol-tag bij geordende lijsten.
CODE
  1. <ol type="A">
  2.         <li>Eerste item</li>
  3.         <li>Tweede item</li>
  4.         <li>Derde item</li>
  5. </ol>


Een extra attribuut bij de ol-tag is "start". Hiermee kan je startpositie aangeven, vanwaar er moet geteld worden. Als je bijvoorbeeld dit gebruikt:
CODE
  1. <ol type="1" start="4">
  2.         <li>Eerste item</li>
  3.         <li>Tweede item</li>
  4.         <li>Derde item</li>
  5. </ol>

Dan zal de opsomming beginnen vanaf 4, en niet vanaf 1.

4. Slot


Zo, nu weet je ook hoe je een lijst kan opstellen in HTML. Lijsten zijn eigenlijk helemaal niet moeilijk te maken en als je weet wat je ermee kan doen, kan je er schitterenden dingen mee maken. Zoals een menu met dropdowns (wel in combinatie van CSS natuurlijk :)).

Als je nog vragen hebt, kan je ze altijd stellen in de forums.

Klik hier om deel 7 frames te lezen.Dit artikel werd geschreven door Simon op woensdag 25 april 2007 om 18:01 en werd sindsdien 8569 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.