Opbouw van HTML

Een korte handleiding over de opbouw van een XHTML-document.

Image Caption

-->

Tags

Alle content in XHMTL wordt in zogenaamde tags geplaatst. De schrijfwijze van deze paragraaf in xhtml is als volgt:

<p lang="nl-NL">
Alle content in XHMTL wordt in een zogenaamde tags geplaatst. De schrijfwijze van deze paragraaf in xhtml is als volgt:
</p>

Bij elk soort content hoort een bepaalde tag. In het bovenstaande voorbeeld is sprake van paragraaftekst en daarbij hoort de tag 'p'. Deze tags dienen altijd in onderkast geschreven te worden. Direct achter p ziet u, voorafgegaan van een spatie, een zogenaamd attribuut. Een attribuut is een stukje code dat iets zegt over de informatie, zeg maar de inhoud, van een tag. In dit geval betreft het het zogenaamde language-atribuut. Dit attribuut geeft de taal aan van de content die in de tag voorkomt. Andere attributen die gebruikt kunnen worden zouden invloed kunnen hebben op de grafische weergave van de inhoud van de tag of voegen scripts toe.

Wat verder nog opvalt aan deze code is dat het stukje content gevolgd wordt door '</p>'. Dit stukje code is de zogenaamde afsluiting van de tag. Het is een wet van Meden en Perzen dat elke tag in XHTML wordt afgesloten.

Enkele veelgebruikte tags zijn: <p> (paragraaftekst), <img> (afbeelding), <ul> (ongeordende opsomming), <table> (tabel), <h1> (hoog niveau kop), <h2> (lager nivieau kop), <div> (divisie, grove onderverdeling van delen content) en <a> (koppeling).

Head

In het hoofdstuk Anatomie van een (web)document werd uitgelegd dat een XHTML-document is opgesplitst in een head en een body. Het headgedeelte bevat informatie die niet bedoeld is voor de gebruiker, maar die een webbrowser nodig heeft om de pagina juist weer te kunnen geven. De belangrijkste en meest voorkomende onderdelen van het headgedeelte zal ik hieronder kort behandelen.

Meta

Eén van de meest belangrijke elementen die we in de metadata-sectie plaatsten is de karaktersetgegevensdeclaratie van de inhoud van het document. Een karakterset is een tabel met codes en bijbehorende letters en/of karakters. Stel dat u voor uw teksten gebruik wilt maken van een karakterset die uitsluitend (post) Latijnse tekens bevat, dan geeft u dat op deze plaats aan. De webbrowser weet dan hoe hij dit dient weer te geven.

Er staat een keur aan tekensets tot uw beschikking, die elk hun eigen bestaansgeschiedenis kennen. Enkele willekeurige voorbeelden hiervan zijn:

  • iso-8859-1 (Uitsluitend geschikt voor veel westerse talen, waaronder met name Engels)
  • iso-8859-5 (Cyrillisch)
  • big5 (Chinees, traditioneel)
  • windows-950 (Chinees, traditioneel)
  • shift_jis (Japans)
  • iso-8859-8 (Hebreeuws)
  • iso-8859-3 (Maltees)
  • iso-8859-6 (Arabisch)
  • utf-8 (Alle stelsels)
  • utf-16 (Alle stelsels)

Bovenstaande lijst is bijlange na niet compleet. Vanwege historische redenen is voor veel alfabet en karakterstelsel in de loop der tijd minimaal één codetabel ontstaan. Sommige tekensets, zoals Arabisch, hebben er wel vier, die eigenlijk allemaal hetzelfde proberen te doen. Voor de liefhebber stelt iana.org een complete lijst van alle bestaande sets ter beschikking.

Het zou verder gaan dan het bereik van dit schrijven om uitgebreid over de geschiedenis en werking van textcoderingen uit te weiden, daarom mijn dogma: gebruik uitsluitend UTF-8. UTF-8 is een codetabel uit de zogenaamde unicode familie. Unicode voorziet in een standaardcodering die alle bestaande tekensets — including Klingon — dekt, plus ruimte voor toekomstige tekensets. Dit klinkt misschien ideaal… en dat is het ook. U kunt meer over tekstcodering in het algemeen en unicode in het bijzonder te weten komen op joelonsoftware.com.

De schrijfwijze van de karaktersetdeclaratie is als volgt:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Waarbij utf-8 in dit geval uiteraard de tekenset aanduidt. De karaktersetdeclaratie wordt dus als attribuut van de meta-tag toegepast.

Een XHTML document is een volwaardig lid van de XML-familie. Derhalve zien de twee allereerste regels van een XHTML-document er meestal als volgt uit:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Op de eerste regel staat de gebruikte XML-versie gedeclareerd, alsmede de karakterset waarin het document zelf gecodeerd is. Ook hier verdient het gebruik van UTF-8 de aanbeveling. Op de tweede regel staat vermeld welke XHTML-versie gebruikt is voor het document. We noemen dit de documenttypedeclaratie en is misschien wel één van de belangrijkste regels van het HTML-document, omdat de browser alleen hierdoor exact weet op welke manier de code geïnterpreteerd dient te worden.

Onderstaande afbeelding illustreert hoe de code van een eenvoudige XHTML-pagina er uit zou kunnen zien. Klik op de afbeelding om de ontstane pagina te bekijken in uw browser.

The image below illustrates what the code of a simple XHTML page may look like. Click on the image to render the obtained page in your browser.

The structure of xhtml

Het is u wellicht opgevallen dat de browser automatisch ruimte creëert tussen de twee paragrafen tekst en de kop van de pagina iets groter is en vet. Dit komt, doordat de browser, zelfs zonder extra opmaakcode, al weet wat te doen met zaken als paragrafen en koppen, maar ook met lijsten, tabellen, etc.

Ook het xmlns-attribuut op de html-tag zal u niet ontgaan zijn. Dit is een verplicht onderdeel van een XHTML-document en een verwijzing naar een bestand op Internet waarin omschreven staat aan welke regels het document moet voldoen.

Nu u in staat bent een correct XHTML-document samen te stellen bent u klaar voor het verfraaien van deze pagina met behulp van Cascading Style Sheets, oftwel: 'CSS'.

Now your are capable of assembling an XHTML document, u are ready to embellish this page using Cascading Style Sheets, or just: 'CSS'.

t