HTML inleiding

Inleiding

We gaan kennismaken met html. Wil je onderstaande opdrachten doen dan heb je een Windows computer nodig en een usb stick waar je alle documenten opslaat. Deze staan in het lokaal in de laptopkast. Let op dat je op de laptops alles weer uitlogt. Anders heeft iemand na jou toegang tot jouw accounts.

Het kan ook op je Chromebook via de browser. Je kan dan een account maken op replit.com. Gebruik dan je Greijdanus account. Creeer een nieuwe repl en kies bij language voor html, css, js. Geef de repl een logische naam. Het voordeel is dat de repl's online worden bewaard en dus via elke computer te bereiken is.

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, deze kan je opslaan als bestand met de naam index.html:

Let op de naamgeving, vooral op windows staan de extenties niet standaard aan. Voor je het weet heb je het document opgeslagen als index.html.txt, dat is dus niet goed.

<!DOCTYPE html>
<html lang="nl">
     <head>
           <title>sjabloon</title>
           <meta charset="utf-8">
           <link rel="stylesheet" href="opmaak.css">
     </head>
     <body>
        <p>Hallo dit is mijn eerste website!</p>
     </body>
</html>

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 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.

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>.

Het ontwerpproces HTML de body