Stap 11 – lijsten

Je kunt het wel eens nodig hebben, om teksten als lijst weer te moeten geven. Dit doe je met één van de verschillende LIST-tags. Er bestaan drie verschillende soorten lijsten.

Gesorteerde lijst toevoegen

Zorg dat index.html het volgende ook bevat:

<HTML>
<HEAD>
<TITLE>mijn eigen homepage</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<H2>Een korte introductie</H2>
</CENTER>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten, zoals
<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL></P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<CENTER>
<HR WIDTH=50% COLOR="#000000" NOSHADE SIZE=2>
</CENTER>

</FONT>
</BODY>
</HTML>

OL staat voor Ordered List. Wanneer je de HTML file in een browser opent, dan zie je dat er nummers staan die beginnen bij 1. Wil je dat de lijst begint bij een hoger nummer dan voeg je bij het openen een START toe: <OL START=2>. Dit is handig te weten voor wanneer je een lijst door een heel document moet voeren.

Je kunt met OL o.a. alfabetische volgordes creeren i.p.v. numeriek. Je hebt hier de volgende mogelijkheden voor:

<OL TYPE=”1″>voor numeriek (standaard)
<OL TYPE=”a”> alfabetische volgorde in kleine letters
<OL TYPE=”A”> alfabetische volgorde in hoofdletters
<OL TYPE=”i”> Romeinse telling in kleine letters
<OL TYPE=”I”> Romeinse telling in hoofdletters

Ongesorteerde lijst toevoegen

Het bestand wordt nu uitgebreid met een tweede lijst, die alleen maar bullets moet laten zien, geen cijfers.

<HTML>
<HEAD>
<TITLE>mijn eigen homepage</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<H2>Een korte introductie</H2>
</CENTER>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten, zoals
<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL></P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media. Dit zijn een aantal van de aangeboden diensten:
<UL>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</UL></P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<CENTER>
<HR WIDTH=50% COLOR="#000000" NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML>

UL staat voor Unsorted List.

De bullets kun je zelf instellen. Je kunt dit ook vervangen met andere types. Je hebt hiervoor de volgende mogelijkheden:

<UL TYPE=”disc”> voor bullets
<UL TYPE=”square”> voor vierkantjes
<UL TYPE=”circle”> voor open rondjes

Je kunt de bullets ook bereiken met de LIST-tag MENU, al gebruikt bijna niemand dit:

<MENU>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</MENU>

Als laatste bestaat er ook een DL (Data List). Hiermee kun je bijvoorbeeld stukjes uitleg toevoegen:

<DL>
<DT> Schrijven van blogs en artikelen</DT>
<DD> Korte en lange teksten over diverse onderwerpen, met of zonder eigen mening</DD>
<DT> Optimaliseren van bestaande content</DT>
<DD> Teksten controleren op spelfouten of optimaliseren voor zoekmachines</DD>
<DT> Voorprogrammeren van social media berichten</DT>
</DL>

<DT> kun je dan zien als een kop (data title). Alles bij <DD> (data description) zal iets inspringen en kun je daardoor zien als extra informatie dat bij de kop hoort.

Je bent niet verplicht om onder elke kop een subtekst te plaatsen, zoals je bij de laatste optie ziet. Deze heb ik niet van een beschrijving voorzien.

Lijsten beginnen en eindigen altijd met extra witruimte.

Naar stap 12

Bookmark the permalink.

Comments are closed