Terug naar beginpagina Homepage-Maken.nl
Vimexx Webhosting   

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:

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:

 

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

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]