Skillnader mellan HTML 4.0 och XHTML 1.0 - två lektioner

Lektion 1 - nybörjare

vad är xhtml? Okej - eftersom du nu läser detta har du säkert funderingar om att våga ta steget över till att prova xhtml. Hjälp kanske du tänker - det verkar ju så svårt…?

Mja, det är faktiskt förhållandevis små förändringar som behöver göras för att få sin sida XHTML-kompatibel.

Eftersom Du också valde att komma hit till mig så ska jag på bästa sätt lotsa dig fram på vägen. Jag lovar att när vi har gått igenom det du först behöver veta - det vill säga grunderna i xhtml - så kommer du med all säkerhet ruska på huvudet och tänka: var det inte svårare…

När vi ändå ska gå igenom detta så tycker jag att du öppnar upp exempelvis din index-sida så du tillsammans med mig på en gång kan ändra det som ska ändras. Det spelar med andra ord ingen roll om den är byggd med tabeller eller ej. Om du använder ramar så är det dokumentet som ligger länkat i din “main” - det vill säga den sidan du förmodligen har angett som startdokument i den ram all text ligger. Först granskar vi hur du hanterar din text och html-koder, därefter tränger vi lite djupare ned i kodningar som kan styras av css. Efter det skriver vi om koder och javascript om du har sådana. Sist ska vi se om din meta-definition är korrekt. I det ingår ett rätt gällande doctype. När vi är klara så ska vi slutligen testa att validera sidan för att se vilka mer korrigeringar som kan behövas.

Xhtml är byggd utifrån principen av en logisk semantik - det innebär att man systematiskt placerar sina koder efter ett visst mönster. Samma systematik måste du ha när du granskar dessa koder därför ett enda litet fel i t ex början av sidan kommer få validatorn att reagera på att du har fler fel än vad du i själva verket har. Därför är det viktigt att du lär dig hur du ska granska koden för att hitta eventuella fel. Detta kommer du att hjälpligt kunna klara av när vi är färdiga.

Eftersom du kan se det här som lektion 1 gör vi bara det mest grundläggande. Vartefter du sedan lär dig mer kommer du att ännu bättre kunna utveckla dina kunskaper. Har du ditt dokument öppet?
Börja med att kontrollera att det bara finns 1 head och 1 body-tagg i dokumentet. Leta dig sedan ned till första stycket som kommer omedelbart efter body-taggen. Stanna där.

man kan aldrig utelämna vare sig eller
<title></title>se till att det första märket i sidhuvudet är
alla attribut och märken ska skrivas med gemener (små bokstäver). Dock inte attributvärderna. Det ser ut så här <table width="100"> <tr> <td>dina tabeller</td> </tr> </table>

Tänk bara på att peta in kodsnutten summary=”" i varje ny tabell om du använder nästlade tabeller. Använder du tabeller? Lägg då till denna kodsnutt i varje ny befintlig tabellkod efter hur jag beskrev det här ovanför.

Hur du stylar dina tabeller kommer i senare lektioner, men i allmänhet bör man inte gör det rätt i html-koden. Antingen har du en extern stilmall som du länkar till sidan, eller så skriver du in dina css-värden direkt på sidan mellan attributen:

<style type="text/css"></style>

Till det absolut viktigaste på en hemsida!

Alla dokument måste ha en doctype deklaration - DTD. Det är nödvändigt för att en DTD talar om hur en webbsida är uppbyggd för webbläsaren och valideringsverktygen, samt vilka attribut och märken som då är tillåtna för den specifika sidan. Denna deklaration lägger man in innan html-märket - det ska med andra ord vara det som står allra överst på webbsidan.

Det finns tre olika definitioner. En strict, en transitional (övergång) och en för frames.

Eftersom vi här skapar en sida i xhtml 1.0 transitional så ska vi också infoga just det doctype på sidan. Din uppgift blir nu att, om du har en annat gällande doctype - eller inget doctype alls - infoga det här istället:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

Transitional (övergångsmässiga doctypes) används således vid “vanlig” xhtmlkodning, eller xhtml med viss html-inslag som exempelvis tabeller. Här kan du till viss del fortfarande använda de vanliga attributen i koderna men du måste naturligtvis göra dessa valida.

Använder du dig av ramar?
Öppna då vart och ett av dokumenten som innehåller själva ramen plus det dokument du arbetar med just nu och infoga detta doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd">

Alla xhtml-dokument måste också ha något som heter name space-deklaration. Enkelt uttryckt är det en sorts lista vilken talar om vad som är giltiga märken och attribut för dokumentet. Denna deklaration gör så att man kan lägga till nya märken och attribut om man behöver det. Själva name space-deklarationen brukar se ut så här och är din html-tagg:

<html xmlns="http://www.w3.org/1999/xhtml">

Denna deklaration skall sättas in omedelbart under själva doctype deklarationen och innan själva attributet på en sida som skrivs i xhtml.

Men det räcker inte bara med detta utan vi måste också infoga en till meta-tagg i för att berätta för webbläsarna att vi utgår från en västerländsk definition i våra dokument. I det här fallet att vi kommer att använda bokstäverna å - ä - ö. Koden för detta är denna:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Din sista uppgift blir då dels att infoga detta content type och dels att ta bort ditt “vanliga” head-attribut och sätta in namespace-deklarationen istället. Gör du inte detta utan behåller båda head-attributen kommer sidan inte att validera, den är inte heller korrekt kodad med tanke på att man aldrig får ha 2 stycken head-attribut i samma dokument.

Är du nyfiken på hur sidan validerar nu när du har ändrat i koderna? Testa den här. Lite skillnad - eller hur?

Pages: 1 2