G O P A

05.10.2023

Archiv # Recherche # Links # Kontakt # Gästebuch # Impressum

Index Register
Login

Die Anzeige des Archivs erfolgt grafisch. Ändern

The Wave und GeoWrite - Das Bundle für die eigene Homepage (Teil 1)

Autor: Andreas Neef

das Bundle für die eigene Homepage

Seit Oktober 2000 steht uns Commodore-Usern mit The Wave ein grafischer Webbrowser zur Verfügung. Damit ist es nun endlich möglich, auch ohne einen Shell-Zugang auf einem UNIX-Server, mit dem C64/128 ins Internet zu gelangen. Das Interesse an der Nutzung des Internets wächst seitdem und es war wohl nur eine Frage der Zeit, bis auch die eigene Homepage auf dem Wunschzettel der Fans steht. Doch da sehen viele eine große Hürde denn einen HTML-Editor besitzt The Wave leider nicht...

Webseiten sind auch nur Programme

Doch spezielle Tools braucht man zum Erstellen einer Webseite eigentlich gar nicht. Klar ist es recht einfach, mit entsprechenden Programmen, wie Frontpage oder NetFusion auf dem PC, sich ein ansprechendes Layout auszusuchen und Bilder und Informationen an gewünschter Stelle einzufügen. Am Ende entsteht daraus aber auch nur ein HTML-Quelltext, den der Webbrowser dann in entsprechend formatiertem Layout darstellt.
Wenn man es genau nimmt, ist HTML (Hyper Text Markup Language) auch nur eine Programmiersprache, wie Basic, C oder Pascal, und der Quelltext einer Webseite ähnelt einem kleinen Programm. Daher kann man mit ein wenig Hintergrundwissen (der Kenntnis der wichtigsten HTML-Befehle) und einem normalen Texteditor auch eine Webseite programmieren.

Ein erstes kleines Projekt

Zuerst starten wir "The Wave". Das Programm lädt als Startseite die Datei Start64.html (oder Start 128.html bei Wave128). Diese Startseite wollen wir nun als erstes Projekt an unsere eigenen Bedürfnisse anpassen, denn sie kann jederzeit mit einem Klick auf das Wave-Symbol unter der Menüleiste geladen werden. Damit kann die Startseite eine sehr nützliche Navigationshilfe darstellen, ähnlich wie die Lesezeichen bzw. Favoriten bei anderen Webbrowsern.
Den Quelltext können wir uns über den Menüpunkt File -> view source ansehen. Das hilft uns aber noch nicht allzu viel weiter, denn editieren können wir den Text hier nicht. Doch da kommt GeoWrite ins Spiel. Unter dem Menüpunkt open wählen wir die Option application und starten GeoWrite. Da die zu The Wave gehörenden Webseiten als GeoWrite-Dateien gespeichert sind, können wir die Datei Start64.html ganz einfach in GeoWrite öffnen (Bild 1). Nun sollten wir uns erst mal mit einigen grundlegenden HTML-Befehlen vertraut machen. Als erstes fällt auf, daß einige Worte in spitzen Klammern stehen. Dies dient der Kennzeichnung von Befehlen (sogenannte Tags), d.h. alles, was nicht in spitzen Klammern steht, ist reiner Text und wird vom Browser auch als solcher angezeigt.

In der ersten Zeile steht <HTML>. Das sollte immer zu Beginn eines HTML-Files stehen, damit der Browser weiß, um was für eine Datei es sich handelt und daß er im folgenden HTML-Quelltext zu erwarten hat. In der letzten Zeile der Datei steht ein </HTML>, was anzeigt, daß hier der HTML-Quelltext zu Ende ist. Viele Funktionen und Eigenschaften in einer Webseite werden mit einem Tag eingeleitet und mit dem gleichen Tag, nur durch den einleitenden Schrägstrich ergänzt, wieder abgeschlossen. Darauf kommen werden wir im Verlauf dieses kleinen Projektes noch öfter stoßen.
Als nächstes finden wir die Anweisung <HEAD>. Dies markiert den Beginn des Dateikopfes, in dem Informationen über das File selbst zu finden sind. Da wäre als erstes der Titel der Seite, der mit dem Tag <TITLE> eingeleitet und mit </TITLE> abgeschlossen wird. Der Text zwischen den beiden Titel-Tags erscheint in der Titel-Zeile vieler Browser (bei The Wave gibt es allerdings keine solche Titelzeile). Hier sollte also etwas stehen, was die Seite kurz beschreibt (z.B. Meine Startseite), in der vorliegenden Wave-Startseite steht hier Startxx.html. Es können auch noch weitere Informationen im Kopf einer HTML-Datei stehen, aber das vertagen wir mal auf einen späteren Kursteil.
Nun wird der Kopf der HTML-Datei mit dem Tag </HEAD> abgeschlossen.

Jetzt geht es richtig los

Es folgt nun der eigentliche Inhalt der Seite. Dieser wird mit dem Tag <BODY> (engl. für Körper) eingeleitet und am Ende der Datei (vor dem Tag </HTML>) mit </BODY> wieder abgeschlossen. Danach steht <BR> (für break = Umbruch), wodurch ein Zeilenumbruch erzeugt wird. Nun folgt ein Text, der erläutert, daß dies unser persönliches Startfile ist und der uns dazu ermutigt, dieses nach unseren Vorstellungen zu verändern. Na, dann tun wir das doch einfach. Wir löschen den Quelltext zwischen den beiden BODY-Tags und ersetzen diesen nun mit unseren eigenen Informationen.
Als erstes sollten wir vielleicht mit einer Überschrift beginnen. In HTML wird diese mit <H> (von Headline = Überschrift) eingeleitet und mit </H> beendet. Es wird zwischen sechs Hierarchieebenen unterschieden, H1 ist die übergeordnete Überschrift und erscheint damit am größten, H2, H3 ... H6 sind Unterüberschriften und deshalb entsprechend kleiner.
Wir beginnen mit einer Hauptüberschrift, die z.B. so aussehen könnte:

<H1>Meine Internet-Startseite</H1>

Bild 1

Jetzt könnte darunter eine kleine Erläuterung stehen, beispielsweise folgendes:

- Nützliche Links zum Thema Commodore

Nun speichern wir die Datei und verlassen GeoWrite, um uns das soeben programmierte gleich mal anzusehen. Man gelangt automatisch zu The Wave zurück, wo die Startseite wieder angezeigt wird. Das ist eine schöne Eigenschaft von The Wave. Man kann ohne den Umweg über den Desktop zwischen GeoWrite und Browserfenster wechseln und so sehr schnell die im Quelltext gemachten Änderungen betrachten. Davon solltet ihr beim Experimentieren mit den HTML-Befehlen ruhig oft Gebrauch machen, damit ihr seht, wie sich die Änderungen auf die Darstellung im Browser auswirken. So werdet ihr am schnellsten mit der Programmierung von Webseiten vertraut.
Beim Betrachten fällt euch sicher auf, dass das ü im Wort Nützliche fehlt. Warum denn das? Im Quelltext ist es doch vorhanden. Nun, das liegt daran, dass The Wave eigentlich ein englischer Browser ist und deshalb keine Umlaute und deutsche Sonderzeichen anzeigt. Mag sein, dass man dies vielleicht ändern kann, indem man einen deutschen Zeichensatz in die Fontlist des Browsers einträgt, aber so ergibt sich gleich die Gelegenheit, etwas zum sauberen Programmieren zu sagen. Bei dieser Datei, die nur auf Euerm Rechner vorhanden ist, mag es ja egal sein. Aber wenn ihr mal eine Homepage im Internet veröffentlicht, könnt ihr nicht davon ausgehen, dass jeder die selben Einstellungen bei seinem Browser hat, geschweige denn den gleichen Browser benutzt, wie ihr. Daher solltet ihr versuchen, so zu programmieren, dass die Darstellung in möglichst vielen Browsern und in vielen Sprachen gleich oder wenigstens ähnlich ist. Im Falle der Umlaute ist dies recht einfach, denn da gibt es eine vorgegebene Syntax. Ein ä wird als ä umschrieben, ein ö als ö und ein ü als ü, bei großen Umlauten wird einfach das Zeichen nach dem & groß geschrieben und ein ß wird als ß ausgedrückt. Im Prinzip funktioniert das wie mit den Steuerzeichen für den Ausdruck in einigen älteren Textverarbeitungsprogrammen. Zurück zu unserem Beispiel: Das Wort Nützliche müsste im Quelltext also in Nützliche geändert werden.

Abgesehen von diesem kleinen Problem wirkt diese Textzeile im Browser, verglichen mit der Überschrift, doch recht klein. Deshalb öffnen wir, wie schon oben beschrieben, wieder den Quelltext, fügen den Tag <FONT SIZE="+1"> vor der Textzeile ein und </FONT> danach. Mit dem Befehl FONT (engl. Schrift) kann man das Aussehen des Textes beeinflussen. In unserem Fall haben wir mit der Option SIZE="+1" die Schriftgröße um eine Stufe erhöht. Genauso gut kann man auch Zeichensatz, Ausrichtung oder Farbe (was The Wave aber leider noch nicht unterstützt) des Textes ändern.

Nun wirkt unser Text schon etwas besser, nur sähe das ganze zentriert und ein wenig abgesetzt zu den folgenden Informationen sicher schöner aus.
Zum Zentrieren fügen wir vor die Überschrift einfach ein <CENTER> ein und am Ende des zu zentrierenden Bereiches ein </CENTER>. Um das ganze ein wenig vom folgenden Inhalt zu trennen, bietet sich eine Trennlinie <HR> (steht für horizontal rule) an.

Die Sache mit den Links

Nun wollen wir einige Verknüpfungen (Links) zu anderen Commodore-Seiten einfügen. Dazu beginnen wir als erstes mit einem neuen Absatz, der mit einem <P> (steht für paragraph = Absatz) eingeleitet wird. Wer bisher aufmerksam gelesen hat, kommt sicher von selbst drauf, wie das Ende dieses Absatzes markiert wird. Na klar, mit </P>. Zwischen diesen beiden Tags fügen wir nun unsere Links ein. Diese sind immer nach folgendem Schema aufgebaut:

Der Link beginnt mit <A HREF= (A für anchor = Anker, HREF für hypertext reference = Hypertext Referenz) und enthält in Anführungszeichen die Adresse, wohin der Link weisen soll. Dieser einleitende Tag endet mit >. Nun folgt der Text, den der Browser für den Link anzeigen soll und schließlich wird das ganze mit dem Tag </A> abgeschlossen.
Ein Link zu Maurice Randalls Wave-Seite würde beispielsweise so aussehen:

<A HREF="http://www.ia4u.com/~maurice/gbrowse/wave.html">Maurice Randalls Wave-Seite</A>

Auch hier sollten wir die Schriftgröße vielleicht um einen Schritt erhöhen also fügen wir nach dem Beginn des Absatzes (also nach dem <P>) wieder <FONT SIZE="+1"> ein und </FONT> vor dem Ende des Absatzes.
Nach dem Vorbild des ersten Links können wir nun einige weitere erstellen. Damit diese aber nicht alle in einer Zeile erscheinen, muß zwischen den einzelnen Links jeweils ein Zeilenumbruch erzwungen werden. Das geschieht, wie schon oben kurz beschrieben, mit dem Tag <BR> den wir nach jedem Link einfügen. Jetzt könnt ihr Eurer Kreativität freien Lauf lassen und Links zu Webadressen, die euch wichtig erscheinen, einfügen.

Eines könnten wir aus der Original-Startdatei noch übernehmen: den Link zum Wave-User-Guide. Daran seht ihr auch gleich, dass es nicht nur möglich ist, auf Seiten im Internet zu verweisen, sondern auch zu lokalen Seiten auf der Diskette bzw. Partition. Bei der Linkadresse muß dann nur der Dateiname, gegebenenfalls mit Pfad ins entsprechende Unterverzeichnis, angegeben werden. Das sieht dann folgendermaßen aus:

Hilfe zu THE WAVE gibt das <A HREF="userguide.html">User Guide</A>.

Wenn ihr die Seite nun abspeichert und nach The Wave zurückkehrt, könnte Eure persönliche Startseite etwa so wie auf Bild 2 aussehen. Natürlich könnt ihr auch Links zu anderen Seiten setzen, diese thematisch ordnen oder noch Kommentartexte dazu schreiben. Eurer Phantasie sind da keine Grenzen gesetzt.

Bild 2

Ausblick

Dies soll als Einstieg in die HTML-Programmierung unter GEOS dienen. Natürlich habe ich die Möglichkeiten, die man bei der Gestaltung einer Webseite hat, nicht mal näherungsweise ausgeschöpft, allenfalls einen winzigen Einblick gegeben. Raum zum Experimentieren gibt es jede Menge, probiert doch einfach mal etwas aus. Beim nächsten Mal werde ich einige Gestaltungsmöglichkeiten näher erläutern, mit denen man Texte und Links hervorheben oder formatieren kann. So kann man Webseiten auch unter nicht framefähigen Browsern, wie The Wave, ein recht ansprechendes Aussehen geben.

Wer das nicht abwarten möchte, findet unter [1] weitere Informationen zu Thema HTML.

[1] Stefan Münz, SelfHTML:

http://www.teamone.de/selfaktuell/

Dieser Artikel ist Bestandteil von:

Kurzlink hierhin: http://geos-printarchiv.de/337

Letzte Änderung am 01.11.2019