XHTML Tutorial

door **TzDesigns** » 25-01-2010

Beste lid van designersforum,

In deze tutorial zul je leren hoe jij je website xhtml valid gaat maken.
hopelijk hebben jullie wat aan de tutorial en ik hoop ook dat je er wat wijzer van word.

Wat is XHTML?
Dit is een iets strengere codering dan de huidige codering HTML.
XHTML betekent EXtensible HyperText Markup Language en is een opvolger van HTML 4.01.

Voordelen van XHTML?
- Een 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.

- Je webpagina is beter te zien in andere besturingen.

Om te beginnen!
Alle tags moeten nu lowercase zijn, dat wil zeggen: in kleine letters. Standaard HTML was niet case-sensitive.
Gebruik altijd dus kleine html tags dus zonder hoofdletters, zo dus:

[php]
<table cellpadding="2" cellspaing="1">
[/php]

en dus absoluut niet als het volgende:

[php]
<Table>
<TABLE>
<TabLe>
[/php]

Volgorde en netheid!
Let altijd op bij het openen en afsluiten van een html code dat je het in de goed volgorde afsluit.
zie hieronder voor een voorbeeld:

[php]
<b><i><u>Deze tekst word goed afgesloten achteraan</u></li></b>
[/php]

En zie hieronder voor de verkeerde afsluiting, let dus goed op de html tags:

[php]
<b><i><u>Deze tekst word NIET goed afgesloten achteraan</i></u></b>
[/php]

Andere tags afsluitingen!
In de oude html hoefde je eerst niet de html tags af te sluiten dat moet bij XHTML wel.
zie hieronder voor de oude html tags:

[php]
<br>
<hr>
<img>
[/php]

Die moeten nu het volgende worden voor als XHTML:

[php]
<br />
<hr />
<img />
[/php]

Ook moeten META tags en andere tags die in de <head> staan anders worden afgesloten.
Deze moeten ook met de spatie / achteraan afgesloten zie hieronder een voorbeeld:

[php]
<meta name="description" content="beschrijving van je website" />
<meta name="keywords" content="kleine zoekwoorden voor de zoekmachines zoals google om je site hoog in de zoekmachine te zetten" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="uwcssfile.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS titel" href="rssbestandnaam.xml" />
[/php]

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.

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
- Frameset

Deze drie Doctypes worden hieronder kort besproken.

Strict

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

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

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

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

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

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

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. (zonder spatie.. vanwege bug in de forum zit er een spatie in)
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:

[php]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://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>[/php]

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.

Dit was mijn Tutorial hopelijk zijn jullie hier wat wijzer van geworden.

Tom Zwiep
TzDesigns.nl

door **remco** » 31-01-2010

Nice tut!

Ga zo door,
Miss volgende onderwerp basen ?

XHTML Tutorial

XHTML Tutorial

RE: XHTML Tutorial

Wie is er online?

Wie is er online?