Webbutveckling 1 · område 1 · projekt

Så fungerar webben

Din första webbplats. En sida som förklarar vad som händer när någon skriver en adress och trycker enter – i fyra steg, med dina egna ord. Vi bygger den tillsammans på fyra lektioner och publicerar den på den femte.

• 4 sept Inlämning kl 23:59 Länken till ditt publika repo lämnas i itslearning-uppgiften.

1. Uppdraget

Du ska bygga en sida som förklarar kedjan från adress till färdig sida. Sidan går igenom fyra steg, ett i taget: du skriver adressen, datorn slår upp namnet, webbläsaren frågar servern, och servern svarar. Allt du behöver veta gick vi igenom på måndagen, och det står i faktabladet Från adress till sida.

Du sitter inte och tittar på när jag kodar. Du skriver samma sak som jag, samtidigt, i ditt eget repo. Sista lektionen publiceras sidan med GitHub Pages och blir din första publika webbplats.

Skriv så att någon som går i nian förstår. Den personen har aldrig hört ordet DNS.

2. Kraven

Kryssa av allt eftersom. Kryssen sparas i din webbläsare.

Kryssen sparas i din webbläsare. Nollställ alla kryss

3. Tekniska krav

4. Så bygger vi den

Hinner du inte klart på en lektion är det ingen katastrof. Nästa pass börjar med tid för att komma ikapp, och du kan alltid jobba vidare hemma – ditt Codespace finns kvar.

5. Tisdagens steg

Det här skriver vi tillsammans på tisdagen. Har du varit borta, eller vill du läsa igen efteråt, står allt här.

Först: öppna ditt Codespace från listan under Code → Codespaces. Skapa inget nytt – klicka på det som redan finns. Öppna index.html och ta bort rubriken du skrev i fredags.

Sedan skelettet. Tre block som beskriver vad delarna är: toppen, det viktiga innehållet, och foten.

<body>

  <header>
    <h1>Så fungerar webben</h1>
  </header>

  <main>
  </main>

  <footer>
  </footer>

</body>

Sedan fyra avsnitt inuti main, ett per steg i kedjan. Så här ser det första ut:

    <section>
      <h2>1. Du skriver adressen</h2>
    </section>

De tre andra rubrikerna är 2. Datorn slår upp namnet, 3. Webbläsaren frågar servern och 4. Servern svarar. Numren och ordningen ska vara kvar – formuleringen får du äga.

Sist texten. Under varje h2 lägger du ett stycke med p:

    <section>
      <h2>1. Du skriver adressen</h2>
      <p>Adressen består av flera delar. Protokollet säger vilka regler
        som gäller, domännamnet är namnet någon har registrerat, och
        sökvägen pekar ut var dokumentet ligger på servern.</p>
    </section>

Innan du går: spara med Ctrl + S, gå till Source Control, klicka + på filen, skriv La till struktur och rubriker, klicka Commit och sedan Sync Changes. Ladda om repot på github.com och se att ändringen syns.

6. Fredagens steg

Det här skriver vi tillsammans på fredagen. Passet börjar med en kvart där du skriver klart texten från tisdagen – hann du inte alla fyra styckena är det nu du gör det.

Först en mapp för bilderna. I filträdet till vänster, klicka New Folder och döp mappen till bilder. Gemener, ingen versal, inga mellanslag.

Sedan bilden. Dra in bildfilen från skrivbordet till mappen bilder. Fungerar inte drag-and-drop: högerklicka på mappen och välj Upload. Filnamnet ska vara gemener med bindestreck i stället för mellanslag, till exempel dns.png eller fran-adress-till-sida.png.

Nu bilden i koden, inuti det section där den hör hemma:

    <section>
      <h2>2. Datorn slår upp namnet</h2>
      <p>...</p>
      <img src="bilder/dns.png" alt="Datorn frågar en DNS-server efter
        numret till adressen och får tillbaka en IP-adress.">
    </section>

img stängs inte – det finns inget </img>. Allt elementet behöver står i attributen. src är sökvägen: bilder/dns.png betyder mappen bilder, som ligger bredvid den här filen, och filen dns.png i den. alt beskriver vad bilden visar, för den som inte kan se den.

Sedan en lista. Adressens delar är tre stycken, och tre saker i rad är en lista snarare än en mening. Den hör hemma i steg 1:

      <ul>
        <li>Protokollet – https, reglerna för hur frågan ställs</li>
        <li>Domännamnet – namnet någon har registrerat</li>
        <li>Sökvägen – var på servern dokumentet ligger</li>
      </ul>

ul är listan, li är en rad i den, och raderna ligger inuti listan. ul ger punkter, ol ger nummer – ordningen är det enda som skiljer dem. En lista räcker. Blir alla fyra stegen punktlistor finns det ingen text kvar att läsa.

Sist en länk ut från sidan. Steg 4 handlar om statuskoder, så länken hör hemma där:

      <p>Vill du se alla statuskoder finns de listade hos
        <a href="https://developer.mozilla.org/sv/docs/Web/HTTP/Status">MDN</a>.</p>

href är dit länken går, texten mellan taggarna är det du klickar på. https:// måste stå med när länken går ut från din egen sida – skriver du bara developer.mozilla.org letar webbläsaren efter en mapp med det namnet i ditt eget repo, och du får 404. Skriv en länktext som säger vart länken går. MDN fungerar, klicka här gör det inte: den som får sidan uppläst hör bara klicka här och vet inte vad som väntar.

Är bilden någon annans, skriv var du hittade den i sidfoten:

    <footer>
      <p>Av Ditt Namn, Webbutveckling 1, 2026</p>
      <p>Bild: <a href="https://commons.wikimedia.org/">Wikimedia Commons</a></p>
    </footer>

Innan du går: spara, gå till Source Control, lägg till både index.html och bildfilen, skriv La till bild, lista och länk, klicka Commit och Sync Changes. Ladda sedan om ditt repo på github.com och leta efter mappen bilder. Syns den inte är bilden inte uppe.

7. Måndagens steg

Det här skriver vi tillsammans på måndagen. Innehållet är klart – nu får sidan form. Inte för att bli snygg, utan för att gå att läsa.

Formen bor i en egen fil. index.html säger vad sidan innehåller, stil.css säger hur det ska se ut. De hålls isär, och det gör de genom hela kursen.

Först filen. I filträdet, New File, namnet stil.css. Den ska ligga bredvid index.html, inte i bilder.

Sedan kopplingen, i head:

    <link rel="stylesheet" href="stil.css">

href är en sökväg, precis som src var för bilden. stil.css betyder filen som heter så, bredvid den här. link stängs inte, lika lite som img. Och den ligger i head, inte i body.

Sedan en regel som bevisar att det sitter ihop. Skriv den i stil.css:

body {
  background: #ffe08a;
}

Spara. Blir sidan gul sitter kopplingen, och resten är innehållet i filen. Blir den inte gul är det ett av tre fel: filen heter något annat, link-raden ligger i body, eller sökvägen är felstavad. Leta i den ordningen.

Sedan färg och typsnitt. Byt ut den gula bakgrunden och bygg ut regeln:

body {
  font-family: system-ui, sans-serif;
  color: #1c1c1c;
  background: #fdfdfb;
}

font-family har flera värden med komma emellan – webbläsaren tar det första som finns på datorn. color är textens färg, background är bakgrunden. Färger skrivs som # och sex tecken, eller med engelska namn som black. Inte svart.

Rubrikerna får en egen regel, och färgen väljer du själv:

h1, h2 {
  color: #14506b;
  line-height: 1.2;
}

Kommatecknet i selektorn betyder och. Regeln gäller båda.

Sedan luft och läsbredd, det som faktiskt gör sidan läsbar. Raderna läggs till i den body-regel du redan har – inte i en ny:

  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;

max-width sätter en gräns för hur bred texten får bli. Utan den blir raderna så långa att ögat tappar bort vilken rad det var på. margin: 0 auto centrerar innehållet. line-height är avståndet mellan raderna. padding är luft på insidan, så att texten inte klistrar sig mot kanten på mobil.

Och avstånd mellan stegen, så att man ser var ett slutar:

section {
  margin-bottom: 2.5rem;
}

Sist får bilden en storlek. Den har legat i sin egen storlek sedan fredag:

img {
  max-width: 100%;
}

100 % av utrymmet den har att breda ut sig på. Är bilden mindre än så lämnas den i fred – max-width sätter ett tak, inte en storlek.

Innan du går: spara, lägg till båda filerna i Source Control, skriv La till stilmall, klicka Commit och Sync Changes.

8. Innan du lämnar in

Tisdag 1 september är sista passet innan publiceringen, och det är eget arbete med handledning. Ingen ny kod gås igenom – du bygger klart, och jag går runt.

Börja med att skriva ner vad du saknar. På ett papper, inte i huvudet. Gå igenom listan nedan och skriv upp det som inte är gjort. Den som skriver ner tre saker gör tre saker.

Ordningen att ta det i, om du saknar flera saker:

1. Egen text under alla fyra rubrikerna, två till fyra meningar per steg.
2. Stilmallen: heter filen stil.css, ligger link-raden i head, stämmer sökvägen?
3. Bilden: rätt sökväg, gemener i filnamnet, en alt som beskriver vad den visar.
4. Listan och länken ut från sidan.
5. Allt committat och synkat.

Sist: kontrollera i ditt repo på github.com. Tre saker ska synas i filträdet:

bilder/
index.html
stil.css

Fattas något är det inte committat. Då finns det inte på webben heller, hur bra det än ser ut i ditt Codespace – och på fredag publicerar vi det som ligger på GitHub, inte det som ligger hos dig.

9. Så lämnar du in

Det här gör vi tillsammans på fredagen 4 september. Deadline är samma kväll 23:59, så hinner du inte klart på lektionen gör du klart hemma – men den som går från lektionen med en fungerande adress slipper göra det.

Först: allt måste ligga på GitHub. Pages publicerar det som finns i repot, ingenting annat. Öppna ditt repo på github.com och kontrollera att index.html, stil.css och mappen bilder syns i listan.

Sedan slår du på GitHub Pages. På ditt repo, inte på ditt konto:

1. Settings uppe till höger.
2. Pages i vänsterspalten.
3. Under Source: Deploy from a branch.
4. Under Branch: main, och mappen står kvar på / (root).
5. Save.

Nu bygger GitHub din sida, och det tar ungefär en minut. Ladda om Settings → Pages tills adressen står överst. Den ser ut så här:

https://ANVÄNDARNAMN.github.io/REPONAMN/

Öppna din adress och kontrollera tre saker, i den här ordningen:

1. Kommer sidan upp?
2. Syns bilden?
3. Ser sidan stilad ut – färg, typsnitt och luft?

<img src="Bilder/DNS.png" alt="…">   ← 404 på webben
<img src="bilder/dns.png" alt="…">   ← fungerar överallt

Det andra vanliga felet är ett snedstreck först i sökvägen:

<link rel="stylesheet" href="/stil.css">   ← fel
<link rel="stylesheet" href="stil.css">    ← rätt

Ett inledande snedstreck betyder börja om från serverns rot. Din sida ligger under användarnamn.github.io/reponamn/, så snedstrecket hoppar över reponamnet och letar på fel ställe.

Varje rättning tar samma väg: ändra i Codespace, committa, synka, vänta en minut, ladda om.

Sist lämnar du in länken i itslearning. Det är repots adress som ska in, inte sajtens:

https://github.com/ANVÄNDARNAMN/REPONAMN

Rättningen tittar på koden, inte bara på hur sidan ser ut – och sajten når man själv därifrån.

10. Felsökning