HTML/Geavanceerd/Printversie

Deel III: Geavanceerd

Dit onderdeel van het boek is eerder voor gevorderden die zich willen bezig houden met gespecialiseerde zaken.

De inhoud van dit deel

1. MIME-types

De MIME-specificatie (Multipurpose Internet Mail Extensions) is voorgesteld in 1992 om te zorgen dat niet-ASCII-bestanden via e-mail konden worden verstuurd, tegenwoordig wordt het ook gebruikt door het HTTP-protocol. Omdat de ASCII-standaard bestaat uit de standaard West-Europese en Amerikaanse karakters, is het logisch dat het niet kon worden gebruikt om afbeeldingen of ander materiaal beschikbaar te stellen.

Nu zijn er een aantal verschillende MIME-types, waarmee u een bestand of een deel van een bestand kunt aanleveren aan een bezoeker. De belangrijkste types die bij dit boek horen worden hieronder behandeld.

text/plain: Gewone tekstdocumenten verstuurt u door middel van dit MIME-type. Hiermee worden geen MS Word-documenten bedoeld, maar gewone, "platte" ASCII-teksten.

text/html: HTML-bestanden verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

text/css: CSS-bestanden verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/png: PNG-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/x-icon: ICO-afbeeldingen dienen voor het tonen van kleine plaatjes links van de URL. Indien deze in de root staat en favicon.ico heet doet de server dat automatisch.

image/gif: GIF-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

image/jpeg: JPEG-afbeeldingen verstuurt u door middel van dit MIME-type. Vaak wordt dit automatisch gedaan door uw webserver.

application/xhtml+xml: Met dit MIME-type verstuurt u een XHTML-bestand, een XML-bestand met ingebedde HTML; in de praktijk gebeurt dit echter nog vaak met text/html omdat Internet Explorer 8 en lager XHTML nog niet herkent en het dus als download aan zal bieden.

Javascript, een verhaal apart

application/x-javascript: Met dit MIME-type wordt javascript vaak verstuurd door de webserver.

text/javascript: Dit wordt vaak als MIME-type aangegeven in het type-atribuut van het script-element maar is eigenlijk incorrect.

text/ecmascript: Ecmascript is een programmeertaal die weinig wordt gebruikt. JavaScript lijkt, aangezien het ervan is afgeleid, zeer sterk op ECMAscript.

Vaak wordt een javascript aangeboden als application/x-javascript, terwijl het als text/javascript wordt aangegeven in de script-tag. Dit heeft twee redenen: in de HTML-specificatie wordt het gebruik van text/javascript aangemoedigd en MSIE ondersteunt geen javascript wanneer het in de script-tag wordt aangegeven als application/x-javascript. Het maakt voor de browser niet uit wat het MIME-type is van het scriptbestand.

Meer informatie

Wikipedia EN over MIME (Engels)
Het Wikipedia NL-artikel Inline image geeft een opmerkelijke mogelijkheid met de MIME-types weer (Nederlands)
Een overzicht met alle MIME-types (Engels)
tekst Request for Comments 1521 (Engels)
Anne van Kesteren over een MIME-type voor javascript (Engels)

2. Specificaties

Het W3C is een organisatie die een standaard opstelt voor HTML. Volgens de specificatie werken is natuurlijk niet makkelijk, maar het resultaat mag er wel wezen. Een voordeel is dat je pagina veel stabieler is. Een tweede voordeel is dat browsers (behalve MSIE in sommige gevallen) in elk geval de standaard van het W3C ondersteunen. Als je de pagina dus volgens de specificaties schrijft zal deze meestal in alle browsers goed worden weergegeven.

Regels voor specificaties

De specificatie voor de W3C luidt als volgt:

Er moet wel:

Er moet staan welke versie van HTML wordt gebruikt;
Er moet staan welke codering wordt gebruikt (utf-8 enz.);
Er moet staan welke DTD in een DOCTYPE-tag.
Ten slotte is een <head> </head>-tag verplicht.

Er moet niet:

Er mogen geen opmaakelementen inzitten (zoals <b></b>);
Er mogen geen ontbrekende eind-tags zijn (als </script>);
Alle open tags mogen niet open (als <input>);
Ten slotte mag er geen PHP staan op een pagina waarvan de naam eindigt op .htm (.html) (<?php ... ?>).
- Voor het gebruik van PHP moet de naam eindigen op .php.

Voorbeeld

Hieronder staat een voorbeeld van een XHTML pagina voor de DTD van XHTML Transitional. Om te controleren of een pagina Valid (geldig) is kan je de code kopiëren naar de Validator van het W3C (zie Externe links). Als je echter bezig bent met het schrijven van een pagina, kan het lastig zijn om dit elke keer te doen. Het W3C heeft daarvoor een speciale link gemaakt. Als je op deze link (zie voorbeeld) klikt, wordt de huidige pagina waar je op zit gecontroleerd. Dit werkt echter alleen als de pagina die je bekijkt op internet staat. Als je vanaf een lokale server of (bij html) geheel zonder server naar op de link klikt, krijg je een foutmelding.
Probeer de automatische link uit voor deze Wikibooks-pagina: Valideer WikiBooks.

HTML-code: Een lege XHTML pagina volgens de W3C specificaties

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Untitled</title>
</head>
<body>

<a href="http://validator.w3.org/check?uri=referer">HXTML 1.0 Valid</a>

</body>
</html>

Externe links

3. Document Type Definitions

Document Type Definition (DTD)

DTD voor HTML 4.01

Een HTML-document behoort (nog voor de <HTML> tag) met een DOCTYPE-regel te beginnen. Aan de hand van deze regel kan de browser opmaken met welke HTML-variant hij te maken heeft. In HTML 4.01 zijn er drie mogelijkheden:

strict, alleen aanbevolen HTML-codes mogen gebruikt worden
loose, alle aanbevolen HTML-codes mogen gebruikt worden plus de de afgeraden ('deprecated') codes. Dit is bedoeld om een overgangssituatie te scheppen bij de invoering van HTML 4.01. Deze afgeraden codes hebben veelal te maken met de opmaak van de webpagina.
frameset, deze variant wordt gebruikt bij het maken van frames.

Hieronder volgen de drie mogelijke DOCTYPE's. Kopieer en plak deze boven aan het HTML-document. Gebruik in nieuwe documenten bij voorkeur de strict DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

In bestaande documenten kunt u beter de loose DOCTYPE gebruiken:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In een frameset wordt altijd de frameset DOCTYPE gebruikt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD voor XHTML

Voor XHTML bestaan dezelfde 3 mogelijkheden alleen is loose vervangen door Transitional. En natuurlijk zit er een verschil in, dat aangegeeft dat om een XHTML document gaat, en geen HTML.

De Strict DOCTYPE:

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

De Transitional DOCTYPE:

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

De Frameset DOCTYPE:

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

Voor bestanden met frames is XHTML Frameset noodzakelijk. Voor nieuwe of bestaande documenten die u naar XHTML omzet, is het het makkelijkst om XHTML Transitional, aangezien XHTML Strict alle atributen die opmaak regelen als fouten markeert (de opmaak moet geheel met CSS). Als je toch XHTML Strict wil gebruiken moet je er voor zorgen dat alle opmaak door een CSS document geregeld wordt.

DTD voor HTML 5

Voor HTML 5 is de DOCTYPE declaratie zeer kort:

<!DOCTYPE HTML>

Meer informatie

De officiële specificatie (engels)
Officiële DTD's volgens w3.org (engels)

4. Character sets en HTML Entities

Charset staat voor 'character set' in het engels. Bedoeld wordt de verzameling van alle tekens die in een document gebruikt kunnen worden. Het gaat om tekens zoals letters, cijfers, symbolen en karakters uit diverse talen. Een 'character set' hoeft niet alle tekens te bevatten. De meeste 'character sets' bevatten alleen de meest gebruikte tekens. Dit geld niet voor de Unicode 'character set'. Unicode is speciaal ontworpen om alle tekens die op de wereld gebruikt worden, te bevatten. HTML gaat ervan uit dat de browser alle Unicode-tekens moet kunnen afbeelden.

'Charset' wordt bij HTML ook in de betekenis gebruikt van 'character encoding'. Het gaat hierbij om de manier waarop de tekens in de computer gecodeerd worden. Dit is noodzakelijk omdat een computer intern alleen met getallen werkt en niet met tekens. Zo wordt het euro-teken (€) in een bepaalde charset in de computer gecodeerd als 128 en in een andere charset als 164. In weer een andere charset bestaat dat teken niet eens. Hoewel de browser zelf Unicode gebruikt, hoeft de webpagina niet gecodeerd te worden als Unicode. De browser moet dan de webpagina vertalen van de ene codering naar Unicode codering. Dit vertalen is alleen mogelijk wanneer de browser weet volgens welke charset de webpagina gecodeerd is. Welke charset gebruikt mogen worden in webpagina's en hoe ze exact heten wordt bepaald door het IANA, een instituut dat dit soort zaken regelt op het internet.

Coderen van de charset

De charset kan op twee plekken gecodeerd worden: op de webserver en in het html-document. Bij het openen van een webpagina kan de webserver charset informatie meesturen. Deze is voor de gebruiker onzichtbaar maar de browser maakt er wel gebruik van. Hoe de charset op een webserver gecodeerd wordt verschilt van webserver tot webserver. In de meeste webservers kan dat per file, per extensie of per directory gebeuren. Er kan ook een algemene standaard charset gecodeerd worden. Of een webserver charset informatie meestuurt, kun je controleren via http check websites (zoals [1]). Geef op voor welke url je dit wilt weten en zoek vervolgens naar een regel met de termen Content-Type: en charset=. Als deze ontbreekt dan wordt er geen charset informatie meegestuurd.

De charset kan ook in het html-document opgenomen worden. Wanneer de charset op de webserver gecodeerd wordt, dan heeft het codering van de charset geen effect meer. Toch is het zinnig om wel een charset in het html-document op te nemen voor het geval de webpagina gedownload wordt en daarna als file in de browser geopend wordt. Want dan is er geen webserver meer die de charset kan bepalen.

Het coderen van de charset in html gaat als volgt. Voeg direct na de '<head>'-tag een '<meta ....>'-tag in, bijvoorbeeld:

HTML 4.01-code: coderen van een charset

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">

HTML 5-code: coderen van een charset in html5

<head>
<meta charset="utf-8" />

Welke charset

De regel welke charset gecodeerd moet worden is eenvoudig. De uitvoering is iets moeilijker. Gelukkig hoeft het coderen van een verkeerde charset niet altijd rampzalig te zijn. Het wordt pas een probleem wanneer er bijzondere tekens gebruikt worden, tekens die veelal niet op het toetsenbord staan, tekens zoals: à á â è é ë €.

Wanneer je het html-document in bepaald programma bewerkt en vervolgens opslaat dan zal het programma voor het opslaan een bepaalde charset gebruiken. De juiste charset is de charset die het programma gebruikt om het html-document op te slaan. Het probleem is dat het bij de meeste programma's niet duidelijk is met welke charset er opgeslagen wordt. Een vuistregel is dat bij de meeste nederlandse Windows programma's wordt charset Windows-1252 gebruikt wordt en bij de meeste nederlandse Unix/Linux-programma's charset ISO-8859-1. Sommige geavanceerde programma's geven de mogelijkheid om te kiezen welke charset gebruikt wordt. In dat geval kun je kiezen welke charset de webpagina moet gebruiken.

Of de juiste charset gebruikt wordt kun je controleren door tekens zoals à á â è é ë € in de html code te kopieren en plakken. Sluit het html-document en open het document opnieuw. Open het document ook via een browser vanaf de website. De tekens moeten zowel in de editor als in de browser identiek zijn.

HTML Entities

Wanneer een bepaalde charset een bepaalde teken niet kan weergeven, kan er ook gebruik gemaakt worden van zogenaamde HTML Entities. Met een bepaalde tekenreeks wordt een bepaald teken gecodeerd. Zo staat € voor het euro-teken (€). En < en > staan voor '<' en '>'. Deze laatste twee zijn belangrijk omdat de '<' en de '>' normaal een html-tag aangeeft en niet zo maar als tekst gebruikt mag worden.

De tekens kunnen ook met een getal of een hexadecimaal getal aangegeven worden. In Unicode heeft elk teken een getal toegewezen gekregen. Dit getal moet dan gebruikt worden. Zo kan de euro-teken (€) ook als € of als € aangegeven worden.

Belangrijke charsets

ISO-8859-1 is een charset die heel veel gebruikt wordt voor West-Europese talen. Het bevat de letters 'a' t/m 'z', de cijfers en diverse symbolen. Het bevat ook letters met accenten zoals: à á â è é ë. Het bevat geen euroteken (€).
ISO-8859-15 is een aanpassing op de voorgaande charset. Enkele minder gebruikt symbolen zijn vervangen door veel gevraagde symbolen. Het bevat wel het euroteken (€).
Windows-1252 is gebaseerd op de ISO-8859-1 en is uitgebreid met veel gevraagde symbolen zoals het euroteken (€).
Shift_JIS is een voorbeeld van een veel gebruikte Japanse charset met tekens zoals 日本語. Zo zijn er voor vele talen aparte charsets ontwikkeld.
UTF-8 is een zogenaamde Unicode-charset. Met de Unicode-charset kan vrijwel elk symbool van elke taal op de wereld geproduceerd worden. Op dit moment zijn bijna honderdduizend tekens gedefinieerd. Er zijn ook andere Unicode charsets zoals UTF-16 en UTF-32 maar deze worden in HTML vrijwel nooit gebruikt.