HTML eerste stappen - les 3 - lijsttags ul, ol. Attributen van HTML-tags.
Lijsten worden heel vaak gebruikt op websites: in menu’s, in tekst om iets op te sommen. Laten we beginnen met het populairste type lijst, de niet-genummerde lijst <UL></UL> (unordered list - niet-genummerde lijst).
De UL-lijst
De UL-lijst wordt gebruikt voor menu’s en opsommingen met markeringen. Via HTML kun je zelfs het uiterlijk van de marker aanpassen.
Laten we onze HTML-code wijzigen:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul>
</ul>
</body>
</html>
In het document wordt alleen de titel weergegeven, omdat onze lijst leeg is. Laten we er items aan toevoegen. Voor de items gebruiken we de tags <LI></LI> (list item - lijstitem).
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul>
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Nu wordt een opsomming met markeringen weergegeven. Het type marker kan worden gewijzigd met behulp van attributen van de <UL>-tag.
HTML-tagattributen
De UL-tag, zoals ik hierboven schreef, heeft attributen. Eigenlijk hebben alle HTML-tags attributen. Later zullen we ze allemaal bespreken, maar laten we nu eerst begrijpen wat een attribuut is. Een attribuut bepaalt hoe een HTML-tag wordt weergegeven: kleur, grootte, vorm, enzovoort. Voor de UL-tag kunnen we het type marker instellen: cirkel, omtrek, vierkant.
Attributen hebben de volgende vorm:
<tag attribuut="waarde van attribuut">
Op deze manier schrijven we direct in de tag hoe die moet worden weergegeven. Voor de UL-tag heet het attribuut type:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul type="square">
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Als je de pagina in de browser vernieuwt, zie je dat de lijst nu vierkante markeringen heeft (square - vierkant). We kunnen ook cirkels gebruiken:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul type="circle">
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Je kunt verschillende markeringen binnen dezelfde lijst gebruiken, maar dan moet je ook het attribuut type voor de <li>-tag toevoegen:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul type="circle">
<li>Eerste item</li>
<li type="square">Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Standaard gebruiken de UL- en LI-tags het type disc (gevulde cirkel):
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul type="disc">
<li>Eerste item</li>
<li type="square">Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Laten we nu het attribuut type van de UL-tag verwijderen en kijken wat er gebeurt.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul>
<li>Eerste item</li>
<li type="square">Tweede item</li>
<li>Derde item</li>
</ul>
</body>
</html>
Laten we nu drie verschillende markeringen gebruiken voor elk item:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ul>
<li type="disc">Eerste item</li>
<li type="square">Tweede item</li>
<li type="circle">Derde item</li>
</ul>
</body>
</html>
Ik denk dat je nu weet waar je tagattributen moet plaatsen. We zullen later nog veel meer verschillende attributen bekijken.
De OL-lijst
De tag <OL> (ordered list - genummerde lijst) wordt minder vaak gebruikt dan UL, maar komt ook regelmatig voor, bijvoorbeeld om een reeks stappen, een chronologische volgorde of genummerde objecten weer te geven. Overal waar je regels moet nummeren, kun je de OL-tag gebruiken.
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ol>
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
</ol>
</body>
</html>
Net als de UL-tag heeft OL ook een attribuut type, maar met andere waarden:
- type="A" - hoofdletters van het Latijnse alfabet (grote Engelse A);
- type="a" - kleine letters van het Latijnse alfabet (kleine Engelse a);
- type="I" - hoofdletters van Romeinse cijfers (grote I);
- type="i" - kleine Romeinse cijfers (kleine i);
- type="1" - Arabische cijfers, dit is de standaardinstelling.
Je kunt verschillende varianten van het attribuut type voor de OL-tag uitproberen. Hier is één voorbeeld:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<ol type="i">
<li>Eerste item</li>
<li>Tweede item</li>
<li>Derde item</li>
<li>Vierde item</li>
</ol>
</body>
</html>