Kapitel 3

Webdesign ISBN 3-8272-6278-X

HTMLErweiterungen

Was bringt Ihnen dieses Kapitel? Dieses Kapitel zeigt Ihnen, wie Sie Ihre Website durch weitere Extras ergänzen und anwenderfreundlicher gestalten können.

Ihr Erfolgsbarometer

Das können Sie schon: Arbeitsvorbereitungen und Grundsätzliches

12

HTML

32

Das lernen Sie neu: Formulare

68

Frames

77

Meta-Angaben

81

67

Formulare Wenn Sie den Besuchern Ihrer Website statt einer einfachen E-Mail-Adresse ein ausgefeiltes Formular anbieten möchten, können Sie dies mit HTML realisieren.

Objekte für die Eingabe in Formularen Für eine ansprechende Gestaltung stehen Ihnen fünf verschiedene Objekte zur Verfügung. Im Einzelnen sind das:

• • • •

für einzeilige Eingaben das INPUT-Objekt, Typ TEXT für mehrzeilige Eingaben das TEXTAREA-Objekt zum Wählen zwischen mehreren Optionen das INPUT-Objekt, Typ RADIO zum Ankreuzen vorformulierter Auswahlpunkte das INPUT-Objekt, Typ CHECKBOX

•

zum Auswählen einer oder mehrerer Optionen aus einem Menüfeld bzw. Pulldown-Menü das SELECT-Objekt

Hinzu kommen noch die INPUT-Objekte vom Typ SUBMIT für das Absenden, vom Typ RESET für das Zurücksetzen und schließlich vom Typ HIDDEN für diverse Aufgaben, auf die ich noch zu sprechen komme. Übrigens besitzen bis auf das TEXTAREA- und das SELECT-Objekt alle diese Tags kein Ende-Tag.

Das INPUT-Objekt vom Typ TEXT In ein INPUT-Objekt vom Typ TEXT kann der Anwender einzeilige Eingaben mit einer von ihm zu bestimmenden Anzahl von Zeichen vornehmen. Der Quelltext für ein solches Objekt (Abbildung 3.1) sieht folgendermaßen aus:

Durch das Attribut TYPE="Text" wird das INPUT-Tag zu einem einzeiligen Eingabefeld. Um es später über JavaScript überprüfen zu können und damit in der E-Mail, die Sie vom Anwender erhalten, den Eingaben beigefügt ist, um welche Art Eingabe es sich handelt, bekommt das Tag einen Namen, der sich auf den Inhalt bezieht – in unserem Beispiel ist das Firma. Als Nächstes legen Sie die Anzahl der möglichen Zeichen mit MAXLENGTH="16" auf 16 fest und den voreingestellten Text mit VALUE="Firma/Name" auf Firma/ Name. Dieser Text steht bereits beim Öffnen des Formulars in dem Feld und kann vom Anwender durch die eigenen Eingaben ersetzt werden.

68

Formulare

Mit SIZE="20" legen Sie die Breite des Eingabefeldes in Zeichen fest. Diese Methode ist allerdings nicht sehr genau – mit Stylesheets stehen Ihnen zu diesem Zweck sehr viel spannendere Möglichkeiten zur Verfügung.

Abbildung 3.1: Drei Eingabefelder für einzeiligen Text

Das TEXTAREA-Objekt Für die Eingabe mehrzeiliger Texte gibt es das TEXTAREA-Objekt (Abbildung 3.2): Schreiben Sie mir doch mal!

Dieses Objekt benötigt unbedingt das Ende-Tag. Zwischen beide Tags können Sie einen Text einfügen, der in dem Feld als Voreinstellung erscheinen soll. Wie bei den einzeiligen Textfeldern wird dieser später durch den Anwender ersetzt. Die Breite des Feldes in Zeichen können Sie mit COLS, die Höhe in Zeilen mit ROWS einstellen. Auch für dieses Feld gilt aber, dass Sie solche Einstellungen mit STYLE sehr viel komfortabler bewerkstelligen können. Ein interessantes Attribut ist WRAP, für das es drei mögliche Werte gibt: OFF, SOFT und HARD. Wenn Sie als Wert OFF eingeben, wird der eingegebene Text so lange horizontal gescrollt, bis Sie (¢) drücken. Die Einstellung SOFT bewirkt, dass der Text zwar am Ende des Feldes umbricht, aber in der E-Mail, die Sie erhalten, in einer Zeile erscheint – es sei denn, der Absender hat ein Return eingefügt.

69

Wenn Sie die Einstellung HARD wählen, wird wie bei SOFT der Text für den Anwender sichtbar umgebrochen, dann aber auch tatsächlich in dieser Form an Sie verschickt. Dies ist aber nur dann sinnvoll, wenn Ihr Feld für den mehrzeiligen Text auch eine entsprechende Größe hat. Ist dieses Feld zu klein, kann es passieren, dass Ihnen der Anwender eine E-Mail schickt, in der alle Worte untereinander stehen.

Abbildung 3.2: Das Eingabefeld für mehrzeiligen Text

Das INPUT-Objekt vom Typ RADIO INPUT-Objekte vom Typ RADIO sind so genannte Optionsfelder (Abbildung

3.3). Dabei soll der Anwender zwischen mehreren Optionen nur eine auswählen können. Voraussetzung dafür, dass sich bereits aktivierte Optionsfelder wieder ausschalten, wenn ein anderes ausgewählt wird, ist aber die Benennung aller zusammengehörenden Optionsfelder mit dem gleichen Namen. Damit Sie später der E-Mail entnehmen können, welches Optionsfeld gewählt wurde, schreiben Sie ein sinnvolles Stichwort als Wert in das Attribut VALUE. Wenn Sie möchten, dass ein Optionsfeld als ausgewählt voreingestellt ist, fügen Sie noch CHECKED in das Tag. In seinem Aussehen ist dieses Feld leider nicht zu beeinflussen – Sie müssen es nehmen, wie es ist! Nur den (unsichtbaren) Rahmen können Sie über STYLE in seiner Größe verändern. Das hat zur Folge, dass die Zeilenhöhe bzw. die Abstände zu den nächsten Zeichen vor und hinter dem Objekt und damit auch der anklickbare Bereich vergrößert wird.

70

Formulare

hellblond
dunkelblond

Abbildung 3.3: Optionsfelder zum Auswählen einer Option

Das INPUT-Objekt vom Typ CHECKBOX Wenn Sie möchten, dass der Anwender aus einer Liste von Fragen einfach eine oder mehrere mit einem Häkchen beantworten kann, wie er es auch von den Formularen für das Finanzamt her kennt, verwenden Sie das INPUTObjekt vom Typ CHECKBOX (Abbildung 3.4).

Abbildung 3.4: Kontrollkästchen zum „ Ankreuzen“

Für die Beeinflussbarkeit des Aussehens dieses Eingabefeldes gilt das Gleiche wie für das Optionsfeld. Ich schreibe gerne Briefe.
Ich laufe gerne zu Fuss


71

Ich sehe gerne fern.

Das SELECT-Objekt Mit dem SELECT-Objekt (Abbildung 3.5) können Sie dem Anwender ein Auswahlmenü entweder als aufklappbares Pulldown-Menü oder als Auswahlfenster anbieten – je nach dem Wert, den Sie für SIZE eintragen. Bei einer Liste von 20 Einträgen und SIZE="5" wäre das Fenster so groß, dass 5 Einträge sichtbar würden und die restlichen 15 Einträge über einen Scrollbalken zu erreichen wären. Um ein Pulldown-Menü zu realisieren, können Sie auf SIZE ganz verzichten (Abbildung 3.6). Wenn Sie in das Tag das Attribut MULTIPLE (ohne Wert) einfügen, kann der Anwender aus der Liste mit (ª) oder (STRG) mehrere Einträge anklicken und markieren. Das gilt natürlich auch für dieses Objekt als Pulldown-Menü. HUNDEARTIGE Pinscher Schakal Hyäene Flughund Fuchsie

Abbildung 3.5: Das ist ein SELECT-Objekt, bei dem der Wert für SIZE gleich der Anzahl von Einträgen ist. Außerdem ist es auf MULTIPLE eingestellt.

72

Formulare

Abbildung 3.6: Bei diesen beiden SELECT-Objekten wurden keine SIZE-Angaben vorgenommen.

Abschicken und Zurücksetzen Damit der Anwender das fertig ausgefüllte Formular abschicken oder – je nach Bedarf – komplett zurücksetzen kann, gibt es noch die INPUT-Objekte der Typen SUBMIT und RESET (Abbildung 3.7). Diese beiden Objekte können Sie mit STYLE nach Herzenslust gestalten – zumindest für den IE!

Abbildung 3.7: SUBMIT- und RESET-Taste

73

Die Form eines Formulars Nachdem Sie nun (fast) alle Elemente kennen gelernt haben, die Sie für die Gestaltung eines Formulars benötigen, sehen Sie sich in Listing 3.1 erst einmal an, wie der Quelltext für ein solches Formular als Ganzes aussieht. Abbildung 3.8 zeigt, wie es im Browser dargestellt wird. Beispiel für Kontaktformular


Berlin Brüssel Kopenhagen London Paris Madrid Wuppertal


74

Formulare



Listing 3.1: Ein vollständiges Formular

Ein Formular beginnt mit dem Tag und endet mit dem Ende-Tag . Wenn es verschickt werden soll, benötigt es die zwei Attribute ACTION und METHOD. Damit die Eingaben, die der Anwender in Ihr Formular vorgenommen hat, gelesen und in eine E-Mail umgewandelt werden können, brauchen Sie ein so genanntes CGI-Script. Ein solches Script stellt Ihnen Ihr Provider auf seinem Server zur Verfügung. Nun müssen Sie es nicht irgendwo kopieren und in Ihrem Domäne-Ordner speichern – es genügt, wenn Sie als Wert für das Attribut ACTION den Pfad zum Speicherort des Scripts eintragen. Wie der Pfad genau aussieht, teilt Ihnen Ihr Provider in den Unterlagen mit, die Sie erhalten, wenn Sie eine Domäne mieten. Das zweite Attribut METHOD bekommt den Wert POST. Warum das so ist, hat mit der Weiterverarbeitung der Eingaben durch das CGI zu tun; dies zu erklären würde jedoch den Rahmen dieses Buches sprengen.

Als Nächstes fügen Sie zwei INPUT-Objekte vom Typ HIDDEN (versteckt) in das Formular. Diese versteckten Objekte werden vom CGI genauso behandelt wie die anderen auch, sind aber für den Anwender nicht sichtbar. Das erste HIDDEN-Objekt, das den Namen empfaenger trägt, erhält als Wert des Attributs VALUE die E-Mail-Adresse, an die der Inhalt Ihres Formulars geschickt werden soll.

75

Als Wert für das Attribut VALUE des zweiten Objekts mit dem Namen betreff können Sie einen Text festlegen, der später in der Betreffzeile der E-Mail erscheinen soll. Falls Ihre Website mehrere Formulare mit verschiedenen Inhalten enthält, ist dies überaus sinnvoll, da Sie sofort beim Erhalt überschauen können, um was für eine E-Mail es sich handelt.

Nach dieser Einleitung folgen die Felder, wie Sie sie bereits kennen gelernt haben. Sehen Sie sich dazu das Beispiel-Listing in Ruhe an, schreiben Sie es sich einmal ab und experimentieren Sie damit – Probieren geht eben über Studieren. Auf zwei Dinge möchte ich Sie noch aufmerksam machen: 1. Das Feld für den Ort wurde hier als SELECT-Objekt realisiert, das dem Anwender bereits eine Auswahl an Orten zur Verfügung stellt. 2. Damit die Buttons zum Versenden und Zurücksetzen genauso breit sind wie die Felder, wurden die Wertangaben in VALUE mit Leerzeichen ( ) aufgefüllt. Eine elegantere Methode zur Festlegung von Objektmaßen ist sicher die Verwendung von STYLE, auf die ich im Abschnitt über Stylesheets eingehen werde.

Abbildung 3.8: So sieht das Beispielformular im Browser aus.

76

Frames

Frames Was sind Frames? Mit den Tags FRAMESET und FRAME bietet HTML die Möglichkeit, das Browserfenster in mehrere Bereiche aufzuteilen und in jedem einzelnen Bereich eine andere Seite anzuzeigen. So können Sie beispielsweise in einem Frame das Menü, in einem zweiten Frame ein Untermenü und im dritten den Inhalt laden, den Sie wiederum über die Menüs steuern. Ein Frameset wird in einer gesonderten Datei gespeichert, die Sie vielleicht fr_menu.html, fr_seite.html usw. benennen – so können Sie solche Dateien später von den Dateien mit Inhalt besser unterscheiden. Wenn Sie mit Frames arbeiten, muss zuerst die Datei geladen werden, die das Frameset enthält. Dieses Frameset wiederum lädt dann automatisch die voreingestellten Dateien in die einzelnen Frames. Trotz der Vorteile von Frames, die vor allem darin liegen, dass Sie Menüs nur einmal schreiben müssen und folglich auch Korrekturen oder Erweiterungen ein Kinderspiel sind, rate ich von ihrer Verwendung ab, da dem Anwender, wenn er eine – seiner Ansicht nach komplette Seite – zu seinen Favoriten hinzufügt, bei einem zweiten Besuch oft genug z. B. das Menü fehlt. Das liegt ganz einfach daran, dass erst das entsprechende Frameset geladen werden muss, um alle Einzelteile beisammenzuhaben. Sehr viel besser ist es, wenn Sie, anstatt das Menü in einen Frame zu packen, dieses entweder jeder einzelnen Seite hinzufügen oder es – was geradezu optimal wäre – Ihren Seiten mit PHP hinzufügen. Da man jedoch in einzelnen Fällen nicht auf die Verwendung von Frames verzichten kann, sollen sie hier näher erläutert werden.

Die Form eines Framesets Um Ihr Fenster in Frames aufzuteilen, benötigen Sie ein Frameset. Schauen Sie sich erst einmal das Listing 3.2 an. Beispiel für Frameset Listing 3.2: Quelltext eines Framesets für zwei Frames

Eine Datei mit einem Frameset benötigt nur das HTML-, das HEAD- und das TITLETag. Auf das BODY-Tag können Sie verzichten, da es ja keinen eigentlichen Körper gibt – die verschiedenen BODY-Tags stehen hernach in jenen Seiten, die über das Frameset geladen werden. Das Frameset selbst hat, ähnlich wie eine Tabelle, das FRAMESET-Tag und ein Ende-Tag, zwischen denen die einzelnen Frames stehen. Wie genau das Fenster geteilt wird, entscheidet das Attribut COLS für eine horizontale Teilung in Spalten und ROWS für eine vertikale Teilung in Zeilen. Als Wert werden die Spaltenbreiten bzw. Zeilenhöhen in Pixel oder Prozent angegeben, das Sternchen dient als Platzhalter. Der Eintrag ROWS="100,*,50" teilt z. B. ein Fenster in drei waagerecht angeordnete Bereiche, wobei der obere Bereich 100 Pixel hoch, der untere 50 Pixel hoch ist und der Bereich dazwischen mit der Höhe des gesamten Browserfensters variiert. Anhand des letzten Beispiels erkennen Sie, dass Sie nicht auf die Teilung des Fensters in zwei Bereiche beschränkt sind, sondern es auch in mehrere Bereiche aufteilen können. Wie schon angedeutet, wird ein Teilbereich Frame genannt, den Sie als FRAME-Tag ohne Ende-Tag in das Frameset einfügen müssen. Attribute, die Sie auf jeden Fall angeben sollten, sind der NAME des Frames, SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING und FRAMEBORDER. Mit TARGET="[framename]" sprechen Sie später den Frame an. Mit dem Wert für SRC legen Sie fest, welche Seite beim Ausführen des Framesets in betreffenden Bereich geladen werden soll. Die Werte für MARGINWIDTH und MARGINHEIGHT legen in Pixel fest, wie weit der Abstand zwischen Fensterrand und Inhalt sein soll, mit FRAMEBORDER="yes" können Sie einen Frame mit einem Rahmen versehen. Für das Attribut SCROLLING gibt es drei mögliche Einstellungen: yes, no und auto. Letztere zeigt nur dann einen Scrollbalken an, wenn der Inhalt einer Seite über den Fensterrand hinausgeht.

78

Frames

Verschachtelte Framesets Nicht selten kommt es vor, dass Sie Frames ineinander verschachteln müssen, wie Sie der Abbildung 3.9 entnehmen können (Listing 3.3 zeigt, wie es geht).

Abbildung 3.9: Ineinander verschachtelte Frames

Listing 3.3: Quelltext zu den verschachtelten Frames

79

Sehen wir uns den Quelltext einmal genauer an: Das erste Frameset definiert drei Spalten, davon zwei Spalten mit einer Breite von 180 Pixeln und einer Spalte dazwischen mit flexibler Breite. Der erste Frame hat den Namen links und lädt die Seite seite1.html ohne Ränder, Scrollbalken, aber mit Rahmen. Der dritte Frame in der rechten Spalte sieht genauso aus, heißt aber rechts und lädt die Seite seite3.html. Für die mittlere Spalte wurde kein Frame definiert – stattdessen steht an dieser Stelle ein zweites Frameset mit zwei Zeilen, wobei die obere 100 Pixel hoch und die untere in ihrer Höhe flexibel ist. Innerhalb der Tags für dieses Frameset sind für die beiden Zeilen die entsprechenden Frames mit den Namen oben und unten definiert, welche automatisch die Seiten seite2a.html und seite2b.html laden. Während der Frame oben ebenfalls keinen Scrollbalken hat, wurde für den unteren Frame SCROLLING="yes" eingestellt, so dass der Scrollbalken auch dann angezeigt wird, wenn der Inhalt vollständig in das Fenster passt.

Auf Frames zugreifen Wenn Sie Ihre Homepage derart gestalten, dass Sie das Menü in einen anderen Frame darstellen, als dies für die Inhaltsseiten gelten soll, müssen Sie für die Verknüpfungen den Ziel-Frame definieren. Das geschieht mit dem Attribut TARGET, dessen Wert den Namen des Frames enthalten muss. Soll z. B. über eine Schaltfläche im linken Frame unseres Beispiels mit dem Namen links die Seite xyz.html im Frame unten geladen werden, sieht dieser Link folgendermaßen aus: XYZ anzeigen!

Soll die Seite xyz.html im Frame angezeigt werden, in welchem sich derzeit noch die Schaltfläche befindet, genügt es, wenn Sie TARGET einfach weglassen. Wenn Sie das Frameset und damit die Aufteilung des Browserfensters aufheben wollen, verwenden Sie TARGET="_parent". Wenn ein bereits aufgeteiltes Fenster ein zweites Mal geteilt wurde und sie alle Aufteilungen aufheben möchten, verwenden Sie TARGET="_top". Die Inhalte mehrerer Frames gleichzeitig können Sie leider nur mit JavaScript ändern.

80

Meta-Angaben

Meta-Angaben Meta-Angaben werden in den Kopf unmittelbar hinter den abschließenden TITLE-Tag geschrieben. Unter anderem enthalten sie Begriffe, die festlegen, ob Ihre Seite in einer Suchmaschine gefunden wird, wenn ein Anwender nach einem dieser Begriffe sucht – so war das zumindest angedacht! In der Praxis sieht es aber so aus, dass die meisten Suchmaschinen redaktionell betreut werden. Ob und wie Ihre Seite gefunden wird, ist daher nur mäßig zu beeinflussen und hängt im Wesentlichen von der Entscheidung der jeweiligen Redakteure ab. Zwar füge ich in meine Seiten ein paar dieser (immer noch nicht standardisierten) META-Tags ein, melde den URL (Uniform Resource Locator) aber auf jeden Fall höchst offiziell in den einzelnen Suchmaschinen an. Wenn Sie Ihren URL ebenfalls anmelden wollen, bringen Sie etwas Geduld mit, da die redaktionelle Betreuung durch das hohe Aufkommen von Anmeldungen oft lange Wartezeiten zur Folge hat – es kann durchaus vorkommen, dass Sie schon gar nicht mehr daran denken, wenn Sie eine E-Mail mit der Anmeldebestätigung erhalten. Immerhin besuchen die Betreiber einiger großer Suchmaschinen Ihre Site und schauen sie sich vor Aufnahme in ihrer Suchmaschine an. META-Tags haben kein Ende-Tag. In Listing 3.4 sehen Sie die Meta-Angaben

für die Beispielseite TyrannoSaurusRex. TyrannosaurusRex auf Briefmarken

81

Listing 3.4: Meta-Angaben für TSR

Die Tabelle zeigt die wichtigsten META-Tags und ihre Bedeutung.

82

Meta-Tag

Bedeutung

HTTP-EQUIV="Content-Type"

Meta-Angabe für den Browser. Sie helfen dem Browser, den Zeichensatz Ihrer Seite korrekter zu interpretieren.

HTTP-EQUIV="Content-ScriptType"

Meta-Angabe für den Browser. Sie teilt dem Browser mit, welche Scriptsprache in der Datei verwendet wird.

HTTP-EQUIV="Content-StyleType"

Meta-Angabe für den Browser. Sie teilt dem Browser mit, welche Art von Stylesheets in der Datei verwendet wird.

NAME="description"

Meta-Angabe für Suchmaschinen. Hier können Sie einen Beschreibungstext eingeben.

NAME="author"

Meta-Angabe für Suchmaschinen. Hier können Sie den Namen des Autors angeben.

NAME="keywords"

Meta-Angabe für Suchmaschinen. Hier fügen Sie, durch Komma getrennt, Ihre Suchbegriffe ein.

NAME="robots"

Meta-Angabe für Suchmaschinen. Mit dem Wert INDEX für CONTENT erlauben Sie der Suchmaschine, Ihre Seiten zu besuchen und sie in deren Suchdatenbank aufzunehmen. Der Wert NOINDEX oder NONE verbietet die Aufnahme in der Bank.

Meta-Angaben

Meta-Tag

Bedeutung

NAME="date"

Meta-Angabe für Suchmaschinen. Hier können Sie das Datum angeben, zu dem Sie Ihre Seiten hochgeladen haben.

NAME="Content-Language"

Meta-Angabe für Suchmaschinen. Sie gibt Auskunft über die Sprache des Inhalts Ihrer Seiten.

NAME="revisit-after"

Meta-Angabe für Suchmaschinen. Sie teilt Suchrobotern mit, wann sie wieder vorbeikommen und die Datei neu einlesen sollen.

Tabelle 3.1: META-Tags und ihre Bedeutung

In diesem Kapitel haben Sie gelernt, wie Sie Ihre Website durch Einfügen von Formularen und Meta-Tags aufwerten und durch den Einsatz von Frames übersichtlicher organisieren können.

83