Sådan virker nettet, og din første side

Find ud af, hvad der sker, når du skriver en adresse i browseren, og byg fundamentet til din hjemmeside.

Hvad sker der, når du åbner en hjemmeside

Når du skriver noget som www.myschool.com i en browser, sker dette:

Browseren sender en besked over internettet til en server – computeren, hvor hjemmesiden bor: “Hej, send mig siden!”
Serveren svarer og sender filer tilbage – tekst, billeder, kode.
Browseren tegner siden på din skærm med disse filer.

Filerne, serveren sender, er skrevet i et sprog kaldet HTML. Og det er præcis det, du er ved at lære. Indtil videre ligger din hjemmeside ikke på en server – den bor på din egen computer, og vi lægger den online i allersidste lektion.

Vælg dit projekt

Før du skriver en eneste linje, beslut hvad du faktisk bygger. Du arbejder på et af disse projekter hele niveauet:

🏫 Min skoles hjemmeside – skema, madplan, begivenheder, lærere
🙋 Min personlige hjemmeside – om mig, hvad jeg kan lide, mine kreationer
🌍 En rejsejournal – ture, fotos, minder
⚽ En sportsklubs hjemmeside – hold, kampe, træning

Valgt et? Super. Alle lektioners opgaver dækker alle fire projekter – find bare det, der er dit.

Vis mig: skelettet, som enhver side på Jorden starter med

Enhver webside – fra din til YouTubes – starter med præcis det samme 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>

Lad os oversætte det til almindeligt dansk:

Kode	Hvad det fortæller browseren
`<!doctype html>`	”Pas på, en HTML-side starter!”
`<html lang="en">`	”Alt indeni er én side, og den er på engelsk.”
`<head>` … `</head>`	”Her er information om siden.” Besøgende ser det ikke.
`<meta charset="UTF-8">`	”Der kan være specialtegn her, vær klar til dem.”
`<title>` … `</title>`	Sidens navn – vist i browserfanen.
`<body>` … `</body>`	”Alt, besøgende faktisk ser, starter her.” Alt dit indhold kommer her.

Læg mærke til, hvordan tags virker: <h1> åbner noget og </h1> (med skråstregen) lukker det igen. Det, der er imellem, hører til det tag. Ligesom parenteser.

Nu er det din tur 💪

Åbn din my-website-mappe (fra forberedelsesniveauet) i VS Code, og åbn index.html-filen. Slet det, der er der, og skriv sideskelettet fra eksemplet ovenfor.
Ændr <title> og <h1> så de passer til dit projekt, og tilføj et <p>-afsnit under overskriften med én sætning om, hvad din hjemmeside handler om.
Gem (Ctrl+S) og åbn index.html i din browser (eller opdater siden med F5).

Usikker på hvordan? Her er løsninger til hvert projekt:

🏫 Løsning: Min skoles hjemmeside

<!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>

🙋 Løsning: Min personlige hjemmeside

<!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>

🌍 Løsning: Rejsejournal

<!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>

⚽ Løsning: Sportsklubs hjemmeside

<!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>

✅

Tjek dig selv: Browserfanen viser din hjemmesides navn, og siden viser din overskrift og sætning. Hvis ja – grundstenen er lagt!

Det tager du med fra denne lektion

En hjemmeside = filer, som en server sender til en browser. Browseren tegner en side ud fra dem.
Hver side har det samme skelet: <head> (information om siden) og <body> (synligt indhold).
Tags åbner som <dette> og lukker som </dette>.