Hoofdstuk 1: Basisbegrippen in XHTML
Alle websites bestonden vroeger uit HTML. Het W3C, de organisatie die standaarden creëert voor het web, heeft enkele jaren terug een nieuwe standaard ontwikkeld: XHTML. De belangrijkste voordelen van deze standaard zijn de compacte code en de structuur. Verderop komt dit uitvoerig aan bod.
Een XHTML pagina staat in de praktijk niet op zichzelf en wordt omringd door andere structuren. Hieronder een eenvoudige schematische voorstelling.
De twee meest elementaire elementen zijn XHTML en CSS (Cascading Style Sheets). XHTML is de afkorting van Extensible HyperText Markup Language. Met deze taal bouwen we de structuur van onze pagina. Deze pagina bevat ook de eigenlijke tekst van onze webpagina.
Met CSS (Cascading Style Sheets) voegen we opmaak elementen toe aan de webpagina. Als we hierin wijzigingen aanbrengen verandert onmiddellijk het uitzicht van onze website.
Met de bouwelementen XHTML en CSS creëren we een statische website. Om een site interactief te maken voegen we er interactieve elementen aan toe. Dit doen we door gebruik te maken van webapplicaties (toepassingen voor het web). Deze webapplicaties zijn programma's geschreven in een taal geschikt voor het web.
In dit werk leren we niet hoe we applicaties bouwen. We zullen wel leren om een nieuwskanaal, wat in combinatie met een nieuwslezer een interactief onderdeel vormt, te ontwerpen.
1. Waarom XHTML?
We gebruiken XHTML (eXtensible HyperText Markup Language) omdat we in deze markuptaal ons document op een goede manier kunnen structureren. Bovendien is het in deze taal noodzakelijk om de inhoud en de opmaak van elkaar te scheiden. We kunnen de opmaak elementen niet meer in een document opnemen zoals we deden bij HTML. Dit kan op het eerste zicht een nadeel lijken maar eigenlijk biedt het belangrijke voordelen.
Doordat de opmaak in een CSS (Cascading Style Sheets) zit, kunnen we deze later gemakkelijk veranderen. Indien we dit wensen kunnen we aan de hand van 1 of 2 CSS bestanden een volledige site vormgeven. Door te werken met afzonderlijke CSS bestanden dienen we veel minder code te schrijven wat zowel voor de webdesigner als voor de ontwikkelaar tijdwinst oplevert. We gaan ervan uit dat de webdesigner zich ook met de code van het statische gedeelte van de website inlaat. Anderzijds hebben de browsers veel minder werk om al deze code te lezen. Natuurlijk gaat ook de datatransmissie over internet veel sneller. U hebt waarschijnlijk al begrepen dat dit een belangrijke stap voorwaarts is voor de internetgebruiker.
We zullen meerdere XHTML pagina's moeten ontwerpen voordat we kunnen spreken van een website. Bovendien zullen we deze pagina's met elkaar verbinden via hyperlinks.
2. Opbouw XHTML
Elke webpagina starten we bovenaan met <HTML> en eindigt met </HTML>. U zult zien dat we steeds instructies plaatsen tussen < en > . Het geheel heten we een tag. Hier gaat het over de tag <HTML>. Dit is een open tag, daar deze tag aanduidt dat we hier starten met HTML en de tag </HTML> is een sluittag daar we hiermee de HTML sluiten. Het sluiten van een tag herken je aan de slash (/).
We gebruiken in iedere webpagina tevens de 2 belangrijke componenten: head en body. De volledige rudimentaire structuur van elke webpagina ziet u op afbeelding 1.
Concreet begint de head met de tag <head> en eindigt met de tag </head> De tag </head> is een sluittag. We herkennen het sluiten van deze tag aan de slash.
De body begint met de tag <body> en eindigt met de tag </body>. De tag </body> is een sluittag.
Boven de head en de body dienen we het type document (doctype) in te geven. We zien hierover later meer. Tevens zullen we moeten kiezen tussen het werken met - of zonder frames. Er wordt soms beweerd dat frames een nadeel zijn voor de ranking bij zoekmachines. Dit is echter overdreven.
Afbeelding 1: Ruwbouw van een XHTML pagina.
Momenteel zijn er verschillende webeditoren op de markt zoals Dreamweaver, Frontpage, ... U hebt geen webeditor nodig als u zelf de code typt. Dit betekent dat u een legale webpagina kunt maken zonder aanschaf van een webeditor, waardoor u wat kosten bespaart. U kunt gewoon uw kladblok gebruiken en zelf de code intypen. In het begin gaat dit wat traag maar oefening baart kunst. Bovendien kan je veelvuldig gebruik maken van kopiëren en plakken. Daar de structuur bij XHTML veel belangrijker is dan bij HTML is de code bovendien zeer compact in vergelijking met HTML. De opmaak plaatsen we in een CSS (Cascading Style Sheets) bestand. Maar hierover later meer.
3. Wat plaatsen we nu in de head?
Hier is ruimte om uw metatags in de plaatsen. Velen onder u weten al wat metatags zijn en we frissen dit even op. Metatags bevatten metadata (gegevens over gegevens) en worden gebruikt om webpagina's te indexeren. De inhoud noch de metatag wordt getoond in de webbrowser (IE, Firefox, Opera, e.a.) maar wel gelezen door zoekrobotten, die deze gegevens gebruiken om hun indexen mee samen te stellen. Deze zoekmachines zijn nu wel zo gesofisticeerd dat ze snel ontdekken wanneer deze informatie niet of slechts voor een klein deel overeenstemt met de eigenlijke inhoud van de website.
Metatags beïnvloeden in belangrijke mate de zoekresultaten van de webcrawler. De metatags dienen dus treffend en toch voldoende uitgebreid weer te geven waarover de site of de betreffende pagina gaat. Het gebruik van meta-tags is niet verplicht maar wordt wel aanbevolen. Hieronder lichten we de belangrijkste meta-tags toe.
<meta name=''description'' content='' '' /> Tussen het aanhalingstekens na content plaatsen we een beschrijving. We vatten samen waarover de pagina gaat of waarover de volledige site gaat als het een frame pagina betreft of uw homepagina. (Zie afbeelding 2)
<meta name=''keywords'' content='' '' /> Tussen de dubbele aanhalingstekens na content plaatsen we de trefwoorden (vb. <meta name="keywords" content="XHTML, CSS, boek, webdesign" /> ).
<meta name=''dc.title'' content='' '' /> Tussen de dubbele aanghalingstekens na content plaatsen we de titel van de betreffende pagina of van de gehele website als het een framepagina betreft of een home pagina (vb. <meta name="dc.title" content="Boek over XHTML, CSS voor de webdesigner" /> ).
Waarschijnlijk hebt u gezien dat we overal op het einde van de meta-tag eindigen met /> Deze slash (/) is de sluittag en we zijn verplicht ze te gebruiken bij XHTML. Bij XHTML dienen ALLE tags gesloten te worden, dus ook <br /> i.p.v. <br> bij HTML. Met <br /> gaan we naar een nieuwe regel zonder witruimte te laten. (Voor en na een alinea hebben we wél witruimte.)
Er doen geruchten de ronde als zou Google geen rekening meer houden met deze meta-tags. Dat is je reinste onzin!
Afbeelding 2: Gebruik van metatags
4. Hoe slaan we een XHTML pagina op?
Het is van het grootste belang dat we de basisstructuur – zoals beschreven in voorgaande punten – ingeven in een rudimentaire teksteditor. Hoe eenvoudiger de teksteditor hoe minder kans dat u iets fout kunt doen bij het opslaan (zie afbeelding 3).
We geven het de extensie htm (vb. testB.htm) maar slaan het op als tekstbestand. U ziet hoe we dit deden met het kladblok uit Windows. Natuurlijk mag u dit ook doen met een rudimentaire teksteditor in Linux, zolang u er maar op let dat u het bestand laat eindigen op .htm en opslaat als tekstbestand.
Afbeelding 3: Opslaan van het bestand testB.htm (webpagina)
5. Document terug oproepen
Daar we geregeld aanpassingen zullen moeten doen aan onze webpagina (hier: testB.htm) is het belangrijk dat we het document kunnen oproepen en laten verschijnen in onze teksteditor. Wij roepen ze opnieuw op in onze rudimentaire teksteditor (vb. kladblok).
Indien u gebruik maakte van het kladblok in Windows Vista:
- Start ⇨ Alle programma's ⇨ Bureau accessoires ⇨ Kladblok
Afbeelding 4
- Kies voor Bestand ⇨Openen
- Rechtsonder ziet u Tekstdocumenten (*.txt) Klik op (pijl naar beneden):
- Het keuzemenu opent zich (zie afbeelding) en u kiest voor “Alle bestanden” Nu kunt u ook de bestanden zien die op htm eindigen.
- Ga naar de map waarin uw opgeslagen bestand staat en open deze file door erop dubbel te klikken.
Afbeelding 5
Indien u geen gebruik maakt van deze kladblok zult u zelf even moeten zoeken hoe u met de teksteditor uw eigen bestand oproept. Het is immers onmogelijk om hier alle methodes om een document op te roepen in detail te bespreken.
6. Het onderscheid tussen HTML en XHTML
In dit werk wordt XHTML van de basis af uitgelegd. Indien u al beschikt over ruime HTML kennis dan kunt u best de appendix 2 doornemen. In deze appendix worden uitsluitend de verschillen tussen HTML en XHTML uiteengezet.
7. Definiëren type document
Het is niet voldoende om gewoon de head en de body met de daartussen liggende coderegels in te geven. Helemaal bovenaan, dus nog voor <html> moeten we het type document ingeven. De documenttype definitie (document type definition) geeft aan om welk soort document het gaat. Een documenttype begint altijd met de tag <!DOCTYPE>. Deze tag wordt uitgebreid met extra parameters naargelang het soort document. Er bestaan 3 soorten XHTML 1.0. We bespreken ze hieronder.
1) Hieraan herkent u een frame pagina
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Op het einde van bovenstaande code ziet u frameset.dtd. Met frameset wordt aangegeven dat het een frame pagina betreft. Voor de inhoud van deze frames mag u pagina's van het type Transitional en/of Strict gebruiken (zie hieronder).
Uitgewerkt voorbeeld van een frame pagina:
Afbeelding 6
Aan de hand van de 2 bovenste regels (afb. 6) ziet u dat het een frame pagina betreft. Normaal typt u deze 2 regels op 1 regel. Wij plaatsten ze onder elkaar omdat we anders onmogelijk deze afbeelding kunnen weergeven op dit blad. Dat u de rest van de code nog niet helemaal begrijpt, is volkomen normaal.
2) Hiermee behoort de pagina tot het type Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vereenvoudigd voorbeeld van een pagina van het type transitional:
Afbeelding 7
De code tussen <head> en </head> hebben we hier weggelaten. De instructies tussen <body> en </body> vormen de eigenlijke inhoud van de webpagina. Deze zullen we verderop bekijken.
3) Hiermee behoort de pagina tot het type Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Tot welke van deze 3 soorten (Frameset, Transitional of Strict) uw webpagina behoort moet u aangeven voor de tag <html>. In de praktijk vindt u deze code bovenaan de webpagina.
Bovendien dienen we de tag
<html> uit te breiden door een namespace aan de tag <html>
toe te voegen. Het resultaat:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="nl" lang="nl">
In dit voorbeeld gebruiken we 2 maal “nl” als taalaanduiding. Natuurlijk kunnen we ook en (Engels), de (Duits), fr (Frans) gebruiken.
Zowel de DTD als de uitgebreide html-tag komen vóór de tag <head> ! De browser heeft deze gegevens nodig om uw (X)HTML te kunnen lezen. Ook bij het valideren (zullen we later zien) is het correct gebruik van deze instructies onontbeerlijk.
Uitgewerkt voorbeeld van een pagina van het type Strict:
Afbeelding 8
Onderaan afbeelding 8 zien we dat er na de tag <body> nog andere tags staan; alsook tekst.
8. Karakterset
In afbeelding 8 zien we in de head de
tag <title>. De regel eronder staat:
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
Op het einde van bovenstaande regel staat “charset=iso-8859-1”. Charset is het Engels voor karakterset en na het gelijkheidsteken staat iso-8859-1 wat slaat op de gebruikte karakterset in dit document.
Gebruik van de tekens & en € in een XHTML document met karakterset iso-8859-1 :
Voor de ampersand (&)
gebruiken we een teken combinatie: &
Voor het euro teken (€) gebruiken we als teken combinatie: €
Voorbeeld in XHTML document:
<!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" xml:lang="nl" lang="nl">
<head>
<title>Prijzen op de markt</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<p>De peren kosten 6,20 € & de
appelen slechts 5,60 €</p>
</body>
</html>
Voorbeeld in de webbrowser Mozilla Firefox:
Afbeelding 9
Er bestaan heel wat verschillende karaktersets. Hierover vindt u meer informatie op http://www.playgarden.com/w3c/TR/xhtml-modularization/dtd_module_defs.html
Meer informatie kunt u ook vinden op
de portaalsite van het W3C: www.w3.org
Indien u straks wat meer op de hoogte bent omtrent het bouwen van
websites is de site van het W3C zeker een aanrader!
© Marc Vandenbussche d.d. 01 juni 2008