Modul 1

Kap 1.3 - Din första HTML-sida

HTML beskriver sidans innehåll och struktur. Webbläsaren tolkar koden och bygger upp sidan.

Mål

  • Skapa ett komplett HTML-dokument.
  • Förstå vad head och body används till.
  • Validera enkel HTML och rätta vanliga fel.

Grundstruktur

En HTML-sida består av text med taggar. Taggarna berättar för webbläsaren vad olika delar betyder. Skriv detta i index.html:

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min profilsida</title>
</head>
<body>
    <h1>Min profilsida</h1>
    <p>Här skriver jag en kort presentation av mig själv.</p>
</body>
</html>

Så kan det se ut i webbläsaren

Min profilsida
http://127.0.0.1:5500/index.html

Min profilsida

Här skriver jag en kort presentation av mig själv.

I adressraden står http://127.0.0.1:5500/index.html. Det betyder att sidan visas från din egen dator med Live Server. 127.0.0.1 betyder den här datorn, 5500 är porten Live Server använder och index.html är filen som webbläsaren visar.

Vad delarna gör

  • <!DOCTYPE html> säger att sidan ska tolkas som modern HTML.
  • <html lang="sv"> anger att sidans huvudspråk är svenska.
  • <meta charset="UTF-8"> gör att tecken som å, ä och ö fungerar.
  • <meta name="viewport"> hjälper sidan fungera på mobilskärmar.
  • <title> visas i webbläsarens flik.
  • <body> innehåller det som syns i webbläsarfönstret.

Kommentarer

Kommentarer syns i koden men inte på sidan. De kan hjälpa dig minnas varför du skrev något.

<!-- Här börjar sidans huvudinnehåll -->

Validera kod

Webbläsare försöker ofta visa även felaktig HTML. Därför behöver du validera. Använd ett valideringstillägg i VS Code eller W3C:s validator. Röda fel ska rättas. Gula varningar behöver du läsa och bedöma.

Prova själv

  1. Byt texten i rubriken och stycket.
  2. Lägg till en HTML-kommentar.
  3. Ta bort en sluttagg med flit och se om validatorn hittar felet.
  4. Rätta felet igen.

Sammanfattning

  • HTML ger sidan struktur och betydelse.
  • head innehåller information om sidan.
  • body innehåller det synliga innehållet.
  • Validering hjälper dig hitta fel som webbläsaren kan dölja.