kurz & gut:
Zum Erstellen von Websites helfen Programme - sogenannte HTML-Editoren. Durch farbliche Syntaxhervorhebung, Autovervollständigung von HTML-TAGs und Vorschaufunktion können Fehler vermieden werden.

HTML-Editor – Werkzeug zum Erstellen von Internetseiten

Bisher haben wir im HTML Kurs den Text-Editor vom Betriebssystem genutzt. Das geht auch, aber mit einem komfortablen Werkzeug macht das Lernen von HTML viel mehr Spaß und man wird unterstützt und lernt HTML auch schneller.

Mit einem HTML-Editor erstellt man Internetseiten – man erfasst Inhalte und HTML-Befehle. Die erstellten Inhalte werden dann in Dateien abgespeichert, die mit der Dateiendung .htm versehen sind. Pro Einzelseite eine Datei. Die Dateien sind reine Textdateien (ASCII) und können mit jedem Texteditor gelesen und bearbeitet werden. Die Vorteile von HTML-Editoren werden im übernächsten Abschnitt erläutert.

2 Arten von HTML-Editoren

Es gibt 2 Arten von HTML-Editoren:

  • Textbasiert - man tippt direkt die Inhalte und HTML-Befehle ein
  • WYSIWYG-Programme - das Design kann wie bei einem Grafikprogramm direkt gemacht werden. Viel wird mit der Maus an die gewünschte Stelle geschoben und das WYSIWYG-Programm erstellt daraus dann die entsprechende HTML-Datei mit CSS und allem, was dazu gehört.

Warum wir hier kein WYSIWYG benutzen, ist ganz einfach. Wir wollen HTML und CSS lernen – bei den WYSIWYG-Programmen lernt man i.d.R. kein HTML, sondern nur, wie man das jeweilige Programm bedient. Außerdem kommen meistens dann die Probleme, wenn etwas nicht so funktioniert bzw. nicht so im Endergebnis aussieht, wie man möchte. Dann steht man vor einem Berg an HTML-Code, den das WYSIWYG-Programm produziert hat, und blickt nicht mehr durch.

Dagegen bieten sich textbasierte HTML-Editoren an. Hier trägt man seinen Inhalt und die HTML-Befehle ein – dazu muss man die HTML-Befehle verstehen (was kein Hexenwerk ist). Aber am Ende unterm Strich bekommt man ab einem gewissen Kenntnisstand exakt das, was man will und erwartet hat, aber keine Überraschungen. Dazu ist man ab einem bestimmten Kenntnisstand auch per Hand schneller und die fertigen Dateien können kleiner, schneller und erfolgreicher sein.

Es soll hier nicht verschwiegen werden, dass es auch hier „Zwitter“ gibt, die beides bieten und man zwischen den Betriebsmodi hin- und herspringen kann. Im Kurs wird im Folgenden immer ein textbasierter HTML-Editor genutzt, da man hier effektiv HTML lernen kann.

Wird also im Folgenden von einem HTML-Editor gesprochen, ist immer die textbasierte Version gemeint.

Vorteile von HTML-Editor

Was man von einem (textbasierten) Texteditor erwarten darf:

  • Syntaxhervorhebung
  • Autovervollständigung
  • Vorschaufunktion

Was ist das und warum unterstützt es einen beim Lernen von HTML und CSS?

Syntaxhervorhebung

Die Syntaxhervorhebung zeigt farblich auf dem Bildschirm die HTML-TAGs, deren Attribute, CSS-Anweisungen und den Inhalt an. Somit ist eine schnelle Orientierung möglich. Auch sieht man durch die Syntaxhervorhebung, wenn sich ein Tippfehler eingeschlichen hat. Im Beispiel sieht man den HTML-TAG <p> farblich in grün, den Textinhalt in schwarz und das bei HTML-TAG verwendete Attribut class="farbe1" in BLAU – ein versehentlicher Tippfehler <pp> wird in Rot dargestellt. Den HTML-TAG <pp> gibt es nicht.

Autovervollständigung

Bei der Autovervollständigung können die HTML-TAGs automatisch erweitert bzw. abgeschlossen werden. Im Beispiel sieht man, dass automatisch der entsprechende END-TAG ergänzt wird.

Beim Lernen von HTML geht es meiner Meinung nach nicht darum, fleißig immer wieder Dinge zu machen, von denen man schon verstanden hat, warum diese zu machen sind. Da darf einen der HTML-Editor auch gerne unterstützen und Standardarbeiten abnehmen.

Auch kann man sich die Attribute z.B. vorschlagen lassen - somit vermeidet man Tippfehler, daraus resultierenden unnötigen Frust und kann sich auf das Verstehen konzentrieren. Besonders wenn CSS dazu kommt, sind die CSS-Anweisungen länger als die meist sehr kurzen HTML-Befehle. Daher ist es sinnvoll – und Schreibfehler in der Art „width“ und „widht“ kann man lange suchen. Hat man weder Syntaxhervorhebung noch Autovervollständigung, kann einem schnell der Spaß vergehen.

Vorschaufunktion

Bei einem HTML-Editor ist es wichtig, dass man schnell kontrollieren kann, wie die HTML-Seite später im Browser herauskommt. Dazu ist eine schnelle Vorschaufunktion wichtig, damit man mit einem Tastendruck das Ergebnis sieht und somit weiß, ob das, was man bisher gemacht hat, passt oder nicht.

Vorstellung von verschiedenen HTML-Editoren

Es gibt auf dem Markt zahlreiche HTML-Editoren. Teilweise wird es als Religionsfrage aufgefasst, welcher HTML-Editor zu verwenden ist. Wichtig ist, dass man damit selber gut zu Recht kommt.

Es werden auf den folgenden Seiten verschiedene HTML-Editoren vorgestellt. Alle haben unterschiedliche Vorteile.