Lijsten

Gegevens

Categorie: HTML Basiscursus

Het zal vaak voorkomen dat je in de pagina een opsomming wilt maken. Vooral navigatiemenu's bestaan vaak uit lijsten. Dat gaan we in deze cursus nog voorbeelden van geven. Je kunt dat gaan doen door voor elke opsomming handmatig een minteken of een nummer te zetten:

1 De eerste opsomming

2 tweede

3 derde

4 enz.

of met het minteken en de <br />

- Eerste
- tweede
- derde
- enz

Kom je aan het eind van de regel, dan zal je tekst verdergaan aan het begin van de tweede regel, dus onder je omsommingstekentje. Dat is erg lelijk. Bij de genummerde opsomming zal je alles handmatig moeten veranderen als je er later nog eentje tussen wilt zetten. Om een mooie lijst te maken, maken we een onderscheid tussen de ongenummerde opsomming en de genummerde opsomming: <ul> unordered list, <ol> ordered list.

<ul>
</ul>

<ol>

</ol>

Daartussen komen de list items <li>.

Of met een ongenummerde opsomming:

De opsommingen komen direct onder elkaar. Wil je er aparte paragrafen van maken, kun je de tekst tussen de list-items ook tussen paragrafen zetten. Bijvoorbeeld:

<li><p>Opgesomde tekst als paragraaf</p></li>

Het maakt niet zoveel uit of je eerst met <p> of met <li> begint. Let er wel op dat je de closingtags wel gespiegeld aan de begintags doet.

Verder kun je ook nog bepalen hoe je de opsomming eruit wilt laten zien. Bij de <ul> heb je een vierkantje, een open cirkeltje en een gesloten cirkeltje. Dat kun je aangeven met het 'type' atribuut:

• <ul type="square">

• <ul type="circle">

• <ul type="disc">

Bij de genummerde opsomming heb je de keuze uit:

1. <ol type="a">a, b, c, d, enz
2. <ol type="A">A, B, C, D, enz
3. <ol type="i">i, ii, iii, iv, enz
4. <ol type="I">I, II, III, IV, enz
5. <ol type="1">1, 2, 3, 4 enz

Wil je dat de opsomming niet bij a of 1 begint, maar hoger, kun je nog het attribuut 'start="x" toevoegen:

<ol type="a" start="3">

Deze opsomming zal bij 'C' beginnen.

Samenvatting: