Vraag je jezelf wel eens af hoe een website nu eigenlijk in elkaar zit? In dit artikel maak je voorzichtig kennis met de wereld die webdevelopment heet. Webdevelopment is omvangrijk en complex. Gezien ik beloofd heb om niet teveel “nerd-shizzle” te gebruiken, beperkt dit artikel zich puur tot het voor jou zichtbare deel van een website. Een tipje van de sluier dus.

Waaruit bestaat een website?

Een website bestaat uit een aaneenschakeling van instructies. Jouw browser (Firefox, Chrome, Safari etc.) leest deze instructies en maakt er een visuele (en interactieve) presentatie van, wat resulteert in de website die je op het scherm ziet.

Het is essentieel dat de instructies nauwkeurig zijn geschreven en in de juiste volgorde aan de browser aangeleverd worden. Een browser denkt immers niet zelf na en doet simpelweg wat het wordt opgedragen. Je moet de browser dus precies vertellen wat deze moet doen.

Hoe communiceer je met een browser?

Zoals je weet kan een website worden bekeken met verschillende browsers. De meest bekende en gebruikte browsers zijn Chrome, Firefox, Internet Explorer, Safari, Opera, Edge en mobiele versies van deze browsers.

Browsers maken gebruik van universele talen (webstandaarden) die de instructies voor jouw website kunnen lezen, waardoor je niet voor elke browser een aparte “handleiding” hoeft te schrijven. Bovendien wil je natuurlijk dat jouw website er in alle browsers hetzelfde uitziet.

De “voorkant” van een website

De drie kerntalen / technologieën die browsers gebruiken zijn HTML, CSS en JavaScript. Met deze talen ontwikkel je de “voorkant” van een website, ofwel hetgeen dat zichtbaar is voor de bezoeker. Dit proces wordt ook wel “front-end development” genoemd.

De “achterkant” van een website

Naast front-end development is er ook een proces dat “back-end development” heet. Dit betreft de ontwikkeling van de “achterkant” van de website, ofwel hetgeen wat niet direct zichtbaar is. Denk hierbij bijvoorbeeld aan het maken van berekeningen, uploaden van bestanden, registreren van gebruikers, het genereren van nieuwsberichten en andere elementen uit een database en nog veel meer.

Om het allemaal niet meteen te ingewikkeld te maken en deze blog voor meer mensen begrijpelijk te houden, gaan we in dit artikel alleen in op de talen die de voorkant van de website vormen: front-end development dus.

HTML

HTML staat voor HyperText Markup Language en bepaalt de (basis) structuur van een website. Elk type inhoud (element) van een website wordt omringd door een zogenoemde “tag”.
Dit is een soort label waarmee je aan de browser aangeeft om wat voor inhoud het gaat.

Met HTML zijn verschillende van deze tags mogelijk. Denk bijvoorbeeld aan titels, paragrafen, blokken, lijstjes, tabellen en nog veel meer.
In het voorbeeld hieronder zie je een titel en een paragraaf, beide voorzien van tags:
<h1>Hier staat de titel</h1>
<p>Dit is een paragraaf.</p>

Om elementen nog meer van elkaar te kunnen onderscheiden kun je nog extra “labels” toevoegen (id’s en classes), waardoor je bijvoorbeeld de ene titel anders kunt opmaken dan de andere titel.

Met HTML geef je dus structuur aan een website, door de elementen van een label te voorzien. Met HTML is de basis van de website gelegd, maar zonder fatsoenlijke vormgeving ziet het er nog niet uit natuurlijk:

De opbouw van een website

Hoog tijd voor wat vormgeving en dat is waar de opmaaktaal CSS om de hoek komt kijken.

CSS

CSS staat voor Cascading Style Sheets en hiermee kun je de elementen van een webpagina vormgeven.
Doordat met HTML de elementen op een pagina zijn voorzien van een label, zijn deze goed van elkaar te onderscheiden en kun je deze in een Cascading Style Sheet aanroepen en eigenschappen voor de vormgeving meegeven.

Zo kun je ervoor zorgen dat een titel een bepaald lettertype krijgt, een blauwe kleur heeft, links uitgelijnd moet worden en een bepaalde grootte moet hebben. De browser zorgt er vervolgens voor dat de titel dan op deze manier gepresenteerd wordt aan de bezoeker.

Hieronder zie je hetzelfde voorbeeld als hierboven, maar nu opgemaakt met CSS.

De opbouw van een website

JavaScript

JavaScript is een scripttaal, waarmee een webpagina interactief en dynamisch gemaakt kan worden. Waar je met CSS aangeeft hoe een element eruit ziet, geef je met JavaScript aan wat het element moet doen.
Met JavaScript kun je bijvoorbeeld elementen animeren, slideshows in elkaar zetten, controleren of formulieren goed zijn ingevuld en nog heel veel meer.

Zo is bijvoorbeeld het open- en dichtklappen van het menu op de mobiele versie van deze website ook deels met JavaScript gemaakt.

Kort samengevat

Een website bestaat dus uit instructies die door een browser worden vertaald naar een visuele, interactieve presentatie. In het zichtbare deel (front-end) zorgen HTML-elementen voor de (basis) structuur, CSS voor de opmaak van deze elementen en met JavaScript kun je de elementen animeren en interactief maken.