vor >>

PHP 4 von Thomas Theis
Webserver-Programmierung für Einsteiger

	Kapitel L HTML
		L.1 Zeichensatz
		L.2 Markierungen
		L.3 Dokumentaufbau
		L.4 Hyperlinks
		L.5 Zentrale Einstellungen
		L.6 Grafische Markierungen
		L.7 Logische Markierungen
		L.8 Bilder
		L.9 Formulare
		L.10 Listen
		L.11 Tabellen
		L.12 Frames
		L.13 Image Maps

Kapitel L HTML

In diesem Abschnitt werden die Möglichkeiten von HTML, der weit verbreiteten Sprache zur Erzeugung von Internet-Dokumenten, vorgestellt. Besonderes Augenmerk wurde auf die Elemente gerichtet, die auf allen gängigen Web-Browsern und nicht nur in der jeweils allerneuesten Version laufen.

Text, Markierungen

Mit Hilfe von HTML (Hypertext Markup Language) werden Dokumente im Internet dargestellt. Innerhalb der Dokumente sind Zeichen, Worte und ganze Bereiche markiert. Ein Web-Browser formatiert den Text gemäß den Markierungen und stellt ihn auf dem Bildschirm dar.

Einzelne Bereiche des Dokumentes können als Hypertext markiert werden. Dadurch wird es möglich, diese Bereiche mit anderen Bereichen oder anderen Dokumenten zu verknüpfen. Diese Verknüpfungen werden Hyperlinks oder einfach Links genannt.

L.1 Zeichensatz

HTML-Dateien sind reine Textdateien, sie können von jedem einfachen Text-Editor bearbeitet werden wie z. B. vom Editor (Notepad) im Zubehör von MS Windows 95 / 98 oder MS Windows NT.

Sonderzeichen

In HTML wird zumindest der ASCII-Zeichensatz unterstützt, dieser beinhaltet allerdings nicht die deutschen Umlaute. Diese und andere Sonderzeichen müssen in Entities kodiert werden. Eine Entity beginnt mit einem & und endet mit einem Semikolon. Seit HTML 3.0 wird als Erweiterung der Zeichensatz ISO-Latin-1 unterstützt. Damit wird zumindest der Einsatz deutscher Umlaute direkt ermöglicht. Nachfolgend eine Auswahl der wichtigsten Entities:

Entity	Bedeutung / Zeichen
Ä	Umlaut Ä
ä	Umlaut ä
Ö	Umlaut Ö
ö	Umlaut ö
Ü	Umlaut Ü
ü	Umlaut ü
&	Zeichen & (ampersand)
>	> (größer als)
<	< (kleiner als)
"	Anführungszeichen »
ß	scharfes ß
	explizites Leerzeichen

L.2 Markierungen

Tags, Container

Die Kennzeichnung von Bereichen wird mit Hilfe von Tags (Markierungen) vorgenommen. Zur Unterscheidung vom reinen Text werden diese Markierungen in spitze Klammern (< und >) eingeschlossen. Sie treten normalerweise paarweise auf, d. h., sie markieren den Anfang und das Ende des gekennzeichneten Bereiches. Einen solchen Bereich nennt man auch Container. Ein Beispiel:

In diesem Satz sind <B> zwei Worte </B> fett geschrieben.

Anfang, Ende

Der mittlere Teil ist durch Anfangs- und Endmarkierung gekennzeichnet (die Markierung <B> steht für Fett-Schrift). Bereiche mit Markierungen können wiederum in Markierungen eingebettet werden. Dabei ist wichtig, dass sie richtig ineinander geschachtelt werden, wie das folgende Beispiel zeigt:

In diesem Satz sind <I><B> zwei Worte </B></I> 
fett und kursiv geschrieben.

Der <B>-Container sollte vollständig innerhalb des <I>-Containers stehen (die Markierung <I> steht für Kursiv-Schrift). Einige Markierungen benötigen keine Endmarkierung. In anderen Fällen können Endmarkierungen bei paarweise auftretenden Markierungen weggelassen werden. Allerdings ist diese Methode nicht zu empfehlen, da sich leicht Fehler einschleichen können.

Attribut, Wert

In diesem Skript sind die Markierungen meist in Großbuchstaben geschrieben. Dies ist nicht unbedingt notwendig, sondern dient nur zur deutlichen Unterscheidung vom reinen Text. Einige Markierungen besitzen Attribute, denen Werte zugewiesen werden können. Diese Wertzuweisungen stehen innerhalb der Anfangsmarkierung.

Ein Beispiel:

<FONT FACE="Arial"> .... </FONT>

Das Attribut der Markierung FONT heißt FACE, es bekommt den Wert »Arial«. Attribute sollten immer in Anführungszeichen geschrieben werden. Falls ein Attribut ein Leerzeichen beinhaltet (geplant oder aus Versehen), wird es ansonsten vom Browser nicht verstanden.

L.3 Dokumentaufbau

HTML, HEAD, BODY

Ein HTML-Dokument ist in die Markierungen <HTML> und </HTML> eingeschlossen. Es wird in zwei Teile aufgeteilt, Kopf (Container <HEAD>) und Rumpf (Container <BODY>). Im Kopf des Dokumentes stehen Informationen über das Dokument, im Rumpf ist der eigentliche Inhalt des Dokumentes zu finden.

TITLE

Innerhalb des Dokumentenkopfes kann man die Markierung <TITLE> verwenden. Hier gibt man den Titel des Dokumentes an, dieser erscheint normalerweise im Fenstertitel des Browsers. Nachfolgend ein Beispiel für ein einfaches Dokument:

Abbildung L.1 Ein erstes HTML-Dokument

Der HTML-Programmcode:

Listing L.1 Datei ul01.htm

<HTML>
<HEAD>
<TITLE> Erstes Dokument </TITLE>
</HEAD>
<BODY>
In diesem Satz sind <I><B> zwei Worte </B></I> 
fett und kursiv geschrieben. 
Umlaute waren in fr&uuml;heren HTML-Versionen 
ein bi&szlig;chen umst&auml;ndlich. 
Die Zeichen f&uuml;r gr&ouml;&szlig;er &gt; 
und kleiner &lt; sollte man allerdings weiter benutzen.
</BODY>
</HTML>

Neue Zeile, Leerzeichen

Falls mehrere Leerzeichen im Text hintereinander vorkommen, so werden sie zu einem Leerzeichen reduziert. Zur expliziten Darstellung eines Leerzeichens gibt es die Entity  . Zeilenumbrüche werden innerhalb des Browsers selbsttätig, in Abhängigkeit von der Fenstergröße vorgenommen. Die Zeilenumbrüche, die im ASCII-Editor vorgenommen worden sind, werden nicht beachtet.

Microsoft, Netscape

Die Sprache HTML wird von Version zu Version (2.0, 3.0, 3.2, 4.0) ständig erweitert und verändert. Genauso verhält es sich bei den Versionen der Browser (Netscape Navigator, MS Internet Explorer u. a.) und ihren Fähigkeiten, die HTML-Markierungen in Darstellungen umzusetzen. Die Browser bieten darüber hinaus noch Möglichkeiten, die über das reine HTML hinausgehen.

Ältere Browser

In diesem Abschnitt werden häufig eingesetzte Markierungen vorgestellt, die auch von älteren Browsern verstanden werden. Aufgrund der genannten Vielfalt kann nicht davon ausgegangen werden, daß jede Zeile HTML-Code auf jedem Browser einwandfrei und immer genau gleich dargestellt wird. Bei unbekannten Markierungen kommt es bei den Browsern aber nicht zu Programmabstürzen, sie werden einfach ignoriert.

Exaktes HTML

Es empfiehlt sich, HTML-Quelldateien so exakt wie möglich zu schreiben, auch wenn man feststellt, daß bestimmte Browser recht gutmütig reagieren und Fehler ausgleichen. Darauf kann man sich jedoch nicht verlassen, und bei der Vielzahl der im Internet eingesetzten Rechnersysteme, Betriebssysteme, Browser und Browser-Versionen kann niemand voraussagen, wie das Ergebnis bei einer fehlerhaft geschriebenen Datei aussieht.

Übung

Erzeugen Sie mit Hilfe des Windows-Editors ein HTML-Dokument mit einigen Zeilen Text, in dem u. a. einige deutsche Umlaute, die mathematischen Zeichen für »größer als« (>) und »kleiner als« (<) und das Zeichen »ß« vorkommen. Speichern Sie das Dokument, und testen Sie die Darstellung mit einem Browser.

L.4 Hyperlinks

Hyperlink

In einem Browser kann man Hyperlinks (Querverweise), die meist unterstrichen dargestellt werden, durch Anklicken mit der Maus aktivieren. Handelt es sich dabei um einen Verweis auf ein anderes HTML-Dokument, so wird es vom Browser angefordert und dargestellt.

Es kann sich allerdings auch um einen Verweis auf andere Dateitypen (Video, Sounddatei) oder andere Dienste (Mail, FTP) handeln. Entsprechend wird dann durch Anklicken ein weiteres Programm zum Abspielen oder Darstellen oder aber ein anderer Dienst gestartet.

A HREF = URL

Ein Hyperlink auf ein Dokument beinhaltet im Attribut HREF den URL einer Seite. URL steht für Uniform Resource Locator und gibt Protokolltyp, Namen und Ort des Dokumentes an. Der Hyperlink wird mit der Markierung <A> eingesetzt, die Syntax lautet:

<A HREF="URL" Verweistext </A>

Der Verweistext stellt die grafische Markierung dar, die mit der Maus angeklickt werden kann. Nachfolgend ein Beispiel für ein Dokument mit einem Hyperlink auf ein anderes Dokument:

Abbildung L.2 Hyperlink

Der HTML-Programmcode:

Listing L.2 Datei ul02.htm

<HTML>
<HEAD>
<TITLE> Ein Dokument mit einem Hyperlink </TITLE>
</HEAD>
<BODY>
Von diesem <A HREF="ul01.htm">Hyperlink</A> aus 
kommt man zu einem anderen Dokument.
</BODY>
</HTML>

L.4.1 URL

Relative Pfade

Der URL besteht aus Protokolltyp, Ort des Servers, Verzeichnisangabe und Name der Datei. Falls sich das Dokument auf dem gleichen Rechner befindet, reichen Verzeichnisangabe und Name. Dabei sollten keine absoluten, sondern relative Pfadangaben verwendet werden. Einige Beispiele:

Datei im gleichen Verzeichnis

test1.htm

Datei im untergeordneten Verzeichnis unt:

unt/test1.htm

Datei im übergeordneten Verzeichnis:

../test1.htm

Datei im Parallel-Verzeichnis neb:

../neb/test1.htm

Handelt es sich um ein Datei an einer beliebigen Stelle im Internet, so ist der komplette URL anzugeben wie z. B.:

HREF="HTTP://WWW.BILDUNG.DE/VERZQ/TEST7.HTM"

L.4.2 Anker

Anker

Man kann auch auf bestimmte Positionen (Anker, entspricht einer Textmarke ) innerhalb einer anderen Datei oder der gleichen Datei verweisen. Dies ist zum besseren Navigieren in längeren HTML-Dokumenten zu empfehlen. Ein solcher Anker wird wie folgt definiert:

<A NAME="Ankername"> Ankertext </A>

Einen Hyperlink auf einen solchen Anker hängt man mit dem Zeichen # an den URL eines Dokumentes an:

<A HREF="URL#Ankername"> Verweistext </A>

Bei Anklicken eines solchen Verweistextes wird das zugehörige Dokument geladen und ab der durch den Anker definierten Stelle im Browser angezeigt. Falls man nur innerhalb des Dokumentes zu einem Anker wechseln möchte, so fällt natürlich der URL weg:

<A HREF="#Ankername"> Verweistext </A>

Übung

Erstellen Sie mit dem Windows-Notepad zwei Dateien. In diesen Dateien soll jeweils ein Hyperlink zur anderen Datei existieren. Speichern Sie die Dateien, und testen Sie die Funktion der Hyperlinks mit einem Browser.

Übung

Erstellen Sie mit dem Windows-Notepad eine Datei mit mehreren Seiten Text (eine Zeile schreiben, mehrmals kopieren). An mehreren Stellen des Textes sollen Anker erzeugt werden. Zu Beginn der Datei sollen Hyperlinks zu diesen Ankern erstellt werden. Testen Sie die Funktion der Hyperlinks mit einem Browser.

Übung

Erstellen Sie mit dem Windows-Explorer und dem Windows-Notepad die nachfolgenden Verzeichnisse, Dateien und Anker:

im Verzeichnis H die Datei H1.HTM mit den Ankern P, Q, R

unterhalb des Verzeichnisses H im Unterverzeichnis B die Dateien B1.HTM und B2.HTM

in der Datei B2.HTM die Anker X, Y, Z

unterhalb des Verzeichnisses H im Unterverzeichnis C die Datei C1.HTM

unterhalb des Verzeichnisses C im Unterverzeichnis D die Dateien D1.HTM und D2.HTM

Die nachfolgenden Hyperlinks sollen realisiert werden.

Von der Hauptdatei H1 aus : alle Dateien und alle Anker

Von jeder Datei aus : die Dateien im jeweiligen Verzeichnis

Von jeder Datei aus : die Hauptdatei H1

Innerhalb der Datei B2 : jeder Anker

Von der Datei D2 aus : Anker X in Datei B2 und umgekehrt

Testen Sie die Funktion der Hyperlinks mit einem Browser.

L.5 Zentrale Einstellungen

BODY

Es können u.a folgende Einstellungen für das gesamte Dokument festgelegt werden:

Hintergrundfarbe; Beispiel:

<BODY BGCOLOR="#C3C3C3">

Hintergrundbild, dadurch wird keine Hintergrundfarbe sichtbar; Beispiel:

<BODY BACKGROUND="LOGO.GIF">

feststehendes Hintergrundbild (Wasserzeichen-Effekt), nur im Internet Explorer zu sehen; Beispiel:

<BODY BACKGROUND="LOGO.GIF" BGPROPERTIES="FIXED">

Textfarbe; Beispiel:

<BODY TEXT="#FFCC99">

Farbe für Hyperlinks; Beispiel:

<BODY LINK="#FF9966">

Farbe für bereits besuchte Hyperlinks; Beispiel:

<BODY VLINK="#009966">

Farbe für den aktuell ausgewählten Hyperlink; Beispiel:

<BODY ALINK="#FFFFFF">

L.6 Grafische Markierungen

Grafische Markierungen beziehen sich auf die Schriftgestaltung und auf die Bereitstellung von speziellen grafischen Elementen innerhalb des Dokumentes. Nachfolgend eine Tabelle von häufig benutzten grafischen Markierungen:

Markierung	Bedeutung
<B> Text </B>	Fettdruck
<BIG> Text </BIG>	Großschrift
<BR>	Neue Zeile
<FONT> Text </FONT>	Schriftart, -größe, -farbe, s. unten
<HR>	Horizontale Linie (über die ganze Seite)
<I> Text </I>	Kursivdruck
<P> Text </P>	Neuer Absatz bzw. Absatzformatierung, siehe unten
<PRE> Text </PRE>	Zur Darstellung von vorformatiertem Text, ohne Veränderung der Leerzeichen und Zeilenumbrüche, z. B. zur Darstellung von Programmlistings
<S> Text </S>	Durchgestrichen
<SMALL> Text </SMALL>	Kleinschrift
<SUB> Text </SUB>	Tiefgestellte Schrift
<SUP> Text </SUP>	Hochgestellte Schrift
<TT> Text </TT>	Schreibmaschinenschrift
<U> Text </U>	Unterstrichen

Übung

Erstellen Sie eine Datei, in der einzelne Zeichen, ganze Worte oder ganze Sätze fett, kursiv oder unterstrichen dargestellt werden. Fügen Sie Zeilenumbrüche und horizontale Linien ein. Testen Sie die Darstellung mit einem Browser.

L.6.1 Schriftformatierung

FONT

Innerhalb der Markierung <FONT> bestimmt das Attribut FACE über die Schriftart, COLOR über die Schriftfarbe und SIZE über die Schriftgröße.

Erlaubte Werte für das Attribut FACE sind die Namen der Schriftarten, die vom jeweiligen Browser dargestellt werden können.

Die Schriftfarbe wird in insgesamt sechs hexadezimalen Ziffern angegeben, die ersten beiden bestimmen den Rotwert, die nächsten beiden den Grünwert und die letzten beiden den Blauwert der Schriftfarbe.

Beim Attribut SIZE sind Werte von 1 bis 7 möglich. Die Größe 1 entspricht 8 Punkt, 2 = 10, 3 = 12, 4 = 14, 5 = 18, 6 = 24, 7 = 36 Punkt.

Der gesamte Text, der nicht innerhalb von FONT-Markierungen steht, wird normal dargestellt, d. h. in der Darstellung, die beim jeweiligen Browser eingestellt ist. Nachfolgend ein Beispiel für die Schriftformatierung:

Abbildung L.3 Schrift-Formatierung

Der HTML-Programmcode:

Listing L.3 Datei ul03.htm

<HTML>
<HEAD><TITLE>Schriftformatierung</TITLE></HEAD>
<BODY>
Text in normaler Schriftart. 
Es folgt Text in der Schriftart Arial: <P>
<FONT FACE="Arial" SIZE=4 COLOR="#FF0000">
   Rot, Größe 4 </FONT><P>
<FONT FACE="Arial" SIZE=5 COLOR="#00FF00">
   Grün, Größe 5 </FONT><P>
<FONT FACE="Arial" SIZE=2 COLOR="#FF00FF">
   Magenta, Größe 2 </FONT><P>
<FONT FACE="Arial" SIZE=6 COLOR="#0000FF">
   Blau, Größe 6 </FONT><P>
Wieder Text in normaler Schriftart.
</BODY>
</HTML>

Übung

Erstellen Sie eine Datei, in der einzelne Zeichen, ganze Worte oder ganze Sätze in unterschiedlichen Schriftarten, Schriftfarben und Schriftgrößen dargestellt werden. Testen Sie die Darstellung mit einem Browser.

L.6.2 Absatzformatierung

Innerhalb der Markierung <P> bestimmt das Attribut ALIGN über die Ausrichtung. Falls es nicht vorhanden ist, wird der Absatz linksbündig gesetzt. Mögliche Werte sind left, right und center. Die Einstellung gilt bis zur nächsten Anfangsmarkierung <P> oder Endmarkierung </P>. Nachfolgend ein Beispiel für die Absatzformatierung:

Der HTML-Programmcode:

Listing L.4 Datei ul04.htm

<HTML>
<HEAD><TITLE>Absatzformatierung</TITLE></HEAD>
<BODY>
<P ALIGN="Left"> Der erste Absatz ist linksbündig. </P>
<P ALIGN="Right"> Der zweite ist rechtsbündig.
<BR>Diese Zeile auch.
<P> Der dritte Absatz ist unformatiert.
<P ALIGN="Center"> Der vierte Absatz ist zentriert.
</BODY>
</HTML>

Abbildung L.4 Absatzformatierung

Übung

Erstellen Sie eine Datei, in der drei Absätze mit unterschiedlichen Ausrichtungen stehen. Testen Sie die Darstellung mit einem Browser.

L.7 Logische Markierungen

Unterschiedliche Darstellung

Logische Markierungen überlassen dem Browser die geeignete Darstellung des markierten Textes. Die Darstellung kann also je nach Browser und nach persönlich gewählter Darstellung unterschiedlich ausfallen. Nachfolgend eine Liste von häufig benutzten logischen Markierungen:

Anker für Hyperlinks

Mögliche Darstellungen: unterstrichen und/oder andere Schriftfarbe

Zitate

Mögliche Darstellung: Kursivdruck

Programmcode

Mögliche Darstellung: Nichtproportionalschrift

Hervorgehobener Text

Mögliche Darstellungen: mit Sternchen oder invertiert

Überschriften in verschiedenen Ebenen

<H1> Text </H1>
<H2> Text </H2>
<H3> Text </H3>
<H4> Text </H4>
<H5> Text </H5>
<H6> Text </H6>

Mögliche Darstellung: große Schrift bis kleine Schrift

Starke Hervorhebung

<STRONG> Text </STRONG>

Mögliche Darstellung: Fettdruck

Übung

Erstellen Sie eine Datei, in der Text und mehrere Überschriften eingegeben werden. Für die Überschriften sollen verschiedene Ebenen und Ausrichtungen gewählt werden. Testen Sie die Darstellung mit einem Browser.

L.8 Bilder

IMG

Die Einbindung von Bildern in HTML-Dokumente wird mit Hilfe der Markierung <IMG> vorgenommen:

<IMG SRC="URL" ALT="alternativer Text">

Es wird der URL einer Bilddatei angegeben. Sollte der Browser die betreffende Bilddatei nicht darstellen können, so wird der Wert des Attributes ALT ausgegeben. Mit Hilfe des Attributes ALIGN wird das Bild relativ zur Textzeile vertikal ausgerichtet. Mögliche Werte sind TOP, BOTTOM und MIDDLE.

WIDTH, HEIGHT

Die Attribute WIDTH und HEIGHT sind für eine Skalierung des Bildes zuständig. Dabei sollte man allerdings auf die Einhaltung des Verhältnisses zwischen Breite und Höhe achten. Nachfolgend ein Beispiel:

Abbildung L.5 Bilder

Der HTML-Programmcode:

Listing L.5 Datei ul05.htm

<HTML>
<HEAD><TITLE>Bilder</TITLE></HEAD>
<BODY>
In dieser Zeile wird <IMG SRC="Jamaica.gif"> 
ein Bild eingesetzt.<P>
Man kann ein <IMG SRC="Brazil.gif" ALIGN="TOP" > 
Bild auch am oberen Textrand ausrichten.<P>
Oder in <IMG SRC="Portugal.gif" ALIGN="MIDDLE" > 
mittlerer Texthöhe. 
<P>
Die Attribute HEIGHT und WIDTH sind für eine 
<IMG SRC="Sweden.gif" HEIGHT=100 WIDTH=100> 
Skalierung des Bildes zuständig.
</BODY>
</HTML>

Übung

Erstellen Sie eine Datei, in der einige Zeilen Text und ein eingebundenes Bild vorkommen. Probieren Sie mehrere Ausrichtungen des Bildes und mehrere Größen des Bildes aus. Testen Sie die Darstellung mit einem Browser.

L.8.1 Bilder als Hyperlinks

BORDER=0

Bilder können auch als Hyperlinks eingesetzt werden. Dabei sollte das Attribut BORDER, mit dessen Hilfe man einen Rahmen um das Bild legen kann, auf den Wert 0 gesetzt werden. Zudem sollte sich kein Leerzeichen zwischen der IMG-Markierung und den Anfangs- und Ende-Markierungen des Hyperlinks befinden. Nachfolgend ein Beispiel:

Abbildung L.6 Bilder als Hyperlink

Zunächst der HTML-Programmcode:

Listing L.6 Datei ul06.htm

<HTML>
<HEAD>
<TITLE>Bilder als Hyperlinks</TITLE>
</HEAD>
<BODY>
Über dieses Bild <A HREF="ul05.htm"><IMG SRC="Uk.gif" BORDER=0>
</A> als Hyperlink kommt man zur vorherigen Datei.
</BODY>
</HTML>

Übung

Erstellen Sie eine Datei, in der einige Zeilen Text und ein eingebundenes Bild vorkommen. Benutzen Sie das Bild als Hyperlink zu einer anderen Datei. Testen Sie die Funktion des Hyperlinks mit einem Browser.

L.9 Formulare

Formulare stellen ein zentrales Element bei der Erstellung von Server-Programmen dar. Sie dienen zur Übermittlung von Informationen vom Betrachter der Internet-Seite zum Server.

FORM

Im nachfolgenden Dokument wird ein Formular mit einer Reihe von Formularelementen dargestellt. Die Markierungen <form> und </form> dienen als logischer Rahmen für das gesamte Formular. Es hat folgende Elemente:

eine Textarea der Größe 15 mal 3

ein Select-Menü (Auswahl-Menü) mit 3 Einträgen, von denen einer ausgewählt werden kann

ein Select-Menü mit 3 Einträgen, von denen mehrere ausgewählt werden können

ein Text-Eingabefeld für maximal 30 Zeichen, 10 Zeichen breit

eine Gruppe von drei Checkboxen (Kontrollkästchen)

eine Gruppe von drei Radio-Buttons (Optionsgruppe)

einen allgemeinen Button

einen Submit-Button

einen Reset-Button

Das beschriebene Formular ist recht umfangreich, daher wird es nachfolgend in zwei Bildern (obere und untere Hälfte) dargestellt:

Abbildung L.7 Eingabe-Formular, obere Hälfte

Abbildung L.8 Eingabe-Formular, untere Hälfte

Der HTML-Programmcode:

Listing L.7 Datei ul07.htm

<HTML>
<BODY>
<H3> Ein Formular </H3>

<FORM>
<P>Eine Textarea von der Größe 15x3:
<TEXTAREA COLS="15" ROWS="3"></TEXTAREA>

<P>Ein Select-Menü mit drei Alternativen, von denen maximal 
eine ausgewählt werden kann:
<SELECT>
<OPTION> Rot</OPTION>
<OPTION SELECTED> Grün</OPTION>
<OPTION> Blau</OPTION>
</SELECT>

<P>Ein Select-Menü mit drei Alternativen, von denen mehrere 
ausgewählt werden können:
<SELECT MULTIPLE>
<OPTION> Rot</OPTION>
<OPTION SELECTED> Grün</OPTION>
<OPTION> Blau</OPTION>
</SELECT>

<P>Ein Input-Feld vom Typ Text für maximal 30 Zeichen in einem 
10 Zeichen breiten Feld (nur bei Nicht-Proportionalschrift). 
TYPE="TEXT" ist Default, falls nichts oder etwas Falsches 
angegeben ist:
<INPUT SIZE="10" MAXLENGTH="30">

<P>Eine Gruppe von drei Checkboxen:
<INPUT TYPE="CHECKBOX" CHECKED> Rot
<INPUT TYPE="CHECKBOX"> Grün
<INPUT TYPE="CHECKBOX"> Blau

<P>Eine Radio-Gruppe mit drei Optionen (Zusammengehörigkeit 
über gleichen Namen, Grün ist voreingestellt):
<INPUT TYPE="RADIO" NAME="opt1"> Rot
<INPUT TYPE="RADIO" NAME="opt1" checked> Grün
<INPUT TYPE="RADIO" NAME="opt1"> Blau

<P>Der Zweck eines <INPUT TYPE="BUTTON" VALUE="Buttons"> ist die 
Ausführung von Programm-Code auf Mausclick.

<P>Submit und Reset des Formulares:
<INPUT TYPE="SUBMIT" VALUE="Abschicken">
<INPUT TYPE="RESET" VALUE="Zurücksetzen">

</FORM>
</BODY>
</HTML>

Übung

Erstellen Sie eine Datei mit einem Formular, das folgende Elemente enthält:

zwei Text-Eingabefelder, Länge jeweils 20 Zeichen

ein Select-Menü mit 5 Einträgen

einen Submit-Button und einen Reset-Button

Testen Sie das Aussehen des Formulares mit einem Browser.

L.10 Listen

UL, OL

In HTML können unnummerierte Listen (Markierung <UL> und </UL>) und nummerierte Listen (<OL> und </OL>) dargestellt werden. Den Einträgen einer ungeordneten Liste ist ein Punkt vorangestellt, den Einträgen einer geordneten Liste eine durchlaufende Nummer.

Die einzelnen Listeneinträge werden mit der Markierung <LI> gekennzeichnet. Listen können ineinander geschachtelt werden. Eine Listenüberschrift wird mit der Markierung <LH> erzeugt. Nachfolgend ein Beispiel:

Abbildung L.9 Listen

Der HTML-Programmcode:

Listing L.8 Datei ul08.htm

<HTML>
<HEAD><TITLE>Listen</TITLE></HEAD>
<BODY>

Eine unnummerierte Liste:
<UL>
   <LI>Markierung
   <LI>Hyperlink
   <LI>Tabelle
   <LI>Liste
</UL>

Eine nummerierte Liste:
<OL>
   <LI>Markierung
   <LI>Hyperlink
   <LI>Tabelle
   <LI>Liste
</OL>

Geschachtelte Listen:
<UL>
   <LI>Markierung
   <LI>Hyperlink
   <OL>
      <LI>Text
      <LI>Bild
   </OL>
   <LI>Tabelle
   <LI>Liste
</UL>

Nummerierte Liste, mit Überschrift:
<OL>
   <LH>Überschrift
   <LI>Markierung
   <LI>Hyperlink
   <LI>Tabelle
   <LI>Liste
</OL>

</BODY>
</HTML>

Übung

Erstellen Sie eine Datei mit einer einfachen ungeordneten Liste und einer einfachen geordneten Liste. Testen Sie die Darstellung mit einem Browser.

Übung

Erstellen Sie eine Datei mit zwei nummerierten Listen. Die Listen sollen jeweils eine Überschrift haben. Die zweite Liste soll geschachtelt innerhalb der ersten Liste dargestellt werden. Testen Sie die Darstellung mit einem Browser.

L.11 Tabellen

Tabellen dienen zur übersichtlichen Darstellung größerer Datenmengen und zur mehrspaltigen Schreibweise in Dokumenten.

L.11.1 Tabelle erzeugen

TABLE, TR, TD

Tabellen werden mit <TABLE> Tabelleninhalt </TABLE> markiert. Eine Tabelle besteht aus einzelnen Zeilen, die mit <TR> Zeileninhalt </TR> gekennzeichnet sind. Eine Zeile besteht aus einzelnen Zellen, die entweder Zeilenköpfe (<TH> Zeilenkopf </TH>) oder normale Einträge sind (<TD> Eintrag </TD>). Zellen, die leer bleiben sollen, dürfen nicht weggelassen werden, sondern müssen mit <TH>   </TH> bzw. <TD>   </TD> als leer gekennzeichnet werden. Es folgt ein Beispiel:

Abbildung L.10 Tabelle, ohne Rahmen

Der HTML-Programmcode:

Listing L.9 Datei ul09.htm

<HTML>
<HEAD><TITLE>Tabellen 1</TITLE></HEAD>
<BODY>
<table>
    <tr>
        <td>Aachen</td>
        <td>Berlin </td>
        <td>Chemnitz</td>
    </tr>
    <tr>
        <td>Düsseldorf</td>
        <td>Essen </td>
        <td>Frankfurt</td>
    </tr>
</table>
</BODY>
</HTML>

Übung

Erzeugen Sie in einer Datei die folgende Tabelle:

Markierung	Bedeutung
Dienstag	Mittwoch
Deutsch	Geschichte
Englisch	Biologie

L.11.2 Breite, horizontale Ausrichtung, Rahmen

WIDTH, ALIGN, BORDER

Mit Hilfe des Attributes WIDTH kann die Breite der Tabelle relativ zur Seitenbreite bzw. die Breite einer Zelle relativ zur Tabellenbreite angegeben werden. In den Markierungen <TR>, <TH> und <TD> kann durch das Attribut ALIGN die Ausrichtung eines Eintrages innerhalb einer Zelle gekennzeichnet werden. Mögliche Werte sind CENTER, LEFT und RIGHT. Soll die Tabelle mit einem Rahmen versehen werden, so verwendet man das Attribut BORDER bei der Markierung <TABLE>. Die nachfolgende Abbildung zeigt ein Beispiel:

Der HTML-Programmcode:

Listing L.10 Datei ul10.htm

<HTML>
<HEAD><TITLE>Tabellen 2</TITLE></HEAD>
<BODY>
<table border width="100%">
    <tr>
        <td width="50%">Aachen</td>
        <td align="right" width="25%">Berlin </td>
        <td width="25%">Chemnitz</td>
    </tr>
    <tr>
        <td width="50%">Düsseldorf</td>
        <td align="center" width="25%">Essen</td>
        <td width="25%">Frankfurt</td>
    </tr>
</table>
</BODY>
</HTML>

Abbildung L.11 Tabelle, mit Rahmen und Zellen-Ausrichtung

Übung

Erzeugen Sie in einer Datei die folgende Tabelle:

Markierung	Bedeutung
Zeit	Mittwoch
9.00	Geschichte
11.00	Biologie

L.11.3 Zellen verbinden, vertikale Ausrichtung

COLSPAN, ROWSPAN, VALIGN

Einträge können sich über mehrere Spalten und/oder Zeilen erstrecken. Dazu werden die Attribute COLSPAN=N bzw. ROWSPAN=M innerhalb von <TH> oder <TD> verwendet. Einträge erstrecken sich damit über N Spalten bzw. M Zeilen. Einträge für die »eingesparten« Zellen dürfen nicht angegeben werden. Die Anzahl der einzelnen oder zusammengefaßten Zeilen und Spalten muss vom Tabellen-Ersteller überwacht werden.

Die vertikale Ausrichtung innerhalb einer Zelle kann mit dem Attribut VALIGN eingestellt werden, mögliche Werte sind: TOP, MIDDLE und BOTTOM. Ein Beispiel:

Abbildung L.12 Tabelle mit verbundenen Zellen und vertikaler Zellenausrichtung

Der HTML-Programmcode:

Listing L.11 Datei ul11.htm

<HTML>
<HEAD><TITLE>Tabellen 3</TITLE></HEAD>
<BODY>
<table border>
    <tr>
        <td rowspan="2" valign="top">Aachen</td>
        <td>Berlin </td>
        <td>Chemnitz</td>
    </tr>
    <tr>
        <td colspan="2" align="right">Essen</td>
    </tr>
</table>
</BODY>
</HTML>

Übung

Erzeugen Sie in einer Datei die folgende Tabelle. Die Spalten für die Wochentage sollen eine einheitliche Breite haben.

Stundenplan
Zeit	Montag	Dienstag	Mittwoch
9.00	Mathematik	Deutsch	Geschichte
11.00	Erdkunde		Physik
13.00	Englisch	Biologie

L.12 Frames

Mit Hilfe von Frames können mehrere HTML-Dokumente gleichzeitig in getrennten Bereichen des Bildschirmes angezeigt werden. Frames werden meist als Navigationshilfe eingesetzt.

Beispiel 1

Kapitel eines Dokumentes

Ein umfangreiches Dokument wird in Kapitel unterteilt, diese Kapitel werden auf verschiedene Dateien verteilt. Ein kleiner Frame beinhaltet das Inhaltsverzeichnis und ist immer zu sehen, der andere Frame zeigt das aktuell ausgewählte Kapitel an.

Beispiel 2

Navigations-Frame

Die Präsentation eines umfangreichen Angebotes wie z. B. eines virtuellen Warenhauses soll realisiert werden. Ein kleiner Frame beinhaltet das Haupt-Menü, also Funktionen, die jederzeit ausführbar sein müssen. Dies wird auch als Navigations-Frame bezeichnet. Der andere Frame zeigt Informationen zum aktuell ausgewählten Artikel an.

L.12.1 Erstellen von Frames

Frame-Hauptseite

Zunächst muss eine Hauptseite erstellt werden, die den Bildschirm in Frames aufteilt. Sie beinhaltet außerdem die URLs der Seiten, die in den einzelnen Frames angezeigt werden. Im Folgenden ein Beispiel mit zwei Frames, die den Bildschirm in zwei Hälften aufteilen. Die linke Hälfte nimmt 40 % der Breite ein, die rechte Hälfte 60 %.

Abbildung L.13 Frames

Hauptseite

Listing L.12 Datei ul12.htm

<HTML>
<HEAD>
<TITLE> Frames, Hauptseite </TITLE>
</HEAD>

<FRAMESET COLS="40%,60%">
   <FRAME SRC="ul12a.htm">
   <FRAME SRC="ul12b.htm">
</FRAMESET>

</HTML>

Linke Seite

Listing L.13 Datei ul12a.htm

<HTML>
<BODY>
Linke Seite
</BODY>
</HTML>

Rechte Seite

Listing L.14 Datei ul12b.htm

<HTML>
<BODY>
Rechte Seite
</BODY>
</HTML>

FRAMESET

Auf der Hauptseite entfällt die Markierung <BODY>, statt dessen wird mit der Markierung <FRAMESET> eine Menge von Frames definiert. Diese Markierung kennt zwei Attribute, COLS und ROWS. Mit Hilfe von COLS wird eine senkrechte Teilung, mit Hilfe von ROWS eine waagrechte Teilung hervorgerufen. Der Wert des Attributes ist eine Zeichenkette, in der die einzelnen Frames durch Komma voneinander getrennt, aufgezählt werden.

COLS, ROWS

Die Größe der einzelnen Frames kann entweder prozentual (s. o.) oder relativ erfolgen. Mit der Angabe <FRAMESET COLS = "2*,3*"> hätte man das o. a. Beispiel ebenfalls erzeugen können. Mit der Angabe <FRAMESET ROWS = "*,*,4*"> wird der Bildschirm in drei Bereiche waagrecht geteilt. Die beiden oberen Bereiche nehmen jeweils ein Sechstel der Höhe ein, der untere den Rest.

Innerhalb der Markierung <FRAME> stehen als Werte des Attributes SRC die URLs der abgebildeten Seiten.

Übung

Erstellen Sie eine Web-Seite mit zwei Frames. Diese sollen übereinander angeordnet sein, der obere soll 20% der Höhe einnehmen, der andere den Rest.

L.12.2 Frames schachteln, Größe verändern

Definitionen von Frames können auch ineinander geschachtelt werden. Dadurch wird im nachfolgenden Beispiel der rechte Bereich des Bildschirmes noch einmal in einen oberen und einen unteren Bereich zerlegt:

Abbildung L.14 Frames, geschachtelt

NORESIZE

Der Benutzer kann die Größe der Frames verändern, außer wenn das Attribut NORESIZE angegeben ist. Im angegebenen Beispiel kann nur die Größe der beiden rechten Frames verändert werden. Falls der Text zu groß für einen Frame ist, wird automatisch ein Scroll-Bar eingeblendet.

Hauptseite

Listing L.15 Datei ul13.htm

<HTML>
<HEAD>
<TITLE> Frames, Hauptseite </TITLE>
</HEAD>

<FRAMESET COLS="*,4*">
   <FRAME SRC=" ul13a.htm" NORESIZE>
   <FRAMESET ROWS="3*,*">
      <FRAME SRC="ul13b.htm">
      <FRAME SRC="ul13c.htm">
   </FRAMESET>
</FRAMESET>

</HTML>

Linke Seite

Listing L.16 Datei ul13a.htm

<HTML><BODY>Linke Seite</BODY></HTML>

Rechte obere Seite

Listing L.17 Datei ul13b.htm

<HTML><BODY>Rechte obere Seite</BODY></HTML>

Rechte untere Seite

Listing L.18 Datei ul13c.htm

<HTML><BODY>Rechte untere Seite</BODY></HTML>

Übung 1.2

Verändern Sie das Beispiel aus der vorherigen Übung. Der obere Frame soll noch einmal in zwei gleich große Hälften zerlegt werden, die nebeneinander angeordnet sind. Der rechte obere soll in seiner Größe unveränderbar sein.

L.12.3 Namen, Targets

NAME, TARGET

Ein Frame kann auch mit einem Namen versehen werden. Diesen Namen legt man mit dem Attribut NAME fest. Ein Beispiel: <FRAME SRC="fr2a.htm" NAME="xyz">. Namen dienen dazu, einzelne Frames für Hyperlinks adressierbar zu machen. So kann mit Hilfe der nachfolgenden Zeile die Seite test.htm in den Frame mit dem Namen »xyz« geladen werden.

<P> <A HREF="test.htm" TARGET = "xyz"> Testseite </A>

Dabei wurde das Attribut TARGET des Hyperlinks verwendet. Existiert kein Frame mit dem genannten Namen, so wird ein neues Fenster mit diesem Namen geöffnet. Es sind außer den eigenen Namen noch systemspezifische Namen bekannt. So bezeichnet der Name _top das gesamte aktuelle Fenster, d. h., alle vorhandenen Frames werden überschrieben.

L.12.4 Beispiel zu Namen und Targets

Im Folgenden ein Beispiel für ein Dokument, das in Titel, Inhaltsverzeichnis und drei Kapitel unterteilt ist. Der Benutzer stößt zunächst auf die Titelseite, die nicht in Frames unterteilt ist. Hier existiert ein Hyperlink zu »Inhalt und Kapitel«, über diesen Hyperlink kommt er zu zwei Frames.

Im linken Teil wird das Inhaltsverzeichnis abgebildet, Hyperlinks zu den drei Kapiteln und zurück zur Titelseite. Der rechte Teil ist zunächst leer. Bei Auswahl eines Kapitels wird es im rechten Teil angezeigt. Außerdem beinhaltet jedes Kapitel Hyperlinks zum jeweils vorigen und nächsten Kapitel.

Titelseite

Abbildung L.15 Titelseite, mit Hyperlink zur Frame-Steuerseite

Der HTML-Programmcode:

Listing L.19 Datei ul14t.htm

<HTML>
<BODY>
<P> Titel:
<P> <A HREF="ul14.htm"> Inhalt und Kapitel </A>
</BODY>
</HTML>

Frame-Steuerseite

Abbildung L.16 Frame-Steuerseite, zunächst mit Kapitel 1

Der HTML-Programmcode:

Listing L.20 Datei ul14.htm

<HTML>
<HEAD>
<TITLE> Frames, Hauptseite </TITLE>
</HEAD>
<FRAMESET COLS="*,4*">
<FRAME SRC="ul14i.htm" NORESIZE>
<FRAME SRC="ul14k1.htm" NAME="kap">
</FRAMESET>
</HTML>

Inhaltsverzeichnis

Listing L.21 Datei ul14i.htm

<HTML>
<BODY>
Inhalt:
<P> <A HREF="ul14k1.htm" TARGET="kap">
     Kapitel 1 </A>
<P> <A HREF="ul14k2.htm" TARGET="kap">
     Kapitel 2 </A>
<P> <A HREF="ul14k3.htm" TARGET="kap">
     Kapitel 3 </A>
<P> <A HREF="ul14t.htm" TARGET="_top">
     Titel </A>
</BODY>
</HTML>

Kapitel 1

Listing L.22 Datei ul14k1.htm

<HTML>
<BODY>
<P> Kapitel 1:
<P> Text des ersten Kapitels
<P> <A HREF="ul14k2.htm"> Nächstes Kapitel </A>
</BODY>
</HTML>

Kapitel 2

Listing L.23 Datei ul14k2.htm

<HTML>
<BODY>
<P> <A HREF="ul14k1.htm"> Voriges Kapitel </A>
<P> Kapitel 2:
<P> Text des zweiten Kapitels
<P> <A HREF="ul14k3.htm"> Nächstes Kapitel </A>
</BODY>
</HTML>

Kapitel 3

Listing L.24 Datei ul14k3.htm

<HTML>
<BODY>
<P> <A HREF="ul14k2.htm"> Voriges Kapitel </A>
<P> Kapitel 3:
<P> Text des dritten Kapitels
</BODY>
</HTML>

Falls man einen Hyperlinks zum nächsten Kapitel auswählt, so sieht das Ergebnis wie folgt aus:

Abbildung L.17 Kapitel 2

Übung

Erzeugen Sie mit Hilfe von Frames eine eigene Navigationshilfe für Suchmaschinen. In einem Bereich sind (immer sichtbar) die Namen und Hyperlinks zu einigen Suchmaschinen (www.yahoo.de, www.lycos.de, www.crawler.de, www.fireball.de) angegeben. Im anderen Bereich wird die Hauptseite der jeweils ausgewählten Suchmaschine abgebildet. Testen Sie das Beispiel mit einem Browser.

L.13 Image Maps

Auf Web-Seiten können nicht nur ganze Bilder als Hyperlinks dienen, man kann auch einzelne Bereiche eines Bildes mit unterschiedlichen Hyperlinks verbinden. Dazu verbindet man die Bilder mit sogenannten »Image Maps«. Die Bereiche auf den Bildern werden auch »Hotspots« genannt.

Landkarte

Beispiel: Es wird eine Landkarte eingeblendet, in der einige Orte mit kleinen Kreisen und dem Ortsnamen angegeben sind. Klickt man auf einen der Kreise, so wird eine Web-Seite mit Informationen zu diesem Ort angezeigt.

Ein Beispiel mit Definition und Nutzung einer Image Map:

Abbildung L.18 Image Map

Der HTML-Programmcode:

Listing L.25 Datei ul15.htm

<HTML>
<HEAD>
<TITLE> Eine Imagemap </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">Eine Imagemap, in der insgesamt vier Hyperlinks 
enthalten sind:</P>

<MAP NAME="imap">
<AREA SHAPE="RECT" COORDS="30,115,130,150"
      HREF="ul15h.htm">
<AREA SHAPE="RECT" COORDS="250,185,380,240"
      HREF="ul15js.htm">
<AREA SHAPE="CIRCLE" COORDS="225,125,30"
      HREF="ul15www.htm">
<AREA SHAPE="POLYGON" COORDS="125,180,80,230,170,230"
      HREF="ul15cgi.htm">
</MAP>

<IMG SRC="www.gif" USEMAP="#imap" BORDER=0>
</BODY>
</HTML>

MAP, AREA, SHAPE, COORDS

Mit Hilfe der Markierung <MAP> wird die Image Map definiert, es muss das Attribut NAME angegeben werden. Diese Image Map ist in mehrere Bereiche unterschiedlicher Form (Markierung <AREA>) aufgeteilt. Mit dem Attribut SHAPE wird die Form des Bereiches angegeben, mit dem Attribut COORDS die Koordinaten der betreffenden Form.

Die Koordinaten werden in x-Richtung vom linken Rand, in y-Richtung vom oberen Rand des Bildschirmes in Pixeln gemessen. Anschließend wird ein Hyperlink auf ein Dokument angegeben, das eingeblendet wird, sobald man in dem angegebenen Bereich des Bildes geklickt hat.

Es gibt die folgenden Bereichsformen:

Rechteck

SHAPE="RECT" COORDS="x1,y1,x2,y2"

Bereich in der Form eines Rechteckes. Die linke obere Ecke wird mit x1,y1 angegeben, die rechte untere Ecke mit x2,y2

Kreis

SHAPE="CIRCLE" COORDS="x1,y1,r"

Bereich in der Form eines Kreises. Der Mittelpunkt wird mit x1,y1 angegeben, der Radius mit r.

Polygon

SHAPE="POLYGON" COORDS="x1,y1,...,xn,yn"

Bereich in der Form einer Fläche, die von einem geschlossenen Polygonzug mit n Ecken begrenzt wird. Die einzelnen Ecken werden mit x1,y1 bis xn,yn angegeben.

Form und Lage der Bereiche sind besonders gut zu erkennen, wenn man den betreffenden Bereich mit der Maus anklickt und die Maus-Taste gedrückt hält.

USEMAP

Die Nutzung der Image Map wird über das Attribut USEMAP der Markierung <IMG> ermöglicht. Der Wert des Attributes SRC ist das eigentliche Bild, das mit Hilfe der Image Map in Bereiche unterteilt wurde. Der Wert des Attributes USEMAP ist der Name der Datei, in der die Image Map definiert ist, gefolgt vom Namen der Image Map.

Übung

Erstellen Sie ein eigenes Beispiel mit je zwei Bereichen in Form eines Rechteckes, eines Kreises und eines Polygons. Testen Sie die Funktion Ihrer Image Map mit einem Browser.

<< zurück

<top>

vor >>