Hoofdstuk 1: Inleiding - VHSI Webontwikkelingscursus

🎯 Leerdoelen

Aan het einde van dit hoofdstuk kun je:

Uitleggen hoe het web werkt (client-server model)
De rollen van HTML, CSS en JavaScript begrijpen
Visual Studio Code installeren en configureren
Je eerste HTML-bestand maken
HTML-bestanden openen en bekijken in een browser

🌐 Hoe het Web Werkt

Het Internet vs. Het Web

Voordat we beginnen met coderen, laten we de basisbeginselen begrijpen:

Internet — Een wereldwijd netwerk van verbonden computers
Web (World Wide Web) — Een informatiesysteem gebouwd op het internet

Client-Server Model

💡 Belangrijk Concept

Het web werkt met een client-server model. Wanneer je een website bezoekt:

Client (je browser) stuurt een verzoek naar een server
Server vindt de bestanden en stuurt een antwoord
Je browser toont de webpage!

Client-Server Stroom

┌─────────────┐      Verzoek       ┌─────────────┐
│             │  ──────────────►  │             │
│   CLIENT    │                   │   SERVER     │
│  (Browser)  │                   │  (Website)   │
│             │  ◄──────────────  │             │
└─────────────┘      Antwoord      └─────────────┘
     Jouw Computer                  Website Bestanden

🧱 De Drie Bouwstenen

Elke website is opgebouwd met drie hoofdtechnologieën:

HTML

HyperText Markup Language

Verzorgt de structuur en inhoud van webpagina's.

Denk: Het skelet van een gebouw

<h1>, <p>, <img>

CSS

Cascading Style Sheets

Beheert de visuele weergave en styling.

Denk: Verf en decoraties

Kleuren, lettertypes, lay-outs, animaties

JavaScript

JS

Voegt interactiviteit en dynamisch gedrag toe.

Denk: Elektriciteit en loodgieterij

Klikhandlers, animaties, data

💻 Je Ontwikkelomgeving Instellen

Stap 1: Installeer Visual Studio Code

VS Code is een gratis, krachtige code-editor gebruikt door professionele ontwikkelaars.

Ga naar code.visualstudio.com
Download de versie voor jouw besturingssysteem (Windows, Mac of Linux)
Installeer het door de installatiewizard te volgen

Stap 2: Installeer de Live Server Extensie

Live Server ververst automatisch je browser wanneer je wijzigingen opslaat!

Open VS Code
Klik op het Extensies-pictogram in de linker zijbalk (of druk op Ctrl+Shift+X)
Zoek naar "Live Server"
Klik op Installeren bij de extensie van Ritwick Dey

📌 Belangrijk

Maak een speciale map voor je webprojecten. Maak daarbinnen een map genaamd hoofdstuk-01 voor de oefeningen van dit hoofdstuk.

📝 Je Eerste HTML-Pagina

De Anatomie van een HTML-Bestand

Elk HTML-bestand volgt deze basisstructuur:

HTML

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <!-- Dit is waar je zichtbare inhoud komt -->
    <h1>Hallo, Wereld!</h1>
    <p>Welkom op mijn eerste webpagina!</p>
</body>
</html>

Uitleg van de Code

Tag	Doel
`<!DOCTYPE html>`	Vertelt de browser dat dit een HTML5-document is
`<html>`	Het hoofdelement van de pagina
`<head>`	Bevat meta-informatie (niet zichtbaar op pagina)
`<meta charset="UTF-8">`	Tekencodering voor speciale tekens
`<title>`	Tekst getoond in browser tabblad
`<body>`	Bevat zichtbare pagina-inhoud

✏️ Probeer Het Zelf

🎮 Live Code Editor

Bewerk de HTML hieronder en klik op "Uitvoeren" om het resultaat te zien!

<!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>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        h1 { color: #3498db; }
    </style>
</head>
<body>
    <h1>Hallo, Wereld!</h1>
    <p>Dit is mijn eerste webpagina!</p>
    <p>Ik leer webontwikkeling!</p>
</body>
</html>

Uitdagingen

Verander de <h1>-tekst naar je naam
Verander de kleur van #3498db naar een andere kleur
Voeg een derde paragraaf toe met je favoriete hobby

💾 Hoe Op te Slaan en Te Bekijken

In VS Code, ga naar Bestand → Nieuw Bestand
Typ of plak je HTML-code
Sla het bestand op als index.html (Ctrl+S of Cmd+S)
Optie A: Dubbelklik op index.html om te openen in je standaard browser
Optie B: Rechtermuisklik → Openen met Live Server (aanbevolen!)

✅ Pro Tip

Live Server gebruiken betekent dat elke keer dat je het bestand opslaat (Ctrl+S), de browser automatisch ververst!

📚 Woordenlijst

Term	Definitie
Browser	Software om webpagina's te bekijken (Chrome, Firefox, Safari)
Client	De browser die een webpage opvraagt
Server	Computer die websites opslaat en serveert
HTML	HyperText Markup Language — de structuur van webpagina's
URL	Adres van een webpage (bijv. google.com)
VS Code	Visual Studio Code — onze code-editor

Ga Verder met Leren

Klaar om HTML-basisprincipes te leren?

Volgende: HTML Basis →