Een XHTML document maken

Als voorbode op de recente reklame boodschappen op de radio door Netwerk.be omtrend dat het tijdschrift gaat uitleggen hoe je een website moet maken (bouwen) en ik een flauw vermoeden heb dat ze zullen uitleggen hoe je een website moet maken met <td>, <tr> en andere ongeldige tags.

Ik weet het niet of dit het geval zal zijn, en zou het niet zo zijn zou ik zeer blij, maar toch wil ik eens opnieuw bij de basis beginnen hoe je nu een correcte, semantische website kan maken.

HTML ? XHTML?

Waarom nu een XHTML ?, als je wilt beginnen met websites maken moet je HTML kennen, HTML (hypertekst markup language) is niets anders dan bepalen via tags die aan de browser (Internet Explorer, FireFox of Opera) vertellen wat hij ermee moet doen.

Nu XHTML is niet verschillend van HTML, alleen is XHTML juister, bevrijd van alle ongeldige tags en toekomst gericht, dus als je nu begint met een website te maken, begin dan met XHTML te leren dan leer je op de juiste manier een website te maken.

Beginnen bij het begin

Vooraleer we gaan beginnen met de website gaan we bepalen welke soort XHTML we gaan schrijven, dat doen we door het doctype te bepalen.

Bij XHTML hebben we de keuze tussen 3 doctype’s: Strict Transitional en Frameset

< !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">

Als je zuiver code wilt hebben voor je website maak je het best gebruik van de Strict doctype terwijl de Transitional DTD bedoeld is voor browsers die niet zo goed overweg kunnen met CSS en je wenst gebruik te maken van de opmaak via XHTML.

Een doctype is niets anders dan aan een browser vertellen welke soort XHTML gebruikt wordt, en dus op welke manier de browser ermee moet omspringen of weergeven. Meer lezen over doctypes op W3.org

Nu beginnen we

De ‘root’ elementen

Dus onze eerste regel code voor de XHTML website is:

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

Daarna plaatsen we onze ‘root’ tag, <html>, deze moet een xmlns declaratie bevatten :

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml”>
… de rest komt hier …
</html>

t’Zit allemaal in het hoofd

In XHTML is het ook verplicht een <title> tag te hebben, en deze zit genest in een andere tag, de <head>, dus we gaan de code bijwerken:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welkom op mijn XHTML website</title>
</head>
… de rest komt hier …
</html>

De <head> bevat code die je niet zal zien op je website, hier komen allemaal zaken zoals de titel die in de browsers titelbalk getoond word, verwijzingen naar de style sheet ook wel CSS afgekort, en eventuele behavior code ook wel javascript of ecmascript genoemd, maar daarover later meer.

De body

Als de <head> wordt afgesloten begint de <body>, alles wat zich tussen <body></body> staat zal verschijnen in de browser. Dus we gaan onze code eens updaten:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welkom op mijn XHTML website</title>
</head>
<body>
… de rest komt hier …
</body>
</html>

Met <body> zeg je tegen de browser: vanaf hier komen tags die moeten verschijnen in het venster.

Nog even dit

Ik sprak over juistheid van XHTML, kort uitgelegd moet je je aan bepaalde regels houden:

Je moet tags correct nesten

<p><em>tekst</em></p>
<p><em>tekst</p></em>

Alle tags moeten worden afgesloten

<p>een paragraaf</p> <p>nog een paragraaf</p>
<p>een paragraaf <p>nog een paragraaf

Alle tags moeten klein worden geschreven

Dit is omdat XML hoofdlettergevoelig is, dus in plaats van <P> <STRONG>, schrijf je <p> <strong> etc…

Atribuut waardes moet tussen aanhalings tekens staan

<abbr title="een beschrijving">
<abbr title=een beschrijving>

Lege elementen moet je ook afsluiten

Men spreekt van lege elementen daar er elementen bestaan waarvan je maar één nodig hebt:

<br /> <hr /> <input />
<br> <hr> <input>

Let op de spatie tussen de laatste letter en /

Atributen moet volledig geschreven worden

<input type="checkbox" selected="selected" />
<input type="checkbox" selected />

Verder met de XHTML code

We gaan nu enkele titels en paragrafen toevoegen:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welkom op mijn XHTML website</title>
</head>
<body>
<h1>Toverstenen en tovenaars</h1>
<div>
<p>Hallo, welkom op mijn allereerste website over toverstenen en tovenaars</p>
<p>Op <a href=”#”>deze website</a> vind je nog meer informatie over toverstenen</p>
</div>
</body>
</html>

Ziezo, je XHTML website is af

Om te beginnen is dit voldoende, het is eigenlijk zo simpel als een lolly van een baby afpakken.
Volgende keer gaan we ons om de opmaak via CSS bekommeren.