🌐 Wat is een website?
Voor je begint met coderen is het handig om te begrijpen wat je eigenlijk aan het bouwen bent. In deze les ontdek je hoe een website is opgebouwd — uit drie bouwstenen die elk een andere rol hebben.
Een website is meer dan één bestand
Als je een website opent in je browser, denk je misschien dat je één ding ziet. Maar achter de schermen werken drie verschillende soorten bestanden samen om die pagina te maken. Elk bestand heeft een andere taak.
Het makkelijkste is om ze te vergelijken met het bouwen van een huis:
JavaScript — het gedrag
Reageer op klikken, animeer elementen, haal data op. Laag 3 (bovenop alles)
CSS — het uiterlijk
Kleuren, lettertypen, lay-out, marges. Laag 2 (op de structuur)
HTML — het skelet
De structuur: koppen, paragrafen, afbeeldingen, links. Laag 1 (de basis)
💡 Wat betekent dit?
HTML = het skelet van een huis (muren, vloer, dak). CSS = de afwerking (verf, meubels, inrichting). JavaScript = de elektra (lichten die aangaan als je ze aanraakt).
HTML — de structuur
HTML staat voor HyperText Markup Language. Dat klinkt ingewikkeld, maar het idee is simpel: je omschrijft wat elk stuk tekst is — een kop, een paragraaf, een afbeelding, een link.
Je doet dat met zogenoemde tags: woorden tussen punthaken. De browser leest die tags en weet dan hoe hij de pagina moet opbouwen.
<h1>Mijn eerste website</h1>
<p>Welkom op mijn pagina!</p>
<a href="https://mbo-sd.com">Klik hier</a>
💡 Wat betekent dit?
Een tag is een instructie aan de browser. <h1> zegt: "dit is een grote kop". <p> zegt: "dit is een paragraaf". Elke openingstag heeft een sluitingstag met een schuine streep: </h1>.
CSS — het uiterlijk
Zonder CSS is een HTML-pagina zwart-wit en saai. CSS (Cascading Style Sheets) voegt kleuren, lettertypen, marges en lay-out toe.
CSS werkt met regels: je kiest een element (bijv. alle h1-koppen) en zegt hoe dat eruit moet zien.
h1 {
color: royalblue;
font-size: 2rem;
text-align: center;
}
❌ Zonder CSS
Welkom!
Dit is mijn website.
✅ Met CSS
Welkom!
Dit is mijn website.
💡 Wat betekent dit?
CSS staat los van HTML — het is een apart bestand met stijlregels. Zo kun je het uiterlijk aanpassen zonder de structuur aan te raken. Je kunt ook hetzelfde CSS-bestand gebruiken voor honderden pagina's tegelijk.
JavaScript — het gedrag
HTML en CSS zijn statisch — ze reageren niet op de bezoeker. JavaScript maakt een pagina interactief: knoppen die iets doen, formulieren die controleren of alles klopt, of content die ververst zonder de pagina opnieuw te laden.
JavaScript draait in de browser van de bezoeker — niet op de server.
// Als de knop geklikt wordt:
document.getElementById('mijnKnop').addEventListener('click', () => {
alert('Je klikte op de knop!');
});
↓ Probeer het zelf
💡 Wat betekent dit?
JavaScript is een programmeertaal — niet alleen een opmaaktaal zoals HTML. Je kunt er rekenen, beslissingen maken en met de pagina communiceren. Het is de enige taal die de browser native begrijpt (zonder iets te installeren).
✅ Wat heb je geleerd?
- ✓ Een website bestaat uit drie bouwstenen: HTML (structuur), CSS (uiterlijk) en JavaScript (gedrag).
-
✓
HTML gebruikt tags zoals
<h1>en<p>om structuur aan te geven. - ✓ CSS voegt stijl toe via regels die zeggen hoe elementen eruitzien.
- ✓ JavaScript maakt pagina's interactief en draait in de browser.
🧠 Kennischeck
Klaar met deze les!
In de volgende les leer je hoe het internet werkt: wat er gebeurt als je een URL intypt.