Stap 11 – lijsten

Laatste update: 2 maart 2019

Lijsten zijn zo fijn. Ze maken het makkelijk om informatie inzichtelijk te maken. Maak een lijst in HTML met één van de verschillende LIST-tags. Er bestaan drie verschillende soorten lijsten. Allemaal voegen ze automatisch witruimte toe om de lijst heen. Je moet altijd een lijst openen, items toevoegen en vervolgens een lijst sluiten. Zo doe je dat:

Genummerde lijst

Zorg dat index.html het volgende ook bevat:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center><h2>Een korte introductie</h2></center>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Dit is een korte lijst van diensten:
<ol>
<li> Webdesign</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Adverteniecampagnes</li>
</ol>
</p>

<center><p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center></body>
</html>

OL staat voor Ordered List. LI staat voor List Item. Elk stukje tekst dat je tussen <LI> en </LI> plaatst, wordt gezien als onderdeel van de lijst.

Wanneer je de HTML file in een browser opent, zie je nummers staan die beginnen bij 1. Dit is standaard. Wil je dat de lijst begint bij een hoger nummer dan voeg je de attribute START toe: <OL START=”2″>. In dit geval wordt de lijst gestart met 2.

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

In HTML5 kun je ook de volgorde omdraaien.

Ongesorteerde lijst toevoegen – Bullet list

Vervang de <ol> met <ul> en je hebt een hele andere lijst. De nummers worden bullets.

<ul>
<li> Webdesign</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Adverteniecampagnes</li>
</ul>

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>

Description Lists – Lijsten met omschrijvingen

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

<dl>
<dt> Webdesign</dt>
<dd> Ontwerpen en ontwikkelen van websites</dd>
<dt> Logo design</dt>
<dd> Logos voor scherm en drukwerk</dd>
<dt> Webhosting</dt>
<dd> Inclusief WordPress hosting</dd>
<dt> Domeinregistraties</dt>
<dd> In vele extensies</dd>
<dt> Trefwoordenonderzoek</dt>
<dt> SEO</dt>

<dt> Advertentie campagnes</dt>
<dd> Facebook Ads of Google Ads</dd>

</dl>

<DT> is de kop (data title). Alles bij <DD> (data description) zal iets inspringen en kun je daardoor zien als extra informatie dat bij die 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 Nestelen

Je kunt lijsten binnen andere lijsten zetten. Dit heet nestelen (of “nesten” in verbasterd Nederlands/Engels)

<ol>
<li> Webdesign</li>
<ul>
<li>Voor WordPress</li>
<li>Op maat gemaakte editors</li>
</ul>
<li> Logo design</li>
<li> Website hosting</li>
<ul>
<li>Wordpress hosting</li>
<li>Joomla hosting</li>
</ul>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Advertentiecampagnes</li>
</ol>

Je kunt alle soorten lijsten door elkaar heen gebruiken.

Andere doeleinden voor HTML-lijsten

Wanneer je vaak aan het webdesignen bent, dan zul je doorkrijgen dat lijsten best belangrijk zijn in HTML. Ze worden niet alleen gebruikt voor het ordenen van informatie, maar vormen ook vaak, in combinatie met CSS en wellicht JavaScript, de basis voor navigatiemenu’s.

Naar stap 12

Bookmark the permalink.

Comments are closed.