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

HTML-Editor – Werkzeug zum Internetseiten erstellen

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
  • 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 machen 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. Dann steht man vor einem Berg von 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 und 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 her springen 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 Texteditor (textbasierten) 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 Autoverstä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 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 und 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, dass man mit einem Tastendruck ein Ergebnis sieht und somit weiß, ob das, was man bisher gemacht hat, passt oder nicht.

Vorstellung von 3 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 mit dem HTML-Editor zu Recht kommt.

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

HTML-Editor Scriptly

Auch die Empfehlung von Scriptly stellt eine subjektive Meinung (von mir) dar. Das Programm bietet extrem viel (nicht nur für Einsteiger) und unterstützt den Webdesigner bei der Arbeit.

Mehr zu Scriptly und ein Video finden Sie auf der nächsten Seite.

SuperHTML Web Studio

Eine kommerzielle Software – interessant im Vergleich zu dem Freeware Editor Scriptly. Hier ist beispielweise auch ein sFTP-Programm integriert. Mehr dazu auf der entsprechenden Seite.

HTML-Editor Phase 5

Ein weiterer HTML-Editor - schauen Sie sich diesen einfach an. Den Editor gibt es bereits seit geraumer Zeit, und ich habe vor der Jahrtausendwende damit schon gearbeitet, als die Entwicklung noch in den Händen von Ulli Meybohm lag (dem ich hier meinen Respekt erweisen möchte).

vorheriges Kapitel: Lösung Übung Überschriften
nächstes Kapitel: HTML-Editor Scriptly
Lösung Übung ÜberschriftenSeitenanfangHTML-Editor Scriptly
eBook HTML-Seminar.de
del.icio.usMister Wong         Lösung Übung ÜberschriftenSeitenanfangHTML-Editor Scriptly
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 20.1.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de