Zelf een website maken: stap voor stap uitgelegd

Wat heb je nodig om een website te maken?

Een website bestaat in de basis uit bestanden of pagina's die via internet bereikbaar zijn. Je bezoekers openen die pagina's via een webadres, bijvoorbeeld jouwbedrijf.nl. Daarvoor zijn meestal drie onderdelen nodig: een domeinnaam, een plek waar de website draait (webhosting) en een manier om de pagina's te maken.

Maak voordat je iets koopt een klein plan. Voor wie is je website bedoeld? Welke informatie zoeken bezoekers? En wat moeten ze op je website kunnen doen: lezen, contact opnemen, iets bestellen of een afspraak maken?

Voorbeeld: een website voor een lokale fietsenmaker

Stel dat je een fietsenmaker bent. Je belangrijkste doel is dat klanten openingstijden vinden en een reparatie kunnen aanvragen. Je hebt dan in het begin genoeg aan een homepage, een dienstenpagina en een contactpagina. Een ingewikkelde webshop is niet nodig. Schrijf per pagina op welke vraag je bezoeker daar beantwoord wil zien.

Maak ook alvast een map op je computer met je teksten, logo en afbeeldingen. Gebruik alleen afbeeldingen waarvoor je toestemming of een passende licentie hebt.

Het stappenplan in het kort

1. Kies hoe je wilt bouwen. Bepaal of je een websitebouwer, WordPress of eigen HTML/CSS gebruikt.
2. Registreer een domeinnaam. Kies een herkenbaar adres dat bij je onderwerp past.
3. Regel de hosting. Controleer of de hosting bij je bouwmethode past.
4. Maak je pagina's. Begin met een homepage en enkele nuttige vervolgpagina's.
5. Zet je website online. Verbind het domein, activeer HTTPS en test alles.
6. Blijf verbeteren. Werk inhoud bij, maak back-ups en houd je website veilig.

Stap 1. Kies hoe je de website wilt bouwen

De beste methode hangt af van je ervaring, budget en plannen. Er zijn drie veelgebruikte routes.

Welke methode raden we aan?

Wil je vooral teksten en afbeeldingen publiceren en later gemakkelijk nieuwe artikelen toevoegen? Dan is WordPress vaak praktisch. Wil je zo min mogelijk technisch beheer, bekijk dan een websitebouwer. Wil je leren programmeren of een snelle, eenvoudige website maken, begin dan met HTML en CSS.

Een belangrijk verschil: bij een websitebouwer ben je vaak afhankelijker van het platform. Bij een zelf gehoste WordPress- of HTML-website heb je doorgaans meer controle over bestanden en verhuizing.

Snelle keuzehulp

Twijfel je? Maak eerst een testpagina met twee methoden. Zo merk je welke werkwijze prettig voelt voordat je een betaald pakket afsluit. Lees verder in onze WordPress-handleiding of HTML- en CSS-uitleg.

Stap 2. Kies een goede domeinnaam

Je domeinnaam is het adres dat bezoekers intypen om je website te bereiken. Een goede naam is kort, duidelijk en makkelijk te onthouden.

• Kies een naam die past bij je onderwerp of merk.
• Vermijd ingewikkelde spelling en onnodige koppeltekens.
• Controleer of de naam nog beschikbaar is bij een domeinregistrar.
• Denk aan de extensie: .nl is logisch als je vooral Nederlandse bezoekers wilt bereiken.
• Controleer ook of de naam geen inbreuk maakt op bestaande merkrechten.

Voorbeeld: een lokale fotograaf kan kiezen voor een merknaam als domein, terwijl een informatieve website juist baat kan hebben bij een duidelijke, beschrijvende naam. Een zoekwoord in je domeinnaam garandeert overigens geen hoge positie in Google.

Wil je weten waar je op moet letten bij extensies, registratie en DNS? Lees onze complete handleiding over domeinnamen.

Controlelijst voordat je registreert

1. Zeg de domeinnaam hardop: begrijpt iemand direct hoe je hem schrijft?
2. Controleer de beschikbaarheid en eventuele bestaande merken of handelsnamen.
3. Controleer de prijs voor het tweede jaar, niet alleen de introductieprijs.
4. Bewaar de inloggegevens van de registrar veilig en zet tweestapsverificatie aan als dat kan.

Registreer het domein bij voorkeur op naam van de uiteindelijke eigenaar. Dat voorkomt onduidelijkheid als je later van webbouwer of hostingprovider wisselt.

Stap 3. Regel webhosting

Webhosting zorgt ervoor dat je websitebestanden en eventuele database via internet bereikbaar zijn. Welke hosting je nodig hebt, hangt af van de gekozen techniek.

Een eenvoudige HTML-website heeft meestal genoeg aan hosting voor statische bestanden. WordPress heeft doorgaans een serveromgeving met PHP en een ondersteunde database nodig. Bij een alles-in-één websitebouwer zit de hosting meestal in het pakket.

Waar let je op bij hosting?

• Betrouwbaarheid: hoe gaat de aanbieder om met storingen en onderhoud?
• Snelheid: zijn caching en moderne servertechnieken beschikbaar?
• Beveiliging: is HTTPS mogelijk en zijn back-ups beschikbaar?
• Ondersteuning: kun je hulp krijgen als iets misgaat?
• Totale kosten: kijk niet alleen naar de actieprijs, maar ook naar verlengprijzen en extra's.

Lees ook onze uitgebreide uitleg over webhosting, met een keuzehulp en een checklist om hostingproviders te vergelijken.

Wat betekenen domein, DNS en hosting in de praktijk?

Je domeinnaam is het adres, DNS wijst dat adres naar de juiste server en de webhosting levert de pagina's aan bezoekers. Bij een verhuizing kan je website op een andere server komen te staan terwijl de domeinnaam gelijk blijft. Je past dan de relevante DNS-records aan. Bewaar eventuele e-mailinstellingen: verkeerde DNS-wijzigingen kunnen ook de bezorging van mail beïnvloeden.

Wil je de soorten hosting naast elkaar zien? Gebruik onze onafhankelijke hostingkeuzehulp, voorlopig zonder aanbiedersranglijst.

Stap 4. Bouw je belangrijkste pagina's

Begin klein. Een heldere website met vier goede pagina's is nuttiger dan twintig halflege pagina's. Voor een informatieve website zijn dit vaak goede startpunten:

• Homepage: leg uit wat bezoekers bij jou vinden.
• Onderwerppagina's: geef per onderwerp duidelijke uitleg.
• Over-pagina: vertel wie verantwoordelijk is voor de website en wat het doel is.
• Contactpagina: bied een manier om vragen te stellen.

Een eenvoudig HTML-voorbeeld

Zo ziet de basis van een HTML-pagina eruit:

<!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>
</head>
<body>
  <h1>Welkom op mijn website</h1>
  <p>Dit is mijn eerste webpagina.</p>
</body>
</html>

Sla dit op als index.html en open het bestand in je browser. Je hebt nu een eenvoudige webpagina. Met CSS kun je vervolgens kleuren, lettertypes, afstanden en de indeling aanpassen.

Denk ook aan mobiel

Veel bezoekers gebruiken hun telefoon. Zorg daarom voor leesbare tekst, voldoende grote knoppen en een indeling die zich aanpast aan kleinere schermen. Dit heet responsive design.

Maak een eenvoudige navigatiestructuur

Schrijf op papier of in een document hoe bezoekers van je homepage naar andere pagina's komen. Gebruik begrijpelijke linkteksten zoals ‘Bekijk onze diensten’ in plaats van overal ‘Klik hier’. Geef iedere pagina één duidelijke hoofdkop en verdeel langere uitleg in korte secties.

Voeg een eenvoudige CSS-stijl toe

Onderstaande CSS kun je in een bestand styles.css plaatsen en vanuit je HTML koppelen met <link rel="stylesheet" href="styles.css"> binnen <head>.

body {
  font-family: system-ui, sans-serif;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px;
  line-height: 1.6;
}
a { color: #245ee8; }
img { max-width: 100%; height: auto; }

Met deze kleine toevoeging wordt de tekst leesbaarder en schalen afbeeldingen mee op kleinere schermen. Bekijk de volledige uitleg in HTML en CSS voor beginners.

Stap 5. Zet je website online

Hoe je publiceert, hangt af van je platform. Bij een websitebouwer gebruik je meestal een publiceerknop. Bij WordPress installeer je het systeem op je hostingomgeving. Bij een statische HTML-site upload je je bestanden naar de juiste map op de webserver.

1. Verbind je domeinnaam via de juiste DNS-instellingen met je hosting.
2. Activeer een geldig TLS-certificaat zodat je website via https:// bereikbaar is.
3. Controleer of de homepage en alle links werken.
4. Test de website op een telefoon én op een desktopcomputer.
5. Controleer of formulieren werken en of afbeeldingen laden.

DNS-wijzigingen kunnen enige tijd nodig hebben voordat ze overal zichtbaar zijn. Wacht dus even als je nieuwe domein niet onmiddellijk werkt.

Praktische controle vóór je live gaat

• Open elke pagina en controleer menu, links en eventuele downloadbestanden.
• Controleer de mobiele weergave op ten minste één echte telefoon.
• Test de website met een vers browservenster, zodat je geen verouderde bestanden uit de cache ziet.
• Controleer of er geen testteksten, ongebruikte pagina's of persoonlijke gegevens online staan.
• Maak een kopie van je website voordat je grote wijzigingen publiceert.

Bij een eenvoudige statische site bestaat publiceren vaak uit het uploaden van index.html, de andere HTML-bestanden, CSS en afbeeldingen. Controleer dat de paden en hoofdlettergebruik op je server kloppen.

Stap 6. Maak je website veilig, snel en vindbaar

Een website is na publicatie niet echt 'af'. Je kunt hem blijven verbeteren door inhoud aan te vullen en technische problemen op te lossen.

Vindbaarheid in Google (SEO)

Schrijf in de eerste plaats voor je bezoekers. Gebruik een duidelijke paginatitel, een beschrijvende hoofdkop, logische tussenkoppen en links naar relevante vervolgpagina's. Vermijd teksten die alleen zijn geschreven om zoekwoorden te herhalen.

Een sitemap kan zoekmachines helpen pagina's te ontdekken, maar opname in zoekresultaten en hoge posities zijn nooit gegarandeerd. Met Google Search Console kun je later zien of je pagina's worden geïndexeerd en welke zoekopdrachten bezoekers opleveren.

Veiligheid en onderhoud

• Gebruik HTTPS en sterke, unieke wachtwoorden.
• Werk software en plugins tijdig bij als je een CMS gebruikt.
• Maak regelmatig back-ups en controleer of je die kunt terugzetten.
• Comprimeer grote afbeeldingen en beperk onnodige scripts.
• Controleer af en toe op kapotte links en verouderde informatie.

Toegankelijkheid voor iedere bezoeker

Gebruik voldoende contrast tussen tekst en achtergrond, beschrijvende alternatieve tekst bij informatieve afbeeldingen en zichtbare toetsenbordfocus bij links en knoppen. Zorg dat belangrijke informatie niet uitsluitend via kleur wordt overgebracht.

Wat doe je in de eerste maand na publicatie?

Controleer of bezoekers de belangrijkste pagina's kunnen vinden, werk onduidelijke instructies bij en test na iedere wijziging de navigatie. Als je bezoekersstatistieken wilt verzamelen, onderzoek dan eerst welke privacyregels en toestemmingsvereisten voor de gekozen oplossing gelden.

Wat kost het om zelf een website te maken?

De kosten verschillen sterk per methode. Een zelfgeschreven HTML-website kan zonder betaalde software worden gemaakt, maar voor een eigen domein en reguliere hosting betaal je meestal wel. WordPress zelf is open-source, terwijl hosting, premium thema's of plugins geld kunnen kosten. Een websitebouwer werkt vaak met maand- of jaarabonnementen.

Vergelijk altijd de totale kosten over meerdere jaren. Een lage prijs in het eerste jaar vertelt niet het hele verhaal.

Een realistisch budget bepalen

Maak twee kolommen: eenmalige kosten en jaarlijks terugkerende kosten. Zet daar ook optionele uitgaven in, zoals betaalde thema's, extra e-mailadressen of onderhoud. Kies niet uitsluitend op basis van de laagste startprijs: betrouwbaarheid en de mogelijkheid om later te verhuizen zijn minstens zo belangrijk.

Veelgestelde vragen