In paragraaf 3. Aan de slag met VS Code van de installatie-richtlijnen staat uitgelegd hoe je een nieuwe map en een nieuw HTML-bestand aanmaakt.

Open in VSCode de juiste folder en voeg de twee bestanden toe:

• index.html
• inschrijfformulier.html

Gebruik geen hoofdletters!

HTML-code voor index.html: basis

Maak de basis-structuur voor een webpagina. Voeg onderstaande elementen toe in het juiste deel (head of body):

• De taal van de website en de gebruikte characterset.
• Een title voor de webpagina.
• Een hoofding (h1) met de naam van je uitstap/reis, en jouw volledige naam.
• Plaats daaronder een afbeelding van je bestemming of een activiteit. Plaats de afbeelding in dezelfde map als het bestand index.html.

Tips:

• Is je afbeelding te groot, gebruik dan het programma Paint om de afbeelding zelf kleiner te maken. Gebruik geen ‘inline CSS’ die je vindt op Google of…
• Gebruik geen spaties in de naam van de afbeelding en schrijf alles in kleine letters; dit vermijdt problemen als de webpagina online bekeken wordt. En zo hoef je ook niet te onthouden of je nu een hoofd- of kleine letter gebruikte.

Nu is het tijd om het resultaat te bekijken: hoe ziet de lokaal opgeslagen webpagina er uit? Lees daarvoor paragraaf 6. HTML bestand openen in Chrome in de installatie-richtlijnen.

Merk op: het resultaat van de webpagina zal er nog wat ‘triest’ uitzien, maar dat is niet erg. Zowel het lettertype als de positionering van de afbeelding kan beter, maar dat valt allemaal onder de noemer opmaak. Hieronder staat een voorbeeld.

Er zijn nog twee andere methodes om een HTML-bestand, dat lokaal op je computer staat, in een browser te openen. We geven ze hier voor de volledigheid; de werkwijze vanuit VS Code volstaat echter.

• Navigeer in een verkenner (Windows Verkenner/File Explorer, Mac Finder) naar de map van de website, en klik daar op het HTML-bestand. Dit opent automatisch in een browser (hopelijk Chrome) en anders kies je in het contextmenu (te vinden met rechtermuisknop op het HTMLbestand) voor openen met Chrome.
• Tik in de adresbalk van Chrome het adres van de map met de website in. Ken je die niet vanbuiten, start dan met de naam van de harde schijf (bijvoorbeeld C: ) en navigeer in de aangeboden lijst van mappen en bestanden.