XHTML Cursus

Hoofdstukken

1.Over XHTML

2.Tags in XHTML

3.Attributen in XHTML

4.Doctype in XHTML

5.HTML Omzetten naar XHTML

1.Over XHTML

XHTML betekent EXtensible HyperText Markup Language en het is de opvolger van HTML 4.01 . Je hebt al met HTML kennis kunnen maken in onze HTML Cursus.

XHTML zal uiteindelijk HTML gaan vervangen en daarom is het belangrijk om de pagina's die je vanaf nu gaat maken te schrijven in XHTML code en de oude pagina's die je al hebt gemaakt om te zetten naar geldig XHTML. Gelukkig lijkt XHTML erg veel op HTML en is het vrij eenvoudig om deze nieuwe markup language onder de knie te krijgen. Je moet XHTML vooral zien als een strengere en schonere versie van HTML.

Een ander belangrijk punt is dat XHTML een mix is tussen HTML en XML. XML betekent Extensible Markup Language. In de toekomst zullen we steeds meer een ontwikkeling zien die naar XML toebeweegt.

Voordelen van het gebruik van XHTML

Het eerste voordeel heb ik al genoemd. Aangezien het web in de toekomst steeds meer op XML gebaseerd zal zijn is de eenvoudigste manier om de overstap te maken om te beginnen je pagina's in geldige XHTML code te schrijven.

Het tweede voordeel van XHTML is dat XHTML een schone en logische code vereist. Hierdoor krijg je als het goed is compactere pagina's met minder fouten.

Een derde punt is dat XHTML ervoor zorgt dat webpagina's geschikter worden voor draadloze apparaten, slechtzienden/blinden en dat er minder problemen zullen zijn met de weergave in verschillende browsers.

Over deze XHTML Cursus

In deze XHTML cursus bespreek ik de regels die je moet volgen om geldige XHTML code te schrijven. Je zult zien dat deze regels vrij eenvoudig zijn. Je kunt deze cursus dus al goed volgen als je alleen basiskennis van HTML hebt. Ook bespreek ik een programma waarmee je eenvoudig je oude HTML code kunt omzetten naar geldige XHTML code.

Tijd om te Beginnen!

Je weet nu wat over de achtergrond van XHTML en waarom het belangrijk is om de overstap te maken van HTML naar XHTML. Je bent nu klaar om te beginnen met les 1 van de XHTML cursus.

2.Tags in XHTML

In de inleiding van deze cursus zei ik al dat XHTML een strengere taal is dan HTML. Er zijn een paar vereisten waaraan je tags moeten voldoen om hiervan geldige XHTML tags te maken. In gewoon HTML golden deze vereisten niet. Hieronder bespreek ik deze vereisten stuk voor stuk.

Lowercase

Dit is waarschijnlijk de grootste verandering die geldt voor XHTML code: alle tags moeten nu lowercase zijn, dat wil zeggen: in kleine letters. Standaard HTML was niet case-sensitive.

Dus fout is nu:

<Table>
<TABLE>
<TablE>

De enige, juiste manier om deze tag te schrijven in XHTML is:

<table>

Geneste Tags

Een ander belangrijke regel in XHTML is dat je de tags correct moet nesten.
Dit betekent dat je de tags in de juiste volgorde moet openen en sluiten.

Fout is dus:

<p><b><i>Tekst van de pagina.</b></i></p>

Waarom is dit nu fout? Omdat de tags niet in de juiste volgorde gesloten zijn.
De sluitingstag </i> had voor de </b> tag moeten staan.

De correcte code is dus als volgt:

<p><b><i>Tekst van de pagina.</i></b></p>

Alle Tags Sluiten!

Dit zal je waarschijnlijk het meeste werk opleveren bij het omzetten van oude HTML code naar XHTML. Je moet namelijk alle tags sluiten in XHTML! Natuurlijk moest je in HTML ook al een heleboel tags sluiten, zoals:

<a></a>
<b></b>
<table></table>

Maar er was ook een aantal tags dat niet gesloten hoefde te worden. De meest voorkomende tags van dit type waren:

<br>
<hr>
<img>

In XHTML moeten deze tags wel gesloten worden! Je kunt deze tags op twee manierensluiten.

De eerste manier zal je bekend voorkomen.
Je voegt gewoon een sluitingstag toe.
Dus:

<br></br>
<hr></hr>
<img></img>

Bij de tweede manier voeg je de sluitingstag toe aan de al bestaande tag. Dit doe je als volgt:

<br />
<hr />
<img />

Als je er eenmaal aan gewend bent is de tweede methode waarschijnlijk het prettigst om mee te werken.
Dit is ook de manier die aanbevolen wordt door het W3C.

Het zal je waarschijnlijk ook zijn opgevallen dat er in de code hierboven een spatie staat voor de / . Deze spatie is strict gezien niet nodig, dus <img/> zou ook correct zijn. Ik raad je echter wel aan de spatie telkens te gebruiken, omdat je XHTML code anders problemen zal opleveren voor bezoekers met een oudere browser.

De / plaats je voor het > teken. Een <img> tag zou er dus als volgt kunnen uitzien in XHTML:

<img src="plaatje.jpg" width="100" height="50" alt="Alternatieve tekst" />

Einde 

Dit is het einde van de eerste les. Je leerde hier de regels die gelden voor het maken van correcte XHTML tags. In de volgende les leer je de regels die gelden voor attributen in XHTML.

3.Attributen in XHTML

In de vorige les hebben we gezien welke regels er gelden voor de tags in XHTML. Nu gaan we kijken wat de regels zijn voor de attributen in XHTML. Als je onze HTML Cursus hebt gelezen dan weet je dat de attributen de extra delen zijn die aan een tag kunnen (en soms moeten) worden toegevoegd, bijvoorbeeld het href attribuut van de <a> tag.

Lowercase

Net als voor de tags in XHTML geldt voor de attributen dat ze lowercase moeten zijn, dus met kleine letters geschreven.

In HTML mocht je dit nog schrijven:

<a HREF="pagina.html">

In XHTML is dit fout en is de juiste wijze om deze code te schrijven:

<a href="pagina.html">

Quotes Gebruiken

In HTML mocht je bij numerieke waarden de quotes weglaten.
In XHTML mag dit niet meer. Alle waarden van attributen moeten nu tussen quotes staan.

In HTML kon je dit bijvoorbeeld gebruiken:

<img src="plaatje.gif" width=100 height=50 alt="Alternatieve tekst">

In XHTML moet je de volgende syntax gebruiken:

<img src="plaatje.gif" width="100" height="50" alt="Alternatieve tekst" />

Geen Attributen meer Minimaliseren!

In HTML was het gebruikelijk om bepaalde attributen te minimaliseren om zo minder code te hoeven typen.

Geminimaliseerde attributen konden er als volgt uitzien:

<option selected>
<frame noresize>
<input checked>

In XHTML is het niet langer toegestaan om deze geminimaliseerde vorm te gebruiken.
Je moet deze attributen nu voluit schrijven.

In XHTML is nu de correcte syntax:

<option selected="selected">
<frame noresize="noresize">
<input checked="checked">

Het id Attribuut in plaats van name

Dit is een grote verandering. In HTML gebruikte je soms voor de tags a, applet, frame, iframe, img en map het name attribuut.
In XHTML is dit name attribuut vervangen door het id attribuut.

Dus deze HTML code is verouderd:

<img src="plaatje.gif">

In XHTML moet je deze code hiervoor gebruiken:

<img src="plaatje.gif" />

Alleen is de bovenstaande XHTML code niet compatible met oudere browsers. Daarom is het verstandig om voorlopig zowel het id attribuut als het name attribuut te gebruiken.

Je krijgt nu dus de volgende code voor de img tag:

<img src="plaatje.gif" width="100" height="50" alt="Alternatieve tekst" />

Het target attribuut vervangen

In de strengste versie van XHTML, strict, mag niet langer gebruik gemaakt worden van het target attribuut voor hyperlinks. Veel webmasters gebruiken target om links in een nieuw venster te openen met <a href="https://www.link.nl/" target="_blank">. In XHTML script moet dit anders opgelost worden.

Een veel gebruikte oplossing is het gebruik van het rel attribuut. 

Als je gewoon het target attribuut wilt gebruiken dan kun je ook kiezen voor het minder strenge transitional doctype. Meer over doctypes lees je overigens in de volgende les.

Einde

Je hebt in deze les geleerd wat de regels zijn die gelden voor attributen in XHTML. In de volgende les zie je wat de minimum inhoud van een XHTML bestand is en besteed ik in het byzonder aandacht aan de vraag welke doctypes je kunt gebruiken in XHTML.

4.Doctype in XHTML

In XHTML is het verplicht om een Doctype te gebruiken. In HTML was het al wel een goed gebruik om de Doctype toe te voegen, maar het was nog geen verplichting.

De Doctype declaration komt altijd op de eerste regel te staan, dus nog voor de <html> tag. De Doctype wordt door browsers en validators (programma's die de code van een pagina controleren op fouten) gebruikt om na te gaan welke syntax voor het XHTML document gebruikt moet worden.
Er zijn drie verschillende Doctypes die je kunt gebruiken in XHTML.

Dat zijn:

• Strict
• Transitional
• en Frameset

Deze drie Doctypes worden hieronder kort besproken.

Strict

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

De bovenstaande code kun je zoals gezegd op de eerste regel van het bestand plaatsen. Deze Strict Doctype is vooral geschikt om te gebruiken wanneer je een hele schone code wilt hebben en je geen speciale mark-up tags gaat gebruiken. Deze Doctype wordt meestal gebruikt in combinatie met Cascading Style Sheets (CSS).

Transitional

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

De Transitional Doctype kun je gebruiken wanneer je gebruik wilt maken van tags waarmee je de presentatie van de pagina kunt regelen en wanneer je de pagina geschikt wilt maken voor browsers die geen style sheets ondersteunen.

Frameset

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

De Frameset Doctype dien je te gebruiken als je een pagina met frames hebt.

Overzicht verschillen Doctypes

Ik heb de drie Doctypes hierboven slechts kort besproken. Als je alle tags wilt zien die door de verschillende Doctypes wel en niet worden ondersteund, dan kan je even op deze link drukkenHTML Reference

In de tabel op deze pagina kan je in de laatste kolom precies zien welke Doctype wat ondersteunt. Zo kun je bijvoorbeeld zien dat in de Strict Doctype o.a. de <center> <font> en de <u> tags niet ondersteund worden. Als je deze tags dus per s� wel wilt gebruiken dan zul je voor de Transitional Doctype moeten kiezen.

De Structuur van een XHTML Bestand

Zoals je hierboven al gelezen hebt, begint je document met de Doctype. Daarna volgt de normale structuur, zoals je die ook al van HTML bestanden gewend bent. Een minimaal bestand zal er ongeveer zo uitzien:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titel van de pagina</title>
</head>
<body>
<p>Tekst van de eerste paragraaf.</p>
</body>
</html>

In het voorbeeld hierboven heb ik gekozen voor de Strict Doctype, maar je kunt natuurlijk ook voor de Transitional Doctype kiezen. Een Frames pagina is anders opgebouwd, maar daarvoor kun je dus de Frameset Doctype gebruiken.

Einde 

In deze les heb je gezien welke Doctypes er zijn en wat de verschillen tussen de drie zijn. Je weet nu ook dat het gebruik van een Doctype verplicht is in XHTML. De belangrijkste regels voor het maken van goede XHTML code zijn inmiddels behandeld.

In de volgende les bespreek ik een programma waarmee je HTML code automatisch kunt laten omzetten naar XHTML. Dit kan je een hoop tijd besparen bij het aanpassen van je oude HTML code. Ook zie je hoe je de XHTML code kunt controleren op fouten door een validator.

5.HTML omzetten naar XHTML

De makkelijkste manier om goede XHTML code te schrijven is om de code handmatig in te typen. Maar je hebt natuurlijk vaak ook nog een heleboel oude HTML bestanden die je al eerder had gemaakt. Het zou een heleboel tijd kunnen kosten om die bestanden allemaal handmatig om te zetten naar goede XHTML code.

Je moet eerst bekijken hoeveel werk het zou zijn om je oude HTML code handmatig aan te passen. Bekijk de vereisten die je in de vorige lessen hebt gelezen en ga dan na in hoeverre je oude HTML code hieraan voldoet.

Je zult in ieder geval de Doctype moeten toevoegen of veranderen en waarschijnlijk moet je een aantal tags aanpassen. Als het al met al een heleboel werk blijkt te zijn dan kan je het beste het programma HTML Tidy gaan gebruiken.

HTML Tidy

Met HTML Tidy kun je je bestaande HTML code omzetten naar geldig XHTML. Je kunt het programma downloaden en installeren, maar je kunt ook de online dienst van Tidygebruiken. Bij de online dienst vul je de URL in van de pagina die je wilt laten omzetten naar XHTML en Tidy doet de rest! Als je nu de broncode van de omgezette pagina bekijkt, dan zie je dat het nu XHTML geworden is. Je moet daarna wel de broncode kopi�ren en deze code gebruiken om de oude HTML code te vervangen.

Het is effici�nter om Tidy te downloaden en te installeren. Lees wel eerst goed de manual door voordat je begint. Lees vooral ook het artikel van A List Apart over HTML Tidy.

Als je liever niet met Tidy wilt werken, dan kun je ook de HTML editor HTML Kitdownloaden. In deze HTML editor zit namelijk HTML Tidy ge�ntegreerd, waardoor je relatief eenvoudig de code van oude pagina's kunt omzetten naar XHTML. Op deze pagina vind je nog wat meer informatie over hoe je dit met HTML Kit voor elkaar krijgt.

De Validator

Als je je pagina's hebt omgezet naar XHTML dan is het tijd om je code door de validator te halen. Deze validator van het W3C controleert je code op fouten. Bij "document type" selecteer je de Doctype die je op de pagina gebruikt hebt. De andere gegevens die je in moet vullen, wijzen zich eigenlijk vanzelf.

Als de validator klaar is dan krijg je een overzicht van de fouten die zijn geconstateerd. Nu is het alleen nog zaak om deze fouten nog even te corrigeren. Als je document eerder al goed in elkaar zat en je hebt vervolgens HTML Tidy gebruikt, dan zou het aantal foutmeldingen beperkt moeten zijn.

Als het document foutloos is dan zie je een felicitatie op het scherm verschijnen en de mededeling dat je een logo mag plaatsen om aan te geven dat je pagina correcte XHTML code gebruikt.

Einde Cursus

Met deze les is tevens een einde gekomen aan de XHTML cursus. Je hebt de verschillende regels gezien die gelden voor XHTML en je weet hoe je HTML code kunt omzetten naar XHTML. Ik hoop dat deze cursus je geholpen heeft bij het schrijven van een betere code voor je webpagina's.