Welkom bij de HTML-track! In deze les leer je wat HTML is, hoe een browser werkt en bouw je stap voor stap je allereerste webpagina. Je hebt geen eerdere programmeerervaring nodig.
1 Wat doet een browser?
Voordat we HTML schrijven, is het handig om te begrijpen wat er precies gebeurt als je een website bezoekt. Het ziet er simpel uit — je typt een adres in en ziet een pagina — maar op de achtergrond spelen twee computers een rol.
Wat betekent dit?
Browser — Het programma waarmee je het internet gebruikt: Chrome, Firefox, Edge of Safari. De browser toont jou de webpagina.
Wat betekent dit?
Server — Een computer op het internet die bestanden bewaart en verstuurt als iemand erom vraagt. "Serveren" = bedienen.
Wat er gebeurt als jij mbo-sd.com bezoekt:
💡 Lokaal werken: In deze cursus werk je met bestanden op je eigen computer. Jij bent dan zowel de "server" als de browser. Later leer je hoe je bestanden op een echte server zet.
2 Wat is HTML?
Wat betekent dit?
HTML staat voor HyperText Markup Language. Klinkt ingewikkeld, maar het betekent gewoon: een taal waarmee je aangeeft wat iets is op een webpagina. HTML is geen programmeertaal — je schrijft er geen berekeningen mee. Het is een opmaaktaal: je labelt inhoud.
Stel je een webpagina voor als een menselijk lichaam. Dan is HTML het skelet: het geeft structuur en aangeeft wat elk onderdeel is. CSS (les 6) is dan de huid en kleding — hoe het eruitziet. JavaScript (de volgende track) zijn de spieren — wat het doet.
HTML werkt met tags. Een tag is een woord tussen punthaken. De meeste tags komen in een paar: een openingstag en een sluitingstag. Alles daartussen is de inhoud.
Wat betekent dit?
Tag — Een label tussen < en >. Voorbeeld: <h1>. De sluitingstag heeft een schuine streep: </h1>. Alles van openingstag tot sluitingstag heet een element.
<h1>Dit is een grote kop</h1>
<p>Dit is een alinea tekst.</p>De browser ziet <h1> en denkt: "dit is een grote kop" — en toont hem groot en vet. De tags zelf zie je niet op de pagina.
3 Een editor instellen
Om HTML te schrijven heb je een tekstbewerker nodig. We raden Visual Studio Code aan — het is gratis, veelgebruikt en heeft handige hulpfuncties voor code.
VS Code (aanbevolen)
Gratis editor met kleurcodering, autoaanvulling en tientallen handige extensies.
Download op code.visualstudio.com →Kladblok / Notepad
Staat al op Windows. Prima als tijdelijke oplossing. Geen kleurcodering.
Een HTML-bestand aanmaken en openen
Open VS Code en maak een nieuw bestand aan: Ctrl+N
Sla op als index.html — let op de extensie .html, niet .txt
Schrijf je HTML-code en sla op: Ctrl+S
Open het bestand in je browser: dubbelklik erop, of sleep het naar je browservenster
4 De basisstructuur van een HTML-pagina
Elke HTML-pagina heeft dezelfde basisstructuur. Vier onderdelen die altijd aanwezig moeten zijn:
Wat betekent dit?
<!DOCTYPE html> — Dit is geen echte tag, maar een declaratie. Het vertelt de browser: "dit bestand is moderne HTML (versie 5)." Altijd de eerste regel.
Wat betekent dit?
<html> — De buitenste tag die alles omhult. Alles op de pagina staat hierin.
Wat betekent dit?
<head> — Informatie over de pagina die de browser leest maar die je niet ziet op het scherm: de paginatitel, taalinstelling, gekoppelde CSS.
Wat betekent dit?
<body> — Alles wat de bezoeker ziet op de pagina staat hierin: koppen, tekst, afbeeldingen, knoppen.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn eerste pagina</title>
</head>
<body>
<!-- Hier komt de inhoud die je ziet -->
</body>
</html>Wat betekent dit?
<!-- tekst --> is een commentaar. De browser negeert het volledig. Handig om notities in je code te zetten.
Voeg een kop toe aan de pagina
De basisstructuur staat al klaar. Schrijf tussen de <body>-tags een kop met je naam: <h1>Jouw naam</h1>
👁 Live preview (updates terwijl je typt):
5 Je eerste elementen: koppen en alinea's
De meest gebruikte elementen om tekst te tonen zijn koppen en alinea's. HTML heeft zes niveaus van koppen — van <h1> (de grootste) tot <h6> (de kleinste).
<h1>Dit is de paginatitel — gebruik één keer per pagina</h1>
<h2>Dit is een sectiekop</h2>
<h3>Dit is een subsectie</h3>
<p>Dit is een alinea. Je schrijft gewone tekst tussen p-tags.
Meerdere spaties en enters in je code worden genegeerd.</p>
<p>Dit is een tweede alinea. De browser zet automatisch
witruimte tussen twee paragrafen.</p>Wat betekent dit?
h1 t/m h6 — "h" staat voor heading (kop). Gebruik ze op volgorde: begin met h1, dan h2, dan h3. Sla geen niveaus over.
Wat betekent dit?
p — Staat voor paragraph (alinea). Gebruik <p> voor elke blok lopende tekst. Geen p? Dan kleeft alles aan elkaar.
⚠️ Veelgemaakte fout: Een <h1> gebruik je maar één keer per pagina — dat is de hoofdtitel. Voor subsecties gebruik je <h2>, <h3>, etc.
Bouw een "Over mij" sectie
Voeg toe aan de body: een <h1> met je naam, een <h2> "Over mij", en twee <p>-alinea's met iets over jezelf.
👁 Live preview:
6 Hoe inspringing (indentation) werkt
De browser negeert inspringen en extra spaties — het maakt voor het resultaat geen verschil. Maar voor jezelf en anderen die je code lezen is het essentieel. Goede inspringing laat zien welke elementen binnen andere elementen zitten.
<html><head><title>X</title></head> <body><h1>Hallo</h1><p>Tekst</p> </body></html>
<html>
<head>
<title>X</title>
</head>
<body>
<h1>Hallo</h1>
<p>Tekst</p>
</body>
</html>
💡 Tip: In VS Code kun je automatisch inspringen met Alt+Shift+F (Format Document). Doe dit regelmatig.
Schrijf een complete werkende pagina
Maak een volledige pagina met: <!DOCTYPE html>, <html>, <head> met <title>, en een <body> met minimaal een <h1> en een <p>.
👁 Live preview:
📋 Samenvatting
- ✓ Een browser vraagt een HTML-bestand op bij een server en toont het als pagina
- ✓ HTML is de structuur van een webpagina — tags geven aan wat iets is
- ✓ Elke pagina begint met
<!DOCTYPE html>, dan<html>,<head>en<body> - ✓
<h1>t/m<h6>zijn koppen,<p>is een alinea - ✓ Inspringen maakt je code leesbaar — de browser negeert het, mensen niet
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mijn eerste pagina</title>
</head>
<body>
<h1>Welkom op mijn pagina</h1>
<h2>Over mij</h2>
<p>Ik ben een MBO SD-student en leer webontwikkeling.</p>
<p>In deze cursus leer ik HTML, CSS en uiteindelijk Symfony.</p>
</body>
</html>Kennischeck
Test of je de stof begrepen hebt
Klaar met deze les? Markeer hem als voltooid!