JOE 1.46 - Internet-Seiten gestalten zum Nulltarif

Mit Joe 1.46 steht dem Atari-Anwender eine vielseitige und komfortable Entwicklungsumgebung für das Erstellen von HTML-Seiten zur Verfügung. Ganz im Gegensatz zum HomePage Penguin, der den Anfänger Schritt für Schritt zur Fertigstellung einer Seite führt, ist hier gestalterische Handarbeit gefragt.

Die Preview zur Version 1.42 des HTML-Editors Joe (nachzulesen in der STC 5/99) sollte bereits einen ersten Eindruck dessen vermittelt haben, was dieses Programm zu leisten imstande ist. Seit dieser Version hat sich einiges getan, so dass nun rechtzeitig zum Erscheinen der neuen Version 1.45 dieser Artikel vorliegt, der sich näher mit den einzelnen Funktionen befaßt, die das Programm bietet und an einem Praxisbeispiel demonstrieren soll, was man damit machen kann.

Neuerungen

Neu hinzugekommen sind seit der letzten Version u.a. die Unterstützung der Kürzel des Editors qed (einschließlich automatischer Expansion), "normale" Blockmarkierung sowie ein Kontextmenü, das über die rechte Maustaste aufgerufen werden kann. Darüber hinaus wurden natürlich auch viele Bugs beseitigt und die Unterstützung der Standard-Tastenkombinationen weiter vorangetrieben.

Kürzel

Schon seit einiger Zeit erfreuten sich Benutzer des Texteditors qed einer sehr nützlichen Funktion, die dieser von Everest übernommen und ausgebaut hatte: Kürzel, auch bekannt als Makros. Das sind bis zu acht Zeichen lange Abkürzungen, die man anstelle längerer Textabschnitte eingibt und dann ersetzen lässt. Eine Besonderheit des Editors qed ist dabei die Möglichkeit, diese Kürzel automatisch expandieren zu lassen, d.h. in die Ersatztexte umzusetzen. Somit kann man z.B. einfach Umlaute durch die sogenannten HTML-Entities ersetzen lassen, sobald man sie eingibt. Bei allen Kürzeln, die nicht automatisch expandiert werden sollen, muss man nach Eingabe des Kürzels die Taste Esc drücken.

Da man innerhalb dieser Kürzeldefinitionen auch Zeilenumbrüche erzeugen kann, lassen sich so auf einfache Weise ganze Textabschnitte, wie z.B. ein HTML-Header, erstellen. Es ist sogar möglich, den Cursor zu positionieren, nachdem das Kürzel expandiert worden ist.

Der Aufbau einer Kürzeldatei ist folgender:

Kürzel=Textabschnitt

wobei innerhalb des Textabschnitts folgenden Zeichenfolgen besondere Bedeutung zukommt: ',

^^ Zeilenumbruch ~ Cursorposition

Folgende Zeile belegt die Zeichenfolge "pos" mit einem Textabschnitt:

pos=Der —Cursor steht^^ hier.

Nach Eingabe von "pos" und Drücken der Taste Esc erschiene an der Stelle, wo zuvor "pos" stand, folgendes:

Der Cursor steht hier.

Wobei der tatsächliche Textcursor dann vor "Cursor" stünde.

Auch innerhalb des Kürzels hat ein Zeichen besondere Bedeutung: Der Stern (*). Steht er nach dem Kürzel und somit vor dem Gleichzeichen, wird das Kürzel automatisch expandiert, d.h. ohne dass man zuvor die Taste Esc drücken müßte. Zumindest in qed verhält es sich so -in Joe muss zuvor noch einmalig die Option "Kürzel: Automatische Expansion" im Menü "Optionen/Makroeinstellungen ..." aktiviert werden.

Module

In der Preview ist dieser Teil etwas zu kurz gekommen, daher beschreibe ich nun etwas ausführlicher, was es damit auf sich hat.

Jedes einzelne Modul ist ein eigenständiges Programm, das auch ohne Joe läuft und seine Arbeit verrichten kann. Seine Aufgabe besteht darin, ein bestimmtes HTML-Element zu erzeugen, beispielsweise eine Tabelle, einen Header oder ein Bild in den Seitenquelltext einzufügen. Dabei können diverse Parameter wie Ausmaße und Inhalt bestimmt werden, die je nach HTML-Tag unterschiedlich umgesetzt werden.

Der Pfad zu den Modulen wird im Fensterdialog "Pfade bestimmen ...", der sich im Optionen-Menü befindet, eingestellt. Dort ruft man durch Klick auf den Button rechts neben "Joe-Module" die Dateiauswahlbox auf und sucht das Verzeichnis, das die Module für Joe enthält. Speichern (Optionen/Konfiguration sichern ...) nicht vergessen!

Danach sollten bereits alle Module gefunden worden sein. Falls nicht, kann man dies auch später jederzeit durch den entsprechenden Button in "Optionen/Einstellungen .../Module" erreichen.

Wollen wir...?

Nun wollen wir mal beispielhaft eine HTML-Seite erstellen. Hört sich einfach an - ist es auch! Ziel unseres Beispiels soll es sein, es Ihnen zu ermöglichen, beliebige ASCII-Texte in HTML einzubinden und dabei hier und da einige auflockernde Elemente wie Bilder einzustreuen. Das Ganze soll natürlich auch sauber sein statt hingepfuscht, also bedienen wir uns doch einfach der Funktionen, die Joe bietet! Wer das nun Folgende selbst ausprobieren will, braucht dazu lediglich die aktuelle Version 1.45 des HTML-Editors Joe sowie einen HTML-Browser [ Info 1 ].

Bevor wir wirklich anfangen, möchte ich aber erst einmal erklären, was HTML eigentlich ist. HTML ist eine Seitenbe-schreibungssprache, mit der man Texte so vorbereiten kann, dass Geräte diese formatiert ausgegeben können. Wenn auch verschiedenste Arten von Ausgabegeräten denkbar sind, so ist das bekannteste und am häufigsten verwendete doch der HTML-Browser. Deshalb werde ich im Folgenden auch nur noch das Ausgabegerät Browser betrachten. Ähnlich wie bei einer Textverarbeitung kann man mit HTML Text formatieren, d.h. z.B. bestimmte Stellen in einem Text auf unterschiedliche Art hervorheben, den Text ausrichten (links- und rechtsbündig, zentriert, Blocksatz) oder Teile davon fett, kursiv oder unterstrichen darstellen lassen (wobei letzteres nicht zu empfehlen ist, da HTML-Browser das Unterstreichen in der Regel als Darstellung für Links verwenden).

Diese Formatierungen werden, wie alle Kommandos in HTML, durch Tags (sprich: Täägs) ausgedrückt, die sogenannte Attribute enthalten können, die die Aufgabe des Tags weiter spezifizieren. Die Schreibweise sowohl der Tags als auch der Attribute bleibt dem Ersteller der HTML-Seite überlassen, d.h. er kann sie groß oder klein schreiben. Im Beispiel (s.u.) werden wir alles groß schreiben, aber das ist im Grunde egal. Lediglich bei den Attributwerten muss man ggf. auf die Schreibweise achten, denn diese Werte können beispielsweise Textstrings sein, die für den Benutzer sichtbar ausgegeben werden.

Beinahe jedes Tag hat auch ein Endetag, das oft zwingend angegeben werden muss. Diese Endetags werden mit einem Slash (/) eingeleitet, haben immer denselben Namen wie das Starttag und besitzen in der Regel keine Attribute.

Die Form, die schließlich im HTML-Quelltext verwendet wird, um Tags zu definieren, sieht wie folgt aus:

<TAG ATTRIBUTE" WERT l" ATTRIBUT2="WERT2">

und für Endetags: </TAG>

Leerzeichen innerhalb des Quelltextes werden übrigens nur dann interpretiert, wenn sie zwischen Wörtern stehen, die Teil des Textes sind. Text ist ganz einfach alles, was kein Tag ist. Wann immer das Ausgabegerät (z.B. der Browser) auf Text trifft, gibt er ihn aus. Ausnahme ist hier wiederum der Bereich, der als Kommentar gekennzeichnet ist. Kommentare gibt man wie folgt an:

<!— Dieser Text ist ein Kommentar und wird nicht angezeigt. —>

Zuletzt müssen wir noch eine Besonderheit beachten: Umlaute und spezielle Zeichen müssen in HTML anders ausgedrückt werden. Die Ausdrücke, durch die man diese Zeichen ersetzt, nennt man Entities. Sie haben immer die Form:

&code; ,

Die deutschen Umlaute werden dabei wie folgt umgesetzt:

Ä (A-Umlaut) [U+2192] &Auml
Ö (O-Umlaut) [U+2192] &Ouml
Ü (U-Umlaut) [U+2192] &Uuml
ä (a-Umlaut) [U+2192] &auml
ö (o-Umlaut) [U+2192] &ouml
ü (u-Umlaut) [U+2192] &uuml
ß (sz-Ligatur) [U+2192] &szlig;

Sie selbst müssen sich aber nicht darum kümmern, die Umlaute und speziellen Zeichen zu maskieren, d.h. umzusetzen -diese Aufgabe nimmt Ihnen Joe ab, indem er jedes eingegebene Sonderzeichen, also auch alle Umlaute, HTML-gerecht umsetzt.

Weiterführende Informationen zu HTML sowie eine komplette Beschreibung aller HTML-Tags erhalten Sie in [ info 2 ].

Zur Sache

Am Anfang steht HTML. Eigentlich stimmt das nicht ganz. Davor kommt nämlich in einem wirklich sauberen HTML-Dokument noch etwas anderes: die DTD. Die DTD ist die Dokumenttypbeschreibung und wird deshalb angegeben, weil es verschiedene Versionen des HTML-Standards gibt (ähnlich wie z.B. bei Betriebssystemversionen - ein TOS 1.0 bietet weit weniger Funktionen als ein TOS 4.5 ...). Für dieses Beispiel wollen wir uns auf den recht weit verbreiteten Standard HTML 3.2 verständigen, der wie folgt definiert wird:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Den Aufbau dieser Zeile muss man sich nicht merken - statt dessen schreiben wir uns einfach ein Kürzel, das dies vereinfacht. Zu diesem Zweck legen wir eine neue Datei mit einem Texteditor oder mit Joe an und schreiben in sie nur die folgende Zeile:

dtd=<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Danach speichern wir die Datei unter dem Namen JOE.KRZ in Joes Verzeichnis (die dort ggf. schon vorhandene Datei JOE.KRZ benennen wir zuvor vorübergehend um). Jetzt können wir Joe starten, der daraufhin sogleich die neu angelegte Kürzeldatei auswertet. Sobald man nun "dtd" eingibt und die Taste Esc drückt, erscheint die DTD für HTML 3.2 (obige Zeile) im Editorfenster. Die automatische Expansion schalten wir besser nicht an, da die Zeichenfolge "dtd" ja durchaus in einem Text vorkommen könnte.

Nun geht es gleich weiter, indem wir sagen, um was es eigentlich geht, nämlich HTML:

<HTML>

Darauf folgt der Dateikopf, Header (HEAD) genannt. In ihm werden Angaben zum Dokument selbst gemacht, also Beschreibung, Erstellungsdatum, Autor, Titel etc. Einzig der Titel ist es, der angegeben werden muss (in Browsern wird er in der Regel in der Titelleiste angezeigt), alle anderen Daten sind optional. Daher wollen wir uns fürs erste auch damit begnügen, der Seite einen Titel zu geben:

<HEAD>
<TITLE>ST-Computer</TITLE>
</HEAD>

Hinter dem Header folgt der eigentliche Text im Dateikörper, BODY genannt:

<BODY>

Dieser Text wird sp&auml;ter im Browser angezeigt werden.

</BODY>

Letztendlich wird die HTML-Seite beendet, indem wir das geöffnete Tag HTML wieder schließen:

</HTML>

Der Text im BODY-Bereich kann durch einen beliebigen anderen ersetzt werden und wird im Fenster des HTML-Browsers ausgegeben - der anzuzeigende Inhalt einer Seite befindet sich also im BODY-Bereich. Alles um diesen Bereich herum wird als HTML-Grundgerüst bezeichnet und hat in jeder HTML-Seite den gleichen Aufbau.

Hat man beispielsweise einen längeren Text geschrieben, den man in eine HTML-Seite einbinden möchte, kopiert man diesen entweder komplett ins Klemmbrett und fugt ihn so in Joe ein, dass er vollständig im BODY-Bereich steht, oder aber man benutzt eine in Joe eingebaute Funktion: Durch Betätigen der Tastenkombination Control-D wird eine Dateiauswahlbox aufgerufen, in der man eine Datei auswählen kann, die vollständig in den aktuellen Text an der Cursorposition eingefügt wird. Es reicht also, den Cursor in die Zeile nach <BODY> zu bewegen und Control-D zu drücken - der Text erscheint danach im Editorfenster an der gewünschten Stelle.

Zu beachten ist nun, dass der eingefügte Text höchstwahrscheinlich Umlaute enthält, die noch nicht HTML-konform maskiert sind. Um das zu erreichen, bedienen wir uns wiederum einer in Joe bereits eingebauten Funktion:

einfach den Textbercich selektieren, in dem die Umlaute maskiert werden sollen (in unserem Fall also alles im BODY-Bereich), einmal kurz die rechte Maustaste drücken und "Zu ¨ konvertieren" auswählen. Siehe Abbildung l, Seite 13: Kontextmenü

Wenn Sie diese Funktion statt auf einen Textabschnitt auf den ganzen Quelltext anwenden wollen, rufen Sie sie einfach ohne selektierten Block auf. Umgekehrt können Sie maskierte Zeichen auch wieder in ASCII-Zeichen (Atari-Zeichensatz) zurückwandeln.

Nach erfolgreichem Einfügen des Textes wollen wir nun noch ein Bild einfügen, das die Seite ein wenig aufpeppt. Dazu öffnen wir das Modulefenster (Taste F6) und klicken einmal auf "Bild einfügen <IMG>" (siehe Abbildung auf Seite 12 unten). Daraufhin wird das entsprechende Modul gestartet, und es erscheint ein Fensterdialog, in dem verschiedene Einstellungen getroffen werden können.

Als erstes ist das Bild, das wir einfügen wollen, über die Dateiauswahl zu bestimmen. Dabei muss darauf geachtet werden, dass nur Bilder in den Formaten GIF und JPEG (JPG) von HTML-Browsern angezeigt werden können (ggf. müssen vorhandene Bilder also zuvor in eines dieser beiden Formate konvertiert werden)! Nach erfolgter Wahl einer Bilddatei übernimmt das Modul die Angaben für die tatsächliche Breite und Höhe des Bildes in die dafür zuständigen Editfelder. Nun gilt es, die übrigen Einstellungen den eigenen Wünschen entsprechend zu treffen, also z.B. die Ausrichtung oder den Abstand anzugeben. Nachdem wir das getan haben, kann das fertige Tag an den Aufrufer (in diesem Fall Joe) zurückgeliefert werden, der es dann an der Cursorposition einfügt, oder es einfach zur späteren Verwendung ins Klemmbrett sichern. Diese Wahl trifft man im Menü Datei, indem man entweder "Ins Klemmbrett sichern" oder "Direkt an den Aufrufer senden" auswählt, wobei die aktive Einstellung durch ein Häkchen davor signalisiert wird. Sobald das Modul mit "Datei/Beenden" verlassen wird, wird die zu diesem Zeitpunkt aktive Einstellung ausgeführt. Im Falle von "Direkt an den Aufrufer senden" haben wir also eine Bildreferenz in unserem Quelltext, die den HTML-Browser das Bild mit den eingestellten Eigenschaften anzeigen lässt.

Auf diese Weise lassen sich übrigens auch Movies, Trennlinien, Tabellen, Header und Hintergrundsounds einbinden, wobei hierfür dann eigene Module zur Verfügung stehen

Ich will was sehen!

Eine wichtige Sache haben wir geflissentlich außen vor gelassen: Wie können wir das Ergebnis unserer Mühen nun endlich ansehen? Benutzer des HTML-Browsers CAB habens da besonders gut: Sowohl CAB selbst als auch Joe unterstützen das sogenannte OLGA-Protokoll. Für das Arbeiten mit Joe bedeutet das, dass bei korrekter Installation von OLGA (und Joe, siehe ST-Guide-Hilfetext) ein einfaches Sichern eines Quelltextes genügt, um CAB dazu zu bringen, die betreffende Seite neu zu laden und anzuzeigen.

Wie auch immer, wir wollen uns unsere frisch erstellte Seite erst einmal einfach nur ansehen. Dazu speichern wir den Quelltext in einem beliebigen Verzeichnis (vorzugsweise da, wo wir ihn wiederfinden ...) mit einem ebenfalls beliebigen Namen. Wichtig ist lediglich die Endung: Sie muss *.HTM oder *.html lauten (letzteres nur auf Laufwerken, die lange Dateinamen unterstützen). Danach stellen wir in "Optionen/Pfade einstellen ..." bei "HTML-Browser" denselben ein (beispielsweise CAB), schließen den rensterdialog wieder und drücken die Taste F10 - fertig: Jetzt sollten Sie Ihre Seite im Browserfenster betrachten können.

Für weitergehende Fragen zu Joe lesen Sie bitte den ST-Guide-Hypertext, der Teil der Joe 1.46-Distribution ist, oder kontaktieren Sie mich; zu Fragen bezüglich HTML empfehle ich .

Bezug:

JOE 1.46 erhalten Sie über die aktuelle Spezial-Diskette 9/1999 oder über das Internet: http://rajah.atari.org

Und nun viel Spaß mit Joe!

Bilder:
Optionsmenü unter JOE 1.46 Vielfältige Einstellungsmöglichkeiten
Joe 1.46 in Zusammenarbeit mit CAB, verbunden über das OLGA-Protokoll. Während im oberen Fenster der HTML-Sourcecode erscheint, kann man das Ergebnis direkt über CAB betrachten.
Das Kontext-Menü erscheint jederzeit durch Betätigen der rechten Maustaste.
Das Modul-Menü wird aufgerufen, um Bilder usw. einzufügen.


Jens Hatlak
Aus: ST-Computer 09 / 1999, Seite 11

Links

Copyright-Bestimmungen: siehe Über diese Seite