Slik fungerer nettet, og din første side

Finn ut, hva som skjer, når du skriver en adresse i nettleseren, og byg fundamentet til din nettside.

Hva sker der, når du åpner en nettside

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

Nettleseren sender en melding over internettet til en server – datamaskinen, hvor nettsiden bor: “Hei, send meg siden!”
Serveren svarer og sender filer tilbake – tekst, bilder, kode.
Nettleseren tegner siden på skjermen din med disse filene.

Filerne, serveren sender, er skrevet i et språk som heter HTML. Og det er nøyaktig det, du er i ferd med å lære. Foreløpig ligger din nettside ikke på en server – den bor på din egen datamaskin, og vi legger den ut på nettet i aller siste leksjon.

Velg prosjektet ditt

Før du skriver en eneste linje, bestem hva du faktisk bygger. Du jobber med et af disse projekter hele nivået:

🏫 Nettsiden til skolen min – timeplan, lunsjmeny, arrangementer, lærere
🙋 Min personlige nettside – om mig, hva jeg liker, mine kreasjoner
🌍 En reisejournal – ture, bilder, minder
⚽ Nettsiden til en sportsklubb – lag, kamper, trening

Valgt ett? Flott. Alle leksjonenes oppgaver dekker alle fire projekter – finn bare det som er ditt.

Jeg viser deg: skjelettet som hver side på jorden starter med

Hver nettside – fra din til YouTube – starter med nøyaktig det samme skjelett:

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

La oss oversette det til vanlig norsk:

Kode	Hva det forteller nettleseren
`<!doctype html>`	”Pass på, en HTML-side starter!”
`<html lang="en">`	”Alt inni er én side, og den er på engelsk.”
`<head>` … `</head>`	”Her er informasjon om siden.” Besøkende ser det ikke.
`<meta charset="UTF-8">`	”Det kan være spesialtegn her, vær klar for dem.”
`<title>` … `</title>`	Sidens navn – vist i nettleserfanen.
`<body>` … `</body>`	”Alt, besøkende faktisk ser, starter her.” Alt innholdet ditt kommer her.

Legg merke til, hvordan tags fungerer: <h1> åpner noe og </h1> (med skråstreken) lukker det igjen. Det som er imellom, hører til den taggen. Akkurat som parenteser.

Nå er det din tur 💪

Åpne din my-website-mappe (fra forberedelsesnivået) i VS Code, og åpne index.html-filen. Slett det som er der, og skriv sideskjelettet fra eksemplet ovenfor.
Endre <title> og <h1> så de passer til prosjektet ditt, og legg til et <p>-avsnitt under overskriften med én setning om hva nettsiden din handler om.
Lagre (Ctrl+S) og åpne index.html i nettleseren (eller oppdater siden med F5).

Usikker på hvordan? Her er løsninger for hvert prosjekt:

🏫 Løsning: Nettsiden til skolen min

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

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

<!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: Nettsiden til en sportsklubb

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

✅

Sjekk deg selv: Nettleserfanen viser navnet på nettsiden din, og siden viser overskriften og setningen din. I så fall – grunnsteinen er lagt!

Dette tar du med deg fra leksjonen

En nettside = filer som en server sender til en nettleser. Nettleseren tegner en side ut fra dem.
Hver side har det samme skjelettet: <head> (informasjon om siden) og <body> (synlig innhold).
Tagger åpnes som <dette> og lukkes som </dette>.