Om te beginnen maak je een projectmap aan in de xampp hoofdmap. Noem deze HTML. Hierin sla je alle bestanden op van deze website (Denk hierbij bv. aan alle html-, jpg-, pdf-, en mp3-bestanden.). In de map maak je een bestand genaamd index.html hierin ga je werken. Als je jouw website wilt bekijken open je in jouw browser het adres http://localhost , en klik je op de map HTML.
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 je zelf een naam geven.
Op de onderstaande afbeelding ziet je de basisstructuur die geldt voor elke website. Je kunt deze code overnemen om met een website te beginnen. De code begint met een zogenaamde html-open-tag en uiteindelijk sluit de code met de html-sluit-tag. Een tag kunt je 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 jouw 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>Diverse fabels.</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 je aan dat je 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: