In deze les kun lezen hoe je lijsten maakt. Lijsten maken met HTML is erg eenvoudig. Er zijn vier verschillende soorten lijsten die achtereenvolgens aan bod komen:

• Unnumbered Lists (ongenummerde lijsten)
• Ordered Lists (geordende lijsten)
• Definition Lists (definitielijsten)
• Tenslotte bespreek ik nested lists (geneste lijsten).

Unnumbered Lists (ongenummerde lijsten)
In een ongenummerde lijst wordt iedere lijstobject voorafgegaan door een bullet (een dikke punt).

Je begint de ongenummerde lijst met de <UL> tag - de openingstag voor de lijst. Vervolgens gebruik je de tag <LI>  voor ieder lijstobject (List Item) dat je in de lijst wilt plaatsen. De eindtag </LI> is niet nodig. Als je alle List Items hebt ingevoerd, sluit je de lijst met de eindtag </UL>.

Een voorbeeld van een Unnumbered List:

<UL>
<LI>appels</LI>
<LI>peren</LI>
<LI>bananen</LI>
<LI>druiven</LI>
</UL>

Het resultaat van de bovenstaande code is:

• appels
• peren
• bananen
• druiven

Ordered Lists (geordende lijsten)
In een geordende lijst wordt elk lijstobject voorafgegaan door een nummer. Verder lijkt alles op de Unnumbered List.

De begintag is <OL>. Dan gebruik je weer de tag <LI> voor ieder lijstobject dat je in wilt voeren. Tenslotte sluit je de geordende lijst weer af met de eindtag:</OL>.

Een voorbeeld van een Ordered List:

<OL>
<LI>sinaasappels</LI>
<LI>mandarijnen</LI>
<LI>mangos</LI>
<LI>perziken</LI>
</OL> 

Nu komt het resultaat van deze code:

1. sinaasappels
2. mandarijnen
3. mangos
4. perziken

Definition Lists (definitielijsten)
De definitielijst wordt begonnen met de begintag <DL>. Een definitielijst bestaat uit een term die verklaard moet worden - de Definition Term - gecodeerd als de tag <DT> en de zgn. Definition Definition - de verklaring van de term - met de tag <DD>. De eindtag van de lijst is dan weer:</DL>.

Een voorbeeld van een Definition List:

<DL>
<DT>Appel</DT>
<DD>Vrucht van de appelboom</DD>
<DT>Peer</DT>
<DD>De sappige vrucht van de perenboom</DD>
</DL>

Je krijgt dan het volgende op je scherm te zien:

Appel
        Vrucht van de appelboom

Peer
        De sappige vrucht van de perenboom

Nested Lists (geneste lijsten)
Een geneste lijst is niets anders dan een lijst in een andere lijst. Hierbij zijn alle combinaties van de drie hierboven besproken lijsten mogelijk.
Zo kun je een ongenummerde lijst in een geordende lijst, een definitielijst in een ongenummerde lijst, maar ook een ongenummerde lijst in een ongenummerde lijst maken.

Je begint met de tag van de hoofdlijst, dus <UL><OL>of <DL>. Dan voeg je het List Item (lijstobject) in, met daarna de tag van de sublijst die je wilt maken.

Dit voorbeeld maakt het duidelijk:

<OL>
<LI>Honden
<UL>
<LI>Jack Russell Terriër</LI>
<LI>Spaniël</LI>
<LI>Golden Retriever</LI>
</UL>
</LI>
<LI>Vogels
<UL>
<LI>Merel</LI>
<LI>Spreeuw</LI>
<LI>Mus</LI>
</UL>
</LI>
</OL>

Dit is het resultaat:

1. Honden
   • Jack Russell Terriër
   • Spaniël
   • Golden Retriever
2. Vogels
   • Merel
   • Spreeuw
   • Mus

Zie je wat er gebeurt? Ik begin met de tag voor de hoofdlijst <OL>

- een geordende lijst.

In deze geordende lijst neem ik een ongenummerde lijst op achter het <LI> "honden" uit de hoofdlijst.

Deze ongenummerde lijst sluit ik weer af nadat ik er de gewenste honden ingevoegd heb.

Vervolgens ga ik weer verder met de hoofdlijst (de geordende lijst), nu met het lijstobject "vogels".

Ook nu begin ik weer een ongenummerde lijst, stop de nodige vogels erin, en sluit hem weer af.

Tenslotte sluit ik de hoofdlijst af met de eindtag: </OL>.

Zo, nu weet je hoe je allerlei lijsten kunt maken in HTML. Je kunt dit artikel altijd opzoeken op onze website. Ken je iemand die ook geholpen zou zijn met deze cursus? Mail gewoon dit exemplaar van Web Succes Magazine naar die persoon en vertel hem dat hij ook lid kan worden! Ze zullen het zeer waarderen!

In het volgend artikel volgt deel 8: Werken met tabellen.

Deze cursus HTML valt onder copyright van mijnhomepage.nl. Dit artikel mag niet worden overgenomen zonder uitdrukkelijke toestemming van de webmaster van mijnhomepage.nl.