⏱️ Leestijd: ca. 4 min.

Hoe het internet en het web werken

Welkom bij de eerste stap in de wereld van webdesign! Voordat we de eerste regels code gaan schrijven in HTML en CSS, is het belangrijk om te begrijpen hoe het netwerk achter de schermen precies in elkaar zit. Hoe komt een webpagina eigenlijk op jouw scherm terecht nadat je een adres intypt?

In deze les ontdek je de basis van het internet, de rol van browsers en servers, en het protocol dat dit allemaal mogelijk maakt.

1. Het verschil tussen het Internet en het Web

Hoewel de termen Internet en World Wide Web (het web) in het dagelijks leven vaak door elkaar worden gebruikt, betekenen ze niet hetzelfde.

2. De Client en de Server

Het web werkt volgens het client-server model. Dit is een samenwerking tussen twee cruciale spelers:

De Client (De Aanvrager)

De client is het apparaat waarmee jij surft, zoals je laptop, smartphone of tablet. Op dit apparaat draait een webbrowser (zoals Google Chrome, Mozilla Firefox, Safari of Microsoft Edge). De taak van de browser is om webpagina's op te vragen bij een server en deze netjes op jouw scherm te tonen.

De Server (De Aanbieder)

Een server is een krachtige computer die dag en nacht met het internet verbonden is. Op de harde schijf van een server staan alle bestanden van een website opgeslagen (HTML-bestanden, CSS-stylesheets, afbeeldingen, video's).

Het principe in het kort:
De client vraagt om een webpagina $\rightarrow$ De server zoekt de bestanden en stuurt ze terug naar de client.

3. Het HTTP-protocol: De taal van het web

Om ervoor te zorgen dat clients en servers elkaar begrijpen, spreken ze dezelfde afgesproken taal: HTTP (wat staat voor HyperText Transfer Protocol). Tegenwoordig gebruiken we bijna altijd de beveiligde variant: HTTPS (met de 'S' van Secure).

Wat gebeurt er als je een URL intypt?

Stel, je typt https://www.voorbeeld.be in de adresbalk van je browser en drukt op Enter. In een fractie van een seconde gebeuren de volgende stappen:

  1. DNS Lookup (Het Adresboek): Computers begrijpen geen namen zoals voorbeeld.be, maar wel IP-adressen (zoals 192.0.2.1). De browser zoekt via een DNS-server het juiste IP-adres op dat bij de websitenaam hoort.
  2. HTTP Request (Het Verzoek): Je browser stuurt een digitaal verzoek naar de server op dat IP-adres: "Beste server, mag ik de HTML-code van de hoofdpagina (index.html) ontvangen?"
GET /index.html HTTP/1.1
Host: www.voorbeeld.be
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
  1. HTTP Response (Het Antwoord): De server verwerkt het verzoek en stuurt een antwoord terug met de gevraagde code én een statuscode.
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html>
...

Veelvoorkomende HTTP Statuscodes

Je bent ze vast al eens tegengekomen op het web:

Tip: Wil je de HTTP-verzoeken van je eigen browser live aan het werk zien? Druk in je browser eens op F12 (of rechtermuisknop $\rightarrow$ Inspecteren) en klik op het tabblad Network (Netwerk). Laad daarna de pagina opnieuw!

4. Wat doet de browser met de ontvangen bestanden?

Zodra de browser de bestanden van de server heeft ontvangen, begint het proces dat rendering heet. De browser leest de ontvangen code van boven naar beneden en bouwt de pagina op:

  1. HTML: Bepaalt de structuur en de inhoud (titels, paragrafen, afbeeldingen, knoppen).
  2. CSS: Bepaalt de vormgeving en stijl (kleuren, lettertypen, uitlijning, lay-out).
  3. JavaScript: Bepaalt de interactiviteit en dynamica (animaties, pop-ups, data verwerken).

Samenvatting