![]() |
Artikel online |
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.
Folgend finden Sie zunächst die im Artikel "HTML auf dem Amiga" aus der AMIGAplus 10/2001 aufgeführten Links.
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.
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.
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>
.
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.
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">
.
Ä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>
.
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 """ (").
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.
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.
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.
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.
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 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 -->
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">
.
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