Modul 1 · Kapitel 1.3

Din första HTML-sida

HTML beskriver sidans innehåll och struktur.

Mål

Efter kapitlet ska du kunna...

skapa ett komplett HTML-dokument
förklara vad head och body används till
skriva en HTML-kommentar
validera enkel HTML och rätta vanliga fel

HTML

Taggar ger innehållet betydelse

En HTML-fil består av text och taggar.

<h1>Min profilsida</h1>

Taggen h1 betyder att texten är sidans huvudrubrik.

<p>Det här är ett stycke.</p>

Taggen p betyder textstycke.

Hela dokumentet

Grundstruktur – del 1 av 2

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

Hela dokumentet

Grundstruktur – del 2 av 2

<body>
    <h1>Min profilsida</h1>
    <p>Här skriver jag en kort presentation av mig själv.</p>
</body>
</html>

Skriv hela dokumentet i filen index.html.

Resultat

Webbläsaren tolkar koden

Min profilsida

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

title visas i fliken. h1 och p visas på själva sidan.

Dokumentets ram

Tre viktiga rader

<!DOCTYPE html> anger modern HTML.
<html lang="sv"> startar dokumentet och anger svenska som huvudspråk.
</html> avslutar dokumentet.

Head

Information om sidan

head innehåller information som hjälper webbläsaren.

charset="UTF-8" gör att å, ä och ö fungerar.
viewport hjälper sidan fungera på mobilskärmar.
title bestämmer texten i webbläsarens flik.

Body

Det synliga innehållet

<body>
    <h1>Min profilsida</h1>
    <p>Här skriver jag om mig själv.</p>
</body>

Rubriker, text, bilder och länkar som ska synas placeras i body.

Head eller body?

Två olika uppgifter

`head`	`body`
Information om dokumentet.	Sidans synliga innehåll.
`meta` och `title`.	`h1`, `p`, bilder och länkar.

Live Server

Adressen visar en lokal sida

http://127.0.0.1:5500/index.html

127.0.0.1 är din egen dator.
5500 är porten som Live Server använder.
index.html är filen som visas.

Kommentarer

Anteckningar som inte visas

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

Kommentaren syns i koden men inte på webbsidan.

Använd kommentarer för att förklara varför något finns – inte för att upprepa självklar kod.

Validering

Webbläsaren kan dölja fel

En webbläsare försöker ofta visa sidan även när HTML-koden är felaktig.

Kör W3C Web Validator eller W3C:s webbaserade validator.
Rätta röda fel.
Läs och bedöm gula varningar.
Validera igen.

Vanligt fel

En sluttagg saknas

<p>Det här stycket saknar sluttagg

Fel: elementet avslutas inte.

<p>Det här stycket är komplett.</p>

Rätt: </p> avslutar stycket.

Kontrollfråga

Var ska rubriken ligga?

Ska en synlig h1-rubrik ligga i head eller body?

Tänk efter innan du går vidare.

Svar: i body, eftersom rubriken ska synas på sidan.

Prova själv

Ändra, testa och rätta

Byt texten i rubriken och stycket.
Lägg till en HTML-kommentar.
Ta bort en sluttagg med flit.
Kontrollera om validatorn hittar felet.
Rätta felet och validera igen.

Arbetssätt

Testa små steg

Skriv lite kod→Spara→Ladda om→Kontrollera

Små förändringar gör fel lättare att hitta.

Sammanfattning

Kom ihåg

HTML ger sidans innehåll struktur och betydelse.
head innehåller information om sidan.
body innehåller det som syns.
Kommentarer syns i koden men inte på sidan.
Validering hittar fel som webbläsaren kan dölja.