Introductie tot Webontwikkeling met HTML en CSS (voor beginners)

Webontwikkeling begint vaak met twee bouwstenen: HTML (structuur) en CSS (opmaak). In deze tutorial leer je stap voor stap hoe je een eenvoudige, maar nette webpagina maakt. Je krijgt niet alleen voorbeelden, maar ook uitleg waarom dingen werken zoals ze werken, plus echte commando’s om lokaal te oefenen.

1. Wat zijn HTML en CSS?

HTML: de structuur en betekenis

HTML staat voor HyperText Markup Language. Het is geen programmeertaal, maar een opmaaktaal waarmee je de structuur van een pagina beschrijft.

Denk aan HTML als het skelet van een huis:

koppen en paragrafen zijn de kamers
links en knoppen zijn deuren
lijsten zijn rekken of inventaris
afbeeldingen zijn decoratie (maar semantisch gezien ook inhoud)

HTML is ook semantisch: je kiest elementen niet alleen omdat ze er “goed uitzien”, maar omdat ze de betekenis van de inhoud aangeven. Dat helpt bij:

toegankelijkheid (schermlezers)
vindbaarheid (zoekmachines)
onderhoudbaarheid (later teruglezen en aanpassen)

CSS: de vormgeving en layout

CSS staat voor Cascading Style Sheets. Met CSS bepaal je:

kleuren, lettertypes, marges
positionering en layout (bijvoorbeeld kolommen)
responsief gedrag (voor mobiel en desktop)
animaties en overgangen

CSS is “cascading” omdat regels elkaar kunnen overerven en omdat er een prioriteitssysteem is dat bepaalt welke regel wint.

2. Benodigdheden en projectmap aanmaken

Software

Je hebt nodig:

een moderne browser (bijvoorbeeld Firefox of Chromium)
een teksteditor (bijvoorbeeld VS Code, maar elke editor kan)
een terminal (op macOS en Linux standaard aanwezig; op Windows via PowerShell of Terminal)

Projectmap maken met echte commando’s

macOS of Linux

mkdir mijn-eerste-site
cd mijn-eerste-site
touch index.html styles.css

Windows (PowerShell)

mkdir mijn-eerste-site
cd mijn-eerste-site
ni index.html
ni styles.css

Je hebt nu:

index.html (de pagina)
styles.css (de opmaak)

3. Een eerste HTML-pagina opbouwen

Open index.html en zet dit erin:

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mijn eerste site</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hallo web!</h1>
    <p>Dit is mijn eerste webpagina met HTML en CSS.</p>
  </body>
</html>

Diepe uitleg van de belangrijkste onderdelen

<!doctype html>
Vertelt de browser dat dit een moderne HTML-documenttype is. Zonder doctype kan de browser in een “compatibiliteitsmodus” gaan, wat layoutproblemen kan veroorzaken.
<html lang="nl">
Geeft de taal aan. Dit is belangrijk voor schermlezers en spellingscontrole.
<meta charset="utf-8" />
Zorgt dat speciale tekens (zoals é, ü, €) correct worden weergegeven.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Cruciaal voor mobiel: zonder deze regel kan je pagina op telefoons “uitgezoomd” lijken.
<link rel="stylesheet" href="styles.css" />
Koppelt je CSS-bestand. Zonder deze link wordt je CSS niet geladen.

4. Je pagina openen in de browser

Je kunt index.html direct dubbelklikken, maar een lokale server is vaak beter (voor consistent gedrag en later als je met assets werkt).

Lokale server starten met Python

Als je Python hebt:

python3 -m http.server 8000

Open daarna in je browser:

http://localhost:8000

Stoppen doe je met:

Ctrl + C in de terminal

Als python3 niet werkt, probeer:

python -m http.server 8000

5. Basis HTML-elementen (met betekenis)

Koppen en paragrafen

Koppen hebben niveaus. Gebruik ze in volgorde voor structuur.

<h1>Hoofdtitel</h1>
<h2>Subtitel</h2>
<p>Een paragraaf met tekst.</p>

Belangrijk: gebruik koppen niet om tekst “groot” te maken. Daar is CSS voor. Koppen zijn voor hiërarchie.

Links

<a href="https://example.com">Bezoek een website</a>

Een link naar een sectie op dezelfde pagina:

<a href="#contact">Ga naar contact</a>

<h2 id="contact">Contact</h2>

Afbeeldingen

<img src="foto.jpg" alt="Beschrijving van de afbeelding" />

De alt-tekst is essentieel:

toegankelijkheid (schermlezers)
als de afbeelding niet laadt
context voor zoekmachines

Lijsten

Ongeordend:

<ul>
  <li>Appels</li>
  <li>Bananen</li>
  <li>Peren</li>
</ul>

Geordend:

<ol>
  <li>Stap één</li>
  <li>Stap twee</li>
</ol>

Semantische structuur: header, main, footer

In moderne HTML gebruik je elementen die betekenis geven aan de layout:

<header>
  <h1>Mijn site</h1>
</header>

<main>
  <h2>Welkom</h2>
  <p>Inhoud van de pagina.</p>
</main>

<footer>
  <p>© 2026</p>
</footer>

Dit helpt bij:

navigatie door schermlezers
duidelijkere code
betere structuur voor zoekmachines

6. Een complete voorbeeldpagina maken

Vervang je index.html door dit grotere voorbeeld:

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Introductie HTML en CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="site-header">
      <div class="container">
        <h1 class="logo">Mijn Eerste Website</h1>
        <nav aria-label="Hoofdnavigatie">
          <ul class="nav">
            <li><a href="#overzicht">Overzicht</a></li>
            <li><a href="#project">Project</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="container">
      <section id="overzicht" class="card">
        <h2>Overzicht</h2>
        <p>
          Deze pagina laat zien hoe HTML de structuur bepaalt en CSS de opmaak.
          We bouwen een simpele layout met een kop, navigatie, kaarten en een formulier.
        </p>
      </section>

      <section id="project" class="card">
        <h2>Mini-project: een profielkaart</h2>

        <article class="profile">
          <img class="profile__avatar" src="https://via.placeholder.com/160" alt="Profielfoto placeholder" />
          <div class="profile__body">
            <h3 class="profile__name">Sam Voorbeeld</h3>
            <p class="profile__role">Beginnende webontwikkelaar</p>
            <p class="profile__bio">
              Ik leer HTML voor structuur en CSS voor layout. Mijn doel is een nette, toegankelijke website bouwen.
            </p>
            <a class="button" href="#contact">Neem contact op</a>
          </div>
        </article>

        <h3>Wat je hier leert</h3>
        <ul>
          <li>Semantische elementen gebruiken</li>
          <li>Klassen toevoegen voor styling</li>
          <li>Layout maken met Flexbox</li>
        </ul>
      </section>

      <section id="contact" class="card">
        <h2>Contact</h2>
        <p>Vul het formulier in (het verstuurt nog niets, maar de opmaak is echt).</p>

        <form class="form" action="#" method="post">
          <label>
            Naam
            <input type="text" name="naam" placeholder="Je naam" required />
          </label>

          <label>
            E-mail
            <input type="email" name="email" placeholder="naam@voorbeeld.nl" required />
          </label>

          <label>
            Bericht
            <textarea name="bericht" rows="5" placeholder="Waarmee kan ik helpen?" required></textarea>
          </label>

          <button class="button" type="submit">Verstuur</button>
        </form>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container">
        <p>Gemaakt met HTML en CSS. Lokaal draaien via een simpele server.</p>
      </div>
    </footer>
  </body>
</html>

Wat betekent `aria-label`?

aria-label="Hoofdnavigatie" geeft een toegankelijke naam aan de navigatie voor hulpmiddelen zoals schermlezers. Dit is nuttig als de context niet duidelijk is.

7. CSS toevoegen: basis, typografie en kleuren

Open styles.css en voeg dit toe:

/* Basis: een consistente box-sizing maakt layout voorspelbaar */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #0b1220;
  --surface: #111a2e;
  --text: #e7eefc;
  --muted: #b7c4e3;
  --accent: #6aa6ff;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  background: radial-gradient(1200px 600px at 20% 0%, #16264a 0%, var(--bg) 60%);
  color: var(--text);
}

/* Container: beperkt de breedte zodat tekst leesbaar blijft */
.container {
  width: min(100% - 2rem, 980px);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(17, 26, 46, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.logo {
  font-size: 1.1rem;
  margin: 0;
  letter-spacing: 0.3px;
}

.nav {
  list-style: none;
  display: flex;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.nav a {
  color: var(--text);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
}

.nav a:hover,
.nav a:focus-visible {
  background: rgba(106, 166, 255, 0.18);
  outline: none;
}

.card {
  background: rgba(17, 26, 46, 0.7);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow);
}

.card h2 {
  margin-top: 0;
}

.profile {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.profile__avatar {
  width: 160px;
  height: 160px;
  border-radius: 1rem;
  object-fit: cover;
  flex: 0 0 auto;
}

.profile__body {
  min-width: 0;
}

.profile__name {
  margin: 0;
}

.profile__role {
  margin: 0.2rem 0 0.8rem;
  color: var(--muted);
}

.profile__bio {
  margin: 0 0 1rem;
  color: var(--text);
}

.button {
  display: inline-block;
  background: var(--accent);
  color: #061022;
  text-decoration: none;
  font-weight: 700;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  border: 0;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  filter: brightness(1.05);
  outline: 2px solid rgba(106, 166, 255, 0.5);
  outline-offset: 2px;
}

.form {
  display: grid;
  gap: 0.9rem;
}

label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
}

input,
textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

input:focus,
textarea:focus {
  outline: 2px solid rgba(106, 166, 255, 0.55);
  outline-offset: 2px;
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1.5rem 0;
  color: var(--muted);
}

Diepe uitleg: waarom deze CSS-keuzes?

`box-sizing: border-box`

Standaard telt de browser padding en border bovenop de breedte. Met border-box wordt het eenvoudiger:

als je zegt “breedte 300px”, dan blijft het echt 300px inclusief padding en border
layouts worden voorspelbaarder, vooral bij formulieren en kaarten

CSS-variabelen in `:root`

Met --bg, --text, --accent maak je een thema. Voordelen:

je verandert later één waarde en de hele site past zich aan
je voorkomt herhaling van kleurcodes
je code wordt leesbaarder

`position: sticky` voor de header

De header blijft bovenaan staan tijdens scrollen, maar gedraagt zich normaal totdat je er langs scrolt. Dit is vaak prettiger dan position: fixed, omdat het minder “zweeft” en makkelijker in te passen is.

Flexbox in `.profile`

Flexbox is ideaal voor “afbeelding links, tekst rechts”-patronen:

display: flex zet de elementen naast elkaar
gap regelt de ruimte tussen items
align-items: center lijnt items verticaal uit

8. Responsief maken (mobielvriendelijk)

Op een smal scherm kan de profielkaart te breed worden. Voeg onderaan in styles.css dit toe:

@media (max-width: 640px) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile__avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

Uitleg van media queries

Een media query past CSS toe alleen onder bepaalde omstandigheden, zoals schermbreedte.
@media (max-width: 640px) betekent: “voer deze regels uit als het scherm 640px of smaller is”.

Hiermee voorkom je dat:

tekst te smal wordt naast een grote afbeelding
navigatie in één rij te krap wordt

9. Hoe CSS bepaalt welke regel wint (cascade en specificiteit)

Soms schrijf je CSS en gebeurt er “niets”. Vaak komt dat door:

volgorde (later in het bestand wint bij gelijke specificiteit)
specificiteit (een specifiekere selector wint)
inline styles (in HTML zelf) winnen vaak van externe CSS
!important wint bijna altijd (maar gebruik dit spaarzaam)

Voorbeeld:

a {
  color: red;
}

.nav a {
  color: white;
}

Links in de navigatie worden wit omdat .nav a specifieker is dan a.

Tip voor beginners: als je vastloopt, inspecteer het element in de browser (ontwikkelaarstools) en kijk welke regel wordt doorgestreept.

10. Ontwikkelaarstools gebruiken (praktisch)

In je browser kun je met ontwikkelaarstools:

HTML live bekijken en aanpassen
CSS aan- en uitzetten
zien welke regels toegepast worden
layoutproblemen opsporen (Flexbox en Grid overlays)

Algemene sneltoetsen:

vaak F12 of Ctrl+Shift+I

Zoek in de tab “Elements” of “Inspector” naar je element en bekijk de “Styles”.

11. Veelgemaakte fouten en hoe je ze voorkomt

1) Vergeten CSS te koppelen

Als je CSS niets doet, controleer:

<link rel="stylesheet" href="styles.css" />

Staat het pad goed? Heet het bestand exact styles.css?

2) Onjuiste nesting of ontbrekende sluit-tags

HTML is vergevingsgezind, maar dat maakt fouten soms lastig te zien. Let op:

elke <section> sluit met </section>
gebruik inspringing om structuur zichtbaar te maken

3) Koppen overslaan

Gebruik bij voorkeur:

één duidelijke <h1>
daarna <h2> voor secties
<h3> voor subsecties

4) Te veel `<div>` zonder betekenis

<div> mag, maar probeer semantische elementen te gebruiken als ze passen:

<header>, <main>, <footer>
<nav>, <section>, <article>

12. Uitbreidingen om verder te oefenen

Hier zijn concrete ideeën om je project uit te breiden:

Voeg een tweede pagina toe
Maak over.html en link ernaartoe:

<a href="over.html">Over mij</a>

Maak een eenvoudige “kaart”-grid
Voeg HTML toe:

<section class="grid">
  <article class="card">Kaart 1</article>
  <article class="card">Kaart 2</article>
  <article class="card">Kaart 3</article>
</section>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Verbeter toegankelijkheid

zorg voor duidelijke focus-stijlen (:focus-visible)
gebruik goede contrasten
schrijf zinvolle alt-teksten

13. Samenvatting

Je hebt nu geleerd:

hoe een HTML-document is opgebouwd (doctype, head, body)
hoe je semantische elementen gebruikt voor duidelijke structuur
hoe je CSS koppelt en toepast met klassen
hoe Flexbox een eenvoudige layout mogelijk maakt
hoe je responsief ontwerp toevoegt met media queries
hoe cascade en specificiteit bepalen welke CSS-regel wint
hoe je lokaal een server start met echte commando’s

Als je wilt, kan ik ook:

een oefenopdrachtenset maken met oplossingen
uitleg geven over CSS Grid naast Flexbox
laten zien hoe je je site online zet via een eenvoudige hostingmethode

Introductie tot Webontwikkeling met HTML en CSS (voor beginners)

Introductie tot Webontwikkeling met HTML en CSS (voor beginners)

1. Wat zijn HTML en CSS?

HTML: de structuur en betekenis

CSS: de vormgeving en layout

2. Benodigdheden en projectmap aanmaken

Software

Projectmap maken met echte commando’s

macOS of Linux

Windows (PowerShell)

3. Een eerste HTML-pagina opbouwen

Diepe uitleg van de belangrijkste onderdelen

4. Je pagina openen in de browser

Lokale server starten met Python

5. Basis HTML-elementen (met betekenis)

Koppen en paragrafen

Links

Afbeeldingen

Lijsten

Semantische structuur: header, main, footer

6. Een complete voorbeeldpagina maken

Wat betekent aria-label?

7. CSS toevoegen: basis, typografie en kleuren

Diepe uitleg: waarom deze CSS-keuzes?

box-sizing: border-box

CSS-variabelen in :root

position: sticky voor de header

Flexbox in .profile

8. Responsief maken (mobielvriendelijk)

Uitleg van media queries

9. Hoe CSS bepaalt welke regel wint (cascade en specificiteit)

10. Ontwikkelaarstools gebruiken (praktisch)

11. Veelgemaakte fouten en hoe je ze voorkomt

1) Vergeten CSS te koppelen

2) Onjuiste nesting of ontbrekende sluit-tags

3) Koppen overslaan

4) Te veel <div> zonder betekenis

12. Uitbreidingen om verder te oefenen

13. Samenvatting

Gerelateerde tutorials

Wat betekent `aria-label`?

`box-sizing: border-box`

CSS-variabelen in `:root`

`position: sticky` voor de header

Flexbox in `.profile`

4) Te veel `<div>` zonder betekenis