Lijsten
pv2_paars.gif 204*37
 mail me
 
 
 
  index
  home
  basis
  linken
  lijsten
  plaatje
  varia
 
Intro HTML codes.

HTML Lists: unordered, ordered en definition lijsten

Met HTML kun je ook nette lijsten maken. Ze kunnen inspringen, voorzien zijn van bolletjes ervoor, of ze kunnen ook genummerd zijn. Ieder item in een lijst heeft deze tag <LI>, en er is geen sluittag nodig.

De Unordered List

Een Unordered List heeft bolletjes vooraan. Je opent een Unordered List met <UL> en sluit het met </UL>.

Hier is de code en het resultaat van een Unordered List:

De code:

<UL>
<LI> melk
<LI> brood
<LI> fruit
</UL>

  

Het resultaat:


  • melk
  • brood
  • fruit

Unordered List: aangeven van het bolletje ('bullet') type

We kunnen het TYPE= attribuut gebruiken om aan te geven hoe dat het bolletje er uit moet zien van de Unordered List:

TYPE="DISC"
TYPE="CIRCLE"
TYPE="SQUARE"

Dus wil je ALLE items voorzien van een SQUARE 'bullet' gebruik dan hetTYPE= attribuut voor je <UL> tag:

De code:

<UL TYPE="circle">
<LI> 1 ei
<LI> 1 kop melk
<LI> 2 koppen meel
<LI> 1 theelepel suiker
</UL>

Het resultaat:


  • 1 ei
  • 1 kop melk
  • 2 koppen meel
  • 1 theelepel suiker

De Ordered List

Een Ordered List heeft cijfertjes. Je begint een Ordered List met <OL> en sluit het met </OL>.

Hier is de code en het resultaat van een Ordered List:

De code:

<OL>
<LI> melk
<LI> brood
<LI> fruit
</OL>

  

Het resultaat:


  1. melk
  2. brood
  3. fruit

Ordered Lists: soorten cijfers aangeven

De Ordered List tag heeft verschillende attributen:

TYPE="A" (Hoofdletters... bv, A,B,C etc.)
TYPE="a" (kleine letter... bv, a,b,c etc.)
TYPE="I" (Grote Romeinse Cijfers... bv,II,III,IV etc.)
TYPE="i" (kleine romeinse cijfers... bv,ii,iii,iv etc.)
TYPE="2" (Standaard cijfers... bv, 1,2,3 etc.)

Nu kun je deze attributen zowel in de <OL> openings tag of in de individuele <LI> List Item tags gebruiken!

Ordered Lists: het begincijfer aangeven

Wil je nu je lijst met een bepaald cijfer laten beginnen bv 100, dan kan dat. Heel eenvoudig geef je het begincijfer in je lijst aan:

De code:

Cool Sites van 100-200

<OL START="100">
<LI> Gazoo's Gold
<LI> Fortress of Solitude
<LI> Bravenet

blah blah blah

</OL>

 

Het resultaat:

Cool Sites van 100-200


  1. Gazoo's Gold
  2. Fortress of Solitude
  3. Bravenet

blah blah blah

Definitie Lijsten

Een Definitie Lijst is een beetje uitgebreider doordat het twee nivo's heeft. Je hebt de Term en de Definitie. Je opent een Definitie List met <DL> en sluit het met </DL>. De twee nivo's bepaal je met <DT> voor de term, en <DD> voor de definitie.

Hier is de code en het resultaat van een Definition List:

De code:

<DL>
<DT> melk <DD> een gezond drankje
<DT> brood <DD> wit brood is lekkerder
<DT> fruit <DD> bananen vind ik het lekkerst
</DL>

  

Het resultaat:


melk
een gezond drankje
brood
wit brood is lekkerder
fruit
bananen vind ik het lekkerst

Als de termen vrij kort zijn kun je een Compact Definition List gebruiken. De termen zullen dan op dezelfde lijn worden geplaatst als de definities. Hier is de code en het resultaat van een Compact Definition List:

De code:

<DL compact>
<DT> melk <DD> een gezond drankje
<DT> brood <DD> wit brood is lekkerder
<DT> fruit <DD>bananen vind ik het lekkerst
</DL>

  

Het resultaat:

melk
een gezond drankje
brood
wit brood is lekkerder
fruit
bananen vind ik het lekkerst

Nested Lists

Soms moet je een overzicht maken met verschillende items, dan kun je een lijst in een lijst maken. Dit heet Nesten van een Lijsts.

De code:

<UL>
<LI> Dit is fruit:
<OL>
<LI> Appels
<LI> Mandarijnen
<LI> Bananen
</OL>
<LI> Dit is groente:
<OL>
<LI> Selderie
<LI> Wortelen
</OL>
</UL>

 

Het resultaat:

  • Dit is fruit:
    1. Appels
    2. Mandarijnen
    3. Bananen
  • Dit is groente:
    1. Selderie
    2. Wortelen
Verder met:   Plaatjes