Ik wil ook een site: XHTML
Monday 26 July 2004
Note: this article was published over 4 years ago. Techniques, tools or technologies described in this article could be outdated. Please help me by notifying me of any broken links you might encounter.
In deel 2 van de reeks “Ik wil ook een site” gaan we het hebben over het structureren van de inhoud van je site. Aan het eind van dit artikel weet je - hopelijk - waarom het belangrijk is om goed gestructureerde documenten op te stellen. Ook gaan we kijken welke code er nodig is om een simpele pagina te maken.
Artikelen in de series “Ik wil ook een site”
In deze series leer je de beginselen van het opzetten van een semantisch correcte site, met gebruik van XHTML en CSS.
- Introductie
- Xhtml
- Xhtml (vervolg)
- Css
Structuur
Het aanbrengen van structuur is erg belangrijk. Net als bij een boek behoort je internetpagina goed opgemaakt te zijn. Een goed gestructureerd site is niet alleen makkelijk te lezen, hij is ook snel te begrijpen voor bijvoorbeeld blinde mensen. Met behulp van screenreader wordt de pagina opgelezen, een goed gestructureerde pagina is beter te beluisteren. De gebruiker kan er bijvoorbeeld voor kiezen eerst alle koppen op te laten lezen, zodat relevante delen van de pagina snel gevonden kunnen worden. Als alle element juist zijn gestructureerd weet de gebruiker ook waar hij naar luistert.
Een goede structuur zorgt er ook voor dat je pagina zonder verdere opmaak duidelijk is. Dit is goed te zien als je de stylesheets van deze pagina uitschakelt, de grafische schil is verdwenen, maar de structuur van de pagina blijft hetzelfde. Klik weer op de link of refresh de pagina om de stylesheet weer in te laden.
Een pagina maken
Na alle theorie en wijze praat is het tijd voor een praktijkvoorbeeldje (eindelijk!). We beginnen met een skelet voor een pagina, de basis van waaruit je je pagina verder in gaat vullen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<title>Titel van de pagina</title>
</head>
<body>
inhoud van de pagina
</body>
</html>
Let op: De eerste twee regels behoren op één regel!
Bovenstaande code creeërt een pagina zoals te zien in voorbeeld 1. Zoals je ziet wordt de code tussen <title> en </title> weergegeven in de titelbalk van je browser. Code tussen <body> en </body> is de eigenlijke inhoud van de site.
Voorbeeld 1 stap voor stap
Laten we eens per regel kijken wat al die code nou precies doet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Deze regel geeft aan wat voor doctype (het soort document) we aan het opstellen zijn, in ons geval xhtml. Meer informatie over doctypes kun je vinden bij w3cschools.
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
Hier openen we de html tag, we vertellen de browser dat we een (x)html document aan het opstellen zijn. We geven de namespace aan (hier hoef je verder niks aan te veranderen, deze staat voorlopig vast). Tevens vermelden we dat we de Nederlandse taal gebruiken op deze pagina.
<head>
Hier openen we het head gedeelte van de pagina. Tussen <head> en </head> worden eigenschappen van de pagina aangegeven. Hier wordt bijvoorbeeld de titel beschreven, maar ook dingen als stylesheets en scripts worden hier aangegeven (meer over stylesheets in het volgende deel van deze reeks). Elementen in de head worden dus niet op de pagina zelf weergegeven.
<title>Titel van de pagina</title>
Hier openen we de title tag, geven we de titel aan en sluiten we de title tag.
</head>
<body>
Hier wordt het head gedeelte afgesloten en de body geopend. Tussen de <body> en </body> komt de inhoud van de pagina die de gebruiker gepresenteerd krijgt (in de meeste gevallen op een scherm, maar dit kan dus ook gelezen worden door een screenreader).
</body>
</html>
We sluiten de body en de html af, dit zijn altijd de laatste 2 regels van je pagina.
Tags
Zoals je merkt is het de bedoeling alle tags die je opent ook weer af te sluiten. De syntax voor het openen van een tag is: <tag attribuut=waarde>
Het afsluiten van een tag gaat als volgt: </tag>
Let op: Een paar tags hoeven niet afgesloten te worden, de syntax hiervoor is <tag attribuut=waarde />.
Nog maar het begin
Dit is natuurlijk nog maar het begin, in het volgende deel gaan we je pagina voorzien van een koppen, paragrafen, links, en een afbeelding.