In de vorige les maakte je pagina's met tekst, links en afbeeldingen. Nu ga je informatie structureren: met lijsten groepeer je punten, met tabellen presenteer je data in rijen en kolommen. Beide zijn overal op het web te vinden.
1
Ongeordende lijst: <ul>
Wat betekent dit?
<ul> staat voor unordered list — een lijst zonder volgorde. De browser toont een bolletje (•) voor elk item. Elk item staat in een <li>-tag (list item).
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Resultaat:
- HTML
- CSS
- JavaScript
2
Geordende lijst: <ol>
Wat betekent dit?
<ol> staat voor ordered list — een lijst met volgorde. De browser nummert de items automatisch: 1, 2, 3... Gebruik <ol> als de volgorde ertoe doet (stappen, rankings). Gebruik <ul> als de volgorde niet uitmaakt.
<ol>
<li>Open VS Code</li>
<li>Maak een nieuw bestand</li>
<li>Sla op als index.html</li>
</ol>Browser
- Open VS Code
- Maak een nieuw bestand
- Sla op als index.html
💡 Tip: Zowel <ul> als <ol> mogen alleen <li>-items direct bevatten. Tekst zonder <li> is ongeldig HTML.
3 Geneste lijsten
Je kunt een lijst binnen een <li> plaatsen. De binnenste lijst rückt automatisch in. Dit heet nesten.
<ul>
<li>Front-end
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Back-end
<ul>
<li>PHP</li>
<li>Python</li>
</ul>
</li>
</ul>Resultaat:
- Front-end
- HTML
- CSS
- JavaScript
- Back-end
- PHP
- Python
4
Tabellen: <table>
Wat betekent dit?
Een tabel bestaat uit rijen en kolommen. Je hebt drie tags nodig:
<table> — de container voor de hele tabel.
<tr> — table row, één rij.
<td> — table data, één cel met gewone inhoud.
<th> — table header, één cel die als koptekst dient (vetgedrukt en gecentreerd).
<table>
<tr>
<th>Naam</th>
<th>Vak</th>
<th>Cijfer</th>
</tr>
<tr>
<td>Sara</td>
<td>HTML</td>
<td>8.5</td>
</tr>
<tr>
<td>Daan</td>
<td>HTML</td>
<td>7.0</td>
</tr>
</table>Resultaat:
| Naam | Vak | Cijfer |
|---|---|---|
| Sara | HTML | 8.5 |
| Daan | HTML | 7.0 |
Zonder CSS heeft de tabel geen zichtbare randen. Dat voeg je later toe met CSS.
5 Oefening 1: Maak een lijstenpagina
Opdracht:
Voeg aan de pagina toe: een geordende lijst met minstens 3 stappen voor "Hoe maak ik een website?" en een ongeordende lijst met minstens 3 programmeertalen.
✓ Minimaal één <ol> met minstens 3 <li>-items
✓ Minimaal één <ul> met minstens 3 <li>-items
6 Oefening 2: Maak een rooster-tabel
Opdracht:
Maak een rooster-tabel met kolommen Dag, Vak en Lokaal. Vul minimaal 3 rijen in met je eigen (verzonnen) rooster.
✓ <table> aanwezig
✓ Minstens één rij met <th>-koppen
✓ Minstens 3 rijen met <td>-data
7 Eindopdracht: Cursuspagina
Combineer alles:
Maak een pagina over een cursus of hobby die je interessant vindt. De pagina moet bevatten:
✓ Een <h1> als paginatitel
✓ Een <ul> met minstens 3 onderdelen
✓ Een <ol> met minstens 3 stappen
✓ Een <table> met <th>-koppen en minstens 2 datarijen
✓ Minstens één geneste lijst
Goed gedaan! Je kunt nu lijsten en tabellen maken.
In les 4 leer je formulieren — essentieel voor interactieve websites.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn schoolrooster</title>
</head>
<body>
<h1>Mijn schoolrooster</h1>
<h2>Vakken dit jaar</h2>
<ul>
<li>Webontwikkeling
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Programmeren</li>
<li>Databases</li>
</ul>
<h2>Hoe zet ik een website live?</h2>
<ol>
<li>Schrijf HTML, CSS en JS</li>
<li>Upload bestanden naar een server</li>
<li>Koppel een domeinnaam</li>
<li>Test in meerdere browsers</li>
</ol>
<h2>Weekrooster</h2>
<table border="1">
<tr>
<th>Dag</th>
<th>Vak</th>
<th>Lokaal</th>
</tr>
<tr>
<td>Maandag</td>
<td>HTML</td>
<td>A12</td>
</tr>
<tr>
<td>Woensdag</td>
<td>Databases</td>
<td>B04</td>
</tr>
</table>
</body>
</html>