Editor

Ein Editor ist ein Programm mit dem Sie einfache Texte eingeben können. Im Gegensatz zu einer Textverarbeitung, mit der Sie z.B. Briefe schreiben und drucken, wird ein Editor dazu benutzt, um z.B. Befehle für den Computer einzutippen.

Beim Schreiben mit einem Editor kommt es nicht auf eine druckreife Formatierung von Textdokumenten an, sondern z.B. in unserem Fall auf die möglichst schnelle Erstellung und übersichtliche Darstellung von Computer-Quelltexten. Das Einhalten von Programmierrichtlinien beim Schreiben von Quelltexten ermöglicht Teamwork, eine schnelle Fehlersuche usw.

Editoren für die Programmentwicklung stellen nützliche Features bereit, die einen Programmierer bei der Arbeit unterstützen. So ist z.B. das Feature Syntax-Highlighting sehr wichtig, um in einem Quelltext die Struktur schnell erkennen zu können und die Übersicht zu behalten. Die verschiedenen Teile eines Programms werden mit unterschiedlichen Farben hinterlegt, so dass man schnell erkennt, wenn man sich vertippt hat und der Computer womöglich den Text nicht mehr richtig interpretieren kann.

Zu den einfachen Editoren, welche sich für den Einsatz im Unterricht von Anfängern eignen, zählen die folgenden Programme:

Notepad

Notepad.PNG
Dieses Programm ist Bestandteil jedes Windows Betriebssystems und kann z.B. ausgeführt werden, indem man unter Start->Ausführen einfach notepad eintippt und die Returntaste drückt.

Notepad++

Diesen Editor bekommen Sie kostenlos unter folgender URL:

Notepad++ steht bei den frei verfügbaren Programmierwerkzeugen ganz oben auf der Beliebtheitsskala.
Der Editor kennt den Aufbau der gängigen Programmiersprachen und er läßt sich selbst als einfache Textverarbeitung verwenden. Somit ist er die erste Wahl für den Programmieranfänger.
Hier finden Sie noch ein paar wertvolle Tipps zum Umgang mit diesem Editor:

Bitte stellen Sie auf jeden Fall im Menü Kodierung bzw. Encoding "UTF-8 ohne BOM" ein. BOM wird für UTF-8 generell nicht benötigt und sorgt u.U. für Kompatibilitätsprobleme mit anderen Editoren. Wenn Sie HTML und Javascript programmieren, dann sollten Sie immer den von Ihnen verwendeten Zeichensatz auch in der HTML-Seite bekannt machen:
<meta charset="utf-8">
 
Mit dieser Maßnahme wird sicher gestellt, dass jeder Browser und jeder Webserver weiss, wie die Sonderzeichen in Ihrer Seite abgespeichert wurden. Die Sonderzeichen (z.B. Ä, Ö, Ü, ä, ü, ö, ß) sollten dann selbstverständlich auch korrekt angezeigt werden. :-)

Info: https://encoding.spec.whatwg.org/

Brackets

Brackets (ursprünglich von Adobe) ist ein für Webdesigner optimierter Editor.

Weitere Editoren

Atom

Atom ist ein Editor, der gerne von geübten Programmierern eingesetzt wird um lästige Schreibarbeit einzusparen.

Editpad

Eclipse (Entwicklungsumgebung)

Ein wenig zu umfangreich für einfache HTML-Seiten ist die Eclipse-Programmierumgebung:

Sublime

Editoren für Macs

Auch für Macs gibt es gute kostenlose Editoren:

Dreamweaver

Dreamweaver ist ein kostenpflichtiger und sehr komfortabler Editor für die Erstellung von Webseiten. Das Programm generiert große Teile des HTML-Quelltextes, so dass ein Programmierer sich auf das Wesentliche konzentrieren kann. Der Dreamweaver unterstützt neben der HTML-Syntax auch diverse andere Sprachen für die Webseitengestaltung.
Dreamweaver1.PNG
Der Dreamweaver startet z.B. bereits mit einer einfachen HTML-Vorlage:
Dreamweaver2.PNG


Tipps zur Nutzung beliebiger Editoren

Verwendung verschiedener Zeichensätze

In guten HTML-Dateien finden Sie stets eine Angabe des Zeichensatzes mit dem die Seite kodiert und gespeichert wurde, damit die Seite z.B. auch in China korrekt angezeigt werden kann. Das sieht im Header der Seite dann z.B. wie folgt aus:
<meta charset="iso-8859-1">
Der verwendete Zeichensatz sollte auch im Editor in den Einstellungen vermerkt werden, damit der Quelltext richtig gespeichert wird. Notepad++ verwendet normalerweise den Unicode-Zeichensatz UTF-8. Damit lautet dann die entsprechende Anweisung in Ihrer HTML-Seite:
<meta charset="UTF-8">
Der Menüpunkt zur Festlegung und Wandlung der Kodierung bei Notepad++ sieht wie folgt aus:
Zeichensatz.png

Aufgabe zum Ausprobieren:

Speichern Sie in Ihrer HTML-Seite den folgenden Satz und zeigen Sie ihn mit dem Browser an:
"Guam ist die größte und südlichste Insel des Marianen-Archipels im westpazifischen Ozean. Die Hauptstadt ist Hagåtña, früher Agana, bevölkerungsreichste Siedlung allerdings ist Dededo."

Nutzung von Tabs

Es kommt immer wieder vor, dass der von Ihnen geschriebene Quelltext bei anderen nicht gut aussieht.
Dieses Problem entsteht u.a. dadurch, dass verschiedene "Tab size"-Einstellungen von verschiedenen Programmierern genutzt werden.
Tabs sollten generell nicht mit abgespeichert werden. Intelligente Editoren wie das Notepad++ erledigen das Problem, indem sie beim Speichern der Datei die Tabs durch Spaces ersetzen.
TabSettings.PNG
Notepad++ Einstellung zu Tab Settings