HTML Dag 1 - Introduktion

1. Hur fungerar internet?

HTTP: "Postbudet för internet" - skickar förfrågningar mellan din dator och servrar.
När du skriver "google.se" så säger din dator "Hej Google, kan jag få din hemsida tack?"
Google svarar: "Visst, här har du alla filer du behöver!"
Webbläsare: "Läsaren av brev" - tolkar HTML/CSS/JS och visar sidan.
Chrome, Firefox, Safari - alla "pratar" HTML men visar det lite olika (som olika dialekter).
Servrar: "Stora datorer som lagrar webbsidor" - som ett bibliotek.
När du besöker en sida hämtar din dator filer från en server någonstans i världen.
Routing ("hopp"): Visa med en enkel bild:
När du skickar ett brev måste det hoppa mellan olika postkontor.
På internet hoppar dina meddelanden mellan olika "vägvisare" (routers).
```
Dator → Router → ISP → Server → [Svar tillbaka samma väg]
```
Praktisk demonstration:
- Använd kommandot tracert google.se i kommandotolken (Windows)
- Varje rad visar ett "hopp" på vägen till Google

2. Vad är HTML?

HTML är "skelettet" på en webbsida - det bestämmer var text, bilder och länkar hamnar.
HTML = HyperText Markup Language (vi "markerar" text för att berätta vad den ska vara)
Jämför med en tidningslayout: rubriker <h1>, stycken <p>, listor <ul><li>.
Som att ge instruktioner: "Detta ska vara en rubrik", "Detta ska vara fetstilt"

Visa källkoden:

Besök en webbsida (t.ex. SVT Play, YouTube, Google)
Högerklicka på en webbsida → "Visa sidkälla"
"Detta är den hemliga koden bakom webbsidan!"

3. Grundläggande HTML-struktur

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Min sida</title>
  </head>
  <body> 
    <h1>Hej världen!</h1>
    <p>Detta är min första sida.</p>
  </body>
</html>

"Se hur lite kod som krävs för att skapa en riktig webbsida!"
"Allt ni ser på internet börjar med kod som detta"

Viktiga taggar

<h1><h6>: Rubriker (storlek 1-6).
<p>: Stycke.
<ul>, <ol>, <li>: Punktlista.
<img src="bild.jpg" alt="Beskrivning">: Bild (ingen avslutande tagg!).
<a href="https://exempel.se">Länk</a>: Klickbar länk.
<b>: Fet text (<strong> rekommenderas dock oftare).

Regel om avslutande taggar:

Taggar som omsluter innehåll (t.ex. <p>...</p>) måste stängas.
Minnesregel: Om det finns innehåll mellan taggarna, måste de stängas.
"Tomma" taggar (t.ex. <img>) behöver inte </img>, men kan skrivas som <img />.

4. Extra taggar (om tid finns)

<table>: För tabeller (visa med <th>, <tr>, <td>).
<div>: "Låda" för att gruppera innehåll.
<span>: För att styla en del av texten.

Rekommenderade svenskspråkiga resurser

Training | Microsoft Learn:
Skapa webbsidor med HTML och CSS för nybörjare
W3Schools HTML:
Interaktiva övningar och enkla kodexempel
Internetstiftelsen:
Förklarar grunderna i hur internet fungerar

Skapa en enkel sida med:

En rubrik <h1>
Ett stycke <p> om deras favorithobby
En punktlista <ul> med tre saker de gillar
En bild <img> och en länk <a> till en favoritwebbplats

Sammanfattning och nästa steg

Vad eleverna har lärt sig idag:

Hur internet fungerar på grundläggande nivå
Vad HTML är och varför det behövs
Grundläggande sidstruktur
De viktigaste HTML-taggarna
Skillnaden mellan olika typer av taggar

Preview av nästa lektion:

CSS för att göra sidorna vackra
Mer avancerade HTML-taggar
Formulär för användarinput

Testa dig själv!

HTML Dag 1: Introduktion

1. Hur fungerar internet?

2. Vad är HTML?

3. Grundläggande HTML-struktur

Viktiga taggar

4. Extra taggar (om tid finns)

Rekommenderade svenskspråkiga resurser

Skapa en enkel sida med:

Sammanfattning och nästa steg