Basisstructuur
Voordat we kunnen beginnen met het maken van een kickass website, moeten we eerst de basis van HTML onder de knie hebben. In het vorige hoofdstuk hebben we gekeken naar de syntax van de taal. Nu gaan we deze syntax toepassen door te kijken naar de structuur die de basis vormt voor elk HTML document.
Elk HTML document heeft 5 basis onderdelen die altijd aanwezig moeten zijn:
- een
DOCTYPEmet daarin de HTML versie; - een
HTMLelement; - een
HEADelement; - een
TITLEelement; - en een
BODYelement.
Zetten we de bovenstaande lijst om in HTML, dan ziet dat er als volgt uit. Uitleg over elke onderdeel wordt onder het voorbeeld gegeven.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>…</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<!-- De inhoud van jouw webpagina -->
</body>
</html>De DOCTYPE
Zoals in de genummerde lijst hierboven al staat, geeft de DOCTYPE
de HTML versie aan die je gebruikt op je webpagina. In de Modern Markup handleiding
gebruiken wij HTML 4.01 Strict. Zoals je in de introductie hebt
kunnen lezen is HTML 4.01 de laatste versie van de HTML familie tot nu toe. Het
woord "Strict" zegt iets over de Document Type Definition (DTD) die de
DOCTYPE gebruikt. (Wat een DTD precies is is niet belangrijk.)
In HTML onderscheiden we 3 DTDs:
- Strict;
- Transitional;
- en Frameset.
Als je het woord "Strict" leest, denk je misschien gelijk aan het Nederlandse woord "streng". De Strict DTD is echter helemaal niet streng. Als je de Strict DTD gebruikt betekent het juist dat je aan de regels van HTML houdt. Op Modern Markup leren we je namelijk volgens de officiële HTML standaard websites maken, zoals het volgens de W3C hoort.
Transitional betekent dat je de HTML elementen van HTML 3.2, waar we het in de introductie ook over hadden, kan gebruiken. Elementen waarmee je bijvoorbeeld de tekstkleur, de lettertype, en allerlei andere dingen die met de opmaak van de webpagina te maken hebben kan veranderen. Deze gebruiken we dus niet omdat CSS de opmaak van je website veel beter kan regelen. De enige reden waarom deze DTD is gemaakt, is om het de makers van websites makkelijker te maken die voorheen hun websites maakte d.m.v. HTML 3.2. Met de Transitional (Engelse vertaling voor het Nederlandse woord "overgang") DTD zou dus de overgang van HTML 3.2 naar HTML 4.01 eenvoudiger zijn.
Als laatste hebben we nog de Frameset DTD. Deze hoort alleen gebruikt te
worden als je frames gebruikt op je website. Omdat frames voor nogal wat
problemen zorgen is het daarom afgeraden om frames te gebruiken, dus
gebruiken we deze DTD niet en houden we Strict over. Dus als we in de toekomst
een DOCTYPE moeten gebruiken, gebruiken we de DOCTYPE
die in het voorbeeld staat.
Het HTML element
Het HTML element is het oorsprong element; het
element waar alles begint. Alle HTML code komt in dit element. Het is
om die reden dan ook zo dat je in het HTML element de hoofdtaal van
je webpagina aangeeft. Met de "hoofdtaal" bedoelen we gesproken talen zoals het
Nederlands en het Engels. De hoofdtaal wordt aangegeven d.m.v. het lang attribuut. De waarde van lang ligt aan de taal van je webpagina.
Voor Nederlands gebruikt je de waarde nl. Voor Engels gebruiken we
de waarde en. De HTML start tag ziet er dus als volgt
uit:
<html lang="nl">Als je nog een keer het voorbeeld bekijkt aan het begin van het hoofdstuk zie
je dat er in het HTML element 2 andere elementen zitten:
- het
HEADelement; - en het
BODYelement.
Deze twee elementen worden hieronder besproken.
Het HEAD element
Het eerste element wat we in het HTML element zien, is
HEAD. In HEAD staat extra informatie over de
webpagina zoals de titel van het document (het TITLE element die in
de volgende paragraaf wordt uitgelegd) en de "karakter codering". De karakter
codering wordt aangegeven d.m.v. het META element. Dit element
wordt gebruikt om extra gegevens over de inhoud van de webpagina beschikbaar
te maken. Zo kan het META element gebruikt worden om de
karakter codering aan te geven.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">De karakter codering geeft informatie over de karakters en tekens die gebruikt worden in het document. Hoe dit precies in elkaar zit is niet belangrijk en heeft ook vrij weinig te maken met HTML. Het is aangeraden om de character encoding UTF-8 te gebruiken, dus doen wij dat ook. Er zijn echter ook andere manieren (die beter, maar ingewikkelder zijn) om de karakter codering aan te geven, maar we laten het voor het gemak hierbij.
Het TITLE element
Naast het META element is er in het HEAD element van
ons voorbeeld aan het begin van dit hoofdstuk ook een TITLE element
te vinden. Deze geeft de titel van de webpagina aan. In de titel van je
webpagina moet je een korte omschrijving geven van de pagina. Maar pas op, in de
TITLE kan geen andere HTML elementen gebruikt worden, dus alleen
tekst. Zelfs geen commentaar.
<title>Structuur van <br> HTML</title> <!-- Mag niet, want er zit HTML code in -->
<title>HTML</title> <!-- Mag niet, want geen goede omschrijving -->
<title>Structuur van HTML documenten</title> <!-- Goed, want geen HTML code, en goede omschrijving -->Het BODY element
Als laatste zien we de BODY. In dit element staat alles
wat op je scherm verschijnt (behalve wat er in het commentaar staat natuurlijk).
Alle informatie in de HEAD wordt niet op je scherm weergegeven,
maar alles wat in het BODY element staat dus wel. Wat je daar
allemaal in kan zetten leer je in het volgende hoofdstuk over de
tekststructuur.