Einige wichtige Grundlagen zur HTML-Programmierung haben wir in den ersten beiden Teilen dieses Kurses gelegt. Damit sollte es jedem möglich sein, eine einfache Homepage selbst zu erstellen. Mit ein wenig Kreativität kann man damit auch schon recht anschauliche Seiten gestalten.
Im Großen und Ganzen bezogen sich alle Befehle und Tags bisher nur auf die Ausrichtung und Darstellung von Text. Die Darstellung dürfte daher bei so ziemlich allen Webbrowsern gleich oder zumindest ähnlich sein. Im heutigen Teil soll es ein wenig um das Einbinden von Grafik gehen, natürlich mit einem Blick auf die Besonderheiten von The Wave.


Ein Bild sagt mehr als tausend Worte

Mit einem Bild kann man nicht nur Informationen anschaulicher vermitteln, es lockert auch die Seite ein wenig auf, so daß der Betrachter nicht gleich durch riesige Textflächen "erschlagen" wird. Der Tag zum Einbinden von Grafiken lautet <img> (vom englischen Wort Image=Bild). Zuallererst muß natürlich die Quelle (engl. source), also der Name der Bilddatei angegeben werden. Das sieht dann etwa folgendermaßen aus.

<img src="bild.jpg">

Der Name der Datei muß in Anführungszeichen gesetzt werden, mit Angabe des Pfades können auch Dateien aus anderen Verzeichnissen eingebunden werden. Auch Grafikdateien auf anderen Web-Servern können in die eigene Seite eingebunden werden (bitte eventuelle Copyrights beachten), dafür muß als Pfad einfach die genaue Internet-Adresse angegeben werden, beispielsweise so:

<img src="http://www.go64.de/images/go64smal.gif">

Geeignete Formate für WWW-gerechte Grafiken sind GIF und JPG, die von vielen Browsern
"inline", also im eigenen Fenster angezeigt werden können. Für den Fall, daß der Browser keine Grafiken anzeigen kann (sei es, weil er dies nicht beherrscht oder aus was für einem Grund auch immer), empfiehlt es sich stets, einen Alternativtext anzugeben. Dafür gibt es die Anweisung alt= (für alternative), die innerhalb des image-Tags eingefügt wird.

Beispiel:
<img src="http://www.go64.de/images/go64smal.gif" alt="Go64-Logo">

Mit den Anweisungen width= und height= kann man Breite und Höhe der Grafik angeben, damit läßt sich ein Bild beispielsweise verkleinert oder auch verzerrt darstellen. Die Angaben können in Pixeln oder auch in Prozent von der ursprnglichen Größe gemacht werden.

Beispiele:
<img src="bild.gif" width=250 height=450>
<img src="datei.jpg" width=25% height=25%>

Viele Formatierungsmöglichkeiten, die wir schon für Text und Tabellen kennengelernt haben, sind auch auf Grafiken anwendbar. Mit den Angaben align=left bzw. align=right kann die Grafik linksbndig bzw. rechtsbndig ausgerichtet werden und der darauffolgende Text fließt rechts bzw. links neben der Grafik herum.

Beispiel
<img src="bild.gif" align=right> Text, der links um die rechts ausgerichtete Grafik fliet

Um Grafiken auszurichten, ohne den folgenden Text um die Grafik fließen zu lassen, muß vor und hinter der Grafik einfach nur eine Absatzmarkierung eingefgt werden, beispielsweise so:

<p><img src="bild.gif"></p>

Auch als Link kann man eine Grafik verwenden. Das geschieht genau so, wie beim setzen eines Textlinks, nur daß anstelle des Texts die entsprechende Angabe der Grafik eingefügt wird. Zum Beispiel folgendermaßen:

<a href="http://www.go64.de"><img src="http://www.go64.de/images/go64smal.gif"
alt="Go64"></a>

Wer sich an dem Rahmen stört, der dabei automatisch um die Grafik gezogen wird, kann diesen durch Einfügen der Anweisung border=0 in den Tag ausschalten.


Grafiken mit The Wave

Jetzt haben wir zwar eine ganze Menge über die Einbindung von Grafiken in eine Webseite gelernt, aber für The Wave ist das eigentlich gar nicht relevant, weil momentan die Anzeige von Grafiken noch gar nicht unterstützt wird. Dennoch ist es sicher nicht falsch, dieses Thema einmal kurz zu betrachten, denn schließlich kann man ja unsere Webseiten, die wir zwar mit unserem Commodore-Computer erstellt haben, auch mit anderen Browsern auf anderen Systemen ansehen.
Trotzdem gibt es eine Möglichkeit, ein paar Bildchen unter The Wave darzustellen. Geoff Sullivan hat auf seiner Webseite [2] einige Fonts zum Download bereitgestellt, unter anderem ein Archiv mit dem Zeichensatz Buttons und einer erläuternden GeoWrite Datei. Um diesen Font in The Wave nutzen zu können, muß man die entsprechenden Dateien mit auf die Disk kopieren und folgende Zeilen in die Datei FontList64 bzw. FontList128 einfgen:

fontname=Buttons
      standard=Buttons64
      iso=BottonsISO64

bzw.

fontname=Buttons
      standard=Buttons128
      iso=BottonsISO128

Nun ist es möglich, Buttons in einem HTML-Dokument benutzen. Mit der rechten und linken Klammer ( bzw. ) kann man die Enden eines Buttons definieren, mit einem Unterstrich (Commodore + -) läßt sich ein kurzes Leersegment erzeugen, mit dem Leerzeichen im Text eines Buttons eingefügt werden können oder ein Button entsprechend gedehnt werden kann.
Ein Beispiel fr so einen Button könnte so aussehen:

<font face="Buttons"><a href="http://www.go64.de">Zur_Go64!</a></font>

The Wave stellt einen entsprechend beschrifteten Button dar, während jeder andere Webbrowser nur Zur_Go64! anzeigt.
Neben den Buttons gibt es noch einige andere Zeichen, die unter The Wave ein kleines Bildchen erscheinen lassen. Im folgenden sind das:

Shift + 1 (!), Shift + 3 (º), Asterisk (*) und Commodore + º (`)

Wie die entsprechenden Bildchen dazu aussehen, ist in der den Zeichensätzen beiliegenden GeoWritedatei erläutert (Bild 1).

Ein Wave-Friendly-Bildchen, wie es z.B. auf Maurice Randalls Webseite [3] eingefügt ist (Bild 2), ließe sich mit Verwendung eines Alternativtextes in der Schriftart Buttons auch für The Wave sichtbar darstellen:

...
<center>
<font face="Buttons"><img src="wave.gif" alt="`"></font>
<p>
<b>This site is WAVE friendly!</b>
</p>
</center>
...

Aufmerksamkeit bitte

Zum Abschluß dieses kleinen HTML-Kurses für Wave-Nutzer möchte ich noch eine Möglichkeit zeigen, wie wir Commodore-Anwender ein wenig auf uns aufmerksam machen können. Maurice Randall hat ja ab der Version B1.7 einen User-Agent in The Wave integriert.
Wenn wir eine Webseite besuchen, wird Wave64 bzw. Wave128 als verwendeter Browser und Commodore64/CMD_SuperCPU oder Commodore128/CMD_SuperCPU als System übermittelt. Somit nimmt die Welt bereits Notiz von uns als Internet-Benutzer. Wir können aber auch in Webseiten die Information speichern, da diese mit einem C64/128 und GeoWrite entstanden sind. Dafür soll an dieser Stelle noch einmal auf den Kopf von HTML-Dateien eingegangen werden.
Wir haben im ersten Teil gelernt, daß zwischen den Tags <head> und </head> Informationen zur jeweiligen Datei angegeben werden können. Bisher haben wir jedoch nur den Titel der Seite dort angegeben, man kann aber noch andere Informationen, sogenannte Meta-Tags, dort unterbringen. Das sind Anweisungen, in denen man nützliche Informationen für WWW-Server, Browser und Suchmaschinen notieren kann, wie z.B. Angaben zum Autor oder Inhalt der Datei. Nachfolgend einige Beispiele mit Erläuterung:

<meta name="author" content="Andreas Neef">
<meta name="keywords" content="Commodore64, Internet, The Wave">
<meta name="description" content="Auf dieser Seite gibt es Informationen zum programmieren von HTML-Seiten mit The Wave und GeoWrite">
Meta bedeutet über. Hinter name= wird der Fakt notiert, über den etwas geschrieben wird, also zum Beispiel der Autor der Webseiten. Die Informationen werden nach content= eingefügt (content = engl. Inhalt). Alle Angaben hinter den Istgleichzeichen müssen in Anführungszeichen stehen, einzelne Schlüsselworte werden durch Komma voneinander getrennt. In den obigen Beispielzeilen werden also Informationen über den Autor, einige Stichworte und eine Beschreibung des Inhalts der Seite beschrieben.
HTML-Editoren auf anderen Systemen fügen automatisch den Tag <meta name="generator"...> ein, welcher angibt, mit welchem Programm und eventuell auf welchem System der Quelltext erstellt wurde. Das ist der Tag, mit dem wir etwas Aufmerksamkeit erlangen können; die Angabe in unseren eigenen Webseiten könnte beispielsweise so aussehen:

<meta name="generator" content= "Commodore64/CMD-SuperCPU, GEOS2.0/Wheels, The Wave V1.0/GeoWrite V2.1">

Natürlich sind solche Angaben nur dann sinnvoll, wenn man eine Webseite wirklich online zur Verfügung stellen will, also auf einem Webserver speichert. Eine Seite, die man für den eigenen Bedarf im Wave-Verzeichnis speichert (wie die Startseite zum Beispiel), braucht logischerweise keine Informationen für andere Browser oder Suchmaschinen. Wer aber eine eigene Internetseite betreut und diese auch mit dem Commodore und The Wave bearbeitet, der sollte darauf ruhig auch aufmerksam machen. Schließlich soll die Welt ruhig registrieren, wozu wir C64/128-User fähig sind.

Ich hoffe, mit dieser kleinen Einführung ein wenig Anregung zum Erstellen einer eigenen Webseite gegeben zu haben und würde mich freuen, in Zukunft beim Durchstöbern des Internets mehr und mehr Seiten zu finden, die offensichtlich auf einem Commodore-Computer entstanden sind. Natürlich kann dieser Kurs nur eine kleine Einführung in die HTML-Programmierung sein, aber es ist ein Einstieg in die Materie. Wer sich ernsthaft dafür interessiert und gern mehr wissen möchte, der findet unter [1] weitere Informationen, die den Tatendrang sicher beflügeln können. Bei Wave-spezifischen Fragen genügt eine e-mail an mich (siehe Autoreninfo), dann helfe ich auch gern weiter.

Andreas Neef


[1] Stefan Münz, SelfHTML: http://www.teamone.de/selfaktuell/
[2] Geoff Sullivans Site: http://www.gis.net/~sunfish/tcr/cbm/cbmfiles/wavefonts/
[3] Maurice Randall talks GEOS: http://www.ia4u.net/~maurice