Startups schieten als paddenstoelen uit de grond en technologische innovaties volgen elkaar snel op. Er lijken wel een miljoen redenen te zijn om je eigen website te maken… en ook een miljoen website builders om je daarbij te helpen waaronder ook gratis html-editors.
Of het nu gaat om het verkopen van een product, het creëren van een ruimte waar mensen met vergelijkbare interesses met elkaar in contact kunnen komen of om je interesse in het maken van een website te bevredigen, een website is een uitstekend middel om verbinding te maken met miljoenen mensen.
En of je nu een whizzkid in webdesign bent of een beginner, waarschijnlijk weet je al dat het van belang is om enigszins bekend te zijn met HTML (HyperText Markup Language), een standaard opmaaktaal voor het ontwerpen van websites.
Omdat HTML een van de meest gebruikte opmaaktalen voor het bouwen van websites is, kan het geen kwaad om hier wat kennis over te hebben. En hoe zou je het vinden als er een programma bestaat waarmee jij je HTML kunt verbeteren… of waarmee je er op z’n minst voor kunt zorgen dat je code geen fouten bevat?
Nou, die tool is er, en wel in de vorm van een HTML-editor, oftewel een bewerkingsprogramma voor de code. Hieronder staan 14 opties voor HTML-editingtools (waaronder gratis html-en CSS-editors).
Maar eerst bekijken we wat een HTML-editor is en waarin een aantal HTML-tools verschillen. Ook beschrijven we de mogelijkheden die elke editor te bieden heeft.
Wat is een HTML-editor?
Een HTML-editor is een tekstbewerker voor code. Het kan een zelfstandig programma zijn, maar maakt ook vaak deel uit van een bredere Integrated Development Environment (IDE). Dat is in wezen de toolbox van ontwikkelaars waarmee code niet alleen kan worden bewerkt, maar ook kan worden gecompileerd, geïnterpreteerd en gecorrigeerd.
Meer in het bijzonder is een HTML-editor een tool waarmee je je code kunt bijhouden. Hoewel je technisch gezien je code in elke tekstbewerker kunt typen, biedt een HTML-editor de nodige functies om ervoor te zorgen dat je code goed geschreven is… of op z’n minst foutloos is.
De meest elementaire functionaliteit van een HTML-editor is syntaxiscorrectie of spellingcontrole voor code. HTML-editors hebben vaak ook een functie voor het tracken van de syntaxis, waarmee de verschillende delen van de code worden gemarkeerd om het lezen te vergemakkelijken en verschillende onderdelen regel voor regel van elkaar worden gescheiden. Meestal kun je ook algemene HTML-elementen invoegen of deze automatisch laten aanvullen.
Voor iedereen die wel eens vergeten heeft om een haakje af te sluiten is alleen die mogelijkheid al een waar geschenk uit de hemel.
Waarom zou ik een HTML-editor gebruiken?
Voor iemand die dagelijks blogartikelen schrijft, is het een zegen om een revisor te hebben die controleert of alles er goed uitziet voor de lezer.
Een HTML-editor kan je beschouwen als je revisor, een controle waarop je kan vertrouwen en die een hoop gemak biedt. Zelfs een meester in coderen maakt wel eens een tikfoutje na een hele dag code schrijven. Een HTML-editor helpt bij het ondervangen van fouten zodat je niet handmatig honderden regels code langs hoeft te gaan om te zien waar het fout ging.
Hoewel we ons specifiek bezighouden met de manier waarop een editor omgaat met HTML, zijn er veel editors die ook andere talen aankunnen, zoals CSS of PHP, zodat je over meer mogelijkheden beschikt als je je verder wilt bekwamen in webdesign.
Maar voordat je op zoek gaat naar de HTML-editor van je dromen, is het nuttig om te weten dat er twee soorten HTML-editors zijn, die geschikt zijn voor ontwikkelaars met verschillende ervaringsniveaus.
Tekstuele HTML-editors
Een tekstuele HTML-editor geeft de code regel voor regel weer, precies zoals jij die geschreven hebt.
Geschikt voor: de meer ervaren codeerders, degenen die een goede controle over hun code willen en degenen die overvolle code haten. Dit soort codeerders kunnen het beste een tekstuele HTML-editor gebruiken.
WYSIWYG HTML-editors
WYSIWYG is de afkorting van “What You See Is What You Get.” Dat betekent dat wanneer je een webpagina ontwerpt in een WYSIWYG-editor, je precies weet hoe de pagina eruit komt te zien voordat je deze uploadt of test. De meeste van deze editors werken met slepen-en-neerzetten, wat ze bijzonder handig maakt.
Geschikt voor: de minder ervaren codeerders en degenen die meer gericht zijn op ontwerp dan op code. Dit soort codeerders zou beter naar een WYSIWYG-editor kunnen kijken dan een tekstuele editor.
Maar zijn er dan wel gratis HTML-editors?
We zouden de hele dag door kunnen gaan met praten over handige coderingstools. Maar als je nog maar net begonnen bent met coderen of als je van plan bent een bureau voor webdesign te beginnen, zijn je financiële middelen wellicht beperkt.
Gelukkig zijn er aardig wat gratis open source HTML-editors te krijgen. We belichten er hier 14, waarbij onderscheid wordt gemaakt tussen tekstuele editors en WYSIWYG-editors. Ze staan hieronder in alfabetische volgorde, samen met een korte beschrijving van de respectieve mogelijkheden.
Gratis tekstuele HTML-editors
Denk eraan dat je voor deze editors wel de nodige ervaring met HTML of een andere codeertaal moet hebben. Deze editors bieden ondersteuning wanneer je fouten maakt, maar ze kunnen geen code voor je schrijven.
Aptana Studio 3
Aptana Studio is een aanpasbare open source IDE. Naast HTML5 kan deze tool CSS, JavaScript, PHP, Ruby, Rails en Python bewerken. De oplossing kan worden geïntegreerd met Git voor versiebeheer en kan worden geïmplementeerd met FTP-, SFTP-, FTPS- en Capistrano-protocollen. De laatste update vond plaats in maart 2017.
Arachnophilia is een open source HTML-editor geschreven in Java (omdat de maker ervan, Paul Lutus, Microsoft-producten boycot). De editor ondersteunt Unicode en kan ook projecten in PHP, Perl, C++, Java en JavaScript bewerken. Bovendien heeft de editor een ingebouwde FTP-client om te helpen bij de implementatie. De laatste update vond plaats in april 2018 waarbij XHTML werd inbegrepen.
Bluefish is een open source code-editor die draait onder Linux, Mac OS X, Windows, FreeBSD, OpenBSD en Solaris. De editor ondersteunt FTP-, SFTP-, HTTP-, HTTPS-, WebDAV- en CIFS-protocollen. Voor degenen die werken aan grote projecten kan Bluefish meer dan 500 documenten tegelijk geopend hebben. Wijzigingen in documenten worden automatisch hersteld als je systeem vastloopt tijdens het coderen. De tool is ook geschikt voor aardig wat andere talen, zoals C++, Google Go, Java, Perl, PHP, Python en R. De laatste update vond plaats in 2017.
CoffeeCup levert een gratis HTML-teksteditor. Maar als je behoefte hebt aan meer WYSIWYG-mogelijkheden, is er tegen betaling ook een “Visual Editor” verkrijgbaar. Je kunt met CoffeeCup zowel HTML- als CSS-bestanden maken en bestaande websitebestanden bewerken. Bovendien kun je content op pagina’s bijwerken met de Components Library.
Eclipse biedt een reeks plug-ins, waaronder een HTML-editor, in de open source Web Developer Tools-kit. Bovendien heeft de tool plug-ins voor het bewerken van CSS, JSON en JavaScript. Op de site van de leverancier wordt gewaarschuwd dat “nieuwe gebruikers het verwarrend kunnen vinden” als ze alleen maar HTML-code willen bewerken. Dus zouden beginnelingen deze editor misschien het beste kunnen negeren, terwijl ervaren codeerders de flexibiliteit van Eclipse juist aantrekkelijk zullen vinden. De laatste update vond plaats in maart 2019.
Komodo IDE van ActiveState heeft een uitgeklede gratis versie van een uitgebreider systeem, naast licenties waarvoor betaald moet worden. Maar ook de gratis versie biedt enkele krachtige functies, zoals automatisch aanvullen en tools voor debugging. De editor is tevens geschikt voor een aantal andere talen, zoals Python, Perl en Node.js.
Als je Microsoft niet boycot zoals Paul Lutus, de maker van Arachnophlia, zou je eens kunnen kijken naar de gratis “Community”-editie van de IDE van Microsoft Visual Studio, die ondersteuning biedt voor vijf gebruikers. Hoewel de betaalde versies geavanceerdere functies te bieden hebben, bevat de gratis versie alle essentiële tools voor HTML-editing. Bovendien zijn er enkele handige functies voor het ontwikkelen van mobiele apps, zoals het delen van code tussen Android en iOS.
NetBeans is een gratis en open source IDE waarmee je kunt coderen in HTML5, PHP, JavaScript, C++ en verschillende andere talen. De editor bevat codesjablonen en -generators, naast tools voor projectmanagement ter ondersteuning van grotere projecten en teams. Bovendien is er een grote marketplace voor plug-ins en worden ontwikkelaars aangemoedigd hun eigen plug-ins te schrijven en te delen. De laatste update vond plaats in april 2019.
Notepad++, dat overigens alleen beschikbaar is voor Windows, is een gratis source code editor geschreven in C++. De UI kan volledig worden aangepast en gebruikers kunnen zelf beslissen hoe de syntaxis wordt gemarkeerd en ingevouwen. En er is een bonus: voor de milieubewuste ontwikkelaar is het goed te weten dat Notepad++ de uitstoot van CO2 wil terugdringen door programma’s te maken die minder CPU-vermogen nodig hebben. De laatste update vond plaats in mei 2019.
NoteTab laat meteen al in zijn productbeschrijving weten dat degenen die liever met een WYSIWYG-editor werken, beter niet voor dit systeem kunnen kiezen. Maar ben je op zoek naar een gratis, gespecialiseerde HTML-editor, kijk dan zeker eens naar NoteTab. De leverancier claimt dat dankzij de toegepaste minimalistische methode voor syntaxismarkering je HTML- of CSS-code gemakkelijker te lezen is dan in sommige andere editors. En met de aanpasbare sneltoetsen voor codefragmenten kun je razendsnel code van het ene project naar het andere kopiëren en plakken. Er is een “Standard”- en “Pro”-versie van NoteTab als je krachtigere functies nodig hebt.
PSPad
PSPad is een andere oplossing die alleen onder Windows draait. Sommige producten in onze lijst zijn niet echt bedoeld voor commercieel gebruik (en dan met name de producten met betaalde versies), maar PSPad is altijd gratis en kan kosteloos worden gebruikt door commerciële bedrijven en overheidsinstanties. Het programma biedt codesjablonen, spellingcontrole en auto-correctie. De laatste update vond plaats in februari 2019.
Gratis WYSIWYG HTML-editors
De meeste van deze editors zijn geschikt voor beginnende codeerders en ontwerpers. Sommige ervan genereren code terwijl je webpagina-elementen sleept naar de gewenste positie op de pagina. Andere laten de code van de pagina zien, maar die kun je dan zelf naar believen bewerken. Omdat je wijzigingen op het scherm worden weergegeven, kun je je ontwerp in real-time blijven aanpassen.
BlueGriffon
BlueGriffon heeft enkele betaalde versies van zijn product, maar de gratis versie bevat alle essentiële tools voor het ontwerpen van webpagina’s. Het is een van de drie WYSIWYG-editors in onze lijst en volgens de website van de leverancier wordt de oplossing “officieel aanbevolen door de Franse regering als de Web Authoring Tool voor de Franse overheid”. Dus als je vertrouwen hebt in de keuze van de Franse overheid wat betreft HTML-editors, is dit de juiste tool voor jou!
BlueGriffon biedt een dubbele weergave van enerzijds je broncode en anderzijds het WYSIWYG-ontwerp, zodat je de code kunt bijhouden en tegelijkertijd kunt controleren hoe je site eruitziet. De editor is ook geschikt voor CSS en SVG. De betaalde versie van het product heeft ontwerpgeoriënteerde functies zoals een fullscreen editor, een pipet om kleuren te kiezen en waarschuwingen bij overschrijding van de limiet van het aantal toegestane woorden.
Meer informatie
NetObjects Fusion omschrijft zichzelf als een “HTML-generator in plaats van een HTML-editor.” Met de drag-and-drop-functionaliteit van het product kun je goed ontworpen webpagina’s maken precies zoals je gebruikers die te zien krijgen. Met de gratis versie kun je HTML5-websites met fotogalerijen, formulieren en eCommerce-functionaliteit bouwen.
SeaMonkey is een open source “alles-in-één internetapplicatie” met een browser, e-mail, chat en tools voor webontwikkeling, waaronder een HTML-editor. Dus als je alleen maar een HTML-editor wilt, kun je beter op zoek gaan naar een ander systeem in onze lijst. Maar voor ontwikkelaars die een compleet pakket willen, kan SeaMonkey wel eens de moeite van het proberen waard zijn. Het project wordt mogelijk gemaakt door Mozilla en gebruikt daarom veel van dezelfde broncode als Firefox en Thunderbird. De laatste update vond plaats in juli 2018.
Dus coderen maar!
Als je op zoek bent naar een HTML-editor, heb je hier hopelijk aardig wat ideeën opgedaan. Duik er eens in en test een paar tools om te zien welk programma het beste voor jou is. En laat ons hieronder weten hoe het je is bevallen!
