Hoe het web werkt en je eerste pagina

Ontdek wat er gebeurt als je een adres in de browser typt, en bouw het fundament van je website.

Wat gebeurt er als je een website opent

Als je iets als www.mijnschool.nl in een browser typt, gebeurt dit:

De browser stuurt via internet een bericht naar een server – de computer waar de website op staat: “Hé, stuur me de pagina!”
De server antwoordt en stuurt bestanden terug – tekst, afbeeldingen, code.
De browser tekent de pagina op je scherm met die bestanden.

De bestanden die de server stuurt zijn geschreven in een taal die HTML heet. En precies die ga je nu leren. Voorlopig staat je website niet op een server – hij staat op je eigen computer, en in de allerlaatste les zetten we hem online.

Kies je project

Voordat je ook maar één regel schrijft, beslis wat je eigenlijk bouwt. Je werkt de hele level aan één van deze projecten:

🏫 De website van mijn school – rooster, lunchmenu, evenementen, leraren
🙋 Mijn persoonlijke website – over mij, wat ik leuk vind, mijn creaties
🌍 Een reisdagboek – reizen, foto’s, herinneringen
⚽ Een sportclubwebsite – team, wedstrijden, training

Eentje gekozen? Top. In elke les zijn er opdrachten voor alle vier projecten – zoek gewoon die van jou.

Ik laat je zien: het skelet waarmee elke pagina op aarde begint

Elke webpagina – van die van jou tot YouTube – begint met precies hetzelfde skelet:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Laten we dat in gewone taal vertalen:

Code	Wat het de browser vertelt
`<!doctype html>`	”Let op, er begint een HTML-pagina!”
`<html lang="en">`	”Alles hierin is één pagina, en die is in het Engels.”
`<head>` … `</head>`	”Hier staat informatie over de pagina.” Bezoekers zien dit niet.
`<meta charset="UTF-8">`	”Er kunnen speciale tekens voorkomen, wees er klaar voor.”
`<title>` … `</title>`	De naam van de pagina – staat in het browsertabblad.
`<body>` … `</body>`	”Alles wat de bezoeker echt ziet, begint hier.” Al je inhoud komt hier.

Let op hoe tags werken: <h1> opent iets en </h1> (met de schuine streep) sluit het weer. Wat ertussen staat, hoort bij die tag. Net als haakjes.

Nu jij 💪

Open je my-website-map (uit de Voorbereidingslevel) in VS Code en open het bestand index.html erin. Verwijder wat er staat en typ het paginaskelet uit het voorbeeld hierboven.
Pas <title> en <h1> aan voor jouw project en voeg onder de kop een <p>-alinea toe met één zin over waar je website over gaat.
Opslaan (Ctrl+S) en index.html openen in je browser (of de pagina verversen met F5).

Niet zeker hoe? Hier zijn oplossingen voor elk project:

🏫 Oplossing: Website van mijn school

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Oplossing: Mijn persoonlijke website

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Oplossing: Reisdagboek

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Oplossing: Sportclubwebsite

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Controleer jezelf: Het browsertabblad toont de naam van je website, en op de pagina staan je kop en je zin. Zo ja – de eerste steen is gelegd!

Wat neem je mee uit deze les

Een website = bestanden die een server naar een browser stuurt. De browser tekent daar een pagina van.
Elke pagina heeft hetzelfde skelet: <head> (informatie over de pagina) en <body> (zichtbare inhoud).
Tags openen als <this> en sluiten als </this>.