0

XHTML – Jämförelse mellan HTML och XHTML

XHTML – Jämförelse mellan HTML och XHTML

Vad är XHTML?
Om du har kodat hemsidor förut har du använt dig av HTML. HTML har funnits i evigheter, och senaste och slutgiltigaste versionen av HTML var 4.01. Detta betyder att HTML inte längre uppdateras och att den har fått sig en uppföljare, XHTML. Se det som ASP som har fått sig uppföljaren ASP. NET det är samma sak, ett steg mot bättre, renare och effektivare kod. I och med HTML 4.01 så infördes även såkallade ”Doctypes”. Dessa kom till för att få en renare kod, och för att webbläsaren lättare skulle kunna avgöra vilken version av HTML sidan var kodad i. Med XHTML har kodspråket tagit ett till steg i rätt riktning mot ren och fin kod. Man använder såklart även här dessa doctypes för att de olika webbläsarna ska kunna avgöra vilken version och vilka taggar som ska tillåtas. För det finns nämligen olika regler för de olika doctypsen.  Denna:

Strict
Kod:

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

Denna är den rekommenderade vid skapande av helt nya sidor, detta för att få den absolute renaste och finaste koden, och koppla sidan till en såkallad CSS-mall (se min föregående artikel om det). Denna doctype är alltså den också som innehåller alla de nya förändringarna mellan vanlig HTML och XHTML.

Transitional
Kod:

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

Denna används om dina besökares webbläsare inte skulle klara av att läsa CSS mallarna, detta är dock väldigt ovanligt idag då de flesta sitter med nyare webbläsare. Denna doctype tillåter även vissa äldre HTML-taggar. Denna använder jag mig personligen mest av och självklart har den fullt stöd för CSS, det har alla dessa tre doctypes.

Frameset
Kod:

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

Om du fortfarande föredrar Frames framför nått annat så är det denna doctype du då ska använda dig av, då den tillåter frames taggarna och berättar för webbläsaren att du har frames på din sida.

Vart ska nu dessa vara i mitt XHTML dokument?
Dessa doctypes ska ligga absolut högst upp på din sida så att det är det första webbläsaren läser in, ligger den inte högst upp, ovanför html taggen till och med, kommer den inte att fungera heller. Om du har lagt in den nu så går vi vidare med att lära oss lite XHTML, vad skillnaderna är mellan XHTML och HTML och även hur du validerar din sida enligt W3Cs standard.

Med vanlig html så skriver man ofta taggar som Kod:

<br> <img src=”bild1.jpg”>

eller liknande. Detta göra att koden blir stökig och att den dessutom inte kommer att läsas lika i olika webbläsare. I XHTML är allting mycket striktare och ofta avslutar man taggar med / ta några exempel
Kod:

<br />
<img src=”bild1.jpg” width=”300” height=”300” alt=”Bild nr1” />
<p></p>

Som ni ser ovan så för att bildtaggen <img> ska validera enligt w3 standard så ska man skriva bredden, höjden och en alt tagg och avsluta med /. En till viktig sak är att man inte längre skriver med versaler, såsom <B>fet text</B> utan man endast använder sig av gemener nu. Jag ska nu genom att dela upp artikeln i lite smådelar visa hur de vanligaste nya taggarna ser ut vi kan börja med nått väldigt grundläggande:

Textformateringar:
När du tidigare skulle ha som ett enterslag i din text skrev du <br> med xhtml skirver man <br />

Altså Rätt
Kod:

<br />

Detta blir en radbrytning som är korrekt xhtml

Fel
Kod:

<br>

Detta blir också en radbrytning, men är inte korrekt xhtml

När du tidigare ville ha som två enterslag, eller en paragraf som det står för, så skrev du kanske <p>

Rätt
Kod:

<p>Din text här</p>

Med xhtml avslutar du <p> med </p>

Fel
Kod:

<p>Din text

Detta fungerar, men kommer nte att validera som xhtml, vilket det såklart ska.

Bildformatering:
Detta har jag redan tagit upp tidigare i artikeln, men är värt att repetera:

Rätt
Kod:

<img src=”bild1.jpg” width=”200” height=”200” alt=”Min bild” />

Fel
Kod:

<img src=”bild1.jpg”>

Positionering:
En ny viktig sak rörande positionering är att man inte längre med xhtml kan använda <center></center> utan istället en <div> eller <p align=”center”></p> eller sätter align på en bild eller liknande, t.ex.

Rätt
Kod:

<p align=”center”>Centrerad Text</p>
<div align=”center”>Centrerad Text</div>

Fel
Kod:

<center>Centrerad text</center>

Det fungerar även såklart med align=”left” och sådant också.

Formulär:
En sak du garanterat kommer använda om du jobbar med kodspråk som ASP eller PHP är såklart formulär, där gäller också principen att man ska stänga taggar efter sig, jag visar här med rätt och fel:

Rätt:
Kod:

<form method=”post” action=”post.asp” name=”formular”>
Ditt namn:<br />
<input type=”text” name=”namn” size=”20” /><br />
Din Email:<br />
<input type=”text” name=”email” size=”20” /><br />
<p><b>Klicka på skicka</b></p>
<input type=”submit” name=”knapp” value=”Skicka!” />
</form>

Fel:
Kod:

<FORM method=”post” action=”post.asp” name=”formular”>
Ditt namn:<br >
<input type=”text” name=”namn” size=”20” ><br >
Din Email:<br >
<input type=”text” name=”email” size=”20” /><br >
<b><p>Klicka på skicka</p></b>
<input type=”submit” name=”knapp” value=”Skicka!” >

Nu har jag gjort detta rätt och fel exemplet väldigt tydligt. Som jag pratat om tidigare stänger man taggar efter sig som jag gjort under ”Rätt” t.ex i <input> taggen så avslutar man den med ett / och viktigt är att man kommer ihåg att avsluta <form> med </form>. Sen visar jag även en till sak på ”fel”. Man kan inte skriva <b><p></p></b>. Varför? För det kommer i fel ordning, man sätter inte <b></b> runt en paragraf, utan man sätter den inne eller efter den istället, annars är inte koden valid XHTML.

Diverse mer:
En hr linje såg ut såhär i HTML Kod:

<hr>

Rätt i XHTML
Kod:

<hr />

Fel i XHTML:
Kod:

<hr>

Ja ni börjar se principen, många taggar ska avslutas med endera en tagg efteråt med / som <p></p> medans andra har / i en enda tagg såsom <br />.

Denna artikel är inte till för att folk som är helt ny med kodning ska lära sig koda i XHTML, en sån artikel kommer (eller finns redan) där jag lär er att från nybörjarnivå att ära er koda i XHTML, denna artikel är mer för er som känner till HTML men vill konvertera till det nyaste, och vill ha en bättre kod, en validerad kod. Att ni ska komma in lite i tänket om hur man kodar XHTML. Har ni frågor går det bra att kontakta mig via PM eller via webmaster@roosweb.se

Mvh Roosweb
Roosweb.se

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on TumblrEmail this to someone