Die Erstellung von Webinhalten erfolgt in der Regel über Quellcode. Um diesen zu beherrschen, ist es erforderlich, eine Programmiersprache zu erlernen. Das wäre für die meisten Anwender und Anwenderinnen eine riesige Herausforderung. Deswegen kommen beim Webdesign häufig WYSIWYG-Editoren zum Einsatz. Erfahren Sie hier, was hinter dem Akronym steht und was WYSIWYG-Editoren ausmacht.

Download: Leitfaden CSS & HTML für Anfänger 

5 nützliche WYSIWYG-Editoren

Es gibt ganz unterschiedliche WYSIWYG-Editoren, die Ihnen teils kostenlos und teils kostenpflichtig zur Verfügung stehen. Die fünf bekanntesten und populärsten Programme lernen Sie im Folgenden kennen:

1. Brackets

Brackets ist ein WYSIWYG-Editor von Adobe. Sie können das Programm kostenlos erwerben. Grundsätzlich handelt es sich hierbei um einen Text-Editor, der allerdings mit einer Vorschaufunktion ausgestattet ist. Somit können Sie das Ergebnis Ihrer Arbeit im Vorfeld so begutachten und wissen dadurch genau, wie Ihre Seite am Ende aussehen wird.

Bei der Nutzung von Brackets sollten Sie jedoch beachten, dass die Ausgaben nur für Google Chrome geeignet sind. Bei allen anderen Browsern ist es wichtig, dass Sie im Nachhinein prüfen, wie die mit dem Quellcode erstellten Inhalte ausgegeben werden.

2. Dreamweaver

Dreamweaver existiert bereits seit 1997. Heutzutage können Sie es sowohl als WYSIWYG-Editor als auch in einem sogenannten Code Modus nutzen. Angenehm ist, dass beide Modi parallel angezeigt werden können, sodass die mit dem Quellcode vorgenommenen Änderungen Ihnen unmittelbar angezeigt werden.

Eine Stärke von Dreamweaver ist, dass Sie sich damit auch Ausgaben auf mobilen Endgeräten anzeigen lassen können. Zudem haben Sie die Möglichkeit, durch einen QR-Code eine Verbindung zwischen den Endgeräten und einem aktuellen Projekt herzustellen. Um Dreamweaver nutzen zu können, müssen Sie ein Abonnement abschließen. Unternehmen testen das Programm zunächst für 14 Tage kostenlos und müssen dann 87,45 Euro im Monat zahlen.

3. KompoZer

KompoZer ist ein WYSIWYG HTML-Editor mit einfachem Aufbau. Hierdurch ist das Tool äußerst leicht zu bedienen. Sie können sowohl die grafische Darstellung als auch den Quelltext zu nutzen. Eine nützliche Komponente von KompoZer ist ein Markup Cleaner, mit dem Sie ganz einfach prüfen können, ob unnötige Zeilenwechsel im Quellcode vorhanden sind. Der Editor steht als Open-Source-Tool für verschiedene Anwendungen zur Verfügung.

Eine Weiterentwicklung von KompoZer ist BlueGriffon. Dieses Tool ähnelt Dreamweaver, da auch hier verschiedene Ansichten parallel dargestellt werden können. Vorteile dieser Weiterentwicklung sind die rund 2500 verfügbaren Templates sowie die Möglichkeit, eBooks zu erstellen.

4. RocketCake

RocketCake ist ein weiterer kostenloser HTML-Editor. Er ist so einfach gehalten, dass Sie keinerlei HTML- oder CSS-Fachwissen haben müssen, um ihn nutzen zu können. Eine besondere Stärke von RocketCake besteht darin, dass Sie damit responsive Webseiten erstellen können, die sich speziell für mobile Endgeräte eignen.

5. SeaMonkey Composer

SeaMonkey Composer ist nicht einfach nur ein WYSIWYG-Editor, sondern eine komplette Internetsuite. Somit stehen unterschiedliche Tools zur Verfügung, von denen der HTML-Editor lediglich einer ist. SeaMonkey Composer ist auf Grundlage der Mozilla Application Suite entwickelt worden. Die Idee hinter dem Tool war es, ein einfaches WYSIWYG-Programm zu gestalten, mit dem alle User und Userinnen ganz einfach arbeiten können.

Wie funktionieren WYSIWYG-Editoren?

Der Begriff WYSIWYG klingt kompliziert, bedeutet für Sie allerdings viele Vorteile. Mit WYSIWYG-Editoren ist es Ihnen möglich, Content für das Web anzufertigen und zusammenzustellen, der in der fertigen Version genauso aussieht, wie er auf dem Bildschirm zu sehen ist. Hiermit ist es Nutzern und Nutzerinnen ohne Programmierfähigkeiten und Kenntnisse zum Quellcode möglich, Webinhalte zu erstellen, zu bearbeiten und zu veröffentlichen.

In der Regel kommen sogenannte HTML-Editoren zum Einsatz. Diese zeichnen sich durch eine hohe Nutzerfreundlichkeit aus, weil Verwender bzw. Verwenderinnen sie intuitiv anwenden können.

Zu den Funktionen solcher WYSIWYG-Editoren gehört, dass die Nutzenden zwischen unterschiedlichen Schriftarten wählen können. Für diese stehen unterschiedliche Schriftauszeichnungen zur Verfügung, sodass beispielsweise Fettungen und kursiver Text im Programm ausgewählt werden können. Aber auch unterstrichene und durchgestrichene Textinhalte können ausgespielt werden.

Des Weiteren machen WYSIWYG-Editoren es Ihnen möglich, das Layout eines Textes mühelos mit Weißraum zu gestalten, ohne dass dies pixelgenau über den Quellcode erfolgen muss. Auch die Gliederung eines Textes durch ein Inhaltsverzeichnis oder Tabellen ist durch solche Editoren leicht möglich. Nicht zuletzt erlaubt Ihnen WYSIWYG, ganz unterschiedliche Medien wie Videos, Grafiken und Bilder auf einem Webauftritt zu präsentieren.

Vor- und Nachteile von WYSIWYG

Mit WYSIWYG-Editoren gehen verschiedene Vor- und Nachteile einher, die wir in der folgenden Tabelle für Sie zusammengefasst haben:

Vorteile von WYSIWYG-Editoren Nachteile von WYSIWYG-Editoren
einfache Handhabung nur begrenzt Einfluss auf die Formatierung
kein Programmierer bzw. keine Programmiererin erforderlich nicht immer zuverlässig, da verschiedene Browser und mobile Endgeräte Inhalte jeweils anders ausgeben
ohne Wissen zu HTML und CSS verwendbar  
eignet sich für ganz unterschiedliche Webprojekte, Programme und Anwendungen WYSIWYG-Editoren erzeugen gelegentlich unnötig komplizierte und fehleranfällige Codes
mit CMS kompatibel, die das WYSIWYG-Prinzip nutzen die Fehlersuche am Code erweist sich als schwer
leichtes Editieren und Bearbeiten keine Unterscheidung von Inhalten und Auszeichnungen
Quellcode kann so erstellt werden, dass er die Search Engine Optimization (SEO) unterstützt

Fazit: What you see, is what you get: Darum lohnt sich der Einsatz von WYSIWYG-Editoren

WYSIWYG-Editoren sind aus unserer digitalen Welt kaum mehr wegzudenken. Sie eignen sich für die Texterstellung ebenso wie für das Webdesign und das Bearbeiten von Inhalten. Für unterschiedliche Anliegen gibt es jeweils andere Editoren, die durch ihre Funktionen und Fähigkeiten überzeugen. Es lohnt sich, die unterschiedlichen WYSIWYG-Editoren genauer unter die Lupe zu nehmen. So finden Sie garantiert die Variante, die für Ihre individuellen Zwecke am besten geeignet ist.

css html für anfänger

Titelbild: PeopleImages / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Jul 7, 2022 2:00:00 AM, aktualisiert am Juli 07 2022