In les 1 heb je de basisstructuur geleerd. Nu ga je de pagina echt interessant maken: vetgedrukte en schuingedrukte tekst, klikbare links naar andere pagina's, en afbeeldingen. Na deze les kun je al een eenvoudige persoonlijke pagina bouwen.
1 Tekst opmaken: vet en cursief
Met twee eenvoudige tags maak je tekst visueel duidelijker. Ze werken binnen een alinea — ze omhullen een deel van de tekst.
Wat betekent dit?
<strong> — Markeert tekst als belangrijk. De browser toont het vetgedrukt. Gebruik voor woorden die de lezer echt moet zien.
Wat betekent dit?
<em> — Staat voor emphasis (nadruk). De browser toont het cursief. Gebruik voor woorden met klemtoon of speciale betekenis.
<p>Mijn <strong>favoriete</strong> programmeertaal is <em>Python</em>.</p>
<p><strong>Let op:</strong> sla dit bestand op <em>voordat</em> je het opent.</p>Resultaat in de browser:
Mijn favoriete programmeertaal is Python.
Let op: sla dit bestand op voordat je het opent.
💡 Verschil met <b> en <i>: Er bestaan ook oudere tags <b> (bold) en <i> (italic) die er precies hetzelfde uitzien. Gebruik liever <strong> en <em> — die dragen ook betekenis mee (schermleessoftware begrijpt ze beter).
2 Hyperlinks maken
Wat betekent dit?
<a href="..."> — De anchor-tag maakt een klikbare link. Het woord href staat voor hypertext reference — het adres waar de link naartoe gaat. Alles tussen de openings- en sluitingstag is de klikbare tekst.
<!-- Link naar een andere website -->
<a href="https://www.google.com">Ga naar Google</a>
<!-- In een nieuw tabblad openen -->
<a href="https://mbo-sd.com" target="_blank">Open mbo-sd.com</a>
<!-- Link naar een andere pagina op dezelfde site -->
<a href="over-mij.html">Over mij</a>
<!-- Link naar een sectie op dezelfde pagina -->
<a href="#contact">Naar het contactgedeelte</a>Wat betekent dit?
Absoluut adres — Begint met https://. Wijst naar een volledige URL op het internet. Gebruik voor externe sites.
Wat betekent dit?
Relatief adres — Alleen een bestandsnaam zoals over-mij.html. De browser zoekt het bestand in dezelfde map als het huidige bestand.
Wat betekent dit?
target="_blank" is een attribuut — extra informatie die je aan een tag meegeeft. Attributen staan altijd in de openingstag en hebben de vorm naam="waarde". Met target="_blank" opent de link in een nieuw tabblad.
3 Afbeeldingen toevoegen
Wat betekent dit?
<img src="..." alt="..."> — Plaatst een afbeelding. src (source) is het pad naar het bestand. alt (alternative text) is de beschrijving die verschijnt als de afbeelding niet laadt — en die schermleessoftware voorleest aan blinde gebruikers. De <img>-tag heeft geen sluitingstag.
<!-- Lokale afbeelding (staat in dezelfde map als je HTML) -->
<img src="foto.jpg" alt="Een foto van mijn project">
<!-- Afbeelding van internet -->
<img src="https://picsum.photos/300/200" alt="Willekeurige foto">
<!-- Met breedte en hoogte -->
<img src="logo.png" alt="Mijn logo" width="200" height="100">✓ Goede alt-tekst
alt="Hond speelt met bal in het park"
Beschrijft wat er echt te zien is.
✗ Slechte alt-tekst
alt="foto123.jpg"
Zeg nooit de bestandsnaam.
⚠️ Zelf-sluitende tag: <img> heeft geen inhoud en geen sluitingstag. Andere tags zonder sluitingstag die je al kent: <br>, <meta> en <link>.
4 Regeleinden met <br>
In les 1 zagen we al dat de browser meerdere enters in je code negeert. Als je echt een regeleinde binnen een alinea wilt, gebruik je <br>.
Wat betekent dit?
<br> — Staat voor line break. Dwingt een regeleinde af midden in een blok tekst. Handig voor adres- of gedichtregels. Gebruik het niet om witruimte te maken — daarvoor gebruik je CSS later.
<p>
Schoolstraat 12<br>
1234 AB Amsterdam<br>
Nederland
</p>1234 AB Amsterdam
Nederland
💡 Gebruik <br> spaarzaam. Als je meerdere <br>-tags na elkaar schrijft om witruimte te maken, doe je het fout. Witruimte tussen blokken maak je later met CSS margin en padding.
5 Oefening: links en opmaak
Maak een linkenlijst met opmaak
Voeg toe aan de body:
(1) een <a href> naar https://mbo-sd.com,
(2) een zin met <strong> en <em>,
(3) een link die opent met target="_blank".
👁 Live preview:
6 Oefening: afbeelding toevoegen
Voeg een afbeelding toe met alt-tekst
Voeg een <img> toe. Gebruik als bron: https://picsum.photos/300/150 (een willekeurige foto). Vergeet de alt-tekst niet!
👁 Live preview (de afbeelding laadt zodra je src invult):
7 Eindopdracht: een persoonlijke pagina
Combineer alles in één pagina
Maak een persoonlijke pagina met: een <h1> met je naam, een alinea met <strong> en <em>, een afbeelding van picsum.photos, en een link naar een website die je leuk vindt.
👁 Live preview:
📋 Samenvatting
- ✓
<strong>maakt tekst vet en betekenisvol —<em>maakt tekst cursief met nadruk - ✓
<a href="...">tekst</a>maakt een klikbare link — gebruiktarget="_blank"voor een nieuw tabblad - ✓
<img src="..." alt="...">voegt een afbeelding in — alt is verplicht voor toegankelijkheid - ✓
<br>forceert een regeleinde binnen tekst — gebruik het spaarzaam - ✓ Attributen (
href,src,alt,target) staan altijd in de openingstag
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn profiel</title>
</head>
<body>
<h1>Hallo, ik ben <strong>Jouw Naam</strong></h1>
<img src="https://picsum.photos/300/200" alt="Profielfoto">
<p>Ik studeer <em>Software Developer</em> aan het MBO.
Ik leer <strong>HTML</strong>, CSS en JavaScript.</p>
<p>Mijn favoriete site: <a href="https://mbo-sd.com" target="_blank">mbo-sd.com</a></p>
</body>
</html>Kennischeck
Test of je de stof begrepen hebt
Klaar met deze les? Markeer hem als voltooid!