🌐HTML

Wat is HTML?

HTML staat voor HyperText Markup Language. Het is de taal waarmee je de inhoud en structuur van een webpagina beschrijft: dit is een titel, dit is een alinea, dit is een afbeelding, dit is een link naar een andere pagina.

HTML is geen programmeertaal (er zit geen logica in), maar een opmaaktaal (markup language). Elke website die je ooit bezocht, is opgebouwd uit HTML. Samen met twee andere talen vormt het de basis van het web:

In dit vak beginnen we bij de muren: eerst HTML, daarna komen CSS en JavaScript.

Hoe werkt het web?

Wanneer je een adres intypt, gebeurt er heel snel het volgende:

1. Je browser (Chrome, Firefox, Edge, Safari, ...) vraagt de pagina op bij een server: het request.
2. De server stuurt een tekstbestand terug met HTML: de response.
3. Je browser leest die HTML en tekent de pagina op je scherm.

Request en responseJouw browser                              De server
     |   -- "Geef me index.html" -->          |
     |                                        |
     |   <-- <h1>Welkom</h1> <p>...</p> --    |
     |
 (leest de HTML en toont de pagina)

Belangrijk: een browser toont geen HTML-code, maar het resultaat ervan. Kies je in je browser Paginabron weergeven (of druk op Ctrl+U), dan zie je de HTML die de server stuurde. Bij elke website kan je dus kijken hoe ze gebouwd is.

Wat heb je nodig?

• Een teksteditor voor code: wij gebruiken Visual Studio Code. Kladblok werkt ook, maar VS Code kleurt je code en helpt je fouten te vermijden.
• Een browser om het resultaat te bekijken.
• Een map waarin je je bestanden bewaart, bijvoorbeeld mijn-website.

Een HTML-bestand is gewoon een tekstbestand met de extensie .html. Dubbelklik je erop, dan opent je browser het. Geef bestanden altijd een duidelijke naam zonder spaties of hoofdletters (over-mij.html en niet Over mij.html). De startpagina van een website noemen we index.html.

Tags en elementen

HTML bestaat uit elementen. Een element bestaat meestal uit een openingstag, de inhoud en een sluittag. Tags staan tussen punthaken < > en de sluittag heeft een schuine streep.

Anatomie van een element<p>Dit is een alinea.</p>
 ↑        ↑          ↑
 |        |          sluittag
 |        inhoud
 openingstag

Elementen mogen in elkaar zitten (nesting). Sluit ze dan in de omgekeerde volgorde: wat je als laatste opent, sluit je als eerste.

<p>Dit is <strong>belangrijke</strong> tekst.</p>      <!-- juist -->
<p>Dit is <strong>fout</p></strong>                    <!-- fout: verkeerd ingesloten -->

Sommige elementen hebben geen inhoud en dus ook geen sluittag, zoals <br> (een regeleinde), <hr> (een lijn) en <img> (een afbeelding). Dat noemen we lege elementen.

Het skelet van elke HTML-pagina

Elke HTML-pagina heeft dezelfde vaste opbouw. Leer dit skelet goed: je schrijft het bij elke nieuwe pagina.

index.html<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <title>Mijn eerste pagina</title>
</head>
<body>
    <h1>Hallo wereld!</h1>
    <p>Mijn eerste webpagina.</p>
</body>
</html>

Zo werkt deze cursus

• Onder de uitleg vind je "Probeer zelf"-blokken: pas de HTML aan en klik op Uitvoeren om meteen het resultaat te zien.
• Bij de oefeningen typ je zelf HTML. Met Voorbeeld bekijk je je pagina, met Controleer wordt ze nagekeken op de gevraagde onderdelen.
• Vast? Gebruik de hint. Lukt het echt niet, dan kan je de oplossing tonen.
• Bij opzoekwerk zoek je zelf iets op: dat hoort bij het werk van een webontwikkelaar.

Koppen: h1 tot h6

Met koppen (headings) geef je je pagina een structuur, zoals de titels en tussentitels in een boek. Er zijn zes niveaus: <h1> is de belangrijkste, <h6> de minst belangrijke.

Koppen vormen een boomstructuur<h1>Mijn hobby’s</h1>
    <h2>Sport</h2>
        <h3>Voetbal</h3>
        <h3>Zwemmen</h3>
    <h2>Muziek</h2>

Alinea’s, regeleinden en lijnen

Tekst zet je in een alinea: <p>. De browser zet vóór en na elke alinea automatisch wat witruimte.

<p>Dit is een alinea     met     veel     spaties.</p>
<p>Straat 12<br>2400 Mol<br>België</p>
<hr>
<p>Na de lijn begint een nieuw stuk.</p>

Tekst benadrukken

Met deze elementen geef je woorden extra betekenis:

Citaten en vooropgemaakte tekst

Een langer citaat zet je in <blockquote>, een kort citaat binnen een zin in <q>. Wil je dat spaties en enters wel behouden blijven (bijvoorbeeld voor code of een gedicht), gebruik dan <pre>.

<blockquote>
    <p>De beste manier om te leren programmeren is programmeren.</p>
</blockquote>

<p>Zoals mijn leraar zegt: <q>oefening baart kunst</q>.</p>

<pre>
Roosje rood,
Roosje wit,
</pre>

Speciale tekens (entiteiten)

De tekens < en > horen bij tags. Wil je ze als tekst tonen, dan schrijf je een entiteit: een code die met & begint en met ; eindigt.

Zo toon je bijvoorbeeld een tag in een handleiding: <p>Zie de tag &lt;strong&gt;</p>. Precies dat doen we ook in deze cursus.

Ongeordende lijst (ul)

Een lijst met opsommingstekens (bolletjes) maak je met <ul> (unordered list). Elk punt is een <li> (list item).

Een boodschappenlijst<ul>
    <li>Melk</li>
    <li>Brood</li>
    <li>Kaas</li>
</ul>

Genummerde lijst (ol)

Is de volgorde belangrijk (stappen, een top 3), gebruik dan <ol> (ordered list). De browser telt zelf mee. Met attributen pas je de teller aan:

• <ol start="5"> begint bij 5
• <ol reversed> telt achteruit
• <ol type="a"> gebruikt letters (a, b, c)

<ol>
    <li>Water koken</li>
    <li>Pasta toevoegen</li>
    <li>Tien minuten wachten</li>
</ol>

Lijsten in lijsten

Een lijst mag binnen een <li> nog een lijst bevatten. Zo maak je een uitklapmenu of een inhoudsopgave. Let goed op het inspringen: dat maakt je code leesbaar.

Geneste lijst<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>PHP</li>
            <li>MySQL</li>
        </ul>
    </li>
</ul>

Beschrijvingslijst (dl)

Voor begrippen met een uitleg (zoals een woordenlijst) bestaat <dl>: een lijst met termen (<dt>) en hun beschrijving (<dd>).

<dl>
    <dt>HTML</dt>
    <dd>De taal voor de structuur van een pagina.</dd>
    <dt>CSS</dt>
    <dd>De taal voor het uitzicht.</dd>
</dl>

Een link maken

Een link maak je met het anchor-element <a>. Het attribuut href (hypertext reference) bepaalt waarheen de link gaat. De tekst tussen de tags is wat de bezoeker aanklikt.

<a href="https://www.wikipedia.org">Ga naar Wikipedia</a>
<a href="over-mij.html">Over mij</a>

Een link kan ook een afbeelding (of eender welk element) omsluiten: dan is dat aanklikbaar.

Absolute en relatieve paden

Een pad naar een pagina of afbeelding kan op twee manieren:

• Absoluut: het volledige webadres, inclusief https://. Gebruik je voor pagina’s op een andere website.
• Relatief: een pad vanaf het huidige bestand. Gebruik je voor je eigen bestanden: dat blijft werken als je site verhuist.

Een mapstructuurmijn-website/
├── index.html
├── over-mij.html
├── contact/
│   └── formulier.html
└── img/
    └── foto.jpg

Vanuit index.html geldt:

Openen in een nieuw tabblad

Met target="_blank" opent een link in een nieuw tabblad. Voeg dan altijd rel="noopener" toe: dat voorkomt dat de nieuwe pagina je oorspronkelijke pagina kan aansturen (veiligheid).

<a href="https://www.wikipedia.org" target="_blank" rel="noopener">Wikipedia (nieuw tabblad)</a>

Naar een plek op dezelfde pagina (ankers)

Geef een element een id en verwijs ernaar met # plus die id. Ideaal voor een inhoudsopgave of een knop “terug naar boven”.

<a href="#contact">Ga naar contact</a>

... veel inhoud ...

<h2 id="contact">Contact</h2>

Je kan ook combineren: over-mij.html#hobbys opent een andere pagina en springt meteen naar het element met id hobbys.

Mail, telefoon en downloads

Een link kan ook iets anders dan een pagina openen:

<a href="mailto:info@school.be">Stuur een mail</a>
<a href="tel:+3214123456">Bel ons</a>
<a href="documenten/rooster.pdf" download>Download het rooster</a>

Met mailto: opent het e-mailprogramma, met tel: start op een gsm een oproep, en het attribuut download downloadt het bestand in plaats van het te openen.

Een menu bouwen

Nu je lijsten en links kent, kan je een navigatiemenu bouwen: een lijst met links, in een <nav>-element (dat leer je in het hoofdstuk over semantiek).

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="over-mij.html">Over mij</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Een afbeelding tonen

Met het lege element <img> toon je een afbeelding. Twee attributen zijn verplicht:

• src (source): waar het bestand staat (pad of webadres);
• alt: een alternatieve tekst die de afbeelding beschrijft. Ze wordt getoond als de afbeelding niet laadt, en voorgelezen door schermlezers voor blinde bezoekers.

<img src="img/foto.jpg" alt="Sam speelt voetbal op het schoolplein">
<img src="img/logo.png" alt="Logo van Provil" width="120" height="120">

Breedte, hoogte en formaten

Met width en height (in pixels, zonder eenheid) geef je de afmetingen op. Geef je er maar één op, dan schaalt de andere mee. Vul ze best altijd in: zo weet de browser vooraf hoeveel plaats hij moet vrijhouden en springt je pagina niet rond terwijl de foto laadt.

Figure en figcaption

Een afbeelding met bijschrift hoort in een <figure>, met het bijschrift in <figcaption>. Zo weet de browser dat het bijschrift bij de afbeelding hoort.

<figure>
    <img src="img/school.jpg" alt="De hoofdingang van de school">
    <figcaption>De school in het najaar van 2025.</figcaption>
</figure>

Video en audio

Sinds HTML5 speel je video en audio rechtstreeks af, zonder extra plugins:

<video src="media/intro.mp4" controls width="400"></video>

<audio src="media/geluid.mp3" controls></audio>

Het attribuut controls toont de knoppen (afspelen, volume, ...). Zo’n attribuut zonder waarde noemen we een booleaans attribuut: het staat er, of het staat er niet. Andere voorbeelden zijn autoplay, loop en muted.

Andere pagina’s insluiten met iframe

Met <iframe> toon je een andere webpagina binnen je pagina. Zo sluit je bijvoorbeeld een YouTube-video of een Google Maps-kaart in: die sites geven je de juiste code onder “Insluiten” of “Embed”.

<iframe src="https://www.openstreetmap.org/export/embed.html"
        width="400" height="300" title="Kaart van de school"></iframe>

De opbouw van een tabel

Een tabel bouw je rij per rij:

• <table>: de hele tabel
• <tr> (table row): een rij
• <th> (table header): een kopcel (standaard vet en gecentreerd)
• <td> (table data): een gewone cel

<table>
    <tr>
        <th>Vak</th>
        <th>Uren</th>
    </tr>
    <tr>
        <td>Web</td>
        <td>4</td>
    </tr>
    <tr>
        <td>Netwerken</td>
        <td>3</td>
    </tr>
</table>

Kop, lichaam en voet

Voor een nette, toegankelijke tabel verdeel je de rijen in groepen en geef je de tabel een titel:

• <caption>: de titel van de tabel (meteen na <table>)
• <thead>: de kop
• <tbody>: de eigenlijke gegevens
• <tfoot>: de voet (totalen)

<table>
    <caption>Uurrooster van maandag</caption>
    <thead>
        <tr><th>Uur</th><th>Vak</th></tr>
    </thead>
    <tbody>
        <tr><td>8u30</td><td>Web</td></tr>
        <tr><td>9u20</td><td>Netwerken</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">Einde om 16u</td></tr>
    </tfoot>
</table>

Cellen samenvoegen: colspan en rowspan

Met colspan laat je een cel over meerdere kolommen lopen, met rowspan over meerdere rijen. Tel goed: een rij die één cel met colspan="2" heeft, heeft daarna nog maar (aantal kolommen − 2) cellen nodig.

<tr>
    <td colspan="2">Deze cel is twee kolommen breed</td>
</tr>
<tr>
    <td rowspan="2">Twee rijen hoog</td>
    <td>A</td>
</tr>
<tr>
    <td>B</td>
</tr>

Wanneer gebruik je een tabel (en wanneer niet)?

• Wel een tabel: rooster, prijslijst, scores, vergelijking van producten.
• Geen tabel: een menu, twee kolommen tekst, een fotogalerij.

Wat is een attribuut?

Een attribuut geeft extra informatie over een element. Je schrijft het altijd in de openingstag, als naam="waarde". Je kent er al een aantal:

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
<img src="foto.jpg" alt="Een foto" width="200">
<html lang="nl">

• Gebruik altijd dubbele aanhalingstekens rond de waarde.
• Schrijf attribuutnamen in kleine letters.
• Meerdere attributen scheid je met een spatie; de volgorde maakt niet uit.
• Sommige attributen zijn booleaans: ze hebben geen waarde (controls, disabled, required).

Globale attributen

Sommige attributen mag je bij elk element gebruiken:

id: een unieke naam

Met id geef je een element een unieke naam. Er mag op een pagina maar één element met dezelfde id zijn. Waarom heb je dat nodig?

• Om met een link naar dat element te springen (href="#contact");
• Om er met CSS één specifiek element mee op te maken;
• Om het met JavaScript/jQuery op te zoeken en de waarde ervan te lezen of aan te passen: $('#naam').val().

<h1 id="paginatitel">Mijn website</h1>
<input type="text" id="naam">
<button type="button" id="verstuur">Verstuur</button>

class: een groepsnaam

Met class geef je meerdere elementen dezelfde groepsnaam, zodat je ze samen kan opmaken. Een element mag ook meerdere klassen tegelijk hebben, gescheiden door een spatie.

<p class="waarschuwing">Let op: dit is belangrijk.</p>
<p class="waarschuwing">Ook dit is belangrijk.</p>
<p class="waarschuwing groot">Deze is belangrijk én groot.</p>

div en span: neutrale containers

Soms wil je elementen groeperen of een stukje tekst apart benoemen, zonder dat een bestaand element de juiste betekenis heeft. Daarvoor zijn er twee neutrale elementen:

• <div>: een blok (staat op een eigen regel, neemt de volledige breedte), om grotere stukken te groeperen;
• <span>: een inline-stukje binnen een regel tekst.

<div class="kaart">
    <h3>Sam</h3>
    <p>Mijn favoriete kleur is <span class="rood">rood</span>.</p>
</div>

data-attributen

Met data- gevolgd door een eigen naam kan je eigen gegevens aan een element hangen, die niet zichtbaar zijn maar waar JavaScript later aan kan. Handig om bijvoorbeeld het id van een record bij een knop te bewaren.

<button type="button" class="verwijder" data-id="12" data-naam="Sam">Verwijder Sam</button>

Met jQuery lees je het uit met $('.verwijder').data('id'). In het PHP-vak gebruik je dit voortdurend om te weten welk bericht of welke gebruiker bij een knop hoort.

Waarom semantiek?

Met alleen <div>-elementen kan je alles bouwen, maar dan weet niemand wat wat is. Semantisch betekent: het element zegt wat de betekenis van de inhoud is. Dat helpt:

• schermlezers: die kunnen bijvoorbeeld rechtstreeks naar het hoofdgedeelte of het menu springen;
• zoekmachines: die begrijpen beter waar de belangrijke inhoud staat;
• jezelf en je team: <nav> is duidelijker dan <div class="menu">.

<!-- Zonder semantiek -->          <!-- Met semantiek -->
<div class="header">              <header>
<div class="menu">                <nav>
<div class="hoofd">               <main>
<div class="voet">                <footer>

De semantische bouwstenen

Een volledige pagina

Zo ziet de opbouw van een gewone pagina eruit:

index.html (enkel de body)<body>
    <header>
        <h1>Mijn website</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="nieuws.html">Nieuws</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Welkom</h2>
            <p>Dit is de startpagina.</p>
        </section>

        <section>
            <h2>Nieuws</h2>
            <article>
                <h3>Open deur</h3>
                <p>Op <time datetime="2025-03-15">15 maart</time> houden we een open deur.</p>
            </article>
        </section>

        <aside>
            <p>Tip: schrijf je nu in!</p>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 Provil ICW</p>
    </footer>
</body>

section, article of div?

Een goede vuistregel:

• Kan de inhoud op zichzelf staan en zou je ze los kunnen delen (nieuwsbericht, product, reactie)? Dan is het een <article>.
• Is het een thematisch deel van de pagina met een eigen kop? Dan is het een <section>.
• Heb je enkel een container voor de opmaak, zonder eigen betekenis? Dan is het een <div>.

Hoe werken wij met invoervelden?

Een knop die niets automatisch verstuurt schrijf je daarom altijd als <button type="button">.

Het input-element

Het lege element <input> is een invoerveld. Het type bepaalt wat voor veld je krijgt:

Label: hoort bij een veld

Bij elk veld hoort een label: de tekst die zegt wat je moet invullen. Koppel het aan het veld met for (dat verwijst naar de id van het veld).

<label for="naam">Jouw naam</label>
<input type="text" id="naam">

Het voordeel: klik je op het label, dan krijgt het veld meteen de focus (bij vinkjes wordt het aan- of uitgevinkt). En schermlezers weten bij welk veld de tekst hoort.

Vinkjes en keuzerondjes

Checkboxes laten je meerdere dingen aan- of uitvinken. Radio-knoppen laten je maar één optie uit een groep kiezen; ze horen bij dezelfde groep als ze dezelfde name hebben.

<p>Welke talen ken je?</p>
<input type="checkbox" id="html" value="html"> <label for="html">HTML</label>
<input type="checkbox" id="css" value="css" checked> <label for="css">CSS</label>

<p>Jouw klas?</p>
<input type="radio" id="k5" name="klas" value="5ICW"> <label for="k5">5ICW</label>
<input type="radio" id="k6" name="klas" value="6ICW"> <label for="k6">6ICW</label>

Het attribuut checked vinkt een optie vooraf aan. Met jQuery lees je later of een vinkje aan staat met $('#css').is(':checked').

Meer regels: textarea en select

Voor meerdere regels tekst gebruik je <textarea> (met sluittag; de begintekst staat ertussen). Voor een keuzelijst gebruik je <select> met daarin een <option> per keuze.

<label for="bericht">Bericht</label>
<textarea id="bericht" rows="4" cols="40"></textarea>

<label for="vak">Favoriet vak</label>
<select id="vak">
    <option value="">-- kies --</option>
    <option value="web">Web</option>
    <option value="net">Netwerken</option>
    <option value="prog" selected>Programmeren</option>
</select>

Wat de bezoeker ziet staat tussen de option-tags, wat je met jQuery uitleest (.val()) is het value-attribuut.

Handige attributen

Drie talen, drie bestanden

Een nette website scheidt haar taken: HTML voor de inhoud, CSS voor het uitzicht en JavaScript voor het gedrag. Elk in een eigen bestand, zodat je alles makkelijk kan terugvinden en hergebruiken op meerdere pagina’s.

Een nette mapstructuurmijn-website/
├── index.html
├── css/
│   └── stijl.css
├── js/
│   └── app.js
└── img/
    └── logo.png

CSS koppelen

Een extern CSS-bestand koppel je in de head met het element <link>:

<head>
    <meta charset="utf-8">
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="css/stijl.css">
</head>

Het bestand zelf bevat enkel CSS, bijvoorbeeld:

css/stijl.cssh1 {
    color: #1d4ed8;
}
.waarschuwing {
    background: #fef3c7;
}

Voor een klein testje kan je CSS ook rechtstreeks in de pagina zetten met <style> in de head, of bij één element met het style-attribuut. Dat noemen we inline. Voor echte projecten gebruik je altijd een extern bestand.

JavaScript koppelen

JavaScript voeg je toe met het element <script>. Zet het onderaan de body, vlak vóór </body>: dan bestaat alle HTML al wanneer je script ze zoekt.

index.html<body>
    <h1>Mijn pagina</h1>
    <button type="button" id="knop">Klik mij</button>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/app.js"></script>
</body>

• Eerst laad je jQuery (via een CDN, een server die de bibliotheek voor je host), pas daarna je eigen script dat jQuery gebruikt: de volgorde telt!
• Je eigen script zet je in een apart bestand (js/app.js) dat je met src inlaadt.
• Een <script> heeft altijd een sluittag, ook met src.

js/app.js$('#knop').on('click', function () {
    alert('Je klikte op de knop!');
});

Het volledige plaatje

Dit is een complete pagina met alle drie de talen gekoppeld:

index.html<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mijn pagina</title>
    <link rel="stylesheet" href="css/stijl.css">
</head>
<body>
    <h1 id="titel">Mijn pagina</h1>
    <button type="button" id="knop">Klik mij</button>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Waarom toegankelijkheid?

Ruim één op de vijf mensen heeft een vorm van beperking: slechter zicht, gehoor, motoriek, kleurenblindheid, ... Sommigen gebruiken een schermlezer die de pagina voorleest, anderen bedienen alles met het toetsenbord. Ook tijdelijke situaties tellen: een gebroken arm, fel zonlicht op je gsm, een trage verbinding.

Het goede nieuws: als je HTML netjes schrijft, zoals je in deze cursus leert, ben je al ver. Toegankelijke sites zijn bovendien ook beter voor zoekmachines zoals Google.

De basischecklist

1. Taal instellen: <html lang="nl">. Een schermlezer weet dan hoe hij moet uitspreken.
2. Een duidelijke title: elke pagina een eigen, beschrijvende titel.
3. Alt-tekst bij elke afbeelding: beschrijvend, of alt="" voor pure decoratie.
4. Logische kopstructuur: één h1, geen niveaus overslaan.
5. Labels bij alle invoervelden (met for en id).
6. Betekenisvolle linkteksten: niet “klik hier”, maar “Download het rooster”. Schermlezers lezen vaak enkel de lijst van links voor.
7. Semantische elementen: nav, main, footer, button, ... in plaats van alles div.
8. Voldoende contrast tussen tekst en achtergrond (CSS).
9. Bedienbaar met toetsenbord: probeer je site eens enkel met Tab en Enter.

Een link is een link, een knop is een knop

Gebruik voor wat iets doet een <button> en voor wat je naar een andere pagina brengt een <a>. Een <div> met een klik-gedrag is voor een toetsenbordgebruiker of schermlezer niet bruikbaar: hij is niet focusseerbaar en niemand weet dat je erop kan klikken.

<!-- Slecht: een div als knop -->
<div class="knop" id="verstuur">Verstuur</div>

<!-- Goed -->
<button type="button" id="verstuur">Verstuur</button>

ARIA: een woordje extra

Soms is HTML alleen niet genoeg. Met ARIA-attributen geef je extra uitleg aan hulpprogramma’s. Het belangrijkste dat je nu al mag kennen is aria-label: een naam voor een element waar geen zichtbare tekst bij staat.

<button type="button" id="sluit" aria-label="Sluit het venster">✖</button>
<nav aria-label="Hoofdmenu">...</nav>

Zoekmachines en gsm: meta-tags

In de head staan ook gegevens voor zoekmachines en voor gsm’s:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Het portfolio van Sam, leerling 5ICW: webprojecten en hobby’s.">
    <title>Portfolio van Sam | Provil ICW</title>
    <link rel="icon" href="img/favicon.png">
</head>

Browsers zijn vergevingsgezind

HTML is bijzonder tolerant: vergeet je een sluittag, dan probeert de browser te raden wat je bedoelde en toont hij toch iets. Dat klinkt handig, maar het betekent dat een pagina er bij jou goed kan uitzien en er in een andere browser anders uitziet. Fouten maken je site dus onvoorspelbaar.

De meestgemaakte fouten

De ontwikkelaarstools van je browser

Druk op F12 (of rechtsklik → Inspecteren) en de DevTools openen. Drie tabbladen gebruik je meteen:

• Elements (Elementen): toont de HTML zoals de browser ze begrepen heeft, inclusief eventuele automatische reparaties. Beweeg over een regel en het element licht op in de pagina. Je kan tekst en attributen zelfs live aanpassen om iets te testen (niet bewaard).
• Console: toont fouten van JavaScript en meldingen zoals “Failed to load resource” als een afbeelding of bestand niet gevonden wordt.
• Het tabblad Network (Netwerk) toont alle bestanden die geladen worden en met welke status: 200 is goed, 404 betekent “bestand niet gevonden” (klopt je pad wel?).

De W3C-validator

Op validator.w3.org kan je je HTML laten controleren. Je plakt je code (of geeft een webadres), klikt op Check en krijgt een lijst met fouten (errors) en waarschuwingen (warnings), telkens met het regelnummer.

• Begin altijd bij de eerste fout: één vergeten sluittag veroorzaakt vaak tien vervolgfouten.
• Los een fout op, controleer opnieuw, en herhaal.

Zo zoek je een fout

1. Lees de pagina: wat zie je, en wat had je verwacht?
2. Ververs (F5) en controleer of je wel bewaard hebt.
3. Open DevTools → Elements en bekijk hoe de browser jouw HTML begrepen heeft. Zit het element waar je het verwacht?
4. Kijk naar de Console en Network voor rode meldingen en 404’s.
5. Valideer je code en los de eerste fout op.
6. Maak het kleiner: haal stukken code weg tot de fout verdwijnt. Dan weet je waar hij zit.

Tip: probeer eens de code hieronder te repareren en kijk wat er in de browser gebeurt met de fouten.

De opdracht

Je maakt een persoonlijke portfolio-pagina: een pagina die jezelf voorstelt. Je gebruikt alles wat je geleerd hebt. De pagina bevat:

• een volledig skelet met doctype, lang, charset, viewport, description en title;
• een header met je naam (h1) en een menu (nav met ul en drie links die naar onderdelen op dezelfde pagina springen);
• een main met vier sections: Over mij (tekst en foto met alt en figcaption), Mijn vaardigheden (een lijst), Mijn rooster (een tabel) en Contact (label, invoerveld en knop, zonder form);
• een footer met een mail-link.

Plan eerst, bouw daarna

Een goede ontwikkelaar begint niet meteen te typen. Maak eerst een schets van de structuur (op papier of in je hoofd) en bouw daarna stap voor stap:

Structuur van het eindprojectPortfolio
├── header   (h1 + nav)
├── main
│   ├── section#over-mij       (h2, p, figure)
│   ├── section#vaardigheden   (h2, ul)
│   ├── section#rooster        (h2, table)
│   └── section#contact        (h2, label + input + button)
└── footer   (p + mailto-link)

1. Schrijf het skelet (doctype tot body).
2. Zet de grote blokken neer: header, main, footer.
3. Vul één section per keer in en bekijk telkens het voorbeeld.
4. Controleer je pagina op toegankelijkheid (alt, label, kopvolgorde).
5. Valideer ze op validator.w3.org.

Een mogelijke uitwerking

Probeer eerst zelf! Kom je er niet uit, kijk dan hoe het kan (dit is de oplossing van de oefening hieronder):

index.html<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Portfolio van Sam Peeters, leerling 5ICW.">
    <title>Portfolio van Sam Peeters</title>
</head>
<body>
    <header>
        <h1>Sam Peeters</h1>
        <nav>
            <ul>
                <li><a href="#over-mij">Over mij</a></li>
                <li><a href="#vaardigheden">Vaardigheden</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="over-mij">
            <h2>Over mij</h2>
            <p>Ik ben Sam en ik leer websites bouwen.</p>
            <figure>
                <img src="img/sam.jpg" alt="Sam achter zijn laptop" width="240">
                <figcaption>Aan het werk in de klas.</figcaption>
            </figure>
        </section>

        <section id="vaardigheden">
            <h2>Mijn vaardigheden</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>

        <section id="rooster">
            <h2>Mijn rooster</h2>
            <table>
                <caption>Vakken op maandag</caption>
                <thead>
                    <tr><th>Uur</th><th>Vak</th></tr>
                </thead>
                <tbody>
                    <tr><td>8u30</td><td>Web</td></tr>
                    <tr><td>10u20</td><td>Netwerken</td></tr>
                </tbody>
            </table>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <label for="bericht">Jouw bericht</label>
            <textarea id="bericht" rows="3"></textarea>
            <button type="button" id="verstuur">Verstuur</button>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Sam Peeters | <a href="mailto:sam@school.be">sam@school.be</a></p>
    </footer>
</body>
</html>

Hoe nu verder?

Je pagina is bijna klaar voor het echte werk, maar ziet er nog erg sober uit. Dat is normaal: HTML is de structuur. De volgende stappen:

• CSS: kleuren, lettertypes, marges, layout met Flexbox en Grid;
• Bootstrap: een kant-en-klaar raamwerk voor een responsieve layout;
• JavaScript en jQuery: je pagina reageert op klikken en typen;
• PHP en MySQL: gegevens bewaren en tonen, zodat je berichtenveld echt werkt.

Je bewaarde pagina is meteen het vertrekpunt voor elk van die cursussen. Veel succes en vooral: blijf oefenen!