WebThings - by Jan Weijers
Alle hoofdstukken...
Inhoudsopgave
Inleiding
Een eenvoudig HTML document
Afbeeldingen
Lijsten
Links
Tabellen
Frames
Formulieren
Cascading stylesheets
JavaScript
PHP programmeren
Server side includes
CGI & Perl
Speciale tekens
Kleurvoorbeelden
Meer informatie
Software
Recente toevoegingen
Alfabetische index
In dit hoofdstuk...
Ongeordende lijsten
Geordende lijsten
Definitie lijsten
Lijsten binnen lijsten

 

 

Language choice...
You have chosen to use Dutch as your preferred language.Nederlands vlaggetje Click here to switch to English.

Lijsten

Lijsten bieden een simpele en praktische manier om informatie te ordenen.

Ongeordende lijsten

Het UL element, een ongeordende lijst, toont een bolletje voor elk onderdeel van de lijst. Elk onderdeel op de lijst begint met het LI (list item) element. Je kunt elk onderdeel op de lijst afsluiten met een </LI> label maar dat is niet verplicht.

<UL>
<LI>Hond</LI>
<LI>Kat</LI>
<LI>Konijn</LI>
</UL>

  • Hond
  • Kat
  • Konijn

Zowel het UL als het LI element accepteren het attribuut TYPE. Dit attribuut kan de waarden "disc", "circle" of "square" hebben. als je dit attribuut toevoegd aan het UL element, wordt de hele lijst aangepast. Als je het gebruikt in een LI element, wordt alleen dat onderdeel van de lijst aangepast:

<UL>
<LI STYLE="list-style-type:disc">Hond
<LI STYLE="list-style-type:circle">Kat
<LI STYLE="list-style-type:square">Konijn
<LI>Snake
</UL>

  • Hond
  • Kat
  • Konijn
  • Snake

Zoals je aan deze voorbeelden kunt zien, wordt "disc" gebruikt als er geen TYPE attribuut gespecifieerd is. Het TYPE attribuut is afgeschaft ten gunste van stylesheets.

To the top

Geordende lijsten

In geordende lijsten krijgt elk onderdeel van de lijst een nummer. Elk onderdeel begint met het LI element. Net als bij ongeordende lijsten is het gebruik van een </LI> label optioneel. Dit is een voorbeeld van een geordende lijst:

<OL>
<LI>Trein
<LI>Vliegtuig
</OL>

  1. Trein
  2. Vliegtuig

Zowel het OL als het LI element kunnen een eigen stijl krijgen. Als je de stijl toekent aan het OL element geldt die voor de hele lijst. Als je een stijl toekent aan een LI element, geldt die alleen voor dat element.

<OL STYLE="list-style-type:hebrew">
<LI>Bogart
<LI STYLE="list-style-type:decimal-leading-zero">Reynolds
<LI STYLE="list-style-type:lower-roman">Bergman
<LI STYLE="list-style-type:decimal">Hoffman
<LI STYLE="list-style-type:upper-roman">Bacall
<LI STYLE="list-style-type:georgian">Caine
<LI STYLE="list-style-type:armenian">Pacino
<LI STYLE="list-style-type:cjk-ideographic">Quaid
<LI STYLE="list-style-type:hiragana">Goodman
<LI STYLE="list-style-type:katakana">McQueen
<LI STYLE="list-style-type:hiragana-iroha">Welles
</OL>

  1. Bogart
  2. Reynolds
  3. Bergman
  4. Hoffman
  5. Bacall
  6. Caine
  7. Pacino
  8. Quaid
  9. Goodman
  10. McQueen
  11. Welles

Waarschijnlijk zul je zien dat je browser niet alle manieren van nummeren herkent. De nummeringen die niet herkend worden, worden vervangen door gewone cijfers.

To the top

Definitie lijsten

Een definitielijst heeft elementen die steeds bestaan uit twee delen: een begrip aangegeven met het DT element en een definitie aangegeven met het DD element:

<DL>
<DT>Kat
<DD>Een vier-benig, harig dier
<DT>Slang
<DD>Een dier dat op de grond glijdt
</DL>

Kat
Een vier-benig, harig dier
Slang
Een dier dat op de grond glijdt

DD en DT elementen mogen afgesloten worden met respectievelijk een </DD> en </DT> label maar dat is niet verplicht. Er kunnen ook meerdere begrippen gevolgd door meerdere definities in een lijst staan:

<DL>
<DT>Auto</DT>
<DT>Automobiel</DT>
<DD>Een vierwielig, gemotoriseerd personenvoertuig</DD>
<DD>Algemene term voor gemotoriseerde voertuigen</DD>
</DL>

Auto
Automobiel
Een vierwielig, gemotoriseerd personenvoertuig
Algemene term voor gemotoriseerde voertuigen
To the top

Lijsten binnen lijsten

Je kunt zonder probleem lijsten binnen lijsten gebruiken:

<OL>
<LI>Trein
  <UL>
  <LI>Intercity
  <LI>Regionaal
  <LI>Lokaal
  </UL>
<LI>Vliegtuig
<LI>Boot
<LI>Auto
</OL>

  1. Trein
    • Intercity
    • Regionaal
    • Lokaal
  2. Vliegtuig
  3. Boot
  4. Auto

Ook bij lijsten binnen lijsten kun je alle hierboven besproken voorbeelden en attributen gebruiken.

To the top

 

Reacties welkom...

Ik hoor graag je mening over deze gids, informatie die je graag toegevoegd zou willen zien of eventuele fouten die je hebt ontdekt. Klik hier.

 

Open standaarden...

Deze site is volledig conform de open standaarden van het World Wide Web Consortium (W3C). Je kunt op de logo's klikken om dat te verifiëren.

HTML 4 logo

CSS logo

 

 

©1995-2017 Jan Weijers, the Netherlands. All rights reserved.
No reproduction by any means or in any language without prior permission of the author.