Hoofdstuk 3: HTML Gevorderd - VHSI Webontwikkelingscursus

🔗 Links (Hyperlinks)

Links worden gemaakt met de <a> (anker) tag met het href-attribuut.

HTML

<!-- Externe link -->
<a href="https://www.google.com" target="_blank">Google (Nieuw Tabblad)</a>

<!-- Email link -->
<a href="mailto:hallo@voorbeeld.nl">Email Me</a>

Relatieve vs Absolute Links

Het begrijpen van het verschil tussen relatieve en absolute paden is cruciaal!

Type	Beschrijving	Voorbeeld
Absolute	Complete URL met domein	href="https://site.nl/pagina.html"
Relatief	Pad vanaf huidig bestand	href="pagina.html"

Wanneer wat gebruiken?

Externe websites: Altijd absolute (https://...)
Zelfde website: Gebruik relatieve paden
Zelfde map: Alleen bestandsnaam.html
Omhoog in mappen: Gebruik ../

HTML

<!-- Relatieve paden voorbeelden -->
<a href="over.html">Over pagina in zelfde map</a>
<a href="./over.html">Zelfde als hierboven (expliciet)</a>
<a href="../index.html">Index in bovenliggende map</a>

Link Doelen

Het target attribuut bepaalt waar de link opent:

Waarde	Beschrijving
`_self`	Dezelfde tab/frame (standaard)
`_blank`	Nieuw tabblad of venster
`_parent`	Parent frame
`_top`	Volledig venster (breekt frames)

⚠️ Beveiliging: Gebruik rel="noopener"

Bij gebruik van target="_blank", voeg altijd rel="noopener" toe voor beveiliging:

<a href="https://voorbeeld.nl" target="_blank" rel="noopener">Link</a>

Link Bladwijzers (Anker Links)

Maak bladwijzers om naar specifieke secties op dezelfde pagina te springen!

HTML

<!-- Stap 1: Voeg id toe aan doel -->
<h2 id="sectie1">Sectie 1</h2>
<p>Inhoud hier...</p>

<h2 id="sectie2">Sectie 2</h2>
<p>Meer inhoud...</p>

<!-- Stap 2: Link naar de bladwijzer -->
<a href="#sectie1">Naar Sectie 1</a>
<a href="#sectie2">Naar Sectie 2</a>

Telefoon Links

Maak klikbare telefoonlinks voor mobiele apparaten!

HTML

<!-- Telefoon link -->
<a href="tel:+31234567890">Bel Ons</a>

<!-- Met weergavetekst -->
<a href="tel:+31234567890">+31 23 456 7890</a>

🖼️ Afbeeldingen

Afbeeldingen worden toegevoegd met de zelfsluitende <img>-tag.

⚠️ Verplichte Attributen

Voeg altijd src (afbeeldingsbron) en alt (alternatieve tekst voor toegankelijkheid) toe!

HTML

<img src="foto.jpg" alt="Beschrijving van foto">

<!-- Online afbeelding -->
<img src="https://voorbeeld.nl/afbeelding.jpg" alt="Een zonsondergang">

<!-- Met grootte -->
<img src="foto.jpg" alt="Foto" width="400" height="300">

Afbeeldingsformaten

Formaat	Het Best Voor
.jpg	Foto's (kleiner bestandstype)
.png	Afbeeldingen met transparantie, iconen
.gif	Geanimeerde afbeeldingen
.svg	Schaalbare graphics, logo's

📊 Tabellen

Tabellen worden gemaakt met <table>, <tr> (rijen), <td> (data), en <th> (koppen).

HTML

<table border="1">
    <tr>
        <th>Naam</th>
        <th>Leeftijd</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>16</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>17</td>
    </tr>
</table>

Kolommen en Rijen Samenvoegen

HTML

<td colspan="2">Omvat 2 kolommen</td>
<td rowspan="2">Omvat 2 rijen</td>

Tabel Structuur Elementen

Gebruik deze semantische elementen voor betere tabellen:

<thead> - Tabel header rijen
<tbody> - Tabel hoofdinhoud
<tfoot> - Tabel voettekst (samenvatting, totalen)

HTML

<table border="1">
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">Prijs</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Appel</td>
            <td>€1.00</td>
        </tr>
        <tr>
            <td>Banaan</td>
            <td>€0.50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Totaal</td>
            <td>€1.50</td>
        </tr>
    </tfoot>
</table>

Waarom scope gebruiken?

Het scope attribuut vertelt schermlezers precies op welke cellen een kop van toepassing is:

scope="col" - De kop is voor een kolom (cellen eronder)
scope="row" - De kop is voor een rij (cellen rechts ervan)

⚠️ Toegankelijkheid Belangrijk

Schermlezers gebruiken <th> met scope om koppen aan te kondigen wanneer gebruikers door tabelcellen navigeren. Zonder dit weet een blinde gebruiker niet welke kop bij elke cel hoort!

HTML

<table border="1">
    <thead>
        <tr>
            <th scope="col">Naam</th>      <!-- Van toepassing op kolom -->
            <th scope="col">Leeftijd</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Jan</th>      <!-- Van toepassing op rij -->
            <td>16</td>
        </tr>
        <tr>
            <th scope="row">Emma</th>
            <td>17</td>
        </tr>
    </tbody>
</table>

💡 Tip

Gebruik scope="col" voor kolomkoppen in de eerste rij, en scope="row" voor rijkoppen in de eerste kolom!

📝 HTML Formulieren

Formulieren verzamelen gebruikersinvoer en worden gemaakt met het <form>-element.

HTML

<form action="verstuur.html" method="POST">
    <label for="naam">Naam:</label>
    <input type="text" id="naam" name="naam" placeholder="Jouw naam">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="email@voorbeeld.nl">
    
    <button type="submit">Versturen</button>
</form>

Invoertypen

Type	Doel	Voorbeeld
`text`	Enkele-regelige tekst	Naam, gebruikersnaam
`email`	Email (valideert @)	email@voorbeeld.nl
`password`	Verborgen tekens	Wachtwoorden
`number`	Numerieke invoer	Leeftijd, hoeveelheid
`date`	Datumkiezer	Verjaardag
`checkbox`	Aan/uit toggle	Akkoord met voorwaarden
`radio`	Eén keuze uit groep	Geslachtskeuze

Fieldset en Legend

Gebruik <fieldset> om gerelateerde formulierelementen te groeperen en <legend> voor een bijschrift.

HTML

<form>
    <fieldset>
        <legend>Persoonlijke Informatie</legend>
        <label for="naam">Naam:</label>
        <input type="text" id="naam" name="naam">
        
        <label for="leeftijd">Leeftijd:</label>
        <input type="number" id="leeftijd" name="leeftijd">
    </fieldset>
    
    <fieldset>
        <legend>Voorkeuren</legend>
        <input type="checkbox" id="nieuwsbrief" name="nieuwsbrief">
        <label for="nieuwsbrief">Abonneer op nieuwsbrief</label>
    </fieldset>
    
    <button type="submit">Versturen</button>
</form>

✅ Voordelen

Betere toegankelijkheid voor schermlezers
Logische groepering helpt gebruikers het formulier begrijpen
Je kunt hele groepen stijlen met CSS

📝 Beschrijvende Lijsten

Gebruik <dl> voor beschrijvende lijsten - geweldig voor verklarende woordenboeken en key-value paren!

HTML

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - de standaard voor webpagina's.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - bepaalt hoe HTML eruitziet.</dd>
    
    <dt>JavaScript</dt>
    <dd>Programmeertaal voor interactieve webpagina's.</dd>
</dl>

💡 Gebruiksmogelijkheden

Verklarende woordenboeken
Key-value paren
Naam/adres combinaties

🖼️ Figuren en Bijschriften

Gebruik <figure> voor zelfstandige inhoud en <figcaption> voor bijschriften.

HTML

<figure>
    <img src="grafiek.png" alt="Verkoopgrafiek">
    <figcaption>Figuur 1: Kwartaalomzet Groei 2024</figcaption>
</figure>

Live Voorbeeld

Staafdiagram met verkoopgroei — Figuur 1: Kwartaalomzet Groei 2024

⚠️ Figure vs img alt

Gebruik <figcaption> voor een zichtbaar bijschrift. Gebruik alt voor schermlezers-toegankelijkheid wanneer het bijschrift niet voldoende is.

✏️ Probeer Het Zelf

🎮 Contactformulier

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Contactformulier</title>
    <style>
        body { font-family: Arial; padding: 20px; max-width: 500px; margin: 0 auto; }
        form { background: #f5f5f5; padding: 20px; border-radius: 10px; }
        label { display: block; margin-top: 15px; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ddd; border-radius: 5px; }
        button { margin-top: 20px; padding: 12px 24px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background: #2980b9; }
    </style>
</head>
<body>
    <h1>Contacteer Ons</h1>
    <form>
        <label for="naam">Jouw Naam:</label>
        <input type="text" id="naam" placeholder="Vul je naam in">
        
        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="jouw@email.nl">
        
        <label for="onderwerp">Onderwerp:</label>
        <select id="onderwerp">
            <option>Algemene Vraag</option>
            <option>Ondersteuning</option>
            <option>Feedback</option>
        </select>
        
        <label for="bericht">Bericht:</label>
        <textarea id="bericht" rows="5" placeholder="Schrijf je bericht..."></textarea>
        
        <button type="submit">Verstuur Bericht</button>
    </form>
</body>
</html>

🏋️ Oefeningen

Test je kennis over links, afbeeldingen, tabellen en formulieren!

Oefening 1: Mijn Favorieten

Maak een pagina met links naar je favoriete websites:

Een externe link die in een nieuw tabblad opent (met rel="noopener")
Een interne link naar een pagina genaamd "favorieten.html"
Een link naar een e-mailadres
Een telefoonnummer link
Gebruik het title attribuut voor tooltips

Oefening 2: Reisalbum

Maak een reisfotogalerij pagina met:

Minstens 3 foto's (gebruik placeholder URLs)
Elke foto moet beschrijvende alt tekst hebben
Gebruik juiste afbeeldingsformaten (jpg, png, gif)
Voeg width/height toe aan één foto
Voeg een figure toe met figcaption voor één foto

Oefening 3: Lessenrooster

Maak een tabel met je wekelijkse rooster:

Gebruik thead, tbody en tfoot
Kolommen voor Dag, Tijd, Vak, Lokaal
Gebruik th met scope="col" voor koppen
Gebruik th met scope="row" voor rij-koppen (dagen)
Voeg een footer rij toe met "Totaal: 5 vakken"

Oefening 4: Enquêteformulier

Bouw een enquêteformulier met:

Tekst invoer voor naam
E-mail invoer met validatie
Radio buttons voor leeftijdsgroep (onder 15, 15-18, boven 18)
Checkboxes voor interesses (muziek, sport, kunst, programmeren)
Dropdown select voor favoriete vak
Textarea voor opmerkingen
Verzenden knop

Oefening 5: Woordenlijst

Maak een woordenlijst met webtermen:

Gebruik dl, dt en dd elementen
Definieer minstens 5 webtermen (HTML, CSS, URL, HTTP, API)
Voeg minstens één afbeelding toe in een figure
Voeg een "Naar boven" anker link toe met #

Ga Verder met Leren

← Vorige Volgende: Semantische HTML →