3/97

Workshop: Homepage im Eigenbau (Teil 2)

Seitenarchitektur

In Ausgabe 12/96 haben wir Sie in die Welt der Internetsprache �HTML� eingef�hrt. Nun geht's ans Eingemachte. Mit Funktionen f�r Fortgeschrittene werden Sie zum HTML-Spezialisten.

Wer HTML-Seiten der ersten Generation mit den bunten, lauten und animierten Seiten vergleicht, die sich heute in den Browserfenstern tummeln, wird kaum glauben, da� hinter allem dieselbe Seitenbeschreibungssprache steckt: �HTML� wurde �ber die wenigen Jahre seiner Existenz kr�ftig an allen Ecken und Enden erweitert. Nicht zuletzt wurde diese Entwicklung von den beiden Hauptkonkurrenten im PC-Bereich (Microsoft und Netscape) vorangetrieben. Die Programmierer der Amiga-Browser haben es da schwer, Schritt zu halten. Dennoch ziehen �IBrowse� und �AWeb� den beiden Gro�en im Gesch�ft wacker nach. Grund genug, hier auch fortgeschrittene HTML-Features vorzustellen, von denen einige noch nicht auf Amiga-Browsern erscheinen. Und wer nicht auf die Updates von AWeb und IBrowse warten kann, benutzt die Macintosh-Version von Netscapes �Navigator� mit dem Mac-Emulator �Shapeshifter�. �brigens bleiben wir allen T-Online-Nutzern auch die Prozedur des Hochladens der Homepage auf den T-Online-Server nicht l�nger schuldig. Im Kasten �T-Online� steht, wie's geht.

Spalten und Tabellen: Hier sehen Sie, wie einige Tabellen- beispiele von AWeb 1.5 auf den Bildschirm gebracht werden

MagnaMedia-Tabelle: Das Seitenlayout der MagnaMedia- Hauptseite wird durch un- sichtbare Tabellen bestimmt

Image Map: Durch einen Klick in die Grafik verzweigt man zur gew�nschten Seite - vorher mu� das Bild geladen werden

Tabellen

Wie gewohnt, dienen HTML-Befehle (HTML-Tags) zum Definieren von Tabellen. Jede Tabelle wird vom Tag-Paar �<TABLE>� und �</TABLE>� umschlossen. Zwischen diesen beiden Tags lassen sich mit �<TD>� und �</TD>� Tabellenzeilen definieren, welche wiederum mit �<TR>� und �� umklammerte Tabellenspalten enthalten. Kopfzeilen werden mit �<TH>� und �</TH>� definiert und vom Browser hervorgehoben dargestellt. Tabellen lassen sich mit Rahmen darstellen, um beispielsweise Zahlenmaterial aufbereitet anzuzeigen. L��t man den Rahmen weg, erscheinen die Inhalte der Tabellenspalten pl�tzlich wie von Geisterhand nebeneinander auf dem Bildschirm. Da sich Tabellen auch schachteln lassen, steht damit mehrspaltigem Text mit einflie�enden Bildern u.�. nichts mehr im Weg.

Wie bei HTML �blich, k�nnen Tabellen wiederum alles enthalten, was sich mit HTML definieren l��t. Das k�nnen Texte und �berschriften sein, ebenso Bilder, Links oder Formatangaben. In der H�he und Breite passen sich Tabellen auf Wunsch automatisch an das Browserfenster an. Wem das nicht gef�llt, der kann Tabellen in vorgegebene Ma�e zw�ngen. Auch Gr��e und Aussehen der Tabellenrahmen und -gitternetzlinien lassen sich einstellen. All dies wird durch zus�tzliche Parameter der Tabellen-Tags erreicht, die Sie zusammengefa�t im Kasten �HTML-Tabellen� finden. Leider werden nicht alle der Parameter von allen Amiga-Browsern unterst�tzt. Das farbliche Unterlegen von Tabellenzellen klappt z.B. bisher mit keinem.

Was sich mit Tabellen alles anstellen l��t, ist beeindruckend. M�chten Sie beispielsweise einen Seitenrand erzeugen, der jeweils 10% des Browserfensters umfa�t, definieren Sie einfach eine rahmenlose Tabelle mit 80% der Fensterbreite und zentrieren diese. Auch Text im Zeitungsstil in schmalen Spalten (wie Sie sie gerade lesen) l��t sich einfach gestalten (s. Bild �Spalten und Tabellen�) und schlie�lich sind Tabellen die erste �saubere� M�glichkeit, in HTML Text und Grafiken nebeneinander formatiert darzustellen; der Text flie�t dann am Bild vorbei. Im Bild �MagnaMedia-Tabelle� sehen Sie die MagnaMedia-Hauptseite mit ausnahmsweise eingeschalteten Tabellenrahmen. Es l��t sich leicht erkennen, wie die sonst unsichtbaren Tabellen das Seitenlayout bestimmen. Wie so oft in HTML gilt auch bei Tabellen �probieren geht �ber studieren�. Nach kurzer Zeit zaubert man dann die tollsten HTML-Seiten.

Maps

<MAP NAME="Klickkarte">
<AREA SHAPE="rect"    COORDS="1,1,100,100" HREF="anker1">
<AREA SHAPE="circle"  COORDS="60,150,40"   HREF="anker2">
<AREA SHAPE="polygon" COORDS="60,200,100,250,20,250" HREF="anker3">
</MAP>

Die zu definierende Map erh�lt zun�chst einen Namen, im Beispiel �Klickkarte�. Dieser wird sp�ter in der Grafikreferenz verwendet. Das erste �<AREA>�-Tag definiert ein Viereck mit Pixelkoordinaten f�r die linke obere Ecke (1, 1) und die rechte untere Ecke (100, 100). Wird in diesen Bereich geklickt, so wird sp�ter zum Anker �anker1� verzweigt. Das zweite ��-Tag hingegen definiert einen kreisf�rmigen Klickbereich. Dessen Mittelpunkt befindet sich an der Pixelposition (60, 150), sein Radius betr�gt 40 Pixel. Das letzte Tag schlie�lich definiert einen vieleckigen Bereich. In angegebenen Fall handelt es sich um ein Dreieck mit den Eckpunkten (60, 200), (100, 250) und (20, 250). Dabei akzeptiert der �COORDS�-Parameter beliebig viele Eckpunkte. Die Verbindungslinie zwischen dem ersten und letzten Punkt, die das Polygon abschlie�t, wird dabei automatisch �hinzu gedacht�. Um die geeigneten Klickbereiche f�r Ihre Grafik herauszufinden, empfiehlt es sich, die Koordinatenanzeige eines Malprogramms zu benutzen. Vergessen Sie aber nicht, da� der Anwender in jedem Fall die Grafik laden mu�, um die Seite bedienen zu k�nnen. Sie sollten daher eine Text-Alternative zur Verf�gung stellen.

Um nun eine Grafik als Klickkarte in Ihrem HTML-Dokument einzubinden, gen�gt es, die eben definierte Map in die Referenz mit Hilfe des Parameters �USEMAP� aufzunehmen. Hei�t die zur definierten Map passende Grafik beispielsweise �karte.gif�, so w�rde das n�tige ��-Tag wie folgt lauten:
<IMG SRC="karte.gif"
USEMAP="Klickkarte">
Damit haben wir uns so weit in die HTML-Programmierung vorangewagt, wie es die Amiga-Browser z.Zt. k�nnen. In der n�chsten Folge besch�ftigen wir uns mit Frames. Wenn man sie auf dem Amiga auch noch nicht darstellen kann, so kann man sie doch gestalten und im WWW anderen Browsern zur Verf�gung stellen.

T-Online � die eigene Web-Seite

Haben Sie ein EMail-Alias eingerichtet ist der Aufruf noch einfacher: http://home.t-online.de/home/EMailAlias
wobei �EMailAlias� durch Ihren Alias ersetzt wird. Das �@t-online.de� Ihrer vollst�ndigen Adresse lassen Sie weg.

HTML-Tabellen Tabellen sind ein wichtiges HTML-Sprachelement, um aus dem typischen Flie�textformat auszubrechen. Folgende Tags und Parameter dienen zum Definieren von Tabellen. Angegeben sind dabei jeweils das n�tige Tag-Paar mit den m�glichen Parametern.
<TABLE ...>	</TABLE>	definiert Tabelle
	BORDER(=x)	Tabelle wird mit Rahmen gezeichnet. Wird x angegeben, ist der Rahmen x Pixel breit
	WIDTH=x%	Tabelle f�llt x Prozent der Fensterbreite
	HEIGHT=y%	Tabelle f�llt y Prozent der Fensterh�he
	WIDTH=x	Tabelle ist x Pixel breit
	HEIGHT=y	Tabelle ist y Pixel hoch
	CELLSPACING=x	Gitternetzlinien innerhalb der Tabelle sind x Pixel breit
	CELLPADDING=x	Abstand zwischen Zellrahmen und Inhalt betr�gt x Pixel
	BORDERCOLOR=xxxxxx	bestimmt Farbe des Rahmens in der HTML-typischen Farb-Notation
	BORDERCOLORDARK=xxxxxx	bestimmt dunkle Farbe eines schattierten Rahmens
	BORDERCOLORLIGHT=xxxxxx	bestimmt helle Farbe eines schattierten Rahmens
	BGCOLOR=xxxxxx	definiert Hintergrundfarbe der Tabelle
<TH...>	</TH>	definiert (hervorgehoben dargestellte)Kopfzeile
<TR...>	</TR>	definiert Tabellenzeile
<TD...>	</TD>	definiert Tabellenspalte
	WIDTH=x	Zellspalte ist x Pixel breit
	WIDTH=x%	Zellspalte umfa�t x Prozent der Fensterbreite
	HEIGHT=y	Zellzeile ist x Pixel hoch
	HEIGHT=y%	Zellzeile umfa�t y Prozent der Fensterh�he
	ALIGN=LEFT	Zellinhalt wird linksb�ndig ausgerichtet (default)
	ALIGN=RIGHT	Zellinhalt wird rechtsb�ndig ausgerichtet
	ALIGN=CENTER	Zellinhalt wird zentriert dargestellt
	VALIGN=TOP	Zellinhalt wird vertikal nach oben ausgerichtet (default ist mittig)
	VALIGN=BOTTOM	Zellinhalt wird vertikal nach unten ausgerichtet
	COLSPAN=d	Zelle erstreckt sich �ber d Spalten
	ROWSPAN=d	Zelle erstreckt sich �ber d Zeilen
	BGCOLOR=xxxxxx	definiert Farbe des Zellhintergrundes

� Copyright by MagnaMedia Verlag AG, Haar bei M�nchen
Ver�ffentlichung und Vervielf�ltigung nur mit schriftlicher Genehmigung des Verlags