Is er een duidelijk verschil tussen HTML, CSS en Javascript?
HTML, CSS en Javascript zijn verschillende onderdelen van een website. Samen voorzien ze de structuur, het uiterlijk en de functionaliteit die de gebruikers gewoon zijn. In de prille dagen van het commerciƫle internet werden er nog een deel websites met enkel en alleen HTML opgebouwd. Dit zorgde voor heel simplistische weergaven en weinig mogelijkheden.
Dankzij CSS en Javascript hebben we nu meer mogelijkheden. Er dus een duidelijk verschil tussen een website met enkel HTML en een website met HTML, CSS en Javascript. Ze werken aanvullend en zijn in deze moderne tijdens niet meer weg te denken van het digitale web.
Wat is HTML?
HTML (Hyper Text Markup Language) is de standaard ‘opmaaktaal’ voor websites. HTML vormt steeds de basis en fundering van elke website. Door een reeks tags en digitale bouwblokken ontstaat er een webpagina. De meest recente versie is HTML5.
Als we een webpagina vergelijken met een huis, kan je HTML zien als de fundering en structuren. Met HTML bouw je de pagina op. In theorie kan je een website maken door enkel en alleen HTML te gebruiken. Toch zal dit een heel statische website weergeven, zonder opmaak of verdere functionaliteit.
In dit voorbeeld zie je duidelijk dat HTML wordt opgebouwd met tags (< >). Doctype html maakt aan de browser duidelijk dat het om een HTML-bestand gaat. Vervolgens begint en eindigt de hele pagina met een HTML tags. In het body-gedeelte van de pagina wordt de inhoud geplaatst en in het head-gedeelte zien we meer scripts en toepassingen die de bezoekers niet rechtstreeks te zien krijgen.
Je ziet dan ook aan de rechterzijde hoe deze pagina er op een browser zou uitzien. Momenteel is dat nog heel sober en statisch. Dit is waarom we CSS en Javascript toevoegen aan een website. Maar we starten met HTML om de basis klaar te maken.
Wat is CSS?
CSS (Cascading Style Sheets) bepaalt hoe de HTML van een webpagina wordt weergegeven. CSS omvat dus de opmaak en indeling van je website. CSS maakt gebruik van selectors en declaraties om terugkerende elementen vorm te geven. CSS3 is de meest relevantie versie.
Als we CSS vergelijken met een huis, kan je CSS zien als de schilderwerken en het meubilair van de woning. Het deelt de opmaak en ruimte in. CSS vult HTML verder aan. Door de onderdelen van een HTML-pagina te declareren met CSS, krijgen we een mooie opmaak.
In dit voorbeeld zien we de CSS tussen style-tags staan. De body, titel en paragraaf krijgen declaraties toegekend. Nu zie je aan de rechterzijde dat onze HTML, dankzij CSS, andere posities heeft gekregen. Niet alleen de posities maar ook de kleuren, het lettertype en de lettergrootte zijn nu vastgelegd.
Hopelijk zie je nu al stilaan de kracht van CSS + HTML in. Zo bouw je de basis en het uiterlijk van je website op. Uiteindelijk maak je iets knap, waar je trots je bezoekers naartoe kan sturen. Let op: zonder Javascript hebben we nog altijd een statische website zonder verdere functionaliteit.
Wat is Javascript?
Javascript is een programmeertaal voor het digitale web. Dankzij Javascript kunnen we HTML en CSS dynamisch maken. Met Javascript kunnen we berekeningen maken, data valideren en een website interactief maken. HTML, CSS en Javascript vormen samen de front-end van een website.
Als we Javascript met een huis kunnen vergelijken, zou je Javascript als de technieken kunnen beschouwen. Javascript doet je website leven en geeft dynamische elementen op de webpagina weer. Samen met HTML en CSS vormt het de front-end weergave van je website.
In dit voorbeeld staat Javascript tussen de scripts-tags. Dankzij deze code kan je nu een datum op een website tonen. Zonder Javascript zou je, volgens dit voorbeeld, de datum elke dag handmatig moeten veranderen. Dat is nu niet meer nodig omdat je dankzij Javascript kan programmeren in een webomgeving.
Andere toepassingen van Javascript zijn de suggesties die verschijnen op YouTube en Google wanneer je een zoekterm aan het typen bent. Je kan er zelfs grafische weergaven en spelletjes mee maken.
Verschillende browsers
Met HTML, CSS en Javascript bouw je de front-end weergave van je website op. Vervolgens is het aan de internetbrowsers om deze code te interpreteren en aan de bezoekers te tonen. De browser zet de code om in een website. Verschillende browsers kunnen websites verschillend tonen. Deze verschillen zullen niet altijd heel duidelijk zijn, maar wel subtiel aanwezig.
Dit zijn enkele populaire browsers:
- Google Chrome
- FireFox
- Opera
- Safari
- Edge
Er zijn nog verschillende andere browsers maar je kiest best voor een moderne browser. Ze zijn sneller, vlotter en veiliger om op het internet te surfen. Een goede browser zorgt er ook voor dat een website beter getoond wordt. Lees: De HTML, CSS en Javascript worden beter getoond.
Is HTML, CSS en Javascript genoeg om een website te maken?
Voor de meeste (eenvoudige) websites zijn HTML, CSS en Javascript voldoende. We hebben het al enkele keren gehad over de front-end weergave van een website. Dit is wat de gebruikers te zien krijgen. Toch hebben grotere websites vaak complexere databases en andere programmeertalen of frameworks.
Zo kan een website ook SQL, PHP, Python, … gebruiken. Denk maar aan zoekmachines, social media websites, webshops, … Daarvoor heb je ook een back-end weergave nodig. Front-end + Back-end noemen we samen ‘Full stack’. Toch is het als beginner of als eigenaar van een kleine of ‘gewone’ website voldoende om met HTML, CSS en Javascript aan de slag te gaan!
Conclusie
HTML, CSS en Javascript gaan hand in hand om een succesvolle website op te bouwen. Ze werken aanvullend en je kan ze als familieleden van elkaar beschouwen. Wil jij alvast aan de slag gaan? Leer dan eerst HTML om je eerste webpagina en structuren op te bouwen.
Verdiep je nadien in CSS en uiteindelijk ook in Javascript. Dat is de volgorde waarop je een website maakt en je web design moet leren. Werk je toch liever met een CMS dat dit proces automatiseert? Neem dan eens een kijkje naar WordPress CMS. Lees alvast ook ons artikel: 10 Voordelen van een WordPress website
Toch liever aan de slag met je eerste cursus HTML? Dan raden deze HTML Tutorial van W3Schools aan.
