Introduktion

I denna första lektion går vi igenom vad HTML är, hur det fungerar, vad det används till och hur syntaxen för språket ser ut.

Notera att dessa lektioner enbart går igenom hur HTML fungerar. Om du behöver hjälp med hur man skapar en HTML-fil kan du kolla in guiden Hur man skapar en hemsida.

Notera även att dessa lektioner ursprungligen är skrivna för HTML version 4, men inom kort kan man börja använda HTML version 5. Version 5 fungerar dock precis som version 4, den innehåller bara lite ytterligare saker (man kan mer eller mindre se det som en utökning av version 4), så du slänger inte bort din tid genom att följa dessa lektioner.

HTML står för HyperText Markup Language, och är alltså ett markeringsspråk - man märker ut vad som är vad i en text, till exempel rubriker och paragrafer. För att göra denna utmärkning omger man texten med olika taggar. Det finns cirka 80 olika taggar man kan använda, och om du vill kan du ta en titt på dem alla här. I de kommande lektionerna kommer du att få lära dig de vanligaste taggarna, men redan nu ska du få se ett exempel på hur man märker ut att en text är en paragraf (man använder taggen <p>, läs mer om den i kommande lektioner). Det som visas i den blå rutan under kod-rutan nedan är hur resultatet blir i webbläsaren.

HTML - HyperText Markup Language
<p>Detta är en paragraf.</p>

Detta är en paragraf.

Syntaxen för språket är alltså "<taggnamn>Texten som ska formateras efter taggen.</taggnamn>". Detta gäller för de flesta taggar, men det finns även taggar som inte avslutas med </taggnamn>, utan man skriver bara <taggnamn>. Du kommer att lära dig mer om de taggarna i senare lektioner.

En annan bra sak att veta är att man kan kommentera sin kod. Webbläsaren visar inte kommentarer på sidan, så besökaren märker inte av dessa. Syntaxen för kommentartaggen är lite speciell, nämligen följande: <!-- Kommentaren -->. Nedan följer ett exempel som visar att kommentarer inte visas av webbläsaren.

HTML - HyperText Markup Language
<p>Paragraf 1</p> <!-- Denna texten kommer inte att synas för besökaren. --> <p>Paragraf 2</p>

Paragraf 1

Paragraf 2

Taggar kan även ha attribut. Dessa attribut kan ändra en taggs egenskaper lite, och olika taggar har olika attribut. Syntaxen för attribut är följande (med taggen <p> som exempel):

HTML - HyperText Markup Language
<p attributetsNamn="attributetsVärde">Detta är en paragraf.</p>

En och samma tagg kan även ha flera olika attribut samtidigt, och det spelar ingen roll vilken ordning dessa kommer i.

HTML - HyperText Markup Language
<p class="paragraf" id="paragraf1">Detta är en paragraf.</p> <!-- Koden på första raden ovan kommer att resultera i samma som koden på sista raden nedan, trots att attributen inte står i samma ordning. --> <p id="paragraf1" class="paragraf">Detta är en paragraf.</p>

Bra att veta är även att webbläsarna ignorerar radbyten (entertryckningar), tabb-tecknet och upprepade mellanslag.

HTML - HyperText Markup Language
<p>Detta är en paragraf med lite mellanslag och radbrytningar.</p>

Detta är en paragraf med lite mellanslag och radbrytningar.

Om vi vill ha ett radbyte får vi ta till taggen <br> (läs mer om den i kommande lektioner).

Att webbläsarna ignorera detta möjliggör indentering av sin kod. Ta en titt på de två kodexemplen nedan. Bry dig inte om att det finns med en massa taggar du inte kan än. Den första kodbiten är inte indenterad, medan den andra är det.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> </head> <body> <p>En paragraf.</p> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min titel</title> </head> <body> <p>En paragraf.</p> </body> </html>

Koden ovan är visserligen inte så lång, så det blir inte så jättestor skillnad på den indenterade koden och den oindenterade, men oftast är HTML-sidor mycket längre än 10 rader, och att indentera den på ett sätt man själv tycker är bra kan underlätta väldigt mycket. Du bör alltså försöka efterlikna den undre kodbiten, och indentera din kod med tabbtangeneten eller ett visst antal mellanslag.

En regel som är viktig att följa är att taggarna ska stängas i rätt ordning. Kolla på kodexemplet nedan så förstår du nog vad som menas med det.

HTML - HyperText Markup Language
<!-- Detta är rätt, <b> öppnas före <i>, och därför måste </i> komma före </b>. --> <p>Detta <b><i>är en paragraf</i></b> som innehåller en del taggar.</p> <!-- Detta är fel, <i> ska stängas med </i> innan <b> stängs med </b>. --> <p>Detta <b><i>är en paragraf</b></i> som innehåller en del taggar.</p>

På den andra raden ovan kan man se att det är taggen <i> som ligger i taggen <b>, vilket man ska kunna avgöra om man har skrivit koden på rätt sätt. På den sista raden ovan kan man däremot inte avgöra om det är taggen <i> som ligger i taggen <b> eller vice versa, vilket medför att koden är fel skriven.

Du kan nu grunderna i HTML, och det enda du behöver lära dig nu är hur alla de olika taggarna fungerar och vad de används till. I de kommande lektionerna kommer du få lära dig hur de vanligaste taggarna i HTML fungerar.

Gå till nästa lektion, Grundtaggarna.