HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In de zesde, bijgewerkte editie van het Handboek HTML en CSS leer je met beide webtalen werken. Je leert eerst hoe je de content markeert met HTML. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt van dit handboek daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken. We spraken in met Peter Doolaard, de auteur van het boek over de doelgroep van het boek en het nog steeds ontbreken van een goede wysiwyg-editor voor websites.

Voor wie heb je het boek geschreven?
Peter Doolaard: ‘Het is geschreven voor degenen die precies willen weten wat er achter al die tags en eigenschappen van HTML en CSS zit. Het is welbewust niet zo’n boek waarbij je heel snel van stapje een naar stapje vijf gaat. En hop! Nu werkt je website. Dan heb je eigenlijk nog geen idee wat je hebt zitten doen. Dat maakt mijn boek misschien tot een meer theoretisch boek. Het wordt daardoor ook veel in het onderwijs gebruikt. Misschien is het niet het eerste boek dat mensen zouden pakken als ze in de boekhandel lopen. Dan missen ze de stappenplannen voor het maken van een site, die je wel in andere boeken vindt. Ik heb er zelf lol in om te achterhalen waarom HTML en CSS doen wat ze doen. Het boek is voor de zeer geïnteresseerde lezer.’

Maar die lezer kan, als hij het boek heeft gelezen, wél een website bouwen…
PD: ‘Zeker! Het is niet zo dat je in het begin van het boek start met een opdracht en aan het eind van het boek heb je een site. Er zitten natuurlijk wel oefeningen in het boek. Omdat het een boek is dat veel in het onderwijs wordt gebruikt zijn er veel docenten die zelf hun opdrachten erbij ontwikkelen. Maar die complete site zit dus niet in het boek. Ik heb er wel over getwijfeld of ik zoiets er toch niet in zou moeten stoppen. Uiteindelijk heb je na het lezen van het boek wél de kennis om een site te bouwen.’

Is het maken van websites niet heel specialistisch geworden? Iemand is goed in HTML of CSS of JavaScript…
PD: ‘Klopt! Maar! Het is leuk dat je dit zegt. Webapps en sommige websites drijven op JavaScript, maar niet zonder die HTML en CSS. Het enige wat je met JavaScript doet is het manipuleren van de HTML-elementen en de CSS-eigenschappen. En als je niet weet wat de mogelijkheden van die elementen zijn kun je die met JavaScript ook niet benutten. Toevallig las ik dit weekend op medium.com een artikel daarover. Een ontwerper verbaasde zich erover dat het leek of je niet meetelde als je JavaScript niet beheerste. Te zien aan de vele reacties onder dat bericht merkte ik dat ze echt een open zenuw had geraakt. Veel ontwikkelaars die juist heel goed zijn in HTML en CSS en niet in JavaScript voelen zich soms misschien achtergesteld. Achtergesteld is misschien niet het juiste woord, maar ze kregen wel het gevoel dat ze minder serieus werden genomen omdat ze JavaScript niet goed beheersten. Je kunt nog zo’n goede javascripter zijn, als je niet weet hoe het DOM in elkaar zit – niet weet welke HTML-elementen er zijn – dan sta je nog steeds met lege handen. Tenzij je helemaal vertrouwt op frameworks. In zaken als Bootstrap zit van alles in kant-en-klare bestanden en dan is de noodzaak om de achtergronden te kennen niet zo groot meer.’

Nieuwe mogelijkheden in HTML5 en CSS3

Wat zijn nieuwe mogelijkheden in HTML5 en CSS3?
PD: ‘Wat HTML betreft gaat het om de structuur. HTML had altijd al veel elementen, veel tags, met HTML5 is meer de nadruk komen te liggen op structuur. Dat vind je in het boek ook steeds terug. Door nieuwe elementen kun je heel goed kunt aangeven wat de betekenis is van de inhoud van de tekst en afbeeldingen. Het maakt documenten voor mensen beter leesbaar. En je kunt een beter gestructureerd DOM genereren, waardoor browsers het makkelijker kunnen weergeven en de kans op fouten ook kleiner wordt. In CSS3 is het vooral uitbreiden van opmaakmogelijkheden. Als je nu met CSS bezig bent, lijkt het eigenlijk steeds meer of je in InDesign een pagina op aan het maken bent. Ook op het gebied van typografie is er steeds meer mogelijk. Je hebt nu al meer dan honderd verschillende HTML-elementen en 169 CSS-eigenschappen. Je moet dus flink veel kennis hebben om daar mee te kunnen werken.’

Leuk dat je het voorbeeld van InDesign noemt. Ooit was het ook de bedoeling dat er een goede wysiwyg-editor voor websites zou komen. Hoe zit het met Dreamweaver of Muse? Zie je dat zitten? Is er een goede wysiwyg-editor?
PD: ‘Een wysiwyg-editor is leuk, maar vaak wordt er zoveel overbodige code toegevoegd. Je krijgt óf een te zware site met te veel elementen, óf je hebt veel extra werk om de code op te schonen. Vandaar dat er meestal in kale code-editors gewerkt wordt. Ik heb Dreamweaver wel, maar eigenlijk gebruik ik het nooit. Hoewel je er ook steeds beter mee in de kale code kunt werken. Er is eigenlijk geen goede wysiwyg-editor voor websites. Dat kan ook haast niet.’

Vind je dat niet raadselachtig? Waar ligt dat dan aan?
PD: ‘Dat weet ik niet precies. Je kunt in Dreamweaver bijvoorbeeld CSS maken, maar je moet daarvoor uiteindelijk wel verstand hebben van CSS. Het probleem is vaak, dat je met zo’n wysiwyg-editor niet alles hoeft te weten. Je maakt alles visueel. Je sleept een tekstkader, plakt een afbeelding. Op de achtergrond worden dan heel veel CSS-klassen toegevoegd. Uiteindelijk komt er een heleboel code in om de site met CSS te kunnen opmaken. Daar worden die bestanden zo zwaar van. Teveel CSS-klassen, teveel HTML-elementen. Ik zeg niet dat het verkeerd is, maar het levert nooit schone efficiënte code op. Bij InDesign zie je niet precies wat er op de achtergrond gebeurt. Maar die HTML- en CSS-code die je in je browser gewoon kunt bekijken, laat genadeloos zien wat voor code er is gegenereerd. Een ontwikkelaar streeft ook naar mooie code. Bij HTML en CSS speelt natuurlijk ook nog mee dat hoe meer code je in die browser pompt, hoe zwaarder die browser het heeft om er iets goeds van te maken. Het moet ook allemaal over dataverbindingen verstuurd worden. Vandaar het streven naar zo schoon mogelijke code. Dreamweaver en Muse zijn natuurlijk wél hele mooie applicaties, je hoort mij niet zeggen dat ze waardeloos zijn.’

WordPress voor websites

WordPress is een andere vorm van wysiwyg. Je hoeft hierbij eigenlijk helemaal niet meer aan de gang te gaan met code. Je hebt een thema en op de achtergrond draait een CMS…
PD: ‘WordPress lijdt natuurlijk aan hetzelfde syndroom als de wysiwyg-editors. Er zit ontzettend veel code in die lang niet iedereen gebruikt en die wel altijd mee komt naar je browser. WordPress maakt behoorlijk zware sites. Om daar de conclusie aan te koppelen dat het verkeerd is, gaat veel te ver. Het is een fantastische manier om snel websites te kunnen maken. Met al die verschillende WordPress-thema’s kun je je sites heel verschillend maken. Als je echt iets speciaals wilt maken, dan moet je wel weten hoe WordPress zelf in elkaar zit. Dan moet je tóch weer verstand hebben van CSS.’

Ik pas regelmatig wel wat aan in het CSS, maar ik heb eigenlijk veel te weinig kennis om dat bewust te doen. Ik zoek op Google de oplossing van een probleem en plak dan de code die ik vind in het CSS. En als ik de mogelijkheden wil uitbreiden, stop ik er een plug-in bij…
PD: ‘Dat is wel de kracht van WordPress. Voor jou en heel veel anderen is het makkelijk om zoiets toe te voegen. Je hoeft niet diep in de code te duiken. Activeer een widget en klaar ben je. De keerzijde van al dat gemak is een behoorlijke overhead aan code. Het is niet zo dat alleen WordPress daaraan lijdt… Ik noemde daarstraks Bootstrap – een CSS framework – en dat is ook behoorlijk zwaar. Dat houdt namelijk rekening met zoveel mogelijk wensen. Naarmate je meer mensen een plezier wilt doen voeg je automatisch ook steeds meer code toe. En als je dan niet precies weet waarom iets erin staat en wat het doet, kun je ook nooit besluiten om iets eruit te halen om een site lichter te maken. Werken met HTML en CSS is ook gewoon een vak. Net als je software programmeert, in die categorie valt werken met HTML en CSS ook, als is het misschien minder complex. Het is echt een specialisme.’

Wat voor kennis heb je nodig voordat je met jouw boek begint?
PD: ‘Je hoeft niet per se specifieke kennis te hebben om met het boek te beginnen. De wetenschap dat HTML en CSS bestaan is voldoende om er mee aan de slag te gaan. Het wordt allemaal vanaf het begin uitgelegd. Ik vertel in het boek veel over de achtergronden waarom sommige dingen zo werken. Het is een boek dat prima geschikt is voor mensen die nog helemaal blanco tegenover de materie staan, maar ook voor de meer ervaren webontwikkelaar als naslagwerk, omdat vrijwel alle HTML-elementen en CSS-eigenschappen worden besproken

.’

Hans Frederiks

Hans Frederiks is journalist en fotograaf en hoofdredacteur van blog.computercreatief.nl. Hij schrijft over ontwikkelingen op het gebied van computers, van vormgeving op het web en print, en fotografeert al zijn hele leven lang. Zijn specialisaties zijn panorama’s, landschappen en podiumfotografie. Zijn blog vind je HIER, zijn boeken vind je HIER.