Een sjabloon voor HTML5

Voor het uitwerken van de opdrachten maken we gebruik van een sjabloon (template) voor HTML5. De sjabloon functioneert als een voorbeelddocument.
Je voegt daaraan code toe voor het uitwerken van de diverse opdrachten.

Dat heeft als voordeel dat je niet telkens alle code opnieuw moet typen. De vereiste basis voor een HTML5-pagina heb je immers beschreven in de sjabloon.
Hieronder staat de broncode van ons voorbeelddocument:

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>sjabloon</title>
           <meta charset="utf-8">
           <link rel="stylesheet" href="css/opmaak.css">
     </head>
     <body>
     </body>
</html>

Bekijk het volgende filmpje.
Voor extra uitleg staat de tekst van de video eronder.


Tekst van het filmpje

Bovenaan in de broncode van de sjabloon staat de regel <!DOCTYPE html>. Het doctype verschaft aan een browser informatie over wat voor type document het is. Daarnaast fungeert het doctype als een hulpmiddel voor de browser om de webpagina correct weer te geven. De regel <!DOCTYPE html> geeft aan dat we te maken hebben met een webpagina die gebruik maakt van HTML5.

Na het doctype volgt de regel <html lang="nl">. Daaraan kun je zien dat het om een webdocument in de Nederlandse taal gaat. Er had hier ook alleen <html> kunnen staan. Dat was ook voldoende geweest.

Om de browser onderscheid te laten maken tussen tekst en commando’s wordt er in HTML gebruik gemaakt van zogenaamde “tags”. Een tag is een opdracht die door de browser geïnterpreteerd kan worden. In HTML begint een tag altijd met een <–teken en wordt afgesloten met het >–teken. In HTML komen tags vaak in paren voor. In dat soort gevallen is er sprake van een begintag en een eindtag.

In de code van ons voorbeeldocument zien we de begintag <head> en even verderop de eindtag </head>. De eindtag begint altijd met </. In het headgedeelte van de sjabloon treffen we vervolgens een titel aan, daarna volgt informatie over de gebruikte karakter set en tot slot zien we een verwijzing naar het gebruikte CSS-bestand. In het CSS-bestand wordt de lay-out van de webpagina geregeld. We komen hier later in deze module uitgebreid op terug.

In de Nederlandse taal spreken we van een karakterset of tekenverzameling. Karakters worden door de computer opgeslagen als een getal. In een karakterset leg je vast welke afspraken daarover worden gemaakt. Zo wordt er bijvoorbeeld afgesproken welk karakter met welk getal wordt weergegeven. Een veel gebruikte karakterset is utf-8. Na informatie over de gebruikte karakterset staat in ons voorbeelddocument een verwijzing naar het CSS-bestand.

Na het head-gedeelte volgt het body-gedeelte van het HTML-document. Alles wat in de body van het HTML-document komt te staan, plaatsen we tussen de begintag <body> en de eindtag </body>. Dit is het deel van de pagina dat zichtbaar is als de broncode in een browser wordt verwerkt. Tot slot sluiten we het document met de tag </html>.