HTML en CSS leren: bouw je eerste website.

Wat ga je maken?

In deze handleiding bouw je een kleine website met een kop, navigatie, tekst en een knop. Je leert hoe HTML en CSS samenwerken en hoe je de bestanden lokaal bekijkt. Je hebt geen betaalde software nodig.

Wat is het verschil tussen HTML en CSS?

HTML beschrijft de structuur en betekenis van inhoud: koppen, paragrafen, links, afbeeldingen en lijsten. CSS bepaalt hoe die onderdelen eruitzien: kleuren, lettertypes, afstanden en de indeling.

Een website kan zonder CSS functioneren, maar ziet er dan eenvoudig uit. CSS verandert de presentatie, niet de betekenis van de inhoud. Voor interacties zoals een uitklapmenu of formuliercontrole wordt vaak JavaScript gebruikt; dat hebben we voor dit voorbeeld niet nodig.

Maak je projectmap

Maak een map met de naam mijn-website en voeg twee bestanden toe. Gebruik exact deze bestandsnamen:

mijn-website/
├── index.html
└── styles.css

Het bestand index.html is de startpagina. Het bestand styles.css bevat alle vormgeving. Bewaar ze in dezelfde map, zodat de verwijzing naar het stylesheet werkt.

Schrijf je eerste HTML-pagina

Open index.html en plak onderstaande code. De elementen header, main en footer maken de pagina overzichtelijk voor bezoekers en ondersteunende technologie.

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mijn eerste website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav aria-label="Hoofdnavigatie">
      <a href="index.html">Home</a>
    </nav>
  </header>
  <main class="container">
    <h1>Welkom op mijn website</h1>
    <p>Deze pagina heb ik zelf gebouwd met HTML en CSS.</p>
    <a class="knop" href="mailto:info@voorbeeld.nl">Contact</a>
  </main>
  <footer><p>Mijn eerste website</p></footer>
</body>
</html>

De contactlink bevat een voorbeeldadres. Vervang dat voordat je de pagina publiceert. Een h1 beschrijft het hoofdonderwerp van de pagina; gebruik vervolgkoppen zoals h2 voor onderdelen.

Geef je website vorm met CSS

Open styles.css en voeg de volgende regels toe. De selector body stelt de basisstijl in; .container verwijst naar het HTML-element met die class.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #19304d;
  background: #f5f8fc;
  line-height: 1.6;
}
header, footer {
  background: #102846;
  color: white;
  padding: 20px;
}
nav a { color: white; }
.container {
  width: min(90%, 800px);
  margin: 70px auto;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
.knop {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: #2466e6;
  color: white;
  text-decoration: none;
}
.knop:hover, .knop:focus-visible {
  background: #174aa8;
}

De breedte van de inhoud past zich aan kleinere schermen aan. Met clamp() groeit de titel mee met de beschikbare ruimte, binnen een minimum en maximum.

Bekijk en test je pagina

1. Sla beide bestanden op.
2. Dubbelklik op index.html om het bestand in je browser te openen.
3. Verander bijvoorbeeld de achtergrondkleur in CSS en vernieuw de pagina.
4. Maak het browservenster smaller en controleer of tekst en knop leesbaar blijven.
5. Controleer of de navigatielink werkt en of het stylesheet wordt geladen.

Werkt de vormgeving niet? Controleer of het bestand echt styles.css heet, in dezelfde map staat en niet per ongeluk styles.css.txt is geworden.

Voeg meer pagina’s en afbeeldingen toe

Maak bijvoorbeeld over.html aan met dezelfde basisstructuur en voeg in beide pagina’s een navigatielink toe: <a href="over.html">Over mij</a>.

Een afbeelding voeg je toe met <img src="afbeeldingen/foto.jpg" alt="Korte beschrijving">. Zorg dat het pad klopt, geef betekenisvolle afbeeldingen een beschrijvende alternatieve tekst en optimaliseer de bestandsgrootte. Gebruik bij voorkeur afbeeldingen waarvoor je toestemming of een passende licentie hebt.

Praktijkproject: bouw een complete persoonlijke website

In dit project maak je een kleine maar complete website voor de fictieve persoon Sam. Je bouwt een navigatiebalk, een introductie met knop, twee inhoudsblokken en een footer. Op smalle schermen worden de projectkaarten automatisch onder elkaar geplaatst.

Stap 1: maak de projectmap

Maak een map mijn-eerste-site met index.html en styles.css. Beide bestanden moeten naast elkaar staan. In de meegeleverde voorbeeldmap is dit al voor je gedaan.

Stap 2: bouw de HTML-structuur

Onderstaand fragment laat de belangrijkste onderdelen zien. Het volledige werkende HTML-bestand vind je in het voorbeeldpakket.

<header class="site-header">
  <nav aria-label="Hoofdnavigatie">
    <a href="#over">Over mij</a>
    <a href="#projecten">Projecten</a>
  </nav>
</header>
<main id="inhoud">
  <section class="hero">
    <h1>Hallo, ik ben Sam.</h1>
    <p>Dit is mijn eerste website.</p>
  </section>
  <section id="over"><h2>Over mij</h2></section>
  <section id="projecten"><h2>Mijn projecten</h2></section>
</main>

De links met #over en #projecten springen naar onderdelen met dezelfde id. Zo werkt de navigatie zonder JavaScript.

Stap 3: voeg CSS toe

Met CSS maken we de inhoud maximaal 1100 pixels breed en zetten we twee projectkaarten naast elkaar. De mediaquery past dit aan voor telefoons.

.container {
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 650px) {
  .cards { grid-template-columns: 1fr; }
}

Stap 4: maak de website persoonlijk

1. Vervang de naam Sam door je eigen naam.
2. Schrijf twee zinnen over jezelf en voeg je eigen projecten toe.
3. Pas in styles.css de kleurcode #2459c6 aan en vernieuw de browser.
4. Vervang voorbeeld@example.com door je eigen e-mailadres voordat je publiceert.
5. Controleer het resultaat op een smal scherm en test alle navigatielinks met het toetsenbord.

Stap 5: controleer voordat je publiceert

Open de pagina lokaal, klik op alle links, controleer de opmaak zonder internetverbinding en test of er horizontaal scrollen ontstaat op mobiel. Gebruik bij het publiceren HTTPS en controleer of beide bestanden op de server staan.

Zet je website online

Om je website online te zetten, heb je een domeinnaam en webhosting nodig. Upload index.html, styles.css en eventuele afbeeldingen naar de juiste publieke map van je hostingomgeving. Dat kan bijvoorbeeld via SFTP of het bestandsbeheer van je host.

Controleer daarna of je website via HTTPS bereikbaar is en of alle links werken. SFTP is veiliger dan onversleutelde FTP. Wil je liever pagina’s beheren zonder code te wijzigen? Lees dan ook onze WordPress-handleiding.

Veelgemaakte fouten

• Verkeerde bestandsnamen: Index.html en index.html kunnen op een server verschillende bestanden zijn.
• Verkeerde paden: relatieve links verwijzen vanuit de locatie van het huidige bestand.
• Ontbrekende sluit-tags: hierdoor kan de browser onderdelen anders weergeven dan bedoeld.
• Alleen op desktop testen: controleer ook kleine schermen en toetsenbordnavigatie.
• Te veel opmaak in HTML: bewaar de meeste vormgeving in CSS.

Veelgestelde vragen