Wer im World Wide Web präsent sein will, hat die Wahl: Geld ausgeben für eine Auftragsarbeit oder Zeit investieren ins Selbermachen. Mit dem HTML-Editor Quanta+ fällt die Entscheidung für Letzteres leicht.

Zum Erstellen von Web-Seiten greifen Hartgesottene und erfahrene Linux-User selbstverständlich zu Vi oder Emacs. Doch wer sich seiner HTML-Kenntnisse noch nicht sicher ist, schaut sich erst einmal nach einem HTML-Editor um, dessen grafische Oberfläche die ersten Schritte zur eigenen Homepage erleichtert. Eines dieser Programme ist Quanta+ (http://quanta.sourceforge.net/).

Quanta fügt sich nahtlos in die Desktop-Umgebung KDE ein und gleicht vom Look&Feel und vom Verhalten her anderen KDE-Programmen. Jemand, der bereits mit KDE-Applikationen gearbeitet hat, wird sich sofort zurecht finden. Selbstverständlich läuft das Programm auch unter anderen Desktop-Umgebungen und Window-Managern.

Da die Entwicklungsschritte zwischen den einzelnen Beta-Versionen meist deutliche Verbesserungen aufweisen, empfiehlt es sich, die jeweils neueste Version zu installieren. Dieser Artikel bezieht sich auf die Version 2.0.pr2-60. Das Beta-Stadium sollte Sie nicht beunruhigen, denn das Programm arbeitet stabil.

Wie unter Linux allgemein üblich, wird es entweder auf einem X-Terminal mit quanta & oder – so vorhanden – über eines der Auswahlmenüs Ihres Desktop-Environments gestartet.

Der Arbeitsplatz

Abbildung 1: Die Quanta-Gesamtansicht

Auch wenn es auf den ersten Blick nicht so wirkt, ist Quanta+ inzwischen eine richtige kleine IDE. Dementsprechend komplex sind die Hilfsangebote und die Konfigurationsmöglichkeiten des Programms.

Nach dem Aufruf präsentiert es sich in einer dreigeteilten Ansicht (Abbildung 1). Ganz links finden Sie Ihren Verzeichnisbaum, rechts daneben das Editor-Fenster und darunter das Message Window, das die verschiedensten Meldungen ausgeben kann.

Sowohl die Dateibaumansicht als auch das Editor-Fenster bieten verschiedene Reiter an, durch die Sie sich von links nach rechts durchklicken können. Die Baumdarstellung verdeckt eine Übersicht über das spätere HTML-Dokument, die Projektansicht und den Zugriff auf die verschiedensten Manuals (HTML, Javascript, PHP4und CSS), die teils von der lokalen Festplatte, teils aus dem Internet hinzugelinkt werden.

HTML besteht aus einer Vielzahl von Formatanweisungen, die sich unterschiedlichen Funktionsgruppen zuordnen lassen. Entsprechend fassen die Quanta-Autoren ähnliche oder zusammenhängende Auszeichnungsmöglichkeiten auf Reitern oberhalb des Editorbereichs zusammen. Ein Klick darauf bringt eine entsprechende Werkzeugleiste zum Vorschein.

Der erste Reiter mit der Aufschrift Normal enthält Formatierungsanweisungen, wie Sie sie von einem Textverarbeitungsprogramm her kennen. Wenn Sie den Mauszeiger über einem Tool-Icon ruhen lassen, verrät Ihnen der Tooltipp die Funktion des entsprechenden Buttons.

Die übrigen Karteikarten bieten Buttons zur Schriftauswahl, Tabellen- und Listenerstellung, zur Gestaltung von Formularen und eine Gruppe Funktionen, die sich keiner der Kategorien eindeutig zuordnen lassen. Darunter fällt zum Beispiel ein Farbauswahldialog.

Erste Schritte

Auf der Normal-Karteikarte (Abbildung 1) fällt ganz links ein Icon auf, das nicht so recht mit den übrigen Tools zur Absatz- und Zeichenformatierung harmoniert. Ein Klick auf dieses leere Blatt mit Zauberstab sorgt für einen Quick-Start, bei dem Sie ein Assistent durch die wichtigsten Voreinstellungen Ihres HTML-Dokument führt: Titel, Hintergrundbild oder -farbe, Schrift- und Linkfarbe legen Sie so auf einfache Weise fest (Abbildung 2).

Mit einem Klick auf den OK-Button wird nun das Grundgerüst des HTML-Dokuments ins Editor-Fenster geladen und der Cursor zwischen die Body-Tags gesetzt, damit Sie sofort loslegen können.

Diese Grundeinstellung reicht freilich nicht aus, um einer Web-Seite ein ansprechendes Äußeres zu verleihen, sodass der Wunsch nach weiteren Formatierungsmöglichkeiten entsteht. Hier haben Sie nun zwei Möglichkeiten, eine HTML-Datei zu bearbeiten.

Entweder Sie wissen bereits, welches Element Sie als nächstes benötigen. Dann klicken Sie das entsprechende Icon an. Quanta erzeugt daraufhin sowohl das Anfangs-, als auch das Endtag und platziert den Cursor dazwischen, sodass Sie den zugehörigen Text sofort an der richtigen Stelle eingeben können. Oder Sie schreiben zunächst Ihren Text und überlegen sich im Nachhinein, wie er formatiert werden soll. In diesem Falle markieren Sie die entsprechende Stelle und klicken dann auf das Icon mit der gewünschten Formatanweisung. Quanta umschließt den markierten Text mit dem passenden Tag-Paar.

Einzelne Teile des Dokuments färbt der Editor ein. Dieses “Programmiererbunt” (in der Fachsprache Syntax-Highlightinggenannt) hilft bei der Orientierung im Quelltext und der Fehlerkorrektur. Sollten sich Syntaxelemente während der Eingabe farblich nicht passend verändern, hat sich eine Ungenauigkeit eingeschlichen. Hier gilt es, genauer hinzuschauen oder die Online-Hilfe zu konsultieren.

Wann immer Sie sich das Ergebnis Ihrer Bemühungen in der Browser-Ansicht ansehen wollen, klicken Sie in der Quanta-Werkzeugleiste auf das Icon mit dem Auge oder drücken [F6]. Damit schaltet das Programm auf die interne Vorschau um (Abbildung 4). Mit einem nochmaligen Druck auf [F6] kommen Sie zur Code-Ansicht zurück.

Die Vorschau genügt, um die entstehende Seite schnell zu überprüfen, garantiert aber nicht das gewünschte Aussehen in den verschiedenen Browsern. Hierzu müssen Sie die Datei abspeichern und in den jeweiligen externen Web-Browser laden.

Projektverwaltung

Web-Sites bestehen nur selten aus einem einzigen File, sondern meist aus einer Vielzahl verschiedener Dateien. Hier geht der Überblick schnell verloren, wenn man nicht in ein bisschen Verwaltungsarbeit investiert. Quanta stellt auch für die Projektverwaltung geeignete Hilfsmittel bereit.

Der Grundstock für das Projekt wird mittels eines Assistenten gelegt, der Sie durch drei Schritte führt. Er ist in der Werkzeugleiste der IDE unter Project / New Project… zu finden. Im ersten Schritt bietet er eine Eingabemaske für allgemeine Einstellungen (Abbildung 5).

Abbildung 5: Projektdaten festlegen

Klicken Sie ins erste Feld des Eingabeformulars – der Assistent vergisst nämlich, den Cursor schreibgerecht zu platzieren –, und geben Sie Ihrem Projekt einen Namen. Die darunter liegenden Zeilen werden automatisch ausgefüllt.

Das zweite Feld, Project Destination, dient zur Festlegung des Projektverzeichnisses. Sollten Sie Ihre Dateien nicht wie vorgegeben in einem direkt unterhalb des Home-Verzeichnisses angesiedelten Unterverzeichnis ablegen wollen, wählen Sie über den Schalter mit den drei Pünktchen ein anderes Verzeichnis aus. Die Wahl des Verzeichnisses bestimmt auch, ob Sie vorhandene Dateien mit Assistentenhilfe in Ihr Projekt aufnehmen können oder mit einem leeren Projekt beginnen.

In das dritte Feld wird der Name der Projektdatei eingetragen. Darin speichert Quanta im XML-Format alle Informationen, die es benötigt, um das Projekt zu verwalten.

Unter dem Stichwort Project Sources im unteren Teil des Assistentenfensters entscheiden Sie, ob sich Ihre zu bearbeitenden Files bereits auf Ihrem Rechner befinden, oder ob Sie sie zunächst aus dem Web herunterladen möchten. Bei einem neuen Projekt ist Add local files die richtige Wahl.

Abbildung 6: Vorhandene Dateien einbinden

Klicken Sie nun auf Weiter. In einem zweiten Arbeitsschritt bietet der Assistent Ihnen an, bereits vorhandene Dateien ins Projekt einzubinden (Abbildung 6). Indem Sie die Option Insert files from Projektverzeichnis wählen, werden alle Dateien aus dem im ersten Schritt angegebenen Projektverzeichnis sowie seiner Unterverzeichnisse ins untere Fenster eingelesen.

Der zweite Checkbutton dient alternativ der gezielten Auswahl der Dateien anhand ihrer Endungen. Wie in Abbildung 6 zu sehen, sind im Web gebräuchliche Dateiformate vordefiniert. Da die Länge des Feldes nicht ausreicht, sie alle auf einmal anzuzeigen, verschweigt der Screenshot, dass darunter selbstverständlich auch HTML-Dateien mit den Suffixen HTML, HTM, html und htm fallen.

Der dritte Checkbutton, Insert files with the specific file mask, erlaubt die Einbindung von Dateien mit selbstdefinierten Dateiendungen.

Mit Weiter öffnet der Assistent Ihnen das Tor ins Internet (Abbildung 7). Sollten Sie vorhaben, Ihre Homepage der breiten Öffentlichkeit zugänglich zu machen, müssen Sie sie auf einen Rechner übertragen, der von Ihren Besuchern mit Hilfe eines Web-Browser besucht werden kann. Die Zugangsdaten bekommen Sie von Ihrem Provider.

So hilfreich es wäre, bereits an dieser Stelle den Namen des Ziel-Web-Servers einzugeben, so wenig Effekt haben entsprechende Einträge in der getesteten Quanta-Version. Um das Projekt dennoch zu initialisieren, übergehen Sie diesen Schritt einfach und klicken auf Abschließen. Damit steht der (Weiter-)Entwicklung Ihrer Homepage nichts mehr entgegen.

Abbildung 7: Der Schlüssel zur Veröffentlichung

Arbeit am Projekt

Beachten Sie bitte, dass Quanta ganz strikt zwischen Dateien trennt, die zum Projekt gehören und sonstigen Files, auf die mit Quanta ebenfalls zugegriffen werden kann. Um die Übersicht nicht zu verlieren, bietet Quanta im linken Fenster der IDE eine Dateibaumansicht und eine Projektansicht an, die Sie über Reiter anwählen können. Der Reiter mit dem Bildschirmicon steht für die Dateibaumansicht, das Icon mit drei Würfeln in Rot, Blau und Grün für die Projektbaumansicht.

Die Projektansicht zeigt nur die im Projekt geführten Dateien an, ignoriert jedoch alle anderen Dateien und die Verwaltungsdatei des Projekts mit der Endung .webprj, während die Dateibaumansicht alle vorhandenen Dateien anzeigt (Abbildungen 8a und b).

Abbildung 8a: Tunnelblick

Abbildung 8b: Voller Durchblick

Beide Ansichten sind geeignet, um Dateien über einen Doppelklick zu öffnen und in den Editor zu laden. Lediglich die Verwaltungsdatei myproject.webprj lässt sich nicht auf diese Weise öffnen. Über Project / Insert file(s)… ist es jederzeit möglich, weitere Dateien in ein bestehendes Projekt aufzunehmen. Für jede hinzugefügte Datei wird am unteren Rand des Editors ein weiterer Reiter angelegt.

Abbildung 9: Volles Programm

Zwischen den einzelnen Dateien wechseln Sie mit der Maus. Sollten Sie jedoch während des Schreibens nicht nach dem Nager angeln wollen, werden Sie die Tastenkombination [Alt – Pfeil nach rechts] bzw. [Alt – Pfeil nach links] schnell zu schätzen wissen.

Solange eine Datei nicht abgespeichert ist, erhält sie eine provisorische Bezeichnung. Speichern Sie möglichst bald alle Dateien ab, und geben Sie Ihnen passende Namen. Das erleichtert nicht nur die Orientierung, sondern erlaubt es Ihnen auch, die Dokumente mittels Hyperlinks zu verknüpfen.

Gespeichert wird entweder über die Menüleiste oder das Kontextmenü der rechten Maustaste. Im nun folgenden Dialog bietet Ihnen Quanta als Speicherort das zuvor angelegte Projektverzeichnis an. Geben Sie der Datei einen Namen, und klicken Sie auf OK. Bejahen Sie die Frage, ob Sie die Datei dem Projekt hinzufügen wollen. Sollten Sie hier mit Nein antworten, geht die Datei keinesfalls verloren. Sie wird für sich abgespeichert, sodass Sie sie weiterhin bearbeiten können, wird allerdings nicht als Projektdatei geführt.

In diesem Moment erledigt Quanta zwei Dinge: Das Programm schreibt den provisorischen Namen auf dem Reiter in den von Ihnen gewählten Dateinamen um und fügt die Datei in der Projektansicht im linken Fenster hinzu.

Fehlerbereinigung

Doch wo gearbeitet wird, schleicht sich unvermeidlich der Fehlerteufel ein und hinterlässt seine Visitenkarten in Form von Bugs. Auch HTML-Schreiberlinge leiden nämlich unter dem Umstand, dass Computer fantasielose Gesellen sind.

Was man ihnen vorsetzt, führen sie stur und ohne jedes Gefühl für Richtigkeit aus. Daher muss auch eine Auszeichnungssprache wie HTML ganz klaren Regeln folgen. Diese Syntax zu prüfen, ist Aufgabe eines Syntax-Checkers. Er liest den Code und listet die gefundenen Fehler auf.

Quantas Syntax-Checker macht sich nach Aufruf über Werkzeuge / Syntax check oder die Tastenkombination [Strg-p] an die Arbeit. Seine Ausgaben erscheinen unterhalb des Editor-Fensters. Klicken Sie im Debug-Fenster auf die entsprechende Fehlermeldung, so setzt Quanta den Maus-Cursor genau auf den wunden Punkt. Zusätzlich wird die fehlerhafte Stelle im HTML-Quelltext so positioniert, dass sie in der Mitte des Editor-Fensters zu liegen kommt. Auf diese Weise sieht man schnell, wenn ein Tag fehlt und kann den Text vervollständigen.

Abbildung 10: Die schwarze Liste des Kammerjägers

Allerdings ist ein Syntax-Checker kein Allheilmittel. So mancher Fehler bleibt ihm verborgen; so manches Mal verweist er allenfalls indirekt auf die Fehlerquelle. Hier wird Ihnen sowohl Fantasie als auch Erfahrung bei der Fehlersuche abverlangt. Doch HTML macht es Ihnen in aller Regel einfach: Fehlerhaftes HTML erzeugt in der Vorschau (und oft auch im Browser) eine fehlerhafte Darstellung.

Endgültiger Upload

Trotz der oben geschilderten Schwierigkeiten mit dem Projekt-Assistenten ist es möglich, ein komplettes Projekt mit seinen vielen Dateien komfortabel auf den Ziel-Server zu kopieren.

Öffnen Sie dazu unter Project / Upload Project… oder mit [F8] das Eingabefenster für Ihre Zugangsdaten. Die Projektdateien werden eingelesen, und Sie können nun den Bestimmungsort der Homepage eingegeben. Ihr Passwort erscheint nur in Form von Sternchen. Port 21 ist für den Datei-Transfer per FTP im Normalfall der Richtige. Bei offener Internet-Verbindung genügt ein Klick auf den Button Upload, um die Daten auf den Web-Server zu übertragen, sodass sie anschließend über einen Browser zu bewundern sind.

Abbildung 11: Live-Schaltung

Eigene Funktionalität

Ihnen reicht die Funktionalität, die Quanta bietet, nicht aus? Wählen Sie unter Einstellungen den Menüpunkt Configure Actions…. Es öffnet sich ein umfangreicher Dialog, der nicht nur die vorhandenen Funktionen aufzählt, sondern auch erlaubt, Quanta Ihren Bedürfnissen entsprechend einzurichten (Abbildung 12).

Abbildung 12: Verwirrende Vielfalt

Links sind die bereits definierten Funktionen aufgelistet. Markieren Sie einen Punkt auf dieser Liste, wird Ihnen rechts die genauere Information dazu angezeigt. Jede dieser Funktionen gehört einer von drei Kategorien an: Tag, Skript oder Text. Tag erlaubt Ihnen die Definiton zusätzlicher HTML-Tags, während Sie mit der Funktion Text eigene oft verwendete Texte, beispielsweise einen persönlichen Copyright-Hinweis, hinterlegen.

Da Quanta keine Möglichkeit bietet, um deutsche Umlaute und andere Sonderzeichen in Character Entitiesumzuwandeln, nutzen wir den “Actions configuration“-Dialog, um das Programm um eben diese Funktionalität zu erweitern. Mit recodeexistiert auf den meisten Linux-Installationen ein Kommandozeilenprogramm, das für diese Aufgabe wie geschaffen ist.

Klicken Sie auf den Button Neu unten links (Abbildung 12). In der Aktionsliste erscheint eine leere Funktion, die als Symbol einen blauen Punkt enthält. Geben Sie im oberen Formularfeld einen Namen ein (beispielsweise Recode), und wählen Sie den mittleren Reiter Script aus. Tragen Sie in das leere Textfeld den Befehl

recode -d latin1..h4

ein. Diese Information fällt übrigens nicht vom Himmel – hier war der Blick in die recode-Manpage notwendig.

Mit dieser Befehlszeile allein ist es jedoch nicht getan. Das Kommando muss wissen, was es verarbeiten soll, was mit dem Ergebnis zu tun ist und wie es im Fehlerfalle zu reagieren hat. Diese Aktionen können Sie über die Reiter Input, Output und Fehler steuern.

Da jeweils ein ganzes HTML-Dokument verarbeitet werden soll, geben wir als Input-Quelle current document an. Der Reiter Output bietet noch mehr Optionen. Wir entscheiden uns hier für Aktuelles Dokument ersetzen – schließlich soll das Dokument im bearbeiteten Zustand im Netz erscheinen. Im Auswahldialog des Reiters Fehler entscheiden wir uns dafür, uns eventuelle Fehlermeldungen im Message Window anzeigen zu lassen.

Mit einem Klick auf OK wäre unsere neue Funktion einsatzbereit. Für die Anwenderin ist jedoch am blauen Punkt als Symbol nicht zu erkennen, wozu sie gut ist.

Klicken Sie daher im “Actions configuration“-Dialog auf das Icon mit dem blauen Punkt links neben dem Text:-Feld. Im Auswahldialog dürfen Sie sich nun ein aussagekräftigeres Icon aussuchen (Abbildung 13). Quanta bietet Ihnen seine eigenen Icons zur Auswahl an. Sollten Ihnen diese nicht zusagen, sorgt ein Systemverzeichnis wie /opt/kde2/share/apps/quanta/toolbar für Nachschub, das Sie nach einem Klick auf Sonstige Symbole / Durchsuchen erreichen können. Selbstverständlich steht es Ihnen frei, zu einem Icon-Editor greifen und eigene Icons zu kreieren.

Abbildung 13: Icons helfen bei der Orientierung

Jetzt fehlt eigentlich nur noch ein Button, um die neue Recode-Funktion per Klick aus der Werkzeugleiste heraus aufrufen zu können. Öffnen Sie unter Einstellungen / Werkzeugleisten einrichten einen Dialog (Abbildung 14), der die individuelle Ausgestaltung der Quanta-Toolbars erlaubt. Das obere Dropdown-Menü lässt Ihnen die Wahl, ob der neue Tool-Button in einer der Programm-Werkzeugleisten oder in einem der Reiter über dem Editor-Fenster eingefügt werden soll.

Darunter finden Sie eine zweigeteilte Ansicht. Links sind die möglichen Aktionen aufgelistet, rechts die tatsächlich eingebundenen und damit jeweils sichtbaren Aktionen. Pfeile in der Mitte ermöglichen es, einzelne Elemente hinzuzufügen oder wegzunehmen. Pfeile nach oben oder unten erlauben die Positionierung der einzelnen Elemente.

Unsere Recode-Funktion ist gut in der Editor Toolbar aufgehoben, die bislang Aktionen wie Cut, Copy&Paste, Undo oder die Rechtschreibprüfung enthält. Suchen Sie im linken Fenster nach dem selbsterstellten Skript Recode. Markieren Sie es, und befördern Sie es mit einem Klick auf den blauen Pfeil nach rechts in die Liste der in der Toolbar angezeigten Aktionen. Gefällt Ihnen die vorgegebene Position nicht, so markieren Sie das Element erneut und versetzen es mittels der Pfeile nach oben oder unten an die gewünschte Position.

Ein Klick auf Anwenden überträgt das Icon in die Werkzeugleiste. Quanta sorgt sogar dafür, dass Ihr neues Tool in die Liste aufgenommen wird, die Ihnen die Definition eines Tastatur-Shortcuts, zu finden unter Einstellungen / Tastenzuordnungen vornehmen…, erlaubt.

Abbildung 14: Ausbaufähig – die Werkzeugleiste

Diese individuellen Erweiterungsmöglichkeiten dürften vor allem fortgeschrittene Entwickler zu schätzen wissen. Quanta ist jedoch für jeden einen näheren Blick wert, der ein bisschen Unterstützung durch eine moderne GUI sucht. Das Programm wird jedoch jeden enttäuschen, der auf eine Web-Seiten-Erstellung per Drag&Drop hofft.