(X)HTML Del 7 - Koda rätt XHTML

Den här artikeln borde jag ha skrivit först i serien, men tyvärr tänkte jag inte så långt. Men bättre sent än aldrig brukar man säga, inte sant? =)

Inledningen av ett XHTML dokument

Jag har redan i Del 1 förklarat att man måste ange en DOCTYPE för att sidan ska kunna fungera korrekt. Jag gav ett exempel på DOCTYPE, men det finns totalt tre st.

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

DTD står för Document Type Declaration, och är en kodsnutt (se ovan) som berättar för webbläsaren vilken kod du använder på din webbsida.
Länken som du ser i DOCTYPE leder till W3C's egna riktlinje för denna DOCTYPE.

Vad innebär de olika DOCTYPE?

strict
Det innäbär att nästan all formatering sker med CSS och att man inte ska formatera med t.ex. HTML-kod. Alltså man ska inte använda sig av bland annat font eller bgcolor i dokumentet.
transitional
Jag brukar kalla denna type för den "slappa typen". Här är det tillåtet att använda sig av både CSS och HTML för formatering av webbsidan. Det är alltså ett mellanläge mellan det gamla och det nya (moderna).
frameset
Detta är precis som transitional, den enda skillnaden är att denna typ är anpassad för webbsidor med frames/ramar.

OBSERVERA!!!
Denna doctype ska du bara ha där du har koden för din frameset, inte på de andra sidorna. På de andra sidorna ska du använda strict eller transitional.

Koda rätt

Nu när du jobbar med XHTML så gäller det att koda rätt. Med det menas bl.a. att du ska stänga taggarna rätt, placera dem i rätt ordning och skriva dem på ett korrekt sätt.

» Nästling

Ibland vill vi ha både kursiv och fet stil på en text, då gäller det att öppna och stänga dem i rätt ordning.
Kom även ihåg att använda  istället för  för kursiv stil, och  istället för  för fet stil.

Fel: <em><p>Mitt första stycke</p></em>

Varför är detta fel? Jo, för att man kan inte ha ett kursivt stycke, det är ju konstigt eller hur? Du ska ha kursiv text i stycket. Då ska koden se ut så här:

Rätt: <p><em>Mitt första stycke</em></p>

» Små eller stora bokstäver

Det här är ett fel som många gör. I XHTML måste man koda i gemener (små bokstäver), och inte versaler (stora bokstäver).

Fel: <BODY></BODY>

Rätt: <body></body>

Allt måste stängas!

I "vanlig" HTML så behövde man inte stänga alla taggar, men det måste man göra i XHTML. T.ex. så måste vi stänga  med ,  med  och så vidare.

Det som är lite annorlunda i XHTML är att man måste även stänga tomma taggar som   och <img>.

Fel: Här kommer en radbrytning i HTML<br>
 Detta är en ny rad. I nästa rad kommer det en bild<br>
 <img src="bild.jpg" border="0">

Rätt: Här kommer en radbrytning i HTML<br />
 Detta är en ny rad. I nästa rad kommer det en bild<br />
 <img src="bild.jpg" border="0" alt="" />

Märk också att vi måste lägga till attributet alt="" på bilden i XHTML.

Detta gäller även listorna som i HTML inte behövdes stängas. I XHTML måste man stänga <li> med </li>.

Ange korrekta värden

I HTML kunde man ange ett värde till ett attribut direkt efter likamed-tecknet, ex:

Fel: <table width=300...

Nu måste man ange alla värden inom citationtecken, som nedan:

Rätt: <table width="300"...

Korrekta attribut

Jag tycker att HTML är "latspråk" eller "latversion", för där behövde man bara skriv som följande:

Fel: <hr noshade>

Men i XHTML får man inte förkorta attributen, allt ska vara korrekt!

Rätt: <hr noshade="noshade" />

Sist men inte minst

Om du har kodat i HTML förut så vet du kanske att man kunde döpa de olika objekten med hjälp av attributet name="", om inte så vet du det nu. Det attributet är inte så XHTML vänligt, inte helt iallafall.

name attributet tillåts i följande objekt

a
applet
frame
iframe
img
map

I alla andra fall ska man nu använda sig av id="" istället. Se exemplet nedan:

Fel: <img src="logo.gif" name="logotype" />

Rätt: <img src="logo.gif" id="logotype" />eller
 <img src="logo.gif" name="logotype" id="logotype" />

Så du får använda name fast inte självt, du måste ha id med i koden också.

Slutord

Nu har du fått lära dig hur man kodar i XHTML. Ta åt dig detta och lär in det, för det är mycket viktigt!

Skapades: 2007-07-09 11:18:06
Skribent: Shadi
Lästs 1174 gånger
Betyg: 0 (artikeln har endast 0 röster, det krävs minst 5 för ett betyg)

Kommentarer

Pettersoft sa den 18 januari 2008 kl 18:48:

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

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

Johan995 sa den 16 februari 2008 kl 13:51:

Jo, det ska det. Han skrev antagligen fel.