Lär dig HTML: 3 lektioner i att bygga en enkel hemsida
Postad: 15 december 2007 | HTML-guider | 20 CommentsLektion 2 – absolut nybörjare
I del 2 av HTML-skolan vidareutvecklar vi vår första hemsida index.htm. Nu ska vi lyfta fram den på nätet genom att infoga metamärken
Varför använder man metamärken?
Dessa märken används bland annat för att beskriva sidans innehåll, att ge webbläsarna information om själva hemsidan och att skapa ”nyckelord” så sökmotorerna ska kunna indexera sidan. Det finns två olika typer av metamärken. Först har vi de med attributen name och content: http-equiv” content=”content”>. Metamärkena ska placeras inom
Vi ska nu skriva in denna kod i head:
<meta http-equiv="content-type" content="text/html; charset="ISO-8859-1"/>Detta gör vi för att vi vill berätta för webbläsarna att vi använder ett språk som innehåller å – ä och ö. Vi använder content-type för att tala om vad för typ av bokstäver det är man använder, och det är charset som berättar detta. Tillägget ISO-8859-1 är koden (latin) som fungerar bäst för oss här i Västeuropa. Eftersom det språk som används ute på nätet är engelska måste vi därför ange detta i våra svenska hemsidor. I och med denna sista metadefinition har nu också index.htm tagit klivet från att att ha varit en tentativ valid sida till att bli en 100% korrekt valid sida enligt W3C:s normer.
<!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
<meta http-equiv="content-type" content="text/html; charset="ISO-8859-1"/>
</head>
<body>
<h1>Min hemsida</h1>
<p>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.</p>
</body></html>Vi fyller på med metamärken i head
<meta name="description" content="här emellan skriver du vad hemsidan innehåller"/>
<meta name="keywords" content="här emellan fyller du i dina nyckelord. Separera varje ord med ett komma"/><!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
<meta http-equiv="content-type" content=" text/html; charset="ISO-8859-1"/>
<meta name="description" content="innehåll"/>
<meta name="keywords" content="nyckelord"/>
</head>
<body>
<h1>Min hemsida</h1>
<p>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.</p>
</body></html>Det finns fler metamärken att använda – men jag har valt dessa tre för jag tycker att de är viktigast. Ok – så här långt har vi en index.htm som är valid html5 enligt W3C, och nu ska vi sätta lite färg på både länkar och text som bakgrund. Fast vi ska inte förstöra vår htmlkod genom att peta in css-koder i den utan vi ska länka till en extern stilmall istället. Jag har två baktankar med detta. För det första är det mycket praktiskt att ha en extern stilmall som sköter css-formateringen. Det innebär i klartext att det bara är i den som Ni ändrar om ni vill byta bakgrundsfärg, textfärg, länkar eller liknande. Tänk Er 25 sidor med css-kod på varje sida – vilket jobb det skulle ta. Nu ändrar Ni bara på ett ställe sedan så sköter denna stilmall resten.
För det andra så är det faktiskt så att html bygger sidan och css styr utseende. Html är alltså inte ett redskap för att göra ”luft” mellan rader, bokstäver eller bilder. Man ska inte heller ”kapsla” in en massa genomskinliga bilder i tabeller (eller liknande) för att styra utseendet. Allt detta är det css-mallen som ska ta hand om. Det är inte heller särskilt svårt när man väl lärt sig. Sist vill jag då också säga – sköter man sin hemsida efter denna modell så kommer man att ha en hemsida som följer webbstandard och det innebär bara fördelar.
Det går utmärkt att läsa mer om detta under länkarna xhtml och webbstandard.
Läs mer i lektion 3 om hur man kopplar stilmallen till sidan – samt hur man formaterar stilmallen.