Grundtaggarna

I denna lektionen går vi igenom de taggar man alltid har med i en HTML-fil, nämligen <!doctype>, <html>, <head>, <title> och <body>.

Det första en HTML-fil ska göra är att tala om för webbläsaren vilken HTML-version den använder sig av. HTML har ganska många år på nacken, och med tiden kommer det nyare och nyare versioner. Dessa lektioner baseras på version HTML 4.01, som kom 1997, och den kom faktiskt i tre olika varianter: Strict, Transitional och Frameset. Alla tre har sina egna användningsområden, dock är det bara en av dem som är aktuell nu för tiden, och det är Strict, så det är den du kommer få lära dig här. För att ange att det är den versionen och varianten vår HTML-fil använder sig av tar vi till taggen <!doctype> på följande sätt:

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Den taggen är lite udda, men den används bara en gång per HTML-fil, och den är ingen man kan utantill, utan det är bara att kopiera och klistra in den i början på alla HTML-filer.

Nästa tagg som ska finnas i en HTML-fil är <html>. Den taggen anger vart sidan börjar och slutar, så all annan kod sidan består av ska finnas i den.

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- Här ska sidans innehåll vara --> </html>

En HTML-sida delar man upp i två olika sektioner: huvudet (head) och kroppen (body). I huvudet lägger man kod som inte ska visas på sidan (namnet på sidans skapare, Javascript-kod, CSS-kod, vilken teckentabell man använder med mera), och i kroppen lägger man kod som ska visas (bilder, länkar, texter, menyer med mera). För att dela upp sidan i dessa sektioner använder man sig av taggarna <head> och <body> på följande sätt:

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!-- Här lägger vi kod som inte ska synas på sidan --> </head> <body> <!-- Här lägger vi koden som ska visas på sidan --> </body> </html>

En tagg som måste finnas i <head> är <title>. Den anger vad sidan "heter" (den text vi placerar mellan starttaggen och sluttaggen är den text som visas på fliken i webbläsaren för besökaren).

HTML - HyperText Markup Language
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min egna sida</title> </head> <body> <!-- Här lägger vi koden som ska visas på sidan --> </body> </html>
[/code]

Nu har vi grunden klar för att bygga en hemsida, nu ska vi bara fylla ut sidan med en massa text och taggar att ha i <body>. I de kommande lektionerna kommer du få lära dig flera olika taggar du kan ha i <body>.

Här kommer ett exempel på hur en simpel hemsida kan se ut (taggarna <h1> och <p> visar rubriker respektive paragrafer (lär dig mer om dem i kommande lektioner)).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Min egna sida</title> </head> <body> <h1>Välkommen till min hemsida!</h1> <p>Detta är min egna hemsida som jag har gjort själv. Välkommen!</p> </body> </html>

Välkommen till min hemsida!

Detta är min egna hemsida som jag har gjort själv. Välkommen!

I den blå rutan ovan kan man inte se effekten av <title>-taggen på grund av att bara rubriken och paragrafen faktiskt står i den (vi har klippt bort allt annat). På denna hemsidan är redan taggarna <html>, <head>, <title> och <body> använda en gång, så vi kan inte visa dem i ett exempel i denna sidan. Men alla koder vi har på hemsidan som står i en kodruta med ett filnamn överst finns även uppladdade på hemsidan som en egen fil, så genom att öppna den filen kan man se effekten av enbart koden. Så klicka på länken "exempel.html" i kodrutan ovan så får du verkligen se effekten av just den kodbiten.

Gå till nästa lektion, Simpla taggar.