In unserem Zeitalter der Startups und technologischen Innovationen gibt es unzählige Gründe für eine eigene Website. Und genau so viele Optionen stehen dir offen, wenn du einen
HTML-Editor (kostenlos oder als Bezahlversion)
suchst, mit dem du dir selbst eine erstellen kannst.Ob man nun ein innovatives Produkt verkaufen, einen Raum für Menschen mit ähnlichen Interessen schaffen oder sich einfach mal am Webdesign ausprobieren möchte, eine Website schafft die Möglichkeit, potentiell mit Millionen Menschen in Verbindung zu treten. Heutzutage muss daher jeder, der eine eigene Website online schaltet, mindestens über Grundkenntnisse in HTML verfügen.Was aber ist HTML? Bei HTML handelt es sich um eine der grundlegenden Sprachen der Website-Erstellung, die man bis zu einem gewissen Grad beherrschen sollte. Es gibt allerdings auch Tools, die einen bei dieser Arbeit unterstützen, sodass das Ergebnis professionell aussieht oder zumindest sichergestellt wird, dass der Code richtig geschrieben ist.Dieses Tool nennt sich HTML-Editor und im Folgenden werden 14 Tools zum Bearbeiten von HTML-Code vorgestellt.Zuerst wird allerdings erläutert, was ein HTML-Editor eigentlich ist. Danach werden die Unterschiede einiger Tools erläutert und eine kurze Beschreibung der einzelnen Lösungen gegeben.
Was ist ein HTML-Editor?
Ein HTML-Editor kann ein eigenständiges Tool sein, häufig ist es aber auch Teil einer integrierten Entwicklungsumgebung (IDE), einer Art Entwickler-Toolbox, mit der nicht nur Code bearbeitet, sondern auch kompiliert, ausgewertet und ein Debugging vorgenommen werden kann.
Ein HTML-Editor hilft beim – korrekten – Schreiben von Code. Code könnte man eigentlich auch in einem ganz normalen Textverarbeitungsprogramm schreiben. Ein HTML-Editor stellt jedoch sicher, dass der Code gut (oder zumindest richtig) geschrieben ist.
Basis-Funktionen sind hier die Syntaxkorrektur und eine Rechtschreibprüfung für Code. Häufig ist auch Syntax-Highlighting enthalten, wobei verschiedene Teile des Codes markiert werden, sodass sie einfacher Zeile für Zeile gelesen werden können. Weiterhin fügt eine Code-Vervollständigung automatisch HTML-Elemente ein.
Alle, die schon mal vergessen haben, eine Klammer zu schließen, wissen, was für eine Erleichterung das ist.
Warum sollte man einen HTML-Editor nutzen?
Jeder, der viel schreibt, weiß ein zweites Paar Augen zu schätzen. Ein Editor korrigiert die Texte und stellt sicher, dass für die Leserschaft alles gut aussieht und auch so klingt.
Ein HTML-Editor macht praktisch dasselbe und lässt so den Autor beruhigt schlafen. Denn selbst absoluten Profis unterlaufen Tippfehler, wenn sie den lieben langen Tag Code schreiben. Der Editor findet diese Fehler, sodass man nicht hunderte von Zeilen daraufhin untersuchen muss.
In diesem Post spezialisieren wir uns zwar auf HTML, jedoch können viele Editoren mit mehreren Sprachen wie z. B. CSS oder PHP umgehen. Solltest du also irgendwann ins Webdesign einsteigen wollen, hast du hier weitere Optionen.
Die Auswahl des Tools sollte sich am Erfahrungsniveau und der Intention des Entwicklers orientieren. HTML-Editoren lassen sich in zwei Kategorien unterteilen: textbasiert und WYSIWYG.
Textbasierte HTML-Editoren
Bei einem textbasierten HTML-Editor wird der Code Zeile für Zeile genauso angezeigt, wie er geschrieben wurde.
So sieht Code in einem textbasierten HTML-Editor aus (Quelle: Stack Overflow)
Wer diese Editoren einsetzen sollte: Erfahrene Programmierer, die ihren Code engmaschig überprüfen und ein unnötiges Aufblähen vermeiden möchten, sollten mit textbasierten HTML-Editoren arbeiten.
WYSIWYG-HTML-Editoren
WYSIWYG steht für den englischen Ausdruck „What You See Is What You Get“, also „Du bekommst das, was du siehst“. Wenn du deine Website in einem WYSIWYG-HTML-Editor erstellt, weißt du schon vor dem Hochladen und Testen genau, wie sie aussehen wird. Die meisten dieser Editoren verfügen über eine Drag & Drop-Funktion für das Design, sodass sie leicht zu verwenden sind.
In einem WYSIWYG-Editor sieht man genau, wie das Webdesign aussieht (Quelle: Elated)
Wer diese Editoren einsetzen sollte: Weniger erfahrene Programmierer und alle, die sich eher aufs Design als den Code konzentrieren, sollten sich mit einem WYSIWYG-Editor befassen.
Ein kostenloser HTML-Editor – gibt es das?
Nützliche Programmiertools gibt es wie Sand am Meer. Wenn man jedoch gerade erst ins Programmieren einsteigt oder sich als Webdesigner*in selbstständig machen möchte, sind die finanziellen Mittel wahrscheinlich etwas eingeschränkt.
Zum Glück gibt es aber eine Reihe kostenloser und Open-Source-HTML-Editoren. Im Folgenden werden 14 dieser Lösungen vorgestellt, die in textbasierte und WYSIWYG-HTML-Editoren unterteilt sind.
Einige der Produkte in dieser Liste verfügen auch über kostenpflichtige Versionen, die sich aufgrund ihrer erweiterten Funktionen besser für die kommerzielle Nutzung eignen. Ist dies der Fall, werden sie genannt.
Die HTML-Editoren werden jeweils in alphabetischer Reihenfolge aufgeführt und kurz beschrieben.
Kostenlose textbasierte HTML-Editoren
1. Aptana Studio 3
Bildquelle: Aptana
Aptana Studio ist eine integrierte Entwicklungsumgebung (IDE), die auf dem Open-Source-System basiert. Zusätzlich zum HTML5-Editor kann hier auch mit CSS, JavaScript, PHP, Ruby, Rails und Python gearbeitet werden. Zur einfachen Versionskontrolle ist diese Lösung mit Git integriert und kann über FTP-, SFTP-, FTPS- und Capistrano-Protokolle bereitgestellt werden. Das Tool wurde zuletzt im Juli 2018 aktualisiert.
Bildquelle: Arachnophilia
Bei Arachnophilia handelt es sich um einen Open-Source-HTML-Editor. Er wurde in Java geschrieben, da der Gründer Paul Lutus Microsoft-Produkte boykottiert. Die Lösung unterstützt Unicode und man kann damit in den Sprachen PHP, Perl, C++, Java und JavaScript programmieren. Für die Bereitstellung verfügt es über einen integrierten FTP-Client. Das Tool wurde zuletzt im September 2018 aktualisiert.
Bildquelle: Bluefish
Auch Bluefish ist ein freier Quelltext-Editor, der auf Linux, Mac OS X, FreeBSD, OpenBSD und Solaris ausgeführt werden kann. Er unterstützt folgende Protokolle: FTP, SFTP, HTTP, HTTPS, WebDAV und CIFS. In Bluefish können mehr als 500 Dokumente gleichzeitig geöffnet werden, sodass das Programm sich für große Projekte eignet. Sollten Dokumente während der Arbeit daran abstürzen, so können auch nicht gespeicherte Änderungen wiederhergestellt werden. Bluefish ermöglicht das Schreiben in über 30 verschiedenen Programmiersprachen, u. a. C++, Google Go, Java, Perl, PHP, Python und R. Das Tool wurde zuletzt im Januar 2019 aktualisiert.
4. CoffeeCup
Bildquelle: CoffeeCup
CoffeeCup bietet einen kostenlosen HTML-Texteditor, aber auch eine kostenpflichtige WYSIWYG-Version, den „Visual Editor“. Mit CoffeeCup können sowohl HTML- als auch CSS-Dateien erstellt und vorhandene Website-Dateien bearbeitet werden. Content, der auf mehreren Seiten einer Website verwendet wird, kann in der Components Library gespeichert und so dort direkt für alle betroffenen Webseiten aktualisiert werden.
Bildquelle: JavaEE Tips
Eclipse ist eine integrierte Entwicklungsumgebung (IDE), die eine Reihe von Plugins, u. a. einen HTML-Editor, in seinem freien Toolkit für Entwickler bereitstellt. Das Programm verfügt auch über Plugins für CSS, JSON und JavaScript. Auf der Eclipse-Website selbst wird gewarnt, dass es für neue Nutzer verwirrend sein kann, wenn ihr Hauptaugenmerk auf der Bearbeitung von HTML-Code liegt. Anfänger sollten sich daher lieber mit einer anderen Lösung befassen. Für Profis hingegen könnte die Flexibilität von Eclipse ein Bonus sein. Das Tool wurde zuletzt im Juni 2019 aktualisiert.
6. Komodo Edit
Bildquelle: ActiveState
Komodo EDITt stammt aus dem Hause ActiveState und ist die stark entschlackte, kostenlose Version der kostenpflichtigen Entwicklungsumgebung Komodo IDE. Auch in der freien Version sind einige wichtige Features wie Syntaxhighlighting, Autovervollständigung und Debugging-Tools enthalten. Weiterhin können damit mehrere Sprachen wie u. a. Phython, Perl und Node.js bearbeitet werden.
7. Microsoft Visual Studio Community
Bildquelle: Microsoft
In der kostenlosen IDE-Version von Microsoft Visual Studio können Anwendungen für Android, iOS und Windows ebenso wie Webanwendungen und Clouddienste geschrieben werden. Sie unterstützt bis zu fünf Nutzer. In der kostenpflichtigen Variante sind zusätzliche erweiterte Features enthalten, aber auch die kostenlose Version enthält alle wichtigen Funktionen. Weiterhin gibt es einige nützliche Tools für die App-Entwicklung, wie z. B. Code Sharing zwischen Android und iOS.
Bildquelle: NetBeans
Als Open-Source-Software steht NetBeans kostenlos zur Verfügung. Mit dem Tool kann in HTML5, PHP, JavaScript, C++ und verschiedenen weiteren Sprachen programmiert werden. NetBeans enthält Code-Vorlagen und -Generatoren genau wie Projektmanagement-Tools, die bei größeren Projekten und Teams hilfreich sind. Es gibt einen großen Plugin-Marktplatz und Entwickler werden ermutigt, eigene Plugins zu schreiben und zu teilen. Das Tool wurde zuletzt im April 2019 aktualisiert.
Bildquelle: Wikimedia Commons
Notepad++ steht nur Windows-Nutzern zur Verfügung und ist ein kostenloser Code-Editor, der in C++ geschrieben wurde. Die Benutzeroberfläche lässt sich vollständig anpassen, Nutzer*innen können auswählen, wie die Syntax hervorgehoben wird und auch die Code-Faltung ist individuell einstellbar. Bonus für die Umwelt: Notepad++ hat sich der Aufgabe verschrieben, durch Programme mit weniger CPU-Leistung die Kohlenstoffemissionen zu reduzieren. Das Tool wurde zuletzt im Juni 2019 aktualisiert.
Bildquelle: NoteTab
NoteTab weist direkt in seiner Produktbeschreibung darauf hin, dass Nutzer, die einen WYSIWYG-Editor bevorzugen, mit diesem System nicht glücklich werden. Ist man jedoch auf der Suche nach einem kostenlosen, dedizierten HTML-Editor, sollte man sich NoteTab genauer ansehen. Dank der minimalistischen Code-Hervorhebung ist es angeblich einfacher als in anderen Editoren, HTML- und CSS-Code zu lesen. Und mit den individuell anpassbaren Tastaturkürzeln für Codeausschnitte verschwendet man keine Zeit mehr damit, Code von einem Projekt in ein anderes zu kopieren. NoteTab verfügt über eine Standard- und eine Pro-Version für weitere Features.
11. PSPad
Bildquelle: PSPad
Auch PSPad kann nur mit Windows genutzt werden, ist immer kostenfrei verfügbar und wird auch kommerziell und von Regierungseinrichtungen eingesetzt. Das Programm stellt Code-Vorlagen, eine Rechtschreibprüfung und Funktionen zur automatische Vervollständigung bereit. Das Tool wurde zuletzt im April 2018 aktualisiert.
Kostenlose WYSIWYG-HTML-Editoren
Viele der WYSIWYG-Editoren eignen sich besonders für Anfänger und Designer. In einigen wird automatisch Code geschrieben, wenn Elemente an die gewünschte Stelle auf einer Webseite verschoben werden. Andere zeigen den Code einer Webseite, der dann auch nach eigenen Wünschen umgeschrieben werden kann. Änderungen werden direkt auf dem Bildschirm angezeigt, sodass sich das Design in Echtzeit bearbeitet lässt.
12. BlueGriffon
Bildquelle: BlueGriffon
BlueGriffon verfügt zwar über mehrere Bezahl-Varianten, aber auch in der kostenlosen Version sind alle wichtigen Tools zum Designen von Websites enthalten. Als einer von nur drei WYSIWYG-Editoren hat es BlueGriffon in diese Liste geschafft und auch die französische Regierung empfiehlt dieses Web-Authoring-Tool.
Bei BlueGriffon werden gleichzeitig der Code und das WYSIWYG-Design angezeigt, sodass man beides im Auge behält. Es steht auch zum Programmieren in den Sprachen CSS und SVG zur Verfügung. In der kostenpflichtigen Version sind designorientierte Features wie ein Fullscreen-Editor, ein Pipettenwerkzeug zur Auswahl von Farben und Warnungen zur Wortanzahl enthalten.
Bildquelle: NetObjects
NetObjects Fusion beschreibt sich selbst eher als HTML-Generator anstelle eines HTML-Editors. Mithilfe der Drag & Drop-Funktion designt man Websites, die Nutzer später genau so sehen werden. In der kostenlosen Version können HTML5-Websites mit Fotogalerien und eCommerce-Funktion erstellt werden.
Bildquelle: SeaMonkey
Bei SeaMonkey handelt es sich um eine umfassende Open-Source-Suite mit Browser, E-Mail, Chat- und Webentwicklungstools einschließlich einem HTML-Editor. Ist man ausschließlich auf der Suche nach einem HTML-Editor, so eigenen sich andere Lösungen in dieser Liste besser. Programmierer, die sich jedoch für eine umfassendere Lösung interessieren, sollten SeaMonkey ausprobieren. Hinter diesem Projekt steht Mozilla, sodass sich viel vom Firefox- und Thunderbird-Quellcode hier wiederfindet. Das Tool wurde zuletzt im Juli 2018 aktualisiert.
Viel Spaß beim Programmieren!
Solltest du auf der Suche nach einem kostenlosen HTML-Editor sein, konnten wir dir hoffentlich mit ein paar Optionen weiterhelfen. Wir wünschen dir viel Spaß beim erfolgreichen Testen der verschiedenen Lösungen und hoffen, du findest ein passendes Programm. Hast du einen anderen HTML-Editor kostenlos genutzt und gute Erfahrungen damit gemacht? Erzähl uns gerne davon in den Kommentaren!
