2. De basisstructuur
2.1 Beginnen met coderen
Op de onderstaande afbeelding ziet u de basisstructuur die geldt voor elke website. U kunt deze code rustig overnemen om u website mee te beginnen. De code begint met een zogenaamde html-open-tag en uiteindelijk sluit de code met de html-sluit-tag. Een tag kunt u het beste zien als een label en alles wat als een tag staat genoteerd in de HTML code zal niet zichtbaar worden voor de bezoekers van uw website. De html-sluit-tag wordt gekenmerkt door de slash ('/') die in de tag staat en zodoende is er door de open- en sluit-tag een zogenaamde HTML-container gevormd. Het is de bedoeling dat de website zich volledig bevindt binnen de HTML-container.
Binnen de HTML-container bevinden zich nog twee andere containers. Als eerste zien we de head-container gevolgd door de body-container. De inhoud van de head-container wordt niet getoond op de website. De head wordt onder andere gebruikt om de website te omschrijven, wat vervolgens interessant is voor zoekmachines. De body-container is wél het zichtbare gedeelte van de website. Hier zal de inhoud van de website zoals paragrafen, afbeeldingen en andere media getoond worden.
Om de basisstructuur volledig te maken is het ook nodig om de gebruikte HTML versie te definiëren. Tijdens deze cursus gaan we aan de slag met HTML5 en dat kunnen we aangeven door <!DOCTYPE html> direct boven de HTML container te zetten. Naast deze toevoeging zijn er nog enkele toevoegingen nodig om de basisstructuur te voltooien.
Als eerst is het verstandig een titel-container te plaatsen in de head van de website.
<title>Een website over bloemen.</title> (let op de Engelse spelling). Het is een belangrijke container omdat hiermee aangegeven wordt waar de website over gaat. Onder andere Google hecht ook aardig wat waarde aan de inhoud van deze container: dus vergeet hem niet.
Vervolgens dient er nog aangegeven te worden welke karakters gebruikt worden op de website. Door de code <meta charset="utf-8"> te plaatsen in de head van de website geeft u aan dat u alleen karakters gebruikt die in de utf-8 verzameling zitten. Deze verzameling omvat onder andere het Latijnse alfabet.
Uiteindelijk ziet de HTML code eruit zoals op onderstaande afbeelding:
2.2 Opslaan
Nu het begin gemaakt is kan het geen kwaad om de website (het tekstbestand met de code) op te slaan met de naam index.html. Het is handig om een map op het bureaublad te plaatsen waar alle onderdelen van de website in worden geplaatst. (Denk hierbij bv. aan alle html-, jpg-, pdf-, en mp3-bestanden.) De naam van de map mag u zelf bedenken. Wanneer u uiteindelijk de inhoud van de map gaat uploaden naar het internet zal de volledige (complete) website online staan.
Als laatste is het nog belangrijk om te weten dat de eerste pagina van een website (de homepage) altijd de naam index.html heeft. Alle andere pagina's van uw website mag u zelf een naam geven.
