HTML/Printversie

Deel I: Inleiding

Dit deel van het boek zal optreden als een inleiding. Er zal nog geen echte code worden aangemaakt, maar enkele fundamentele denkwijzen zullen wel worden uitgelegd.

De inhoud van dit deel

1. Geschiedenis van HTML

TE DOEN

TE DOEN
Dit hoofdstukje moet herschreven worden. Ook zouden de nieuwe ontwikkeling van HTML moet worden toegevoegd zoals HTML5

De geschiedenis van HTML ging in de eerste jaren hand in hand met de ontwikkeling van webbrowsers. De belangrijkste spelers daarin waren de concurrerende browsers van Netscape en Microsoft. Met elke uitgebrachte browserversie werd de HTML uitgebreid of aangepast. De organisatie W3C werd opgericht door Tim Berners-Lee, met het doel om standaarden vast te stellen, maar moest regelmatig constateren dat de standaard waaraan gewerkt werd, inmiddels achterhaald was.

HTML werd in 1991 bedacht en ontwikkeld door Tim Berners-Lee om wetenschappelijke documenten van het CERN in Genève gemakkelijker toegankelijk te maken. Hij ontwikkelde ook de eerste webbrowser, WorldWideWeb genaamd. In 1993 werd de webbrowser Mosaic ontwikkeld door het NCSA, die als eerste grafische elementen in HTML ondersteunde. Op basis daarvan ontstond in 1994 Netscape Navigator. Met de komst van deze beide browsers werd het World Wide Web echt populair. Beide browsers voegden elementen toe aan de oorspronkelijke HTML. Kort daarop mengde Microsoft zich in de strijd met een eigen webbrowser.

De eerste officiële specificatie van HTML door de W3C organisatie was HTML 2.0, geaccepteerd in september 1995. Eerder was er gewerkt aan uitbreiding van de oorspronkelijke standaard onder de naam HTML+ (gepubliceerd in november 1993). Al vóór de officiële acceptatie van HTML 2.0, werd er de volgende specificatie (HTML 3.0) voorbereid. Deze specificatie werd achterhaald door het uitkomen van Netscape versie 3 en het voorstel werd in september 1995 verlaten. Het werk werd voortgezet in HTML versie 3.2, dat de naam "Wilbur" meekreeg. Wilbur werd geaccepteerd in januari 1997. In december 1997 werd de HTML 4.0 specificatie geaccepteerd, waarop nog enkele kleine correcties zijn aangebracht in HTML 4.01 (geaccepteerd in december 1999).

De HTML-4.01-specificatie was lange tijd bedoeld als de laatste specificatie van HTML. Verdere ontwikkeling van de markup-taal zou plaatsvinden in de vorm van XHTML (een subset van XML) en in de ontwikkeling van stijlbladen en JavaScript.

W3C-directeur Tim Berners-Lee zette echter in een blogposting in oktober 2006 een nieuwe koers uit. Hij constateerde dat een groot deel van de webontwikkelaars en -uitgevers niet bereid was gebleken over te stappen naar X(HT)ML, en dat het daarom nodig was de ontwikkeling van HTML toch voort te zetten. Die ontwikkeling diende volgens Berners-Lee parallel te lopen aan de ontwikkeling van XHTML.

Het W3C stelde daarop in maart 2007 een nieuwe HTML Working Group in, die al in juni 2007 een Working Draft diende te kunnen presenteren. Om dit te kunnen realiseren, zou de Working Group nauw samenwerken met de WHATWG-groep, die uit ongenoegen over de koers van het W3C sinds 2004 werkte aan HTML 5.

Meer informatie

De website van het W3C (Engels)
Beschrijving van het HTML formaat uit 1992 door W3C (Engels)
Specificatie van HTML+ door W3C (Engels)
Beschrijving van het HTML+ formaat door W3C (Engels)
De HTML 2.0 specificatie, Request for Comments nr. 1866 (Engels)
Ontwerp van HTML 3.0 (Engels)
De HTML 3.2 specificatie, genaamd "Wilbur" (Engels)
De HTML 4.01 specificatie (Engels)

Deze pagina is vrijgegeven onder de GNU Free Documentation License (GFDL) en nog niet onder CC-BY-SA. Klik hier voor meer informatie.

2. Toekomst van HTML

Nadat HTML 4.01 werd hergeformuleerd in XHTML 1.0 (hierover later meer), verwachtte bijna iedereen dat het was afgelopen met de HTML-serie. XHTML was opeens "the way to go", een visie die wordt gesteund door het feit dat W3C afziet van verdere ontwikkeling van de HTML-standaard. Toch is niet alle ontwikkeling gestaakt.

HTML 5

Zo werkt de WHATWG (Web Hypertext Application Technology Working Group) aan een nieuwe standaard genaamd "HTML 5", voorheen Web Applications. Er wordt nog steeds gewerkt aan HTML 5. Het doel is dat dit later als vervolg kan optreden in de HTML-serie en de XHTML-serie. De bedoeling van de werkgroep is dan ook om een stabiele versie van het document op te sturen naar het W3C, zodat het een officiële standaard kan worden. Het plan is dat Web Forms, dat al verder is ontwikkeld, een onderdeel gaat vormen van HTML5. Het is echter de vraag of concurrerende standaarden wel zo goed zijn voor het web.

Formulieren

Webformulieren (Web Forms), wederom van WHATWG, zijn bedoeld om het voor HTML- en XHTML-ontwikkelaars makkelijker te maken om professionele formulieren te maken. De ontwikkeling verkeert inmiddels in een vergevorderde fase en wordt al toegepast door Firefox en Google Chrome.

Web Controls

Ook werkt het WHATWG aan Web Controls 1.0. De bedoeling is om aan JavaScript- en CSS-functionaliteiten toe te voegen die het mogelijk maken om geavanceerde opmaak toe te kunnen passen op webprogramma's. De ontwikkeling verkeert nog in de beginfase, omdat eerst op andere projecten moet worden gewacht.

Meer informatie

3. Over XHTML

XHTML staat voor Extensible Hypertext Markup Language en is een soort uitgebreide en striktere versie van HTML 4.01. Met strikter bedoelen we dat er bij XHTML regeltjes zijn bij het opmaken van een XHTML document die niet bestaan bij een gewoon HTML document.

Waarom XHTML

Vele auteurs van webpagina's waren vroeger (en nu nog steeds eigenlijk) heel laks bij het schrijven van de HTML-code voor hun webpagina's. De browsers die worden gebruikt werken dit nog meer in de hand door foute HTML-code vrij te interpreteren en te raden wat de auteur wou bereiken. Zoals al eerder werd gezegd is XHTML een striktere versie van HTML met verschillende regeltjes voor het schrijven van goede HTML-code. Als er een fout in een XHTML-document is zal, in tegenstelling tot HTML, de browser stoppen met de code te verwerken en gewoonweg een foutmelding tonen.

Het nadeel van XHTML is wel dat er voor het kleinste foutje een foutmelding wordt gegeven en de pagina helemaal niet wordt getoond en moet het XHTML-document worden aangepast. Om aan te geven dat je webpagina een XHTML document is moet er een zogenaamde MIME-type worden vermeld in je document dat aangeeft dat het om een XHTML-document gaat(application/xhtml+xml). Internet Explorer interpreteert dit fout en behandelt de webpagina dan als een document om te downloaden en niet als een webpagina die moet worden geopend in de browser. Hierdoor is het het beste dat je de MIME-type gebruikt om aan te geven dat het om een gewoon HTML-document gaat(text/html), want gelukkig kan Internet Explorer dit wel naar behoren verwerken.

Dit is natuurlijk zeer moeilijk te begrijpen voor iemand die juist begint met HTML en dus moet je er nu nog niet veel van aantrekken. We zullen er in dit boek later nog wel dieper op ingaan.

Toekomst van XHTML

Oorspronkelijk was bedoeld om XHTML de opvolger te maken van HTML en vervolgens verder de XHTML standaard uit te breiden en niet langer de gewone HTML. Er werd ook een lange tijd gewerkt aan een opvolger voor XHTML genaamd XHTML 2.0. Deze versie moest oorspronkelijk een echte breuk maken met het verleden. Nu wordt er echter gewerkt aan HTML 5 die uiteindelijk HTML 4.01 moet opvolgen en nieuwe functies gaat toevoegen aan HTML. HTML 5 is wel nog steeds geen standaard maar de meeste moderne browsers ondersteunen wel al veel van deze nieuwe functies. XHTML is echter niet ten dode opgeschreven, want er wordt ook een XHTML-versie ontwikkeld op basis van HTML 5 die simpelweg XHTML 5 heet.

XHTML in dit boek

In dit boek zullen we zo veel mogelijk de regeltjes van XHTML gebruiken alsof het gewoonweg HTML is, omdat het simpelweg mooi geordende webpagina's oplevert.

4. Semantiek

Wat is semantiek

Zo staat het op het Wikipedia-artikel over semantiek:

De semantiek houdt zich bezig met de betekenis van symbolen (zoals de woorden in een taal).

In HTML geeft de semantiek de structuur van een document aan. Het gaat daarbij niet om de semantiek van de inhoud van het document, maar om de betekenis voor de weergave van de onderdelen van het document. Opdat een user agent de structuur goed kan weergeven, moet deze structuur ook duidelijk in het document aangegeven zijn.

Zo zullen onderdelen van een document die een verschillende rol spelen, als zodanig moeten worden aangegeven. Het is dus niet voldoende dat het weergegeven resultaat (bij de meeste browsers) goed is, nee die goede weergave moet z'n oorzaak vinden in de correcte semantiek van de gebruikte HTML.

Een heel eenvoudig voorbeeld is het gebruik van een rijtje =-tekens om een dubbele lijn aan te geven. Daardoor ontstaat een dubbele betekenis van het =-teken. Een semantische fout. Of nog eenvoudiger het gebruik van het koppelteken "-" als minteken in berekeningen. Weergegeven door een browser zien we geen verschil, maar vanwege de verschillende betekenis (semantiek), moet in de code onderscheid gemaakt worden, dus aparte tekens.

Wanneer u een menu wilt maken (feitelijk dus een lijst met links), moet u dat ook beschrijven als een lijst, en niet als bijvoorbeeld een tabel.

Het nut van semantiek

Uit het bovenstaande blijkt al wel het belang van een goede semantiek in de HTML-code. Het zal blijken dat u een lijst en een tabel er bij weergave precies hetzelfde kunt laten uitzien. Toch is het van belang semantisch onderscheid te maken en de lijst ook als een lijst en de tabel als een tabel te definiëren. Mocht een eenvoudige browser niet de mogelijkheden hebben voor de gewenste weergave, dan zal hij de lijst als een lijst behandelen en niet als tabel. Of als u later het uiterlijk van tabellen wat wil veranderen hoeft u niet bang te zijn dat ook uw lijsten er anders gaan uit zien.

Zo zijn er nog meer voordelen. User agents begrijpen beter wat u bedoelt, waardoor het surfen voor (visueel) gehandicapten makkelijker wordt. Ook zal uw website toegankelijker zijn voor mensen met een tekstbrowser, zoals Lynx. Daarnaast wordt ook voor u het werken makkelijker: u weet meteen met wat voor een informatie u van doen heeft.

Semantiek speelt een steeds grotere rol, wanneer u uw site hoog in de zoekresultaten van zoekmachines wilt hebben. Zo zal er waarschijnlijk meer waarde worden gehecht aan de inhoud van een kop, dan aan de waarde van bijvoorbeeld een gewone paragraaf.

Meer informatie

Semantiek - Waarom zou je? (Nederlands)
Naar Voren over semantiek (Nederlands)
Rikkert Koppes over semantiek in "Do you smurf what I smurf?" (Engels)
Brainstorms and Raves over semantiek (Engels)
Het klassieke artikel The Semantic Web (Engels)
Discussie op Gathering of Tweakers over het semantische web met als deelonderwerp de semantiek in de HTML (Nederlands)
Wikipedia EN over het semantisch web (Engels)

5. Scheiding tussen structuur en opmaak

Wanneer u uw auto een andere kleur wilt geven, maar de auto zelf wilt houden, kunt u de auto laten overspuiten. U geeft dan dezelfde structuur een andere opmaak. Dit is mogelijk omdat de structuur en de opmaak zijn gescheiden: de opmaak vormt als het ware een laag over de structuur heen, maar zit niet in de structuur genesteld, waardoor u eenvoudig een andere opmaak kunt laten toepassen.

Zo kan het ook met websites gaan. Het HTML-document beschrijft de structuur door aan te geven wat de diverse onderdelen, zoals titels, subtitels, paragrafen, voetnoten lijsten enz., voor betekenis hebben, maar laat de opmaak, dus hoe de onderdelen uiteindelijk weergegeven worden, over aan een of meer zogenaamde "style sheets", waarin de opmaak van de onderdelen vastgelegd is. Deze "style sheets", aangeduid met de naam CSS, van Cascading Style Sheets, zijn aparte bestanden, waarnaar in het HTML-document wordt verwezen, en die een eigen syntax hebben.

Wanneer u dan uw website een nieuwe stijl geeft, hoeft u alleen het CSS-bestand te veranderen. Sterker nog, wanneer u een apart CSS-bestand aanmaakt en daar naar toe verwijst vanaf al uw HTML-bestanden, dan hoeft u slechts één bestand te wijzigen in plaats van alle HTML-bestanden.

HTML biedt echter wel de mogelijkheid om een opmaak te realiseren zonder de tussenkomst van CSS. Herinnert u zich nog wat er is gezegd over semantiek? Dan zult u waarschijnlijk wel begrijpen dat schuin gedrukt een slechtere beschrijving is dan nadruk. Semantisch gezien moet het gebruik van HTML om een opmaak te realiseren vermeden worden. Bovendien kan het gebruik van CSS u een hoop tijd schelen.

Dit is tevens de reden waarom dit boek de opmaakmogelijkheden binnen HTML slechts oppervlakkig zal beschrijven: er is immers een veel beter alternatief. Over hoe u een CSS-bestand "bevestigt" aan een HTML-pagina, krijgt u later uitleg.

6. Over dit boek

Doelstelling

De makers van dit boek hebben zichzelf tot doel gesteld een correcte cursus voor HTML te maken. Hierbij zal de nadruk worden gelegd op semantiek en de daarmee samenhangende scheiding van structuur en opmaak. In dit boek zijn geen opgaven opgenomen. De ervaring leert immers dat veel mensen HTML beginnen te leren om een eigen site te maken; aan een heleboel kleine opgave-sites hebt u dan niets.

Verder is het de bedoeling geweest dat mensen die op zoek zijn naar informatie over een bepaald aspect van HTML, dit meteen kunnen vinden. Er is daarom gestreefd naar het behandelen van verschillende onderwerpen op verschillende pagina's.

Zelf wijzigen

Iedere pagina in dit boek kunt u ook zelf aanpassen. Wanneer u een fout (inhoudelijke fouten, maar ook spel-, typ- of grammaticafouten) aantreft, wordt u er toe aangemoedigd die fout te verbeteren. Wanneer u niet zeker bent of de inhoud wel klopt, kunt u in overleg treden op de overlegpagina (zie bovenkant) van die pagina.

Denk er aan dat de overlegpagina is bedoeld om te overleggen over een pagina, en niet om uw HTML-probleem op tafel te gooien in de verwachting van een oplossing. Er is veel over HTML te vinden op het Internet, maar ook in bibliotheken, en van u wordt verwacht dat u gebruik maakt van deze informatiebronnen. Als u vragen hebt, kunt u deze stellen op discussieforums op internet. Vaak zijn op de pagina's in dit boek links opgenomen naar plaatsen waar meer informatie te halen is; neem deze mee in uw zoektocht naar de oplossing van uw probleem.

Deel II: Basiscursus

Nu we de inleiding hebben gezien waar we vooral spraken over de geschiedenis en achtergrond van HTML, gaan we nu aan het echte werk beginnen. In dit deel zullen we de basis van HTML bespreken. Sommige zaken zullen we niet bespreken omdat het overbodig, veel te moeilijk of te gedetailleerd is. Meestal zul je die zaken wel terug vinden in de delen geavanceerd of appendices. Regelmatig komen de nieuwe regels van XHTML aan bod, je mag die regels negeren maar het wordt sterk aangeraden om ze toch te volgen zodat je geen "slechte" gewoontes aanleert.

De inhoud van dit deel

4. Opmaak

Via bepaalde elementen en attributen kun je de inhoud van jouw pagina mooi opmaken. Tegenwoordig zijn veel van deze elementen of attributen verouderd in HTML en worden ze zelfs niet meer ondersteund in XHTML. In plaats van die te gebruiken wordt er aangeraden om CSS te gebruiken. In dit hoofdstuk zullen we enkele van deze elementen en attributen bekijken en tonen hoe je CSS kunt toepassen. We geven telkens ook de waarschuwing welke je wel mag gebruiken en welke niet.

Lettertype, grootte en kleur

Er zijn 2 manieren om het lettertype, grootte en kleur aan te passen. Dit kan via de attributen van een bepaald element of via CSS. Ook kun je via elementen bepalen welke teksten welke opmaak krijgen. Zo kun je dankzij body al de inhoud van een webpagina dezelfde opmaak geven of kun je bij hele kleine stukjes specifieke opmaak geven dankzij span.

font en span

zie ook font en span voor meer informatie.

Vroeger wanneer er aan hele kleine stukjes tekst (maar ook aan hele grote) opmaak moest veranderd worden werd er font gebruikt. Dit kon makkelijk worden gedaan dankzij zijn attributen

HTML-code: Tekst opmaken met font.

<span style="font-size: large; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Dankzij de attributen size, color en face kon je respectievelijk de grootte, kleur en lettertype van je tekst aanpassen. Bij het attribuut size moet je een getal van 1 tot 7 geven, bij color de naam of code van een kleur en bij face een lettertype. Dit element is ondertussen verouderd en wordt het nietmeer ondersteund door XHTML. Vrijwel alle browsers ondersteunen nog dit element maar het is echter aangeraden om het niet meer te gebruiken en alle opmaak in de stylesheet te definiëren. Nu kun je als je kleine stukjes tekst andere opmaak wilt geven het element span gebruiken. Deze heeft echter die attributen niet en moet je de tekst opmaken op een andere manier. Dit gebeurt via CSS of het style attribuut.

CSS & HTML-code: Tekst opmaken met span.

Dit is de CSS-code.

span {
     font-size: 19px;
     color: red;
     font-family: times new roman;
}

Dit is de HTML-code.

<span>
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Met span kun je dus evenveel bereiken als font let wel op dat bij font-size andere regels gelden dan bij de size van font. Bij font-size wordt de grootte van de tekst opgegeven in pixels of punten. Als je nog niet vertrouwd bent met CSS kun je ook de CSS code plaatsen bij een attribuut van span namelijk het attribuut style.

HTML-code: Tekst opmaken met span.

<span style="font-size: 18px; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit geeft exact hetzelfde resultaat.

Nadruk leggen

Als we op tekst nadruk willen leggen moet deze tekst in het oog springen. Tegenwoordig worden daarvoor de elementen em en strong gebruikt. Naast deze elementen zijn er nog i, b en u. Deze zijn echter verouderd en het is af te raden om deze nog te gebruiken.

em

De em staat voor het engelse emphasis wat staat voor het woord nadruk. Met dit element kun je dus nadruk leggen op stukjes tekst.

HTML-code: Nadruk leggen op tekst via em

<em>Ik wil nadruk leggen op deze tekst</em>

Ik wil nadruk leggen op deze tekst

Meestal wordt de tekst dan schuin afgedrukt, maar dat is zeker niet altijd zo. Er kunnen browsers zijn die iets anders met de tekst doen of het element em kan via CSS zijn aangepast.

HTML-code: em aagepast via CSS

em { font-weight: bold; }

Via CSS kan er bijvoorbeeld gekozen zijn om alle stukjes tekst die ingesloten zijn door het element em vet te laten tonen. em wordt gezien als de beste vervanging voor het element i. Dus als je i gebruikt hebt, kun je die beter vervangen door em.

strong

De strong staat eigenlijk voor strong emphasis oftewel in het Nederlands sterke nadruk. Dit betekent dus dat de tekst die wordt omringd door het element strong dat die nog meer in het oog moeten springen dan de tekst met het element em.

HTML-code: Nadruk leggen op tekst via strong

<strong>Ik wil sterker nadruk leggen op deze tekst</strong>

Ik wil sterker nadruk leggen op deze tekst

Meestal wordt deze tekst dan vet gezet. Dit geldt niet altijd zoals bij het element em. Doordat de tekst vet wordt afgedrukt wordt het gezien als de beste vervanging voor het element b. Je kunt ook strong aanpassen dankzij CSS, zoals bijvoorbeeld de lettergrootte te veranderen.

HTML-code: strong aagepast via CSS

strong { font-size: 20px; }

italic(i), bold(b), underline(u)

De elementen i(italic), b(bold) en u(underline) staan respectivelijk voor cursief, vet en onderstreept. De elementen i en b zijn nog niet verouderd en zullen nog worden ondersteund door de verschillende webbrowsers. Er wordt echter sterk afgeraden om ze nog te gebruiken. Voor het element i wordt aangeraden om em te gebruiken en voor b wordt strong aangeraden.

Het element u is echter wel verouderd en mag dus niet echt meer gebruikt worden bij HTML pagina's. Het wordt wel nog ondersteund. Er wordt sowieso afgeraden om tekst te onderstrepen, dit is om te voorkomen dat gebruikers onderstreepte tekst zullen aanzien als links. Wil je toch tekst onderstrepen gebruik hiervoor dan liever CSS zoals in het volgende voorbeeld.

HTML-code: Tekst onderstrepen via CSS.

em { text-decoration: underline; }

CSS(Cascading Style Sheets)

5. Afbeeldingen en objecten

Dit hoofdstuk gaat over het gebruik van afbeeldingen en objecten.

Afbeeldingen

Zie ook het img element voor meer informatie.

Om een afbeelding te tonen op een webpagina is er niet veel nodig. Je hebt gewoon het element img en zijne attributen src en alt nodig en een URL naar een afbeelding. Het alt attribuut is bedoeld als tekst die screenreaders kunnen weergeven voor personen met slecht zicht. Verder dient het ook als alternatieve tekst die wordt getoond wanneer de afbeelding niet kan worden geladen.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding.">

Bij het attribuut src gelden dezelfde regels als bij het attribuut href van het a element(zie ). Je kunt via de attributen height en width respectievelijk de hoogte en de breedte van een afbeelding bepalen. Dit kan op twee manieren: m.b.v. een waarde in pixels of een waarde in percenten. Als je pixels gebruikt geef je precies aan hoe breed en hoe hoog de afbeelding mag zijn. De browser weet dan ook hoeveel ruimte er moet worden vrijgehouden en zal later, bij het effectief tonen van de afbeelding, de pagina niet moeten herschikken. Wanneer je een procentuele waarde geeft, bepaalt hij de grootte op basis van de werkelijke grootte van de afbeelding x jouw percent. Wanneer een afbeelding 200 pixels breed was en je een waarde van "50%" geeft zal hij half zo breed zijn, geef je 200% zal hij dubbel zo breed zijn.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" height="100px" width="100px" alt="Alternatieve tekst voor de afbeelding.">
<img src="afbeelding.jpg" height="50%" width="200%" alt="Alternatieve tekst voor de afbeelding.">

Afbeelding als link gebruiken

Om een afbeelding als link te gebruiken moet je het simpel weg in een a element verwerken.

HTML-code: Afbeeldingen

<a href="eenpagina.html"><img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding."></a>

Het gebruiken van maps

Zie ook het map element voor meer informatie.

Het aanmaken van maps

Het toepassen van maps

Overige attributen

XHTML

Let er op dat je bij XHTML de tag moet afsluiten.

HTML-code: Afbeeldingen

<img src="afbeelding.jpg" alt="Alternatieve tekst voor de afbeelding." />

De tag afsluiten doe je door achteraan een schuine streep toe te voegen("/").

Objecten

8. Citeren

HTML bevat enkele elementen die dienen voor stukjes tekst te citeren. In dit hoofdstuk worden deze elementen uitgelegd

Korte citaten

Korte citaten, citaten die in een zin of tekst zijn verwerkt, worden aangeduid met het element q.

HTML-code: Een korte citaat.

Descartes zei ooit <q>cogito, ergo sum</q>.

Vaak wordt zo'n citaat schuin afgedrukt. Normaal zou een browser automatisch aanhalingstekens moeten plaatsen bij deze korte citaat. Firefox doet dit maar Internet Explorer niet. Je kunt ook een verwijzing maken naar een webpagina vanwaar je de citaat vandaan hebt gehaald of een webpagina met extra informatie. Dit gebeurt met het attribuut cite

HTML-code: Een korte citaat.

<q cite="https://nl.wikiquote.org/wiki/Ren%C3%A9_Descartes">cogito, ergo sum</q>

Je moet dus als waarde een URL opgeven.

Lange citaten

Voor lange citaten bestaat er blockquote. Meestal springt de tekst in als je het in een blockquote zet.

HTML-code: Een lange citaat.

<blockquote cite="https://nl.wikiquote.org/wiki/Karl_Marx">
Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden. Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.
</blockquote>

Net zoals q kun je dus ook cite gebruiken. Cite gebruikt hier dezelfde regels. In XHTML is het verplicht om de inhoud van blockquote nog eens te zetten in een p element.

HTML-code: Een lange citaat.

<blockquote cite="https://nl.wikiquote.org/wiki/Karl_Marx">
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>

Het element cite

Het element cite is een alternatief voor het attribuut cite en dient om de bron van de citaat aan te geven of van wie die citaat komt. In tegenstelling tot de attribuut wordt de inhoud van het element cite wel getoond op het scherm.

HTML-code: Het element cite.

<p>
<cite>Karl Marx zei ooit:</cite>
</p>

<blockquote>
<p>Religieus lijden is tegelijkertijd de uitdrukking van een echt lijden 
en een protest tegen een echt lijden.Religie is de verzuchting van 
het onderdrukte wezen, het hart van een harteloze wereld, en de ziel 
van zielloze omstandigheden. Het is de opium van het volk.</p>
</blockquote>

<p>
bron: <cite><a href="https://nl.wikiquote.org/wiki/Karl_Marx">Wikiquote</a></cite>
</p>

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.

Meer informatie

HTML/Appendices/Printversie