HTML is de afkorting voor HyperText Markup Language. Mocht je ‘hypertext’ heel fancy of juist intimiderend vinden klinken, heb ik slecht of juist goed nieuws voor je; hyperteksten zijn teksten die met elkaar verbonden zijn door hyperlinks, oftewel linkjes zoals je die al duizenden keren gezien hebt. Nu is dat de gewoonste zaak van de wereld, maar in een tijd waar je elke keer terug moest naar een index als je andere informatie wilde opvragen waren zulke koppelingen in een tekst revolutionair.

Tot zover het hypertext-deel, dan hebben we nog ‘markup language’ over. Direct vertaald zou dat ‘opmaaktaal’ worden, en daar wordt het een beetje verwarrend. Als je slechts één ding over HTML onthoudt, laat het dan dit zijn; je gebruikt HTML niet om te bepalen hoe data eruitziet, maar om te beschrijven wat voor data het ís.

Stel je een boek voor, zonder hoofdstukken, koppen, subkoppen en paragrafen. Ook geen paginanummers, gewoon een onophoudelijke lap tekst van 300 pagina’s lang. Probeer nu maar eens iets snel op te zoeken, of te begrijpen welke teksten bij elkaar horen of waar een hoofdstuk eindigt. Gaat je niet lukken.

Met HTML breng je structuur aan in data. Die zin daar? Da’s een subkop. Dat stukje? Een paragraaf. Die paar woorden? Maak daar een linkje van. Al die dingen bij elkaar? Die horen allemaal bij hetzelfde artikel. Hóe je dat precies aangeeft is voor nu nog niet belangrijk, daar komen we nog uitgebreid op terug in andere artikelen.

Met CSS laat je je gestructureerde data er mooi uitzien. Alle websites zijn van hetzelfde spul gemaakt (HTML), maar dankzij CSS zien ze er allemaal anders uit. CSS staat voor Cascading Style Sheets, waarbij ‘cascading’ belangrijk is. Dat betekent namelijk ‘overervend’. Dat overerven is best een dingetje, voor nu te ingewikkeld om snel maar duidelijk uit te kunnen leggen. Waar het op neerkomt is dat eigenschappen overal doorgevoerd worden totdat je expliciet aangeeft dat dat niet moet gebeuren. Lekker vaag, ik weet het, maar ook hier gaan we nog op terugkomen.

Wat zijn die ‘eigenschappen’ dan? Met CSS kun je meer dan je lief is! Zomaar een paar dingen die je aan kunt geven:

• positionering
• afmetingen
• tekstgrootte
• tekstuitlijning
• lettertypes
• kleuren
• achtergrondafbeeldingen
• animaties en transities
• marges
• schaling, rotatie
• randen
• schaduwen
• woordafbr
• eking

En zo kan die lijst nog wel eventjes doorgaan. Met CSS kun je een complete kermis maken van je pagina’s, de kunst is om dat niet te laten gebeuren.

Wil je op een juiste manier CSS gebruiken, zul je eerst fatsoenlijke HTML moeten leren schrijven. Je kunt met CSS heel goed slecht geschreven HTML wegplamuren, maar dan ga je gegarandeerd tegen problemen aanlopen. Je site onderhouden wordt een nachtmerrie, of op sommige devices zien je pagina’s er niet uit, of alles ziet er juist wél super sexy uit maar je bent niet te vinden in zoekresultaten omdat Google niks van de structuur van je website snapt. Correcte HTML is gelukkig automatisch makkelijker op te maken met simpelere CSS. Alsof het ervoor gemaakt is ;)

Van zichzelf is HTML niet bijzonder interactief. Ja, je kunt op linkjes klikken, een videootje laten afspelen en een formuliertje invullen, maar verder is het voornamelijk een combinatie van tekst lezen en plaatjes kijken.

Dat kan meer dan genoeg zijn om je doel te bereiken, maar vaak heb je toch een beetje extra functionaliteit nodig. Dat kan iets kleins zijn zoals een navigatiemenu dat pas tevoorschijn komt als je op een knopje drukt, maar dat kan ook een bestelformulier zijn dat uit meerdere stappen bestaat met ingewikkelde validatie, of een chatvenster of een hele online game.

Dat gaat je niet lukken met alleen maar HTML, daar heb je Javascript voor nodig - of JS zoals hippe mensen het noemen, want dat scheelt een hele lettergreep. Met Javascript kun je het zo gek niet bedenken of je krijgt het voor elkaar, maar zoals iemands oom ooit zei: with great power comes great responsibility.

Want ook al zou je een explosie kunnen laten horen elke keer als iemand een toets indrukt, betekent dat nog niet dat het ook daadwerkelijk een goed idee is. Het is net als bij CSS; je kunt met Javascript een hele kermis van je website maken, je kunt er (tot een bepaald punt) slechte HTML mee verbloemen, maar het is voor iedereen om ontelbaar veel redenen stukken fijner als je Javascript gebruikt om een goed HTML-fundament uit te breiden met functionaliteit, om met je HTML - en CSS - mee te werken in plaats van ertegen.

Een hoop informatie, een hoop termen, en een hoop die dingen die vrij abstract en overgesimplificeerd uitgelegd zijn. Dat kan even niet anders, anders was dit een website op zich geworden.

Het doel van dit artikel was om in vogelvlucht duidelijk te maken wat HTML, CSS en JS nou eigenlijk zijn en hoe ze met elkaar in verband staan. In principe komt het op het volgende neer:

• HTML gebruik je om data te structureren, bijvoorbeeld door kopjes, subkopjes, paragrafen en linkjes te definiëren.
• Met CSS maak je die gedefinieerde data mooi op. Dit doe je door tientallen eigenschappen te definiëren voor een element, bijvoorbeeld de tekstkleur, achtergrond of uitlijning.
• Met Javascript breidt je de interactiviteit van HTML uit. Je kunt ermee het gedrag van één knopje aanpassen, maar je kunt er ook een hele VR-game in programmeren.

Voordat je je eerste HTML-stapjes gaat zetten, gaan we eerst zorgen dat je fatsoenlijk gereedschap hebt. Na de klik gaan we gratis software installeren en configureren zodat je daarna aan de slag kunt!