Svenska

Europa

Asien

← Nivå 1 – Byggare

Lektion 1 av 12 ⏱ 20 minuter

Hur webben fungerar och din första sida

Ta reda på vad som händer när du skriver en adress i webbläsaren, och bygg grunden till din webbplats.

Vad som händer när du öppnar en webbplats

När du skriver något som www.myschool.com i en webbläsare händer det här:

  1. Webbläsaren skickar ett meddelande över internet till en server – datorn där webbplatsen bor: “Hej, skicka sidan till mig!”
  2. Servern svarar och skickar tillbaka filer – text, bilder, kod.
  3. Webbläsaren ritar upp sidan på din skärm med hjälp av de filerna.

Filerna som servern skickar är skrivna på ett språk som heter HTML. Och det är precis det du ska lära dig nu. Just nu ligger din webbplats inte på en server – den bor på din egen dator, och vi lägger ut den online i den allra sista lektionen.

Välj ditt projekt

Innan du skriver en enda rad, bestäm vad du egentligen bygger. Du kommer att jobba med ett av de här projekten under hela nivån:

Har du valt ett? Bra. Varje lektions uppgifter gäller alla fyra projekt – hitta bara det som är ditt.

Jag visar dig: skelettet som varje sida på jorden börjar med

Varje webbsida – från din till YouTubes – börjar med exakt samma skelett:

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

Låt oss översätta det till vanlig svenska:

KodVad den säger till webbläsaren
<!doctype html>”Hör upp, en HTML-sida börjar!”
<html lang="en">”Allt inuti är en sida, och den är på engelska.”
<head> … </head>”Här kommer information om sidan.” Besökare ser det inte.
<meta charset="UTF-8">”Här kan det finnas specialtecken, var beredd.”
<title> … </title>Sidans namn – visas i webbläsarfliken.
<body> … </body>”Allt besökaren faktiskt ser börjar här.” Allt ditt innehåll hamnar här.

Lägg märke till hur taggar fungerar: <h1> öppnar något och </h1> (med snedstrecket) stänger det igen. Det som ligger emellan hör till den taggen. Precis som parenteser.

Din tur 💪

  1. Öppna din mapp my-website (från Förberedelsenivån) i VS Code, och öppna filen index.html inuti den. Radera det som finns där och skriv sidans skelett från exemplet ovan.

  2. Ändra <title> och <h1> så att de passar ditt projekt, och lägg till ett <p>-stycke under rubriken med en mening om vad din webbplats är.

  3. Spara (Ctrl+S) och öppna index.html i webbläsaren (eller uppdatera sidan med F5).

Osäker hur? Här är lösningar för varje projekt:

🏫 Lösning: Min skolas webbplats 
<!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 personliga webbplats 
<!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: Resejournal 
<!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: Sportklubbens webbplats 
<!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>
✅

Kolla själv: Webbläsarfliken visar din webbplats namn, och sidan visar din rubrik och mening. Om ja – grundstenen är lagd!

Vad du tar med dig

© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning