Grunderna i HTML

En hemsidas uppbyggnad

En hemsida består utav textfiler, skrivna i ren text. HTML är ett av många språk som används för att skapa hemsidor. Webbläsarens jobb är att översätta dessa språk och sedan visa den färdiga hemsidan för besökaren.

Precis som en människa så består HTML av kroppsdelar, den har ett huvud som tänker och en kropp att visa upp. För att kunna skriva in dessa kroppsdelar så börjar vi med att skapa en mapp på datorn för våran första hemsida. I våra exempel använder vi en Mac, men det ser ungefär likadant ut i Windows och Linux.

1 Skapa en ny mapp i datorn

2 Öppna texteditorn och skapa ett nytt dokument

3 Spara ner HTML-filen

Spara ner Ctrl / Cmd S det tomma dokumentet i din nya mapp, döp filen till index.html
Det är Index som besökaren först kommer att komma till när de besöker hemsidan, en startsida helt enkelt. Filändelsen i slutet av namnet berättar för webbläsaren att det är HTML som ska visas.

4 Öppna index.html i webbläsaren

Nu ska vi öppna hemsidan i webbläsaren för att se hur den ser ut.
Högerklicka på filen > Öppna med > Välj en valfri webbläsare

Bra gjort! Du har precis besökt din första hemsida

Den är lite tom just nu, men det beror på att vi inte har skrivit något i HTML-filen än.


Hur skriver man i HTML?

Vi ska nu öppna texteditorn igen och skriva in följande så kallat html-taggar.
Det är inom <html> som vi sedan ska placera våran html-uppbyggnad.

<html>

</html>

HTML 5

HTML finns däremot i flera olika versioner. Den senaste versionen heter HTML 5 och har ett annat sätt att börja uppbyggnaden på. Skriv därför följande rad längst upp i dokumentet.

<!doctype html>

<html>

</html>

Head och Body

<head> kommer vi senare att fylla med sådant som påverkar hemsidan globalt.
<body> är hemsidans kropp där vi ska placera allt innehåll (texter, bilder, objekt med mera).

<!doctype html>

<html>

  <head>
  </head>

  <body>
  </body>

</html>

Svenska tecken

Följande <meta> gör det möjligt för oss att skriva å, ä och ö på hemsidan.

<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
  </body>

</html>

Indrag när man skriver HTML

Som du märker så flyttar vi in texten två mellanslag för varje gång som vi går djupare in i en tagg. Det här gör man för att lättare se och organisera strukturen på texten, då det kan bli för många taggar att hålla reda på om allt ligger på samma rad.

Vanligtvis flyttar man in texten 2 eller 4 mellanslag, alternativt trycker man Tab på tangentbordet.

Tips: Med Sublime Text kan du markera flera rader och sedan trycka Tab

Tryck Shift Tab för att trycka in texten igen.

Title

<title> visar den text som syns i hemsidans flik på webbläsaren.

<!doctype html>

<html>

  <head>
    <meta charset="utf-8">
    <title>Matlagning</title>
  </head>

  <body>
  </body>

</html>

Kommentera i HTML

Om du vill skriva något i din HTML-fil som inte ska synas i webbläsaren, utan snarare finnas där som en anteckning, då behöver du kommentera ut det med följande taggar.

<!doctype html>

<html>

  <head>
    <meta charset="utf-8"> <!-- Svenska tecken -->
    <title>Matlagning</title> <!-- Titel för webbläsaren -->
  </head>

  <body>
    <!-- Hemsidans innehåll kommer ligga här -->
  </body>

</html>

Snyggt! Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus