Hoe zet ik een HTML pagina op

Iedereen vraag het zichzelf wel eens af? Hoe zet ik nou in godsnaam een HTML pagina op. Dit kun je eenvoudig doen, door de volgende stappen op te volgen. Deze eerste ruwe versie zal het begin zijn van alles wat je straks nodig hebt om een statische website te maken waarbij je weet hoe je headings, paragrafen, links en andere belangrijke tags die je nodig hebt om een leuke pagina op te zetten.

Ten eerste zal je moeten beginnen met het aangeven aan de browser om wat voor document gaat. Je kan namelijk in het geval van HTML diverse aanduidingen geven. Ik heb de belangrijkste punten hieronder opgesomd:

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5
<!DOCTYPE html>

Door het openen van de HTML tag, moet je deze natuurlijk ook sluiten. Dit doe je door:

<!DOCTYPE html>
</html>

Zoals je hier kunt zien, heb je diverse tags. De meest gangbare is uiteraard HTML5, maar mocht je om wat voor reden dan ook voor een oudere versie willen kiezen. Kun je dit natuurlijk met HTML4 en XHTML doen. Dit zijn wel verouderde talen en wij adviseren dan ook om HTML5 gewoon te gebruiken.

Nu je de heading weet, kun we beginnen met het inrichten van de header sectie, in de header van je pagina plaats je heel veel informatie. Om te beginnen word hier je meta tags geplaats (dat is zeer belangrijk voor je marketing informatie). Je titel van je pagina word hierin vermeld inclusief de UTF-8 karakterset. Je stylesheets en je script (optioneel) bestanden plaats je ook hier. Nu geef ik eigenlijk al wat teveel informatie, maar in een andere tutorial gaan we wat dieper in op de informatie over stylesheets, script files en hoe je je marketing kan toepassen per pagina.

<!DOCTYPE html>
                <header>

                </header>
</html>

Je ziet dat er nu twee tags zijn bijgekomen, tussen die twee tags gaan we dus extra informatie opgeven waar onze stylesheets staan. Dat doen we op de volgende manier:

<!DOCTYPE html>

                <header>

                               <meta charset=”UTF-8”>

                               <meta name="description" content="Omschrijving website">

                               <meta name="keywords" content="Tags">

                               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                               <meta name="revisit-after" content="5 days">

                               <meta name="author" content="Devol">

                               <meta name="copyright" content="ICTonlineHulp.nl is a trademark of devol.nl" />

                               <meta name="robots" content="index, follow" />

                               <meta name="viewport" content="width=device-width, initial-scale=1.0">

                               <link rel="stylesheet" href="/css/style.css">

                               <script src="/js/script.js"></script>

                </header>

</html>

Zoals je ziet, bestaat een website uit behoorlijk wat elementen. Daarom beginnen we gewoon met de heading. Zorg ervoor dat je deze informatie op de juiste manier interpreteert.

De meta tags is belangrijk voor je SEO van je website. Hierin staat alle informatie wat over de pagina gaat. Zoals op welke tags je gevonden wilt worden en wat de omschrijving voor de search engines zijn zodat men kan zoeken op je website. Uiteraard is dit niet alle informatie die je nodig hebt, maar het is een begin.

Het hoofdstuk marketing krijgt dan ook een aparte  introductie, maar ik moet het voor de heading wel even meenemen. De volgende tags die je na de header opgeeft is de <body></body> tags. Hierin geef je aan dat de opmaak die je hierin opgeeft getoond moet worden op je website.