Artikel online Artikel online

HTML-Workshop

In dieser Reihe wollen wir einen Einblick in die Markierungssprache HTML aufzeigen. Eine komplette Anleitung ist aufgrund der Masse aller vorhandenen Befehle natürlich nicht möglich, das Ziel ist die Anregung zur korrekten Anwendung von HTML zur Vorbereitung auf die folgenden Kurse in Javascript und CSS. Als kursbegleitende Software ist einer der im Aminet befindlichen HTML-Editoren wie WebDesign, WebPlug, Metal Web oder auch ein gewöhnlicher Text-Editor wie Cygnus Editor empfohlen.

Web-Links

Folgend finden Sie zunächst die im Artikel "HTML auf dem Amiga" aus der AMIGAplus 10/2001 aufgeführten Links.

Einführung

Das Web liegt in aller Munde und damit auch die Sprache des Web, HTML. Für die Erlernung dieser Auszeichnungssprache muß zunächst deren Abkürzung verinnerlicht werden: HTML bedeutet HyperText-Markup-Language und markiert Elemente im Text zur Formatierung im gewünschten Stil in Paragraphen, Überschriften, Listen oder Tabellen in Kombination mit Grafiken, Animationen, Sounds oder Code. Die Markierungselemente zeigen dabei Anfang und Ende in einer Art Klammer an und können in sich selbst noch weiter verschachtelt werden. Die Web-Browser entschlüsseln diese Formatierungsebenen und stellen das HTML-Dokument auf dem Bildschirm bzw. die externen Dateien (Sound, Code, etc.) auf den entsprechenden Ausgabemöglichkeiten dar. Ein HTML-Text enthält alle HTML-Befehle und den eigentlichen Text im klar leserlichen ASCII-Format. Gerade bei der Verwendung von Text-Editoren bei der Erstellung sollten daher die Elemente übersichtlich angeordnet werden!

Dateinamen

Dateinamen sollten sicherheitshalber dem Standard 8+3 in Kleinschrift angepaßt werden. Dies gilt dann natürlich auch für die Verweise innerhalb der Dokumente, z.B. sollte bei einem Verweis zu einer Grafik <IMG SRC="bild.gif"> die Grafik dann auch bild.gif heißen, nicht "bILd.gIF". Man weiß nie, welche Kniffligkeiten hinter den Server-Betriebssystemen stecken - sicher ist sicher. Bei der Dateibenennung sollte man sich ein Scheme überlegen, um nicht die Übersicht zu verlieren. Auch die Anordnung in verschiedenen Verzeichnissen erscheint zu diesem Zwecke sinnvoll.

Dateiendungen sollten ebenfalls an den Standard angepaßt werden. HTML-Dokumente enden auf *.html oder *.htm, Grafiken auf *.jpg oder *.gif, Applets auf *.class, CSS-Files auf *.css ... insbesondere in Hinblick auf die Default-Datei sollte mit dem Provider abgeklärt werden, welche Datei die Indexseite ist, auf die die Besucher bei Eingabe nur der Domain oder eines Verzeichnisnamens (z.B. www.amigaos.de oder home.t-online.de/home/username/) stoßen. Diese Begrüßungsseite, also die Ausgangsseite jeder Homepage, lautet meist index.htm(l) oder default.htm(l), Abweichungen sind aber möglich!

Tags-Aufbau

Die HTML-Befehle werden auch kurz Tags (gesprochen: täks) genannt und können sowohl in sich verschachtelt werden als auch interne Attribute besitzen oder aber auch ganz für sich alleine stehen (Standalone-Tags). Attribute können verschiedene Formen annehmen, sowohl globale als auch lokale und spezifische als auch allgemeingültige, doch dazu später mehr. Obwohl dies nicht in allen Fällen unbedingt notwendig ist, sollten dennoch alle eingeleiteten Befehle einen abschliessenden End-Tag besitzen, z.B. "<P>...</P>".

Beispiele:

Standalone   erste Zeile,<BR>zweite Zeile nach Umbruch
Verschachtelung <P>Absatztext, <I>kursiv</I> und normal</P>
Attribute <P ALIGN="CENTER">zentrierter Absatztext</P>

Um ganz HTML-konform zu bleiben, sollten alle Wertzuweisungen in Attributen in Anführungszeichen gesetzt werden. Dies ist zwar nicht überall zwingend erforderlich, garantiert aber eine größere Sicherheit.

Grundgerüst

Entsprechend der Verschachtelungs-Idee ist auch das Grundgerüst aufgebaut. Jedes HTML-Dokument muß durch ein <HTML>-Element eingeklammert werden, das wiederum einen Kopf- und Fuß-Teil besitzt (<HEADER> und <BODY>).

Grundgerüst-Aufbau:

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

Im <HEADER> werden allgemeine Informationen über das Dokument verankert. Das <TITLE>-Tag beinhaltet den Titel des Dokuments, der in der Menüleiste des Browsers angezeigt wird.

Im <BODY> steht der eigentliche Inhalt des Dokuments und damit die in diesem Kurs besprochenen Elemente, z.B. <BODY><H1>Meine Überschrift<P>Mein Text mit allen Formatierungen und Absätzen, Grafiken und Animationen.</P></BODY>.

Entsprechend der SGML-Norm sollte vor dem HTML-Tag noch folgende Angabe erscheinen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">. Die Zahl 3.2 entspricht der verwendeten HTML-Version und kann dem eingehaltenen HTML-Standard entsprechend verändert werden, EN steht für die Sprachversion der HTML-Tags, also Englisch, und sollte deshalb nicht verändert werden.

Absatz-Gestaltung

Alle HTML-Dokumente werden in logische Absätze untergliedert, die verschiedene Formen annehmen können.

Paragraphen sind das A und O jedes HTML-Dokumentes zur Gliederung des Textes. Sie werden mit dem Tag <P> gekennzeichnet und beinhalten Text in beliebiger Formatierung. Beispiel: <P>Hier beginnt ein Paragraph in der ersten Zeile,<BR> und hier endet er nach Umbruch in der zweiten Zeile</P>.

Das Tag <BR> bewirkt einen Umbruch des Textes in die nächste Zeile und kann allein stehen. <NOBR> dagegen verhindert einen Zeilenumbruch an der markierten Stelle, während <WBR> eben diesen auch innerhalb von Wörtern hinter Bindestrichen ermöglicht.

Überschriften können den Wert <H1> (höchste Ordnung) bis <H6> (niedrigsten Ordnung) annehmen und so in Größe und Art variieren. Beispiel: <H2>Überschrift zweiter Ordnung</H2>.

Natürlich gibt es noch mehr Formatierungsmöglichkeiten. Besonders wichtig sind dabei noch das Tag <PRE>, das einen Absatz markiert, dessen Text schon im ASCII-Format vorformatiert wurde. Dieses Tag erweist sich als nützlich bei bei Programmsources als Beispiel oder bei Text, der nicht zerstückelt werden soll, insbesondere bei von HTML nicht akzeptierten Tabulatoren. <BLOCKQUOTE> zeigt z.B. Zitate in einem eingerückter, besonders formatierten Absatz an, ebensolches gilt für Adressen mit dem Tag <ADRESS>. Listen werden weiter unten besprochen.

Alle hier genannten Absatz-Markierungen können mit dem ALIGN-Attribut ausgerichtet werden, z.B. <H1 align="center">zentrierte Überschrift ersten Grades</H1> mit den Werten center, right, left oder justify. Sollen mehrere Elemente nach der gleichen Art ausgerichtet werden, so benutzt man das Tag <DIV> bzw. zur zentrierten Ausrichtung direkt <CENTER>. Beispiel: <DIV align="justify"><H1>Überschrift</H1> <P>Absatz 1</P></DIV>.

Text-Gestaltung

In allen oben aufgeführten Absatz-Tags können weitere Tags verschachtelt werden, die für die spezielle Formatierung einzelner Textabschnitte wichtig sind und die auch ineinander weiter verschachtelt werden können!

Zu den physischen Textauszeichnungen, auf deren Aussehen der Endbenutzer keinen Einfluß hat, gehören jeweils nach dem Muster:

<B>fetter Text</B> unter anderem folgende Markierungs-Tags:
fetter Text <B>,
kursiver Text <I>,
unterstrichener Text <U>,
blinkender Text <BLINK>,
durchgestrichener Text <S> oder <STRIKE>,
größerer Text <BIG>,
kleinerer Text (Subscript) <SMALL>,
hochgestellter Text (Superscript) <SUP>,
tiefgestellter Text (Subscript) <SUB> und
Fernschreiber-Text <TT>.

Zu den logischen Textauszeichnungen, deren Erscheinungsbild der Endbenutzer beeinflussen kann, gehören nach demgleichen Muster wie oben unter anderem folgende Markierungs-Tags:
Abkürzung <ACRONYNOM>,
Autor <AUTHOR>,
Zitat <CITE> oder
kurzer Ausschnitt <Q>,
Programmiercode <CODE>,
ungültige Textangabe <DEL>,
gültige Textangabe <INS>,
Definition <DFN>,
normale Betonung <EM>,
starke Betonung <STRONG>,
Tastatureingabe <KBD>,
Sprache <LANG>,
Person <PERSON>,
Beispiel/Sample <SAMP> und
Variable <VAR>.

Weiterhin können natürlich auch verschiedene Schriftarten angewandt werden, jedoch muß vor allzu exotischen Fonts abgeraten werden, da alle auf den HTML-Seiten verwendeten Schriftarten auch auf dem Computer des Benutzers installiert sein müssen, der die Seiten anschaut. Ebenso lassen sich die Schriftgrößen und -farben definieren. Beispiel: <font size="-3" type="Arial,Helvetica" color="blue">Beispiel-Text</FONT> zeigt den Text in Arial-Schrift (bzw. wenn nicht vorhanden in Garamond) in zwei Stufen kleiner als die Normalschrift und in der Farbe blau. Der Umgang mit Farben wird weiter unten näher erklärt.

Weitere Tags

An jeder beliebigen Stelle im Dokument können Kommentare eingesetzt werden, die dem Programmierer zur Wiedererkennen von Textstellen helfen sollen oder auch rechtliche Hinweise enthalten können. Kommentare besitzen die Form "<!-- Kommentar -->". Mehrzeilige Kommentare werden durch "//-->" beendet.

Mit Trennlinien <HR> lassen sich Absätze optisch voneinander trennen. Sowohl der Schatten als auch die Dicke (Pixel und Prozent), die Höhe (nur Pixel) und die Farbe (siehe unten) der Trennlinie lassen sich bestimmen: <HR noshade align="center" width="50%" height="2" color="black">.

Listen

Äußerster Beliebtheit bei Web-Programmierern erfreuen sich auch Listen, die ebenfalls ineinander verschachtelt werden können und die in diversen Formen auftreten können: zum einen als geordnete Listen <OL> mit den Attributen type="A" (A,B,C), type="a" (a,b,c), type="I" (I,II,III) und type="i" (i,ii,iii) oder ohne Attribut (1,2,3), zum anderen als ungeordnete Listen <UL> mit den Attributen type="square" (Kreis), type="circle" (Rechteck), type="disc" (Oval) oder ohne Attribut (normaler Listenpunkt). Die Listenelemente werden durch <LI>...</LI> gekennzeichnet.

Beispiel:
<OL type="A">
<LI>Oberpunkt 1
<UL type="circle">
<LI>Unterpunkt 1</LI>
<LI>Unterpunkt 2</LI>
</UL>
</LI>
<LI>Oberpunkt 2
<UL type="square">

<LI>Unterpunkt 3</LI>
<LI>Unterpunkt 4</LI>
</UL>
</LI>
</OL>.

Eine andere Möglichkeit zur Auflistung bieten Definitionslisten, die ähnlich wie ein Lexikon strukturiert sind.

Aufbau:
<DL>
<DT>Begriff 1</DT>
<DD>Definition Begriff 1</DD>
<DT>Begriff 2</DT>
<DD>Definition Begriff 2</DD>
</DL>.

Sonderzeichen

HTML verwendet für länderspezifische oder HTML-eigene Sonderzeichen Umschreibungen, die im HTML-Text implementiert werden müssen. Sie lauten z.B. " " für ein zusätzliches Leerzeichen, "ü" (ü), "Ü" (Ü), "ä" (ä), "Ä" (Ä), "ö" (ö), "Ö" (Ö), "ß" (ß), "<" (<), ">" (>), "&" (&) oder """ (").

Farben

Nichts kann das Auge mehr locken als Farben - dennoch sollte man die Augen seiner Besucher auch auf der Webseite durch zu viel Farbpracht nicht überstrapazieren, sondern ein angenehmes Mittelmaß finden. Farben können fast allen Elementen zugeordnet werden, ob als Hintergrundfarbe im BODY- oder einem Tabellen-Element oder als Schriftfarbe. Es gibt mehrere Möglichkeiten zur Farbkodierung.

In der hexadezimalen Darstellung müssen die Farben im Schema #000000 definiert werden, wobei jede Ziffer entsprechend der hexadezimalen Zählweise die Werte 0 bis 9 und A bis F annehmen kann. Demnach erhält man pro Ziffer 16 Zustände und pro Farbwert im RGB-Standard 256 (16*16) Zustände. Die ersten beiden Ziffern stehen für den Rot-Anteil, die zweiten regeln für den Grün-Anteil und die dritten den Blau-Anteil. Beispiele: schwarz bedeutet #000000, rot #FF0000 und weiß #FFFFFF. Diese Regelung ist relativ umständlich, wenn die hexadezimale Zählweise nicht bekannt ist.

Findige Entwickler haben sich daher einen Standard für die 16 Grundfarben ausgedacht, bei dem nur noch die Farbe im Wortlaut angegeben werden muß, z.B. black, white, red, blue, green, aqua, yellow, usw., einige Browser unterstützen auch Angaben wie darkred oder violet, also Mischungen der Grundfarben.

In beiden Fällen werden die Attribute zum Anfangs-Tag gesetzt, z.B. <BODY BGCOLOR="WHITE"> bzw. <BODY BGCOLOR="#FFFFFF"> für die Hintergrundfarbe weiß oder <P><FONT COLOR="0000FF">blaue Schrift</FONT></P>. Gleiches gilt als Attribut für die Farben Texten und Verweisen aller Art sowie für Hintergrundfarben von Tabellen. Beispiel: <BODY bgcolor="black" text="yellow" link="white" vlink="violet" alink="blue">. Hier werden die Farben für den Hintergrund, den allgemeinen Text, die noch nicht besuchten, bereits besuchten und gerade angeklickten Links definiert.

Verweise - Von Links und Ankern

Kaum etwas prägt den Charakter von HTML so sehr wie dessen Merkmal, Dateien durch Verweise mit anderen Dateien zu verbinden. In der HTML-Seite werden diese Verweise in Form von Links durch ANCHOR-Tags und Hyper-References (Anker und Referenzen) implementiert. So entsteht beispielsweise die Möglichkeit einer Index-Seite, die wie ein Inhaltsverzeichnis alle Dokumente eines Zusammenhangs auflisten kann.

Links können im Sinne des World Wide Web zu einer Datei sowohl auf einem lokalen System als auch auf anderen, entfernten Servern führen. Das "Ziel" kann fast jede beliebige Datei umschreiben, also nicht nur HTML-Dateien.

Für die Ausführung der Zieldatei muß ein Browser-internes oder -externes Plug-In installiert sein. So werden zum Beispiel HTML- oder TXT-Texte und Grafiken direkt angezeigt, Sounds mit einem externen Player abgespielt, Java bzw. JavaScript durch den Browser interpretiert (falls möglich) oder Zip- und LHA-Pakete zum Download angeboten. Wenn der Browser den File-Typ nicht kennt, wird in der Regel der Benutzer gefragt, was mit der Datei passieren soll. Zur Auswahl stehen dann der Download oder die Auswahl eines externen Programmes zur Ausgabe.

Der Aufbau eines Links ist immer gleich: <A HREF="Ziel">Information</A>. A steht für Anker/Anchor und kennzeichnet den Verweis, mit HREF wird die Zieldatei bestimmt. Im Informations-Teil zwischen den beiden Tags können sachdienliche Informationen über den Verweis gegeben werden, die aus Text oder Grafik bestehen können.

Ein komplexes Beispiel: <P>Bitte klicken <A HREF="http://www.amigaos.de/index.htm"> <IMG src="pics/logo.gif"> hier für weitere Informationen</A> zu unserer Zeitung.</P>

Verweise im World Wide Web (Muster):

Datei im gleichen Ordner   <A href="datei.htm"></A>
Datei im untergeordneten Ordner <A href="links/datei.htm"></A>
Datei im übergeordneten Ordner <A href="../datei.htm"></A>
Datei auf entferntem WWW-Server <A href="http://www.amigaplus.de/datei.htm"></A>

Im selben Schema werden Dateien zum Download bereitgestellt, z.B. <A href="sammlung/artikel.zip">Artikel-Sammlung</A>.

Bei Dateien, die in einem lokalen Verzeichnis bzw. auf einem anderen lokalen Laufwerk am eigenen Rechner oder in einem Netzwerk mit Laufwerks-Angaben liegen, sollte der absolute Pfad mit der Angabe "file://localhost/" bzw. "file:///" angegeben werden, z.B. <A href="file://localhost/c:/docs/file.htm>...</A>.

Verweise in anderen Diensten:

Auch kann aus dem Web heraus auf andere Dienste im Internet verwiesen werden, nicht nur auf den Dienst WWW (HTTP) selbst. Für den aufgerufenen Dienst muß ein Client-Tool oder -Protokoll im Browser des Benutzers eingebunden sein. Beispiele:

<A href="ftp://ftp.funet.fi">FTP-Server (Hauptverzeichnis)</A>
<A href="ftp://ftp.wustl.edu/pub/aminet/demo/mag/TSG_Last.lha">FTP-Server (Datei)</A>
<A href="telnet://filadelfia.hut.fi">Telnet-Server (Hauptverzeichnis)</A>
<A href="news:comp.sys.amiga.announce">Newsgroup-Verzeichnis (Übersicht)</A>
<A href="gopher://gopher.system.org:70/1">Gopher-Server (Hauptverzeichnis)</A>
<A href="gopher://gopher.system.org:70/00/txt">Gopher-Server (Datei)</A>

Verweise lassen sich auch auf E-Mail-Adressen lenken, so daß beim Klick auf den Link eine E-Mail an die angegebene Adresse geschickt werden kann, soweit ein entsprechendes Programm im Browser konfiguriert wurde. Beispiel: <A href="mailto:nico@barbat.de">Mail an Nico Barbat</A>.

Interne Verweise

Einen Sonderfall stellen Verweise innerhalb von HTML-Dateien auf andere Stellen im Text, so daß der Benutzer durch einen Klick auf einen Link an einer Stelle innerhalb oder außerhalb des Dokuments an diese markierte Stelle gelangt. Die Stelle, zu der der Benutzer geführt werden soll, wird nach dem Schema "<A name="bezeichnung">...</A>" definiert. Die Stelle, über die der Benutzer zu der gewünschten Markierung gelangt, wird durch <A href="#bezeichnung">...</A> gekennzeichnet. Wenn sich die markierte Textstelle in einer anderen Datei befindet, so muß dieser Anker entsprechend an den Dateinamen im HREF-Attribut angehängt werden. Beispiel für eine solche Sprungstelle: <A href="texte/datei.htm#bezeichnung">...</A>.

Besonders im Fall von Links ist eine besondere Beachtung auf die Namensgebung von Dateien inklusive der exakten Klein- und Großschreibung zu legen, damit der Browser bzw. das System die gesuchten Dateien findet. Unser liebster Freund läßt herzlich grüßen.

Grafiken - Schön und bunt

Mehr noch als lose Zuweisungen von Farben zu einzelnen Objekten tragen Grafiken einen wichtigen Teil zur optisch ansprechend gestalteten Web-Seite bei. Da Grafiken als externe Dateien vorliegen, haben wir es auch hier mit einem Fall von Verweisen zu tun.

Optische Aufbesserung fängt schon bei einem schönen Hintergrundbild an - kein Muß, aber bei guter Wahl eine gute Möglichkeit zur Aufwertung der Seite. Hintergrundbilder, auch Textures, Backgrounds oder Wallpapers genannt, sollten jedoch wie alle Grafiken mit Rücksicht auf lange Ladezeiten mit Bedacht eingesetzt werden. Auch kleine Grafiken weisen gerade bei Textures oft eine gute Qualität auf, wenn man bedenkt, daß diese Hintergrundbilder auf den Seiten gekachelt, das heißt aneinandergereiht werden und so einen durchgehenden Hintergrund bilden. Textures müssen im BODY-Tag definiert werden. Beispiel: <BODY background="texture.jpg">

Alle verwendeten Grafiken sollten in den gängigen Formaten GIF oder JPG vorliegen. Auf dem Amiga ist zur Darstellung dieser Formate derzeit noch ein externes Datatype (z.B. akJPEG o.ä.) notwendig. Anzumerken ist bei GIF-Images als Cliparts noch die Option, deren Hintergründe transparent zu gestalten. So liegt das im Bild dargestellte Objekt direkt und ohne störende Ränder auf der Seite.

Der Bezug zu einer Grafik wird durch das Tag <IMG> hergestellt. Beispiel: <IMG src="bild.gif">. SRC folgt dem gleichen Muster wie das HREF-Attribut bei normalen Verweisen (siehe oben).

Beispiele (Bild im gleichen Ordner wie die aktuell sichtbare HTML-Datei): <IMG src="bild.gif">

IMG benötigt kein abschließendes Tag, sondern kann ganz alleine für sich stehen. Selbstverständlich kann es wiederum mehrere Attribute annehmen.

Zu empfehlen sind in jedem Fall die Angabe der Höhe und der Breite des Bildes, damit schon beim Seitenaufbau die korrekte Größe der Images beachtet und so auch deren Umgebung richtig angeordnet werden kann. Dies geschieht durch die Tags "width" und "height" mit dem Pixelwert.

Ebenfalls fast schon obligatorisch ist die Angabe eines alternativen Textes mit dem Attribut "alt". Der alternative Text wird während des Seitenaufbaus, bei nicht gefundener Grafik und in einigen Browsern auch als "Bubble Info" angezeigt.

Zu guter Letzt ist auch das Attribut "align" nicht zu vernachlässigen, mit dem das Image horizontal (top, middle, bottom) und vertikal (right, center, left, justify) ausgerichtet werden kann. Für Abstand zwischen Bild und Text kann mit dem dazugehörigen Attribut vspace (vertikaler) bzw. hspace (horizontaler Abstand), jeweil in Pixeln gesorgt werden. Für die Ausrichtung von Bildern im Zusammenspiel mit Text scheint jedoch der Einsatz von Tabellen ratsamer.

Optionalen Charakter haben darüber hinaus die Attribute "name" für die Zuweisung eines Namens für das Bild in Zusammenhang zum Beispiel mit Javascripts und "border" für einen das Bild umgebenden (Farb)-Rahmen (in Pixeln).

Folgend ein komplexes Beispiel: <IMG src="http://www.barbat.de/nb/pics/maus3.gif" width="160" height="198" alt="niedliche Maus" name="maus" border="2" bordercolor="grey" align="middle" hspace="20" vspace="20">

Grafiken als Verweise

Natürlich kann eine Grafik auch als Symbol für einen Link stehen. Der durch den Anker bewirkten Rahmen um das Bild kann durch das Attribut "border" unterdrückt werden. Beispiel (Maus-Bild verweist auf eine Info-Seite): <A HREF="maus_info.htm"><IMG SRC="maus3.gif" border="0"></A>. Grafische Verweise innerhalb von Texten sollten nicht höher als 10 Pixel sein, damit der Zeilenabstand nicht unregelmäßig groß wird.

Einen Sonderfall stellen Image Maps dar. Sie unterteilen Bilder in mehrere Teilbereiche, die unterschiedlichen Links zugeordnet sind und so zu unterschiedlichen Seiten führen. Die Aufteilung von Image Maps mit einem Text-Editor erweist sich schnell als mühselige Abzählerei der Pixel der Grafik. Zu der Verwendung eines Image-Map-Editors, mit dem das Bild durch vorgegebene Formen (Shapes) aufgeteilt und die Anker autmatisch gesetzt werden können, wird hiermit ausdrücklich geraten. Ein gutes Programm für diese Zwecke ist MapPlug, das im Aminet und auf der Webpage des Autors (www2.minorisa.es/~stv) erhältlich ist.

Wer sein Image nichtsdestotrotz per Hand zerstückeln möchte, dem sei das folgende Muster nahegelegt: <MAP name="imagemap"> <area shape="xxx" coords="xxx,xxx,xxx,xxx" href="xxx"> <area shape="xxx" coords="xxx,xxx,xxx,xxx" nohref></MAP> <IMG src="bild.gif" usemap="#imagemap" border="0">. Name und Usemap-Name sind Referenzen und müssen daher übereinstimmen. Das Shape, d.h. die Fläche, die im Bld angeklickt werden kann, kann ein Rechteck (rect), ein Kreis (circle) oder ein Vieleck (polygon) sein, wonach sich dann auch die Koordinaten (coords in Pixeln) richten - spätestens jetzt werden die letzten Nicht-Mathematiker zu einem nützlichen Image-Editor greifen. Natürlich lassen sich beliebig viele solcher Areas anlegen. Man ist nicht, wie im Muster, auf zwei Bereiche beschränkt. Allen Areas sollten Links auf die bekannte Weise zugewiesen werden. Soll an einer Stelle kein Verweis sein, muß dies durch "nohref" gekennzeichnet sein.

Tabellen

Grundgerüst

Tabellen sind angenehme Bestandteile von HTML, deren Einsatz das Layout erheblich erleichtert. Objekte können mit Hilfe von Tabellen, die selbst als einzelne Absatze zu betrachten sind, genauer im Fenster positioniert werden.

Tabellen werden mit einem speziellen Tag eingeleitet und beendet: <TABLE>...</TABLE>. Eine Tabelle gliedert sich in Tabellenzeilen (table rows) <TR></TR> auf, die wiederum mehrere Tabellenzellen (table datas) <TD></TD> besitzen können. In der ersten Tabellenzeile können die Tabellenzellen <TD></TD> durch Tabellenüberschriften (table headers) <TH></TH> ersetzt werden.

In den Zellen können jedweige Inhalte stehen: einfache Texte, Paragraphen, Header, Grafiken oder gar weitere Tabellen! So lassen sich auf einfachstem Wege mehrspaltige Seiten erstellen!

Einige Eigenschaften von Tabellen werden noch nicht von allen Browsern einschließlich den Amiga-Browsern und Netscape 4.0 interpretiert. Das gilt zum Beispiel für die Angabe von Kopf (table header, <THEAD>), Körper (table body, <TBODY>) und Fuß (table footer, <TFOOT>) einer Tabelle zur weiteren Untergliederung der Tabelle. Diese Angabe ist jedoch nicht unbedingt erforderlich!

Muster-Aufbau:

<TABLE BORDER=1><THEAD> <TR><TH>Header Z.1 Sp.1</TH><TH>Header Z.1 Sp.2</TH></TR> </THEAD><TBODY> <TR><TD>Inhalt Z.2 Sp.1</TD><TD>Inhalt Z.2 Sp.2</TD></TR> <TR><TD>Inhalt Z.3 Sp.1</TD><TD>Inhalt Z.3 Sp.2</TD></TR> </TBODY><TFOOT> <TR><TD>Inhalt Z.4 Sp.1</TD><TD>Inhalt Z.4 Sp.2</TD></TR> </TFOOT></TABLE>

Aussehen von Tabellen

Das Aussehen von Tabellen kann weiterhin durch mehrere Attribute verändert werden.

Attribute von Tabellen <TABLE>

border=[Pixel]   Breite des Außenrahmens, z.B. border="0" (kein Rahmen)
frame=[Variable] Bestimmung der angezeigten Außenränder, z.B. =box (alle), =void (keiner), =above (oben), =below (unten), =hsides (oben und unten), =vsides (links und rechts), =lhs (links), =rhs (rechts)
cellpadding=[Pixel] Abstand zwischen Inhalt und Rand einer Zelle
cellspacing=[Pixel] Breite der Gitternetzlinien bzw. des inneren Rahmens
align=[Variable] vertikale Ausrichtung einer Tabelle: =left (links), =right (rechts), =center (zentriert)
rules=[Variable] Bestimmung der angezeigten Gitternetzlinien, z.B. =all (alle), =none (keine), =cols (nur zwischen Spalten), =rows (nur zwischen Linien), =groups (zwischen Kopf, Körper und Fuß)
width=[Pixel] Gesamtbreite der Tabelle in Pixeln oder Prozent, z.B. width="100%" für die gesamte Fensterbreite
height=[Pixel] Gesamthöhe der Tabelle in Pixeln; die Angabe wird bei größerem Inhalt ignoriert
background=[Datei] Hintergrundbild einer Tabelle
bgcolor=[Hex] Hintergrundfarbe einer Tabelle, z.B. =#000000 (schwarz); siehe Workshop-Teil 1
bordercolor=[Hex] Hintergrundfarbe aller Tabellenränder, z.B. =#000000 (schwarz); siehe Workshop-Teil 1;
summary=[Text] Informations-Text zu einer Tabelle

Attribute von Tabellenzellen <TD> oder <TH>

width=[Pixel]   Breite der Spalte in Pixeln oder Prozent; einmalige Angabe in einer Zelle genügt für alle Zellen dieser Spalte
height=[Pixel] Höhe einer Zeile; die einmalige Angabe in einer Zelle genügt für alle Zellen in dieser Zeile
nowrap Verhinderung eines Zeilenumbruchs in einer Zelle; wichtig bei zusammenhängendem Text oder bei Grafiken; jede Zelle einzeln definieren
align=[Variable] horizontale Ausrichtung des Inhalts einer Zelle: =left (links), =center (zentriert), =right (rechts) oder =justify (Blocksatz)
valign=[Variable] vertikale Ausrichtung des Inhalts einer Zelle: =bottom (unten), =top (oben), =baseline (Basislinie), =middle (Mitte, ist Voreinstellung und muß daher nicht definiert werden)
background=[Datei] Hintergrundbild einer Zelle
bgcolor=[Hex] Hintergrundfarbe einer Zelle, z.B. =#000000 (schwarz); siehe Workshop-Teil 1

Einige Attribute der Tabellenzellen können auch für eine ganze Tabellenzeile definiert werden, d.h. alle Zellen einer Zeile werden gleich behandelt: Höhe (height), Ausrichtung (horizontale align), valign (vertikale Ausrichtung) und bgcolor (Hintergrundfarbe).

Zellen verbinden

Zellen lassen sich sowohl in einer Zeile als auch in einer Spalte beides gleichzeitig verbinden, so daß einige Zellen größer werden als andere. Dies geschieht durch die Befehle <colspan=[Zahl]> (Spalten) bzw. <rowspan=[Zahl]> (Zeilen).

Grundgerüst-Schema: <TABLE><TR> <TD colspan=2>große Zelle in Zeile 1</TD></TR><TR><TD> Zelle 1 in Zeile 1</TD><TD>Zelle 1 in Zeile 1</TD></TR></TABLE>.

Anmerkungen

Tabellen können Überschriften bzw. Unterschriften besitzen. Diese werden direkt hinter dem TABLE-Tag definiert: <CAPTION>Text</CAPTION>. Mit dem bekannten Attribut "align=[Variable]" können die Beschriftungen nach dem bekannten Schema definiert werden.

Die Angabe einer Gesamthöhe oder -breite im TABLE-Tag hat in jedem Fall Vorrang vor der Angabe der Höhe oder Breite einer einzelnen Zelle, Spalte oder Zeile!

Zellen ohne Inhalt werden meistens nicht dargestellt. Soll der Rand dennoch angezeigt werden, so reicht die Formulierung <TD>%#160;</TD> für ein zusätzliches Leerzeichen als Inhalt.

Damit Tabellengerüste schon vor der Anzeige der ersten Grafiken und Texte angezeigt werden und der Bildaufbau schneller ablaufen kann, sollte man in der Tabelle noch eine zusätzliche Information direkt hinter dem TABLE-Tag einbauen. Mit <colgroup></colgroup> und den darin enthaltenen Tags <col width=[Wert]> (ohne End-Tag) werden die einzelnen Spalten vordefiniert. Für jede Spalte muß solch ein COL-Tag vorhanden sein. Der Wert kann in Pixeln, Prozent oder im Verhältnis zueinander (Wert*) angegeben werden. Eine Alternative hierzu ist die Verwendung der Attribute WIDTH und SPAN im COLGROUP-Tag. <COLGROUP width=100 span=5></COLGROUP> würde beispielsweise eine Tabelle mit 5 Spalten und einer Breite von 500 Pixeln vordefinieren. Auch die Verwendung dieses Befehls in Reihenfolge ist möglich, so daß z.B. erst 2 Spalten mit einer Breite, dann 1 Spalte mit einer anderen Breite definiert werden.

Frames

An Frames scheiden sich die Geister - die einen lieben sie, die anderen hassen sie. Ihre Funktion ist klar: sie teilen das Anzeigefenster des Browsers in verschiedene Bereiche, die dann unterschiedlichen HTML-Dokumenten zugeordnet werden können. Ihre Vor- und Nachteile liegen auf der Hand: durch mehrere Dateien verlängert sich natürlich die Zeit für das Laden der Startseite. Danach aber dauert der Bildaufbau wesentlich kürzer, weil die wichtigsten Elemente, insbesondere speicheraufwendige Grafiken, im festen Frame-Fenster positioniert sind und so nicht mehr geladen werden müssen. Andererseits bringen Frames auch mehr Arbeit mit sich, da das Gerüst einer Seite weiter untergliedert wird.

Sinnvoll ist der Umgang mit Frames vor allem bei Einstiegsseiten wie "index.htm". In unserem Beispiel wollen wir solch eine Index-Seite beschreiben und diese in einen oberen horizontalen Frame und zwei untere vertikale Frames unterteilen - sozusagen "learning by doing".

Frames müssen in der Startseite mit dem Tag <FRAMESET>...</FRAMESET> zwischen den Tags </HEAD> und </HTML> definiert werden. Im BODY können Informationen stehen, die nur angezeigt werden, wenn der Browser des Benutzers keine Frames interpretieren kann. Dies ist aber bei keinem modernen Browser mehr der Fall. Der BODY-Bereich wird durch die beiden Tags <NOFRAMES>...</NOFRAMES> eingeklammert.

Der Grundaufbau einer HTML-Datei mit Frames sieht also wie folgt aus: <HTML><HEAD><TITLE>Titel</TITLE></HEAD><FRAMESET>(Definitionen)<NOFRAMES> <BODY>Text</BODY></NOFRAMES></FRAMESET></HTML>.

Im nachfolgenden Text wird nur noch der Teil "<FRAMESET>(Definitionen)" erklärt. Der Rest erübrigt sich oder wurde bereits vorher erläutert.

Im <FRAMESET> werden weitere Angaben zu den einzelnen Bereichen gemacht, sowohl als Attribut als auch als weiter untergliederte Tags. <FRAMESET> besitzt zunächst die Attribute rows=[Angabe] oder (!) cols=[Angabe]. Rows unterteilt ähnlich wie in Tabellen das Fenster in Zeilen, cols dagegen in Spalten. Die Angabe erfolgt in Prozent, in Pixeln oder als relative Zahl. Im vorliegenden Fall muß zuerst der obere und der untere (größere) Frame markiert werden: <FRAMESET ROWS="25%,75%>.

Attribute von <FRAMESET>

cols=[Zahl/Prozent]   Frame-Einteilung in Spalten
rows=[Zahl/Prozent] Frame-Einteilung in Spalten
border=[Pixel] Größe des Frame-Rahmens
frameborder=[Pixel] Größe des Frame-Rahmens
framespacing=[Pixel] Abstand zwischen Frames
bordercolor=[Hex] Farbe des Rahmens, siehe Workshop Teil 1

Da der obere Frame nicht weiter unterteilt ist, muß dieser nun durch das Standalone-Tag <FRAME> genauer beschrieben werden.

Attribute von <FRAME>

src=[Datei.htm]   bestimmt die Datei, die in den Frame geladen und angezeigt werden soll (siehe Verweise, Teil 2)
name=[Text]" Zuweisung eines Namens zu einem Frame (wichtig)
scrolling=[Variable] Art des Scrollings/Scrollbalkens im Frame: =no (nie), =yes (immer), =auto (automatisch)
marginwidth=[Pixel] Höhe des Rahmens (normal: 3)
marginheight=[Pixel] Breite des Rahmens (normal: 3)
frameborder=[Pixel] Größe des Frame-Rahmens (normal: 3)
noresize Angabe, damit Frame nicht vergrößert werden darf

Im vorliegenden, einfachen Fall definieren wir den oberen, schmalen Frame als <FRAME SRC="datei1.htm" NAME="oben" SCROLLING="NO">. Der untere Frame (75%) dagegen wird noch einmal nach dem selben Muster unterteilt in einen linken, schmalen und einen rechten, breiten Frame. Der linke Frame ist hier 150 Pixel breit, der rechte nimmt den gesamten Rest des Browserfensters ein: <FRAMESET COLS="200,*"><FRAME SRC="datei2.htm" NAME="links" SCROLLING="YES"><FRAME SRC="datei3.htm" NAME="rechts" SCROLLING="YES"></FRAMESET>

Zusammengesetzt erhalten wir den folgenden, kleinen, aber feinen Aufbau unserer Datei:

<HTML><HEAD><TITLE>Titel</TITLE></HEAD><FRAMESET ROWS="25%,75%"> <FRAME SRC="datei1.htm" NAME="oben" SCROLLING="NO"> <FRAMESET COLS="200,*"><FRAME SRC="datei2.htm" NAME="links" SCROLLING="YES"><FRAME SRC="datei3.htm" NAME="rechts" SCROLLING="YES"> </FRAMESET><NOFRAMES><BODY>Text</BODY></NOFRAMES></FRAMESET></HTML>.

Ansteuerung von Frames

Da Frames unterschiedliche HTML-Dateien anzeigen, muß bei Verweisen nach dem Prinzip von Hypertext gearbeitet werden. Soll durch den Klick auf einen Verweis in einem Frame die Zieldatei des Verweises in einem anderen Frame angezeigt werden, so muß innerhalb des Verweises dieses Zielfenster, d.h. der gewünschte Frame, angegeben werden. Der Name des Zielframes muß natürlich mit dem Attribut name=[Variable] im FRAME-Tag vergeben worden sein. In unserem Beispiel befindet sich ein Link im linken unteren Frame, dessen Zieldatei-Inhalt im rechten Frame geöffnet werden soll: <A HREF="datei.htm" target="rechts">Info</A>. Die Groß- und Kleinschreibung muß bei der Namensgebung beachtet werden!

Soll die alte Framestruktur beim neuen Verweis aufgelöst werden, so reicht als Angabe von target die Bezeichnung "_top" (Löschen der Struktur), "_blank" (neues Fenster öffnen) oder "_parent" (Struktur wie vor dem Laden des Framesets).

Meta-Tags

Meta-Tags sind im HTML-Code verborgen und so nicht direkt für den Besucher einer Seite ersichtlich. Sie wurden von W3C in den HTML Standard aufgenommen, um eine gemeinsame Basis für Suchmaschinen zu schaffen. Die Search Engines bzw. deren "Angestellten", die quirligen Spider, durchschauen automatisch das Web auf der Suche nach diesen Meta-Informationen auf den Web-Servern und kategorisieren den Inhalt einer Webseite. Das Ergebnis wird dann den Benutzern der Suchmaschine bei der Eingabe eines Begriffs vorgesetzt - ob die Informationen stimmen oder auch nicht.

Aus diesem Grund sollte im Webdesign nicht nur auf die optische Ebene Wert gelegt werden. Auch oder vielleicht besonders die technische Ebene muß berücksichtigt werden und nicht nur für den Internet Explorer und den Navigator, sondern auch für die Suchmaschinen als eigene Spezies von Browsern ausgerichtet sein. Meta-Tags sollten daher zumindest auf keiner Einstiegsseite fehlen!

Es ist wohl im Sinne des Webs, daß die Informationen auf der Webseite den Angaben in den Meta-Tags entsprechen. Nichts ist ärgerlicher, als bei der Eingabe zum Beispiel eines Begriffs wie "Natur" auf tausende von bunter Seiten mit pornographischem Inhalt zu stoßen.

Meta-Angaben werden innerhalb des HEAD-Tags eines HTML-Textes eingesetzt und stehen alleine, d.h. ohne End-Tag. Der Grundaufbau ist immer gleich:

<META name=[Variable] lang=[Sprache] content=[Inhalt]>

Das W3-Konsortium sieht unter anderem folgende Meta-Tags vor:

VARIABLE   INHALT
description kurze Beschreibung
keywords Schlüsselwörter
author Autor der Seite
date Erstellungsdatum
robots Verbot der Suchmaschinen-Indizierung
generator Name des verwendeten HTML-Editors

Die Sprache (Attribut "lang") kann, muß aber nicht definiert werden und darf ohnehin nur in Kombination mit "description" und "keywords" auftreten. "Lang" ist dann sinnvoll, wenn verschiedene Sprachen als Auswahl für die Suchmaschinen angeboten werden sollen. Die Abkürzungen entsprechen den bekannten Internet-Normierungen, z.B. de=Deutsch, us-en=Englisch, fr=Französisch, se=Schwedisch, usw.

Darüber hinaus gibt es etliche andere Meta-Tags für Suchmaschinen nach den Vorstellungen des Dublin Core Konsortiums. Die Aufzählung würde hier aber den Rahmen des Möglichen sprengen, zumal die beinhalteten Tags von den meisten Search Engines (noch) nicht berücksichtigt werden.

Eine andere Gruppe von Meta-Tags richten sich nicht an die Suchmaschinen, sondern an die Browser. In ihnen werden Informationen über verwendete Sprachen im Dokument gegeben bzw. bestimmt, ob oder ab wann die Datei wieder vom Server und nicht aus dem Browser-Cache gelesen werden soll.

Alle Arten von Meta-Tags können beliebig kombiniert werden.

Die Meta-Angaben der Homepage der amigaOS könnten zusammengefaßt beispielsweise so aussehen:

<META name="description" lang="de" content="Homepage der amigaOS - Das Amiga-Magazin">
<META name="description" lang="en-us" content="Homepage of amigaOS - The Amiga-Magazine">
<META name="keywords" lang="de" content="amigaOS, Amiga, Computer, News, Aktuelles, Magazin, usw.">
<META name="keywords" lang="us-en" content="amigaOS, Amiga, Computer, News, Magazine, usw.">
<META name="author" content="amigaOS Team">
<META name="generator" content="Amiga MetalWeb 2.1">
<META name="date" content="1998-12-24T12:30:00+00:00">
<META name="robots" content="none">
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
<META http-equiv="content-style-type" content="text/css">
<META http-equiv="content-script-type" content="text/javascript">
<META http-equiv="expires" content="0"><!-- Datei immer vom Server laden -->

Formulare

Kommen wir zum letzten Schwerpunkt dieses Workshops, der Vorbereitung auf den folgenden JavaScript-Kurs. Formulare ebnen den Weg von der einseitigen Präsentation zur interaktiven Webpage. Sie dienen generell der Kommunikation zwischen den beiden Seiten, dem Anbieter und dem Nutzer. Der Benutzer kann interaktiv eingreifen: er kann zum Beispiel auf Knopfdruck eine Email versenden, Warenkörbe zusammenstellen und Online-Bestellungen aufgeben, Suchmaschinen nutzen oder eigene Daten dazu beisteuern, sich in Gästebücher eintragen und vieles mehr.

Richtig komfortabel und damit auch etwas komplizierter in der Strukturwird der Umgang mit Formularen durch den Einsatz von JavaScripts. An dieser Stelle wird jedoch zunächst nur gezeigt, welche Elemente überhaupt in HTML existieren und wie sie eingesetzt werden können.

Grundaufbau: FORM-Tag

Der Grundaufbau von Formularen ist simpel: <FORM></FORM>. Zwischen den beiden Tags können sowohl Elemente des Formulars wie Eingabefelder oder Buttons als auch Elemene zur Formatierung des Formulars wie Tabellen, Zeilenumbrüche, Text oder Grafik erscheinen.

Das FORM-Tag kann verschiedene Merkmale annehmen. Im Attribut "action=[Zuweisung]" wird festgelegt, was mit den vom Benutzer eingegebenen Daten geschieht.

Diese Zuweisung kann zum Beispiel ein externes Programm auf dem Server sein, meist CGI, das in der Skriptsprache Perl verfaßt ist, in der Regel im Unterverzeichnis "cgi-bin/" liegt und für die Weiterverarbeitung der Daten verantwortlich ist. Eine weitere Angabe muß hierzu über die Art der Versengung (method="get") und, falls gewünscht, für die Umlenkung eines eventuellen Ausgabetextes in ein anderes Frame oder Fenster (target=[Name] (siehe Teil 3 unter Frames)) gemacht werden. Mehr dazu wird im JavaScript-Kurs erklärt. Beispiel: <FORM action="/cgi-bin/formmail.pl" method="get">...</FORM>

Die Aktion kann aber auch einer E-Mail-Adresse zugewiesen werden, so daß der Anbieter die Daten vom Benutzer empfangen und selbst weiterverarbeiten kann. Für diese Art der Zuweisung wird die Methode "post" statt "get" notwendig. Weiter sollte hier angegeben werden, um welchen Typ der Ausgabe an die E-Mail es sich handelt, meist ist dies enctype="text/plain". Beispiel: <FORM action="mailto:nico@barbat.de" method="post" enctype="text/plain">...</FORM> ...

Die Datenfelder

Innerhalb des Formulars <FORM></FORM> werden, wie bereits angedeutet, hauptsächlich die Formular-Felder angeordnet, in die die Benutzer Daten eingeben können. Diese Felder gibt es in vielfältiger Form.

In einzeiligen Eingabefeldern <INPUT> können kurze Informationen wie Name oder Adresse eingegeben werden. Sie besitzen kein End-Tag und zeigen - logisch - nur eine Zeile auf dem Bildschirm an. Muster: <INPUT type=[Variable] name=[Text] size=[Zahl] maxlength=[Zahl]>. Wichtig ist, wie übrigens bei allen Formular-Elementen, deren Bezeichnung mit einem möglichst aussagekräftigen Namen "name=[Text]". Das Attribut "type" legt fest, welcher Art dieses Eingabefeld ist: =text bedeutet Eingabe eines einfachen Textes, =password bedeutet Eingabe eines Passwortes. Das Passwort wird zwar auf dem Bildschirm nicht angezeigt, in der E-Mail wird es aber nicht verschlüsselt! Der Benutzer sollte gerade bei Versand wichtiger Informationen auf diese Tatsache hingewiesen werden! "size" bestimmt die Größe des Eingabefeldes in Zeichen, "maxlength" die maximale Länge des Datenfeldes. Sollte "size" kleiner als "maxlength" sein, so wird bei längeren Eingaben das Angabefeld in Richtung des Cursors weitergescrollt. Das Attribut "value=[Text]" bestimmt einen vorgegebenen Text. Durch das zusätzliche Attribut "readonly" kann der Benutzer den Inhalt des Feldes nicht ändern. Beispiel: <FORM ...>Ihr Nachname: <INPUT type="text" name="nachname" size="20" maxlength="30"></FORM>.

Mehrzeilige Eingabefelder <TEXTAREA> (mit End-Tag </TEXTAREA>) nehmen mehrere Textzeilen, z.B. für Kommentare oder Beschreibungen auf. Muster: <TEXTAREA name=[Text] cols=[Zahl] rows=[Zahl]> </TEXTAREA>. "name" bezeichnet das Element mit einem aussagekrätigen Namen. Mit "cols" (Anzahl der Zeichen pro Zeile) und "rows" (Anzahl der Zeilen) wird die Fenstergröße des Eingabefeldes bestimmt, nicht aber die maximale Anzahl der Zeichen pro Datenfeld. Der eingegebene Text kann innerhalb des Fensters mit dem Befehl "wrap=[Variable]" umgebrochen werden, wobei mit der Variablen "virtual" der Text nur im Anzeigefenster, mit "physical" aber auch in der Ausgabe, d.h. in der E-Mail umgebrochen wird (wrap="off" bedeutet kein Umbruch und ist die Vorgabe, muß also nicht angegeben werden). Text kann auch hier vorgegeben werden, indem dieser einfach zwischen die beiden Tags gesetzt wird, und ebenso kann das Feld für die Datenänderung mit "readonly" gesperrt werden. Beispiel: <FORM ...>Ihre Adresse: <TEAXTAREA name="adresse" cols="30" rows="4" wrap="virtual"> Strasse, PLZ, Ort </TEXTAREA></FORM>.

Mit den so genannten Checkboxen können die Benutzer vorgegebene Daten auswählen. Muster: <INPUT type"checkbox" name=[Text] value=[Wert]>. "name" bezeichnet das zusammenhängende Element mit einem aussagekrätigen Namen, während "value" den entsprechenden Wert des einzelnen Elements setzt. Mit dem zusätzlichen Attribut "checked" können Elemente vorselektiert werden. Beispiel: <FORM ...>Ihr Geschlecht: <INPUT type="checkbox" name="geschlecht" value="maennlich" checked> männlich<INPUT type="checkbox" name="geschlecht" value="weiblich"> weiblich</FORM>.

Nur im Aussehen anders präsentieren sich Radiobuttons. Die einzige Variable, die sich ändert, ist type="radio", alles andere bleibt in der Struktur gleich.

Noch eine Variante für die Auswahl von vorgegebenen Daten bieten eben solche Auswahllisten <SELECT> (mit End-Tag </SELECT>). Die Daten werden dabei nicht durch Anklick-Buttons oder Checkboxen, sondern als (scrollbare) Liste präsentiert. Muster: <SELECT name=[Text] size=[Zahl]></SELECT>. "name" bezeichnet das Element mit einem aussagekrätigen Namen, "size" bestimmt die Größe des Eingabefeldes in Zeichen. Die zur Auswahl angezeigten Daten werden innerhalb der beiden SELECT-Tags mit den Tags <OPTION>Text</OPTION> definiert. Der in der Tag-Mitte angegebene Text wird zusammen mit dem in SELECT angegebenen Namen als angeklickter Wert z.B. in der E-Mail übertragen. Wenn gewünscht wird, daß mehrere Daten angeklickt werden dürfen, muß dies im SELECT-Tag mit dem zusätzlichen Attribut "multiple" gekennzeichnet werden. Daten können außerdem (im OPTION-Tag) durch das Attribut "selected" als vorselektiert markiert werden und darüber hinaus einem anderen Ausgabewert "value=[Text]" zugeordnet werden. Beispiel: <FORM>Ihre Bestellung: <SELECT name="bestellung" size="3" multiple><OPTION selected value="A001">Amiga Infos </OPTION><OPTION value="A100">Amiga Tasse</OPTION><OPTION value="A101">Amiga Uhr</OPTION></SELECT>.

Sollten weitere Informationen über den Benutzer bzw. dessen System benötigt werden, so können versteckte Elemente in das Formular eingebaut werden, die dann per JavaScript Informationen sammeln. Diese versteckten Felder werden durch <INPUT type="hidden"> eingeleitet. Auf die Variablen und den Umgang mit solchen Feldern wird im JavaScript-Kurs eingegangen. Ebenso wird darin erklärt, wie eine bestimmte Aktion einem Button zugewiesen werden kann (z.B. Seite vor/zurück oder Infos über Seite anzeigen).

Am Ende eines jeden Formulars befinden sich mindestens einer, meist zwei Buttons. Sie sind für die Versendung bzw. das Löschen der vorher eingegebenen Daten verantwortlich. Muster: <INPUT type=[Variable] value=[Text]>. "type" bestimmt die Art des Buttons, also entweder type="submit" zum Absenden oder type="reset" zum Löschen. Bei "value" wird die Beschriftung des Buttons angegeben. Diese entfällt natürlich, wenn Sie im Falle des Absenden-Buttons eine Grafik einsetzen wollen. Dann ändert sich der Aufbau geringfügig: <INPUT type="image" src="absenden.gif">. Dieser Typ beschränkt sich aber auf das Absenden von Formularen. Beispiel: <INPUT type"submit" value="Absenden"><INPUT type="reset" value="Widerrufen">.

Learning by Doing

Damit sind wir am Ende des HTML-Kurses angelangt. Kein Leser wird nun ein HTML-Experte sein, denn das kann nicht im Sinn eines kurzen Workshops sein. Das Basiswissen sollte jetzt jedoch beherrscht werden, so daß man den gleichen Weg gehen kann wie die meisten Webdesigner: Learning by Doing!

© 1998-2001 barbat media