Les 6

Lijsten Maken

In deze les kun lees je hoe je lijsten maakt. Lijsten maken met HTML is erg eenvoudig.
Er zijn drie 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

De drie soorten lijsten zijn hiermee behandeld.
Nu nog een laatste paragraaf over geneste lijsten.

 

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>.

Einde Les Zes

Dat was het voor deze les. Nu ben je in staat met ongenummerde lijsten, geordende lijsten, definitielijsten en geneste lijsten te werken.
Tijd om verder te gaan... :)

• Verder naar Les 7!
• Terug Naar het Lessenoverzicht!
• Bekijk boeken over HTML

Homepage-Maken Tip