Als u zelf wilt gaan stoeien met webcode, dan zijn hulpmiddelen voor ontwikkeling van HTML en CSS natuurlijk onontbeerlijk. Die hoeven niet eens geld te kosten, zo laat ik zien in mijn Handboek HTML 5 en CSS.

Om webpagina’s te kunnen schrijven, hebt u geen bijzondere of dure software nodig. In theorie is elke tekstverwerker (editor) waarmee tekst als kale ASCIItekst kan worden opgeslagen geschikt. Kladblok (voor Windows) of TekstEditor/SimpleText (voor Mac) voldoet al! Maar voor een comfortabeler leven als webdeveloper zijn er ook tal van gespecialiseerde programma’s beschikbaar. Veel ervan zijn gratis.

HTML-editors

Gespecialiseerde HTML-editors bieden allerlei voordelen: met codekleuring kunt u makkelijk de verschillende onderdelen zoals tags, attributen, eigenschappen en waarden herkennen, automatisch aanvullen van tags bespaart typewerk, spellingcontrole voor uw code scheelt debugtijd, automatisch inspringen maakt code beter leesbaar en zo is er nog veel meer.

Het aanbod van (gratis) editors is enorm en de keus is persoonlijk. Het beste advies is om er een paar uit te proberen. Verschillende websites bieden toplijsten aan van editors in allerlei soorten en smaken. Kijk voor een neutraal overzicht eens naar en.wikipedia.org/wiki/List_of_HTML_editors. Bekende namen zijn Visual Studio Code, Brackets (brackets.io), Atom (atom.io) en Sublime text (www.sublimetext.com). Visual Studio Code wordt hierna besproken.

🖋️ Microsoft Office is geen codeertool
Schrijf geen HTML, CSS of JavaScript in Microsoft Word. Ook Bestand, Opslaan als webpagina is geen goed idee. Hoewel het resultaat in een moderne versie van Office niet zo rampzalig is als het ooit was, bevat de webpagina veel overbodige code. Wilt u de opmaak van een Word-document behouden, plaats dan een pdf-versie op uw website. Of maak er zelf een HTML-pagina van met CSS voor de opmaak.

🖋️CSS-editors
U hebt voor het werken met CSS geen ander programma nodig. Alle moderne editors helpen u bij het schrijven van CSS net zo goed als bij HTML, inclusief automatisch aanvullen van code, de juiste opties voor inspringen, het plaatsen van accolades en codekleuring.

Visual Studio Code

Het overweldigende aanbod van HTML-editors kan het maken een keus nogal bemoeilijken. Stapt u nu in, kijk dan vooral eens naar Visual Studio Code (VS Code), te vinden op code.visualstudio.com. De editor is gratis en beschikbaar voor Linux, macOS en Windows. Aardigheidje: de interface en alle functies zijn geschreven in HTML, CSS en JavaScript. In feite is het programma een webtoepassing die is omgezet naar een oorspronkelijk Linux-, macOS- of Windowsprogramma. Dat is overigens meer dan een aardigheidje. Die opbouw zorgt er namelijk voor dat de gebruiker de interface en functies eenvoudig kan aanpassen en dat het betrekkelijk eenvoudig is om er extensies voor te maken. Er zijn dan ook veel extensies beschikbaar.

🖋️Electron
Het is wel vroeg om erover te beginnen omdat u nog nauwelijks uit het startblok bent, maar u leest het goed: webtoepassingen kunnen worden omgezet naar programma’s die op verschillende besturingssystemen werken. In dit geval is dat gedaan met Electron, een opensourcebibliotheek die wordt ontwikkeld door GitHub. Kijk als u er klaar voor bent eens op electronjs.org.

VS Code is een uitstekende editor voor HTML en CSS, maar ondersteunt veel meer talen, bijvoorbeeld JavaScript, TypeScript, PHP, Java, Python en C#. De basisondersteuning van HTML en CSS is prima, met codesuggesties (IntelliSense), automatisch sluiten van tags, informatie over tags bij aanwijzen, syntaxiskleuring, voorbeeldkleur, code samenvouwen en meer. Ook handig zijn de vele toetsencombinaties voor het bewerken van code: kopiëren van hele blokken, meerdere cursors tegelijk, alle keren dat een woord voorkomt ineens selecteren en meer. Op de website van VS Code staat een overzicht van toetsencombinaties. Met extensies kunt u nog veel meer handigheidjes toevoegen. De website is marketplace.visualstudio.com/VSCode, maar u kunt net zo makkelijk zoeken vanuit de interface van VS Code.

💡Liveserver
Een onmisbare extensie is Live Server van Ritwick Dey. Hiermee wordt op de achtergrond een lokale webserver gestart waarin elke verandering in de code zichtbaar is zodra het document is opgeslagen. En doordat het opslaan kan worden geautomatiseerd, bijvoorbeeld direct als de cursor het codevenster verlaat, werkt dit fantastisch. Zoiets als een liveserver lijkt misschien overdreven als u net begint. Maar zodra u met het schrijven van code aan de slag gaat, zult u merken hoeveel prettiger dat werkt.

Commerciële editors/IDE’s

Naast de gratis editors worden er ook editors verkocht. Dergelijke producten vallen in de categorie geïntegreerde ontwikkelomgeving: integrated development environment of IDE. Ze bieden veel meer mogelijkheden dan u als beginnende ontwikkelaar nodig hebt en zelfs in de fase daarna kunt u met de genoemde gratis editors prima projecten met HTML, CSS en JavaScript uitvoeren. De meerwaarde van de commerciële producten zit vaak in de ondersteuning en nog betere en meer functies voor ontwikkeling en samenwerken. Voorbeelden zijn:

• WebStorm (www.jetbrains.com/webstorm)
• Dreamweaver (www.adobe.com/nl/products/dreamweaver.html)

Aanvullende hulpmiddelen

Naast browsers en een code-editor zijn er nog een paar hulpmiddelen waarmee u het schrijven en doorgronden van HTML- en CSS-code vereenvoudigt. In de voorgaande paragrafen zijn er al enkele genoemd, maar voor de duidelijkheid staan ze hier bij elkaar.

Hulpmiddelen voor validatie

Eén hulpmiddel is nog geheel niet genoemd: de validator, een hulpmiddel om te controleren of uw code aan de webstandaarden voldoet. Een validator controleert of de code voldoet aan de eisen van de taal, zoals complete tags en verplichte attributen. U kunt een validator vergelijken met de spellingcontrole van een tekstverwerker. U doet uw best om zo zorgvuldig mogelijk te coderen en de validator wijst u op mogelijk achtergebleven fouten.

Fouten in HTML geven lang niet altijd zichtbare problemen in de browser, maar in complexere webapplicaties kunnen ze problemen geven. Met een validator bent u zulke problemen voor. Tijdens het leren van HTML is de waarde van een validator dat die laat zien waar uw code beter kan.

Afbeelding 1.10

17 Hoofdstuk 1 – Webtalen, browsers en editors

Op de website van het W3C zijn validators beschikbaar voor HTML en CSS, en u vindt er links naar andere validators:

• De HTML-validator staat op validator.w3.org.
• De CSS-validator is te vinden op jigsaw.w3.org/css-validator/.

De werking van de validators wijst zich vanzelf: u kunt een webadres laten controleren, een bestand uploaden of een codefragment typen of plakken.

Handboek HTML 5 en CSS, 6e editie

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 deze zesde, bijgewerkte editie van dit handboek leert u met beide webtalen werken. U leert eerst hoe u de content markeert met HTML. Daarna maakt u de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat u niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

U krijgt uitleg over het structureren van HTML-documenten en het markeren van alle onderdelen: paginakop, artikelkoppen, tekst, lijsten, hyperlinks, afbeeldingen, video en audio, formulieren en tabellen. Een goede paginastructuur in HTML is de beste garantie voor een geslaagde lay-out en opmaak met CSS. 

De tweede helft van het boek behandelt het maken van lay-outs en het opmaken van de onderdelen met CSS. Er wordt uitgebreid ingegaan op responsive design met alle technieken die CSS daarvoor biedt: gridlay-out, flexbox, multi-column en positionering.

U leert hoe u lettertypen downloadt, tekst opmaakt, navigatiemenu’s vormgeeft, kleur gebruikt en achtergronden maakt. Ook het werken met CSS-functies en het maken van overgangen, animaties en transformaties in 2D en 3D komen aan bod. 

Het boek is uitgebreid met uitleg over toegankelijkheid, container queries, een nieuw hulpmiddel voor responsive design, en cascade layers, voor meer controle over de cascade. 

Op handboek-html-css.nl vindt u code en (interactieve) voorbeelden.

Dit leerboek en naslagwerk geeft een stevige ondergrond voor het werken met de technieken die de basis vormen van modern webdesign. 

Website: handboek-html-css.nl 

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.