login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > HTML

Gegevens:
Geschreven door:
 maestro
Moeilijkheidsgraad:
 Gemakkelijk
Hits:
 11789
Punten:
Aantal punten:
  (4.44)
Aantal stemmen:
 9
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (3)
 

Tutorial:

Lijsten

Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.

1. Wat is een lijst?
2. Ongeordende lijst
3. Geordende lijst
4. Definitielijst

1. Wat is een lijst?

Een lijst is een gestructureerde opsomming van items. In ongeordende lijsten zijn de items niet genummerd. In geordende lijsten zijn de items genummerd met behulp van een nummer (decimaal of Romeins) of een letter. Een definitielijst bestaat uit termen en de beschrijving ervan.


 top
2. Ongeordende lijst

Syntax:

<UL>
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</UL>

Dit geeft hetvolgende resultaat:
  • Dit is het eerste item
  • Dit is het tweede item
  • Dit is het derde item
Standaard wordt er een zwart bolletje geplaatst voor elk item. Door middel van het TYPE attribuut bij de <LI>-tags kan je dat veranderen in een leeg cirkeltje of een vierkantje.

<UL>
  <LI TYPE="circle">Dit is het eerste item</LI>
  <LI TYPE="disc">Dit is het tweede item</LI>
  <LI TYPE="square">Dit is het derde item</LI>
</UL>

geeft het volgende resultaat in de browser:
  • Dit is het eerste item
  • Dit is het tweede item
  • Dit is het derde item

 top
3. Geordende lijst

Zoals een ongeordende lijst gedefinieerd wordt door <UL>, wordt een geordende lijst gecreëerd met <OL>.

Syntax:

<OL>
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Dit geeft het volgende resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
Standaard worden de items dus voorafgegaan door een cijfer. Door aan de <OL>-tag het TYPE attribuut toe te voegen, kan je de soort nummering veranderen:

<OL TYPE="a">
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
<OL TYPE="A">
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
<OL TYPE="i">
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
<OL TYPE="I">
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
Met het START attribuut kan je de beginwaarde van het eerste item veranderen.

<OL TYPE="1" START="3">
  <LI>Dit is het eerste item</LI>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
  2. Dit is het tweede item
  3. Dit is het derde item
Lijsten kunnen genest worden in andere lijsten. Dat wil zeggen dat een lijst kan voorkomen binnen een andere lijst. Geordende en ongeordende lijsten mogen door elkaar gebruikt worden.

<OL>
  <LI>Dit is het eerste item</LI>
    <UL>
      <LI>Dit is het eerste sub-item</LI>
      <LI>Dit is het tweede sub-item</LI>
      <LI>Dit is het derde sub-item</LI>
    </UL>
  <LI>Dit is het tweede item</LI>
  <LI>Dit is het derde item</LI>
</OL>

Resultaat:
  1. Dit is het eerste item
    • Dit is het eerste sub-item
    • Dit is het tweede sub-item
    • Dit is het derde sub-item
  2. Dit is het tweede item
  3. Dit is het derde item

 top
4. Definitielijst

Syntax:
<DL>
  <DT>Term 1</DT>
    <DD>Beschrijving van term 1</DD>
  <DT>Term 2</DT>
    <DD>Beschrijving van term 2</DD>
</DL>

Resultaat:
Term 1
Beschrijving van term 1
Term 2
Beschrijving van term 2

 top

Een verbeterde tutorial is te zien in onze HTML cursus. In onze HTML cursus wordt XHTML 1.0 uitgelegd.

« Vorige tutorial : Ankers Volgende tutorial : XHTML »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.017s