10 BESTE Kostenlose Online-HTML-Editoren Und -Tester-Tools Im Jahr 2020

KC

10 BESTE Kostenlose Online-HTML-Editoren Und -Tester-Tools Im Jahr 2020

Lesen Sie diese informative Überprüfung und den Vergleich der besten Online-Tools für HTML-Editor und -Tester, um den besten HTML-Editor für Ihre Anforderungen auszuwählen:

Der HTML-Code-Editor ist ein Editor, der beim Schreiben von Code hilft. HTML-Dateien können mit einfachen Texteditoren wie Notepad erstellt werden.

Die Verwendung von HTML-Code-Editoren hilft Ihnen jedoch, indem Sie Code unterstützen, Klammern für die Tags hinzufügen und Hervorheben und Farbcodierung vornehmen. Hervorheben und Farbcodierung helfen beim Aktualisieren der Datei. HTML-Code-Editoren erhöhen die Schreibgeschwindigkeit.

WYSIWYG steht für Was Sie sehen, ist was Sie bekommen . Mit diesen Editoren können Sie an einer Webseite arbeiten, ohne viel über HTML-Codierung zu wissen. Sie können die Komponente auf der Ergebnisseite ändern und der Editor spiegelt sie im Code wider, oder der Editor erstellt den Code für dieselbe. Diese Editoren bieten Echtzeitergebnisse und Drag & Drop-Funktionen zum Aktualisieren dieser Ergebnisseite.

Gemeinsame Funktionen von HTML-Code-Editoren sind:

  • Automatische Vervollständigung.
  • Hinzufügen einer Bibliothek für HTML-Entitäten.
  • Mit Hilfe des Site Explorers können Sie die Dateien in einem hierarchischen Muster anzeigen.
  • Einige Editoren verfügen über integriertes FTP, um die Dateien schneller hochzuladen.
  • Erweiterte HTML-Editoren bieten Unterstützung für andere Sprachen wie CSS und JavaScript.
  • Die meisten Editoren bieten die geteilte Bildschirmansicht, mit der Sie die Ausgabe Ihres Codes auf dem halben Bildschirm und den tatsächlichen Code auf der anderen Hälfte des Bildschirms anzeigen können. Keine Notwendigkeit, die Fenster zu wechseln.
  • Such- und Ersetzungsfunktion. Diese Funktion kann gemäß dem HTML-Code-Editor erweitert werden. Mit der erweiterten Funktion können Sie in einer bestimmten Datei oder auf der gesamten Website nach einem bestimmten Wort oder Schlüsselwort suchen.
  • Ein weiteres wichtiges Merkmal ist das Hervorheben von Syntaxfehlern.

Viele Online-HTML-Code-Editoren sind verfügbar. Diese Editoren überspringen die Notwendigkeit der Softwareinstallation und der Einrichtung der Umgebung. Außerdem bieten die meisten dieser Editoren die Grundfunktionen kostenlos an. Und für erweiterte Funktionen müssen Sie etwas Geld bezahlen, aber das ist optional und hängt von Ihren Anforderungen ab.

1) JSFiddle

 

JSFiddle ist ein Online-HTML-Editor. Es unterstützt HTML, CSS und JavaScript. Code-Schnipsel in JS Fiddle werden als Fiddles bezeichnet.

Eigenschaften:

  • Sie können verschiedene Versionen oder Sprachtypen auswählen. Zum Beispiel, HTML-Bereich können Sie beispielsweise den Dokumenttyp aus verschiedenen Optionen wie HTML 5, XHTML 1.0 Strict und HTML 4.01 Transitional usw. auswählen.
  • Mit JavaScript können Sie die Bibliothek laden.

Vorteile:

  • Einfach zu verwenden.
  • Zusätzlich zu HTML, CSS und JavaScript werden JavaScript-Frameworks unterstützt.

Nachteile:

  • Es hat keine erweiterten Funktionen wie Codepen.
  • Es hat störende Anzeigen.

Werkzeugkosten / Planungsdetails: Kostenlos

Website: JSFiddle

# 2) JS Bin

 

JS Bin ist ein Online-HTML-Code-Editor. Es unterstützt HTML, CSS und JavaScript. Es funktioniert schnell und bietet viele Funktionen wie Klammern mit automatischer Endung, Hervorheben von Klammern usw.

Eigenschaften:

  • Sie können Ihren HTML-Code in eine Textdatei exportieren.
  • Es zeigt Ihnen die Echtzeitausgabe Ihres Codes.
  • Es unterstützt das Testen auf Mobilgeräten.
  • Es bietet zwei weitere Funktionen wie Code Casting und benutzerdefinierten Startcode.
  • Alle oben genannten Funktionen gelten für die kostenlose Version. Für die Pro-Version bietet es weitere zusätzliche Funktionen wie Dropbox-Synchronisierung, private Fächer, Vanity-URLs und E-Mail-Unterstützung usw.

Vorteile:

  • Es unterstützt Tastaturkürzel.
  • Sie können das Bedienfeld ausblenden.

Nachteile:

  • Es bietet begrenzte Funktionen mit der kostenlosen Edition.
  • Es werden Warnungen in Echtzeit nur für JavaScript angezeigt.

Werkzeugkosten / Plan Details: Kostenlose Version ist verfügbar. Die Pro-Version beginnt bei 130 USD pro Jahr oder 17 USD monatlich.

Website: JSBin

# 3) Adobe Dreamweaver

 

Adobe Dreamweaver ist ein Website-Entwicklungstool. Für neuere Versionen werden CSS, JavaScript und einige serverseitige Programmiersprachen unterstützt. Es kann unter Windows und Mac OS verwendet werden.

Eigenschaften:

  • Syntaxhervorhebung (Version 5 und höher).
  • Code-Hinweise.
  • Code Coloring hilft beim Aktualisieren des Codes.
  • Sie können eine Website entwickeln, die an jede Bildschirmgröße angepasst werden kann.

Vorteile:

  • Sie können die Ausgabe unter Ihrem Code anzeigen, ohne das Fenster wechseln zu müssen.
  • Hervorheben von Fehlern.

Nachteile:

  • Es kann nicht mit Linux-Systemen verwendet werden.
  • Die browserbasierte Ansicht wird nicht bereitgestellt.

Werkzeugkosten / Planungsdetails: 20,99 USD pro Monat

Website: Adobe Dreamweaver

# 4) Codepen

 

Codepen ist ein Online-HTML-Code-Editor. Es kann für HTML-, CSS- und Java-Skripte verwendet werden. Sie können Codepen mit Teams, zum Lernen und Schreiben verwenden.

Eigenschaften:

  • Mit Codepen können Sie die Privatsphäre schützen.
  • Es unterstützt das Hochladen von Dateien wie Bildern, PDFs, JavaScript, CSS oder sogar Kurzfilmen.
  • Es bietet eine Funktion für Projekte, die einer IDE ähnelt. Es verfügt über eine automatische Vorverarbeitung, das Hochladen von Dateien, die Bereitstellung der Website und viele andere Funktionen.
  • Sie können die Ausgabe Ihres Codes auf mehreren Geräten und Computern sehen.
  • Mit Hilfe von Embed Builder können Sie Themen erstellen.
  • Der Professor-Modus bietet viele Funktionen wie das Teilen von Code und die Echtzeitausgabe mit Schülern und den Gruppenchat. Die Schüler können diese Arbeit speichern, um eine Kopie zu erhalten.

Vorteile:

  • Wenn Sie Hilfe mit Ihrem Code benötigen, bietet das Codepen-Team Hilfe über den Spectrum-Chat an.
  • Sie können die hochzuladende Datei per Drag & Drop verschieben. Es ist einfach zu bedienen.

Nachteile:

  • Der kostenlose Plan bietet nur sehr wenige Funktionen.

Werkzeugkosten / Planungsdetails : Es gibt Pläne für Einzelpersonen und Teams

Für Einzelpersonen hat es folgende Pläne:

  • Freier Plan.
  • Jährlicher Starter: 8 USD pro Monat.
  • Jährlicher Entwickler: 12 USD pro Monat.
  • Jährliches Super: 26 USD pro Monat.
  • Für Teams: 12 USD pro Monat und Mitglied.

Website: Codepen

# 5) Kaffeetasse

 

Es ist ein HTML-Editor für Windows-Betriebssysteme. Es unterstützt die Erstellung neuer HTML- und CSS-Dateien. Sie können auch an jeder vorhandenen Website arbeiten.

Eigenschaften:

  • Es kann eine WYSIWYG-Bearbeitung durchführen.
  • Es verfügt über einige vorhandene Themen und ist einsatzbereit.
  • Es bietet browserübergreifende Kompatibilität.
  • Es bietet Tag-Referenz und Code-Vervollständigung.
  • Mit der Vorschau-Funktion mit geteiltem Bildschirm können Sie die Ausgabe Ihres Codes darunter sehen.
  • Es hat einen eingebauten FTP-Loader.

Vorteile:

  • Anders als HTML unterstützt es CSS, PHP und Markdown.
  • Themen sind anpassbar und reaktionsschnell.

Nachteile:

  • Es ist weder ein Cloud-basiertes Tool noch unterstützt es ein anderes Betriebssystem als Windows.

Werkzeugkosten / Planungsdetails: 49 USD. Eine kostenlose Testversion ist verfügbar.

Website: CofeeCup

# 6) KompoZer

 

KompoZer ist ein WYSIWYG-Editor für HTML. KompoZer ist wie die neue Version von Nvu. Es hat viele Fehler behoben und Nvu um neue Funktionen erweitert. Da es auf Nvu basiert, verwendet es die Mozilla Composer-Codebasis. Es ist ein Open-Source-Tool.

Eigenschaften:

  • Es hat eingebauten FTP.
  • Es verfügt über Tabellenverwaltung, Formularverwaltung und Unterstützung für mehrere Websites.
  • Mit der Tabellenverwaltungsfunktion können Sie eine Tabelle erstellen. Sie können die Größe der Tabelle ändern und Zeilen hinzufügen.
  • Es bietet Vorlagen.

Vorteile:

  • Einfach zu verwenden.
  • Zeigt die Echtzeitausgabe an.

Nachteile:

  • Seine Entwicklung wird derzeit gestoppt.

Werkzeugkosten / Planungsdetails: Kostenlos.

Website: KompoZer

# 7) BlueGriffon

 

BlueGriffon ist ein Webeditor für Windows, Linux und Mac. Es kann für HTML und CSS verwendet werden. Viele Funktionen sind über Add-Ons verfügbar.

Eigenschaften:

  • Es unterstützt HTML 5 (HTML & XML) auch für Audio, Video und Formulare.
  • Es gibt zwei Themenoptionen: Schwarz und Licht.
  • Es enthält Warnungen zur Anzahl der Wörter.
  • Pipette und Farbwähler für Windows und Linux.

Vorteile:

  • Robuste Anwendung.

Nachteile:

  • Sie müssen eine Bedienungsanleitung kaufen. Es ist mit einer Basislizenz und nicht mit der kostenlosen Version erhältlich.

Werkzeugkosten / Planungsdetails: 

  • Die kostenlose Version ist verfügbar.
  • Die Basislizenz beginnt bei 87 US-Dollar.

Website: BlueGriffon

# 8) CKEditor

 

Es ist ein Texteditor mit WYSIWYG-Funktion. Es verfügt über Formatierungsfunktionen für die HTML-Ausgabe. Damit können Sie direkt auf Webseiten schreiben.

Eigenschaften:

  • Unterstützt mehrere Browser wie Chrome, Firefox, Safari und Microsoft Edge usw.
  • Tabellenverwaltungsfunktionen wie die Größenänderung der Spaltengröße.
  • Es unterstützt Tastaturkürzel.
  • HTML-Ausgabeformatierung für HTML-Tags.

Vorteile:

  • Rechtschreibprüfung.
  • Automatische Vervollständigung.

Werkzeugkosten / Planungsdetails: 

  • Bis zu 5 Benutzer ist es kostenlos.
  • Bis zu 50 Benutzer beginnen bei 65 US-Dollar.
  • Bis zu 100 Benutzer beginnen bei 110 US-Dollar und so weiter. Sie können Preise von überprüfen hier .

Website: CKEditors

# 9) Dabblet

 

Dabblet ist ein Online-HTML-Code-Editor. Es wird eher für CSS verwendet. Um Dabblet verwenden zu können, müssen Sie sich bei GitHub anmelden oder ein Konto bei GitHub erstellen.

Eigenschaften:

  • Es ist nicht erforderlich, Ihrem Code Präfixe hinzuzufügen.
  • Es kann Elemente mit Stilattributen verarbeiten.
  • Es kann jedes Stylesheet in <link> verarbeiten.

Vorteile:

  • Sie können Ihre Ansichtseinstellungen anpassen.
  • Sie können die Schriftgröße einstellen.

Nachteile:

  • Eingeschränkte Browserunterstützung. Es kann in IE9 +, Opera10 +, Chrome und Safari 4+ verwendet werden. Dies ist für den Desktop. Für mobile Browser bietet es Unterstützung für Safari, Android-Browser, Opera Mobile und Chrome.
  • JavaScript wird nicht unterstützt.

Werkzeugkosten / Planungsdetails: Kostenlos

Website: Dabblet

# 10) CSSDesk HTML Editor

 

Es ist ein Online-HTML-Code-Editor. Es bietet Unterstützung für HTML, CSS und JavaScript. Sie können den Code in einer Datei herunterladen.

Eigenschaften:

  • Es bietet Unterstützung für die Echtzeitcodierung bei vielen Menschen.
  • Unterstützt das Erstellen, Ansehen und Codecasts. Codecast ist eine Aufzeichnung von Code, der im Editor eingegeben wurde. Dies kann die Aufzeichnung von Code sein, der von anderen eingegeben wurde.
  • Sie können unsere Kreation in der CSS Desk-Galerie veröffentlichen.

Vorteile:

  • Es unterstützt das Teilen von Testfällen mit einem Peer in Foren und StackOverflow.
  • Es bietet Hilfe für die Testfälle.
  • Sie können Ihre Arbeit ganz einfach auf Twitter und Facebook teilen.

Werkzeugkosten / Planungsdetails: Die Anmeldung ist kostenlos, für erweiterte Funktionen müssen Sie sich jedoch möglicherweise an diese wenden.