Arachnophilia-Workshop

Konvertierungen

Definieren Sie eine weitere Tool-Leiste, die den Namen [Konvert] hat. Auf dieser Leiste bringen wir einige Konvertierungsbefehle unter.

Klammern und Ampersand

Der erste Knopf in der neuen Leiste bekommt den Namen [>>H] für "spitze Klammern im HTML-Code darstellen". Der Befehl, der unter dieser Taste abgelegt wird, lautet [TagDelimsEscape]. Natürlich geht das auch rückwärts, also HTML-Code in spitze Klammer zurückverwandeln. Definieren Sie einen weiteren Knopf als [H>>] mit dem Befehl [TagDelimsUnescape].

Nach der Umwandlung werden die spitzen Klammern <>, die sonst die HTML-Tags begrenzen, nicht mehr als Befehl interpretiert, sondern als normales Zeichen im Text. Diese Umwandlung ist nötig, wenn Sie z.B. das mathematische Zeichen für größer als > im Text benutzen wollen. Wenn Sie die Umwandlung vergessen, könnten die Browser auf die Idee kommen, Sie hätten einen neuen HMTL-Code erfunden.

Wenn in Ihren Texten das Zeichen & vorkommt (das kaufmännische "Und"-Zeichen, engl. "ampersand"), sollte es ebenfalls maskiert (umgewandelt) werden. Die beiden neuen Knöpfe könnten [&>H] und [H>&] heißen, die Befehle lauten [ReplaceSelectionAll:/&/&#038;/] und [ReplaceSelectionAll:/&#038;/&/].

Mit dem Befehl [ReplaceSelectionAll:/(Suchbegriff)/(Tauschbegriff)/] wird nur der jeweils markierte Bereich bearbeitet. Das Zeichen / trennt die Bestandteile des Befehls voneinander; auch andere Zeichen wie das Anführungszeichen sind als Trenner zulässig.

Eine Tabelle der Sonderzeichen müsste bereits mit dem Button [ASCII] auf der [Meta]-Leiste zu erreichen sein; wenn Sie häufig Texte mit Sonderzeichen umwandeln müssen, können Sie sich dort die entsprechenden Codes holen.

Vorsicht: Achten Sie darauf, dass nicht versehentlich Zeichen verändert werden, die Sie nicht verändern wollen. Wenn Sie über den HTML-Code für das spanische Ñ die &-Konvertierung laufen lassen, sehen die Besucher kein Ñ mehr, sondern dies hier: &ntilde;.

Umlaute

Wenn Sie Buchstaben wie das französische é und die deutschen Umlaute umwandeln wollen, definieren Sie in der [Konvert]-Leiste zwei weitere Knöpfe, die [x2H] und [H2x] heißen könnten (für "extended character to HTML" und umgekehrt). Die Befehle lauten [CvtExtChars] und [CvtHtmlChars]. Diese Befehle bearbeiten nur den im Quelltext markierten Bereich. Der Tastaturbefehl STRG-A markiert den gesamten Text, falls Sie alles auf einen Schlag umwandeln wollen.

Verzeichnisse

Wie bereits gesagt, sollten allgemeine Gestaltungselemente und Grafiken, die Sie auf jeder Seite brauchen, in einem zentralen Verzeichnis Ihrer Website liegen. Nennen Sie das Verzeichnis z.B. _gr oder _img. Dank des Unterstrichs stehen diese zentralen Grafik-Verzeichnisse in der Liste der Verzeichnisse ganz oben - das erleichtert die Übersicht.

Normalerweise können Sie in Ihrem HTML-Code aus jedem Unterverzeichnis, egal wie tief es angesiedelt ist, mit /_gr/ auf das Grafik-Verzeichnis zugreifen, wenn es direkt unterhalb des Root-Directory liegt. Der Schrägstrich / ohne Punkte davor weist den Server an, im Root-Directory (Stammverzeichnis Ihrer Domain) nach dem Verzeichnis _gr zu suchen. Probieren Sie es ruhig mal auf diese Weise. Eigentlich sollte das problemlos funktionieren.

Es gibt aber Fälle, in denen diese Abkürzung nicht sinnvoll und nicht wünschenswert ist. Wenn Sie Wert darauf legen, auf der lokalen Festplatte Ihres Rechners ein funktionierendes Abbild Ihrer Web-Site zu nachzubilden, werden Sie feststellen, dass Sie die Pfade exakt angeben müssen, sonst funktioniert es nicht - es sei denn, Sie richten sich einen lokalen Web-Server ein, der sich so verhält wie der Web-Server, bei dem Sie Ihre Site untergebracht haben. Eine gute Adresse ist z.B. der kostenlose XAMPP.

Nun gut, nehmen wir also an, das Grafik-Verzeichnis in meinem Projekt heißt _gr. In diesem Verzeichnis gibt es eine schwarze Linie, die ich auf jeder HTML-Seite einsetzen will:

Wenn ich die Linie mit dem Tool [blackL] in diese Datei hier einfüge, landet der folgende Code in meinem Quelltext:

<img src="../_gr/000000.gif" width="450" height="2" alt="">

Die Punkte vor dem Verzeichnis ../_gr/ markieren einen sogenannten relativen Link zu der Grafik, die ja in ihrem Verzeichnis bleiben soll. Wenn ich dieselbe Grafik in einem tieferen Unterverzeichnis verwenden will, kann ich diesen Quelltext nicht einfach umkopieren, denn der Link müsste dort beispielsweise lauten:

<img src="../../_gr/000000.gif" width="450" height="2" alt="">

Da wir eine Verzeichnisebene tiefer gegangen sind, müssen wir auch eine Verzeichnisebene weiter hoch, wenn wir auf die Grafik zugreifen wollen, also steht ../../ im Code.

Diese Umwandlungen von ../ nach ../../ oder gar nach ../../../../../../ sind bei einer verschachtelten Verzeichnisstruktur ausgesprochen lästig und fehleranfällig, und je mehr solcher Elemente vorkommen, desto mehr Fehler werden uns unterlaufen. Ein Punkt zu viel oder zu wenig, und der Link funktioniert nicht mehr.

Zum Glück können wir diese lästige Arbeit mit Arachnophilia automatisieren.

Rufen Sie mit [EditTB] die Tool-Leiste [Konvert] auf und fügen Sie mit [NewAppend] einen neuen Knopf ein, den Sie [V+1] nennen (für "Verzeichnistiefe plus 1"). Geben Sie den folgenden Befehl ein:

[ReplaceSelectionAll:"../_"../../_"]

Dieser Befehl soll die Verzeichnistiefe um 1 Ebene erhöhen. Jetzt brauchen wir noch einen Befehl, um die Verzeichnistiefe um 1 Ebene zu verringern:

[ReplaceSelectionAll:"../../_"../_"]

Diese Pfadumwandlungen sind ein weiterer Grund dafür, dass das Grafik-Verzeichnis einen Unterstrich haben sollte. In unseren HTML-Dateien kommen nicht nur relative Links auf die Gestaltungselemente, sondern auch relative Verweise auf andere HTML-Seiten vor. Die gerade definierten Umwandlungsbefehle verändern aber nur dort die Verzeichnistiefe, wo die Kombination ../_ vorkommt, also ein relativer Link und ein Verzeichnis, das mit einem Unterstrich beginnt. Relative Links zu allen anderen Verzeichnissen und Dateien (die mit Buchstaben ohne Unterstrich anfangen) bleiben unberührt.

Beim Schreiben neuer HTML-Seiten in tieferen Verzeichnissen können wir deshalb zunächst alle Elemente in der Grundform einfügen, also mit der Verzeichnistiefe 1. Wenn die Seite komplett fertig ist, markieren wir mit [STRG-A] den gesamten Text und führen die Anpassung der Verzeichnisebenen für den ganzen Text auf einen Schlag aus. Die relativen Links zu anderen Web-Seiten in unserem Projekt sind davon nicht betroffen.

Wenn man sich mal vertan hat, kann man mit diesen Befehlen sogar für die gesamte Datei die Verzeichnistiefe synchronisieren. Als Erstes wird die Verzeichnistiefe durch mehrmaliges Drücken von [V-1] auf 1 reduziert und anschließend für den gesamten Text durch [V+1] auf die gewünschte Tiefe gebracht. Der Vorgang lässt sich umkehren und beliebig oft wiederholen.

Auf die gleiche Weise können Sie auch Ihre Menüstruktur organisieren. Legen Sie Ihre Unter-Inhaltsverzeichnisse, auf die Sie über das Menü zugreifen wollen, ebenfalls in einem zentralen Verzeichnis ab, das mit einem Unterstrich beginnt, z.b. ../_inhalt/. Dank des führenden Unterstrichs wird mit dem oben beschriebenen Tauschbefehl das Menü genauso abgehandelt wie der Zugriff auf die Grafiken. Das bedeutet, dass auf einen Schlag die gesamte Menüstruktur und die allgemeinen Gestaltungselemente an die gewünschte Verzeichnistiefe angepasst werden können.

Weitere Konvertierungsbefehle

Assemble

Legen Sie im Tool [Konvert] einen Knopf mit der Aufschrift [Asmbl] an. Ins Feld kommt der Befehl [AssembleLinesNoTabs]. Dieser Befehl wirkt sich nur auf die Darstellung des Quelltextes aus, die HTML-Ausgabe bleibt davon unberührt. Der Befehl hat den Sinn, zerrissene Zeilen wieder zu einem Block zusammenzufügen. Achten Sie aber genau darauf, was Sie markieren. Wenn Sie den gesamten Quelltext markiert haben, verwandelt sich auch der gesamte Text in einen Bandwurm.

Machmal ist es nötig, aus irgendeiner Quelle (vom Scanner oder woher auch immer) Texte in unsere HTML-Datei zu kopieren. Diese Fremdtexte sind oft mit Tabsprüngen eingerückt und voller überflüssiger Leerzeichen. Ein Beispiel:

.....Dieser Text
...ist ziemlich zerfetzt
..und soll .....
.......aus irgendeiner Quelle
.....in unseren Text
........hineinkopiert worden.

Die führenden Leerzeichen (hier durch Punkte dargestellt) und die Zeilenschaltungen werden in unseren Quelltext übernommen. Der Befehl [AssembleLinesNoTabs] fügt zwar die Zeilen zusammen, lässt aber die Leerzeichen stehen. Also müssen wir den Button [Asmbl] noch folgendermaßen ergänzen: [AssembleLinesNoTabs][ReplaceSelectionAll:".."."]. Die Punkte sind natürlich durch Leerzeichen zu ersetzen. Durch wiederholtes Ausführen werden nach und nach die mehrfachen Leerzeichen aus dem Text gelöscht, bis jeweils nur noch eines übrig ist.

Strip Tags

Dieser Befehl entfernt nach Rückfrage alle HTML-Tags aus dem markierten Bereich. Der Befehl ist nützlich, wenn Sie z.B. einen längeren, mit HTML-Tags formatierten Text in reinen ASCII-Text verwandeln wollen. Legen Sie den Befehl [StripTags] unter dem neuen Button [Strip] ab. Auch dieser Befehl behandelt wie der vorherige nur den Bereich, den Sie markiert haben.

---