Javascript, CSS en HTML zijn verschillende onderdelen die samen een website maken. Ze zorgen elk voor een structuur, het uiterlijk en alle functionaliteit op je website die bezoekers graag zien. Vroeger werd alleen HTML gebruikt. Misschien herken je de simplistische websites uit die tijd nog wel. Met Javascript en CSS kun je tegenwoordig veel modernere en uitgebreidere websites maken. De drie onderdelen vullen elkaar goed aan en zijn eigenlijk niet meer weg te denken uit alle huidige websites op het internet.
Wat zijn de verschillen?
Ondanks dat CSS, HTML en Javascript elkaar goed aanvullen, zijn het alle drie wel degelijk verschillende toepassingen. Voor elk website-onderdeel lees je hieronder een korte omschrijving, inclusief uitleg hoe dit specifieke programma werkt.
Wat is CSS?
CSS staat voor Cascading Style Sheets en geeft aan hoe de HTML van je website wordt weergegeven. CSS gaat dus over de opmaak of indeling op je website. Om de opmaak en indeling weer te geven, wordt gebruik gemaakt van selectors en declaraties om alle elementen vorm te kunnen geven. CSS3 is de belangrijkste versie.
Hoe werkt CSS?
CSS zorgt er dus voor dat je website er mooi uit komt te zien. Dit doet CSS door de HTML bestanden van je website aan te vullen. Dit heet ook wel declaraties toekennen. Hiervoor valt CSS niet onder de <html> of <head> tags, maar onder de <style> tags.
De body, de titel en alle paragrafen van je website krijgen verschillende declaraties. Zo kun je voor elk onderdeel een positie, kleur, lettertype of lettergrootte kiezen.
Wat is HTML?
HTML staat voor Hyper Tekst Markup Language en kan het beste omschreven worden als de standaard ‘opmaak’ voor je website. HTML legt als ware de fundering of de basis voor je website, waar programma’s als CSS later mooie dingen van kunnen maken. Met HTML bouw je je website op aan de hand van verschillende tags en bouwblokken. De laatste versie van HTML is HTML5.
Hoe werkt HTML?
De basisstructuren van je website worden dus opgebouwd via HTML. Je hebt verder nog geen opmaak of functionaliteit, maar vergelijk het met je eigen huis: een schilderij ophangen zonder dat je een muur overeind hebt staan gaat je ook niet lukken. De HTML van je website wordt opgebouwd met verschillende tags, zoals we hierboven bij CSS al aangaven.
De allereerste tags die je tegenkomt zijn de <doctype html> tags, die aangeven dat de website is opgebouwd door middel van HTML. Vervolgens zie je dat alle onderdelen van je website met tags zijn vormgegeven. Er wordt onderscheid gemaakt tussen de <body> en de <head> tags. Die zorgen respectievelijk voor de getoonde informatie op de website en de achterliggende processen, script of toepassingen die bezoekers niet hoeven te zien.
Een voorbeeldwebsite in HTML ziet er altijd heel somber uit, maar daarvoor komen CSS en Javascript om de hoek kijken. Hiermee kun je de HTML versie een mooiere vorm geven.
Wat is Javascript?
Javascript is een programmeertaal die je kunt gebruiken om je websites dynamisch te maken. Wanneer je HTML gebruikt, zet je alleen de fundering op en met CSS maak je HTML wat aantrekkelijker, maar dan heb je verder nog een statische website waar je weinig mee kan. Hier komt Javascript bij kijken: de programmeertaal maakt je website dynamisch door dingen te laten berekenen, te valideren of verder interactief te maken. Daarmee is de front-end weergave van je website compleet.
Hoe werkt JS?
Binnen de tags van je website valt Javascript onder de scripts – maar dat komt, aangezien de naam van de programmeertaal, misschien niet als een verrassing. Door met Javascript te programmeren kun je dingen interactief maken of dagelijks laten veranderen. Zo kun je in de script tags bijvoorbeeld live de tijd of datum invoeren, die ook elke dag veranderd. Zou je dit doen zonder Javascript, moet je elke dag handmatig de code aanpassen naar de datum van die dag. Verder kan Javascript ook je zoekopdrachten voorspellen, zoals je dat bijvoorbeeld op YouTube of Google ziet. Je kunt met Javascript zelfs spelletjes maken of grafische dingen weergeven. De mogelijkheden met Javascript zijn enorm.
Website maken met HTML, CSS en Javascript
Voor eenvoudigere websites kun je met HTML, CSS en Javascript prima uit de voeten. Deze drie front-end onderdelen van je website volstaan in principe om een wat eenvoudigere website op een mooie en functionele manier aan je bezoekers te tonen. Ga je werken met een wat complexere of grotere website, zullen HTML, CSS en Javascript niet meer voldoen.
Dan zul je ook moeten gaan werken met back-end onderdelen voor je website. Waar HTML, CSS en Javascript als front-end onderdelen wel direct zichtbaar zijn voor je bezoekers, zijn de back-end onderdelen dat niet. Denk hierbij aan SQL, PHP, Python of nog veel meer. Door front-end en back-end samen te voegen ontstaat een zogeheten ‘full stack’, die je grote website prima ondersteund. Toch zijn HTML, CSS en Javascript samen prima als je een wat kleinere website wilt runnen, bijvoorbeeld met voornamelijk informatieve pagina’s.
Conclusie: HTML, CSS en Javascript
Met HTML, CSS en Javascript kun je voor een groot deel bepalen wat de bezoekers van je website te zien krijgen. HTML zorgt voor de basis van je website. CSS zorgt ervoor dat de basis er wat aantrekkelijker uit komt te zien. Javascript maakt dit af door je website dynamisch en interactief te maken. Het is verstandig je website ook in deze volgorde op te bouwen. Begin dus met HTML, en bouw vervolgens uit naar respectievelijk CSS en Javascript. Voor elke stap kun je op zoekmachines als Google uitgebreide stappenplannen vinden om jouw website mooi vorm te geven.
Lees ook eens onze blogs over iFrames en het insluiten van YouTube video’s. Waarschijnlijk vind je onze blog over wat een frontend developer doet ook interessant.
