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

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

Zo, nu weet je hoe je allerlei lijsten kunt maken in HTML. Je kunt dit artikel altijd opzoeken op onze website. Ken je iemand die ook geholpen zou zijn met deze cursus? Mail gewoon dit exemplaar van Web Succes Magazine naar die persoon en vertel hem dat hij ook lid kan worden! Ze zullen het zeer waarderen!

In het volgend artikel volgt deel 8: Werken met tabellen.

Deze cursus HTML valt onder copyright van mijnhomepage.nl. Dit artikel mag niet worden overgenomen zonder uitdrukkelijke toestemming van de webmaster van mijnhomepage.nl.

Om je te helpen bij het grijpen van de aandacht van de bezoeker en deze vast te houden heb ik de volgende vijf super simpele tips voor je uitgewerkt. Doe er één of twee en zult al verschil gaan zien. Doe ze allemaal en je site wordt een groot succes!

Leid je bezoeker door je site.

Stel je voor, je hebt een afspraak bij de notaris. Je komt door de voordeur binnen en staat in de hal. Geïmponeerd door het fraaie interieur blijf je nederig op de mat staan te wachten tot een aantrekkelijke jonge dame je komt verwelkomen. Na vijf minuten heb je elk detail van het intereur bekeken en maakt die geweldige indruk langzaam maar zeker plaats voor irritatie. Je voelt je enigzins geschoffeert en op z'n minst genegeerd. Geen jonge dame te bekennen, dus je begint maar wat deuren open te trekken om te kijken waar je moet zijn.

Het is echt niet te geloven, maar heel veel websites laten de bezoeker gewoon op de mat (lees homepage) staan. Dat is echt ongemanierd. "Ja", zul je zeggen, "ze hebben toch een menu op de site staan?". Dat is hetzelfde als die deuren in de hal van de notaris. Je moet wel aangeven welke deur ze eerst moeten nemen en welke daarna.

Eigenlijk moet je de bezoekers een rondleiding geven door je site. Net als in een museum of een supermarkt. Daar wordt de bezoeker langs alle belangrijke items geleid op een heel natuurlijke manier. Min of meer ongemerkt. Zo moet je het op je site ook aanpakken. Op de homepage geef je uitleg waarom jouw site perfect is voor de bezoeker en waarom hij vooral verder moet lezen. Onder aan de tekst zet je een uitleg wat de volgende stap is en plaats je een link naar de pagina die de volgende stap behandelt. En zo verder.

De bezoekers ervaren dit over het algemeen als zeer prettig, mits de teksten blijven boeien. Het is dan ook aan te raden om aan het einde van een pagina een "cliffhanger" te plaatsen. Dit is het oplichten van een tipje van de sluier van wat er op de volgende pagina te vinden is. En dat op zo'n manier dat de bezoeker perse wil weten wat dat dan precies is. Op TV doen ze dat ook, vlak voor dat ze naar de reclame gaan zeggen ze zoiets van "Zometeen, na de reclame...(en dan een spannende aankondiging van wat er gaat komen)" Op deze manier leid je de mensen precies zo door je site als jij dat wilt. Let er wel op dat je op de volgende pagina weer begint met een pakkende kopregel, anders haken ze alsnog af.

Misschien denk je dat mensen op Internet altijd haast hebben en je teksten niet zullen lezen. Dat is niet helemaal waar. De hoofdreden waarom mensen op Internet gaan is om informatie te zoeken. Als ze die eenmaal hebben gevonden op je site, gaan ze een versnelling terug en gaan ze op hun gemak die informatie in zich opnemen. Dus het zoeken naar de informatie gaat inderdaad heel gehaast. Ze willen in no-time de juiste informatie hebben. Als dat niet snel genoeg lukt raken ze geïrriteerd en moet het nog sneller. Wat jouw kopregels moeten doen is zeggen: "HO - STOP! Hier vindt je precies wat je zoekt." Wil iemand toch snel door je site navigeren dan kan hij daar het menu voor gebruiken. Vaak zijn dit bezoekers die al eens eerder zijn geweest. Die gaan niet opnieuw de hele teksten doorlezen. Voor hen is het menu ideaal.

Uiteindelijk werk je toe naar een doel. En dat is voor elke site weer anders. De ene site zal iets willen verkopen, de ander zal willen aansporen tot het bezoeken van het bedrijf zelf (of de winkel). Weer een ander wil leden werven of alleen maar informatie verschaffen. Hoe dan ook, probeer in ieder geval de naam en het email adres van de bezoeker te krijgen. Een bezoekers komt en gaat en komt misschien nooit meer terug. Als je het emailadres en de naam hebt kun je de prospect nog eens benaderen met relevante informatie. Zo bouw je een vertrouwensrelatie en maak je meer kans om het doel van je website te realiseren.

Hoe pas je dit nou toe op je eigen site? Wat is het doel van je site? Waar wil je dat je bezoekers uitkomen? Zodra je deze vragen hebt beantwoord kun je een traject uitstippelen van de homepage naar de pagina waar je wilt dat de bezoekers uitkomen. Dit traject mag gerust lang zijn, maar niet langer dan strikt noodzakelijk! Je mag je bezoekers best goed informeren voordat ze je site verder gaan gebruiken.

Veel succes!

Volgende keer behandelen we tip 3: Het K.I.S.S. systeem.