Programme, die Ihnen beim Schreiben von HTML helfen
WYSIWYG- und code-basierte Editoren
Sie denken vielleicht, dass das Herumgetue mit den Tags eine wahre Pein ist, besonders dann, wenn Sie das kurze Beispiel nicht gleich beim ersten Mal richtig zum Laufen bekommen haben. (Ärgern Sie sich deshalb nicht; ich habe das Beispiel auch nicht gleich beim ersten Mal hingekriegt.) Sie müssen an all die Tags denken. Und Sie müssen sie richtig eingeben und auch beenden. Was für ein Aufwand!
Was ist mit WYSIWYG-Editoren? Das Problem ist, dass es kein echtes WYSIWYG gibt
(WYSIWYG: What You See Is What You Get, "Was Sie sehen, ist, was Sie kriegen", na ja, fast...), wenn Sie mit HTML arbeiten, denn WYG ("Was Sie kriegen") hängt stark vom Browser ab, der benutzt wird, um Ihr Dokument zu lesen. Wenn Sie sich also dessen bewusst sind, dass die Ergebnisse Ihrer Arbeit von Editor zu Editor variieren können, dann können Ihnen WYSIWYG-Editoren bei der Erstellung von HTML-Dateien viel Zeit sparen. Wenn Sie jedoch professionelle Web-Entwicklung betreiben und viele erweiterte Merkmale anwenden, sind WYSISWYG-Editoren oft unzureichend und Sie müssen sowieso "unter die Haube" gehen, um mit dem HTML-Code zu spielen.
Auch wenn Sie beabsichtigen, einen WYSIWYG-Editor für den Hauptteil Ihrer Arbeit einzusetzen, empfehle ich Ihnen, dass Sie für ein paar Tage Geduld üben und diese Beispiele in Texteditoren ausprobieren, damit Sie ein Gefühl dafür bekommen, was HTML wirklich ist, bevor Sie sich dazu entschließen, zu einem Editor überzuwechseln, der die Kennungen versteckt.
Neben den HTML-Editoren gibt es auch Konverter, welche die Dateien vieler populärer Textverarbeitungsprogramme einlesen und sie nach HTML konvertieren.
Mit einem Satz von Vorlagen (templates) könnten Sie Ihre Dokumente komplett mit dem Programm schreiben, das Sie üblicherweise verwenden, und das Ergebnis dann konvertieren.
In vielen Fällen können Konverter außerordentlich hilfreich sein, insbesondere, wenn Sie bereits vorhandene Dokumente möglichst schnell ins Web stellen wollen. Gleichwohl haben Konverter oft dieselben Probleme wie WYSIWYG-Editoren: Die Ergebnisse unterscheiden sich von Browser zu Browser, und viele der neueren und erweiterten Merkmale sind mit ihnen nicht verfügbar. Die existierenden Konverter-Programme sind ziemlich eingeschränkt, nicht unbedingt in ihren eigenen Möglichkeiten, sondern vor allem durch die Einschränkungen von HTML selbst.
Auch ein großer Aufwand an einfallsreichen Konvertierungen bringt HTML nicht dazu, etwas zu tun, was es nicht kann. Wenn es eine bestimmte Fähigkeit in HTML nicht gibt, kann auch kein Konverter daran etwas ändern (aber er kann mit Ihren HTML-Dateien seltsame Dinge anstellen und Ihnen damit mehr Arbeit bereiten, als wenn Sie die Formatierung selbst vorgenommen hätten).
Wenn Sie bereits über einen einfachen HTML-Editor verfügen, scheuen Sie sich nicht, diesen für die Beispiele in diesem Kapitel zu verwenden. Wenn Sie nur einen Text-Editor besitzen, ist das auch kein Problem; Sie müssen nur ein bisschen mehr tippen.
Webdesigner teilen sich in solche, denen die Kontrolle über alle Quelltexte wichtiger ist, und solche, die Webseiten genauso erstellen möchten wie Präsentationen oder Prospekte: nämlich nach dem Prinzip, beim Entwickeln genau das am Bildschirm zu sehen, was am Ende beim Anwender zu sehen sein wird (WYSIWYG - what you see is what you get).
Aus verschiedenen Gründen raten wir davon ab, auf WYSIWYG-Editoren zu setzen:
- WYSIWYG-Editoren sind komplexe Werkzeuge, die selbst eine hohe Einarbeitungszeit erfordern. In mindestens der gleichen Zeit ist es auch möglich, sich mit dem Bearbeiten auf Code-Ebene vertraut zu machen.
- WYSIWYG ist in Zusammenhang mit Webseiten eine glatte Lüge. Denn was der Designer sieht, ist nicht zwangsläufig das, was jeder Seitenbesucher sieht. Mit unterschiedlichen optischen Hardwarevoraussetzungen wie Bildschirmauflösungen, Farbtiefen, Größe eines Pixels fängt es an und mit unterschiedlichen Farbberechnungsmethoden, unterschiedlichen Browsern und unterschiedlicher Performance geht es weiter.
- WYSIWYG-Editoren erzeugen bis auf wenige Ausnahmen mangelhaften bis grottenschlechten HTML-Code, der zahlreiche veraltete Auszeichnungen und eine Menge sinnloser Aufblähungen enthält. Der so erzeugte Code ist von Hand später kaum noch wartbar, was sich in teuren oder zeitaufwendigen Neuentwicklungen rächen kann.
- Ab dem Augenblick, wo Sie in Zusammenhang mit Webseiten programmieren wollen oder müssen, sei es client-seitig mit JavaScript oder server-seitig mit Sprachen wie PHP, müssen Sie ohnehin auf Code-Ebene arbeiten und benötigen leistungsfähige Text-editoren. Wenn Sie auch HTML und CSS mit solchen Editoren bearbeiten, können Sie problemloser alle Ressourcen mit der gleichen Software bearbeiten.
- Moderne, code-basierte Texteditoren sind keine archaischen Werkzeuge mehr, sondern sie bieten eine Menge Funktionen an, die komfortables und effizientes Arbeiten ermöglichen.
Das code-basierte Arbeiten, immer wieder tot gesagt, hat sich also nicht nur gehalten, sondern ist im professionellen Bereich eindeutig präziser und wirtschaftlicher, weshalb wir jedem Webentwickler, aber auch jedem Webdesigner, dazu raten, sich code-basiertes Arbeiten anzugewöhnen.
Diese Webseite werden Sie nur sinnvoll für Übungen einsetzen können, wenn Sie bereit sind, auf Code-Ebene zu arbeiten. Bevor Sie dabei allerdings zu archaischen Werkzeugen wie dem Windows Notepad Editor greifen, probieren Sie besser ein paar der nachfolgend aufgelisteten Editor-Produkte aus. Lassen Sie sich ruhig etwas Zeit beim Ausprobieren und Vergleichen, denn mit dem Editor, für den Sie sich entscheiden, werden Sie eine Menge Zeit verbringen.
Code-Editoren
- Sublime Text - alle Systeme: Mit Sublime Text 3 wurde ein neues API, basierend auf Python 3, eingeführt, wodurch bestehende Plugins teilweise oder komplett neu geschrieben werden mussten. Ein weiterer Fokus bei der Entwicklung lag auf Geschwindigkeit; so ist Sublime Text 3 in der Lage, alle Dateien eines Projekts mittels Symbolindizierung zu durchsuchen, um schnelleren Zugriff auf bestimmte Funktionen zu ermöglichen.
- Brackets - alle Systeme: Adobe Brackets ist ein HTML-Editor für das Entwickeln von Webanwendungen. Er ist hauptsächlich in HTML, CSS und JavaScript geschrieben und wurde von Adobe als Communityprojekt ins Leben gerufen. Brackets ist ein Open-Source-Projekt, das unter der MIT-Lizenz lizenziert ist und auf GitHub verwaltet wird.
- Atom - alle Systeme: Atom ist ein Open-Source-Texteditor auf Basis von Electron, der von dem Projekt-Hosting-Dienst GitHub für Windows, macOS und Linux entwickelt wird. Electron besteht aus dem Webbrowser Chromium und dem JavaScript-Framework Node.js und erlaubt es, beliebige Anwendungen mit JavaScript, HTML und CSS zu erstellen.
- Visual Studio Code - alle Systeme: Visual Studio Code (kurz VS Code) ist ein freier Quelltext-Editor von Microsoft und ist plattformübergreifend für die Betriebssysteme Windows, macOS und Linux verfügbar. Visual Studio Code basiert auf dem Framework Electron und wird als offenes Projekt auf GitHub entwickelt.
- BBEdit - Mac: BBEdit ist ein proprietärer Texteditor für macOS, der sich vor allem an Programmierer und Webdesigner richtet. Es wurde am 12. April 1992 als Programm für Macintosh System Software 6 vorgestellt und wurde seitdem kontinuierlich weiterentwickelt.