hulpmiddelen voor ontwikkeling van HTML en CSS

Hulpmiddelen voor ontwikkeling van HTML en CSS

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.

hulpmiddelen voor ontwikkeling van HTML en CSS
Visual Studio Code, een veelzijdige editor voor HTML en CSS.

💡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:

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.

hulpmiddelen voor ontwikkeling van HTML en CSS
HTML-validatieservice van het W3C. Voor CSS is een vergelijkbare interface beschikbaar.

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 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

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 

  • Zonder coderen taken automatiseren met Zapier!
    Zonder coderen taken automatiseren met Zapier!

    Ontvang je wel eens een antwoord op een webformulier en stuur je dat handmatig door naar de persoon die het antwoord moet afhandelen? Heb je wel eens een chatbot gebouwd, of een webpagina? Ongetwijfeld deed je dat handmatig, of moest je ervoor programmeren, hetzij in HTML of in JavaScript. Dat kan anders, met Zapier! Zapier…

  • Zoekmachines en Chatbots in het AI-tijdperk: Wie heeft de meeste potentie?
    Welke zoekmachine of Chatbot heeft in dit AI-tijdperk de meeste potentie?

    De enorme opkomst van AI heeft ook enorme invloed op de mogelijkheden van zoekmachines. Het was altijd Google wat de klok sloeg, maar nu zijn er andere kapers op de kust. Je hebt Bing/Copilot van Microsoft, dat werkt met AI en Bard (inmiddels Gemini), dat met Google AI werkt. Welke zoekmachine je op dit moment…

  • koelen van je Raspberry Pi
    Koelen van je Raspberry Pi

    Met de komst van de RPI 4 en helemaal de RPI 5 ontkom je niet meer aan het koelen van je Raspberry Pi.

  • Raspberry Pi op batterijen
    Raspberry Pi op batterijen

    Een Raspberry Pi op batterijen laten draaien maakt de kleine krachtpatser nóg breder inzetbaar. In het veld bijvoorbeeld. Al dan niet af en toe bijgetankt door een zonnepaneel.

  • De beste USB-C kabels voor dataoverdacht en opladen
    Vind de juiste USB-C kabels voor dataoverdracht én opladen!

    Vanwege mijn nieuwe – tweedehands – Mac Studio boog ik me weer eens over het USB-C-kabel- en poortenprobleem. Wat is een goede USB-C-kabel? Wat is de snelheid van de USB-C-poorten? Op de Mac Studio heb je lekker veel USB-C-poorten – zes om precies te zijn – en ook nog twee USB-A-poorten. De kabels die je…

  • Nieuw in Photoshop Elements 2024
    Dit is er nieuw in Photoshop Elements 2024

    Elk jaar maakt Adobe een nieuwe versie van Photoshop Elements. We zijn nu aangekomen bij Photoshop Elements 2024. Photoshop Elements lijkt het kleine broertje van grote broer Photoshop, maar onderschat Elements niet. Handelingen die in de grote Photoshop ingewikkeld zijn, zijn in Elements teruggebracht tot eenvoudige handelingen. Ook worden er regelmatig nieuwe mogelijkheden uitgeprobeerd die…

Geef een reactie

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.