📄 Je eerste bestand
Je weet nu wat een website is, hoe het internet werkt en wat frontend en backend betekenen. Tijd om de theorie los te laten en je eerste stap te zetten: VS Code installeren en een echte HTML-pagina aanmaken.
Stap 1 — VS Code installeren
Code schrijf je in een code-editor. Kladblok werkt ook, maar een editor heeft kleurmarkering, autocomplete en nuttige extensies. De standaard in de webwereld is Visual Studio Code — gratis, snel en enorm populair.
Explorer
📁 mijn-website
📄 index.html
🎨 style.css
1 <!DOCTYPE html>
2 <html lang="nl">
3 <body>
4 <h1>Hallo!</h1>
5 </body>
6 </html>
Installeren:
- 1. Ga naar code.visualstudio.com
- 2. Klik op de grote blauwe downloadknop (detecteert automatisch jouw besturingssysteem)
- 3. Installeer het programma (Next, Next, Finish)
- 4. Open VS Code — je ziet een welkomstscherm
💡 Handige extensie
Installeer de extensie Prettier in VS Code (Ctrl+Shift+X → zoek Prettier). Het formatteert je code automatisch netjes als je opslaat. Stel in: Format On Save: aan.
Stap 2 — Je eerste HTML-bestand
Maak nu een map en een bestand aan. Volg de stappen:
Maak een nieuwe map aan
Op je bureaublad of in Documenten. Noem hem bijv. mijn-website.
Open de map in VS Code
File → Open Folder → selecteer de map. Of sleep de map naar het VS Code-icoon.
Maak een nieuw bestand aan
Klik op het + icoontje in de Explorer (links). Noem het bestand index.html — let op de extensie .html!
Typ de basisstructuur
Typ in VS Code gewoon ! en druk op Tab — VS Code vult automatisch de basisstructuur in. Of typ het zelf:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn eerste pagina</title>
</head>
<body>
<h1>Hallo wereld!</h1>
<p>Dit is mijn eerste webpagina.</p>
</body>
</html>
💡 Wat betekent dit?
<!DOCTYPE html> vertelt de browser dat dit een HTML5-document is.
<head> bevat info over de pagina (niet zichtbaar).
<body> bevat wat de bezoeker ziet.
Stap 3 — Openen in de browser
Je HTML-bestand openen in de browser is simpel. Sla het bestand op (Ctrl+S) en doe daarna één van het volgende:
Optie A — Slepen
Sleep het bestand index.html van je Verkenner/Finder naar een open browservenster. De pagina verschijnt meteen.
Optie B — Live Server (aanbevolen)
Installeer de VS Code-extensie Live Server. Daarna: klik rechts op index.html → "Open with Live Server". Je pagina herlaadt automatisch als je de code aanpast.
Resultaat in de browser:
Hallo wereld!
Dit is mijn eerste webpagina.
💡 Wat betekent dit?
De URL begint met file:// — dat betekent dat je direct een lokaal bestand opent, zonder server. Dat werkt prima voor statische HTML. Zodra je PHP nodig hebt (server-side code), heb je wél een webserver nodig.
Stap 4 — Experimenteer!
De beste manier om te leren is door te breken. Probeer deze aanpassingen in je bestand:
🎯 Uitdaging 1 — Andere kop
Verander de tekst in <h1> naar je eigen naam. Sla op en herlaad de browser.
🎯 Uitdaging 2 — Extra paragrafen
Voeg nog twee <p>-tags toe onder de eerste. Elke paragraaf op een nieuwe regel.
🎯 Uitdaging 3 — Een link
Voeg een link toe naar mbo-sd.com:
🎯 Uitdaging 4 — Kleur via CSS
Voeg dit toe in de <head> sectie om je kop blauw te maken:
<style>
h1 { color: royalblue; }
</style>
💡 DevTools — jouw geheime wapen
Druk in je browser op F12 om de Developer Tools te openen. Je ziet de HTML-structuur, de CSS-regels die actief zijn, en eventuele fouten. Elke professionele webdeveloper heeft DevTools de hele dag open.
✅ Wat heb je geleerd?
- ✓ Je hebt VS Code geïnstalleerd — de standaard code-editor voor webdevelopers.
-
✓
Je weet de basisstructuur van een HTML-bestand:
<!DOCTYPE>,<html>,<head>,<body>. - ✓ Je kunt een HTML-bestand openen in de browser via slepen of Live Server.
- ✓ Je weet hoe je DevTools opent (F12) om je pagina te inspecteren.
Wat nu?
Je kent nu de grondbeginselen van het web. Tijd voor de volgende stap: leren bouwen. De HTML-track is het logische vervolg — 6 lessen, van je eerste tag tot semantische HTML.
🧠 Kennischeck
Klaar! Je hebt de Start-track voltooid.
Markeer deze les als voltooid en ga verder met de HTML-track.