Nachdem wir uns ein wenig mit HTML befaßt haben, können wir uns nun die verschiedenen Ebenen von HTML (Netscape, HTML 2.0 und HTML 3.0) ansehen und überlegen, ob Sie diese Elemente benutzen möchten. In einigen der vorangegangenen Kapiteln wurden Ihnen Elemente vorgestellt, die zu den Standardeigenschaften von HTML 2.0 gehören. Allerdings ist hier aber noch viel mehr zu holen.
In diesem Kapitel sind zwei andere Arten von HTML-Befehlen von besonderer Bedeutung: Netscape-spezifische und HTML-3.0-Befehle. Netscape-spezifische Befehle sind HTML-Elemente, welche von der Firma Netscape eingeführt wurden. Sie sollen Netscape-Browser bei der Entwicklung von Netzwerken unterstützen. Dies schließt zwar nicht aus, daß Browser anderer Hersteller nicht auch diese Elemente nützen könnten, man geht aber davon aus, daß dies kaum möglich ist.
HTML 3.0 stellt sich als der neue Standard beim Aufbau von Netzwerken heraus. Es hat sich zwar noch nicht gänzlich durchgesetzt, aber wie von den Programmierern allgemein erwartet, wurden bereits viele Elemente anerkannt und in Browser von Netscape und anderen Herstellern eingebaut.
Zwar noch nicht amtlich, wird HTML 3.0 weitestgehend als Standard für HTML-Elemente betrachtet. Einige dieser Elemente sind Befehle, die Netscape (und andere) schon seit einiger Zeit anerkannt haben. Tatsächlich arbeitet man bei Netscape sehr intensiv daran, hier einen Maßstab zu setzen. Viele Elemente, die vor kurzem noch als Netscape-spezifisch angesehen wurden, werden wahrscheinlich in den HTML-3.0-Standard aufgenommen.
Für uns jedoch ist es wichtig, zwischen Netscape- und HTM- 3.0-Befehlen zu unterscheiden. Da der HTML-3.0-Standard nach und nach Gestalt annimmt, wird sich zeigen, inwieweit er sich von Netscape-Elementen unterscheidet und welche davon, so wie sie sind, übernommen werden. Und genau das wird für Sie als Netzwerk-Entwickler so wichtig.
Warum? Zwar beherrscht Netscape mit beträchtlicher Mehrheit den Browser-Markt, dennoch gibt es auch andere Anbieter. Aus diesem Grunde ist es wichtig, ob Sie sich dafür entscheiden, solche Elemente in Ihre Seite einzufügen. Einige Browser wären unter Umständen nicht in der Lage, Dokumente mit diesen Markierungen einzulesen, andere schon, allerdings mit weniger zufriedenstellendem Erfolg.
Da sich andere Browser zunehmend am Standard von HTML 3.0 orientieren, könnte es womöglich nicht mehr als nötig angesehen werden, zu versuchen, Netscape-Befehle – besonders wenn sich Anwendungen von HTML 3.0 und Netscape-spezifischen Elementen überlappen – zu implementieren. Also werden Sie sich, um die besten Ergebnisse zu erzielen, so weit wie möglich dem Standard von HTML 3.0 anpassen.
Die Ergänzungen von Netscape im Hinblick auf HTML unterscheiden sich grundsätzlich nach zwei Gesichtspunkten: Erweiterungen von Elementen nach HTML-2.0-Standard, und neue, nur für Netscape vorgesehene Elemente. Wollen wir uns zunächst die Erweiterungen von HTML 2.0 ansehen. Später werden wir dann unser Augenmerk auf die neue Art von Elementen richten, die Sie in Ihre Netscape-Seiten einfügen können.
Nahezu alle Netscape-Erweiterungen arbeiten als Eigenschaftsmarkierungen, welche in Standard-HTML-Elemente eingefügt werden. Allesamt sind sie dazu entwickelt worden, dem Benutzer mehr Einfluß auf das Aussehen und die Wirkung einer Seite zu verschaffen. Dies ist tatsächlich der Punkt, in dem Netscape dazu neigt, vom Geiste der HTML abzuweichen. Diese sehr spezifischen Markierungen erlauben es Ihnen, präzise darüber zu entscheiden, wie der Browser ein HTML-Element anzeigt. Größtenteils wirkt die Auffassung von HTML dem entgegen, daß es dem jeweiligen Browser selbst überlassen werden sollte, wie die Formatierung durchzuführen sei.
Aber mit 70% Anteil am Browser-Markt bietet Netscape den feinsinnigeren unter den Netzwerk-Entwicklern die ultimative Lösung für mehr Einfluß auf die stilvolle Gestaltung einer Seite.
Achtung! Sie sollten auf die Verwendung dieser Netscape-spezifischen Elemente und Markierungen verzichten, falls Sie die Absicht haben, HTML 3.0-kompatible Seiten zu entwerfen. Sie werden im Verlauf dieses Kapitels noch mehr über HTML 3.0 erfahren.Generell erzeugt <HR> bei Netscape und anderen Browsern eine horizontales Linie. Bei Netscape ist das Default für dieses Element eine schattierte, versenkt wirkende Linie. Aber dank der neuen Eigenschaften von Netscape können Sie dieses Aussehen mit den Markierungen (Tags) SIZE, WIDTH, ALIGN und NOSHADE verändern (s. Abbildung 24.1). Sehen Sie hierzu bitte auch bei »Grundlegende Formatmarkierungen« auf S. 661 nach.
Abbildung 24.1: Die <HR>-Netscape-Erweiterung in Aktion.
Befehlsformat für die Änderung der Größe eines <HR>-Tags:
<HR SIZE=number>
wobei number für die Stärke der horizontalen Linie steht.
Auf ähnliche Weise kann man die Breite des <HR>-Tags, abweichend vom Standardwert (wie breit auch immer die Seite sein soll) seinen Wünschen gemäß anpassen, indem man die Markierung mit
<HR WIDTH=number>
formatiert, wobei number die exakte Länge in Pixel für die Länge Linie angibt. Sie können aber auch mit %-Angaben arbeiten (z. B. 75%), um anzuzeigen, daß die Linie einen prozentualen Anteil des verfügbaren Fensters ausmachen soll.
Um das horizontale Lineal auf der Seite anzuordnen (eigentlich nur erforderlich, wenn die Breite mit WIDTH geändert wurde), wird das ALIGN-Tag wie folgt formatiert:
<HR ALIGN=direction>
Direction wird hier entweder mit left, right oder center angegeben. Somit wird die Linie entweder an den linken oder rechten Rand des verfügbaren Fensters verschoben, oder aber in der Mitte der Seite angeordnet.
Der NOSHADE-Tag schließlich bedarf keiner Variablen und wird einfach mit <HR NOSHADE> formatiert.
HTML-Elementen kann auch ein weiteres Set rein kosmetischer Markierungen hinzugefügt werden: <UL>(ungeordnete Liste) und <OL> (geordnete Liste) (s. Abbildung 24.2).
Um den ungeordneten Stil für Listen zu verändern, fügen Sie das TYPE-Tag
<UL TYPE=style>
hinzu. style steht hier für Scheibe, Kreis oder Quadrat (disc, cycle, square).
Ganz ähnlich verhält es sich mit dem Wechseln von geordneten Listen:
<OL TYPE=style>
Für style kann stehen: A für Großbuchstaben, a für Kleinbuchstaben, I für große römische Ziffern oder i für kleine römische Ziffern.
Das <LI>-Element kann die oben angeführten Tags auch dazu verwenden, es Ihnen zu ermöglichen, ungeordnete oder geordnete Schriften inmitten einer Liste umzuwechseln. Zum Beispiel ändert <LI TYPE=a> in einer <OL>-Liste die Ziffern des betreffenden Objekts und die Ziffern aller nachfolgenden Objekte in Kleinbuchstaben.
Das <LI>-Element erlaubt dem VALUE-Tag auch, es Ihnen zu ermöglichen, den Zähler in geordnete Listen zurückzusetzen, so daß
<LI VALUE=5>
als das erste Element in einer geordneten Liste die Liste veranlassen würde, von 5 (oder V oder E, abhängig vom TYPE-Tag dieser Liste) zu zählen anzufangen.
Siehe auch »Das Hinzufügen von Verknüpfungen, Grafiken und Tabellen«, S. 675
Meistens wird ein in ein HTML-Element falsch eingefügtes Tag wieder auf seinen Standardstil in Netscape zurückgestellt. Das Hinzufügen der Markierung TYPE=circle in eine geordnete Liste veranlaßt beispielsweise die Liste, auf Standardziffern umzustellen (z. B. 6,7,8), selbst wenn die geordnete Liste vorher ein STYLE-Tag für Buchstaben oder römische Ziffern zugewiesen bekam.Abbildung 24.2: Verschiedene Möglichkeiten für die Darstellung geordneter und ungeordneter Listen.
Sie werden sich wahrscheinlich fragen, worin der Unterschied zwischen Grundlinie und absoluter Unterseite oder höchstes Objekt und höchster Text liegt. Tatsächlich können hier kleine Unterschiede auftreten, und zwar abhängig davon, wie die jeweilige Zeile gerade mit HTML codiert ist, eine Tatsache, die die Perfektionisten unter den HTML-Programmierern gelegentlich stört.
Die Grundlinie ist der untere Rand einer Textzeile, wobei die tiefreichenden Buchstaben wie y,j,q und g nicht berücksichtigt werden. Bedenken Sie bitte, daß der Buchstabe c eine andere untere Grenze als der Buchstabe g hat, selbst auf dieser Seite. Die absolute Unterseite aber ist die untere Grenze des am tiefsten reichenden Buchstabens in einer Zeile, in der Regel handelt es sich dabei um y, j, q oder g.
Genauso könnte es sich bei dem höchsten Objekt in einer HTML-Zeile womöglich um eine Grafikdatei handeln, während der höchste vorkommende Text dagegen ein Großbuchstabe ist. Abbildung 24.3 versucht, diesen Unterschied zu verdeutlichen.
Neben dem ALIGN-Tag kann sich das <IMG>-Element noch fünf anderer Tags bedienen: WIDTH, HEIGHT, BORDER, VSPACE und HSPACE. WIDTH und HEIGHT werden für gewöhnlich zusammen angewendet.
<IMG WIDTH=number HEIGHT=number>
Hier stellt jede Zahl (number) die Dimension in Pixel dar. Dieser Tag ist für das schnellere Laden einer Seite von großer Bedeutung – Netscape bestimmt zwar während des Ladens einer Grafik Breite und Höhe, dafür dauert dies aber auch mindestens eine Sekunde länger.
Für das Verändern der Größe der Begrenzung fügen Sie das BORDER-Tag hinzu:
<IMG BORDER=number>
number ist die Größe der Begrenzung in Pixel. Zur Erinnerung: Border wechselt die Farben, wenn eine Abbildung als Hypertext-Verknüpfung verwendet wird. Wenn Sie BORDER=0 setzen, dann könnte dies Ihre Kunden irritieren; sie könnten annehmen, daß die Abbildung gar keine Verknüpfung sei.
Wenn Sie für Abbildungen das left bzw. right ALIGN-Tag verwenden, entsteht dadurch eine sog. fließende Abbildung (floating image), die nicht an eine bestimmte Zeile gebunden ist, sondern einfach nur den Platz füllt, der ihr vom Text übriggelassen wurde. Damit nun der Text hübsch übersichtlich bleibt und die Abbildung sauber umfließt, ist die Verwendung der VSPACE- und HSPACE-Tags angesagt.
<IMG VSPACE=number HSPACE=number>
Mit number für HSPACE ist der Abstand zur Abbildung in Pixel gemeint, der frei von Text bleiben soll. Ähnlich dazu ist number für VSPACE und legt den textfreien Abstand links und rechts der Abbildung fest.
Abbildung 24.3: Bei der Ausrichtung einer Abbildung mit texttop werden Nicht-Textelemente einer HTML-Zeile ignoriert.
Netscape hat auch einige völlig neue, rein auf Netscape ausgerichtete Elemente eingebaut, die aber genauso wie HTML-2.0-Elemente benützt werden können. Ansehen kann man sich diese Elemente allerdings nur mit dem Navigator-Browser von Netscape oder einem Netscape-kompatiblen Browser.
Plug-Ins von Netscape sind im Grunde speziell enwickelte Codemodule, die sich nahtlos in Ihren Browser integrieren lassen. Ein Plug-In von Netscape zum Abspielen von MPEG-Filmen würde z.B., wenn einmal installiert, Netscape ermöglichen, einen MPEG-Film inline abzuspielen. Es wäre nicht erforderlich, erst eine externe Hilfsanwendung zu starten. Dies ist eine besonders aufregende Tatsache, da Netscape dadurch sozusagen unbegrenzt erweiterbar ist, was wiederum bedeutet, daß der Umgang mit Multimedia im Netz letztlich zum Alltagsgeschäft gehören könnte. Umfassende Informationen über Plug-Ins finden Sie in Kapitel 9.
Bewegte Objekte für diese neuen Plug-Ins können Inline über das neue EMBED-Tag auf einer Web-Seite präsentiert werden. Hier nun ein typisches Beispiel:
<EMBED SRC="video.avi" WIDTH=100 HEIGHT=200 AUTOSTART=TRUE LOOP=TRUE>
In diese Zeile mit HTML-Code könnte ein Video-for for-Windows-Film mit der Bezeichnung »video.avi« auf einer Web-Seite eingebettet werden. Bei Abrufen der Seite startet unsichtbar und im Hintergrund der eingebaute und für das Abspielen von .avi-Dateien konfigurierte Plug-In. Die WIDTH- und HEIGHT-Attribute öffnen im Browser-Fenster ein Wiedergabefeld von 100 x 200 Pixel. Das AUTOSTAT=TRUE-Kommando beginnt das automatische Abspielen des Videos, während das LOOP=TRUE-Kommando veranlaßt, daß das Video, bis zur Eingabe eines gegensätzlichen Befehls, in einer Endlosschleife abgespielt wird. Diese Attribute des EMBED-Tags wurden für ein spezifisches, fiktionales Plug-In definiert. Jedes reelle Plug-In hat seine eigene Syntax für die Attribute, die allein vom Entwickler des Plug-In festgelegt werden.
Falls Sie mit Plug-Ins von Netscape auf Ihren Web-Seiten arbeiten möchten, werden Sie sich über die Attribute für EMBED-Tags der einzelnen Wiedergabemodule kundig machen müssen.<NOBR> ist ein neues Element, daß Ihnen ermöglicht, einen Text zu entwerfen, der nicht mit einer neuen Zeile beginnt, sobald er den Rand des Netscape-Fensters erreicht hat. Das Befehlsformat lautet
<NOBR>text</NOBR>
wobei text hier für einen beliebigen Text steht, in dessen Verlauf Sie keine Netscape-bedingte Trennung wünschen. Der Befehl ist besonders effektiv, wenn Sie eine Folge von Worten haben, und nicht wünschen, daß innerhalb eines Absatzes eine Trennung erfolgt (wie z. B. bei der Auflistung einer URL-Adresse).
Das neue <WBR>-Element wird für den seltenen Fall benötigt, daß Sie innerhalb eines <NOBR>-Abschnittes an einer bestimmten Stelle einen Zeilenumbruch einfügen wollen, es aber einer Trennung durch das Navigator-Fenster bedarf. Das Element ist Ihnen auch dann von Nutzen, wenn Sie Netscape wissen lassen möchten, wo in einem besonders langen Wort gegebenenfalls die Trennung erfolgen kann.
Das HTML-Element <PRE> und </PRE> kann auch dazu benutzt werden, ungetrennte Textzeilen (wie bei Verbindung von <NOBR> und <WBR>) zu erzeugen, und zwar mit dem nützlichen Nebeneffekt, daß alle Leerräume und Return-Anweisungen bestehen bleiben.Ein neues von Netscape entwickeltes Element verschafft Ihnen die Möglichkeit, die relative Schriftgröße für normalen Text zu bestimmen (s. Abbildung 24.4). Dies erreichen Sie mit dem <FONT SIZE>-Tag, z. B.
<FONT SIZE=number>
wobei für number ein Wert zwischen 1 und 7 (Standard = 3) eingesetzt wird. Es gibt da aber noch ein weiteres Element mit Namen <BASEFONT SIZE>. Warum nun zwei verschiedene Elemente? Nun, das <FONT SIZE>-Element kann tatsächlich zum <BASEFONT SIZE>-Element in Relation gesetzt werden, und zwar durch ein positives oder negatives Vorzeichen vor number, wie in dem folgenden Beispiel:
<BASEFONT SIZE=2>
<FONT SIZE=+2>
Die Schriftgröße für diesen speziellen Text wird 4, und zwar durch die Größe des Basefonts (2) zuzüglich der Vergrößerung durch das FONT-SIZE-Element um 2 Einheiten. Aber wozu soll das gut sein? Durch die Benutzung von relativen <FONT SIZE>-Werten innerhalb Ihrer HTML-Seite können Sie die Größe aller Fonts ändern, indem Sie einfach den Wert des <BASEFONT SIZE>-Elements ändern.
Abbildung 24.4: Sie können beliebig oft die Schriftgröße wechseln, benötigen aber bei jedem Wechsel ein <FONT SIZE>-Tag.
Netscapes derzeit letzter Beitrag für HTML 2.0 in diesem Abschnitt ist das <CENTER>-Element. Mit ihm können Sie in beliebigem Umfang Text auf einer Seite zentrieren. Es gilt folgendes Befehlsformat:
<CENTER>text</CENTER> .
Text kann hier sowohl für ein Wort oder mehrere Zeilen als auch mehrere Absätze stehen. In der Tat zentriert das CENTER-Tag aber auch alles, was Sie wollen; Listen, Abbildungen oder andere Inhalte eingeschlossen (s. Abbildung 24.5). Denken Sie aber daran, daß Netscape am Ende des </CENTER>-Tags eine Markierung für einen Zeilenumbruch setzt.
Die meisten ALIGN-Tags setzen sich über das <CENTER>-Element hinweg. Wenn Ihre Abbildungen also mit <IMG ALIGN> gesetzt wurden, werden sie nach wie vor an ihrem vorbestimmten Platz erscheinen, während der sie umfließende Text wie beabsichtigt auf der Seite zentriert ist.Abbildung 24.5: Falls die ganze Seite mit <CENTER> und </CENTER> ausgerichtet wurde, erzielt man interessante Ergebnisse.
Erneut wird hier daran erinnert, das sich Netscape-Tabellen von HTML-Tabellen unterscheiden. Zu ihren Gunsten spricht, daß sich Netscape bemüht hat, seit geraumer Zeit Tabellen zu implementieren, die dem HTML-Standard entsprechen. Allerdings hat sich der Standard einige Male geändert.
Was ist nun eine Tabelle. Beim Erstellen einer Tabelle ermöglicht HTML die Präsentation von Daten auf eine Weise, die an eine Karteiseite erinnert. Es gibt Beschriftungsfelder, Zeilen, Spalten und Zellen für Ihre Tabelle – spezielle Referenzdaten sowie Dossiers für Finanz- oder Wissenschaftsangelegenheiten –, die dem Leser Ihrer Seite einen einfachen Überblick ermöglichen.
Mit Netscape-HTML beginnen Sie mit dem Erstellen einer Tabelle, fügen dann eine Zeile ein und beschriften diese (z.B. mit Spaltennamen). Daraufhin erstellen Sie weitere Zeilen und geben bei jeder neuen Zeile die Daten für die Tabelle ein. Jede Dateneingabe erzeugt eine Zelle in der Tabelle (s. Abbildung 24.6).
Abbildung 24.6: Eine mit Netscape-spezifischen HTML-Elementen erstellte Tabelle.
Um mit Ihrer Tabelle zu starten, müssen Sie mit dem <TABLE>-Element beginnen – Sie umschließen alle anderen Tabellenmarkierungen, wie z.B.
<TABLE>
...alle anderen Tabellenelemente...
</TABLE>
Bei Netscape 1.1 implizierte das <TABLE>-Element vor und nach der Tabelle einen Zeilenumbruch. Dies hat sich jedoch bei Netscape 2.0 in Erwartung des HTML-3.0-Standards für Tabellen geändert.
Das <TABLE>-Element kann auch eine Reihe von Attributen, einschließlich BORDER, CELLSPACING, CELLPADDING und WIDTH, verwenden. Sie alle unterliegen folgendem Format:
<TABLE attribute_tag=number>
Hier entspricht das ATTRIBUT-Tag einem der vier oben aufgelisteten Attribute. number steht für den Umfang, in dem ein Attribut angewendet wird. Im Falle von WIDTH kann für number auch ein %-Wert stehen.
Was bewirken nun diese Attribute? BORDER wird benötigt, um die Größe der Umrahmung einer Tabelle sowie der Zellen untereinander festzulegen. CELLSPACING legt den freien Platz zwischen den einzelnen Zellen in der Tabelle fest. CELLPADDING bestimmt den Abstand zwischen der Zellenumrahmung und dem Zelleninhalt. Mit WIDTH wird die Breite der Tabelle bestimmt (Standardwert ist hier, was auch immer auf Ihre Seite paßt). Wenn Sie mit WIDTH eine Ziffer verwenden, dann ist hier die Breite der Tabelle in Pixel gemeint. Setzen Sie aber einen %-Wert ein, handelt es sich um den Prozentanteil der Gesamtbreite des Browser-Fensters, den die Tabelle einnehmen soll.
Dem Erstellen der Tabelle folgt der nächste Schritt: das Einfügen von Zeilen. Beginnend mit einer Kopfzeile (sofern erforderlich) werden weitere Zeilen mit folgendem Element eingefügt:
<TR> Datenzellen </TR>
wobei es sich bei Datenzellen um Netscape-HTML-Datenelemente handelt, wie sie bei <TD> oder TAG (mehr darüber etwas später) beschrieben werden. Das <TR>-Element kann entweder ein ALIGN- oder aber ein VALIGN-Attribut miteinbeziehen, welches dann die Standardwerte für alle Zellen in dieser Reihe festlegt. Die Anweisung
<TR ALIGN=Center> Datenzellen </TR>
bewirkt, daß Daten in den für diese Zeile eingerichteten Zellen zentriert ausgerichtet werden.
Und wie erstellt man diese Datenzellen? Mit der Kopfzelle und <TD>(= Standard-Datenzelle)-Elementen
<TD> Daten </TD>
Hier steht für Daten irgendein passender (valid body) HTML oder auch Text. Eine einfache Tabelle inklusive Kopfzeile und einigen Datenzeilen könnte z. B. etwa folgendermaßen aussehen:
<TABLE BORDER=2 CELLSPACING=4 CELLPADDING=3>
<TR> Job</TH>Di.</TH>Mi.</TH>Do.</TH> </TR>
<TR> <TD>Wäsche</TD><TD>Jan</TD><TD>Hans</TD><TD>Eva</TD> </TR>
<TR> <TD>Müll</TD><TD>Eva</TD><TD>Jan</TD><TD>Hans</TD> </TR>
<TR> <TD>Geschirr</TD><TD>Hans</TD><TD>Eva</TD><TD>Jan</TD> </TR>
<CAPTION ALIGN=bottom><H3>Mid-week chore list</H3></CAPTION>
</TABLE>
Es wird Ihnen gefallen, wenn Sie wissen, daß Datentabellenelemente ohne eine Schlußmarkierung auskommen (z. B. </TD> oder </TH>), besonders, wenn Sie Ihr HTML manuell eintippen. Der guten Form halber sollte man sie aber dennoch setzen.Achten Sie bitte auf das letzte Hauptelement am Ende einer Netscape-Tabelle – das CAPTION-Element. Mit ihm können Sie eine Identifizierungszeile für Ihre Tabelle erstellen und sie (falls erforderlich) mit einem ALIGN-Attribut an das obere oder untere Ende der Tabelle ausrichten (Standard ist oben). Netscape kann jeden gültigen HTML zwischen <CAPTION> und </CAPTION> akzeptieren und blendet diese Beschriftung zentriert und mit gewissem Abstand zur Tabelle ein (Abbildung 24.7).
Um eine Leerzelle zu erhalten, geben sie einfach <td> </td> statt einem Leerzeichen (Space) ein. So bleibt die Umrahmung der Zelle bestehen und läßt die Tabelle ordentlich und gleichmäßig erscheinen.Abbildung 24.7: Aber warum das Netz mit dem Familienputzplan belästigen. Es gibt viel bessere Anwendung für eine Netscape-Tabelle.
</BODY>
path steht für den Pfad zur Grafikdatei auf dem Server (entweder relativ oder absolut), dann folgt der Name der Grafikdatei mit entsprechender Erweiterung (es bedarf natürlich keiner Pfadangabe, wenn die Grafik im selben Verzeichnis wie die HTML-Seite untergebracht ist). Dadurch wird die Grafik hinter dem Text oder anderen Grafiken angeordnet, was zur Folge hat, daß die Hintergrundgrafik, abhängig von ihrer Größe, auf dem Bildschirm hin und her wandert, bis der Hintergrund aufgefüllt ist (s. Abbildung 24.8).
Etwas im Zusammenhang mit der Dateigröße eines Hintergrundbildes ist allerdings paradox – je kleiner das Bild ist, desto schneller wird die Seite geladen, aber je größer das Bild ist, desto schneller erscheint es auch. Wenn Sie also einen einfachen Grafikhintergrund für Ihren Platz im Netz benutzen, geben Sie sich ruhig ein bißchen großzügig – im Handumdrehen erscheint das Bild. Lieben Sie es aber eher vielfältig und farbenfroh, sollten Sie sich mit der Größe der Grafiken lieber ein wenig zurückhalten.Abbildung 24.8: Netzseite mit Hintergrundgrafik. Da die Grafik kleiner als die Seite ist, wird mit ihr gekachelt, bis der Bildschirm ausgefüllt ist.
Netscape-Anwender können eine Hintergrundfarbe für eine Seite definieren, und, abhängig von den Einstellungen des Browsers, es erfolgt die Wiedergabe oder auch nicht. Dies geschieht mit dem BGCOLOR-Attribut im BODY-Element
<BODY BGCOLOR=#rrggbb>
</BODY>
wobei #rrggbb das Nummernzeichen ist, und drei Hexadezimalzahlen für rot, grün und blau stehen, z.B.
<BODY BGCOLOR=#000000>
ergibt einen schwarzen Hintergrund. #FFFFFF wäre ein weißer Hintergrund, #FF0000 ein roter, #00FF00 ein grüner usw.
Schnellkurs in Hex gefällig? Hexadezimal bedeutet zur Basis 16 (im Gegensatz zur Basis 10 unseres normalen Dezimalsystems). Also ist jede Zahl ein Vielfaches von 16 und nicht 10. Da es keine einstelligen Zahlen über 9 in unserem Zehnersystem gibt, benutzt man im Hexadezimalsystem Buchstaben (A-F), um die fehlenden Stellen (10-15) darzustellen. Ein F an sechzehnter Stelle bedeutet dann also 15*16=240. Ein F stellt 15 dar, also ist die Hexadezimalzahl FF gleichbedeutend mit der Dezimalzahl 255 (240+15).Wenn Sie erst einmal den Hintergrund Ihres Dokuments verändert haben, möchten Sie wahrscheinlich auch ein wenig mit den Farben des Vordergrunds spielen – besonders die Farbe des Textes und der Verknüpfungen. Dafür benötigen Sie ein weiteres Attribut zum BODY-Element. Für gewöhnlichen Text ist dies das Attribut TEXT, wie in
<BODY TEXT=#rrggbb>
</BODY>
#rrggbb sind drei weitere hexadezimale Zahlen. Sie können auch die Farben von Verknüpfungen ändern. Es gibt hierfür drei verschiedene Verknüpfungsattribute: LINKLINK, VLINKVLINK und ALINKALINK. LINK ist die Verknüpfung vor der Selektion, VLINK ist eine bereits angewendete Verknüpfung, und ALINK ist eine im Moment aktive Verknüpfung. Es sind dies weitere Attribute zum BODY-Element
<BODY LINK=#rrggbb VLINK=#rrggbb ALINK=#rrggbb>
Wieder geben Sie das Nummernzeichen und drei Hexadezimalzahlen ein. Standardwerte sind hier blau für LINKLINK, lila für VLINKVLINK und rot für ALINKALINK.
Sie werden sich nun fragen, wie man eine aktive Verknüpfung erkennen kann? Es ist dies die Farbe, die sie unmittelbar nach dem Anwählen annimmt, während die nächste Seite geladen wird. Genauso verhält es sich bei einer Verknüpfung zu einem Sound, Film oder irgendeiner anderen Datei während des Empfangens einer Datei.
Unter den Web-Designern ist das Lager derer, die Seiten unter der Verwendung von Netscape-spezifischen Befehlen entwerfen, im wesentlichen in zwei Hälften gespalten. Die eine Hälfte entwirft sorglos Seiten mit Netscape- und HTML-3.0-Befehlen, Grafiken und Bildkarten, und schert sich nicht weiter darum, ob die Benutzer Netscape-Browser benützen oder nicht. Ihr einziges Interesse ist das Aussehen der Seite und nicht, was viel wichtiger wäre, der Inhalt. Die alte Methode:»friß oder stirb (resp. kauf Dir einen Netscape-Browser)«.
Es fällt schwer, jene Leute dafür zu verurteilen – nicht zuletzt, weil Netscape-Befehle dem Anwender eine geradezu artistische Gewalt über die Gestaltung einer Seite in die Hände spielt. Und so sind viele dieser Programmierer auch dazu bereit, eine Verknüpfung zu Netscape anzubieten. Der Benutzer kann sich den Browser somit für eigene Zwecke laden. Ein netter Zug, nicht wahr? Doch es geht auch anders.
Indem Sie eine Art »Eingangstür« (s. Abbildung 24.9) zu Ihrem Netzplatz vorschalten, können Sie dem Benutzer die Möglichkeit einer Auswahl anbieten und dieselben Seiten in zwei verschiedenen Formaten zur Verfügung stellen: Netscape-spezifisch und nicht Netscape-spezifisch. Manchmal, z. B. bei Tabellen, bedarf es eines gewissen Einfallsreichtums, um eine Nicht-Netscape-Seite zu entwerfen, die auch die Erwartungen erfüllt, welche man in sie setzt. In der Regel sind Netscape-Zusätze aber reine Kosmetik. Es ist wirklich einfach, Seiten zu entwerfen, welche sowohl die Benutzer von Netscape- als auch die anderer Browser zufriedenstellt.
Sie brauchen für diese Eingangstür lediglich zwei verschiedene Verknüpfungen anzubieten – die eine zu einer Indexseite Ihres Netzplatzes und die andere zu Ihrem Nur-Text- oder Nur-HTML-2.0-Verzeichnis. Daraufhin duplizieren Sie Ihre Seiten für beide Typen und entfernen alle Netscape-spezifischen Elemente oder Attribute aus dem einen der beiden Seiten-Pakete.
Falls Sie Ihren Netzplatz geschäftlich nutzen wollen, ist es unbedingt erforderlich, Ihren Benutzern die Auswahl unter mehreren Browsern zu ermöglichen. Ansonsten müssen Sie mit Verlusten an potentiellen Kunden von bis zu 40% rechnen!Abbildung 24.9: Eine Eingangstür ermöglicht den Benutzern, selbst darüber zu entscheiden, ob sie Seiten mit Netscape-spezifischen Befehlen betrachten wollen oder nicht.
Es wurde oft genug erwähnt, daß HTML 3.0 immer wichtiger wird. Dies führt uns aber zu einigen wichtigen Abstrichen, die an dieser Stelle gemacht werden müssen:
Falls Sie daran interessiert sind, die Weiterentwicklung von HTML 3.0 via Netz zu verfolgen, bietet sich folgende Adresse an: http://www.w3.org/hypertext/WWW/MarkUp/HTML3/CoverPage.html.
Bevor wir uns die neuen Elemente, die HTML uns bietet, betrachten, sehen wir uns erst ein paar Elemente an, die bereits in Netscape-HTML implementiert waren, und finden heraus, inwieweit sich beide Systeme unterscheiden.
Man kann hier schon von einer Faustregel sprechen. Grundsätzlich tendiert Netscape zu mehr Einfluß auf das Layout einer Seite. Außerdem möchte man noch mehr zusätzliche Element-Tags für Layoutzwecke entwickeln. HTML 3.0 hingegen beabsichtigt eher, noch mehr Attribut-Tags in bereits bestehende Layoutelemente einzufügen – z.B. das <CENTER>-Tag von Netscape.
Sie werden sich wahrscheinlich daran erinnern, daß das <CENTER>-Element von Netscape wie ein großes Fischernetz arbeitet – alles, was sich zwischen dem <CENTER>- und dem </CENTER>-Tag befindet, wird zentriert. Ausgenommen sind hier Abbildungen, die sich über diese Anweisung mit ihren eigenen <ALIGN>-Tags hinwegsetzen. Über dieses ja eigentlich sehr ästhetische <CENTER>-Tag verfügt HTML 3.0 allerdings nicht, man bevorzugt die Einbindung des <ALIGN>-Attributs in verschiedene bestehende Tags, wie z. B.
<P ALIGN=direction> Text </P>
wobei direction für left, right, center oder justify (Blocksatz) steht. Dieses <ALIGN>-Attribut kann auch in die Kopf(Header)-Tags (z. B. <H1>, <H2>, ...), das <TABLE>-Tag, das <TR>-Tag für Tabellen-Zeilen oder andere Tags eingebunden werden. Aber wird denn hier nicht etwas vergessen? Immerhin ermöglicht Ihnen das <CENTER>-Tag von Netscape, beliebige Inhalte beliebigen Umfangs zu zentrieren. Bequemer geht´s doch nicht mehr, oder?
Mit dem <DIV>-Element können Sie auch bei HTML große Brocken zentrieren. Wenn Sie das <ALIGN>-Tag hinzufügen, erhalten Sie so etwas wie
<DIV ALIGN=direction>
</DIV>
Wieder bedeutet direction left, right, center oder justify. Der <DIV>-Tag unterteilt dabei das Dokument. Sie teilen im wesentlichen Ihrem Browser mit, daß dieses Fragment einen bestimmten Teil des Ganzen darstellt und auf diese spezielle Weise behandelt werden muß. Und worin liegt der Vorteil gegenüber Netscape-HTML? Im Gegensatz zur HTML-3.0-Theorie, keine rein ästhetischen Tags zu verwenden, stehen Ihnen einfach mehr Möglichkeiten offen.
Über das Erstellen von Netscape-Tabellen haben Sie nun ja schon einiges erfahren. Der Unterschied zu HTML-3.0-Tabellen ist gar nicht einmal so groß, wie Sie vielleicht denken. Die meisten der Befehle sind identisch. Deutliche Unterschiede betreffen im wesentlichen nur sogenannte »kosmetische« Fragen, denn Netscape und HTML 3.0 verwenden jeweils andere Attribute für Dinge, wie die Ausrichtung von Text in einer Zelle.
Betrachten Sie bitte folgendes Beispiel für eine einfache HTML-Tabelle:
<TABLE BORDER=1 ALIGN=CENTER>
<TR>PayTuesdayWednesdayThursday</TR>
<TR><TD>Luis<TD>$24.00<TD>$40.00<TD>$30.00</TR>
<TR><TD>Marcia<TD>$15.00<TD>$30.00<TD>$50.00</TR>
<TR><TD>Rick<TD>$20.00<TD>$20.00<TD>$20.00</TR>
<TR><TD>Ellis<TD>$35.00<TD>12.00<TD>$40.00</TR>
<CAPTION ALIGN=BOTTOM>Pay per day for employees</CAPTION>
</TABLE>
Im vorangegangenen Abschnitt wurde ja bereits erwähnt, daß das <TABLE>-Element von HTML 3.0 das Attribut <ALIGN> verwenden kann (left, right oder center). Dies gilt auch für die Attribute BORDER, WIDTH, CELLPADDING und CELLSPACING, welche bereits im Abschnitt über Netscape-Tabellen erklärt wurden.
Die anderen Unterschiede sind eher feinerer Art – wenn Sie sich gründlicher mit der Materie beschäftigen, dann werden Sie über sie auch mehr erfahren wollen. Im allgemeinen bietet HTML 3.0 für die einfachsten Arbeiten mit Tabellen (wie Ausrichtung und äußeres Erscheinungsbild) eher weniger und leicht unterschiedliche Attribute an.
Natürlich gibt es da noch ein paar weitere Unterschiede. HTML 3.0 erkennt z. B. keine Attribute für Text- und Hintergrundfarben, wie dies bei Netscape sehr wohl der Fall ist (Sie erinnern sich doch bestimmt noch an diese Hex-Zahlen für Farben). Mit dem <BODY>-Element kann lediglich eine Hintergrund-Grafik geladen werden – Farben lassen sich damit nicht verändern. Sie werden also folgendermaßen vorgehen müssen:
<BODY BACKGROUND=path/filename.ext>
</BODY>
path ist der Pfad in dem Verzeichnis, in dem auch die Hintergrundgrafik abgespeichert ist, filename.ext hingegen ist der Name der betreffenden Grafikdatei, zusammen mit der entsprechenden Erweiterung.
HTML 3.0 erkennt auch nicht die zusätzlichen Attribut-Tags für ungeordnete oder geordnete Listen. Nicht besser ergeht es dem <HR>-Tag. Zwar werden hierfür Anpassungs-Attribute angeboten, doch werden diese zur Zeit von keinem Browser unterstützt.
Auf die Elemente <BLINK>, <NOBR> und <FONT SIZE> muß man bei HTML 3.0 ebenfalls verzichten. In Sachen Schriftgröße (Font=Schriftzeichen) bietet HTML für Text allerdings die Tags <SMALL>, <SUB>, <SUP> und <LARGE> an. Sie erlauben Ihnen wenigstens, einen Text in Standardgröße zu verkleinern, zu vergrößern, oder ihn tief- bzw. hochzustellen (s. Abbildung 24.10).
Wenn Sie einen Kopf (HEADER) für Ihr Dokument entwerfen, sollten Sie die Header-Tags <H1>, <H2> usw. benutzen. Die Tags <SMALL> und <LARGE> eignen sich eher für den reinen Textteil.Abbildung 24.10: HTML 3.0 bietet für das <FONT SIZE>-Element von Netscape die folgende Alternativen.
Diesbezüglich gibt es eine Reihe von Fragen des äußeren Erscheinungsbildes, für die HTML 3.0 eine Lösung bietet. Dazu gehört auch das neue <BANNER>-Element für mehr Einfluß auf den Kopfteil eines Dokuments. Es ermöglicht das Fixieren von Firmenlogos, Vor- und Zurückspulkontrolle sowie andere Elemente, die dafür sorgen, daß der Kopf ständig eingeblendet bleibt, während der Rest der Seite gescrollt wird.
Genaugenommen stellt es einen Ersatz für das <IMG>-Tag dar, welches Ihnen trotzdem weiterhin erhalten bleibt, allein schon aus Kompatibilitätsgründen. Drei entscheidende Gründe belegen, warum das <FIG>-Element so wichtig ist:
Heute übliche Bildkarten sind von einem Server abhängig – Sie entwerfen die Bildkarte mit einem speziellen Programm und wenn auf sie zugegriffen wird, wird ein map server-Programm aufgerufen, welches ermittelt, an welcher Stelle der Benutzer die Grafik angeklickt hat. Daraufhin wird dann entschieden, welche Verknüpfung aktiviert wird.
Für client-side-Bildkarten ist der Umweg über einen Server nicht mehr erforderlich. HTML beschreibt, welche Stelle der Grafik angeklickt wurde, woraufhin der Browser diesen Klick dann in den entspechenden URL übersetzt. Und auf diese URL erfolgt dann auch der Zugriff.
Dieses Element kann ziemlich kompliziert werden, und falls Sie Mathematiker sind, kann es für Sie der Himmel auf Erden sein. Das <MATH>-Element stellt bei der Darstellung komplexer mathematischer Formeln in Zeilen ein mustergültiges Werkzeug dar. Bisher war man bei der Darstellung von Formeln in HTML darauf angewiesen, diese als Grafik in den Text einzufügen –nachdem man sie zuvor mit einem Textverarbeitungssystem oder einem fortschrittlichen Mathematikprogramm entwarf.
Obwohl die Bandbreite an Darstellungsmöglichkeiten für Formeln und Gleichungen erstaunlich vielfältig ist, wird zur Veranschaulichung ein ganz einfaches Beispiel gewählt. Mit dem <MATH>-Tag wird nun das Integral von a bis b der Funktion f(x) über 1+x dargestellt:
<MATH>∫<SUB>a</SUB><SUP>b</SUP><BOX>f(x)<OVER>1+x</BOX>dx </MATH>
<MATH>∫_a_^b^{f(x)<OVER>1+x} dx </MATH>
Sieht reichlich kompliziert aus, nicht wahr? Wenn Sie aber via Netz über naturwissenschaftliche Themen kommunizieren möchten, ist <MATH> das Mittel der Wahl und verliert mit ein bißchen Übung schnell seine Schrecken. Haben Sie bemerkt, daß im ersten Beispiel für die diversen unterschiedlichen Attribute, die Sie der Variablen der Gleichung zuweisen wollen, die vollständigen HTML-Tags (<SUB> für tief- und <SUP> für hochstellen) verwendet werden? Im zweiten Beispiel hingegen werden statt der Hervorhebungsmarkierungen sogar nur HTML-Abkürzungszeichen verwendet (_für <SUB> und ^ für <SUP>, zum besseren Verständnis: Unterstrich und Hochzeichen).
Mit der zunehmenden Standardisierung werden auch immer mehr Informationen über Hervorhebung und Attribute für das <MATH>-Tag zur Gestaltung Ihrer Seite für Sie bereitstehen. Informationen über den neuesten Stand der Dinge erhalten Sie unter der folgenden Adresse:
http://www.w3.org/hypertext/WWW/MarkUp/HTML3/maths.html.
Diese Markierung wird besonders für die passionierten Web-Designer von besonderem Interesse sein. Mit dem <BANNER>-Tag in der <BODY>-Sektion Ihrer Seite wird der Dokumentenkopf (z. B. Ihr Firmen-Logo, Bedienungselemente für das Blättern im Text usw.) in der Weise fixiert, daß er trotz Auf- und Abblättern des Textes jederzeit auf dem oberen Teil des Bildschirms sichtbar bleibt.
Und so einfach, wie es sich liest, funktioniert es auch. Hier ein typisches Beispiel für ein solches <BANNER>:
<BODY>
<BANNER>
<P ALIGN=Center>
<IMG SRC=logo.gif ALT=T-Star Consulting>
</BANNER>
...HTML-Dokument...
</BODY>
Eine bestimmte Sektion wird ständig in den oberen Teil des Bildschirmes eingeblendet, während sich der dazugehörige Text auf die gewohnte Art und Weise scrollen läßt.Es ist neuerdings anscheinend Mode, seinen Web-Bereich mit Frames geradezu zu übersähen – sofern man in der glücklichen Lage ist, einen Browser sein eigen zu nennen, der dazu auch in der Lage ist – Netscape 3.0.
Rahmen erstellen unabhängige, miteinander austauschbare und (gelegentlich) rollbare Fenster, welche sich zu einer übersichtlichen und leicht bedienbaren Darstellung anordnen lassen.
Rahmen gleichen in vielem den bekannten HTML-Tabellen, und wenn Sie sich im Umgang mit Tabellen bereits auskennen, werden Sie das Gestalten mit Rahmen wie im Schlaf beherrschen.
Im Gegensatz zu Tabellen jonglieren Rahmen nicht nur mit Daten, besser noch, sie organisieren Ihr Browser-Fenster gleich mit. Das Fenster wird nämlich in individuelle und selbständige Segmente bzw. Rahmen unterteilt, wobei jedem eine eigene HTML-Datei zugewiesen ist. Dies bedeutet wiederum, daß auch der Inhalt jedes Rahmens unabhängig von den anderen beliebig gescrollt werden kann. Man könnte fast behaupten, daß jeder Rahmen mit einem eigenen »Mini-Browser« ausgestattet ist.
Nehmen Sie also Ihren ganzen Mut zusammen, geben Sie sich einen Ruck und betrachten Sie einmal einen vollständigen Block voll mit HTML-Markup-Code, mit dem ein mittelschweres, rahmenbeinhaltendes Dokument erstellt werden soll:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
Was dabei herauskommt, sehen Sie in Abbildung 24.11. Demnach wurde mit diesem HTML-Code eine Seite mit vier Rahmen programmiert. Der Rahmen ganz oben reicht über die gesamte Breite und enthält den Header (Kopf). Nun zu den zwei mittleren Rahmen. Der linke Rahmen ist für ein Label vorgesehen und vereinnahmt 25% des Bildschirms, der rechte füllt den verbliebenen Platz aus. Der vierte Rahmen reicht wieder über die gesamte Bildschirmbreite (diesmal am unteren Rand) und enthält eine Fußzeile.
Abbildung 24.11: Hier sehen Sie, wie Netscape das frame-Dokument als Ergebnis des vorangegangenen HTML-Codes wiedergibt.
Frames existieren für sich in einer Art Struktur, die auch FRAMESET genannt wird. FRAMESET nimmt den Platz genau des Teils ein (der BODY-Container), in dem Body auf einer mit Rahmen formatierten Web-Seite enthalten ist, zumal eine Web-Seite, die mit FRAMES erstellt wurde, keine BODY-Sektion in ihrer HTML enthalten darf, und in einer Seite, die eine Body-Sektion enthält, keinesfalls Rahmen benutzt werden können.
»I Ain't Got No BODY«
Der <FRAMESET></FRAMESET>-Container umgibt förmlich jeden Block mit Rahmendefinitionen. Innerhalb des FRAMESET-Containers können deshalb auch nur FRAME-Tags oder eingebundene FRAMESET-Container vorkommen.
Das FRAMESET-Tag ist mit zwei Attributen ausgestattet: ROWS und COLS (Reihen und Spalten). Sie sehen nun einen vollständigen (allerdings leeren) FRAMESET-Container:
<FRAMESET ROWS="value_list" COLS="value_list">
</FRAMESET>
Sie können, wenn Sie möchten, jeden beliebigen Wert für ROWS oder COLS oder auch für beide wählen, eines der beiden Attribute muß aber auf jeden Fall irgendwie halbwegs vernünftig definiert sein.
FRAMES treten nur in Gruppen auf. Wenn Sie nur eine Reihe oder nur eine Spalte definieren, dann ignoriert Ihr Browser-Programm Ihre FRAMES gänzlich und Ihr Bildschirm wird völlig leer bleiben. Sie können demnach kein FRAMESET mit nur einer Reihe oder nur einer Spalte erstellen – zumal das Ergebnis dabei ohnehin nur ein einzelnes Fenster wäre. Wenn Sie aber mindestens zwei Reihen oder Spalten definieren, können Sie mit gutem Gewissen das andere Attribut übergehen. Es wird dann ein Wert von 100% dafür angenommen.Die »Werte-Liste« in unserer FRAMESET-Zeile ist eine Liste von Werten (Komma separiert) mit Pixel, Prozentwerten oder Relativwerten einer Skala (relative scale values). Die Anzahl von Reihen und Spalten wird von der Anzahl der Werte in der jeweiligen Werteliste bestimmt.
<FRAMESET ROWS="100,240,140">
definiert z.B. ein Rahmen-Set mit drei Reihen (Werte in Pixel, absolut). Die erste Reihe ist 100 Pixel hoch, die zweite 240, und die dritte 140.
Es entspricht aber nicht gerade der Hohen Schule, wenn man Reihen und Spalten mit absoluten Pixelwerten setzt. Diese Methode ist unseriös, da die Browser auf so vielen unterschiedlichen Systemen und bei allen möglichen Bildschirmformaten eingesetzt werden. Obwohl es Ihnen lieber wäre, mit absoluten Pixelwerten zu arbeiten – wie z. B. das Einblenden von kleinen Bildern mit bekannten Abmessungen –, wäre es doch eher ratsam, Ihre Reihen und Spalten mit Prozent- oder Relativwerten zu definieren:
<FRAMESET ROWS="25%,50%,25%">
In diesem Beispiel werden drei Rahmen als Reihen angeordnet. Die oberste Reihe nimmt 25% der zur Verfügung stehenden Bildschirmhöhe ein, die zweite 50% und die dritte belegt die restlichen 25%. Wenn die Summe der von Ihnen gesetzten %-Werte nicht 100 ergibt, werden sie proportional erhöht bzw. vermindert, bis schließlich 100% erreicht sind.
Proportionale Werte sehen z. B. so aus:
<FRAMESET COLS="*, 2*, 3*">
Das Sternchen (*) wird eingesetzt, um die proportionale »Auf-Teilung« einer zur Verfügung stehenden Fläche zu definieren, die man sich, zum besseren Verständnis, als rechteckige Torte vorstellen kann. Jedes Sternchen repräsentiert dann ein Stück dieser Torte. Den Nenner dieses Bruches erhalten Sie, indem Sie alle Sternchen-Werte zusammenzählen (wenn keine Zahl angegeben ist, wird »1« angenommen). Im Beispiel würde die erste Spalte 1/6 der ganzen Bildschirmbreite zugeteilt bekommen, die zweite Spalte 2/6 (resp. 1/3), und die dritte Spalte 3/6 (resp. 1/2).
Berücksichtigen Sie bitte, daß rein numerische Werte einer Reihe oder einer Spalte einen absoluten Wert in Pixel zuordnen, während Prozentwerte (%) relative Werte zuordnen. So werden Spalten (COLS) prozentual zur Fensterbreite dimensioniert, Reihen (ROWS) hingegen zur Fensterhöhe. Werte mit Sternchen (*) erhalten einen proportionalen Anteil der noch zur Verfügung stehenden Fläche.
Es folgt ein Beispiel, in dem alle Möglichkeiten integriert sind:
<FRAMESET COLS="100, 25%, *, 2*">
Der ersten Spalte wird eine absolute Breite von 100 Pixel zugewiesen. Die zweite Spalte bekommt 25% der Gesamtbreite des Wiedergabefensters. Die dritte Spalte erhält 1/3 der verbleibenden Fläche, der vierten und letzten Spalte schließlich werden die restlichen 2/3 zugewiesen. Absolute Pixel-Werte werden bei der Verteilung immer bevorzugt behandelt, und zwar in der Reihenfolge von links nach rechts. Nächsthöhere Priorität haben die Zuweisungen von %-Anteilen an der Gesamtfläche. Zuletzt teilen sich Proportional-Zuweisungen anteilig die verbliebene Restfläche.
»Seien Sie nicht so absolut«
Wenn Sie ein FRAMESET mit COLS- und ROWS-Attributen gleichzeitig anwenden, wird ein Rahmenraster erstellt, z. B.:
<FRAMESET ROWS="*, 2*, *" COLS="2*, *">
Diese HTML-Zeile erstellt ein Rahmenraster mit drei Reihen und zwei Spalten. Die Höhe der ersten und der letzten Reihe beträgt hier jeweils 1/4 der Bildschirm-Höhe, die der mittleren Reihe 1/2. Die Breite der ersten Spalte beträgt 2/3 der Bildschirmbreite, die zweite Spalte nimmt 1/3 ein.
<FRAMESET></FRAMESET>-Sektionen können, wie bereits im einführenden Beispiel gezeigt, ineinander eingebettet werden. Vergewissern Sie sich aber bitte zuerst, wie das FRAME-Tag gesetzt wurde!
Das FRAME-Tag definiert einen einzelnen Rahmen, und muß dafür unbedingt innerhalb eines Rahmen-Containers gesetzt sein, z. B. so:
<FRAMESET ROWS="*, 2*">
<FRAME>
<FRAME>
</FRAMESET>
Das FRAME-Tag selbst ist kein Container, also gibt es auch keine dazugehörige Endmarkierung. Für eine vollständige FRAME-Definition ist eine einzelne HTML-Zeile vollkommen ausreichend.
Die Anzahl Ihrer FRAME-Tags sollte der Anzahl an Stellen entsprechen, die die FRAMESET-Definition vorsieht. Im letzten Beispiel wurden zwei Reihen eingerichtet, also sollten auch zwei FRAME-Tags gesetzt werden. Allerdings ist dieses Beispiel reichlich langweilig, denn keiner der Rahmen kann uns durch einen interessanten Inhalt begeistern (FRAMES wie diese werden als Leerfläche ausgegeben)!
Das FRAME-Tag ist mit sechs möglichen Attributen ausgestattet: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING und NORESIZE. Hier nun ein vollständiger generischer FRAME:
<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>
Glücklicherweise werden Rahmen nur sehr selten mit allen Attributen gleichzeitig definiert.
Das wichtigste aller FRAME-Attribute ist SRC (source). Sie können, was wahrscheinlich auch oft der Fall sein wird, allein mit SRC einen Rahmen vollständig definieren:
<FRAME SRC="url">
SRC definiert die URL Ihres Rahmeninhalts. Für gewöhnlich handelt es sich dabei um eine HTML-Datei auf demselben System. In der Regel wird so etwas folgendermaßen aussehen:
<FRAME SRC="sample.htm">
Bedenken Sie dabei aber bitte, daß jede von einem Rahmen aufgerufene HTML-Datei ein vollständiges HTML-Dokument sein muß, und nicht nur ein Fragment. Das bedeutet, daß neben HTML-Containern auch Container für HEAD und BODY usw. definiert sein müssen.
Selbstverständlich kann die Quelle (source) eine beliebige gültige URL sein. Wenn Sie in Ihrem Rahmen z. B. ein GIF-Bild unterbringen wollen, das aus Timbuktu stammt, könnte FRAME folgendermaßen aussehen:
<FRAME SRC="http://www.timbuktu.com/budda.gif ">
Wenn der Browser eine von Ihnen gewünschte URL nicht finden kann, wird statt des Rahmens ein Leerfeld, begleitet von einer lästigen Fehlermeldung, angezeigt. Ganz anders verhält es sich, wenn Sie einfach FRAME ganz ohne SRC angeben. <FRAME> wird immer ausgeführt, und wenn es auch nur als leere Fläche angezeigt werden sollte; die Definition <FRAME SRC="unknown URL"> dagegen wird überhaupt nicht erstellt – eine bestimmte Fläche wird zugeteilt, aber nicht gefüllt. Im ersten Fall wird der Rahmen mit der Hintergrundfarbe aufgefüllt werden, während im zweiten Fall die Farbe der Umgrenzung des Browsers bestehen bleibt.
Kein Inhalt gestattet.
Das Attribut NAME weist einem Rahmen einen Namen zu. Mit diesem Namen kann eine Verknüpfung zu diesem Rahmen ermöglicht werden, für gewöhnlich von anderen Rahmen auf demselben Display aus. Das Beispiel
<FRAME NAME="Joe">
erstellt den Rahmen »Joe«, auf den über ein Hyperlink wie dieses zugegriffen werden kann:
<A HREF="http://www.yoursite.net " TARGET="Joe">Click Here to Jump to Joe</A>
Beachten Sie bitte das TARGET-Attribut, das auf den Namen Ihres Rahmens hinweist.
Wenn Sie Ihrem Rahmen keinen Namen geben, hat dies primär auch weiter keine Auswirkungen. Allerdings besitzen Sie dann auch nicht die Möglichkeit, ggf. Verknüpfungen (wie z.B. von einem Rahmen aus ein Dokument in einem anderen Rahmen zu öffnen) zu nutzen. Die Namen für Rahmen müssen dabei immer mit einem alphanumerischen Zeichen beginnen!
Mit MARGINWIDTH und MARGINHEIGHT können Sie die Breite eines Rahmens begrenzen. Das Format gilt für beide Attribute:
MARGINWIDTH="value"
Für value steht immer eine Zahl, und zwar die absolute Anzahl in Pixel, z.B.:
<FRAME MARGINHEIGHT="5" MARGINWIDTH="7">
Hier würde ein Rahmen entstehen, dessen Ränder oben wie unten jeweils fünf Pixel breit wären, links und rechts jeweils 7 Pixel. Beachten Sie bitte, daß wir hier von Rändern sprechen, und nicht von Begrenzungen. MARGINWIDTH und MARGINHEIGHT definieren einen freien Platz innerhalb des Rahmens, der von seinem Inhalt nicht belegt werden soll. Die Breite der Begrenzungen hingegen wird automatisch vom Browser festgelegt, und nicht durch Ihre HTML-Programmierung.
Ihr Rahmen wird automatisch mit Rollbalken ausgestattet, falls sein Inhalt nicht vollständig hineinpaßt. Manchmal leidet aber die Ästhetik Ihrer Seite darunter. Daher werden Sie diesbezüglich eine Steuereinrichtung wünschen. Das Attribut SCROLLING bietet Ihnen das geeignete Werkzeug dafür:
<FRAME SCROLLING="yes|no|auto">
Es gibt für SCROLLING drei gültige Werte: YES, NO und AUTO. Letzteres wird angenommen, wenn Ihre FRAME-Definition kein SCROLLING-Attribut aufweist. YES führt dazu, daß der Rahmen mit Rollbalken ausgestattet wird, NO unterdrückt dies um jeden Preis. Folgende Definition z. B. setzt Rollbalken:
<FRAME SCROLLING=YES>
Die Größe von Rahmen kann i.d.R. vom Benutzer verändert werden. Wenn er den Mauszeiger über eine Rahmengrenze hinwegbewegt, verwandelt dieser sich in ein »Ziehen-Gadget«, mit dem er die Begrenzung nahezu beliebig bewegen kann. Damit »zerstört« er allerdings auch das Design der von Ihnen so sorgfältig und liebevoll entworfenen Seite. Um dies zu vermeiden, werden Sie das NORESIZE-Attribut einsetzt – dem Benutzer wird damit das Verändern der Rahmen-Abmessungen verwehrt:
<FRAME NORESIZE>
So einfach funktioniert das. Und alles ohne Wertzuweisungen. Und wenn Sie NORESIZE für einen Rahmen gesetzt haben, kann auch kein anderer angrenzender Rahmen mehr gezogen werden. Abhängig vom Layout genügt es für gewöhnlich, NORESIZE für einen einzelnen Rahmen anzuwenden, um einen Benutzer davon abzuhalten, alle Rahmen auf dem Bildschirm zu verändern.
»Das ist ja alles schön und gut«, werden Sie sagen, »und ich möchte diese ganzen tollen neuen Sachen für meine Web-Seiten unbedingt ausprobieren. Aber was machen all die bedauernswerten Benutzer, die keinen rahmentauglichen Browser ihr eigen nennen? Die können doch gar nicht meine tollen Seiten bewundern!«
Keine Sorge. Auch dafür gibt es einen Ausweg.
Und zwar mit dem <NOFRAMES></NOFRAMES>-Container. Indem Sie einen NOFRAMES-Abschnitt definieren, und diesen mit ganz normalen HTML-Tags markieren, können Sie nämlich eine alternative Web-Seite für Benutzer ohne formulartaugliche Browser anbieten. Und das funktioniert so:
<NOFRAMES>
Hier kommt der gesamte HTML-Text hin.
</NOFRAMES>
Man kann so gut wie von einer Alternative zur BODY-Struktur einer gewöhnlichen Web-Seite sprechen. Was auch immer Sie auf der Seite zwischen <NOFRAMES>- und </NOFRAMES>-Tags plazieren, wird von Browsern ohne FRAMES-Funktion wiedergegeben. Browser mit dieser Funktion dagegen werden alles, was zwischen diesen beiden Tags steht, einfach entfernen.
Rahmen sind sehr flexibel, was bedeutet, daß es durch sie auch schnell kompliziert werden kann. In diesem Kapitel werden ein paar Beispiele mit realistischen Rahmendefinitionen beschrieben.
Das einfachste Beispiel ist eines mit zwei Rahmen, wie z.B.:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*, 2*">
<FRAME SRC="label2.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
Dieses Programm definiert eine Seite mit zwei Rahmen, und zwar in Form von zwei Reihen. Die Höhe der ersten Reihe beträgt 1/3 des Bildschirms und enthält das HTML-Dokument »label12.htm«. Die zweite Reihe füllt den restlichen Bildschirm aus und enthält das Dokument »info.htm«. In Abbildung 24.12 können Sie sehen, auf welche Weise diese Seite von Netscape präsentiert wird.
Abbildung 24.12: Wiedergabe des oben angeführten Beispiels durch Netscape.
Genauso einfach könnte man zehn oder noch mehr Reihen erstellen, bzw. mit derselben Syntax (ROWS durch COLS ersetzen) zwei, zehn oder fünfzehn Spalten definieren. Zu viele Rahmen auf einer Seite überfordern aber jeden Browser. Übersicht und Funktionalität einer Seite werden ebenfalls kaum noch gewährleistet sein. Darum sollten Sie sich auf drei bis vier Reihen oder Spalten beschränken.
Weniger ist oft mehr!Wenn Sie trotzdem mehr Information, als in drei Reihen oder Spalten passen, auf Ihrer Seite unterbringen wollen, sind Sie gut beraten, wenn Sie statt Rahmen eher Tabellen benutzen. Erinnern Sie sich? Rahmen sind außerordentlich nützlich, wenn Sie beim Erstellen einer Wiedergabeebene ein Bedienungselement einfügen wollen. Wenn Sie aber lediglich jede Menge Daten bzw. Informationen in geordnete Form bringen wollen, sind Tabellen nach wie vor das beste Werkzeug dafür.
Das Implementieren eines gleichmäßigen, rechteckigen Gitters aus Reihen und Spalten ist kinderleicht:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*, 2*" COLS="20%, 30%, 40%">
<FRAME SRC="labela.htm">
<FRAME SRC="labelb.htm">
<FRAME SRC="labelc.htm">
<FRAME SRC="info.htm">
<FRAME SRC="info.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
Dieses Beispiel erstellt ein Gitter aus zwei Reihen und drei Spalten (Abbildung 24.13). Da wir eine Gruppe, bestehend aus sechs Rahmen, definiert haben, gibt es auch sechs FRAME-Definitionen. Man beachte: Es wird reihenweise aufgefüllt! Die erste FRAME-Markierung gilt für die erste Spalte in der ersten Reihe, die zweite für die zweite Spalte der ersten Reihe und die dritte FRAME-Markierung für die dritte (und letzte) Spalte in der ersten Reihe. Danach wird auf gleiche Weise die zweite Reihe gefüllt.
Beachten Sie weiter, daß sich rechnerische Probleme ergeben, da prozentuale Werte in der COLS-Definition nur bis 90% aufaddiert werden. Da der Browser aber bereits alle Spalten proportioniert angeordnet hat, um die Differenz auszugleichen, ist dies weiter kein Problem.
Abbildung 24.13: Dieses 2x3-Gitter aus Rahmen ist das Ergebnis des vorangegangenen HTML-Programms.
Schon wesentlich schwieriger wird es, wenn ein komplexeres Gitter erstellt werden soll. Dazu kehren wir nun zum ersten Beispiel dieses Kapitels zurück:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
Hier macht man sich die eingebauten FRAMESET-Container zunutze. Die äußere Gruppe erstellt drei ROWS mit 25, 50 und 25% der Höhe des Fensters:
<FRAMESET ROWS="25%,50%,25%">
Mit dieser Definition werden die erste und die letzte Reihe als einfache Rahmen programmiert.
<FRAME SRC="header.htm">
<FRAME SRC="footer.htm">
Jede dieser Reihen reicht über die gesamte Bildschirmbreite. Die Höhe der ersten Reihe (ganz oben) beträgt 25% der Bildschirmhöhe, ebenso die unterste, dritte Reihe.
Zwischen diesen beiden Reihen wird nun der FRAMESET-Container eingebettet:
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
Dieses FRAMESET definiert zwei Spalten, die nebeneinander in der verbliebenen mittleren Reihe eingebaut werden. Die Höhe dieser Reihe macht, gemäß der Definition der mittleren Reihe für den FRAMESET-Container, 50% der Bildschirmhöhe aus. Die linke Spalte belegt 25%, die rechte Spalte die restlichen 75% der Bildschirmbreite.
Die FRAMES für die Spalten werden durch eine Gruppe von FRAMESET-Tags, welche auch die Definition für die Spalten enthält, definiert. Die Definitionen für die erste und dritte Reihe sind dagegen außerhalb des eingebetteten FRAMESET-Containers, aber nach wie vor innerhalb des alles umgebenden äußeren FRAMESET, ordnungsgemäß abgelegt.
Das alles wird schnell verständlich, wenn Sie sich einen ganzen eingebetteten FRAMESET-Block als einzelnes FRAME-Tag vorstellen. Im oben angeführten Beispiel erstellt das äußere FRAMESET drei Reihen, die, jede für sich, einen bestimmten Inhalt zugewiesen bekommen. Hier besteht der Inhalt aus einem Rahmen, dann einem eingebetteten FRAMESET, dann wieder einem Rahmen.
Und jetzt werden Sie sich (sofern Sie zur Gattung der eher perversen Programmierer gehören) fragen: »Ich frage mich, ob es nicht auch möglich wäre, einen FRAME dazu zu bringen, als sein eigenes SRC ein Dokument zu verwenden, das selbst ein FRAMESET ist?« Wie bestimmt nicht anders erwartet, lautet die Antwort selbstverständlich »Ja«. In diesem Fall verweisen Sie über das FRAME-Tag ganz einfach auf ein HTML-Dokument, das Sie sonst anstelle des FRAME benutzt hätten.
In bezug auf FRAME-Dokumente greifen wir lieber auf das vorangegangene Beispiel (mit eingebetteten FRAMESETS) zurück. Man benötigt dafür aber zwei HTML-Dokumente statt nur einem, da das eingebettete FRAMESET ja wieder in sein eigenes Dokument zurückverschoben wird. Sehen Sie sich nun die erste (äußere) Datei an:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAME SRC="frameset.htm">
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>
Und jetzt die zweite Datei, hier mit »frameset.htm« bezeichnet.
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>
In diesem Fall verändern sich die oberste und die unterste Reihe nicht. Die mittlere (zweite) Reihe ist jetzt aber ein ganz gewöhnlicher FRAME. Allerdings mit dem Unterschied, daß sein SRC einen Verweis auf »frameset.htm« enthält, das Sie soeben mit einem FRAMESET in sich erstellt haben. Wenn es nun in das Original-FRAMESET eingesetzt wird, verhält es sich geradeso, als wäre es dort auch Zu Hause. Der Bildschirm, der daraufhin erscheint, ist identisch mit dem des Original-Beispiels (s. Abbildung 24.14).
Abbildung 24.14: FRAMESET-Container können eingebettet werden, oder selbst andere Dokumente, die ihre eigenen FRAMESETS enthalten, aufrufen. Am Ende erzielt man das gleiche Ergebnis.
»Unendliche Rekursion«
Wenn Sie eingebettete FRAMESET-Container geschickt einsetzen, können Sie damit jedes nur erdenkliche Rahmen-Gitter erstellen. Denken Sie aber daran, daß Sie ein benutzerfreundliches und nützliches Interface schaffen wollen, und niemandem beweisen müssen, wie toll Sie mit Rahmen umgehen können.
Wie findet man sich in einem Web-Bereich mit Rahmen zurecht?Dazu müssen Sie eigentlich nur drei Dinge wissen:
1. Der Zurück-Schalter (back) bringt Sie nicht aus einem Rahmen, sondern aus dem gesamten FRAMESET heraus, zurück auf die vorangegangene Seite. Um aus einem Rahmen heraus zurückzublättern, müssen Sie erst mit der Maus auf den Rahmen, den Sie verlassen wollen. Jetzt drücken Sie die rechte Maustaste (MAC-PCs haben nur eine Taste, das macht aber keinen Unterschied). Mit dem Pop-Up-Menü, daß daraufhin erscheint, können Sie dann bequem Ihre weiteren Schritte auswählen.
Wenn Sie sich schon Gedanken darüber gemacht haben, welche Netscape-Markierungen Sie (unabhängig davon, ob Sie mit oder ohne Eingangsseite arbeiten) verwenden möchten, und sich dabei vorstellen, wie sehr HTML 3.0 schon in naher Zukunft die Gestaltung im Netz beeinflussen könnte, dann haben Sie damit schon viel erreicht.
Wenn Sie nun »Appetit auf mehr« bekommen haben, sehen Sie doch einfach mal unter folgenden Adressen nach:
http://home.netscape.com/assist/net_sites/index.html hält Sie über den neuesten Stand in Sachen Veränderungen und Neuerungen bei neuen Versionen von Netscape and Netscape-spezifischen HTML-Elementen auf dem laufenden.
http://www.w3.org/hypertext/WWW/MarkUp/HTML3/CoverPage.html informiert Sie über die Weiterentwicklung von HTML 3.0 hin zum anerkannten Standard-Werkzeug für Web-Teilnehmer.
http://webreference.com/HTML 3andns/, wenn Sie einen großartigen Ratschlag von Andrew King bekommen möchten, damit Netscape-HTML und HTML 3.0 auf Ihren Seiten harmonisch miteinander kooperieren.
Als nächstes werden wir die Diskussion über die fortschrittliche Gestaltung von Web-Plätzen beenden, um den Blick auf Programmiertechniken zu richten, die wirklich »ans Eingemachte« gehen. Eine Zusammenfassung der besten Elemente und Designtechniken sollte es dann auch Ihnen ermöglichen, Web-Seiten von Weltklasseformat zu entwickeln. Außerdem werden Sie einiges über eine immer mehr an Einfluß gewinnende Web-Technologie erfahren – die neue Programmiersprache JAVA.
(c) 1997 Que
