Mit einem HTML-Editor kostenlos zur Website

Mit einem HTML-Editor kostenlos zur Website

Hosting-Angebot ansehen

HTML-Editoren sind noch lange nicht aus der Mode!

Trotz aller CMS, die inzwischen kostenlos angeboten werden, ist es manchmal von Vorteil, eine gewisse Ahnung von HTML zu haben. Ein Vorteil ist zum Beispiel, dass Sie bei Text-Editoren in Content Management Systemen (CMS) wie WordPress oder Joomla! ggf. korrigierend eingreifen können. Natürlich kann es auch enormen Spaß machen, selbst eine vollständige HTML-Website zu erstellen! Damit Sie aber beim Lernen durchstarten können, brauchen Sie ein bis zwei Programme, für die Sie noch nicht einmal etwas bezahlen müssen, denn sie sind kostenlos im Netz erhältlich.

  • HTML ist die Sprache, die allen Seiten im Netz das Grundgerüst verleiht.
  • Verschaffen Sie sich Einblick in die grundsätzliche Funktion von HTML.
  • Eigene Erfahrungen in HTML helfen Ihnen auch in CMS wie WordPress, Joomla und Co.
  • Hier erhalten Sie einen kurzen Überblick über verschiedene Arten von HTML-Editoren.

HTML-Editor

Warum überhaupt einen HTML-Editor verwenden?

Prinzipiell können Sie jeden Text-Editor wie z.B. den „Editor“ bei Windows-Systemen nutzen, um HTML zu schreiben, solange Sie die Datei mit der Endung „.html“ speichern. Praktischer sind aber ausgewiesene HTML-Editoren, und zwar u.a. aus folgenden Gründen:

  • Farbliche Hervorhebung von Strukturelementen:
    Ein HTML-Editor zeigt Ihnen jedes Struktur-Element (Absätze, Überschriften, Listen etc.) in einer anderen Farbe an. Auf diese Art behalten Sie besser den Überblick über den Aufbau der Seite.

  • Autovervollständigung von Tags:
    Um Flüchtigkeitsfehler zu vermeiden, kann bei einem HTML-Editor eine Funktion aktiviert werden, die Tags automatisch vervollständigt. Das erspart Ihnen einerseits Tipp-Arbeit und andererseits können Sie nicht vergessen, einen Tag zu schließen.

  • Suchen und ersetzen über mehrere Dokumente hinweg:
    Nehmen wir einmal an, Sie müssen auf jeder Seite Ihrer Internetpräsenz das gleiche Bild gegen ein anderes austauschen. Da ist es schon praktisch, wenn sich über „Suchen und Ersetzen“ gleich in einem Arbeitsgang alle Bilderpfade auf allen Seiten anpassen lassen.

Was ist der Unterschied zwischen einem HTML-Editor und einem WYSIWIG-Editor?

In einem herkömmlichen HTML-Editor schreiben Sie den gesamten Quellcode selbst. Bei einem WYSIWYG-Editor (WYSIWYG steht für „What You See Is What You Get“) haben Sie hingegen eine grafische Oberfläche zur Verfügung, die Ihnen das Schreiben des Quellcodes erleichtert.

WYSIWYG- versus HTML-Editor

Mit einem WYSIWYG-Editor arbeiten Sie sehr ähnlich wie mit einem Textverarbeitungssystem: Auch dort schreiben Sie einen Text, markieren bestimmte Bereiche und formatieren sie z.B. fett, als Überschrift oder als Listenpunkt. WYSIWYG-Editoren erlauben in der Regel auch den Zugriff auf den Quellcode, den sie generiert haben. Das ist sehr praktisch, wenn Sie an einem konkreten Beispiel lernen wollen, wie z.B. ein Formular mit verschiedenen Feldern und einem Abschicken-Button in HTML geschrieben wird.


HTML Editor

Welche kostenlosen HTML-Editor Programme gibt es?

Hier eine kleine Auswahl:

  • Phase5 (Windows)
    Phase 5 ist einer der ältesten HTML-Editoren, der kontinuierlich weiterentwickelt wird. Er kennt natürlich Standards wie Syntax-Highlighting und Tag-Vervollständigung, hilft Ihnen aber auch bei der Verwaltung von ganzen Website-Projekten. Besonders toll: Umlaute werden automatisch in die entsprechende HTML-Schreibweise konvertiert. Phase5 ist für Schulen und Privatanwender kostenfrei.

  • Notepad++ (Windows)
    Kleiner und durch PlugIns sehr flexibel konfigurierbarer HTML-Editor, den Sie kostenlos von der Website des Herstellers herunterladen können. Hält viele Dateien in Tabs offen, selbst wenn Sie den Editor schließen. Versteht sich auf Suchen und Ersetzen, auch in Dateien, die gar nicht geöffnet sind. Färbt die Syntax nicht nur für HTML, sondern auch für zahlreiche andere Skript- und Programmiersprachen ein. Notepad++ gibt es auch in einer portablen Version für den USB-Stick.

  • Komodo Edit (Mac, Linux)
    Komodo Edit beherrscht auch Syntax-Hervorhebung für verschiedene Sprachen und die Auto-Vervollständigung von Tags. Auch Suchen& Ersetzen über viele Dateien hinweg ist überhaupt kein Problem. Praktisch ist auch die Projektverwaltung, die nötig wird, wenn Sie eine vollständige HTML-Website erstellen wollen.

  • Bluefish (Windows, Mac, Linux)
    Bluefish hat schon den Touch eines WYSIWYG-Editors: Neben den Standards wie Syntax-Einfärbung etc. bietet Ihnen Bluefish aus einer Toolbar heraus kleine Zusatzfenster, in denen Sie z.B. viele Angaben für ein Formular, eine Tabelle o.ä. machen können. In Zukunft wird es sogar möglich sein, die fertigen Dateien direkt aus dem Programm heraus auf dem FTP-Server zu speichern.

HTML-Website erstellen

Tipp: Ein kostenloser WYSIWYG-Editor

Runden wir die Tipps für Offline-Programme mit einem kostenlosen WYSIWYG-Editor ab:

  • KompoZer (Windows, Linux, Mac)
    KompoZer ist der Nachfolger des altgedienten Nvu und hat dementsprechend schon sehr viele Erfahrungen bei der Entwicklung verarbeiten können. Das Programm bietet Ihnen eine grafische Oberfläche, auf der Sie die verschiedenen Elemente Ihrer Website einfach und bequem anordnen können. Den Quelltext können Sie sich dann noch in der Code-Ansicht anschauen und dort ggf. auch gleich verändern. KompoZer hat einen eingebauten FTP-Client, was die Installation eines weiteren Programms auf dem Computer überflüssig macht.

HTML-Editor online

Einen HTML Editor online nutzen

Wenn Sie keine vollständige HTML-Website erstellen wollen, so dass sich ein Programm auf dem Rechner nicht lohnt, aber auch, wenn Sie unterwegs sind, ist ein HTML-Editor, den Sie online erreichen können, ausgesprochen praktisch. Online-HTML-Editoren gibt es mit den verschiedensten Schwerpunkten; hier seien Ihnen zwei nähergebracht.

  • Quackit
    Der Online HTML-Editor von Quackit kommt mit einer grafischen Oberfläche, auf der Sie wie in einem Textprogramm arbeiten können und die Struktur der Seite gestalten können. In verschiedenen Symbolleisten finden Sie bekannte Schaltflächen zum Formatieren von Text sowie zum Einfügen von Bildern und Links. Praktisch ist auch, dass über eine gesonderte Schaltfläche Texte aus Word-Dateien ohne die Word-eigenen Formatierungen eingefügt werden können. Quackit bietet zudem eine Fülle von Informationen zu fast allen HTML-Tags – und zwar auch für HTML5. Die nachgeschlagenen Tags können Sie im Editor gleich ausprobieren. Haben Sie Ihrer Seite fertig erstellt, können Sie den gesamten Quellcode kopieren und in eine Datei speichern.

  • Best Online WYSIWYG HTML Editor
    Dieser Online-HTML-Editor ist noch ein wenig umfangreicher ausgestattet, denn mit ihm lassen sich auch Formulare, wie z.B. ein  HTML Kontaktformular erstellen und iFrames sowie Medien wie Flash-Filme integrieren. Außerdem lassen sich Container anlegen, die später mit einer CSS-Datei verbunden werden können, was für die weitere Gestaltung mit CSS nicht ganz unerheblich ist.

Website in HTML erstellen

Weitere wissenswerte Dinge, wenn Sie eine HTML Website erstellen wollen


  • Um HTML richtig zu lernen, finden sich zahlreiche Informationsquellen im Netz. SELFHTML ist nach wie vor das am besten ausgestattete Nachschlagewerk für HTML überhaupt. Jeder HTML-Tag wird an einem konkreten Beispiel erklärt. Aber auch CSS, das zur Gestaltung des Homepage Designs verwendet wird, ist hier anschaulich dokumentiert.
  • Sollten Sie einmal Schriftfarben ändern müssen, dann gibt es einige Tools, die Ihnen die Ermittlung der richtigen RGB- bzw. Hex-Farbwerte erleichtern: Das colorPicker-Addon für Firefox gibt Ihnen die ausgewählte Farbe in RGB- oder in Hex-Schreibweise aus. Der RGB-Converter rechnet RGB-Farbewerte in die Hex-Pendants um.
  • Zusätzlich brauchen Sie noch einen FTP-Client (so er nicht schon in die Software integriert ist), mit dem Sie die fertigen Seiten auf dem Server speichern. Ein kostenloses Programm, das sich dafür bewährt hat, ist FileZilla oder das Tool WinSCP, wenn du auf einen Linux-Server zugreifen möchtest.


HTML-Website erstellen

Die Vorteile eines Hosting-Pakets bei STRATO

Schon für wenig Geld im Monat erhalten Sie ein Leistungspaket, das es Ihnen mehr als einfach macht, die erste eigene HTML Website nicht nur zu erstellen, sondern auch online zu stellen. Die eigene Domain mit genügend Webspace und einer Vielzahl an Zusatzleistungen für wenig Geld ist der beste Ausgangspunkt für Ihre Netzaktivitäten.

Nehmen wir einmal an, Ihre HTML-Website wächst dann mit der Zeit immer mehr: Dann kann es durchaus sein, dass Sie sich irgendwann dafür entscheiden, doch lieber auf ein CMS wie WordPress, Drupal oder Typo3 umzusteigen, weil größere Websites sich auf diese Art besser verwalten lassen. Selbst im kleinsten Hosting-Paket vom Anbieter STRATO sind bereits alle Voraussetzungen für solch einen Wechsel geschaffen; Sie können also in Ruhe kleiner anfangen und haben trotzdem genügend Platz zum Wachsen.

  • Geprüfte Sicherheit

    Geprüfte Sicherheit
  • Service-Sieger

    Service-Sieger
  • Testsieger Webhosting

    Testsieger Webhosting
  • 24/7-Support (optional)

    24/7-Support
  • Deutscher Datenschutz

    Deutscher Datenschutz