Van HTML naar XHTML

XHTML 1 is een herformulering van HTML 4, maar met XML-ondersteuning. XHTML staat voor Extensible Hypertext Markup Language. Wanneer je van HTML naar XHTML wil overgaan, moet je enkele regels in acht nemen! Zowel een HTML- als XHTML-pagina hebben de extensie .htm of .html.

REGEL 1: een doctype kiezen

Er bestaan 3 versies:

·       XHTML 1.0 Strict: wanneer u 100% structurele websites wil maken zonder enige opmaak. Alle opmaak moet in CSS vastgelegd worden. Dit is de strengste vorm van XHTML.

·       XHTML 1.0 Transitional: wanneer u wil werken met de voordelen van XHTML, maar toch gebruik wil blijven maken van HTML. U kan CSS gebruiken, maar moet dit niet.

·       XHTML 1.0 Frameset: wanneer u frames gebruikt.

Een XHTML-pagina start altijd met het doctype. Hierin geef je weer welke versie je gebruikt.

Aangezien wij werken met XHTML 1.0 Transitional, zal onze webpagina steeds starten met onderstaande tag:

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

Hoe kan je in Dreamweaver ervoor zorgen dat je automatisch deze tag bekomt?

Kies voor FileNew. Onderaan rechts kan je de DocType instellen. Kies voor XHTML 1.0 Transitional.

 

REGEL 2: een XML-namespace aangeven

De tweede stap is nu dat we een juiste XML-namespace aangeven. Hierdoor gaan we later XML kunnen implementeren. We gaan onze basis <HTML>-tag uitbreiden naar <html xmlns="http://www.w3.org/1999/xhtml">.

Dit gebeurt echter automatisch als je de DocType daarnet instelde.

REGEL 3: een kleine letters gebruiken in tagnamen

De HTML-taal is niet casesensitive. Je kan kleine en hoofdletters gewoon door elkaar gebruiken.

Voorbeeld:

<HTML>, <html> of <Html> geeft telkens hetzelfde resultaat.

Bij XHTML moet je de tags altijd in kleine letters ingeven!

<a href=”home.html”>Home</a> is dus de enige juiste optie.

De code die we onderstreepten, is NIET hoofdlettergevoelig. Het betreft de waarde van een attribuut en de tekst waaraan HTML-code wordt gekoppeld.


REGEL 4: alle tags afsluiten

In HTML heb je tags zoals <br> (nieuwe regel), <hr> (lijn) en <img> (figuur) die niet afgesloten moeten worden.

In XHTML bestaat dit niet en moet elke tag verplicht afgesloten worden!

Voorbeelden:

·       Dit is het einde van een zin. <br></br>

·       <img src=”figuur.jpg”></img>

·       <hr align=”right” size=”3”><hr>

Hier kunnen oudere browsers echter voor problemen zorgen. Zij begrijpen sommige afsluittags namelijk niet en tonen stukken van een pagina op een verkeerde manier of zelfs helemaal niet. De oplossing hiervoor is de tag afsluiten met een /.

Voorbeelden:

·       Dit is het einde van een zin. <br />

·       <img src=”figuur.jpg” />

·       <hr align=”right” size=”3” />

Bij de andere tags zoals <p>, <font>, enz. verandert er niets.

REGEL 5: alle waarden van attributen tussen aanhalingstekens plaatsen

In HTML kan je nog de vrijheid nemen om attributen niet tussen aanhalingstekens te plaatsen.

Voorbeelden:

·       <img src=figuur.jpg>

·       <hr align=right size=3>

In XHTML is dit volledig uit den boze en moet je waarden tussen aanhalingstekens plaatsen!

Voorbeelden:

·       <img src=figuur.jpg” />

·       <hr align=right size=3” />

REGEL 6: alle attributen moeten een waarde hebben

Alle attributen moeten in XHTML een waarde hebben. In HTML heb je bijvoorbeeld enkele tags waar dit niet was.

Voorbeelden:

·       <hr align=right noshade>

·       <input type=”checkbox” checked>

Dit kan in XHTML helemaal niet. In XHTML ziet deze code er als volgt uit:

·       <hr align=right noshade=”noshade” />

·       <input type=”checkbox” checked=”checked” />

REGEL 7: afbeeldingen moeten een ALT-attribuut hebben

Ooit afgevraagd waarom Dreamweaver 8 ooit ineens begon met een vervelend kadertje te tonen wanneer je een figuur invoegde?

Dit was om je te verplichten een ALT-attribuut en zo een beschrijving aan een figuur te geven.

Je kan dit afzetten door te kiezen voor EditPreferences. Bij de categorieën, moet je kiezen voor Accesibility.

Indien je het venstertje niet wenst, telkens je een figuur invoegt, dan vink je de vinkjes uit. Indien je dit wel wenst (denk eraan bij XHTML is dit verplicht), dan laat je het best aanstaan, want het is verplicht om een beschrijving aan elke figuur te geven!

In code vind je het alt-attribuut als volgt terug:

·       <img src=figuur.jpg” alt=”dit is een beschrijving bij de figuur” />

REGEL 8: alle tags moeten correct genest zijn

Je moet tags altijd juist nesten. Dit was eigenlijk ook bij HTML al zo, maar je mag je nog permitteren om je te vergissen in HTML.

<i><b>Dit is fout</i></b>

<i><b>Dit is juist</b></i>

In het foute voorbeeld worden de tags <i> en <b> gekruist. Je moet altijd starten en eindigen met dezelfde tag!

REGEL 9: symbolen moeten gecodeerd worden

Je mag tekens als & en < niet zomaar in de code gebruiken. Je moet deze omzetten naar speciale codes.

Een overzicht:

©

&copy;

&

&amp;

<

&lt;

 

De validatie!

Heb je de website succesvol omgezet naar XHTML en daarbij netjes elke regel gevolgd? Test dan vlug uit of je pagina voldoet aan de normen.

Je kan op validator.w3.org je pagina inladen en zien of deze geldig is of niet.

Als je fouten maakte, krijg je deze melding:


Als je geen fouten maakte, krijg je deze melding:

Zo, we hebben nu een notie van XHTML. We kunnen starten met het leren van CSS.