HTML Grund

HTML-kod är uppbyggd av taggar som skrivs mellan tecknen < och >.

För det mesta förekommer både en start-tagg och en slut-tagg. En start-tagg kan också innehålla attribut som man ger ett värde.

Läs mer om det på föregående sida.

HTML-stommen

Html

Stommen i ett html-dokument börjar med att man talar om för webbläsaren att dokumentet är skrivet med HTML-kod.

Det görs med taggen <html>. Dokumentet avslutas med en slut-tagg</html> - vilket betyder att HTML-koden upphör.

Inom HTML-taggen delar man sedan upp sidan i två delar: head och body.

Så här:

<html>
<head></head>
<body></body>
</html>

Head

Head betyder huvud och allt mellan taggarna <head> och </head> tillhör sidans "dokumenthuvud".

Här placerar man en massa taggar som är osynliga för besökaren men som innehåller information till webbläsaren, webbservern och till sökmotorer. Det som skrivs här syns alltså inte på själva sidan.

Ett html-dokument får bara innehålla ett "dokumenthuvud" - ingen av taggarna <head> och </head> får förekomma mer än EN gång på varje sida!

Body

Body betyder kropp. Mellan <body> och </body> placeras det som kommer att synas på sidan. Här skrivs alla taggar som strukturerar sidas innehåll in.

Ett html-dokument får bara innehålla en "kropp" - ingen av taggarna <body> och </body> får förekomma mer än EN gång på varje sida!

Hela Stommen

Stommen i alla HTML-dokument ser alltså fortfarande ut så här:

<html>
<head></head>
<body></body>
</html>

Observera hur taggarna är skrivna. Det är viktigt att de börjar och slutar i rätt ordning! Allt står mellan <html> och </html> men head och body-taggarna bildar två separata delar.

Och glöm inte:
Ingen av ovanstående taggar får förekomma mer än EN gång på varje sida!

 Till Toppen 

Titel & Innehåll

Sidans Titel

I "dokumenthuvudet" - mellan <head> och </head> - placeras taggen som ger sidan dess titel / namn - vilket inte är samma sak som det filnamn man väljer när man sparar sidan.

Titeln skrivs mellan <title> och </title> och kommer att visas i namn-listen längst upp i webbläsaren.

Ett html-dokument ska naturligtvis bara ha en titel - ingen av title-taggarna får förekomma mer än EN gång på varje sida!

Eftersom titeln ska skrivas in i dokumenthuvudet ska den in mellan <head> och</head> - ingenting annat!

Så här:

<html>
<head>
<title>MIN WEBBSIDA</title>
</head>
<body>::</body>
</html>

Innehåll

En sidas innehåll varierar så klart - men den består av: Rubriker, text, bilder, länkar, listor, tabeller och sånt.

HTML-kod är ju uppbyggd av taggar och alla taggar som strukturerar sidans innehåll skrivs in mellan <body> och</body>. Allt som du ser på den här sidan är skrivet mellan "bodyns" start och slut-tagg!

Det är viktigt att man använder HTML's korrekta taggar för att strukturera innehållet på sidan och märker upp texten på ett logiskt sätt. Rubriker mellan rubrik-taggar, text-stycken mellan <p> och </p> o.s.v.

Hur det går till att skriva in själva innehållet får du läsa vidare om i de fotsatta guiderna. Men så här kan det se ut om innehållet är en rubrik och lite text:

<html>
<head>
<title>SIDANS TITEL</title>
</head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>

Observera igen hur taggarna är skrivna. Det är som sagt viktigt att de börjar och slutar i rätt ordning! Allt som ska synas på sidan skrivs mellan <body> och </body> rubrik-taggarna och p-taggarna som innehåller texten står var för sig mellan dessa.

 Till Toppen 

Doctype, Språk & Teckenuppsättning

Doctype

Överst i ett html-dokument ska det alltid infogas en s.k. DOCTYPE som upplyser webbläsaren om vilken standard sidan är kodad med.

Så kan det se ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SIDANS TITEL</title>
</head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>

Du kan läsa mer om olika doctyper på sidan Doctype & Validering.

Ange Språk

I taggen <html> bör man också ange på vilket språk sidan är skriven. Här ska vi skriva på svenska och då ser det ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<title>SIDANS TITEL</title>
</head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>

Här kan du hitta fler språkkoder - öppnas i nytt fönster!

Ange Teckenuppsättning

Man bör dessutom göra klart enligt vilken teckenuppsättning sidan ska tolkas. I Grekland eller Kina använder de ju liksom helt andra tecken än vad vi gör...

Den här informationen anges med en s.k. metatagg i sidans huvud - alltså mellan <head> och </head>.

För en sida skriven med vår teckenuppsättning (Latin 1 - Western Europe) ska det se ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>SIDANS TITEL</title>
</head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>
 Till Toppen 

Avslutningsvis

Har haft svårt att hänga med eller få till det? Backa till sidan HTML & CSS / Skapa en första sida. Där det beskrivs steg för steg hur man går till väga för absoluta nybörjare.

Detta alltså koden till enklast möjliga HTML-dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>SIDANS TITEL</title>
</head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>

Förhoppningsvis har du redan från början bestämt dig för att styra din webbsidas utseende med CSS i en extern stilmall. Då måste du också länka till stilmallen i sidans huvud.

Så här skulle det bli om stilmallen ligger i samma mapp som sidan och heter stilmall.css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>SIDANS TITEL</title>
<link rel="stylesheet" href="stilmall.css" type="text/css"> </head>
<body>
<h1>Rubrik</h1>
<p>Hejsan svejsan!</p>
</body>
</html>
 Till Toppen