Jürgen Bayer

HTML 4

Inhaltsverzeichnis 1

Grundlagen

1

1.1

Was ist HTML?

1

1.2

HTML-Referenzen

1

1.3

Der HTML-Standard und browserspezifische Erweiterungen

2

1.4

Wohlgeformte Dokumente

2

1.5

Elemente, Tags und Attribute

3

1.5.1

Tag-Attribute

4

1.5.2

Boolesche Attribute

4

1.5.3

Tags kombinieren

5

1.5.4

Veraltete Tags und Attribute

5

1.5.5

Der Name und die ID von HTML-Elementen

5

1.6

Die Grundstruktur eines HTML-Dokuments

6

1.6.1

Der Grundaufbau

6

1.6.2

Das body-Tag

6

2

HTML-Dokumente gestalten

7

2.1

HTML-Kommentare

7

2.2

Meta-Tags

7

2.2.1

Wichtige Meta-Tags für Suchmaschinen

8

2.2.2

Wichtige HTTP-Header-Meta-Tags

8

2.3

Farben

10

2.4

Texte in HTML-Dokumenten

11

2.4.1

Zeichensätze: Umlaute, das scharfe s und andere Sonderzeichen

11

2.4.2

Sonderzeichen und ISO-10646-Zeichen

12

2.4.3

Leerzeichen und Zeilenumbrüche im Quelltext

13

2.4.4

Mehrere Leerzeichen

14

2.4.5

Umbruchsteuerung

14

2.5

Textformatierungen

16

2.6

Zielangaben

19

2.7

Grafiken

20

2.8

Imagemaps

20

2.9

Anker und Verweise (Links)

22

2.9.1

Anker

22

2.9.2

Verweise

22

2.9.3

Verweise auf andere Dienste

2.10

Auflistungen, Aufzählungen und Definitionslisten

24 24

2.10.1

Auflistungen

25

2.10.2

Aufzählungen

25

2.10.3

Verschachtelte Listen

26

2.10.4

Definitionslisten

27

2.11

Rahmen

28

2.12

Tabellen

29

2.12.1

Unsichtbare Tabellen für Design-Tricks

30

2.12.2

Die Breite und Höhe der Tabelle und der Spalten

31

2.12.3

Mehrspaltige Zellen

33

2.12.4

Mehrzeilige Zellen

33

2.12.5

Ausrichtung des Textes

34

2.12.6

Tipps und Tricks

35

2.12.7

Tabellenbereiche

36

2.13

Layer

37

2.13.1

span und div

38

2.13.2

Layer im Netcape 4

39

2.13.3

Einsatzgebiete von Layern

40

2.13.4

Layer, die im Internet Explorer, im Netscape 4 und im Netscape 6 funktionieren 41

3

Formulare und Steuerelemente

43

3.1

HTML-Formulare

43

3.2

Steuerelemente (Eingabeelemente)

45

3.2.1

Die Tabulatorreihenfolge

45

3.2.2

Schreibgeschützte und deaktivierte Steuerelemente

45

3.2.3

Einzeilige Textfelder

46

3.2.4

Passwort-Textfelder

46

3.2.5

Dateiauswahl-Textfelder

47

3.2.6

Mehrzeilige Textfelder

47

3.2.7

Listenfelder

48

3.2.8

Optionbuttons

49

3.2.9

Checkboxen

51

3.2.10

Schalter

51

3.2.11

Versteckte Felder

53

4

Framesets

53

4.1

Einfache Framesets

53

4.2

Verweise in Frames

57

4.2.1

Verweise über das a-Tag

57

4.2.2

Formulare in Frames

57

4.3

Rahmen, Ränder und Rollbalken

58

4.4

Besonderheiten

59

4.4.1

noframes

59

4.4.2

body und frameset

59

4.4.3

script- und object-Tags

59

5

Inline-Frames

5.1.1

6

Dynamisches Nachladen der Dokumente

Index

60 61

62

Ein Internetprogrammierer muss HTML kennen. Zwar erlauben HTML-Editoren wie Macromedia Dreamweaver, Adobe Go Live oder Microsoft FrontPage das Erzeugen auch komplexer Websites, ohne dass Sie eine einzige Zeile Quelltext schreiben. Spätestens aber, wenn Sie mit JavaScript auf der Clientseite oder mit ASP auf der Serverseite Programme entwickeln (die normalerweise HTMLQuellcode erzeugen), werden Sie grundsätzliche HTML-Kenntnisse benötigen. In ASP.NET ist HTML-Wissen zwar eigentlich nicht mehr ganz so wichtig, weil Sie die Oberfläche der Anwendung normalerweise über spezielle Steuerelemente erzeugen. In einigen Situationen und speziell, wenn Sie mit JavaScript und DHTML in HTML-Dokumenten besondere Effekte wie beispielsweise Menüs, Layer oder dynamisch veränderte Texte erzeugen wollen, müssen Sie auch in ASP.NET in den HTML-Quellcode der Seiten eingreifen. Dieser Artikel beschreibt lediglich die Grundlagen von HTML. Der separate Artikel HTML-Referenz beschreibt die für die einzelnen Tags verfügbaren Attribute.

HTML (Hypertext Markup Language) ist eine standardisierte Sprache zur Beschreibung von Dokumenten. Der aktuelle Standard 4.01 ist über das »World Wide Web Consortium« (W3C) im Dokument »HTML 4.01 Specification« definiert (www.w3.org/TR/REC-html40). Das W3C entwickelt Standards, Richtlinien, Software und Hilfsmittel für die Kommunikation zwischen Systemen. Die vom W3C empfohlenen Standards werden mittlerweile von den meisten Herstellern von Internetanwendungen berücksichtigt. HTML enthält keine Elemente, die eine Programmierung erlauben, sondern beschreibt lediglich den Inhalt und die Formatierung von Dokumenten. Ein reines HTML-Dokument (ohne CSS, DHTML und JavaScript) ist vergleichbar mit einem einfachen Word-Dokument. Es enthält Texte, Verweise (Links) zu anderen Dokumenten, Bilder und andere multimediale Daten. Solche Dokumente kennen Sie ja wahrscheinlich bereits vom Surfen im Internet. Die Formatierung und das Einbinden von Verweisen und Bildern erfolgt über HTML-Tags, auf die ich weiter unten eingehe. Zuvor zeige ich erst einmal, wo Sie gute HTML-Referenzen finden, welche Programme Sie zur Erzeugung von HTMLDokumenten einsetzen können, und schreibe ein wenig über browserspezifische HTMLErweiterungen.

HTML wird in diesem Artikel nicht umfassend erläutert, da für die Internetprogrammierung Grundlagen ausreichen. Ich beschreibe hier also nur die wichtigsten Tags und Attribute. In der Referenz finden Sie allerdings eine umfassendere Übersicht. Wenn Sie sich näher mit HTML beschäftigen wollen, empfehle ich Ihnen SelfHTML, das beste (deutsche) Online-HTML-Buch, das es gibt. SelfHTML finden Sie im Internet auf der Seite selfhtml.teamone.de. Eine ebenfalls sehr gute Online-Referenz ist die der »Web Design Group« (www.htmlhelp.com/reference/html40/). Hier finden Sie vor allen Dingen umfassende und übersichtliche Kurzreferenzen zu den einzelnen Tags. Natürlich können Sie auch den offizielle HTML-Standard des W3C verwenden. Die Referenz der Web Design Group ist aber wesentlich übersichtlicher aufgebaut und leichter zu lesen als die offizielle und enthält zusätzliche Hinweise zu Features, die nur von bestimmten Browsern unterstützt werden. Die offizielle Referenz enthält dafür Hinweise zu Elementen, die nicht mehr eingesetzt werden sollten, da sie mittlerweile durch anderen Features ersetzt wurden. Eine Beschreibung der Netscape-Tags finden Sie über die Seite devedge.netscape.com/library/xref/2001/html-element. Die HTML-Referenz

Grundlagen 1

von Microsoft finden Sie auf der msdn.microsoft.com/workshop/author/html/reference/elements.asp.

!

Seite

"#

$ Das Dokument »HTML 4.01 Specification« des W3C beschreibt den HTML-Standard, nach dem sich alle Programme, die mit HTML arbeiten, richten sollten. Der Browserkrieg der vorherigen Jahre (hauptsächlich ausgetragen von Netscape und Microsoft) führte jedoch dazu, dass die verschiedenen Browser-Hersteller sich nur unzureichend absprachen und einen eigenen Quasi-Standard entwickelten. Sie können nicht davon ausgehen, dass ein Browser alle Tags unterstützt. Dazu gehört zum Beispiel die Möglichkeit, Text in Tabellen an einem bestimmten Zeichen (normalerweise dem Komma) auszurichten. In der HTML-Referenz der Web Design Group (www.htmlhelp.com/reference/html40/) finden Sie bei diesen Features eine entsprechende Anmerkung (»... poorly supported by browsers ...«). Wohl als Ersatz dafür, dass der Standard häufig nicht komplett unterstützt wird, erweitern einige Browser (wie der Internet Explorer und der Netscape) den HTML-Standard um eigene Tags und Attribute, die natürlich nicht von anderen Browsern verstanden werden. Ein Beispiel dafür sind die nicht zum Standard gehörenden Attribute topmargin und leftmargin des body-Tag, die beim Internet Explorer die Randbreiten des HTML-Dokuments bestimmen. Der Netscape-Browser kann mit diesen Attributen nichts anfangen, kennt aber die Attribute marginheight und marginwidth, die dasselbe bewirken. Besonders übel verhält sich der Netscape 4.x, wenn es um die in grafisch aufwändigen HTML-Dokumenten verwendeten Layer (rechteckige Container für andere HTMLElemente) geht. Er versteht das dazu verwendete div-Tag nur unzureichend, kennt dafür aber ein besser funktionierendes layer-Tag. Wenn Sie mit browserspezifischen Erweiterungen arbeiten, ist es natürlich nicht einfach, alle gängigen Browser mit einzubeziehen. Wenn Sie jedoch nur einige Browser als Standard für Ihre Dokumente ansehen (was besonders bei der Entwicklung von Intranet-Webs der Fall sein kann), können Sie einfach die spezifischen Tags und Attribute für diese Browser in Ihr Dokument integrieren. Da Browser unbekannte Tags bzw. Attribute einfach ignorieren, stellt diese Vorgehensweise in den meisten Fällen kein Problem dar. Wenn Sie in einem HTML-Dokument z. B. für den Internet Explorer und für den Netscape die Randbreite angeben wollen, verwenden Sie das body-Tag z. B. wie folgt:

Browser, die diese Attribute nicht verstehen, werden dann einfach die Standardwerte verwenden. Wenn Sie browserspezifische Tags und Attribute bisher noch nicht kannten, verstehen Sie jetzt, warum auf manchen HTML-Seiten der Hinweis »Optimiert für Netscape« bzw. »Optimiert für den Internet Explorer« angebracht ist.

%

#

&

'&

Der kommende HTML-Standard XHTML, der auf XML basiert, schreibt so genannte wohlgeformte Dokumente vor (vgl. www.w3.org/TR/xhtml1). Das liegt alleine daran, dass diese Vorschrift schon bei XML existiert. Obwohl XHTML erst in Zukunft von den gängigen Browsern unterstützt wird, sollten Sie Ihre HTML-Dokumente schon jetzt wohlgeformt gestalten. Dann ist die Konvertierung nach XHTML kein Problem. Ein wohlgeformtes XHTML-Dokument muss einige Regeln einhalten. Ich beschreibe diese hier kurz, gehe aber in den Abschnitten zu den einzelnen Themen immer wieder auf wohlgeformte Dokumente ein.

Grundlagen 2

•

das Wurzelelement muss html sein,

html-Starttag muss im xmlns-Attribut • das http://www.w3.org/1999/xhtml angeben,

den

XHTML-Namensraum

• Über dem html-Starttag muss eine doctype-Deklaration eingerichtet werden, die den DTD (Document Definition Type) des Dokuments angibt. Möglich ist einer der folgenden drei Deklarationen:

•

HTML-Elemente dürfen nicht überlappend geschachtelt werden. Falsch wäre z. B: Das ist ein Absatz, richtig wäre Das ist ein Absatz,

•

HTML-Elemente müssen immer mit einem Ende-Tag abgeschlossen werden,

•

Die Werte von Attributen müssen in Anführungszeichen eingeschlossen werden,

• Für boolesche Attribute muss der Name des Attributs als Wert wiederholt angegeben werden (Beispiel: ), • Für leere Elemente muss entweder das Ende-Tag angegeben werden, oder Sie verwenden eine Kurzform, bei der dem Starttag ein Schrägstrich angehängt wird (Beispiel:
).

( $ &

)

*

HTML-Dokumente bestehen aus reinem Text und/oder HTML-Elementen. Ein HTML-Element besteht aus einem Start-Tag, einem optionalen Inhalt und einem Ende-Tag. Tags sorgen für eine Formatierung des Element-Inhalts, für das Einbinden von Grafiken, für das Erzeugen von Verweisen (Links) und anderes. Das Start-Tag besteht immer aus umschließenden spitzen Klammern, dem TagBezeichner und optionalen Attributen. Das Ende-Tag sieht prinzipiell aus wie das Start-Tag, nur dass er keine Attribute besitzt und dass dem Tagbezeichner ein Slash vorangestellt wird. Das b-Tag, das für eine fette Auszeichnung des ElementInhalts steht, wird z. B. mit begonnen und mit abgeschlossen. Daran erkennt der Browser, welcher Text fett dargestellt werden soll und welcher nicht: Fetter TextNormaler Text

In diesem Beispiel ist »Fetter Text« ein HTML-Element und »Normaler Text« reiner Text. Einige wenige Tags, wie z. B. das br-Tag (Zeilenumbruch), werden allerdings in HTML 4 nicht abgeschlossen, weil sie keinen Inhalt besitzen: Das ist Zeile 1
Das ist Zeile 2


Einige Tags, die normalerweise abgeschlossen werden müssen, können oft auch ohne abschließendes Tag verwendet werden. Sehr häufig wird dies z. B. beim p-Tag (Absatz) angewendet. Um wohlgeformte Dokumente zu erzeugen, sollten Sie diese Tags jedoch auch abschließen.

Grundlagen 3

(

*

Viele Tags können Sie mit Attributen feineinstellen. Einige Tags, wie z. B. , machen sogar nur Sinn, wenn Attribute verwendet werden. Betrachten Sie ein HTML-Element (also das Tag und den Inhalt) als Objekt (genau das macht DHTML), sind die Attribute Eigenschaften des Objekts. Für das font-Tag können Sie z. B. immer die Attribute color, face und size einstellen (der NetscapeBrowser erlaubt zudem das Attribut point-size). Attribute werden mit Leerzeichen getrennt im Start-Tag angegeben. Nach dem Namen des Attributs folgen der Zuweisungsoperator (=) und der Wert, der dem Attribut zugewiesen werden soll. Der Wert sollte immer in Anführungszeichen eingefügt werden. Die aktuellen Browser lassen Wertzuweisungen zwar auch ohne Anführungszeichen zu, wenn der Wert nur Zahlen, Buchstaben und/oder den Unterstrich enthält. Für wohlgeformte Dokumente sind Anführungszeichen jedoch vorgeschrieben. Mehrere Attribute werden einfach durch Leerzeichen getrennt. Das folgende Beispiel verwendet alle Attribute des font-Tag zur Einstellung der Schriftart: Das ist roter Text in Arial 12.

(

+

"# *

Einige Attribute speichern boolesche Werte (True, False). Diese Attribute können Sie ein- oder abschalten. Das selected-Attribut eines Eintrags in einem Listenfeld spezifiziert beispielsweise, ob der Eintrag vorausgewählt ist: Ford Puma Porsche 911

Sind boolesche Attribute nicht angegeben, ist das Attribut als abgeschaltet definiert (False). Wenn Sie ein boolesches Attribut einschalten wollen, sollten Sie wie im obigen Beispiel als Wert den Namen des Attributs eintragen. Dann entspricht der Quellcode einem wohlgeformten Dokument. In HTML 4 können Sie alternativ auch nur den Attributnamen schreiben (diese Form wird als »Minimized Boolean« bezeichnet):

Beachten Sie, dass Ihr Dokument dann aber nicht mehr wohlgeformt ist.

Grundlagen 4

(

'&

Sie können verschiedene Tags miteinander kombinieren. Wenn Sie z. B. einen Text fett, kursiv und mit der Schriftgröße 12 formatieren wollen, verwenden Sie eine Kombination von b-, i- und fontTags: Das ist fetter, kursiver, roter Text in Arial 12.

Zur Erzeugung wohlgeformter Dokumente sollten Sie geschachtelte Tags in der logischen Reihenfolge wieder schließen, so wie im Beispiel gezeigt. Würden Sie das b-Tag im Quelltext oben z. B. vor dem i-Tag schließen, wäre das Dokument nicht mehr wohlgeformt.

(%

,

*

Einige Tags und Attribute sind mittlerweile durch neuere Features ersetzt worden. Dazu gehört z. B. das font-Tag, über das Sie die Schriftart eines Textes festlegen können: Statt sollten Sie (bei diesem Beispiel) besser die Schriftart-Stile der Cascading Style Sheets verwenden. Veraltete Tags und Attribute werden von den gängigen Browsern wahrscheinlich noch einige Jahre unterstützt, weil in absehbarer Zeit wohl nur ein kleiner Teil der Websites im Internet auf die neuen Features umgestellt wird. Sie sollten in Ihren HTML-Dokumenten aber trotzdem immer die neuen Features einsetzen, damit Ihre Websites auch noch in zehn Jahren funktionieren. Im Artikel habe ich bei veralteten Tags und Attributen eine entsprechende Anmerkung angebracht.

((

- &

. /

$ &

Wenn Sie in JavaScript- oder ASP-Programmen auf HTML-Elemente zugreifen wollen (egal ob client- oder serverseitig), müssen Sie diese Elemente benennen. Und dazu stehen Ihnen gleich zwei Möglichkeiten zur Verfügung: das name- und das id-Attribut. name ist eigentlich veraltet und in HTML 4.0 durch id ersetzt. Leider gehen die verschiedenen Browser ganz unterschiedlich mit diesen beiden Attributen um. Wenn Sie nur das id-Attribut zur Benennung verwenden, können Sie nicht davon ausgehen, dass Ihre HTML-Dokumente in allen Browsern funktionieren (was besonders dann gilt, wenn Sie intensiv mit DHTML und CSS arbeiten). Die umfangreichen Diskussionen über dieses Thema in den JavaScript-Newsgroups bestätigen die Verwirrung um diese Attribute. Befolgen Sie idealerweise den folgenden dringenden1 Hinweis, damit Sie sich nicht selbst verwirren (so wie ich bei der Recherche dieses Themas ...): Benennen Sie ein HTML-Element grundsätzlich immer (oder wenigstens für die nächsten Jahre) mit id und name (so wie es in vielen HTML-Quelltexten zu sehen ist). Die Wahrscheinlichkeit, dass Ihr Quelltext funktioniert (und das noch in verschiedenen Browsern!), wird damit nicht unwesentlich erhöht. Die gleichzeitige Verwendung von id und name ist kein Problem: 1

Dringend deswegen, damit Sie nicht stundenlang suchen müssen um herauszufinden, warum der Netscape 4 beim Zugriff auf ein über id benanntes HTML-Element in JavaScript immer wieder den Fehler »xyz has no properties« meldet (wie dieser alte Browser eben das name-Attribut für die interne Bennenung verwendet).

Grundlagen 5

0

'

'&

0 Eine HTML-Seite besitzt immer den folgenden Grundaufbau: Titel der Seite ...

Am html-Tag erkennt der Browser, dass es sich um eine HTML-Datei handelt. Sie werden sich vielleicht wundern, dass dieses Tag notwendig ist, aber Browser können auch noch andere Dateien wie einfache Textdateien darstellen, die dann nicht nach dem HTML-Standard interpretiert werden. definiert den Kopfbereich der Seite und enthält zunächst nur das title-Tag, das den Titel der Seite definiert. Dieser erscheint in der Titelleiste des Webbrowsers. Im head-Tag werden aber häufig auch Script-Programme untergebracht, um diese vom eigentlichen Inhalt des Dokuments zu trennen. Den eigentlichen Inhalt finden Sie dann im body-Tag.

0

1

Das body-Tag definiert den Körper der HTML-Seite. Alles, was zwischen und steht, wird im Browser als das eigentliche Dokument angezeigt. In den Attributen dieses Tags können Sie die grundsätzliche Ansicht der Seite steuern. Diese Attribute sind aber mittlerweile durch Stile der Cascading Style Sheets ersetzt. Ein wichtiges Attribut ist bgcolor, das die Hintergrundfarbe des Dokuments definiert. Interessant sind auch die Attribute text, link, alink und vlink, die die Farben des normalen Textes und die von Verweisen im Dokument definieren. link definiert die Farbe eines normalen (nicht aktivierten und nicht besuchten) Verweises, alink (activated Link) die eines aktiven Verweises (der den Eingabefokus besitzt) und vlink (visited Link) die eines vom Anwender bereits besuchten Verweises. Beachten Sie aber, dass Sie dazu auch Stile der Cascading Style Sheets einsetzen können.

Grundlagen 6

'& 2 && HTML-Kommentare sind spezielle Inhalte des Dokuments, die (wie üblich) nicht als Quelltext angesehen und folglich vom Browser ignoriert werden. Kommentare fügen Sie in die Zeichenketten ein:

Mehrzeilige Kommentare sind kein Problem:

Meta-Tags werden im Kopfbereich der Seite angebracht und definieren zusätzliche Information, die nicht als Dokument ausgewertet werden. Meta-Daten sind einerseits allgemeine Informationen, wie beispielsweise Angaben über den Autor des Dokuments, das Copyright und das Programm, mit dem das Dokument erzeugt wurde. Andere Meta-Tags übergeben dem Browser spezielle Informationen, wie z. B., dass dieser nach einer angegebenen Zeitspanne ein anderes Dokument anzeigen soll. Wieder andere Meta-Tags werden von Suchmaschinen wie Google oder Altavista ausgewertet, um das Dokument zu indizieren. HTML definiert zwei Arten von Meta-Tags: Meta-Tags, die über das name-Attribut benannt werden, und solche, bei denen das Attribut http-equiv angegeben ist. Bei beiden Arten werden die zu übergebenden Informationen im content-Attribut angegeben. Meta-Tags mit dem name-Attribut definieren einfache Informationen, die beispielsweise von Suchmaschinen ausgewertet werden. Die folgenden Meta-Tags geben z. B. den Autor eines Dokuments und eine Beschreibung an:

Meta-Tags mit dem Attribut http-equiv sind so etwas wie HTTP-Headerinformationen im Dokument. Der Header einer HTTP-Antwort enthält eine Statusmeldung und zusätzliche Informationen für den Browser in standardisierten HTTP-Feldern. Meta-Tags mit dem Attribut httpequiv werden vom Browser wie Felder des HTTP-Header ausgewertet. Über diese Tags sind einige »Tricks« möglich. So können Sie beispielsweise eine automatische Umleitung nach fünf Sekunden zur Seite www.boarderweek.de erreichen:

Der Browser wertet diese Angabe aus und ruft nach der angegebenen Anzahl Sekunden das neue Dokument auf.

HTML-Dokumente gestalten 7

"#

3

"#&

"#

Suchmaschinen werten zur Indizierung eines Dokuments die folgenden über das name-Attribut benannten Meta-Tags aus: •

Author: Dieses Tag gibt den Autor des Dokuments an.

• Description: Die hier angegebene Beschreibung der Seite wird von vielen Suchmaschinen im Ergebnis einer Suche als Kurzbeschreibung der Seite angezeigt. Fehlt dieses Tag, verwendet die Suchmaschine die ersten Zeilen des Dokuments, was u. U. eine nicht optimale Wirkung auf den Anwender erzielt. • Keywords: In diesem Meta-Tag geben Sie einzelne Schlüsselwörter an, die als Suchbegriff gewertet werden sollen. Suchmaschinen durchsuchen zwar das gesamte Dokument nach Wörtern, die zu indizieren sind. Sie können in diesem Meta-Tag aber auch Schlüsselwörter angeben, die nicht im Dokument vorkommen, oder bestimmte Schlüsselwörter besonders hervorheben. Beachten Sie, dass die meisten Suchmaschinen Groß- und Kleinschreibung unterscheiden. Sie sollten die Schlüsselwörter also mindestens einmal in Kleinschrift eingeben, da Benutzer meistens auch kleine Buchstaben bei der Suche verwenden. • Robots: Über dieses Meta-Tag können Sie definieren, ob und wie Suchmaschinen das Dokument auswerten. Sie können einen oder mehrere der folgenden Werte einstellen: • all: Erlaubt der Suchmaschine alle Dokumente zu indizieren, auch die verknüpften (die in Verweisen angegeben sind), •

none: Verbietet die Indizierung,

•

index: Erlaubt die Indizierung der Seite selbst,

•

noindex: Verbietet die Indizierung der Seite selbst,

•

follow: Erlaubt die Indizierung der verknüpften Dokumente,

•

nofollow: Verbietet die Indizierung verknüpfter Dokumente.

Weitere Informationen zum Entwurf von HTML-Dokumenten für die optimale Indizierung durch Suchmaschinen finden Sie an der Adresse builder.cnet.com/webbuilding/pages/Authoring/Metadata.

"#

4

Der Browser wertet einige über das http-equiv-Attribut benannte Metadaten aus. Eine vollständige Übersicht dieser Tags würde den Rahmen des Artikels sprengen. Die folgende Auflistung zeigt die wichtigsten: • Content-Type: Definiert den MIME–Typ des Dokuments und den zu verwendenden Zeichensatz. Ein typisches Beispiel für HTML-Dokumente ist:

• Expires: Teilt dem Browser mit, ob und wann ein Dokument ungültig wird. Dazu geben Sie das Datum mit Zeit im GMT-Format an (RFC 850). Der Browser sollte das Dokument nicht aus seinem Cache lesen, sondern nachladen, wenn der Benutzer dieses erneut anfordert und das Verfallsdatum erreicht ist. In ASP und ASP.NET können Sie allerdings stattdessen die Expires- oder ExpiresAbsolute-Eigenschaft des Response-Objekts bzw. ein HttpCachePolicy-Objekt verwenden, um eine Verfallszeit einzustellen. Die Angabe 0 bewirkt, dass das Dokument bei einer erneuten Anforderung grundsätzlich nie aus dem Cache gelesen wird. Sie sollten beachten, dass die Zurück-Funktion des Internet Explorers und des Netscape trotzdem das zwischengespeicherte

HTML-Dokumente gestalten 8

Dokument verwendet, auch wenn das Verfallsdatum überschritten ist. Das folgende Beispiel setzt das Verfallsdatum auf den 2.3.2002 20:00:00:

• Pragma: Über das Pragma-Meta-Tag können Sie das Caching im Browser abschalten, indem Sie den Wert "no-cache" angeben. Bei dynamisch erzeugten HTML-Dokumenten ist das Browser-Caching häufig ein Problem. Wenn der Anwender ein Dokument erneut anfordert, das er in der aktuellen Sitzung bereits zuvor geladen hatte, ruft der Browser das Dokument normalerweise nicht erneut ab, wenn er es in seinem Cache findet und das Dokument nicht abgelaufen ist (vgl. das Meta-Tag Expires). Mit dem Pragma-Tag vermeiden Sie dieses Problem (das Sie auch über ein sofortiges Verfallsdatum lösen können). Beachten Sie, dass der Browser Dokumente trotz dieses Meta-Tags für die Zurück-Funktion temporär zwischenspeichert. Die Zurück-Funktion verwendet also immer das zwischengespeicherte Dokument. Der Internet Explorer 5 wertet dieses Tag erst gar nicht aus, die Version 5.5 hat Probleme damit, sodass Dokumente trotzdem u. U. gecacht werden (vergleichen Sie den Knowledgebase-Artikel Q222064, den Sie finden, wenn Sie nach dieser Nummer bei search.microsoft.com suchen). • Refresh: Teilt dem Browser mit, dass das Dokument nach einer angegebenen Anzahl Sekunden neu geladen werden soll oder dass der Browser dann ein neues Dokument laden soll. Für ein Nachladen des Dokuments selbst geben Sie nur eine Zeit an. Das folgende Beispiel sorgt dafür, dass das Dokument alle fünf Sekunden neu geladen wird:

Damit können Sie auf einfache Weise erreichen, dass ein Dokument, dessen Basisdaten sich permanent ändern (und das natürlich über ASP oder ASP.NET dynamisch erzeugt wird), beim Anwender immer in der relativ aktuellen Version angezeigt wird. Soll ein anderes Dokument geladen werden, geben Sie die Minuten und, durch ";url=" getrennt, die URL des anderen Dokuments an:

• Set-Cookie: Teilt dem Browser mit, dass er ein Cookie speichern soll. Ein Cookie ist eine Informationseinheit, die ein HTML-Dokument auf dem Rechner des Anwenders ablegen kann und die im HTTP-Header zum Webserver zurückgesendet wird, wenn der Anwender dieses Dokument noch einmal abruft. Cookies erlauben das persistente Speichern von Daten in einer Internetanwendung und werden häufig verwendet, um den Anwender zu identifizieren. Im Inhalt des Meta-Tag geben Sie im Cookie-Attribut cookievalue den Wert des Cookie und im Cookie-Attribut expires das Verfallsdatum an. Das Attribut path kann verwendet werden, um zu erreichen, dass das Cookie vom Webserver auch dann gesendet wird, wenn der Browser Dokumente aus anderen Ordnern als dem ursprünglichen Ordner des Dokuments abruft. Das folgende Beispiel setzt das Datum des letzten Besuchs in einem Cookie. Als (programmintern verwendeter) Cookie-Name wird der Text LastVisit als Präfix im Cookiewert angegeben:

Cookies können Sie in ASP und ASP.NET sehr einfach über die Cookies-Eigenschaft des Response- und des Request-Objekts verwalten. Auf der Seite vancouver-webpages.com/meta finden Sie eine Referenz der verschiedenen Meta-Tags.

HTML-Dokumente gestalten 9

5 Farben werden in HTML (wie in den meisten Programmiersprachen auch) in Form von 32-BitIntegerwerten angegeben, wobei allerdings nur die ersten drei Byte verwendet werden. Der Wert des dritten Byte definiert den Rotanteil, der Wert des zweiten Byte den Grünanteil und der des ersten Byte den Blauanteil der Farbe. Ein solcher Farbwert wird deswegen auch als RGB-Wert bezeichnet. Die meisten Programmierer verwenden die leicht lesbare hexadezimale Schreibweise zur Angabe von Farbwerten. Die hexadezimale Schreibweise beginnt in HTML mit einem »#« gefolgt von den Werten der einzelnen Bytes. Wie im hexadezimalen Zahlensystem üblich reichen die Werte der einzelnen Bytes von 00 (0) bis FF (255). Knallrot (meine Lieblingsfarbe) entspricht z. B. dem Wert #FF0000, Gelb (eine Mischung aus Rot und Grün) dem Wert #FFFF00. Wenn Sie sich ein wenig mit dem Mischen von Farben auskennen, werden Sie mit diesen Farbangaben keine Probleme haben (ich kenne mich damit nicht besonders gut aus und habe Probleme ...). Etwas einfacher ist die Verwendung von symbolischen Textkonstanten für die Grundfarben. Dabei wird einfach die englische Bezeichnung der Farbe verwendet. »red« steht z. B. für Rot. Die meisten Browser erkennen zumindest die 16 Basisfarben (deren Konstanten in HTML 4 standardisiert sind), moderne Browser erkennen aber auch wesentlich mehr dieser Konstanten, wie z. B. orange, orangered, darkorange, mediumblue oder forestgreen. Eine Übersicht über die verfügbaren Farbnamen erhalten Sie auf der Seite www.ideenreich.com/ressourcen/farbnamen.shtml. Farbname

Wert

Farbe

black

#000000

Schwarz

silver

#C0C0C0

Hellgrau

gray

#808080

Grau

white

#FFFFFF

Weiß

maroon

#800000

Kastanienbraun

red

#FF0000

Rot

purple

#800080

Violett

fuchsia

#FF00FF

Hellviolett

green

#008000

Dunkelgrün

lime

#00FF00

Hellgrün

olive

#808000

Oliv

yellow

#FFFF00

Gelb

navy

#000080

Dunkelblau

blue

#0000FF

Mittelblau

teal

#008080

Grünblau

aqua

#00FFFF

Hellblau

Tabelle 2.1: Die 16 HTML-Standardfarben

In SelfHTML finden Sie auf der Seite »HTML« / »Allgemeine Regeln für HTML« / »Farben definieren in HTML« im Abschnitt »Hexadezimale Angabe von Farben« ein Anzeigebeispiel für die 16 Grund- und die 120 Netscape-Farben, die sich als QuasiStandard durchgesetzt haben. Im Internet finden Sie diese Seiten unter den Adressen selfhtml.teamone.de/diverses/anzeige/farbnamen_16.htm und selfhtml.teamone.de/diverses/anzeige/farbnamen_netscape.htm.

HTML-Dokumente gestalten 10

%

6

'&

Wenn Sie ein HTML-Dokument gestalten, müssen Sie bei der Eingabe von Textpassagen einiges beachten. Ältere Browser arbeiten beispielsweise mit dem 7-Bit-ASCII-Zeichensatz, neuere dagegen mit einem der 8-Bit-ASCII-Zeichensätze. Da es mehrere dieser Zeichensätze gibt, sollte der im Dokument verwendete über ein meta-Tag angegeben werden, damit der Browser immer den korrekten Zeichensatz verwendet. Neben den Zeichensätzen müssen Sie aber auch einige Besonderheiten bei der Textausgabe berücksichtigen.

%

7 "#

8 9:& "#

)

"#

Ältere Browser arbeiten noch mit dem 7-Bit-ASCII-Zeichensatz, der keine Sonderzeichen enthält. Dazu gehören auch die deutschen Umlaute und das scharfe s, die einen Wert größer als 127 besitzen. Für diese Browser können Sie Umlaute und das scharfe s über spezielle benannte Zeichen angeben. Ein benanntes Zeichen beginnt mit einem Ampersand (&), gefolgt vom Namen des Zeichens (z. B. uuml für »u-Umlaut«) und wird mit einem Semikolon abgeschlossen. Zeichen

Benanntes Zeichen

ä

ä

Ä

Ä

ö

ö

Ö

Ö

ü

ü

Ü

Ü

ß

ß

Tabelle 2.2: Die benannten Zeichen für Umlaute und das scharfe s

Neuere Browser arbeiten dagegen mit 8-Bit-ASCII-Zeichensätzen und können deshalb auch mit Umlauten und anderen Sonderzeichen umgehen. Da es aber viele 8-Bit-Zeichensätze gibt, hängt die Erkennung davon ab, ob der Browser denselben Zeichensatz verwendet wie das Dokument. In den meisten Browsern kann der Anwender im Browser den Standard-Zeichensatz in den Optionen einstellen. Dieser Zeichensatz wird verwendet, wenn im HTML-Dokument kein spezieller Zeichensatz angegeben ist. Im Internet Explorer erreichen Sie diese Option im Menü EXTRAS / OPTIONEN im Register ALLGEMEIN über den Schalter SCHRIFTARTEN. Im Netscape finden Sie diese Option über das Menü ANSICHT / ZEICHENSATZ. (Version 4.7) bzw. ANZEIGEN / ZEICHENKODIERUNG (Version 6.1) Sie sollten den zu verwendenden Zeichensatz aber grundsätzlich im Dokument über das Meta-Tag Content-Type angeben, damit der Browser den richtigen Zeichensatz verwendet. Das folgende Beispiel stellt den in Westeuropa und in den USA hauptsächlich verwendeten Zeichensatz ISO-8559-1 ein:

Dieser Zeichensatz, der auch als Latin-1 bezeichnet wird, enthält die Zeichen der Sprachen Albanisch, Dänisch, Deutsch, Englisch, Farörisch, Finnisch, Französisch, Galizisch, Irisch, Isländisch, Italienisch, Katalanisch, Niederländisch, Norwegisch, Portugiesisch, Schwedisch und Spanisch. Der Zeichensatz ISO-8859-2 enthält die Zeichen der meisten mittel- und osteuropäischen Sprachen: Kroatisch, Polnisch, Rumänisch, Slowakisch, Slowenisch, Tschechisch und Ungarisch. Daneben sind viele weitere Zeichensätze möglich (vielleicht wollen Sie ja einmal eine Website in vereinfachtem Chinesisch entwickeln). Eine offizielle Liste der verfügbaren Zeichensätze finden Sie auf der Seite www.iana.org/assignments/character-sets.

HTML-Dokumente gestalten 11

Da das Content-Type-Meta-Tag Bestandteil des HTML 4.0-Standards ist, sollten alle neueren Browser damit umgehen können und folglich keine Probleme mit den deutschen Umlauten und dem scharfen s haben. Eine wichtige Voraussetzung dafür ist, dass Sie Ihre Dokumente in einem (HTML)Editor erzeugen, der ebenfalls diesen Zeichensatz verwendet. Außerdem muss der Anwender Schriftarten im Browser eingestellt haben, die den Zeichensatz unterstützen. Normalerweise können Sie in westlichen Ländern davon ausgehen, dass das der Fall ist. Wenn Ihre Webseiten allerdings auch in anderen Ländern und mit allen Browsern funktionieren sollen, verzichten Sie lieber auf das MetaTag und verwenden die in Tabelle 2.3 beschriebenen speziellen HTML-Zeichenfolgen für Sonderzeichen. In allen folgenden Beispielen (und in den ASP-Quellcodes meiner Projekte) verwende ich die HTML-Darstellung der Umlaute und des scharfen s nicht, um den Quelltext lesbarer zu gestalten.

%

"#

.;



>


Infos

In Dokumenten können so genannte Anker angebracht sein. Ein Anker ist so etwas wie ein Lesezeichen. Wenn Sie auf ein Dokument verweisen und direkt zu einem Anker springen wollen, geben Sie den Ankernamen mit einem Hash (#) als Präfix an: Internetprogrammierung

In manchen Tags, wie dem usemap-Tag, beziehen Sie sich dabei nicht auf Lesezeichen, sondern auf andere HTML-Elemente, deren Namen Sie damit angeben.

HTML-Dokumente gestalten 19

>

'

Die meisten Browser können Dateien im GIF- und JPEG-Format darstellen. Diese Dateien können Sie über das img-Tag (img = Image = Abbildung) einbinden. Im src-Attribut (src = Source = Quelle) geben Sie die URL der Bilddatei an. Gehört die Datei zu derselben Website wie das Dokument, können Sie entweder eine relative Pfadangabe (ausgehend vom HTML-Dokument) oder eine vom Stammordner des Webservers ausgehende absolute Dateiangabe verwenden. Das alt-Attribut definiert einen alternativen Text für Browser, die das Bild aus irgendwelchen Gründen nicht anzeigen können (Tipp: Geben Sie hier immer "Pech gehabt" an, wer einen so alten Browser verwendet, ist selbst schuld). Das folgende Beispiel bindet eine Bilddatei ein, die im selben Verzeichnis gespeichert ist wie das Dokument:

Das nächste Beispiel bindet eine Bilddatei aus einem Ordner der übergeordneten Ebene ein:

Soll die URL vom Root-Ordner des Webservers aus angegeben werden, beginnen Sie diese mit einem Schrägstrich:

Sie können aber auch Bilder aus beliebigen Speicherorten einbinden:

Achten Sie dann aber darauf, dass Sie auch das Recht besitzen, die Datei zu verwenden. Die Attribute width und heigth spezifizieren die Breite und die Höhe des Bildes in Pixel. Geben Sie diese Attribute nicht an, wird das Bild in der Originalgröße ausgegeben. Geben Sie width und height an, wird das Bild skaliert, wenn die Ausgabe größer oder kleiner ist als das Originalbild. Geben Sie nur width oder height an, wird der jeweils andere Wert automatisch eingestellt. Im Attribut usemap können Sie eine Imagemap angeben, die einzelne klickbare Bereiche im Bild definiert.

? .&

& !

Imagemaps definieren einzelne Bereiche (so genannte Hotspots) eines Bilds als klickbar. Klickt der Anwender auf einen Hotspot, ruft der Browser ein mit dem Bereich verknüpftes Dokument auf. Auf einer Weltkarte könnten beispielsweise einzelne Länder über Hotspots definiert sein. Klickt der Benutzer auf ein Land, ruft der Browser ein HTML-Dokument mit Informationen zu diesem Land ab. Eine Imagemap wird über ein benanntes map-Element definiert. In diesem Tag werden einzelne areaElemente platziert, die die einzelnen Bereiche definieren. Im coord-Attribut geben Sie die Koordinaten des Bereichs an. Dabei definiert das shape-Attribut, welche geometrische Form der Bereich besitzt. Sie können die folgenden Formen definieren: •

rectangle: Rechteck. In coord geben Sie die Werte für links, oben, rechts und unten an,

•

circle: Kreis. In coord geben Sie den Mittelpunkt an (x und y) und den Radius,

• polygon: Mehrfacheck. In coord geben Sie einzelne Paare von x/y-Koordinaten für die einzelnen Eckpunkte des Polygons an. Im href-Attribut geben Sie die URL des Dokuments an, das geöffnet werden soll, wenn der Anwender auf einem Bereich klickt. Im alt-Attribut können Sie einen Text spezifizieren, den der Browser ausgibt, wenn er keine Imagemaps kennt.

HTML-Dokumente gestalten 20

Die Imagemap wird dann im usemap-Attribut eines img-, input- oder object-Tag angegeben. input- und object-Tags können neben img verwendet werden, weil diese Elemente auch Bilder anzeigen können. Das folgende Beispiel erzeugt eine Imagemap für das in Abbildung 2.5 angegebene Bild. Für jedes Rechteck und für das Dreieck wird ein Bereich definiert, der mit einer jeweils anderen URL verknüpft ist. Die Rechtecke sind jeweils 100 Pixel breit und hoch, die Eckpunkte des Dreiecks sind oben, links und rechts je 30 Pixel und unten 60 Pixel vom Rand entfernt.

Abbildung 2.5: Ein einfaches Beispiel-Bild für eine Imagemap

Die Imagemap für das Beispiel wird folgendermaßen definiert:

Wenn sich wie im Beispiel Bereiche überlappen, müssen Sie die oberen Bereiche zuerst definieren. Würden Sie den Bereich für das Dreieck erst am Ende definieren, würde der Benutzer diesen Bereich nicht anklicken können, weil er von den Bereichen der Rechtecke verdeckt wäre. Diesen Bereich geben Sie dann im usemap-Attribut des img-Tag an. Beachten Sie, dass Sie ein HashZeichen vor den Namen setzen müssen:

Imagemaps können sehr aufwändig werden, wenn die Bereiche eine komplexe Form besitzen. Eine Imagemap für die Bundesländer in einer Deutschlandkarte müsste beispielsweise einzelne Polygone mit sehr vielen Eckpunkten definieren. Das folgende Beispiel demonstriert dies an einem Bereich für Nordrhein-Westfalen und Hessen in einer Deutschlandkarte:

HTML-Dokumente gestalten 21



Bei der Erstellung einer Imagemap helfen Ihnen aber gute HTML-Editoren, wie beispielsweise Macromedia Dreamweaver.

@ * ' @

,

A

'B

* '

Ein Anker ist so etwas wie ein Lesezeichen in einem Dokument. In einer Zielangabe kann ein Dokument auf einen Anker verweisen, womit der Browser das Dokument zu dem Abschnitt scrollt, in dem der Anker angelegt ist. Einen Anker legen Sie über das a-Tag an, indem Sie im Attribut name einen Namen für den Anker angeben: HTML-Text

Der Anker schließt den Text ein, der mit ihm verknüpft ist. Das ist aber nicht zwingend notwendig. Normalerweise reicht es aus, den Anker vor dem Text zu definieren: Internetprogrammierung

@

,

Verweise (Links) referenzieren Anker im Dokument oder andere Dateien. Klickt der Anwender auf den Verweis, scrollt der Browser zum Anker bzw. öffnet die andere Datei. Zur Erstellung eines Verweises verwenden Sie das a-Tag (Anchor = Anker). Im href-Attribut geben Sie das Ziel des Verweises an. Der Inhalt des a-Tag ist entweder ein Text oder ein in einem img-Tag angegebenes Bild. Der Benutzer kann auf den Text oder das Bild klicken, um zum Ziel des Links zu gelangen. Wenn Sie auf eine andere Datei verweisen, können Sie eine URL verwenden: Besuchen Sie die Vogonen im Internet.

HTML-Dokumente gestalten 22

Abbildung 2.6: Verweise über ein Bild und einen Text

Gehört die Zieldatei zur selben Website wie das Dokument, können Sie auch relative oder absolute Dateiangaben verwenden. Ist die Zieldatei z. B. in einem Ordner auf einer übergeordneten Ebene gespeichert, können Sie mit zwei Punkten (die für den übergeordneten Ordner stehen) relativ nach oben verzweigen: Unsere Produkte

Wollen Sie bei der Dateiangabe absolut vom Stammordner des Webservers ausgehen, setzen Sie einen Schrägstrich vor die Dateiangabe: Unsere Produkte

Sie können auch auf Anker im Dokument verweisen, indem Sie den Ankernamen angeben: Text oder Bild

Der Verweis auf Anker funktioniert auch für andere Dokumente: Text oder Bild

Per Voreinstellung wird die Zieldatei im aktuellen Fenster geöffnet, wenn es sich um eine Datei handelt, die der Browser darstellen kann (für andere Dateien bietet dieser dann einen Download an). Bei Dokumenten, die Teil eines Framesets sind (siehe Kapitel „Framesets“), kann das schon einmal zum Problem werden, wenn der Verweis beispielsweise im linken (Navigier-)Frame angebracht ist, das Ziel aber im rechten Frame ausgegeben werden soll. Aber auch in normalen Dokumenten sollen Verweise häufig nicht dazu führen, dass das Basisdokument durch das Zieldokument ersetzt wird. Deshalb können Sie im target-Attribut das Zielfenster spezifizieren. Wenn das Dokument Teil eines Frameset ist, können Sie hier den Namen des Zielframe angeben. Daneben sind vier spezielle Werte möglich, die in Tabelle 2.5 beschrieben werden.

HTML-Dokumente gestalten 23

Target-Wert

Bedeutung

_blank

Das Zieldokument wird in einem neuen Fenster geöffnet.

_self

Das Zieldokument wird in dem Fenster geöffnet, das das Dokument mit dem a-Tag enthält (Voreinstellung).

_parent

Das Zieldokument wird im übergeordneten Frame geöffnet (falls es sich um ein Frameset handelt).

_top

Falls das Dokument Teil eines Frameset ist, wird das Zieldokument nicht in einem Frame geöffnet, sondern ersetzt das gesamte Frameset.

Tabelle 2.5: Die Werte des target-Attributs

Besonders der Wert _blank ist in vielen Fällen nützlich. Damit können Sie sicherstellen, dass das Zieldokument nicht das aktuelle Dokument ersetzt, sondern in einer neuen Browser-Instanz geöffnet wird: In SelfHTML finden Sie weitere Informationen zu HTML.

@

,

Ein normaler Verweis referenziert eine Datei, die über das HTTP-Protokoll auf dem Server abgefragt wird. Sie können einen Verweis aber auch für andere Protokolle einrichten. So können Sie beispielsweise eine E-Mail-Adresse im Dokument angeben. Klickt der Anwender auf diesen Verweis, öffnet der Browser automatisch das Standard-Mailprogramm und trägt die E-Mail-Adresse als Empfänger ein: Feedback zum Artikel

Genauso sind Verweise auf FTP-Dateien möglich: Hier erreichen Sie den FTP-Server der Uni in Duisburg.

Datenzelle Datenzelle

Grundsätzlich sollte jede Zeile dieselbe Anzahl Zellen besitzen wie alle anderen Zeilen. Der Browser stellt Tabellen mit einer ungleichen Anzahl Zellen in den einzelnen Zeilen zwar auch dar, aber nicht gerade optisch ansprechend (was ja auch logisch ist). Es kann jedoch sein, dass einzelne Zellen über mehrere Spalten definiert werden und dass die Zeile dann natürlich weniger Zellen besitzt als die anderen. Eine Überschrifts-Zelle wird vom Browser normalerweise einfach mit fett und horizontal zentriert formatiertem Inhalt dargestellt, eine normale Zelle wird normal und linksbündig formatiert. Die vertikale Ausrichtung der Zellen ist per Voreinstellung mittig, was allerdings erst sichtbar wird, wenn eine Zelle so viel Text speichert, dass der Browser diesen umbricht oder wenn die Höhe einer Zeile angegeben ist. Im Attribut border des table-Tag können Sie die Breite des Tabellenrahmens in Pixel angeben. Wenn Sie hier 0 eintragen, ist der Rahmen der Tabelle unsichtbar. Tabellen mit unsichtbaren Rahmen werden häufig verwendet, um Darstellungsprobleme, die mit HTML-Elementen sonst entstehen, zu

HTML-Dokumente gestalten 29

lösen. Mit diesen Tabellen können Sie HTML-Elemente sehr schön in einzelnen Spalten untereinander anordnen. Über das table-Tag-Attribut cellpadding können Sie angeben, wie viele Pixel der Text in der Zelle vom Tabellenrand entfernt ist. Dieses Attribut ist für Tabellen mit sichtbarem Rahmen recht wichtig, um ein wenig Abstand zwischen Rahmen und Text zu erzeugen. Das Attribut cellspacing bestimmt den Abstand der einzelnen Zellen voneinander und vom Tabellenrahmen. Das folgende Listing zeigt die Definition einer einfachen Tabelle mit einem 1-Pixel breiten Rahmen und einem inneren Rand in jeder Zelle von 5 Pixeln: Vorname Nachname Zaphod Beeblebrox Philo Dufresne

Abbildung 2.13 zeigt das Ergebnis.

Abbildung 2.13: Eine einfache HTML-Tabelle

:

"#

3

"'

Da Sie in einer Tabellenzellen beliebige HTML-Elemente unterbringen können, können Sie Tabellen für so einige Design-Tricks nutzen. Besonders für Elemente, die ansonsten schwierig zu positionieren sind, eignen sich Tabellen hervorragend. Das folgende Listing verwendet eine Tabelle dazu, Eingabeelemente und erklärenden Text bündig untereinander anzuordnen: Vorname: Nachname: Ort:

HTML-Dokumente gestalten 30

Das Ergebnis zeigt Abbildung 2.14.

Abbildung 2.14: Eine rahmenlose HTML-Tabelle mit Eingabeelementen

Häufig werden Tabellen auch verwendet, um Bilder horizontal oder/und vertikal zentriert auf einer Seite anzuzeigen, was ansonsten nicht (bzw. nur über weitere Tricks) möglich ist:

Die Tabelle besteht für diesen Trick nur aus einer einzigen Zelle. Dieses Beispiel nutzt bereits das width-Attribut zur Einstellung der Breite der Tabelle (auf 100% der Breite des Browserfensters) und das align-Attribut zur Ausrichtung der Zelle. Beachten Sie, dass Sie HTML-Elemente mit den Positionierungs-Stilen der Cascading Style Sheets auch frei auf dem Dokument positionieren und damit auf Tabellen verzichten können. Tabellen besitzen aber den unumstrittenen Vorteil, dass diese in allen Browsern ohne Probleme funktionieren.

+

C#

!

Wenn Sie für die Tabelle bzw. die Zellen/Spalten keine Breite angeben, richtet sich die Breite der Spalten und damit der Tabelle nach dem Inhalt der Zellen. Dasselbe gilt für die Höhe. Die Breite und die Höhe können Sie jedoch auch für die ganze Tabelle oder für einzelne Zellen über die Attribute width und height bestimmen. Hier können Sie Werte in Pixel (ohne Einheit) oder in Prozent (mit Prozentzeichen) verwenden. Eine Tabelle, die immer 80 Prozent der Breite des Browserfensters einnimmt, wird z. B. so definiert:

HTML-Dokumente gestalten 31

Wenn Sie die Breite einzelner Spalten definieren wollen, könnten Sie dem th- bzw. dem td-Tag das width-Attribut zufügen. Die Breite der Spalte richtet sich dann nach der breitesten Zelle. Es reicht in dem Fall aus, die Breite der Zellen in der ersten Zeile zu definieren. Alternativ können Sie das optionalen Tag colgroup verwenden, um die Breite aller Spalten strukturierter einzustellen: Vorname Nachname Zaphod Beeblebrox Philo Dufresne

Abbildung 2.15: Eine HTML-Tabelle mit definierten Spaltenbreiten

Wenn Sie für eine Spalte die zur Verfügung stehende Restbreite angeben wollen, geben Sie einen Stern als (*) Breitenangabe ein: Vorname Nachname Zaphod Beeblebrox

Den Stern können Sie auch für mehrere Spalten angeben. Der Browser verkleinert eine solche Spalte allerdings nur so weit, dass der Text in der Zelle noch dargestellt werden kann.

HTML-Dokumente gestalten 32

# !

7

Manchmal macht es Sinn, eine Zelle über mehrere Spalten zu definieren. Dazu verwenden Sie das colspan-Attribut des th- oder td-Tag. Geben Sie einfach die Anzahl der zu überspannenden Spalten an: Einfache Zelle Einfache Zelle Einfache Zelle Einfache Zelle Zelle über zwei Spalten

Abbildung 2.16: Eine HTML-Tabelle mit einer Zelle, die über zwei Spalten definiert ist

%

#

7

Genau wie bei mehrspaltigen Zellen können Sie Zellen auch über mehrere Zeilen definieren. Verwenden Sie dazu das Argument rowspan: Zelle über zwei Zeilen Einfache Zelle Einfache Zelle Einfache Zelle Einfache Zelle

HTML-Dokumente gestalten 33

Abbildung 2.17: Eine HTML-Tabelle mit einer zweizeiligen Zelle

(

*

"#

6

Die Ausrichtung des Textes können Sie für jede Zelle über die Attribute aling (horizontale Ausrichtung) und valing (vertikale Ausrichtung) festlegen. Die möglichen Werte für aling sind left, center und right, die Werte für valign sind top, middle und bottom: Links-oben Mitte-oben Rechts-oben Links-Mitte Mitte-Mitte Rechts-Mitte Links-unten Mitte-unten Rechts-unten

HTML-Dokumente gestalten 34

Abbildung 2.18: Tabelle mit ausgerichteten Zellen

0 7

!! '

"' '

Eine Tabelle enthält oft leere Zellen, besonders dann, wenn die Tabelle dynamisch mit ASP erzeugt wird (z. B. aus den Daten einer Datenbanktabelle). Wenn Sie in eine leere Zelle einfach nichts oder ein Leerzeichen schreiben, zeigt der Browser die Zelle in der Regel einfach nicht an. Besonders unschön ist dies, wenn die Tabelle einen Rahmen besitzt: Vorname Nachname Zaphod Beeblebrox Marvin

Abbildung 2.19: Eine HTML-Tabelle mit einer leeren Zelle ohne den »Trick«

Wenn Sie für leere Zellen stattdessen das geschützte Leerzeichen verwenden ( ), wird die Zelle korrekt dargestellt, wie Abbildung 2.20 zeigt. Vorname Nachname Zaphod Beeblebrox Marvin  

HTML-Dokumente gestalten 35

Abbildung 2.20: Eine HTML-Tabelle mit korrekt dargestellter leerer Zelle

>

"#

Über die Tags thead, tbody und tfoot können Sie eine Tabelle in einen Kopf-, Daten- und Fußbereich aufteilen. Für die einzelnen Bereiche können Sie die Default-Ausrichtung und die DefaultHintergrundfarbe der Zellen in den Attributen align, valign und bgcolor bestimmen: Sektion Umsatz Buchherstellung 125.000 Softwareentwicklung 25.000 Schulungen 100.000 Summe 250.000

HTML-Dokumente gestalten 36

Abbildung 2.21: Eine HTML-Tabelle mit Bereichen

Beachten Sie, dass der Netscape 4 nichts mit den Tags thead, tbody und tfoot anfangen kann. Besonders interessant ist der Body-Bereich für Tabellen, die eigentlich nicht in Bereiche aufgeteilt sind, bei denen Sie aber die Ausrichtung aller Zellen voreinstellen wollen. Die Default-Ausrichtung der Zellen (zentriert, mittig für Kopfzellen, linksbündig und mittig für Datenzellen) ist meist nicht besonders schön. Stellen Sie die Ausrichtung dann über das tbody-Tag ein: Überschrift
in zwei Zeilen Überschrift Daten
in zwei Zeilen Daten

Im Netscape 4 funktioniert das Ganze natürlich wieder nicht.

1 Layer (Ebenen) sind ein wichtiges Gestaltungsmittel in modernen HTML-Dokumenten. Ein Layer ist im Prinzip nur ein rechteckiger Bereich, der HTML-Elemente beinhalten kann. Im reinen HTML kann ein Layer auch nicht besonders viel. Über Stile der Cascading Style Sheets können Layer aber umfangreich modifiziert werden. So können Sie beispielsweise den Rahmen festlegen, die Hintergrundfarbe einstellen und den Layer sehr flexibel auf dem Dokument positionieren. Layer werden aber auch einfach nur dazu verwendet, dass die im Layer enthaltenen Elemente gemeinsam über den Namen des Layer angesprochen werden können. So können Sie einen Layer beispielsweise über JavaScript unsichtbar schalten, womit auch alle enthaltenen Layer unsichtbar geschaltet werden. Viele Menüs auf HTML-Seiten sind auf diese Weise programmiert. Der Internet Explorer und der Netscape 6 verwenden für Layer die HTML-4-konformen Tags span und div. Der Netscape 4 kann in Grenzen mit dem div-Tag umgehen, kennt dafür aber ein eigenes layer-Tag (das zwar vom Netscape 6 verstanden wird, aber nicht vom Internet Explorer).

HTML-Dokumente gestalten 37

!

/

Ein span-Element ist ein so genanntes Inline-Element. Wenn Sie keine CSS-Positionierungsstile im Tag angeben, wird der Inhalt des Tag fließend im Text dargestellt. Das div-Tag hingegen erzeugt automatisch einen Absatz. Beide Tags werden normalerweise über das name- und das id-Attribut benannt, damit sie im JavaScript-Quellcode ansprechbar sind (falls das gewünscht ist). Im div-Tag können Sie die Ausrichtung der enthaltenen Elemente über das align-Attribut bestimmen. Sie können hier die Werte left, center, right und justify (Blocksatz) verwenden. Der folgende Quelltext sorgt z. B. für eine zentrierte Ausrichtung eines Textes in einem Absatz: Das ist ein einfacher Layer zur Änderung der Ausrichtung von Text.

Über das boolesche Attribut nowrap können Sie für ein div-Tag einstellen, dass der Browser den enthaltenen Text nicht am rechten Fensterrand umbricht. Weitere Attribute besitzen diese Tags nach dem HTML-4-Standard nicht. Die anderen Einstellungen, wie die des Rahmens oder der Hintergrundfarbe, erfolgen über CSS-Stile. Um den Unterschied zwischen dem span- und dem div-Tag zu verdeutlichen, verwendet der folgende Quelltext einen CSS-Stil, der den Rahmen der Layer festlegt: Das ist ein div-Layer. Und das ist ein span-Layer, der mitten im Text positioniert wird.

Abbildung 2.22: Ein div- und ein span-Layer im Internet-Explorer

Der Netscape 6 hat eigentlich keine Probleme mit dem div- und dem span-Tag, er interpretiert lediglich die Breitenangabe des Rahmens (thin) anders als der Internet Explorer (Abbildung 2.23).

Abbildung 2.23: Ein div- und ein span-Layer im Netscape 6

HTML-Dokumente gestalten 38

Der Netscape 4 dagegen versteht diese Tags zunächst nicht besonders gut (Abbildung 2.24).

Abbildung 2.24: Ein div- und ein span-Layer im Netscape 4

1

& - "! %

Die Netscape-Browser kennen ein spezielles layer-Tag zur Erstellung von Layern. Über die Attribute left und top können Sie einen Netscape-Layer frei positionieren, die Attribute width und height bestimmen die Breite und die Höhe (wenn Sie dies wollen). Alle Angabe erfolgen in Pixel. Die Farbe eines Netscape-Layer können Sie über das Attribut bgcolor bestimmen, das Attribut background gibt eine Bilddatei an, die als Hintergrund verwendet werden soll. Das folgende Beispiel erzeugt einen einfachen Layer ohne Positions- und Größenangabe (der sich wie ein span-Element verhält) und einen frei positionierten Layer, beide mit einer grauen Hintergrundfarbe: Das ist ein einfacher Inline-Netscape-Layer . Das ist ein positionierter Netscape-Layer.

HTML-Dokumente gestalten 39

Abbildung 2.25: Mit dem layer-Tag erzeugte Layer im Netscape 4

$

/

1

Layer werden oft mit CSS-Stilen eingesetzt, um eine optisch ansprechende Gestaltung eines HTMLDokuments zu erreichen. Im Prinzip hat ein HTML-Designer die Möglichkeit, zur Positionierung der Elemente einer Seite entweder Tabellen oder Layer zu verwenden. Layer lassen sich frei auf dem Dokument positionieren und erlauben darüber hinaus sehr viele Einstellungen, wie beispielsweise die des Rahmens und der Hintergrundfarbe, und sind deswegen flexibler als Tabellen. Leider hat der Netscape 4 so seine Probleme mit dem span- und dem div-Tag, was die Entwicklung eines HTMLDokuments, das im Internet Explorer, im Netscape 6 und im Netscape 4 in etwa gleich aussieht, kompliziert. Die Einstellung von Layern mit CSS-Stilen wird im Artikel CSS behandelt. Ein anderes Einsatzgebiet ist die Verwendung mit DHTML. So können Sie einen Layer z. B. auf eine andere Position setzen, den Layer sichtbar und unsichtbar schalten (beispielsweise um Menüs auf- und zuzuklappen) und den Inhalt des Layers dynamisch zu verändern.

HTML-Dokumente gestalten 40

% &-

1 ) &. "! 0 '

$6!

)& -

"! %

Wenn Sie den Netscape 4 mit in die potenziellen Browsertypen für Ihre HTML-Dokumente mit einbeziehen müssen und mit Layern arbeiten wollen, müssen Sie einen kleinen Trick anwenden, damit Ihre Dokumente im Internet Explorer, im Netscape 6 und im Netscape 4 einigermaßen gleich aussehen. Der Netscape 4 erkennt die Positionsangaben in einem absolut positionierten div- oder span-Tag (aus welchen Gründen auch immer) und ist so in der Lage diese Elemente korrekt (absolut) zu positionieren. Das Beispiel greift ein wenig dem Artikel CSS vor, weil hier bereits Stile der Cascading Style Sheets eingesetzt werden: Der position-Stil gibt an, ob Positionsangaben relativ (vom HTML-Element aus gesehen, das das div-Tag enthält) oder absolut (vom Beginn des Dokuments aus gesehen) angegeben werden. Die Stile left und top bestimmen dann die Position: Das ist ein universeller Layer ohne Größenangabe.

Wenn Sie allerdings die Breite des Layer festlegen wollen, müssen Sie zu einem Trick greifen: Da der Netscape 4 die CSS-Stile width und height nicht erkennt, platzieren Sie einfach ein layer-Tag im div- oder span-Element, der die Breite und die Höhe für den Netscape 4 definiert: Das ist ein universeller Layer mit Breite und Höhe.

Das Ergebnis sieht im Netscape 4, im Netscape 6 und im Internet Explorer gleich gut aus, wie Abbildung 2.26 und Abbildung 2.27 für den Netscape 4 und den Internet Explorer zeigen.

HTML-Dokumente gestalten 41

Abbildung 2.26: Universelle Layer im Netscape 4

Abbildung 2.27: Universelle Layer im Internet Explorer

Im Artikel CSS (www.juergen-bayer.net/artikel/CSS/CSS.html) gehe ich noch einmal genauer auf das Layer-Problem ein und zeige auch, wie Sie einen inneren Rand zwischen Layer und Text einstellen können.

HTML-Dokumente gestalten 42

5 &

& 5 &

HTML-Formulare sind normalerweise unsichtbare Elemente, die andere HTML-Elemente, meist Steuerelemente, beinhalten. Diese Formulare werden normalerweise dazu verwendet, den Inhalt der enthaltenen Steuerelemente an eine E-Mail-Adresse, ein ASP(.NET-)Programm oder ein anderes Internetprogramm, wie z. B. eine CGI-Anwendung, zu senden. Der Anwender bestätigt seine Eingaben über einen speziellen Submit-Schalter oder einfach über die Return-Taste, woraufhin der Browser die eingegebenen Daten an eine URL sendet, die in der Formulardeklaration als Ziel angegeben ist. Das Internetprogramm wertet die Eingaben aus und regiert darauf. Ein Formular wird über das form-Tag definiert. Darin definieren Sie normale HTML-Elemente und Eingabeelemente. Das form-Tag besitzt einige wichtige Attribute, die in Tabelle 3.1 beschrieben werden. Attribut

Bedeutung

name

In diesem Attribut geben Sie den Namen des Formulars an. Der Name wird hauptsächlich in clientseitigen JavaScript-Programmen zur Referenzierung des Formulars verwendet.

method

Dieses Attribut definiert, wie die im Formular eingegebenen Daten gesendet werden. Wenn Sie hier den Wert post angeben (= übertragen), werden die Daten direkt an die Standardeingabe der angegebenen Adresse gesendet. In ASP lesen Sie die einzelnen eingegebenen Daten über Request.Form aus. Verwenden Sie die Methode get, werden die Daten in die Server-Umgebungsvariable QUERY_STRING übertragen. In ASP verwenden Sie dann Request.QueryString, um die einzelnen Eingaben auszulesen.

action

action definiert, welche Aktion ausgeführt werden soll, wenn der Anwender das Formular

bestätigt. Wenn Sie eine E-Mail-Adresse angeben (mailto:Name@Host), werden die Formulareingaben als E-Mail an die angegebene Adresse versendet (vorausgesetzt der E-MailVersand ist auf dem System möglich). Wenn Sie bei der Bestätigung des Formulars ein Programm aufrufen wollen (das die Eingaben auswertet), geben Sie im action-Argument den Dateinamen dieses Programms als Dateipfad oder URL an. Tabelle 3.1: Die Attribute des form-Tag

Formulare und Steuerelemente 43

Ein Formular wird normalerweise mit einem Submit- und einem Reset-Schalter ausgerüstet. Ein Klick auf den Submit-Schalter versendet das Formular, ein Klick auf den Reset-Schalter setzt die Eingaben auf die Voreinstellungen zurück. Ein Formular, das an eine ASP-Seite gesendet werden soll, wird z. B. so definiert: Vorname: Nachname:  

Das Beispiel setzt eine Tabelle ein, um die Beschriftungen und die Eingabeelemente untereinander auszurichten. Per Voreinstellung ist das Formular im Dokument nicht sichtbar. Sie können die Ansicht des Formulars jedoch mit Stilangaben beeinflussen. Abbildung 3.1 zeigt die Ausgabe im Internet Explorer.

Abbildung 3.1: Ein HTML-Formular im Internet Explorer

+

&

"#

Über das input-Tag können Sie auch ein Bild als Submit-Schalter festlegen: ...

Klickt der Anwender auf das Bild, wird das Formular damit bestätigt.

Formulare und Steuerelemente 44

&

A$

&

B

Steuerelemente werden dazu verwendet, Eingaben vom Anwender entgegenzunehmen. HTML 4 stellt verschiedene Steuerelemente zur Verfügung, die den Standardsteuerelementen von Windows entsprechen (Textbox, Listbox, Schalter etc.). Da die HTML-Steuerelemente den WindowsStandardsteuerelementen sehr ähnlich sind, verzichte ich auf eine nähere Beschreibung der Funktionsweise. Ich gehe davon aus, dass Sie die Windows-Steuerelemente bereits von der Anwendung her kennen. Beachten Sie, dass manche ältere Browser (wie z. B. der Netscape 4) Steuerelemente nur dann auf der Seite darstellen, wenn diese in ein Formular eingebettet sind. Sie sollten Steuerelemente also grundsätzlich in ein form-Element einbetten, auch wenn Sie die Funktionalität eines Formulars gar nicht benötigen (für diesen Tipp habe ich mich etwa eine halbe Stunde über den Netscape 4.7 geärgert, der auf einer Seite ohne form-Tag meine Steuerelemente einfach nicht angezeigt hat).

# Die Tabulatorreihenfolge ist per Voreinstellung so eingestellt, dass der Eingabecursor vom ersten Element der Seite automatisch zum nächsten springt. Wenn Sie die Tabulatorreihenfolge ändern wollen, können Sie im Attribut tabindex eine Zahl zwischen 0 und 32767 eingeben. Die Navigation erfolgt dann vom Element mit dem niedrigsten Index ausgehend in Richtung des Elements mit dem jeweils nächsthöheren Index.

"# &

"#3

' /

Über das boolesche Attribut disabled können Sie erreichen, dass ein Steuerelement deaktiviert ist. Solche Steuerelemente werden oft verwendet, um dem Anwender Daten anzuzeigen, diese aber nicht editieren zu lassen. Der Inhalt des Steuerelements wird in einer etwas schwächeren Farbe dargestellt. Der Anwender kann den Eingabecursor nicht in das Element setzen. Das ebenfalls boolesche Attribut readonly bewirkt Ähnliches, nur dass der Inhalt normal dargestellt wird und der Anwender den Eingabecursor in das Element setzen kann. Schreibgeschützte Felder erlauben dem Anwender, den dargestellten Wert in die Zwischenablage zu kopieren. readonly und disabled werden nicht von allen Browsern unterstützt. Der Netscape

4.7 kann z. B. damit nichts anfangen und stellt das Steuerelement ganz normal dar. Unterstützt werden diese Attribute vom Internet Explorer ab Version 4 und vom Netscape ab Version 6.

Formulare und Steuerelemente 45

$

6

In einzeilige Textfelder kann der Anwender einen Text eingeben. Diese Felder richten Sie über das input-Tag ein. Das Attribut type definiert den Typ des Eingabeelements. Im Fall des einzeiligen Textfelds ist das der Typ text. Im Attribut size können Sie die Breite des Elements in Zeichen bestimmen. Das Attribut maxlength bestimmt die maximal eingebbare Textlänge. Das folgende Beispiel erzeugt ein 20 Zeichen großes Textfeld mit maximal 50 Zeichen Eingabemöglichkeit:

Abbildung 3.2: Ein einzeiliges HTML-Textfeld

Lassen Sie das Attribut maxlength weg, kann der Anwender theoretisch unbegrenzt viel Text eingeben, was wohl aber immer durch das Betriebssystem eingeschränkt ist. Wenn Sie einen Text voreinstellen wollen, verwenden Sie dazu das value-Attribut:

Aus diesem Attribut lesen Sie später den eingegebenen Wert auch wieder aus.

%

4

6

Ein Textfeld, das die Eingabe nicht als Klartext anzeigt, sondern für die einzelnen Zeichen Sterne anzeigt, erzeugen Sie, indem Sie ein input-Element mit type="password" erzeugen. Die Attribute entsprechen denen des einzeiligen Textfelds:

Abbildung 3.3: Ein HTML-Textfeld für Passworteingabe

Beachten Sie, dass in einem solchen Textfeld nur die Ansicht der Eingabe verschlüsselt ist. Die Übertragung der Daten vom Browser zum Server erfolgt im Klartext.

Formulare und Steuerelemente 46

(

#

6

Ein input-Element vom Typ file ermöglicht die Auswahl eines Dateinamens über einen automatisch neben dem Element angelegten Schalter:

Abbildung 3.4: Ein HTML-Textfeld für eine Dateiauswahl

Betätigt der Anwender den Schalter, zeigt der Browser einen Standard-Dateiauswahl-Dialog zur Auswahl der Datei an. Im Internet Explorer kann der Anwender auch eine Datei aus dem Explorer auf das Eingabefeld ziehen. Solche Steuerelemente werden üblicherweise dazu verwendet, eine Datei auf den Server hochzuladen.

0

#

6

Textfelder, in die der Anwender mehrere Zeilen eingeben kann, erzeugen Sie nicht über das inputTag, sondern über das textarea-Tag. Über die Attribute rows und cols steuern Sie die Anzahl der sichtbaren Zeilen bzw. Zeichen (Spalten):

Abbildung 3.5: Ein mehrzeiliges HTML-Textfeld

Die Anzahl der sichtbaren Zeilen und Spalten beeinflusst nicht die Eingabemöglichkeit. Der Benutzer kann auch wesentlich mehr Zeilen und Zeichen pro Zeile eingeben, als sichtbar sind. Zeilen werden allerdings in den meisten Browsern (Internet Explorer ab Version 5.x, Netscape ab Version 6.x) per Voreinstellung automatisch am rechten Rand umbrochen. Die Voreinstellung ist allerdings bei den verschiedenen Browsern unterschiedlich. Den Umbruch können Sie bedingt über das nicht zum HTML-Standard gehörende Attribut wrap steuern (das nicht von allen Browsern unterstützt wird). Sie können die folgenden Werte verwenden: •

off: Der Browser bricht lange Zeilen nicht um. Voreinstellung für den Netscape 4.

• virtual oder soft: Der Browser bricht lange Zeilen um. Der Umbruch erfolgt aber so, dass beim Auswerten die Zeilen so zurückgegeben werden, wie sie eingegeben wurden. Voreinstellung für den Netscape 6 und den Internet Explorer. • physical oder hard: Der Browser bricht lange Zeilen um. Bei der Auswertung stehen an den automatischen Umbruchstellen echte Zeilenumbrüche. Beachten Sie, dass der Netscape 6(.2) das wrap-Attribut unverständlicherweise nicht unterstützt.

Formulare und Steuerelemente 47

Wenn der Browser lange Zeilen nicht umbricht, wird das Textfeld normalerweise mit einem horizontalen und einem vertikalen Rollbalken versehen. Wenn Sie das Textfeld mit einem Text vorbelegen wollen, tragen Sie den Text mit allen Leerzeichen und Zeilenumbrüchen (anders als in normalem HTML) einfach in das textarea-Tag ein: Das ist ein mehrzeiliges Textfeld mit fünf sichtbaren Zeilen und 25 sichtbaren Zeichen

Beachten Sie, dass der hier eingetragene Text nicht als HTML-Quelltext ausgewertet wird. Sie können also auch HTML-Sonderzeichen verwenden ohne diese maskieren zu müssen. Das beinhaltet aber auch, dass Leerzeichen so ausgegeben werden, wie diese im Quelltext stehen. Um im Ergebnis keine Leerzeichen vor den einzelnen Zeilen stehen zu haben, muss der Inhalt des textarea-Tags immer linksbündig gespeichert werden, auch dann, wenn das Tag selbst eingerückt ist: Das ist ein mehrzeiliges Textfeld mit fünf sichtbaren Zeilen und 25 sichtbaren Zeichen

> Listenfelder bieten dem Anwender eine Auswahl aus einer Liste von Werten an. Sie können Listenfelder erzeugen, die nur eine einzelne Zeile anzeigen und sich wie eine Windows-Combobox verhalten. Mehrzeilige Listenfelder verhalten sich dagegen wie eine Listbox. Normalerweise lassen Listenfelder nur die Auswahl eines Eintrags zu, über das Attribut multiple können Sie aber auch Listenfelder mit Mehrfachauswahl erzeugen. Ein Listenfeld wird über das select-Tag definiert. In einzelnen option-Tags spezifizieren Sie die Einträge. Eine einfache Liste, aus der der Anwender einen einzelnen Wert auswählen kann, legen Sie z. B. so an: Ford Puma Fiat Panda Porsche 911 Audi TT

Abbildung 3.6: Ein einzeiliges Listenfeld

Das size-Attribut legt fest, wie viele Zeilen in der Liste sichtbar sind. Enthält die Liste mehr Zeilen, wird diese automatisch mit einem Rollbalken versehen. Ford Puma Fiat Panda Porsche 911 Audi TT

Formulare und Steuerelemente 48

Abbildung 3.7: Ein mehrzeiliges Listenfeld

Über das boolesche selected-Attribut des option-Tag können Sie ein Element der Liste vorauswählen: ... Fiat Panda ...

Mehrzeilige Listenfelder können Sie über das boolesche Attribut multiple so einstellen, dass diese eine Mehrfachauswahl zulassen: ... ...

Den Anwender kann (wie in Windows üblich) über eine Kombination von Maustaste und (Strg) bzw. (Shift) mehrere Elemente auswählen.

Abbildung 3.8: Ein Mehrfachauswahl-Listenfeld

In einem Mehrfachauswahl-Listenfeld können Sie natürlich auch mehrere Listenelemente über das selected-Attribut des option-Tag vorauswählen. +

/

Listenfelder werden vom Browser normalerweise so breit angelegt, dass der Text der Einträge gut sichtbar ist. In vielen Fällen führt dies zu optisch unschönen Dokumenten. Wenn Sie die Breite der Liste festlegen wollen, müssen Sie für den Internet Explorer und den Netscape 6 den CSS-Stil width und für den Netscape 4 das gleichnamige Attribut verwenden: ...

Wenn Sie die Breite im CSS-Stil und im Attribut einstellen, stellen Sie sicher, dass das Listenfeld im Internet Explorer und in beiden Netscape-Browsern korrekt dargestellt wird.

?

;!

Optionbuttons ermöglichen die Auswahl aus einer von mehreren vorgegebenen Optionen. Diese Elemente werden über ein input-Tag mit angelegt: Ihr Geschlecht:
Weiblich
Männlich
Weiß nicht

Formulare und Steuerelemente 49

Über das boolesche Attribut checked können Sie einen der Schalter voreinstellen, wie es im Beispiel schon für die Option »Weiß nicht« der Fall ist.

Abbildung 3.9: HTML-Optionbuttons

Alle Optionbuttons mit demselben Namen gehören derselben Gruppe an. Aus einer Gruppe kann immer nur ein Schalter eingeschaltet werden. Wenn Sie z. B. zwei verschiedene Gruppen benötigen, müssen Sie auch zwei verschiedene Namen verwenden: Ihr Geschlecht:
Weiblich
Männlich
Weiß nicht
Ihr bevorzugtes Fahrzeug:
Fahrrad
Motorrad
Auto

Abbildung 3.10: Zwei Optionsgruppen

Formulare und Steuerelemente 50

@

D# "'

6

Checkboxen ermöglichen ähnlich Optionbuttons die Auswahl von Optionen. Checkboxen lassen aber eine Mehrfachauswahl zu und können wieder ausgeschaltet werden. Checkboxen legen Sie ähnlich wie Optionbuttons über das input-Tag mit type="checkbox" an. Sie können auch hier Schalter voreinstellen, nur dass natürlich auch mehrere möglich sind: Ihre Hobbies:
Motorrad fahren
Snowboarden
Inlinern

Abbildung 3.11: HTML-Checkboxen