En bra grund att stå på

Äntligen dags att sätta igång! Börja med att öppna din kodeditor och skapa en ny fil som du döper till index.html och spara den på ditt skrivbord.

För att kunna följa hur din hemsida ser ut under arbetets gång, högerklicka på din fil och klicka sedan på ”Öppna med” och välj din webbläsare. Nu visas din hemsida i webbläsaren och du kan återgå till din kodeditor.

Låt oss börja koda!

Vi börjar med att berätta för webbläsaren att dokumentet den just håller på att läsa in är ett ”HTML 5”-dokument. Detta gör vi genom att specificera en doctype överst i vårt dokument.

<!doctype html>

<html>

Vi startar sedan vårt HTML-dokument genom att lägga till en <html>-tagg och som vi sedan stänger genom att lägga till en </html>-tagg på nästa rad. Ingenting får placeras utanför dessa taggar, det är här vårt dokument börjar och slutar.

<!doctype html>
<html>

</html>

<head>

Nu ”öppnar” vi och ”stänger” en <head> </head>-tagg inom våra <html> </html>-taggar. När man kodar HTML brukar man förtydliga att en tagg ligger inuti en annan tagg genom att ”tabba” in denna ett steg genom att trycka på tabb-tangenten en gång. På så vis blir det även lättare för ögat att snabbt se hierarkin bland de olika html-elementen. Inom <head>-taggarna brukar man placera metadata och inläsning av stilmallar (CSS) och JavaScript.

<!doctype html>
<html>
  <head>

  </head>
</html>

<title>

Nästa steg är att lägga till en titel på vår hemsida. Denna kommer att visas längst upp på fliken i webbläsaren och som titel i sökresultatet hos t ex Google. Detta gör vi genom att tabba in ett steg inom <head> och öppna/stänga en <title> </title>-tagg. Vi fyller i vår titel genom att skriva vår text inom dessa taggar. Spara din fil och återgå till webbläsaren. Ladda om sidan för att se de senaste ändringarna. Notera att din titel nu syns uppe i fliken på din webbläsare.

<!doctype html>
<html>
  <head>
    <title>Hej världen!</title>
  </head>
</html>

<body>

I din kodeditor har det blivit dags att lägga till <body>-taggen, inom denna tagg placeras alla HTML-element som ska visas på din hemsida. Glöm inte att stänga </body>-taggen. Eftersom <body>-taggen är en nivå innanför <html>-taggen, precis som <head>-taggen, så tabbar vi in <body> med ett tryck på tabb-tangenten för att förtydliga hierarkin. Inom <body> kan vi nu fylla på med vårt innehåll, glöm inte att tabba in allt vi lägger till inom <body> ytterligare en nivå för att göra det hela läsbart och tydligt att dessa är inuti <body>.

<!doctype html>
<html>
  <head>
    <title>Hej världen!</title>
  </head>
  <body>
    Hej världen!
  </body>
</html>

Dags för några förbättringar…

Språk och specialtecken

Dags att berätta för webbläsaren OCH användaren, vilket språk som denna hemsidas innehåll är skrivet på. Detta gör vi enkelt genom att sätta ett lang-attribut på vår <html>-tagg, enligt följande: <html lang="sv-SE">, eftersom vi skriver på svenska i detta fallet.

För att vara säkra på att alla tecken visas som de ska, förtydligar vi även för webbläsaren att detta HTML-dokument är kodat enligt UTF-8 och är något av en branschstandard för att vara säker på att tecken som t ex Å, Ä och Ö, visas som de ska. Eftersom detta är en <meta>-tagg, så ska denna ligga inom <head> </head>. Det finns många olika <meta>-taggar man kan sätta, men i detta fallet anger vi <meta charset="UTF-8" />. Notera att denna tagg stänger sig själv, så kallat ”self-closing tag” eller ”void element”. Denna typen av html-taggar kan INTE ha några taggar inuti sig, utan endast olika attribut. Nu ska ditt html-dokument se ut enligt nedan:

<!doctype html>
<html lang="sv-SE">
  <head>
    <meta charset="UTF-8" />
    <title>Hej världen!</title>
  </head>
  <body>
    Hej världen!
  </body>
</html>

I nästa kapitel är det dags att fylla på med innehåll i vår <body>-tagg.