21

Entwickeln einer Homepage mit HTML

Überblick

Dieses Kapitel enthält eine Einführung in HTML (HyperText Markup Language). Sie lernen, wie Sie mit HTML eine eigene Homepage schreiben HTML-Einfuehrungund wie Sie Ihre Page mit Formularen und anderen Merkmalen erweitern können. Jeder, der eine Textverarbeitung bedienen kann, beherrscht die Grundtechniken zur Entwicklung einer innovativen ansprechenden Homepage.

HTML ist wie alle Web-Techniken einem ständigen Wandel unterworfen. Standardisiert wird die Sprache vom Word Wide Web Konsortium (W3C) am MIT Laboratory for Computer Science. Diese Arbeitsgruppe standardisiert die Syntax für die Elemente, die in HTML geschrieben werden können. Bei diesen Standardisierungsbemühungen wird auch Rückwärtskompatibilität mit älteren HTML-Versionen berücksichtigt.

Die derzeitigen Standards sind HTML 2.0 und HTML 3.2. Beide erweitern die Fähigkeiten der ursprünglichen Version. HTML 2.0 bildet den eigentlichen Kern von HTML. Diese Version wird von den meisten Web-Browsern unterstützt. Die Beschreibungen in diesem Kapitel stützen sich deshalb auf die HTML-Version 2.0. Darüber hinaus werden Erweiterungen der Version 2.0 für den Internet Explorer und Netscape Navigator erwähnt.

Dieses Kapitel konzentriert sich auf die Techniken zum Schreiben von Web-Pages. Um die aufgeführten HTML-Codes benutzen zu können, müssen Sie die Codes in eine Textdatei einfügen, die über den HTTP-Server Ihres Web-Providers zugänglich ist.

In diesem Buch werden nur die Grundelemente der Entwicklung von HTML-Pages behandelt. Für Interessierte empfiehlt sich weiterführende Literatur, z. B. HTML 3.2 – Das Kompendium (ISBN 3-8272-5205-9), Hybrid HTML Design (ISBN 3-8272-5179-6), Special Edition – HTML im Intranet (ISBN 3-8272-1004-6) und Web-Publishing für Insider (ISBN 3-87791-887-5).

HTML-Grundlagen

Dieser Abschnitt führt in die Konzepte ein, die wichtig sind, um WWW-Pages zu entwickeln. Sie finden in diesem Abschnitt eine Übersicht der HTML-Funktionalität und eine Beschreibung der HTML-Formatierregeln.

Wie funktioniert HTML?

HTML ist ein System, mit dem Sie einfache Markup-Elemente in übliche ASCII-Textdokumente einbetten können. Mit anderen Worten, ein in einer beliebigen Textverarbeitung als ASCII-Datei abgespeichertes Dokument kann mit HTML-Elementen in eine Web-Page verwandelt werden. Der Autor kann u. a. folgende Aufgaben realisieren:

• Bestimmen der relativen Textgröße und des Textflusses im Dokument
• Einbinden von Inline-Bildern in Text
• Erstellen von Links zu anderen Online-Dokumenten
• Integrieren von Audioclips und externen Grafiken in Pages
• Erstellen interaktiver Formulare

HTML unterstützt viele weitere Merkmale, z.B. Tabellen, Rahmen und Animation. Interessant daran ist, daß diese Merkmale auf jedem Computer überall in der Welt genutzt werden können. Jemand mit einem Mac oder einem Amiga kann Web-Pages herunterladen, die auf einem PC erstellt und auf einem Unix-Server gespeichert wurden.

HTML-Elemente

Ein HTML-Befehl wird Element oder Tag genannt. HTML-Elemente ermöglichen Ihnen, die Art, wie ein normales Textdokument in einem WWW-Browser dargestellt wird, zu beeinflussen. HTML-Elemente werden in das ASCII-Dokument eingefügt und fungieren als Anweisungen für die Browser in bezug auf die Formatierung und die Einbeziehung von externen Elementen, z. B. Grafiken und Audioclips.

Ein HTML-Element erscheint immer zwischen einer öffnenden und schließenden spitzen Klammer, z. B.:

<PRE> Bezeichnet vorformatierten Text zur Beibehaltung des Layouts
<A> ... </A> Definiert Hypertext-Links
<B> ... </B> Hebt den Text in Fett hervor
<IMG SRC="picture.gif"> Fügt eine Grafik ein

Alle Tags in diesem Beispiel haben dahingehend ein gemeinsames Format, daß sie immer mit der öffnenden spitzen Klammer (<) beginnen und mit dem schließenden Gegenstück (>) enden. Was zwischen diesen zwei Zeichen steht, ist ein Befehl für HTML-Browser.

Tags, die der Browser nicht als gültigen Befehl erkennt, werden übersprungen. Dadurch wird sichergestellt, daß HTML-Dokumente auch von den einfachsten Browsern interpretiert werden können. Was nicht abgearbeitet werden kann, wird einfach ignoriert. Tags, die der Browser versteht, werden entsprechend angezeigt, ungeachtet der Plattform.

Tags werden in zwei grundlegende Typen unterschieden: leere und nichtleere Elemente. Um diese zwei Mechanismen zu erklären, müssen wir wissen, wie ein HTML-Element benutzt wird, um Text anzuzeigen.

Bestimmte Textteile müssen als Block gehandhabt werden. Möchten Sie beispielsweise ein Wort oder einen Satz in Fett hervorheben, müssen Sie den Anfang und das Ende des betreffenden Textblocks kennzeichnen. Hierfür wird ein HTML-Element am Anfang und eines am Ende des Textblocks eingefügt. Der zwischen den zwei Elementen stehende Text wird fett hervorgehoben. Das ist ein nichtleeres Element.

Leere Elemente gelten an sich als vollständige Befehle und müssen nicht mit einem endenden Zeichen abgeschlossen werden. Möchten Sie beispielsweise ein Bild in ein Textdokument einfügen, brauchen Sie nur ein einzelnes Element dafür anzugeben.

Es gibt mehrere Elemente, die man sich als leere oder nichtleere Elemente vorstellen kann. Ein Element, das den Anfang oder das Ende eines Absatzes spezifiziert, kann beispielsweise ein leeres Element sein. Es besteht keine Notwendigkeit, auch das Ende des Absatzes zu markieren. Andererseits ist ein Absatz ein logischer Block und als solcher ein nichtleeres Element. Aus diesem Grund unterstützen die neuen HTML-Versionen sowohl leere als auch nichtleere Varianten einiger Befehle (in diesem Kapitel nur die leere Variante berücksichtigt).

Die Entscheidung, was zum Beenden eines nichtleeren Elements eingefügt werden muß, ist einfach. Wird ein bestimmtes Element für den Anfang gewählt, muß in jedem Fall das gleiche Element zum Beenden benutzt werden. Die zwei Elemente werden einfach dadurch unterschieden, daß dem endenden Element ein Schrägstrich vorangestellt wird, z.B.:

Bei diesem Beispiel wird der Fettdruck mit dem Element <B> erreicht. Da wir bestimmen müssen, wo der Fettdruck enden soll, brauchen wir ein schließendes Tag, also haben wir es mit einem nichtleeren Element zu tun. Das schließende Tag für <B> ist </B>. Das ist das universelle Prinzip in HTML.

Die Groß- und Kleinschreibung der Tags spielt keine Rolle. Sie können die Elemente also in Großbuchstaben, Kleinbuchstaben oder gemischt eingeben.

Aus Gründen der besseren Übersichtlichkeit werden Tags in den meisten Fachbüchern, Zeitschriften und im Code in Großbuchstaben eingegeben.

Viele Elemente enthalten Parameter, mit denen beschrieben werden kann, welche Funktion der jeweilige Befehl bewirkt. Ein Element, das als Platzhalter für ein Inline-Bild vorgibt, muß den Namen des Bildes enthalten. Das nennt man Parameter oder Argument, z. B.:

Wir haben in diesem Beispiel ein <IMG>-Element, das die einzufügende Grafik bezeichnet. Der Teil SRC= des Elements bezeichnet den Namen des zu ladenden Bildes. Das ist ein Parameter für das Element <IMG>.

Parameter stehen immer nach dem Element, und bei Befehlen mit mehreren Parametern werden diese in einer beliebigen Reihenfolge aufgeführt.

Der Datenteil eines Parameters (»flowers.gif« im obigen Beispiel) steht zwischen Anführungszeichen. In den meisten Fällen sind in HTML Daten mit oder ohne Anführungszeichen gültig. Sie müssen aber Anführungszeichen eingeben, wenn Sie Sonderzeichen oder Leerzeichen in die Daten einfügen.

Im allgemeinen sollte man es sich angewöhnen, alle Datenteile immer in Anführungszeichen zu setzen, um Konsistenz und Kompatibilität mit allen Browsern sicherzustellen.

Leerzeichen und Zeilenschaltungen in HTML

In einem Dokument, das Sie in Ihrer Textverarbeitung erfaßt haben, sind eventuell zusätzliche Zeilenschaltungen für Absätze und aufeinanderfolgende Leerzeichen vorhanden. HTML ignoriert alle mehrfach vorkommenden Zeichenschaltungen und Leerzeichen. Wenn Sie das Dokument also in HTML anzeigen, erscheinen diese Zeilenschaltungen und Leerzeichen nicht. Sie werden bald feststellen, daß das ein Segen ist. Gleichzeitig werden Sie feststellen, daß das anfangs ein wenig unbequem ist, weil man zunächst Schwierigkeiten hat, die gewünschten Abstände zu erreichen.

Die Regeln in bezug auf Leerzeichen und Zeilenschaltungen sind einfach. Bei mehreren aufeinanderfolgenden Leerzeichen wird nur eines verwendet, die anderen werden ignoriert. Leere Absätze werden grundsätzlich entfernt.

Nun sind diese Regeln sicherlich einfach, doch stellt man sich jetzt die Frage, wie diese Elemente dann realisiert werden können, z. B. für Leerraum, in den Grafiken eingefügt werden sollen. Als Lösung bietet HTML mehrere Elemente für spezielle Formatierungen, z. B. <PRE>, <P> und <BR>. Diese Elemente werden im nächsten Abschnitt erklärt.

Reservierte Wörter in HTML

Da die Zeichen < und > zum Begrenzen von Tags dienen, hegen Sie bestimmt schon den Verdacht, daß diese Zeichen nicht innerhalb des Dokumenttextes benutzt werden können. Da liegen Sie richtig. In HTML sind <, > und & reservierte Zeichen. Wofür die spitzen Klammern benutzt werden, wissen Sie schon. Das Zeichen & wird benutzt, um Sonderzeichen in Text einzugeben. Möchten Sie diese Zeichen in einem Text benutzen, müssen Sie durch ein vorangestelltes Zeichen verhindern, daß sie als HTML-Befehle interpretiert werden. Nachfolgend eine Aufstellung einiger häufig verwendeter Sonderzeichen:

Tabelle 21.1: HTML-Einheitenwerte für Sonderzeichen

Für den Text »Der neue Preis für »A und B« beträgt DM <10,99>, müßten Sie folgenden HTML-Code erfassen:

Nicht alle Browser können die HTML-Unterstuetzungvollständige Palette der Sonderzeichen darstellen. Außerdem wird von manchen Browsern das Leerzeichen nach einem Sonderzeichen ignoriert. Wenn Sie mit bestimmten Sonderzeichen Schwierigkeiten haben, geben Sie das Originalzeichen ein, und prüfen Sie das Ergebnis. Werden Leerzeichen nicht richtig ausgegeben, fügen Sie vor und/oder nach einem Sonderzeichen ein zusätzliches Leerzeichen ein.

In folgender Tabelle finden Sie alle Zeichen des Zeichensatzes ISO-Latin-1 mit der jeweiligen numerischen Einheit, mit der Sie das jeweilige Zeichen generieren können.

Tabelle 21.2: Zeichensatz ISO-Latin-1

Dateierweiterungen und HTML

HTML erkennt viele Dateitypen automatisch an der Erweiterung. In der folgenden Liste werden Erweiterungen mit der jeweiligen Bedeutung in HTML aufgeführt. Längere Erweiterungen müssen für DOS-Plattformen auf drei Buchstaben gekürzt werden.

Tabelle 21.3: Dateierweiterungen

Zusätzlich zu diesen Formaten werden Kompressionsschemata wie Z und gz unterstützt. Zuweilen stößt man im Web auf eine Datei mit unbekanntem Format. Sie werden dem Benutzer vom Browser als Textdateien oder zum Speichern auf die Festplatte angeboten. Sie können im jeweiligen Browser, z. B. im Internet Explorer, unter Optionen nachsehen, welche Dateiformate unterstützt werden. Der Benutzer hat außerdem die Möglichkeit, weitere Dateiformate zu konfigurieren.

URL-Namenskonvention

URL (im Amerikanischen »örl« ausgesprochen) ist die Abkürzung von Uniform Resource Locator. Das ist ein Mechanismus, mit dem im WWW eine bestimmte Page, ein Bild oder ein Soundclip gefunden wird. Einfacher ausgedrückt ist der URL die Adresse einer Page.

Es gibt absolute und relative URLs. Ein absoluter URL ist eine vollständige Web-Adresse, und um die betreffende Page zu finden, ist darüber hinaus nichts notwendig. Ein relativer URL enthält nur die Angabe, um etwas aufzufinden. Die Postanschrift

1700 S. Stadium Drive
Bontia, CT 47052

wäre beispielsweise eine absolute Adresse. Sie genügt, um den Einwohner zu finden. Stehe ich bereits in der richtigen Straße, würde die relative Adresse 1700 genügen, um das richtige Haus zu finden. Ich brauche in dem Fall nicht die Angabe der Straße und der Stadt.

In HTML funktioniert die Suche nach Dokumenten ähnlich. Ein absoluter URL setzt sich aus folgenden Teilen zusammen:

Mit service:// wird der Zugriff auf das Dokument bezeichnet. Die gängigen Dienste sind in folgender Tabelle zusammengefaßt.

Tabelle 21.4: URL-Namenskonvention

NEWS unterscheidet sich von den übrigen Diensten darin, daß die zwei Schrägstriche (//) nicht nötig sind.

Mit host wird die Maschine bezeichnet, auf der sich das Dokument befindet. port kann wahlweise angegeben werden und bezeichnet einen Proxy-Server (z. B. 70 bei Gopher und 80 bei HTTP). path ist das Verzeichnis, in dem sich das Dokument befindet, file ist das Dokument selbst, und ext ist die Dateierweiterung.

Achten Sie beim Erstellen von Web-Pages mit URLs darauf, daß die Adressen richtig angegeben werden. Am besten testen Sie jeden URL in Ihrem Browser, bevor Sie Ihre Page veröffentlichen.

Muß in einem URL kein Verzeichnis und keine Datei angegeben werden, wird dem anfragenden System ein Standarddokument ausgegeben. Ein Beispiel dafür mit einem absoluten URL wäre http://www.iquest.net/cw/cookware.html . Diese Adresse führt zu der Datei cookware.html, die sich im Verzeichnis cw auf dem Host www.iquest.net befindet. Der Zugriff auf die Datei erfolgt gemäß http:// auf dem WWW-Server des Hosts.

Relative URLs enthalten nur einen Teil der vollen Adresse. Sie können nur im gleichen HTML-Dokument benutzt werden und müssen auf der gleichen Maschine residieren. Soll beispielsweise in die Datei cookware.html die Grafikdatei new.gif eingefügt werden, kann das mit dem URL auf zwei Arten realisiert werden:

ABSOLUT: <img src=" http://www.iquest.net/cw/new.gif ">
RELATIV: <img src="new.gif">

Die erste Syntax ist klar. Die relative Syntax ist nicht selbsterklärend. Da wir die Datei cookware.html bereits aus dem Verzeichnis cw herausgezogen haben, genügt beim relativen URL die obige Angabe, weil das System ohnehin in cw suchen würde.

Fehlerbehebung

Mein URL-Befehl führt nicht zu dem verknüpften Dokument. Woran kann das liegen?

Überprüfen Sie die URL-Adresse. Vielleicht haben Sie irgendwo einen Schrägstrich vergessen. Versehentlich verwenden DOS-Nutzer oft anstelle des einfachen Schrägstrichs einen Backslash.

Warum funktionieren einige meiner URL-Adressen mit Ankern nicht richtig?

Je nach dem benutzten Browser funktionieren relative URLs eventuell nicht richtig, wenn sie mit Ankern (<A>) verwendet werden. Das trifft besonders dann zu, wenn sich die betreffenden HTML-Dateien lokal auf den Computer befinden. Falls Sie mit einem relativen URL Schwierigkeiten haben, ersetzen Sie ihn durch einen absoluten.

Dokumentaufbau in HTML

Laut HTML-Standard sollte ein gutes HTML-Dokument Elemente beinhalten, die das Dokument in beschreibende und funktionelle Bereiche unterteilen. Der funktionelle Bereich ist der Teil, der dem Browser Anweisungen zur Anzeige des HTML-Dokuments gibt. Der beschreibende Bereich dient zur Unterstützung des Browsers beim Abgleich des HTML-Codes. Von vielen Autoren werden diese Elemente aber weggelassen oder falsch gebraucht. Die Browser nehmen das in der Regel nicht übel, weil sie auch ohne Formatierangaben gut auskommen. Zugunsten der Qualität der Web-Pages sollte man diese Elemente aber richtig verwenden.

Grundlegend hat ein HTML-Dokument folgendes Format:

Tabelle 21.5: Grundformat eines HTML-Dokuments

Die öffnenden Befehle <HEAD> und <BODY> werden im nächsten Abschnitt beschrieben. Die zwischen <HEAD> und </HEAD> stehenden Informationen werden benutzt, um dem Browser das Dokument zu beschreiben. Sie haben für den Benutzer (normalerweise) keine Bedeutung. Die zwischen <BODY> und </BODY> stehenden Informationen begrenzen den eigentlichen Dokumentinhalt und alle Formatierungen, die darin benutzt werden.

In Kapitel 20 über die Planung von Homepages habe ich das Tag <META> erwähnt. Sie können damit Schlüsselwörter bestimmen, um Ihre Site zu indexieren. Dieses Tag müssen Sie im Kopf des Dokuments in <HEAD> einbinden, z.B.:

HTML-Elemente

In diesem Abschnitt werden die am häufigsten benutzten HTML-Elemente beschrieben. Das sind diejenigen, die Sie auf jeden Fall brauchen, um eine Homepage zu entwickeln.

Elemente zur Steuerung der Textgröße

HTML unterstützt sechs Überschriftsebenen, Ueberschriften-Tagsvon <H1> bis <H6>. Wie die meisten Tags werden auch die für Überschriften in Paaren benutzt. So ist das öffnende Tag für die Überschrift der ersten Ebene <H1> und das schließende ist </H1>. HTML-Überschriften werden fett angezeigt. Im allgemeinen haben Überschriften der ersten Ebene die größte und diejenigen der sechsten Ebene die kleinste Schrift unter den Überschriften. Browser fügen in der Regel vor und nach einer Überschrift eine Leerzeile ein.

Als Web-Publisher haben Sie in HTML leider keinen direkten Einfluß auf die Schriftgrößen. Sie werden durch Konfigurationen festgelegt, die im Browser, in dem das Dokument angezeigt wird, eingerichtet sind. Die Überschriftsgrößen sind durchgängig in bezug auf die anderen Überschriften und den Fließtext ausgelegt. Die meisten Browser zeigen nur bei den Überschriften der Ebenen eins bis vier einen sichtbaren Unterschied an. Das bedeutet, daß eine Überschrift der vierten Ebene oft in der gleichen Schriftgröße angezeigt wird wie eine der fünften und sechsten Ebene.

Sie erstellen Überschriften wie folgt:

In Abbildung 21.1 sehen Sie den Unterschied zwischen der größten (<H1>) und der kleinsten (<H6>) Schriftgröße.

Abbildung 21.1: In diesem Bild sehen Sie mehrere Schriftgrößen

Beachten Sie, daß für den Textkörper des Dokuments kein Tag angegeben wurde. Das schließende Tag </H6> setzt die Textgröße auf die Vorgabegröße zurück.

Elemente zur Steuerung der Abstände

HTML hat eine gewisse Tendenz, Text im Dokument zu verschieben, weil zusätzliche Leerzeichen und Zeilenschaltungen entfernt werden. Wie kann man das verhindern? Hierfür gibt es spezielle Elemente, die Zeilenschaltungen erzwingen und vorgeben, wann ein Absatz beginnen soll. Außerdem gibt es Formatierbefehle, mit denen verhindert werden kann, daß Text irgendwie geändert wird. Die üblichen Textformatierungen werden im folgenden beschrieben.

Zeilenumbruch

Mit dem Zeilenumbruch-Tag können Sie eine Zeile beenden, ohne zwischen zwei Zeilen eine Leerzeile einzufügen. Das <BR>-Tag ist eines der wenigen, das kein schließendes Gegenstück hat. Sie können mit Zeilenumbrüchen Textteile in Ihrem Dokument auf vielseitige Weise formatieren, z. B.

Das ist ein leerer Befehl, deshalb ist kein schließendes </BR> erforderlich. Mit dem <BR>-Tag können Sie auch Text in Spalten oder als einfache Aufstellung formatieren. In Spalten gesetzter Text ist wirkungsvoller und erregt die Aufmerksamkeit des Lesers.

Sie können das <BR>-Tag innerhalb von anderen Tags benutzen, ohne daß sich dadurch die Schrift oder der Stil im zuvor deklarierten Tag ändert. Wenn Sie beispielsweise <BR> in ein Überschriften-Tag einfügen, bleibt Text vor und nach dem Zeilenumbruch im Format der Überschrift. Das <BR>-Tag beginnt lediglich eine neue Zeile, wie der Zeilenschalter auf einer Schreibmaschine.

Absatzende

In HTML wird zur visuellen Trennung von Absätzen das Absatz-Tag <P> benutzt. Stößt ein Browser auf ein Absatz-Tag, beendet er die aktuelle Zeile, fügt eine Leerzeile ein und fährt mit der Anzeige des Textes oder Objektes fort, das nach dem Absatz-Tag folgt. Für dieses Tag ist der schließende Partner </P> nicht zwingend erforderlich.

Sie erstellen Absätze wie folgt:

Vorformatierter Text

Die Definition eines Textabschnitts als vorformatierten Text ist sehr nützlich, wenn der betreffende Text genau wie in der Datei angegeben aussehen soll. Sie können ASCII-Standardformatierungen benutzen, um den Text in Ihren Dokumenten zu formatieren. In einem Abschnitt, den Sie als vorformatierten Text deklariert haben, können Sie alle üblichen ASCII-Abstandsformatierungen, einschließlich Tabulatoren, mehrere Leerzeichen und mehrere Leerzeilen, eingeben.

Das <PRE>-Tag wird paarweise wie folgt benutzt:

Vermeiden Sie <BR> und <P> innerhalb eines <PRE>/</PRE>-Abschnitts, da dies von manchen Browsern ignoriert wird.

Horizontale Linien

Eine andere Möglichkeit, das Aussehen des Dokuments aufzuwerten, bieten horizontale Linien. Horizontale Linien sind schattierte Striche, die sich quer über das Dokument ziehen. Durch die Schattierung sieht die Linie im Dokument erhaben aus. Mit dem <HR>-Tag fügen Sie eine horizontale Linie in Ihr Dokument ein.

Der vorrangige Nutzen von <HR>-Tags ist, daß Sie damit Ihr Dokument sichtbar in Abschnitte unterteilen können. Sie sollten horizontale Linien aber sparsam verwenden. Zu viele davon in einem Dokument machen die ganze Wirkung zunichte. Ein Beispiel sehen Sie in Abbildung 21.2.

Abbildung 21.2: Hier wurden verschiedene Formatierungen, auch horizontale Linien, verwendet

Elemente zur Steuerung der Texthervorhebung

Als häufigste Formatierungen für Text wird sicherlich Fett, Kursiv und Unterstrichen verwendet. Wie Sie das mit HTML-Code erreichen, wird im folgenden Abschnitt erklärt.

Fett, Kursiv, Unterstrichen

Für diese drei Grundformatierungen wird jeweils ein öffnendes und ein schließendes Tag verwendet. Man nennt sie physische Stilelemente. Als Gegenstück dazu gibt es auch das Tag-Paar <STRONG> und </STRONG>, das den logischen Stil definiert. Die meisten Browser zeigen so gekennzeichneten Text fett an, z.B.:

Mit dem Tag <I> und dem schließenden </I> können Sie einen Text kursiv formatieren. Das logische Stil-Tag dafür wäre <EM> und </EM>. Um einen Text zu unterstreichen, geben Sie das Tag <U> und das schließende </U> ein. Nachfolgend je ein Beispiel:

Sie können Tags für physische Stilelemente untereinander und mit anderen Tags kombinieren. Halten Sie dabei immer eine parallele Reihenfolge ein, insbesondere, wenn Sie Stil-Tags kombinieren. Sie könnten beispielsweise Fett und Kursiv wie folgt kombinieren:

Gehen Sie auch mit diesen Formatierungen sparsam um, weil es noch viele Browser gibt, die aus diesen Formaten ein wildes Durcheinander anrichten.

Elemente zum Einfügen von Inline-Bildern

Einer der Vorteile von HTML ist die Möglichkeit, daß man Bilder direkt in ein Dokument einfügen kann. Dadurch sehen HTML-Dokumente aus wie Zeitschriftenseiten. Mit dem Befehl <IMG> können Sie ein Bild direkt an der Stelle einfügen, an der Sie den Befehl ausgeben. Das ist ein leerer Befehl, so daß kein schließendes Tag erforderlich ist. Hier ein Beispiel:

Bei diesem Beispiel würde das Bild aus der Datei flower.gif aus dem aktuellen Verzeichnis geholt werden (weil das ein relativer URL ist). Der Parameter SRC ist nicht optional. Er muß einen absoluten oder relativen URL bezeichnen.

Für <IMG> gibt es optionale Parameter, die bestimmen, wie das Bild in das Dokument integriert wird:

ALIGN Dieser Parameter bestimmt, wie das Bild in bezug auf den benachbarten Text links und rechts ausgerichtet wird. Sie haben drei Optionen: ALIGN=TOP, ALIGN=MIDDLE und ALIGN=BOTTOM. Damit können Sie das Bild oben, zentriert bzw. unter dem Text anordnen.

ALT Mit dem Parameter <ALT> können Sie alternativen Text angeben, der anstelle des Bildes angezeigt wird, falls der Browser des Benutzers keine Bilder anzeigen kann. In Abbildung 21.3 sehen Sie den Befehl <IMG> mit den verschiedenen Parametern.

Abbildung 21.3: Das <IMG>-Tag mit den drei Ausrichtungsoptionen

Als Inline-Bilder können Sie die Formate GIF, XBM und XPM verwenden. Nur wenige Browser unterstützen derzeit JPEG- und MPEG-Dateien.

Elemente zur Steuerung von Listen

HTML bietet viele Mechanismen zum Formatieren von Listen und Einrückungen. Wir konzentrieren uns nur auf die zwei wichtigsten, weil sie derart nützlich sind, daß man die anderen ignorieren kann.

Die Elemente <UL> und <OL> rücken den Text ein. In Verbindung mit dem Element <LI> erzeugen sie numerierte Listen oder Aufzählungen.

Ungeordnete Listen

Mit dem Element <UL> können Sie ungeordnete, d. h. nicht numerierte Listen definieren. Die als Liste definierten Textzeilen werden untereinander eingerückt. Sie können mehrere <UL>-Listen untereinander einrücken. Wenn Sie das Tag <LI> in Verbindung mit <UL> benutzen, erhalten Sie eine Liste mit Aufzählungszeichen. In Abbildung 21.4 sehen Sie verschiedene Listen. Nachfolgend ein Beispiel:

Werden die Tags auf diese Weise verwendet, besteht zwischen <UL> und <OL> kein Unterschied.

Abbildung 21.4: Mehrfache Verwendung der Listenelemente <OL> und <UL>

Geordnete Listen

Benutzen Sie das Listenelement <LI>, um Aufzählungslisten mit <UL> und numerierte Listen mit <OL> zu erzeugen. Um <LI> zu verwenden, setzen Sie an den Anfang jeder Zeile, die mit einem Aufzählungszeichen oder einer Nummer versehen werden soll, ein <LI>. Hier ein Beispiel:

Würden wir statt dessen <OL> benutzen, würde unser Beispiel so aussehen:

Bei der automatischen Numerierung wird selbsttätig nach der Nummer ein Punkt und ein Leerzeichen eingefügt.

Die Elemente <UL> und <OL> werden automatisch verschachtelt, und das Aufzählungszeichen wird (je nach Browser) für jeden Aufzählungsblock geändert. Ist eine Zeile einer Aufzählungsliste breiter als der Bildschirm, wird die Zeile automatisch umgebrochen und unter das Aufzählungszeichen eingerückt.

Elemente zur Steuerung von Ankern und Links

Ein wichtiger Aspekt von HTML ist die Möglichkeit, auf andere Dokumente und Bilder zu verweisen. Diese Verweise nennt man im HTML-Standard Anker, üblicherweise aber auch Link oder Hyperlink. HTML unterstützt solche Verweise auf folgende Elemente:

• Ein beliebiges anderes HTML-Dokument
• Ein beliebiges anderes Dokument (Text-, Grafik-, Binärdateien usw.)
• Ein beliebiger Punkt im aktuellen HTML-Dokument

Um ein Link auf eine andere Datei oder Stelle in der aktuellen Datei einzufügen, werden die Tags <A> und </A> benutzt. Sie können zwischen die Anker-Tags Text oder Inline-Bilder eingeben. Alles, was zwischen den Anker-Tags steht, wird ein Link. Klickt der Benutzer auf den zwischen den Anker-Tags stehenden Text oder das Inline-Bild, wird die entsprechende Datei oder Seite in den Browser geladen.

Hinsichtlich der Anzahl von Links oder der Stelle, an der Anker eingefügt werden können, gibt es keine Beschränkungen. Links können aber nicht verschachtelt werden.

Um ein Link auf ein anderes Dokument oder eine Datei einzugeben, benutzen Sie den Parameter HREF im <A>-Befehl, z. B.:

In diesem Fall könnte der Benutzer auf den Wortlaut »Dieser Text ist verknüpft« klicken, um die angegebene Datei zu laden. Hier zeigt der HTML-Parameter entweder auf einen absoluten oder relativen URL, mit dem das zu ladende Dokument adressiert wird. Durch Verwendung eines absoluten URLs können Sie auf eine lokal auf Ihrem Server befindliche Datei verweisen.

Bei dem Beispiel

ist das Bild p.gif verankert. Klickt der Benutzer auf dieses Link, wird die Datei p.exe von der Site web.com des Web-Servers http:// geladen. Da es sich hier nicht um eine HTML-Datei handelt, wird sie dem Benutzer als Binärdatei ausgegeben, die er auf seiner Festplatte speichern kann.

Sie können in einem Dokument auch eine bestimmte Stelle verankern. Diese Ankerart ist nützlich, wenn Sie eine längere Page in mehrere Textbereiche oder Themen aufteilen wollen. Der Anker fungiert dann als Index zu diesen Teilen des Dokuments.

Um eine Stelle zu verankern, beginnen Sie mit der Definition einer Beschriftung (Label). Das zu verankernde Dokument kann das aktuelle oder ein anderes Dokument auf einer beliebigen Maschine sein. Um ein solches Link einzurichten, definieren Sie den Anker wie folgt:

Danach bestimmen Sie die Stelle, die angesprungen werden soll, wenn der Benutzer auf das Link klickt:

»label1« in HREF ist eine Beschriftung innerhalb des aktuellen Dokuments. Das Wort »label1« kann alles mögliche sein. Das Nummernzeichen (#) bestimmt die Funktion (z. B. #Hallo, #Ok usw.). Der Parameter NAME= bestimmt das Label selbst. Klickt der Benutzer auf den Text, gelangt er sofort zu dem Dokumentbereich, der durch NAME= definiert ist. In diesem Fall wäre das »Der Anker führt zu diesem Abschnitt«. Dadurch können Sie einen Index oder ein Inhaltsverzeichnis innerhalb eines Dokuments erstellen.

Fehlerbehebung

Mein Label funktioniert nicht richtig. Wie kann ich das beheben?

Stellen Sie sicher, daß sowohl die Referenz auf das Label als auch das Label selbst richtig geschrieben sind. Bei Labeln muß die Groß- und Kleinschreibung beachtet werden.

Elemente zur Steuerung des Browsers

Mit verschiedenen HTML-Elementen kann die Ausgabe von Web-Pages im Browser gesteuert werden. Diese Elemente sind für die richtige Funktionsweise des HTML-Codes nicht nötig, sondern werden nur der Vollständigkeit halber erwähnt.

Das Header-Element

Das Element <HEAD> definiert den Header eines Dokuments. In diesem Teil werden alle Elemente des Dokuments eingefügt, die an sich nicht Teil des eigentlichen Inhalts sind. Dazu zählen der Titel und andere beschreibende Teile. <HEAD>-Elemente müssen nicht unbedingt verwendet werden, um einen lauffähigen HTML-Code zu produzieren. Ein guter HTML-Programmierer fügt sie aber ein. Das <HEAD> wird immer mit </HEAD> beendet.

Beachten Sie, daß einfacher Text, der zwischen <HEAD> und </HEAD> steht, im Dokument genauso erscheint, als wären diese Tags nicht vorhanden.

Das Title-Element

Das Element <TITLE> ist erforderlich. Die meisten Browser haben einen Bereich, in dem der Titel des aktuellen Dokuments angezeigt wird. Alles, was zwischen <TITLE> und </TITLE> steht, wird in diesem Bereich angezeigt. Dieses Element wird innerhalb der Tags <HEAD> und </HEAD> eingefügt, z. B.:

Das Body-Element

Das Element <BODY> definiert den Inhalt eines Dokuments. Das ist der eigentliche Inhalt der Seite mit allen Formatierungen. Dieses Tag wird immer mit dem Tag </BODY> beendet. Nachfolgend ein Beispiel mit den Kopfelementen eines HTML-Dokuments:

Elemente kombinieren

Die meisten HTML-Tags können kombiniert werden. Einige Kombinationen führen allerdings nicht unbedingt zum erwarteten Ergebnis. Außerdem sieht das Ergebnis je nach Browser anders aus. Beim Erstellen von HTML-Pages mit kombinierten Tags sollten Sie folgende Punkte beachten:

• Im allgemeinen lassen Browser nicht zu, daß Text fett und kursiv hervorgehoben wird. Normalerweise wird bei mehreren Stilen das innerste Tag-Paar herangezogen. Bei <B> <I> Hallo </I> <B> würde das Wort z.B. kursiv, nicht aber fett und kursiv hervorgehoben werden.
• Mehrere <P> oder <BR> in einer Zeile werden oft als Zeilenumbruch behandelt, und Mehrfachvorkommen werden ignoriert.
• Mit dem Parameter ALIGN können Sie Text und Bilder nebeneinander ausrichten. Fließt der Text aber über das Ende des Bildschirms hinaus, wird er auf die nächste Zeile umgebrochen, so daß neben dem Bild ein unschöner Rand entsteht. Die Benutzer zeigen Ihre Page auf unterschiedlichen Monitoren an. Um dieses Problem zu lösen, setzen Sie das Bild in eine Tabellenzelle neben die Zelle mit dem Text. Tabellen werden von den modernen Browsern unterstützt.
• Sie können auch mehrere Bilder nebeneinander positionieren. Um zusätzlichen Abstand zwischen den Bildern zu erreichen, können Sie die Bilder zwischen <PRE> und </PRE> setzen. Auch hier führt eine Tabelle meist zu besseren Ergebnissen.
• Nebeneinanderstehende Bilder sehen nicht unbedingt in allen Browsern gleich aus. Einige Browser laden keine Bilder, die größer sind als der Monitor. Andere beachten das <PRE> vor Bildern nicht, so daß mehrere Bilder übereinander angezeigt werden. Um dieses Problem zu vermeiden, fügen Sie zwischen den Bildern einen großen Abstand ein.
• Eine mit <H1> formatierte Überschrift oder anderer Text in großer Schrift ist neben einem Bild möglich. Beispiel: <H1><IMG SRC="flower.gif"> Blumen! <H1>

Einfache Homepage erstellen

Sie kennen nun den Hintergrund, um HTML-Pages zu schreiben. Jetzt ist es an der Zeit, Ihre eigene Page zu schreiben. In diesem Abschnitt wird ein Beispiel einer Homepage aufgeführt, die Sie als Grundlage für Ihre eigene Homepage heranziehen können. Ich habe eine persönliche Homepage als Beispiel gewählt. Sie können sie aber auch für eine Firma, ein Bildungsinstitut oder eine andere Page anpassen.

Im folgenden Listing wird der gesamte HTML-Code aufgeführt. Beachten Sie die Bilder (GIF) und Links. Sie wählen natürlich andere Bilddateien, können die Bilder aber auch ganz weglassen. Das gilt auch für die Links. Geben Sie den Text in einem Texteditor ein. Dann geben Sie die Adresse in Ihrem Browser ein, um sich das Werk anzusehen (siehe Abbildung 21.5).

Abbildung 21.5: Beispiel einer kompletten WWW-Page

Achten Sie darauf, daß Sie die Page nicht mit Informationen vollpacken. Teilen Sie den Inhalt in handliche Abschnitte auf. Experimentieren Sie mit verschiedenen Formatierungen, um das optimale Ergebnis zu finden.

Sie werden auf Ihren Ausflügen im WWW sicherlich auf viele interessante Layouts stoßen. Möchten Sie wissen, wie der HTML-Code von Seiten, die Sie interessieren, aussieht, sehen Sie sich den Quellcode an. Öffnen Sie die betreffende HTML-Datei in einem Texteditor.

Homepage um Formulare erweitern

Die Möglichkeit, mit HTML Formulare in Web-Pages einzubinden, bietet dem Benutzer Interaktivität, die er mit den üblichen Links nicht hat. Formulare können unterschiedlichen Zwecken dienen, z. B.:

• Benutzerstatistiken und -Umfragen
• Suchkriterien zum Durchsuchen von Datenbanken
• Schaltflächen und Optionsfelder zur Auswahl von Optionen
• Erfassung elektronischer Bestellungen
• Handhabung interaktiver Nachrichten und Newsgruppen
• Mechanismen für interaktive Spiele

Ein Formular wird in zwei Schritten erstellt. Im ersten Schritt wird das Formular im HTML-Dokument erstellt. Im zweiten Schritt werden die Mechanismen zum Einholen der gewünschten Informationen festgelegt. Diese Mechanismen können Sie selbst schreiben oder jemanden damit beauftragen. In diesem Kapitel wird beschrieben, wie Sie ein Formular in HTML erstellen können.

Wie Formulare verarbeitet werden

Bevor Sie sich an die Arbeit machen, müssen Sie den Aufbau von Formularen verstehen und einen Einblick darüber haben, wie sie verarbeitet werden.

Um Formulare verwenden zu können, muß ein HTTP-Daemon verwendet werden. HTTP (Hypertext Transfer Protocol) wird auch HTTPD genannt, weil es ein Daemon (ein im Hintergrund laufender Prozeß) ist. Der Zweck eines HTTP-Servers ist die Abarbeitung Ihres Formulars. Die Benutzer Ihrer Page füllen das Formular aus und übertragen es. Nun stellt sich die Frage, an wen sie es übertragen, was mit den Daten passiert und welche HTML-Antwort zurückgegeben werden muß.

Das alles deutet darauf hin, daß eine gewisse Intelligenz von der Maschine abgefordert wird, die diese Informationen verarbeitet. Die Maschine muß die Formularart erkennen und eine entsprechende Antwort erzeugen.

Das wird von einem Programm oder Skript besorgt, das auf einem HTTP-Server läuft. Nachdem ein Formular ausgefüllt wurde, wird es an den Server übertragen, der im Formular mit dem URL adressiert wird. Der Server analysiert den URL und gibt das Formular an das entsprechende Programm oder Skript ab, von dem das Formular verarbeitet wird.

Im Grunde bedeutet das alles, daß Formulare zwar sehr nützlich, aber nur sinnvoll sind, wenn ein entsprechender HTTP-Server mit der nötigen Software vorhanden ist.

Sie werden bald lernen, Formulare zu erstellen, und lernen die Mechanismen kennen, durch die der Server weiß, wie ein Formular gehandhabt werden muß. Sie werden auch erfahren, welche Optionen es für die Leute gibt, die wenig Erfahrung oder nicht die nötige Anlage und keine Zeit haben, um Formulare selbst zu verwalten.

Elemente zur Steuerung von Formularen

Wie bereits erwähnt, ist ein Formular ein Mechanismus, um Informationen vom Benutzer einzuholen. Ein Dokument kann auch mehrere Formulare enthalten, jedoch erscheinen Formulare nie in Formularen. Ein Formular enthält viele Elemente, die seine verschiedenen Aspekte beschreiben, darunter:

• Optionsfelder
• Kontrollfelder
• Listen
• Textfelder

Die Anzahl der verschiedenen Elemente, die in einem Formular benutzt werden können, ist nicht begrenzt. Andererseits wird jeder Web-Autor darauf achten, daß das Formular übersichtlich ist.

Das Tag <FORM> definiert den Anfang eines Formulars. Da ein Formular einen Block mehrerer anderer Tags umfaßt, ist dieses Tag selbstverständlich kein nichtleeres Element. Es wird mit dem Tag </FORM> beendet.

Für <FORM> gibt es zwei Parameter: ACTION und METHOD. Nachfolgend ein Beispiel:

Der Parameter ACTION definiert einen relativen oder absoluten URL. Durch ACTION wird das Formular an diesen URL übertragen.

Der Parameter METHOD definiert die Technik, die der Server anwendet, um die Formulardaten an das durch ACTION bezeichnete Programm zu senden. Es gibt zwei Methoden: GET und POST.

GET ist die ältere Methode und auch die Vorgabe. Wenn Sie keine Methode angeben, wird automatisch GET benutzt. Ein Formular, das anhand der GET-Methode bei einem HTTP-Server ankommt, wird konvertiert und an das in ACTION bezeichnete Programm oder Skript abgegeben.

Die neuere POST-Methode ist leistungsstärker. Aufgrund der Einschränkungen von GET empfiehlt sich die Verwendung von POST. Bei POST werden die Formulardaten nicht über die Befehlszeile an ACTION, sondern über eine Standardeingabe an den HTTP-Server abgegeben. Das scheint zunächst verwirrend, muß Sie aber nicht kümmern. Wichtig ist zu wissen, daß POST effizienter und zukunftssicher ist, da alle HTTP-Standards darauf hinarbeiten. Nun ein Beispiel mit POST:

Bei diesem Beispiel werden die Formulardaten an ACTION abgegeben, und als Server ist www.com benannt. Der Server aktiviert das Programm oder Skript namens top, das sich im Server-Verzeichnis cgi-bin befindet. Als Methode wurde POST definiert.

Welche Aktion oder Methode Sie wählen müssen, erfahren Sie von Ihrem Provider bzw. den Leuten, die Ihren Server verwalten.

Das INPUT-Element

<INPUT> ist das in Formularen am häufigsten verwendete Tag, weil man damit dem Benutzer viele Auswahlmöglichkeiten bieten kann. Für <INPUT> gibt es viele Parameter. Der wichtigste ist TYPE. Mit diesem Parameter wird definiert, um welche Eingabe es sich handelt. Folgende Werte sind verfügbar:

Der Wert TEXT wird automatisch angenommen, wenn im <INPUT>-Tag kein Typ angegeben wird. Nachfolgend ein Beispiel mit einem einfachen <INPUT>-Befehl, der ein Kontrollfeld implementiert (der Parameter NAME wird später behandelt). Dieser Befehl kann nur zwischen <FORM> und </FORM> erscheinen:

Für jedes Eingabeelement werden eigene Parameter definiert. Im nächsten Abschnitt werden mehrere Beispiele aufgezeigt und erklärt. Fast alle behandelten Elemente nutzen den Parameter NAME. Deshalb wird dieser Parameter zuerst behandelt.

SUBMIT und RESET sind die einzigen Formularelemente, die keinen NAME-Parameter erhalten.

Der NAME-Parameter

NAME wird in allen Eingabeelementen außer SUBMIT und RESET benötigt. Im Grunde erzeugt dieser Parameter eine Beschriftung, die mit der Antwort des Benutzers in Verbindung gesetzt wird. Dadurch kann der Server das Formular interpretieren und die richtige Reaktion ermitteln.

Mit NAME kann ein beliebiges Wort im Formular belegt werden, was aber für den Benutzer nie im Formular sichtbar ist. Nachfolgend Beispiele mit möglichen Argumenten:

Sie sollten möglichst kurze bezeichnende Namen verwenden. Sie begrenzen damit den Umfang der jedesmal zu übertragenden Daten und vereinfachen das Formular, vor allem im Hinblick auf spätere Änderungen.

Kontroll- und Optionsfelder

Mit dem CHECKBOX-Typ können Sie Kontrollfelder erstellen, die der Benutzer wählen kann. Durch den RADIO-Typ wird eine kreisrunde kleine Schaltfläche erstellt, die der Benutzer anklikken kann. Wie gewählte Kontroll- und Optionsfelder angezeigt werden, hängt vom Browser ab. In manchen Browsern werden gewählte Kontrollfelder mit einem x und Optionsfelder mit einer schwarzen Knolle markiert. In anderen Browsern werden beide Feldarten als grafische dreidimensionale Kästchen angezeigt, die den Eindruck eines »eingedrückten« Knopfes vermitteln. Für Kontroll- und Optionsfelder sind vier Attribute verfügbar:

Die meisten Leute sehen zwischen Kontroll- und Optionsfeldern lediglich einen visuellen Unterschied. Es wird davon ausgegangen, daß Kontrollfelder viereckig sind und meist mit einem Kreuzchen markiert werden, während Optionsfelder rund und meist als schwarze Knolle angezeigt werden, wenn sie angewählt sind. Die zwei Feldarten unterscheiden sich durch ein ganz bestimmtes Merkmal: Kontrollfelder können mehrere Optionen enthalten, die sich nicht gegenseitig ausschließen. Die in Optionsfeldern verfügbaren Optionen schließen sich immer gegenseitig aus. Klickt der Benutzer auf ein Optionsfeld, wird das zuvor angewählte Optionsfeld automatisch deaktiviert.

Planen Sie sorgfältig, wofür Sie Kontroll- und Optionsfelder definieren. Verwenden Sie Optionsfelder nur für Optionen, von denen der Benutzer immer nur eine Auswahl treffen kann. Kontrollfelder eignen sich für Optionen, von denen der Benutzer bei Bedarf auch mehrere gleichzeitig auswählen kann.

Nachfolgend ein Beispiel mit Kontroll- und Optionsfeldern:

Wie das im Formular dargestellt wird, sehen Sie in Abbildung 21.6.

Abbildung 21.6: Der Benutzer kann eines oder mehrere dieser Kontrollfelder wählen

Dieses Beispiel sieht im Formular so aus:

Abbildung 21.7: Die Optionsfelder präsentieren dem Benutzer mehrere sich gegenseitig ausschließende Optionen

Optionsfelder müssen nicht unbedingt in einer Gruppe stehen.

Textfelder

Mit dem TEXT-Typ definieren Sie ein Texteingabefeld. Textfelder erscheinen im Fenster des Benutzers immer einzeilig. Für Textfelder stehen vier Attribute zur Verfügung:

Nachfolgend ein paar Beispiele der Verwendung von Textfeldern in einem Formular:

Bei diesem Beispiel wird der sichtbare Bereich des Textfeldes am Bildschirm mit dem SIZE-Attribut auf 60 Zeichen gesetzt. Da keine maximale Feldlänge definiert ist, wird der Inhalt des Textfeldes gerollt, falls mehr als 60 Zeichen eingegeben werden. Um die Eingabe auf einen bestimmten Wert zu begrenzen, kann das MAXLENGTH-Attribut wie folgt hinzugefügt werden:

Was der Benutzer bei dem Beispiel

eingibt, wird an den Server als E-Mail, gefolgt von dem eingegebenen Text, übertragen. Hier ein weiteres Beispiel:

Das Ergebnis dieses Codes ist in Abbildung 21.8 ersichtlich.

Abbildung 21.8: In diese Textfelder gibt der Benutzer Daten ein

Bei diesem Beispiel gibt der Benutzer in vier Textfeldern nacheinander Vornamen, Nachnamen, Anschrift und einen Kommentar ein, mit dem er in diesem Fall weitere Informationen von der Web Site anfordert.

Der Wert MAXLENGTH ist nützlich bei Formularen mit Datenbanken. Achten Sie darauf, daß die von der betreffenden Datenbank zulässige Höchstlänge der Felder nicht überschritten wird.

Fehlerbehebung

Ich habe ein Textfeld mit einer bestimmten Größe (SIZE) erstellt, jedoch passen die angeforderten Daten nicht hinein.

Sofern Sie die Feldlänge richtig bemessen haben, kann das daran liegen, daß SIZE in fast jedem Browser anders gehandhabt wird. Als gutes Mittelmaß gilt eine Feldlänge zwischen 10 und 40 Zeichen.

Paßwortfelder

Um den Benutzern die Möglichkeit zu bieten, das PasswortfelderPaßwort einzugeben, ohne daß es von Dritten über die Schulter einsehbar ist, können Sie ein PASSWORD-Eingabefeld anlegen. Alles, was der PasswortfelderBenutzer in dieses Feld eingibt, wird am Bildschirm als Sternchen (*) angezeigt. Die Sternchen erfüllen lediglich den Zweck, das vom Benutzer eingegebene Paßwort nicht am Bildschirm anzuzeigen. Sie haben keine Wirkung darauf, wie der Text an das Gateway-Script weitergegeben wird. Die Kombination dieses Feldes mit einem Textfeld, in das der Benutzer seine Kennung eingibt, um sich anzumelden, dient zur Ermittlung, ob der Benutzer Zugriff auf geschützte Bereiche Ihrer Web Site erhält. Dieses Attribut hat vier Elemente:

Nachfolgend ein Beispiel für die Verwendung des PASSWORD-Elements:

PASSWORD ist kein sicherer Mechanismus zur Übertragung von Daten. Der einzige Schutz besteht darin, daß die Eingabe des Benutzers nicht an seinem Monitor angezeigt wird. Es erfolgt aber keine Verschlüsselung der Daten vor der Übertragung an den Server.

RESET und SUBMIT

Zwei wichtige Typen für Eingabefelder in Formularen sind RESET und SUBMIT. Sie werden in Formularen normalerweise als grafische Schaltflächen angezeigt. Durch Anklicken der RESET-Schaltfläche wird das Formular geleert, d. h. die bisher vom Benutzer gemachten Eingaben werden gelöscht, so daß er neu beginnen kann. Durch Anklicken der SUBMIT-Schaltfläche sendet der Benutzer das ausgefüllte Formular ab. Standardmäßig werden diese beiden Schaltflächen mit dem Wert RESET bzw. SUBMIT beschriftet. Sie können diese Beschriftung mit dem VALUE-Attribut auf einen anderen Text abändern, z.B.:

Für die SUBMIT-Schaltfläche gibt es als weiteres nützliches Attribut NAME. Mit NAME können Sie ermitteln, welche SUBMIT-Schaltfläche von einem Benutzer angeklickt wurde. Das ist eine weitere Möglichkeit, das Formular, über das Informationen eingegangen sind, zurückzuverfolgen. Sie können damit Ihren Informationsbestand noch besser kontrollieren.

Beachten Sie, daß RESET das Formular auf seine Vorgabewerte zurücksetzt. Hat ein Formular keine Vorgabewerte, werden die Schaltflächen deaktiviert und die Textfelder geleert.

Jedes Formular muß eine SUBMIT-Schaltfläche haben, ansonsten wird es nicht übertragen!

Das TEXTAREA-Element

Dieses Element bietet mehr Funktionalität als die mit dem INPUT-Element definierten Textfelder, weil es Ihnen ermöglicht, Textbereiche jeder beliebigen Größe am Bildschirm auszugeben. Textbereiche können zur Eingabe großer Datenmengen verwendet werden. Die Größe des Bereichs wird in Zeilen und Spalten definiert, Sie haben aber im Prinzip keinen Einfluß darauf, wieviel Daten der Benutzer in den Bereich eingeben kann. Der Grund liegt daran, daß Textbereiche immer mit horizontalen und vertikalen Bildlaufleisten erscheinen, über die der Benutzer den Bereich nach rechts/links bzw. oben/unter verschieben kann.

Ein Textbereich wird mit einem Tag-Paar definiert. Alles, was zwischen dem öffnenden und schließenden TEXTAREA-Tag steht, erscheint standardmäßig im Textbereich am Bildschirm des Benutzers. Ein im Textbereich vorgegebener Text kann vom Benutzer gelöscht bzw. überschrieben werden. Um nicht übermäßig Zeit vom Benutzer abzufordern, sollte dieser Standardtext, wenn überhaupt einer benutzt wird, sehr kurz sein. Für TEXTAREA sind drei Attribute verfügbar:

Im folgenden Beispiel wird ein Textbereich mit 8 Zeilen Höhe und 60 Zeichen Breite definiert:

Wie das nächste Beispiel im Formular dargestellt wird, sehen Sie in Abbildung 21.9.

Abbildung 21.9: Hier sehen Sie, daß das Feld TEXTAREA mehrere Eingabezeilen aufnehmen kann

Fehlerbehebung

Bei einigen Browsern fließt der Text, der in ein von mir definiertes TEXTAREA-Tag eingegeben wird, über das Feld hinaus. Woran liegt das?

Versuchen Sie, das Problem mit dem VALUE-Parameter im TEXTAREA-Tag zu beheben. Einige Browser erkennen dies als Alternative zum definierten Vorgabetext.

Das SELECT-Element

Sie können in Formularen auch Auswahlfelder bzw. Auswahllisten einfügen. Das SELECT-Element dient zum Erstellen von zwei Listenarten: Auswahlmenüs oder Auswahllisten.

Das SELECT-Element wird mit einem öffnenden und schließenden Tag definiert. Sie können das NAME-Attribut verwenden, um das Menü mit einem Schlüsselwort zu benennen. Mit dem SIZE-Attribut können Sie die Anzahl der am Bildschirm angezeigten Optionen festlegen, z. B.:

Standardmäßig kann der Benutzer eine Option aus dem Menü oder der Liste auswählen. In diesem Beispiel wird das erste Menü in einem einzeiligen Fenster mit einem Pulldown-Menü angezeigt. Das zweite Menü wird mit allen sieben Optionen und einer Bildlaufleiste am Bildschirm angezeigt.

Um dem Benutzer die Auswahl mehrerer Optionen zu ermöglichen, verwenden Sie das MULTIPLE-Attribut. Wird dieses Attribut definiert, kann der Benutzer beliebig viele Optionen auswählen. In den meisten Browsern wird zum Auswählen mehrerer Optionen die gleiche Technik angewandt: Der Benutzer hält die (Strg)-Taste gedrückt, während er mit der Maus die gewünschten Optionen markiert, dann klickt er die linke Maustaste. Nachfolgend ein Beispiel, wie dieses Attribut verwendet werden kann:

Menü- oder Listeneinträge werden mit dem OPTION-Element definiert. Dieses Element hat zwei Formate:

Beim ersten Menü im obigen Beispiel kann der Benutzer eine Menüoption wählen. Beim zweiten Menü ist als Vorgabe eine Menüoption ausgewählt. Der Benutzer kann die Option bei Bedarf durch Anklicken abwählen.

Nachfolgend ein umfangreicheres Beispiel für eine Auswahlliste:

Ein ähnliches Beispiel, lediglich mit anderen Einträgen, sehen Sie in Abbildung 21.10.

Abbildung 21.10: In dieser Auswahlliste kann der Benutzer den Schieber verstellen, um nicht sichtbare Optionen anzuzeigen

Die Vorgabe im abgebildeten Beispiel kann vom Benutzer abgewählt werden.

Zwischen den <SELECT> und </SELECT> darf außer <OPTION> kein HTML-Tag stehen.

Komplettes Formular erstellen

Sie haben jetzt die grundlegenden Tags kennengelernt, um ein Formular zu erstellen. In diesem Abschnitt setzen wir alle Elemente zu einem Ganzen zusammen.

Als Beispiel erstellen wir ein Bestellformular, über das der Benutzer ein neues Auto bestellen kann (siehe Abbildung 21.11). Das Formular beginnt mit der Aufnahme von allgemeinen Angaben des Benutzers, wie Name, Telefonnummer und Anschrift. Im Formular befinden sich mehrere Optionsfelder zur Auswahl der Farbe. Darunter erscheint eine Auswahlliste mit Optionen in bezug auf das Modell. Hält der Benutzer die (Strg)-Taste gedrückt, während er auf die Schaltflächen klickt, kann er mehrere Optionen gleichzeitig markieren. Danach folgen einige Kontrollfelder und schließlich die SUBMIT-Schaltfläche, über die der Benutzer das Formular an den HTTP-Server überträgt.

Nachfolgend der Code; wie das Formular angezeigt wird, sehen Sie in Abbildung 21.11.

Abbildung 21.11: Formular zur Bestellung eines Neuwagens

Dieses Beispiel beginnt mit einem öffnenden <FORM>-Tag. In dieser Anweisung wurde die Übertragungsmethode POST gewählt und der URL http://www.car.com/cgi-bin/sellcar eingegeben. Dann folgen Textfelder, in denen der Benutzer seinen Namen, die Anschrift und die Telefonnummer eingibt. Für die Anschrift wurde ein mehrzeiliger Textbereich (TEXTAREA) vorgesehen.

Aus fünf Optionsfeldern kann der Benutzer dann eine Farbe wählen. Anschließend folgen Kontrollfelder für die Ausstattung des Wagens. Hier sind Kontrollfelder sinnvoll, weil der Benutzer sicherlich mehrere Wünsche in bezug auf die Ausstattung hat.

Danach folgen drei Methoden, die ebenfalls durch Kontrollfelder beantwortet werden. Mit der untersten Schaltfläche kann der Benutzer das Formular schließlich einsenden. Als Server wurde car.com im ACTION-Parameter des <FORM>-Tags festgelegt.

Wie Formulare übertragen werden

Ein Formular ist in einer Web-Page selbstverständlich nur Formular uebertragensinnvoll, wenn es so ausgelegt wurde, daß aussagefähige Daten von den Benutzern eingeholt werden können. Nun stellt sich die Frage, wo es abgegeben werden soll. Da mit jeder Formularart ein anderer Zweck verfolgt wird, unterscheiden sich auch die Lösungen für die Erfassung der Daten mit dem jeweiligen Formular.

In diesem Zusammenhang muß erstens geklärt werden, wie das Formular zu verarbeiten ist, und zweitens, was mit den Daten geschehen soll. Sie können sich beispielsweise alle Daten über E-Mail zukommen lassen oder aber in einer Datenbank erfassen. Die Datenbank kann so ausgelegt werden, daß der Benutzer augenblicklich eine Antwort erhält, oder aber, daß später eine Reaktion auf seine Daten folgt.

Interessant ist, daß es für beide Fälle die gleiche Lösung gibt. Können Sie ein Shell-Skript, eventuell in Perl, oder ein relativ einfaches Programm in C oder in einer vergleichbaren Sprache schreiben, bringen Sie alle Voraussetzungen mit, um die Software für die Handhabung Ihrer Formulare selbst zu entwickeln. Wer Formular uebertragensich das nicht zutraut oder keine Zeit dafür hat, kann sich die dafür notwendige Software kaufen.

Wir betrachten zuerst anhand des obigen Beispiels, wie ein Server Formulare handhabt. Sie spielen der besseren Anschaulichkeit halber den Benutzer. Sie füllen das Formular aus und klicken auf die SUBMIT-Schaltfläche.

Ihr Browser faßt die eingegebenen Daten zusammen und sendet sie an den URL, der im ACTION-Parameter im Tag <FORM> definiert wurde. Die Daten gehen beim Server ein und werden geprüft. Am URL ermittelt der Server, wo er ein Programm findet, das die Formulardaten abarbeiten kann.

In unserem Beispiel werden die Daten an den Server www.car.com übertragen. Der Server prüft den URL und aktiviert das entsprechende Programm (cgi-bin). Die Abgabe des Formulars erfolgt anhand der POST-Methode.

An diesem Punkt angelangt, greifen die zwei Möglichkeiten: Sie können (nicht mehr als Benutzer, sondern als Web-Publisher) im Formular festlegen, ob die Daten der Benutzer in Form von E-Mail auflaufen oder direkt in einer Datenbank erfaßt werden. Für die erste Alternative brauchen Sie einen Remailing-Dienst. Dafür werden in der Regel monatliche Gebühren für die Weiterleitung der auflaufenden E-Mail berechnet. Diese Methode ist einfacher, weil Sie dafür nicht unbedingt eine Server-Site brauchen.

Um die zweite Alternative zu nutzen, brauchen Sie eine Server-Site und eine Software oder ein Skript. Diese Methode ist etwa aufwendiger und teurer. Sie können sich eine kommerzielle Software anschaffen oder die Dienste eines entsprechenden Dienstleisters in Anspruch nehmen. Eine ausführliche Beschreibung dieser Lösung geht über den Umfang dieses Buches hinaus.

Was ist cgi-bin?

In unserem Beispiel mit dem Bestellformular für einen Neuwagen erscheint cgi-bin in der Pfadangabe. Das sieht nur aus wie ein Pfad, ist in Wirklichkeit aber ein spezielles Wort, das dem Server bestimmte Hinweise gibt. CGI (Common Gateway Interface) ist ein Interface zwischen Web-Servern und Programmen, um Formulare abzuarbeiten. Diese Programme können in einem Link oder in Formularen stehen.

Stößt ein Server auf einen URL, in dem das Verzeichnis cgi-bin angegeben wird, weiß er, daß er das im URL angegebene Programm bemühen muß, damit die Daten des betreffenden Formulars verarbeitet werden. Er weiß auch, daß er von diesem Programm Antworten zu erwarten hat.

Während also der Benutzer nur die Ergebnisse seiner Dateneingabe sieht, laufen hinter den Kulissen einige Dinge ab. Hier eine Zusammenfassung des Ablaufs:

1. Der Browser des Benutzers gibt die Benutzereingaben an den Web-Server weiter.

• Der Server gibt die Benutzereingaben an ein CGI-Skript ab.
• Das CGI-Skript verarbeitet die Benutzereingaben, gibt sie bei Bedarf an eine andere Anwendung weiter und schickt die Ausgabe an den Web-Server.
• Der Web-Server gibt die Ausgabe an den Browser des Benutzers zurück. Die Ausgabe eines CGI-Skripts kann alles sein, von den Ergebnissen einer Datenbankabfrage bis zu einem völlig neuen Dokument, das durch die Eingaben des Benutzers erzeugt wurde.

Bei den meisten Systemen wird in der Web-Serverdokumentation erklärt, in welchen Verzeichnissen CGI-Skripte und -Utilities abgelegt werden sollen.

Pages um Tabellen erweitern

Tabellen sind ein besonders sorgfältig ausgearbeitetes Merkmal der neuen HTML-Standards. In diesem Kapitel wird beschrieben, wie Tabellen und Rahmen für Web-Dokumente entworfen werden.

Man sollte sich laufend aktuelle Informationen über HTML-Tabellen und Publishing-Inhalte beschaffen. Das Tabellenmodell hat sich seit der ersten Implementierung stark verändert. Wenn Sie Tabellen wie hier beschrieben erstellen, sind sie mit HTML 3.0 sowie mit Internet Explorer und Netscape Navigator kompatibel. Derzeit bestehen auf seiten des W3C bereits Pläne, in der HTML-Version 4.0 Tabellen um mathematische Fähigkeiten zu erweitern.

Einfache Tabelle erstellen

In Abbildung 21.12 sehen Sie eine schlichte Tabelle. Zum Üben genügt das Beispiel aber durchaus. Listing 21.1 enthält den HTML-Code für diese Tabelle. Sie können das Beispiel mehrmals abändern und nachvollziehen, um sich in die Materie einzuarbeiten.

Die einfache Struktur ist am Quellcode erkennbar. Jede Zeile der Tabelle steht zwischen einem öffnenden und schließenden <TR>-Tag, und jede Zelle wird mit einem <TD>-Paar definiert.

Abbildung 21.12: Ausgangspunkt einer einfachen Tabelle für ein Web-Dokument

Listing 21.1: Quellcode für das Beispiel in Abbildung 21.12

Das TABLE-Element

Das Tabellenmodell wurde seit dem ersten Entwurf von HTML vielen Verbesserungen unterzogen. Diese Verbesserungen drücken sich vorwiegend an dem Einfluß aus, den Sie als Web-Autor auf die Verwendung von Tabellen in Ihren Dokumenten haben. Mit den zahlreichen Attributen für das <TABLE>-Tag können Sie ganz genau festlegen, wo und wie Ihre Tabellen angezeigt werden. Eine Tabelle wird zwischen dem öffnenden und schließenden TABLE-Tag definiert.

Folgende Attribute sind für das öffnende <TABLE>-Tag gültig:

Das CAPTION-Element

Nachdem Sie die Grundelemente der Tabelle festgelegt haben, können Sie eine Überschrift in die Tabelle einfügen. Überschriften bieten eine Erklärung oder Beschreibung der in der Tabelle enthaltenen Datenmengen. Eine Tabellenüberschrift wird mit einem öffnenden und schließenden CAPTION-Tag wie folgt definiert:

Mit dem ALIGN-Attribut können Sie die Ausrichtung von Überschriften in Tabellen beeinflussen. In Verbindung mit Tabellenüberschriften sind für das ALIGN-Attribut vier Werte verfügbar:

Beim Einfügen einer Überschrift in eine Tabelle sollten Sie darauf achten, daß sie kurz und bezeichnend ist. In der Regel werden Tabellenüberschriften fett abgesetzt, um die Übersichtlichkeit zu steigern. Im folgenden Beispiel wird eine fette Überschrift rechts neben der Tabelle angeordnet:

Die Elemente TR und TD

Eine Tabelle muß mindestens eine Zelle, d. h. eine Spalte und eine Zeile, umfassen. Tabellenzeilen können im Überschrifts-, Körper- und Fußzeilenabschnitt einer Tabelle definiert werden. Mit dem <TR>-Tag können Sie Zeilen für die einzelnen Abschnitte der Tabelle definieren. Eine Tabelle mit einem Überschrifts-, zwei Körper- und einem Fußzeilenabschnitt würde beispielsweise vier Zeilen umfassen. Für Tabellenzeilen wird nur das öffnende <TR>-Tag verwendet. Hier ein Beispiel:

Die Zuweisungen, die Sie auf der Zellenebene definieren, gelten für die einzelnen Datenzellen oder Überschriften. Datenzellen enthalten die Informationen, die Sie in der Tabelle ausgeben möchten. Mit dem <TD>-Tag können Sie Datenzellen definieren. Überschriftszellen enthalten Überschriften für Abschnitte, Spalten und Zeilen. Überschriftszellen werden mit dem <TH>-Tag definiert. Um Zellen innerhalb einer Zeile zu definieren, fügen Sie einfach Zellendaten nach einer Zeilenzuweisung in die Tabelle ein.

Anspruchsvollere Tabelle erstellen

Unser obiges Beispiel ist fast zu schlicht. Außerdem können einige Dinge schieflaufen. Die Zellen sind zu dicht angeordnet. Die Spaltenüberschriften sind kaum vom Zellentext zu unterscheiden.

In Abbildung 21.13 sehen Sie unsere Tabelle in wesentlich ansprechenderem Format. Das wurde mit nur wenigen Änderungen erreicht. Die Tabelle ist breiter und die Zellenabstände sind großzügiger. Die Spaltenüberschriften sind besser hervorgehoben. Wie diese Änderungen zustande kamen, können Sie in Listing 21.2 nachvollziehen.

Listing 21.2: Quellcode für die Tabelle von Abbildung 21.13

Abbildung 21.13: Durch ein paar einfache Änderungen sieht die Tabelle schon viel ansprechender aus

Weitere Attribute für TABLE

Eine Tabelle kann mit den drei Attributen WIDTH, CELLSPACING und CELLPADDING noch weiter verbessert werden.

Mit WIDTH wird die Tabelle prozentual zur Breite des Browser-Fensters gedehnt. CELLSPACING und CELLPADDING sind Netscape-Erweiterungen, die zusätzlichen Abstand zwischen den Zellen der Tabelle bewirken.

Das TH-Element

In der ersten Zeile der Tabelle haben wir <TD> auf <TH> abgeändert:

Der Vorgabe entsprechend wird der Text zwischen den <TH>-Paaren fett und zentriert hervorgehoben. Mit Attribut ALIGN können Sie den Text nach links oder rechts rücken, z. B. <ALIGN=left>.

Das Attribut ALIGN können Sie auch in <TD>-Tags benutzen. Nach dem Standard werden die Daten in Tabellenzellen (außer den Überschriften) am linken Zellenrand ausgerichtet. Im folgenden Beispiel werden sie zentriert:

Anspruchsvolle TABLE-Elemente verwenden

Mit den bisherigen Beispielen wurden die Elemente behandelt, die Sie aller Wahrscheinlichkeit nach verwenden werden. Darüber hinaus gibt es zahlreiche Erweiterungen für den Microsoft Internet Explorer und den Netscape Navigator. Falls Sie viel mit Tabellen arbeiten, lohnt sich für Sie die kleine Investition in ein Werkzeug wie WebEdit von Ken Nesbitt, das Dialoge und Assistenten beinhaltet, die beim Ausarbeiten von Tabellen behilflich sind.

Falls Sie den Ehrgeiz haben, besonders anspruchsvolle Tabellen für Ihre Web-Site zu erstellen, lohnt sich für Sie die Anschaffung weiterführender Literatur, z. B. HTML – Das Kompendium (ISBN 3-8272-5205-9) oder Web-Publishing für Insider (ISBN 3-87791-887-5).

Homepage um Rahmen erweitern

Durch Definition von Rahmen können Sie Dokumente mit mehreren Fenstern erstellen. Die zwei wichtigsten Tags für Rahmen sind <FRAMESET> und <NOFRAME>. Mit <FRAMESET> können Sie einen Dokumentteil für rahmenfähige Browser definieren. Mit dem <NOFRAME>-Tag können Sie einen Dokumentteil für Browser definieren, die Rahmen nicht benutzen können.

Zwischen dem öffnenden und schließenden <FRAMESET>-Tag können nur FRAME-Tags verschachtelt werden. FRAME-Tags dienen zum Identifizieren der Quelle der Rahmen in Dokumenten. Die Quelle für Rahmen kann ein beliebiges Dokument sein, ist in der Regel aber eine HTML-Seite.

Sie brauchen nicht alle Seiten Ihrer Web-Site um Rahmen zu erweitern. Ein wichtiges Konzept bei der Auslegung von Publikationen lautet, daß Rahmen nur in die Hauptseite der Web-Site eingefügt werden, über die der Benutzer Zugang zur Publikation erhält. Das kann die Homepage oder eine andere Eingangsseite Ihrer Web Site sein. Wenn Sie die Rahmen auf einer Seite der obersten Ebene anordnen, reduzieren Sie den Arbeitsaufwand beim Erstellen der Rahmen.

Aufteilen eines Browser-Fensters in Rahmen

Auf den ersten Blick scheint die Unterteilung eines Browser-Fensters in Rahmen verwirrend. Der Grund liegt daran, daß Rahmen ähnlich organisiert werden wie Tabellen, d.h. jedes Fenster wird in mehrere Zeilen und Spalten aufgeteilt. Die Zeilen eines Fensters ergeben die horizontalen und die Spalten eines Fensters die vertikalen Rahmen.

Abbildung 21.14: Dieses Browser-Fenster enthält vier unabhängige Rahmen

Listing 21.3: Quellcode zum Einfügen vier unabhängiger Rahmen

Mit dem ROWS-Attribut können Sie Zahl und Größe der im Browser-Fenster anzuzeigenden Zeilen festlegen. Die vertikale Größe einer Zeile wird als absoluter oder relativer Wert ausgedrückt. Werte für mehrere Zeilen werden durch ein Komma getrennt. Die Zahl der Zeilen entspricht der Anzahl der Einträge, die in der durch Kommas getrennten Liste stehen.

Mit dem COLS-Attribut können Sie Zahl und Größe der im Browser-Fenster anzuzeigenden Spalten festlegen. Die Größe einer Spalte wird als absoluter oder relativer Wert ausgedrückt. Werte für mehrere Spalten werden durch ein Komma getrennt. Die Zahl der Spalten entspricht der Anzahl der Einträge, die in der durch Kommas getrennten Liste stehen.

Sie können die Spalten- und Zeilengröße für Rahmen auf drei Arten definieren:

1. Als absoluter Wert in Pixel

• Als relativer Wert in Prozent der Fenstergröße
• Als relativer Wert in der Syntax des CALS-Tabellenmodells

Die Zuweisung eines absoluten Wertes in Pixel ist zwar die einfachste Art, Spalten und Zeilen für Rahmen zu erstellen, aber überhaupt nicht gut dafür geeignet, alle Zeilen und Spalten von Rahmen zu definieren. Die Größe des Browser-Fensters kann je nach Monitormodus beträchtlich abweichen. Um das Fenster notfalls mit Leerraum zu füllen, überschreibt der Browser möglicherweise die von Ihnen für die Rahmenabstände definierten Werte. Dadurch werden die Rahmen eventuell verzerrt. Folglich sollten Sie feste relative Pixelwerte benutzen. Im folgenden Beispiel werden mit dem <FRAMESET>-Tag drei Rahmenzeilen mit festen Pixelgrößen definiert:

Relative Werte können prozentual oder proportional zur gesamten Fenstergröße ausgedrückt werden. Prozentuale Werte werden zwischen 1 und 100 und einem Prozentzeichen zugewiesen. Ergibt die Gesamtsumme aller zugewiesenen Prozentwerte mehr als 100, werden sie auf 100 abgerundet. Ergibt sich insgesamt weniger als 100, werden die relativen Größen auf 100 aufgerundet, so daß sich bei solchen Rahmen ein zusätzlicher Abstand ergibt. Im folgenden Beispiel werden mit dem <FRAMESET>-Tag zwei Rahmenspalten mit relativen Größen definiert:

Um eine relative Skalierung anzuwenden, geben Sie ein Sternchen mit oder ohne Wert ein. Ein Sternchen ohne Wert wird als Aufforderung interpretiert, den in der Zeile oder Spalte verbleibenden Platz dem Rahmen zuzuweisen. Ein Sternchen mit einem vorangestellten Wert dient zur Ermittlung, wieviel relativer Raum einem Rahmen zugewiesen wird. Ein Rahmen mit dem Wert 3* würde dreimal mehr relativen Raum erhalten als die anderen Rahmen, denen ein relativer Wert zugewiesen wurde. Im folgenden Beispiel werden mit dem <FRAMESET>-Tag zwei relativ skalierte Zeilen und zwei Zeilen mit fester Größe zugewiesen:

Die Art, wie Spalten und Zeilen von Rahmen angezeigt werden, hängt davon ab, wie Sie Spalten und Zeilen zuweisen. Durch jede Spaltenzuweisung, die Sie nach den Zeilenzuweisungen eingeben, werden die nachfolgenden Zeilen eines Rahmens in Spalten geteilt. Umgekehrt werden durch jede Zeilenzuweisung, die Sie nach den Spaltenzuweisungen eingeben, die nachfolgenden Spalten von Rahmen in Zeilen geteilt.

Indem Sie die Reihenfolge der Spalten- und Zeilenzuweisungen umdrehen, können Sie ein völlig anderes Fenster anlegen.

Erstellen einzelner Rahmen

<FRAME> ist das einzige Tag, das Sie zwischen dem öffnenden und schließenden <FRAMESET>-Tag benutzen können. Das <FRAME>-Tag wird benutzt, um die Quelle für den Rahmen zu bestimmen und dem Rahmen Merkmale zuzuweisen. Das Quelldokument oder -objekt für einen Rahmen wird mit dem optionalen SRC-Attribut definiert. Wenn Sie das SRC-Attribut nicht verwenden, wird der Rahmen im Browser-Fenster als leere Fläche angezeigt.

Die Art der Verschachtelung von Tags innerhalb des <FRAMESET>-Tags ist sehr wichtig. Das erste <FRAMESET>-Tag muß alle weiteren Zuweisungen für Rahmen enthalten. Im obigen Beispiel wurden zuerst alle Elemente der ersten Spalte, dann die Elemente der zweiten Spalte definiert. Sie sollten Elemente für Zeilen und Spalten auf die gleiche Weise definieren.

Für das <FRAME>-Tag sind wahlweise noch folgende Attribute verfügbar:

Rahmenränder

Das MARGINHEIGHT-Attribut steuert die Größe des oberen und unteren Randes von Rahmen. Die Mindestgröße für den Rahmenrand ist 1. Falls Sie einen Rand von weniger als 1 definieren, zeigt der Browser den Rahmen standardmäßig mit einem Rand an, um zu verhindern, daß sich die Rahmenkanten berühren. In diesem Fall Rahmenraenderzieht der Browser den Vorgaberand heran, der je nach Browser unterschiedlich sein kann. Folglich ist es besser, für einen Rahmen einen unteren und oberen Rand festzulegen.

Das MARGINWIDTH-Attribut steuert den linken und rechten Rand des Rahmens. Die Mindestgröße ist ebenfalls 1. Sie können MARGINHEIGHT und MARGINWIDTH wie folgt zuweisen:

Rahmen benennen und verknüpfen

Das NAME-Attribut spielt eine wichtige Rolle dabei, ob Ihre Rahmen mit anderen Rahmen und Fenstern verträglich sind. Normalerweise zielen Hypertext-Links in einem Rahmen nur auf diesen Rahmen verknuepfenRahmen ab. Das heißt, wenn ein Link in einem Rahmen aktiviert wird, wird das betreffende Dokument in den gleichen Rahmen geladen. Durch Benennen eines Rahmens können Sie sein Ausgabeziel festlegen. Um einen Rahmen zu benennen, benutzen Sie ein Schlüsselwort, das mit einem alphanumerischen Zeichen beginnt, z. B.:

Nach der Vorgabe werden Rahmen nicht benannt. Durch Benennen eines Rahmens haben Sie aber die Möglichkeit, ihn für andere Rahmen ansprechbar zu machen. Normalerweise befinden sich diese Rahmen auf der gleichen Seite. Die Seite könnte z. B. einen Hauptabschnitt namens MAIN und einen Menüabschnitt haben, der auf den Hauptrahmen verweist. Auf diese Weise wird das entsprechende Dokument in den Hauptrahmen geladen, wenn der Benutzer auf ein Hypertext-Link im Menü klickt.

Um für einen Rahmen ein Ausgabeziel zu bestimmen, benutzen Sie das Netscape-Attribut TARGET für das Anker-Tag <A>. Der dem TARGET-Attribut zugewiesene Wert ist der Name des Rahmens. Im folgenden Beispiel wird für den Rahmen namens MAIN ein Ausgabeziel bestimmt:

Mit dem <BASE>-Tag können Sie für alle in einem Dokument befindlichen Links ein Basisziel bestimmen. Auf diese Weise müssen Sie nicht für alle Links des Dokuments eigens Zielinformationen einfügen. Beachten Sie dabei, daß ein in einem Link definiertes Ziel das ursprünglich definierte Basisziel überschreibt. Wenn Sie den Großteil der Links als Ausgabeziel für einen bestimmten Rahmen und wenige Links als Ziel für andere verwenden möchten, haben Sie damit eine bequeme Möglichkeit. Sie können z. B. dem Rahmen MAIN wie folgt ein Basisziel zuweisen:

Eine interessante Verwendungsweise für ein Basisziel ist die Bestimmung eines Ausgabeziels mit einem Namen, den Sie sonst nirgendwo verwendet haben. Ist der Zielname kein Rahmen im aktiven Fenster, öffnet der Browser zusätzlich zum aktiven ein neues Fenster. Enthält das aktive Fenster zwei unbenannte Rahmen und einen Rahmen namens CENTRAL1, würde durch folgendes Basisziel ein neues Fenster geöffnet werden:

Die Attribute NAME und TARGET können auch benutzt werden, um die Beziehung des aktiven Dokuments zu anderen Dokumenten festzulegen. Derzeit sind im Standard vier Beziehungen definiert:

Die nützlichste dieser Beziehungen ist _parent. Damit können Sie den Browser zwingen, das Fenster komplett neu einzustellen, und vermeiden, daß ein Rahmendokument in den aktiven Rahmen geladen wird. Diese Beziehung eignet sich für alle Links, die zu Seiten führen, die Rahmenzuweisungen enthalten. Verweisen bestimmte Dokumente einer niedrigeren Ebene auf Ihre Home-Page, können Sie mit folgender Zuweisung vermeiden, daß ein Rahmen in einem Rahmen ausgegeben wird:

Definieren des NOFRAME-Bereichs

Mit dem <NOFRAME>-Tag können Sie einen Dokumentbereich definieren, der in Browsern angezeigt wird, die keine Rahmen unterstützen. Das Tag wird paarweise, d. h. mit einem öffnenden <NOFRAME> und einem schließenden </NOFRAME>, definiert. Zwischen dem öffnenden und schließenden Tag liegt der Bereich, der in Browsern, die keine Rahmen unterstützen, angezeigt wird. Für alle Seiten, die Rahmen enthalten, sollten Sie einen NOFRAME-Bereich definieren. Dieser NOFRAME-Bereich kann einfach die ältere Version der gleichen Seite ohne Rahmen sein.

Hier ein Beispiel eines Dokuments mit einem NOFRAME-Bereich:

Sie sehen an diesem Beispiel, daß Dokumente mit Rahmenzuweisungen anders organisiert werden als andere. Im allgemeinen haben sie keinen HEAD- und BODY-Abschnitt. Sie können aber einen Überschriftsabschnitt am Anfang des Codes einfügen, um den Titel der mit Rahmen versehenen Seite anzugeben. Außerdem können Sie für den NOFRAME-Bereich einen HEAD- und BODY-Abschnitt einfügen. Diese Abschnitte im NOFRAME-Bereich werden von Browsern benutzt, die keine Rahmen anzeigen können. Der zweite Titel im obigen Beispiel würde also nur in solchen Browsern erscheinen.

Tabellen und Rahmen zählen zu den Elementen des HTML-Standards mit der stärksten Dynamik. Rahmen sind mehr als Minifenster im Browser-Fenster. Sie bieten völlig neue Möglichkeiten im Bereich des Web-Publishing.

Clientseitige Imagemaps verwenden

Die HTML-Version 3.0 umfaßt erstmals die clientseitige Handhabung von Imagemaps und beseitigt damit das Problem vieler Web-Publisher, die keinen CGI-Zugang haben. Bei der clientseitigen Handhabung von Imagemaps erfolgt die gesamte Verarbeitung der Benutzereingaben durch den Browser. Das bedeutet, daß der Browser das Ikon lokal interpretiert und die entsprechende Aktion ausführt, wenn der Benutzer auf ein Imagemap klickt. Diese Methode ist nicht nur um ein Vielfaches schneller als die Abgabe an einen Server zur Verarbeitung, sondern entspricht auch den Zielen, im Web eine sehr effiziente Client/Server-Umgebung zu schaffen.

Um Imagemaps als Anklickpunkte zu definieren, benutzen Sie das SHAPE-Attribute des Anker-Tags <A>.

Da mit jedem Ankerelement eine bestimmte Aktion definiert wird, müssen Sie für jede über das Imagemap auszuführende Aktion ein Anker-Tag eingeben. Sie können außerdem eine Vorgabeaktion für den Fall definieren, daß der Benutzer auf Bildbereiche klickt, für die Sie keine Aktionen definiert haben. Vier Werte stehen zur Verfügung:

DEFAULT Bestimmt die Vorgabeaktion für das Imagemap. Klickt der Benutzer auf einen nicht definierten Bildbereich, führt der Browser die mit dem href-Attribut definierte Aktion aus.

Beispiel: <A SHAPE="default" HREF="URL">...</A>

CIRCLE Bestimmt einen Kreis als Anklickpunkt für das Imagemap. Definiert wird ein Mittelpunkt mit den Koordinaten x, y und Radius r. Klickt der Benutzer auf den Kreis, führt der Browser die mit dem HREF-Attribut definierte Aktion aus.

Beispiel: <A SHAPE="circle x, y, r" HREF="URL">...</A>

RECT Bestimmt ein rechteckiges Objekt als Anklickpunkt für das Imagemap. Definiert wird die obere linke Ecke mit den Koordinaten x, y sowie Breite w und Höhe h. Klickt der Benutzer auf das Rechteck, führt der Browser die mit dem HREF-Attribut definierte Aktion aus.

Beispiel: <A SHAPE="rect x, y, w, h" HREF="URL">...</A>

POLYGON Bestimmt ein vieleckiges Objekt als Anklickpunkt für das Imagemap. Definiert werden die Endpunkte durch eine Reihe von x,y-Koordinaten. Klicke der Benutzer auf das Vieleck, führt der Browser die mit dem HREF-Attribut definierte Aktion aus.

Beispiel: <A SHAPE="polygon x1, y1, x2, y2, ...xn, yn"
HREF="URL">...</A>

Das Erstellen eines clientseitigen Imagemaps ist in vielerlei Hinsicht einfacher als das eines serverseitigen. Bei clientseitigen Imagemaps müssen Sie sich keine Gedanken darüber machen, ob der Server Imagemaps unterstützt, welches Skript zu verwenden ist und wie eine Ikondatei zusammengestellt wird. Sie definieren einfach das Imagemap schrittweise. Nun folgt ein Beispiel, in das fünf GIF-Grafiken eingebunden wurden. Die Grafiken werden durch Anklicken des jeweiligen Richtungspfeils aktiviert. Klickt der Benutzer in die Mitte, erscheint eine Meldung. Listing 21.4 enthält den Code.

Abbildung 21.15: Imagemap mit anklickbaren Pfeilen, hinter denen sich Hyperlinks zu Dateien verbergen

Listing 21.4: Code für die Page von Abbildung 21.15

Aktionen für Imagemaps müssen getrennt definiert werden, weil dadurch mühelos ein alternatives Textmenü zum grafischen Menü definiert werden kann. Das Textmenü kann den Benutzern bereitgestellt werden, deren Browser nicht mit HTML 3.0 kompatibel sind, aber auch den Benutzern, die die automatische Grafikladefunktion ausgeschaltet haben. Um ein Textmenü in eine Spalte neben oder unter einem Imagemap einzufügen, geben Sie einfach den Text mit der entsprechenden Formatierung im Formelement ein.

Das <AREA>-Tag dient zum Definieren der Aktionen des Imagemaps mit vier Attributen: SDHAPE, COORDS, HREF und NOHREF. Das SHAPE-Attribut dient zum Festlegen der allgemeinen Form eines Anklickpunkts im Bild. Das COORDS-Attribut dient zum Festlegen der Koordinaten des Anklickpunkts. Mit dem HREF-Attribut wird die auszuführende Aktion definiert, wenn der Benutzer den betreffenden Bereich anklickt. Das NOHREF-Attribut wird benutzt, um festzulegen, daß keine Aktion auszuführen ist, wenn der Benutzer auf den entsprechenden Anklickpunkt wählt.

CIRCLE Bestimmt einen runden Anklickpunkt. Das COORDS-Attribut wird benutzt, um den Mittelpunkt mit den Koordinaten x, y und Radius r zu definieren. Klickt ein Benutzer auf diesen Bereich, führt der Browser die im HREF-Attribut definierte Aktion aus.

Beispiel: <AREA SHAPE="circle" COORDS="x, y, r" HREF="URL">

RECT Bestimmt eine rechteckige Form als Anklickpunkt. Das COORDS-Attribut wird benutzt, um zwei gegenüberliegende Endpunkte des Rechtecks mit den Koordinaten x1, y1 und x2, y2 zu definieren. Klickt ein Benutzer auf diesen Bereich, führt der Browser die im HREF-Attribut definierte Aktion aus.

Beispiel: <AREA SHAPE="rect" COORDS="x1,y1, x2,y2" HREF=""URL">

AREA Bestimmt ein Objekt mit drei oder mehr Seiten als Anklickpunkt. Das COORDS-Attribut wird benutzt, um die Endpunkte als Serie von x,y-Koordinaten zu definieren. Klickt ein Benutzer auf diesen Bereich, führt der Browser die im HREF-Attribut definierte Aktion aus.

Beispiel: <AREA SHAPE="area" COORDS="x1, y1, x2, y2, . . . xn, yn" HREF="URL">

Der Anklickbereich wurde in Listing 21.4 wie folgt definiert bzw. verknüpft:

Sie sehen an diesem Code deutlich, welche Attribute für SHAPE benutzt wurden, um die Bereiche zu definieren.

Mit der Definition von USEMAP (siehe Listing 21.4) wird die eigentliche Funktion des clientseitigen Imagemaps erreicht. Das Attribut bezeichnet den Namen der Referenz (in diesem Fall <MAP NAME="4WAY">).

Weiterführende Informationen

Sicherlich werden Sie während Ihrer Arbeit am Code für eine Web-Page auf Fragen stoßen, die in diesem Kapitel nicht beantwortet wurden. Fühlen Sie sich frei, einige Weiterfuehrende Informationender zahlreichen Fachleute im Internet anzusprechen. Sie wissen ja, daß das WWW rund um die Uhr geöffnet ist und daß Sie Leute in der ganzen Welt jederzeit erreichen können. Eventuell sehen Sie auch einmal bei der Newsgruppe comp.infosystems.www nach. Außerdem können Sie natürlich immer mal wieder eine Suchmaschine nach HTML, WWW und HTTP durchsuchen.