Voordat je resultaat ziet . . . html, head, body. Maar eerst DOCTYPE


donderdag 25 augustus 2016

Natuurlijk is het leuk direct resultaat te zien. Je pakt een simpele html editor en je gaat aan de slag. WYSIWYG (what you see is what you get) Plok, plok en daar staat de website. Als je geluk hebt gaat alles goed. Maar meestal is dat niet het geval. Na een kijkje in de(X)HTML code geef je het al snel op. “Dat lijkt wel Chinees!”. Om dat te voorkomen wil ik je wat basiszaken vertellen over website bouwen. Een stukje (saaie) theorie, maar onontbeerlijk om te weten voor een goede uitwerking.

3 containers

Elke webpagina zal bestaan uit een 3-tal (geneste) containers. De eerste is de <html> …..</html> Tussen deze 2 tags wordt de gehele website geplaatst.

Tussen deze tags komen tevens de<head>…</head> en de<body>….</body> tags voor.

De volgorde ziet er dan als volgt uit.

<html>

<head>

…..

</head>

<body>

…..

</body>

</html>

Boven de eerste tag <html> komt een zgn. SGML (Standard Generalized Markup Language) tag. Dat is de tag die de instructie geeft met wat voor document de browser te maken heeft.

Bij HTML document zal de start er als volgt uit zien:

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

en bij XHTML zo:

<!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“>

Wat betekent dat dan allemaal?

Het eerste dat je ziet is het document type DOCTYPE (documenttypedeclaratie) . Je geeft aan of je HTML gebruikt of dat je XHTML en schrijft daar achter de versie. Dan volgt een URL die verwijst naar een bestand van W3C. Hier staat de documentstructuur beschreven.

Het bovenste voorbeeld beschrijft eenHTML4.o1 strict en de onderste een XHTML 1.0 Transitional.

Of je strict of transitional moet gebruiken hangt af van hoe strikt je zelf bent.

Wil je verouderde tags gebruiken (zoals <b> voor vet gedrukt ipv <strong>) in de nieuwere doctype, gebruik dan transitional.
Als je je nestjes aan de regels houdt dan gebruik je “strict”.

Er bestaat ook nog zoiets als frameset DTD, maar dat mag je snel vergeten. Frames is niet meer van deze tijd.

Helaas kan je niet aangeven welke CSS (stylesheet) je gebruikt. Waarom dat helaas zal later nog duidelijk worden in deze blog.

CSS is het document wat de opmaak van uw website bepaald. Later hierover meer.

Ook bestaat er nog zoiets als “quirks mode”, maar daar wil ik graag een ander hoofdstuk aan besteden.

Wat direct opvalt is dat de<html> tag bij XHTML uitgebreid is met “xmlns……..” De url daarachter verwijst naar de XML-document structuur. Omdat het hier gaat om een vorm van xml is dit attribuut vereist.

Tevens is het mogelijk hier de taal van de website op te geven. Dit is niet noodzakelijk. Wil je dit wel, doe je dat als volgt <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”>. Let op bij XHTML1.1 mag je de laatste “lang” niet meer gebruiken en blijft het dus bij <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl”> Wil je een andere taal instellen, dan vind je hier de letters: Languages code xml.

Nogmaals; die “lang” code is niet verplicht.

Kan het dan niet anders?

Ja gelukkig wel! Redding is nabij. HTML5 biedt uitkomst. De DOCTYPE voor HTML5 de opvolger van HTML4 en XHTML heeft de volgende DOCTYPE.

<!DOCTYPE html>

En de rest dan? Dat hoeft niet meer. HTML5 is geen SGML basis en behoeft dus geen verwijzing naar een DTD document. Daarbij is het niet meer hoofdlettergevoelig en kan dus bestaan uit kleine letters.

Ik zou zo zeggen: Leuker kunnen we het niet maken, wel makkelijker. HTML5 is inmiddels te gebruiken maar browsers ondersteunen nog lang niet alles. Er is dus nog volop ontwikkeling. Later hierover vast nog meer.

Zo, dat was een heel stukje theorie. Puur achtergrondinformatie maar niet onbelangrijk. Het volgende hoofdstuk geeft je meer resultaat, dat beloof ik!


Reacties


Voeg een reactie toe op dit bericht.
Houd mij op de hoogte van nieuwe reacties op deze pagina