HTML (Hypertext Markup Language)

Transcription

HTML (Hypertext Markup Language)
Übersicht
1. Seitenaufbau ............................................................................................................................................... 1
1.1. Syntax........................................................................................................................................... 1
1.2. Seitenstruktur ............................................................................................................................... 2
1.3. Kommentare ................................................................................................................................. 2
1.4. Entities .......................................................................................................................................... 2
1.5. Inhalt ............................................................................................................................................. 3
1.5. Linien ............................................................................................................................................ 4
1.6. Attribute eines Tags...................................................................................................................... 5
2. Text und Formatierungen ............................................................................................................................ 5
2.1. Überschriften ................................................................................................................................ 5
2.2. Schriftschnitt ................................................................................................................................. 6
2.3. Hoch- und tiefgestellter Text, großer und kleiner Text ................................................................. 7
2.4. Listen ............................................................................................................................................ 7
2.5. Glossar ....................................................................................................................................... 10
3. Grafiken und Bilder.................................................................................................................................... 11
3.1. Grafikformate.............................................................................................................................. 11
3.2. Grafikeinbindung mit dem Image-Tag ........................................................................................ 12
3.3. Formatierung und Ausrichtung von Grafiken ............................................................................. 12
3.4. Hintergrundgrafik ........................................................................................................................ 16
4. Links .......................................................................................................................................................... 16
4.1. Lokale Links................................................................................................................................ 17
4.2. Links innerhalb des WWW ......................................................................................................... 18
4.3. Links zu E-Mails ......................................................................................................................... 18
4.4. Links in ein neues Browserfenster ............................................................................................. 18
4.5. Grafiken als Links ....................................................................................................................... 19
4.6. Imagemaps................................................................................................................................. 20
5. Tabellen ..................................................................................................................................................... 21
5.1. Tabellenüberschrift und -unterschrift.......................................................................................... 22
5.2. Zellengröße ................................................................................................................................ 23
5.3. Textausrichtung in Tabellenzellen.............................................................................................. 24
5.4. Tabellenrand............................................................................................................................... 24
5.5. Verbinden von Zellen.................................................................................................................. 26
5.6. Farben in Tabellen...................................................................................................................... 27
5.7. Tabellen als Layouthilfen............................................................................................................ 29
6. Frames....................................................................................................................................................... 29
6.1. Aufteilung in Frames................................................................................................................... 30
6.2. Rahmen füllen ............................................................................................................................ 31
6.3. Zuordnung der Frames............................................................................................................... 31
6.4. Darstellung der Frames .............................................................................................................. 32
6.6. Verweise aus dem Frameset...................................................................................................... 33
6.7. Alternativen zu Frames............................................................................................................... 33
7. Formulare .................................................................................................................................................. 33
7.1. Textfelder.................................................................................................................................... 34
7.2. Schaltflächen .............................................................................................................................. 36
7.3. Check –und Radiobuttons .......................................................................................................... 37
7.4. Auswahllisten.............................................................................................................................. 38
1. Seitenaufbau
1.1.Syntax
Wie in jeder Sprache gibt es auch in HTML (Seitenbeschreibungssprache) gewisse Regeln. Diese sind zwar
nicht sehr kompliziert, müssen aber richtige verwendet werden, damit die Funktion und korrekte Darstellung
des Seiteninhaltes gewährleistet sind.
Die Befehle, die in HTML Tags genannt werden, stehen immer in spitzen Klammern. Es handelt sich dabei
meist um die Abkürzungen des englischen Begriffs.
Bsp.: <U> Unterstrichener Text </U>
1
Die meisten Tags werden, so wie hier im Beispiel ersichtlich, auch wieder geschlossen. Sie leiten also eine
Formatierung ein, welche dann allerdings nicht bis zum ende gültig ist, sondern wieder beendet und von
einer anderen abgelöst wird. Wird das Endtag nicht gesetzt, so gilt die Formatierung für den ganzen Rest
der Seite. Dieses Endtag wird durch einen Schrägstrich (Slash) zwischen der ersten spitzen Klammer und
dem eigentlichen Befehl gesetzt. </u> beendet also z.B. den unterstrichenen Text.
Die Gesamtheit aus Tags und Inhalt wird als Element bezeichnet.
1.2. Seitenstruktur
Damit der Browser erkennt, dass es sich bei der zu ladenden Datei um ein HTML-Dokument handelt,
müssen grundlegende Befehle bei der Erstellung eines HTML-Dokuments eingegeben werden.
Das Grundgerüst einer leeren HTML-Seite sieht immer gleich aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Tag
<!DOCTYPE
HTML PUBLIC
"-//W3C//DTD
HTML 4.01//EN>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Bedeutung
Hier wird festgelegt, nach welcher Spezifikation das HTML-Dokument erstellt wurde.
Laut offiziellem W3C-Standard sollte diese die Dokumenttyp-Definition (DTD) in jedem
Dokument vorhanden sein. Für das Funktionieren des Dokuments ist sie aber nicht
notwendig, da heute alle Browser problemlos HTML ohne DTD lesen können. Von den
derzeit gängigen Browsern wird diese Angabe sogar ignoriert.
Hier wird das eigentliche Dokument geöffnet. Dieses erste Tag im HTML-Dokument
wird erst an Ende des Dokuments wieder aufgehoben.
Nun wird der Kopf geöffnet. Im Kopf befinden sich Informationen zum Dokument, die
nicht direkt das Erscheinungsbild des Dokuments beeinflussen.
Innerhalb des Kopfes wird der Titel der Seite angegeben, der dann in der Titelleiste
des Browsers angezeigt wird.
Dies beendet den Titel.
Nun ist auch der Seitenkopf beendet.
Der Rumpf der Seite wird geöffnet. Hier befindet sich der eigentliche Seiteninhalt samt
dazugehörigen Formatierungen.
Nun wird der Rumpf mit dem Inhalt wieder geschlossen.
Hier wird das Seitenende festgesetzt.
1.3. Kommentare
Überall, wo programmiert wird, ist es üblich, Kommentare im Quelltext anzugeben. Sie dienen dem besseren
Verständnis oder stellen besondere Hinweise dar. In HTML werden sie durch ein spezielles Tag kenntlich
gemacht:

Texte innerhalb dieses Tags werden von Browser ignoriert und nicht angezeigt.
1.4. Entities
Der inhaltliche Text des HTML-Dokuments kann in gewohnter Art und Weise (wie in der Textverarbeitung)
geschrieben werden. Ein Problem kann es lediglich mit den deutschen Sonderzeichen geben, da sie oft von
den Browsern nicht richtig angezeigt werden. Es hängt immer davon ab, welcher Browser verwendet wird
und welche Ländereinstellungen im Betriebssystem vorliegen.
Sämtliche Sonderzeichen (Umlaute, Anführungszeichen, das Copyrightzeichen usw.) werden durch Entities
abgedeckt. Diese beginnen immer mit dem kaufmännischen Und (&), gefolgt von der Umschreibung des
Sonderzeichens. Abgeschlossen wird das Entity durch ein Semikolon (;).
Bsp.: Ö (Ö ergibt ein groß geschriebenes Ö)
Anstelle der Entities kann auch der numerische Wert aus dem Zeichensatz ISO 8859 in der Syntax &#Wert;
angegeben werden.
Sonderzeichen
ä
Ä
ö
ISO 8859
ä
Ä
ö
Entity
ä
Ä
ö
2
Ö
ü
Ü
ß
Leerzeichen
"
&
<
>
€
§
©
®
¼
½
¾
Ö
ü
Ü
ß
 
"
&
<
>

§
©
®
¼
½
¾
Ö
ü
Ü
ß
 
"
&
<
>
€
§
©
®
¼
½
¾
1.5. Inhalt
Der Text, der dann im Browser angezeigt werden soll, steht immer im Body des Dokuments.
Bsp.:
<HTML>
<HEAD>
<TITLE> Mein erster Versuch </TITLE>
</HEAD>
<BODY>
Meine erste HTML-Seite!
Ist ja gar nicht so schwer!
</BODY>
</HTML>
Öffnet man diese Datei nun im Browser, ist die Darstellung jedoch nicht allzu schön. Der Zeilenumbruch wird
beispielsweise völlig ignoriert.
Möchte man an einer bestimmten Stelle einen Zeilenumbruch, muss dort das Tag <BR> (für engl. break)
eingefügt werden. Dieses Tag bedarf keiner Aufhebung.
Fügt man im vorherigen Beispiel dieses Tag ein, dann wird der Zeilenumbruch auch vom Browser als
solcher interpretiert. Der Code muss also dann lauten:
<HTML>
<HEAD>
</HEAD>
<BODY>
<BR>
</BODY>
</HTML>
3
In längeren Texten braucht man nicht nur Zeilenumbrüche, sondern auch Absätze. Dadurch lassen sich
lange Texte übersichtlich strukturieren. Das Tag <P> (für engl. paragraph) leitet einen Absatz ein. Vor dem
Absatz wird automatisch eine Leerzeile eingefügt. Im Gegensatz zum Zeilenumbruch muss der Absatz durch
das Endtag </P> abgeschlossen werden.
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML>
1.5. Linien
Eine gute Möglichkeit, Texte übersichtlicher zu gestalten, sind Linien. Für eine horizontale Linie wird das Tag
<HR> (für engl. horizontal rule) gesetzt, das keine Aufhebung benötigt.
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR>
</BODY>
</HTML>
4
1.6. Attribute eines Tags
Neben den Tags sind die Attribute wesentliche Bestandteile von HTML. Diese Attribute (Optionen,
Parameter) bestimmen die Art des Tags, beeinflussen also dessen Darstellung. Anhand der horizontalen
Linie lassen sich die wichtigsten Tags einfach demonstrieren.
¾ Größe: Durch das Attribut SIZE (engl. Größe) lässt sich die Größe eines Objektes festlegen. Auf die
horizontale Linie angewendet, bestimmt SIZE die Dicke der Linie.
<HR SIZE=n>
Wird kein Wert (n) angegeben, ist die Standardgröße mit 2 definiert.
¾ Breite: Mit dem Attribut WIDTH (engl. Breite/Weite) lässt sich die Breite der horizontalen Linie
festlegen. Wird dieses Attribut nicht angegeben, geht die Linie immer über die gesamte Breite des
Dokuments.
<HR WIDTH=n> oder <HR WIDTH=n%>
Es lässt sich hier nicht nur ein absoluter Wert (n) eingeben, sondern man kann auch eine
Prozentangabe machen. Die Linie nimmt dann immer die angegebene Prozentzahl des verfügbaren
Raumes ein (unabhängig von der Größe des Browserfensters und der Bildschirmauflösung).
¾ Ausrichtung: Damit nicht der ganze Text am linken Rand des Browserfensters klebt, kann mit dem
Attribut ALIGN (engl. ausrichten) eingegriffen werden. Hier gibt es vier Möglichkeiten:
1. Ausrichtung links:
<HR ALIGN=LEFT>
2. Ausrichtung rechts:
<HR ALIGN=RIGHT>
3. Ausrichtung zentriert:
<HR ALIGN=CENTER>
4. Ausrichtung Blocksatz: <HR ALIGN=JUSTIFY>
Will man mehrere Attribute miteinander kombinieren, werden sie einfach innerhalb des Tags durch
Leerzeichen getrennt hintereinander aufgelistet.
<HTML>
<HEAD>
</HEAD>
<BODY>
<HR ALIGN=CENTER WIDTH=50%>
Ist ja gar nicht so schwer, <BR>
HTML-Dokumente zu erstellen!
<P ALIGN=RIGHT> Ich habe schon nach ein paar Stunden etwas Durchblick!
</P>
</BODY>
</HTML>
2. Text und Formatierungen
2.1. Überschriften
Durch Überschriften lassen sich Texte gut strukturieren und übersichtlich gestalten. In HTML gibt es sechs
Überschrifthierarchien. Eine Überschrift beginnt immer mit dem Tag <Hn> und endet mit </Hn>, wobei n für
eine Zahl zwischen 1 und 6 steht. <H1> leitet dabei die größte Überschrift ein. Durch das Überschriften-Tag
wird automatisch ein Zeilenumbruch erstellt.
<HTML>
<HEAD>
<TITLE >Überschriften </TITLE>
5
</HEAD>
<BODY>
<H1> Überschrift
<H2> Überschrift
<H3> Überschrift
<H4> Überschrift
<H5> Überschrift
<H6> Überschrift
</BODY>
</HTML>
1
2
3
4
5
6
</H1>
</H2>
</H3>
</H4>
</H5>
</H6>
2.2. Schriftschnitt
Sollen einzelne Wörter oder ganze Textpassagen hervorgehoben werden, kann man den Text fett oder
kursiv anzeigen lassen.
Fetten Text erzeugt man durch die Tags <B> und </B> (engl. bold), kursiv wird der Text durch die Tags <I>
und </I> (engl. italic):
<B> Dieser Text erscheint fett. </B>
<I> Dieser Text erscheint kursiv. </I>
Diese Tags lassen sich natürlich auch miteinander kombinieren:
<HTML>
<HEAD>
<TITLE> Schriftschnitt </TITLE>
</HEAD>
<BODY>
<H2> Fett und kursiv!</H2>
Oft ist es sinnvoll, wenn Text <B>fett</B> oder <I>kursiv</I> erscheint. <BR>
Manchmal soll der Text <B><I>fett und kursiv</I></B> erscheinen. <BR>
</BODY>
</HTML>
Weitere Zeicheneffekte sind das Schreibmaschinenformat, realisiert durch die Tags <TT> und </TT>,
sowie das Format Durchgestrichen mit den dazugehörigen Tags <STRIKE> und </STRIKE>.
6
2.3. Hoch- und tiefgestellter Text, großer und kleiner Text
Um mathematische oder chemische Formeln darstellen zu können, braucht man häufig hoch- bzw.
tiefgestellte Zeichen. Hochgestellter Text wird durch die Tags <SUP> und </SUP> erzeugt. Für den
tiefgestellten Text dienen die Tags.
<SUP> hochgestellt </SUP>
<SUB> tiefgestellt </SUB>
Eine Vergrößerung des Textes kann durch die Tags <BIG> und </BIG> erreicht werden, verkleinert wird
er durch <SMALL> und </SMALL>.
<BIG> Dieser Text ist größer. </BIG>
<SMALL> Dieser Text ist kleiner. </SMALL>
Auch diese Befehle können wieder miteinander kombiniert werden, wie im folgenden Bsp. gezeigt wird:
<HTML>
<HEAD>
<TITLE> Hoch/Tief – Groß/Klein </TITLE>
</HEAD>
<BODY>
<H2> Großer und kleiner Text, hoch- und tiefgestellter Text!</H2>
Oft ist es sinnvoll, wenn Text <BIG>groß</BIG> oder <SMALL>klein</SMALL>
erscheint. <BR>
Außerdem lässt sich Text <SUP>hochstellen</SUP> und <SUB>tiefstellen</SUB>.
<BR>
<P>
<B>Praktische Beispiele:</B> <BR>
Meine Wohnung hat 50 m<SUP><SMALL>2</SMALL></SUP>. <BR>
Wasser hat die Formel H<SUB><SMALL>2</SMALL></SUB>O.
</P>
</BODY>
</HTML>
2.4. Listen
In HTML wird zwischen sortierten und unsortierten Listen unterschieden.
In der sortierten Liste werden die Listeneinträge durchnummeriert, wobei die Art der Nummerierung
festgelegt werden kann. Möglich sind arabische und römische Ziffern sowie alphanumerische Auflistungen.
Eine sortierte Liste wird mit dem Tag <OL> (engl. ordered list) eröffnet und mit </OL> geschlossen. Die
einzelnen Listeneinträge schreibt man zwischen die Tags <LI> und </LI>. Es ergibt sich also folgende
Struktur:
<HTML>
<HEAD>
<TITLE> Sortierte Liste </TITLE>
</HEAD>
<BODY>
<H2> Sortierte Liste </H2>
<OL>
<LI> 1.Eintrag </LI>
</OL>
</BODY>
</HTML>
7
Natürlich lassen sich zu den einzelnen Punkten auch Unterpunkte einfügen. Man erhält eine verschachtelte
Liste, indem in die erste Liste eine zweite eingebaut wird, also:
<HTML>
<HEAD>
<TITLE> Sortierte Liste (verschachtelt)
</HEAD>
<BODY>
<H2> Verschachtelte Liste </H2>
<OL>
<OL>
<LI> 1.Untereintrag zum
</OL>
<OL>
</OL>
</OL>
</BODY>
</HTML>
</TITLE>
1.Eintrag </LI>
1.Eintrag </LI>
3.Eintrag </LI>
3.Eintrag </LI>
Mit Hilfe des Attributs TYPE kann die Art der Aufzählung variiert werden. Dieses Attribut lässt sich sowohl
beim Tag <OL> als auch beim Tag <LI> anwenden:
<OL TYPE=n> …….. </OL>
<LI TYPE=n> …….. </LI>
Dabei wird n durch vorgegebene Werte ersetzt:
TYPE=1
TYPE=a
TYPE=A
TYPE=i
TYPE=I
Es werden arabische Ziffern (1, 2, 3 usw.) verwendet. Dies entspricht der Standardeinstellung.
Die Einstellung bewirkt eine Aufzählung in Kleinbuchstaben (a, b, c usw.).
Großbuchstaben werden zur Aufzählung benutzt (A, B, C usw.).
Die Aufzählung erscheint in römischen Ziffern, wobei Kleinbuchstaben zur Darstellung
verwendet werden (i, ii, iii usw.).
Es kommen römische Ziffern unter Verwendung von Großbuchstaben zum Einsatz (I, II, III
8
usw.).
<HTML>
<HEAD>
<TITLE> Sortierte Liste </TITLE>
</HEAD>
<BODY>
<H2> Verschachtelte Liste </H2>
<OL TYPE=1>
<OL TYPE=a>
<LI> 1.Untereintrag
<LI> 2.Untereintrag
</OL>
<OL TYPE=a>
<LI> 1.Untereintrag
<LI> 2.Untereintrag
</OL>
</OL>
</BODY>
</HTML>
</LI>
</LI>
</LI>
</LI>
Mit dem Attribut START lässt sich eine sortierte Liste mit selbst gewähltem Startwert kreieren. Folgende
Liste würde mit der Nr. 10 beginnen:
<OL START=10>
<LI> Erster Eintrag </LI>
<LI> Zweiter Eintrag </LI>
<LI> Dritter Eintrag </LI>
</OL>
Im Gegensatz zur sortierten Liste fehlt bei der unsortierten Liste die Durchnummerierung. Die einzelnen
Listeneinträge sind hier mit Aufzählungszeichen verbunden. Die unsortierte Liste wird zwischen die Tags
<UL> und </UL> (engl. unordered list) eingefügt, wobei auch hier die einzelnen Listeneinträge mit dem Tag
<LI> und </LI> versehen werden.
<HTML>
<HEAD>
<TITLE> Unsortierte Liste </TITLE>
</HEAD>
<BODY>
<H2> Unsortierte Liste </H2>
<UL>
</UL>
</BODY>
</HTML>
9
Auch bei den unsortierten Listen gibt es mehrere Varianten von Aufzählungszeichen, die wiederum mit dem
Attribut TYPE ausgewählt werden.
TYPE=DISC
TYPE=SQUARE
TYPE=CIRCLE
Es erscheint ein rundes, ausgefülltes Aufzählungszeichen.
Dabei handelt es sich um ein quadratisches Aufzählungszeichen.
Als Aufzählungszeichen erscheint ein unausgefüllter Kreis.
Sortierte und unsortierte Listen lassen sich natürlich auch problemlos miteinander verbinden, wie
folgendes Bsp. zeigt:
<HTML>
<HEAD>
<TITLE> Kombinierte Listen </TITLE>
</HEAD>
<BODY>
<H2> Sortierte und unsortierte Listen </H2>
<OL TYPE=I>
<UL TYPE=CIRCLE>
<LI> 1.Untereintrag </LI>
</UL>
<UL TYPE=CIRCLE>
</UL>
</OL>
</BODY>
</HTML>
2.5. Glossar
Ein Glossar steht meist am Ende eines Buches und wird v.a. bei wissenschaftlichen Texten häufig benötigt.
In HTML sind Glossare ähnlich aufgebaut wie Listen. Die Tags <DL> und </DL> öffnen bzw. schließen den
Glossar. Die Begriffe schreibt man zwischen die Tags <DT> und </DT>, während die Erklärungen zwischen
den Tags <DD> und </DD> stehen. Folgende Struktur ergibt sich hiermit:
10
<DL>
<DT> Begriff 1 </DT>
<DD> Erklärung 1 </DD>
<DT> Begriff 2 </DT>
<DD> Erklärung 2 </DD>
</DL>
<HTML>
<HEAD>
<TITLE> Glossar </TITLE>
</HEAD>
<BODY>
<H2> Glossar </H2>
<DL>
<DT> <B>HTML</B> </DT>
<DD> HTML ist die Programmiersprache des World Wide Web.
Es handelt sich dabei um eine statische Programmiersprache.
</DD>
<DT> <B>JavaScript</B> </DT>
<DD> Im Gegensatz zu HTML ist JavaScript eine dynamische
Programmiersprache.
</DD>
</DL>
</BODY>
</HTML>
Wählt man das Attribut COMPACT, werden Begriffe und Erklärungen nicht auf zwei Zeilen aufgeteilt,
sondern erscheinen in einer Zeile. Der konkrete Befehl hierfür lautet:
<DL COMPACT>
3. Grafiken und Bilder
Durch das Tag <IMG> lassen sich Grafiken relativ einfach in HTML einbinden. Aber auch das Tag
<OBJECT> dient zur Einbindung von Grafiken. Dieses Tag kann allerdings bis jetzt nur vom Internet
Explorer dargestellt werden. Probleme gibt es v.a. mit dem Netscape Navigator, was den Einsatz dieses
universalen Tags, der sich nicht nur für die Einbindung von Bildern, sondern auch anderer Dateien eignet,
etwas einschränkt.
3.1. Grafikformate
Grafiken können – wie sicher bekannt ist – in verschiedenen Formaten abgespeichert werden. Die für das
Internet wichtigsten Formate sind das GIF- und das JPEG-Format.
¾ GIF: Das Grafics Interchange Format ist auf 256 Farben beschränkt, was für das WWW allerdings
ausreichend ist. Lediglich bei der Darstellung von Fotos wird ein Qualitätsnachteil gegenüber 16,7
Mio. Farben sichtbar. Vorteil des GIF-Formates ist die hohe Kompression und somit die schnelle
Übertragung der Bilddaten. Zusätzlich lässt sich in diesem Format die Farbe Transparent angeben,
was für HTML-Dokumente interessante Möglichkeiten bietet, da so z.B. ein transparenter
Hintergrund erzeugt werden kann. Außerdem lassen sich mittels GIF auch aus Einzelbilder
Animationen zusammenstellen (animated GIF).
¾ JPEG: Das Joint Photographic Experts Group-Dateiformat ermöglicht die Darstellung von 16,7 Mio.
Farben bei geringem Speicherplatzbedarf. Speicherplatz wird dadurch gespart, indem Unterschiede
im Bild, die für das Auge ohnehin nicht wahrnehmbar sind, weggelassen werden. Allerdings kann
dadurch (je nach Kompressionsstärke) das Bild unscharf erscheinen.
Für Logos und Grafiken mit wenigen Farben wird also meist das GIF-Format verwendet, Fotos in hoher
Qualität werden im JPEG-Format abgespeichert.
11
Was bei der Verwendung von Grafiken auf jeden Fall zu bedenken ist: Ihre Ladezeit ist wesentlich länger als
die Ladezeit des Textes. Weniger ist also oft mehr!
Die Auflösung einer Grafik wird in Bildpunkten (Pixel) angegeben. Dabei wird die Bildhöhe mal der
Bildbreite angegeben. Ein Bild mit der Auflösung 100 x 200 besteht also aus 20.000 Bildpunkten. Je höher
die Auflösung, desto mehr Speicherplatz wird benötigt. Deshalb empfiehlt es sich, die Auflösung möglichst
gering zu halten. Durch die Nachbearbeitung eines Bildes lässt sich ein Optimum an Qualität bei möglichst
geringer Dateigröße erzielen.
3.2. Grafikeinbindung mit dem Image-Tag
Bei der Einbindung der Grafik muss immer der Speicherort angegeben werden, denn es kann sich ja um
lokale Grafiken oder um Grafiken auf einem anderen Server handeln. Zur Angabe des Speicherorts wird das
Attribut SCR (engl. source) verwendet. Somit lautet das vollständige Tag:
<IMG SRC="URL/Dateiname">
Befindet sich die Grafik am gleichen Server und im gleichen Ordner wie das HTML-Dokument, reicht es den
Dateinamen anzugeben:
<IMG SRC="Bild.gif">
Wird die Website allerdings größer, werden sicher nicht mehr alle Dateien im gleichen Verzeichnis abgelegt.
Es muss dann natürlich der entsprechende Unterordner, in dem die Grafik abgespeichert ist, angegeben
werden, z.B.:
<IMG SRC="Unterordner/Bild.gif">
Liegt die Grafikdatei auf einem anderen Server, muss die absolute Adressierung dieses Rechners angeführt
werden, also:
<IMG SRC="http://www.Abendgymnasium.Salzburg.at/Bild.gif">
<HTML>
<HEAD>
<TITLE> Grafik </TITLE>
</HEAD>
<BODY>
<H2> Abendgymnasium Salzburg </H2>
<IMG SRC="Eule.jpg">
</BODY>
</HTML>
3.3. Formatierung und Ausrichtung von Grafiken
Grafiken können in HTML mit Rahmen versehen werden. Hierfür wird das Attribut BORDER im Tag <IMG>
verwendet:
<IMG SRC="Bild.gif" BORDER=n>
Die Variable n wird durch eine Zahl ersetzt, die die Dicke der Linie um die Grafik in Pixel angibt.
<HTML>
<HEAD>
<TITLE> Grafik mit Rahmen </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" BORDER=2>
12
<IMG SRC="Eule.jpg" BORDER=8>
</BODY>
</HTML>
Die Grafiken werden hier direkt nebeneinander abgebildet. Damit Grafiken übersichtlich angeordnet werden
können, sind Tabellen notwendig.
Mit den Attributen HSPACE und VSPACE kann quasi ein unsichtbarer Rahmen um eine Grafik gelegt
werden. Diese Attribute definieren den horizontalen und vertikalen Abstand, den Objekte zu dieser Grafik
freihalten sollen. Dabei wird der Abstand (n), wie beim Attribut BORDER, in Pixel angegeben:
<IMG SRC="Bild.gif" VSPACE=n>
<IMG SRC="Bild.gif" HSPACE=n>
<HTML>
<HEAD>
<TITLE> Grafik mit unsichtbarem Rahmen </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" VSPACE=20>
<IMG SRC="Eule.jpg" HSPACE=20>
</BODY>
</HTML>
Mit dem Attribut ALIGN besteht die Möglichkeit, die Grafik horizontal zu positionieren. Es sind also drei
Ausrichtungen möglich:
¾ <IMG SRC="Bild.gif" ALIGN=left>
¾ <IMG SRC="Bild.gif" ALIGN= right>
¾ <IMG SRC="Bild.gif" ALIGN= center>
<HTML>
<HEAD>
<TITLE> Grafik rechts </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" VSPACE=20>
<IMG SRC="Eule.jpg" HSPACE=20>
</BODY>
</HTML>
13
Das Attribut ALIGN kann noch drei weitere Werte annehmen, die der Bildbeschriftung dienen. Diese
Möglichkeiten richten die Grafik relative zur Zeile, in der sie eingebunden ist, aus. Die sichtbare Auswirkung
ist dann die Art der Beschriftung.
¾ <IMG SRC="Bild.gif" ALIGN=top>
Ö Beschriftung steht oben neben der Grafik
¾ <IMG SRC="Bild.gif" ALIGN= middle>
Ö Beschriftung steht neben der Grafik in der Mitte
¾ <IMG SRC="Bild.gif" ALIGN= bottom>
Ö Beschriftung steht unter der Grafik
<HTML>
<HEAD>
<TITLE> Grafikbeschriftung </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" ALIGN=middle>
Unser Logo
<P> Willkommen im Abendgymnasium für Berufstätige! </P>
</BODY>
</HTML>
14
Die Größe von Grafiken kann durch die Attribute WIDTH und HIGHT angepasst werden. Allerdings sollten
hier nur Pixel- und auf keinen Fall Prozentangaben gemacht werden, weil dies ganz und gar nicht der HTMLSpezifikation entspricht und somit auch höchst unzuverlässig ist. Man sollte allerdings generell bei einer
Größenänderung daran denken, dass die Proportionen aufrecht bleiben.
<IMG SRC="Bild.gif" WIDTH=n HEIGHT=n>
<HTML>
<HEAD>
<TITLE> Grafiken skalieren </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" WIDTH=90 HIGHT=90>
</BODY>
</HTML>
Da es immer einmal passieren kann, dass eine Grafik nicht eingeblendet wird, empfiehlt es sich, Bilder ganz
generell mit Alternativtexten zu versehen. Dieser erscheint dann, wenn die Grafik nicht dargestellt werden
kann bzw. wenn man mit dem Mauszeiger auf das Bild fährt. Das Attribut ALT ermöglicht das Einfügen eines
Alternativtextes:
<IMG SRC="Bild.gif" ALT="Alternativtext">
<HTML>
<HEAD>
<TITLE> Grafiken mit Alternativtext </TITLE>
</HEAD>
<BODY>
<IMG SRC="Eule.jpg" ALT="Die Eule ist ein nachtaktives Tier und
steht als Symbol für das Abendgymnasium">
</BODY>
</HTML>
15
3.4. Hintergrundgrafik
Soll eine Grafik als Hintergrund eingesetzt werden, ist deren Einbindung in den Body des Dokuments
notwendig, und zwar mittels Attribut BACKGROUND.
<BODY BACKGROUND="Bild.gif">
Setzt man zusätzlich noch das Attribut BGPROPERTIES auf "fixed", dann wird das Bild beim Scrollen nicht
verschoben.
<HTML>
<HEAD>
<TITLE> Grafiken mit Alternativtext </TITLE>
</HEAD>
<BODY BACKGROUND="Eule.jpg" BGPROPERTIES="fixed">
<P>
<BIG><B>Das Abendgymnasium ist eines der insgesamt sieben
Abendgymnasien Österreichs. Hier haben Erwachsene die Möglichkeit,
in insgesamt acht Semestern die Matura abzulegen.</B></BIG>
</P>
</BODY>
</HTML>
4. Links
Links stellen in HTML-Seiten Verbindungen zu anderen Seiten her. Somit stellen diese Verknüpfungen
zentrale Elemente bei der Erstellung von Web-Sites dar, denn sie ermöglichen letztlich das Surfen im Web,
also das Springen von einer Seite zu einer anderen.
Links können auf eine Textstelle im gleichen Dokument gesetzt werden, aber auch auf ein völlig anderes
Dokument verweisen.
Für einen Link braucht man einen sog. Anker. Die dazugehörigen Tags sind <A> und </A> (für engl.
anchor). Zwingend notwendig ist die Verwendung des Attributs HREF, das die Einbindung des Zielpunktes
ermöglicht.
16
<A HREF="Ziel"> Hier geht´s zum Ziel-Link </A>
Der Text Hier geht´s zum Ziel-Link kann natürlich durch den gewünschten Text, der als Link erscheinen soll,
ausgetauscht werden. Hier die wichtigsten Möglichkeiten für die Zielwahl:
¾ Die Zieladresse liegt innerhalb des Dokuments.
¾ Die Zieladresse ist ein anderes HTML-Dokument, das aber auf dem selben Server liegt.
¾ Die Zieladresse ist irgendeine URL im WWW.
¾ Die Zieladresse ist eine E-Mail-Adresse.
4.1. Lokale Links
Besonders in langen Dokumenten kommen Verweise auf andere Textpassagen innerhalb des gleichen
Dokuments vor. Die Stelle, auf die dann durch einen Link verwiesen wird, muss natürlich entsprechend
gekennzeichnet sein. Es muss dort ein Anker gesetzt werden, der mit einem Namen (n) zu versehen ist.
<A NAME="n"> Text </A>
Damit ist der Zielpunkt festgelegt.
Der Link selbst wird auch wieder mittels Anker gesetzt, allerdings wird anstelle des Attribut NAME das
Attribut HREF verwendet. Man verweist auf den Namen (n) des definierten Ziels.
<A HREF="#n"> Text </A>
<HTML>
<HEAD>
<TITLE> Lokale Links </TITLE>
</HEAD>
<BODY>
<H2> Beispiel für einen Link innerhalb des Dokuments </H2>
<P>
Dies ist ein kleines Beispiel für einen Link innerhalb eines HTML-Dokuments.
<A HREF="#Ziel">Dieser Link</A> verweist an einen Zielpunkt.
</P>
<P>
Und hier ist auch schon das gewünschte <A NAME="Ziel">Ziel</A>!
</P>
</BODY>
</HTML>
Noch einfacher ist es, einen Link auf ein Dokument innerhalb derselben Website zu setzen, da hier kein Ziel
zu definieren ist.
<A HREF="n"> Text </A>
n wird durch den Namen des zu ladenden Dokuments ersetzt.
<HTML>
<HEAD>
<TITLE> Lokale Links </TITLE>
</HEAD>
<BODY>
<H2> Beispiel für einen Link innerhalb einer Website </H2>
<P>
Dies ist ein kleines Beispiel für einen Link auf ein anderes HTML-Dokument im
gleichen Verzeichnis. Die Ausführung dieses <A HREF="Zieldokument.html">
Links</A> verzweigt auf das Zieldokument.
</P>
</BODY>
</HTML>
Wird der Link angeklickt, wird das angegebene Dokument im Browserfenster geladen.
17
Natürlich kann auch auf eine bestimmte Stelle innerhalb eines anderen Dokuments verwiesen werden. Dazu
wird dann der Zielanker im Zieldokument an die gewünschte Stelle gesetzt und im Ausgangsdokument
auch noch der Name des Ziels in der bekannten Syntax angegeben.
4.2. Links innerhalb des WWW
Liegt ein Dokument in einem anderen Verzeichnis, muss lediglich auf die richtige Adressierung geachtet
werden. Ansonsten ist der Link gleich zu setzen. Bei der Pfadangabe sind die Schrägstriche durch Slashes
(und nicht durch Backslashes) anzugeben.
<A HREF="http://www.test.com/test/test5/Seite2.hmtl"> …….. </A>
Wird auf ein Dokument eines anderen Servers verwiesen, muss die komplette Adresse einschließlich des für
die Übertragung benötigten Protokolls angegeben werden.
<A HREF="http://www.abendgymnasium.salzburg.at"> …….. </A>
4.3. Links zu E-Mails
In vielen HTML-Dokumenten ist die E-Mail-Adresse des Inhabers dieser Seite integriert. Auch diese
Integration wird über einen Link realisiert. Wird der Link aktiviert, startet das Programm zum Erstellen von EMails auf dem PC des Besuchers. Dieses Mail wird dann direkt an die angegebene E-Mail-Adresse
geschickt. In den Link wird hierfür der Wert MAILTO: gesetzt.
<A HREF="MAILTO:Adresse"> Text </A>
<HTML>
<HEAD>
<TITLE> Link zu E-Mail </TITLE>
</HEAD>
<BODY>
<H2> E-Mail </H2>
<P>
Gerne befasse ich mich mit Ihren Kommentaren. Schicken Sie mir doch einfach
eine E-Mail, der folgende Link gibt Ihnen die Möglichkeit dazu:
</P>
<P>
<A HREF="MAILTO:ute.baumgartner@schule.at">E-Mail an mich</A>
</P>
</BODY>
</HTML>
4.4. Links in ein neues Browserfenster
Normalerweise wird nach Aktivierung eines Links dieser immer im aktiven Browserfenster ausgeführt und
über den aktuellen Fensterinhalt geöffnet. Man kann allerdings auch ein neues Browserfenster öffnen
lassen. Dem Tag <A> wird hierfür noch das Attribut TARGET zugewiesen:
<A HREF="URL" TARGET="Name"> …….. </A>
Dem neuen Browserfenster wird ein Name gegeben, der der internen Zuweisung dient und für den
Betrachter unsichtbar bleibt. Um zu verhindern, dass in einer Liste mit Links diese jeweils in neue Fenster
geöffnet werden, weist man jedem Link das gleiche Browserfenster zu.
<HTML>
<HEAD>
<TITLE> Links in neuem Fenster </TITLE>
</HEAD>
<BODY>
<H2> Meine Links </H2>
<P>
<A HREF="http://www.microsoft.com" TARGET="Fenster">Microsoft</A>
</P>
18
<P>
<A HREF="http://www.netscape.com" TARGET="Fenster">Netscape</A>
</P>
<P>
<A HREF="http://www.opera.com" TARGET="Fenster">Opera</A>
</P>
</BODY>
</HTML>
4.5. Grafiken als Links
Statt einen Link in Textform zu verwenden, können auch Grafiken als Objekte für Links verwendet werden.
An die Stelle des Links wird auch die Grafik eingebunden.
<A HREF="URL"> <IMG SRC="Bild.gif"> </A>
<HTML>
<HEAD>
<TITLE> Grafik als Link </TITLE>
</HEAD>
<BODY>
<H2> Zu den Abendgymnasien Österreichs </H2>
<P>
<A HREF="http://www.abendgymnasium.at"><IMG SRC="Eule.jpg"></A>
</P>
</BODY>
</HTML>
19
Wird eine Grafik als Link eingesetzt, setzt der Browser automatisch einen rahmen um die Grafik. Dies hat
den Vorteil, dass die Grafik sofort als Link erkannt wird. Wem das Design nicht gefällt, der kann natürlich das
Attribut BORDER der Grafik auf Null setzen.
Im professionellen Bereich werden gerne kleine Grafiken in Form von Buttons oder Ellipsen als
Schaltflächen eingesetzt. Auch hinter Thumbnails stecken Grafiken als Links. Darunter versteht man
verkleinerte Bilder, die in Originalgröße geladen werden, wenn man sie mit der Maus anklickt.
4.6. Imagemaps
Imagemaps sind Grafiken, die in anklickbare Bereiche aufgeteilt werden. Diese anklickbaren Flächen
werden als Hot-Spots bezeichnet. Wird ein Hot-Spot angeklickt, wird eine Aktion ausgeführt, meist wird
dadurch einem Link gefolgt.
Die Form der Hot-Spots ist rund oder eckig. Wird der Mauszeiger über einen Hot-Spot geführt, wechselt er
das Aussehen (in der Regel vom Pfeil in die Form einer Hand).
Möchte man ein Imagemap in ein HTML-Dokument einbauen, wird zuerst die entsprechende Grafik mittels
<IMG>-Tag eingebunden. Das Attribut USEMAP ordnet dann der Grafik die Definition eines Imagemaps zu.
Diese Definition eines Imagemaps wird zwischen die Tags <MAP> und </MAP> gesetzt. Innerhalb dieses
Tags werden dann die Hot-Spots durch das Tag <AREA> definiert.
Dem Tag <MAP> muss mit dem Attribut NAME der Name für das Imagemap zugewiesen werden, der auch
beim Tag <IMG> mit dem Attribut USEMAP angegeben werden muss. Dadurch wird definiert, welche Grafik
dem Imagemap zugeordnet ist.
<MAP NAME="Bild"> </MAP>
<IMG SRC="Bild.gif" USEMAP="#Bild">
Die Definition der Hot-Spots funktioniert mit Hilfe des Tags <AREA> und folgender drei Attribute, die in
jedem Fall benötigt werden:
¾ SHAPE: definiert die Form des Hot-Spots
• SHAPE="rect"
Ö
ergibt ein Rechteck
• SHAPE="poly"
Ö
ergibt ein Polygon
• SHAPE="circle"
Ö
ergibt einen Kreis
¾ COORDS: legt die Koordinaten des Hot-Spots fest
• Rechteck: Es werden die Koordinaten des linken oberen und des rechten unteren Punktes
angegeben, was insgesamt vier Werte ergibt.
• Polygon: Die Koordinaten der Eckpunkte werden angegeben. Je nachdem wie viele Ecken
das Polygon hat, so viele Werte werden angegeben.
• Kreis: Hier braucht man drei Werte, nämlich die Koordinaten für den Mittelpunkt des Kreises
und den Radius.
¾ HREF: gibt das Ziel der Verknüpfung an, d.h. die Adresse, auf die nun gesprungen werden soll.
<HTML>
<HEAD>
<TITLE> Imagemap </TITLE>
</HEAD>
<BODY>
<H2> Die Abendgymnasien Österreichs </H2>
<MAP NAME="Oesterreich">
<AREA SHAPE="rect" COORDS="152, 121, 213, 190"
HREF="http://www.abendgymnasium.salzburg.at">
HREF="http://www.abendgymnasium.linz.at">
HREF="http://www.abendgymnasium.innsbruck.at">
HREF="http://www.abendgymnasium.graz.at">
HREF="http://www.abendgymnasium.villach.at">
HREF="http://www.abendgymnasium.klagenfurt.at">
HREF="http://www.abendgymnasium.wien.at">
</MAP>
<IMG BORDER="0" SRC="Oesterreich.gif" USEMAP="#Oesterreich">
</BODY>
</HTML>
20
Das schwierigste an der Erstellung von Hot-Spots ist die Ermittlung der Koordinaten. Hierfür empfiehlt es
sich auf einen speziellen HTML-Editor (wie z.B. Frontpage) umzusteigen.
Will man in Frontpage die Koordinaten für die Hot-Spots bestimmen, geht man wie folgt vor:
¾ Über den Menüpunkt EINFÜGEN – GRAFIK – AUS DATEI wird die Grafik, die als Imagemap dienen
soll, in das Hauptfenster eingefügt.
¾ Markiert man die Grafik durch einmaliges Anklicken, erscheint das Grafikmenü, aus dem man nun
die passende Form für den Hot-Spot auswählt.
¾ Man fährt dann anschließend über den Bereich, der zum Hot-Spot werden soll und zieht dort die
entsprechende Fläche auf.
¾ Anschließend gelangt man in ein Dialogfenster, in dem der entsprechende Hyperlink einzutragen ist.
¾ Schaltet man dann auf das HTML-Fenster um, kann man sich die entsprechenden Koordinaten
(sowie den korrekten Programmiercode) herauslesen.
5. Tabellen
Beim Webdesign kommt man nicht um Tabellen herum. Man setzt sie meist für ein perfektes Layout ein,
denn bei ausgeschaltetem Tabellenrahmen ermöglichen sie das genaue Positionieren von Text und Bildern
in Spalten.
Zur Erstellung einer Tabelle werden die Tags <TABLE> und </TABLE> benötigt. Jede Zeilenreihe wird mit
dem Tag <TR> geöffnet und mit </TR> (engl. table row) geschlossen. Dazwischen reihen sich die einzelnen
Zellen mit den Tags <TD> un d</TD> (engl. table data) ein.
Damit man die Tabellenstruktur auch wirklich erkennen kann, ist im folgenden Bsp. im Tag <TABLE> das
Attribut BORDER eingefügt, welches für einfache Begrenzungslinien sorgt.
<HTML>
<HEAD>
<TITLE> 1.Tabelle </TITLE>
</HEAD>
<BODY>
<H2> Tabelle </H2>
<P>
<TABLE BORDER>
<TR>
<TD>1.Zelle der 1.Zeile</TD>
21
</TR>
<TR>
<TD>1.Zelle
<TD>2.Zelle
<TD>3.Zelle
</TR>
<TR>
<TD>1.Zelle
<TD>2.Zelle
<TD>3.Zelle
</TR>
</TABLE>
</P>
</BODY>
</HTML>
der 2.Zeile</TD>
der 2.Zeile</TD>
der 2.Zeile</TD>
der 3.Zeile</TD>
der 3.Zeile</TD>
der 3.Zeile</TD>
Auch in diesem Beispiel wird ersichtlich, dass es bei verschachtelten Tabellen bald ziemlich kompliziert wird
mit den <TABLE>-Tags. Deshalb greift man auch hier häufig auf HTML-Editoren zurück.
Die Tabelle steht standardmäßig immer linksbündig. Die Zellgröße richtet sich nach dem darin enthaltenen
Text.
Anstelle des Tags <TD> kann auch der Tag <TH> (für engl. table head) eingesetzt werden. Der Inhalt dieser
Zelle wird immer fett und zentriert ausgerichtet, weshalb sich dieser Tag sehr gut für die Gestaltung einer
Tabellenkopfzeile eignet.
5.1. Tabellenüberschrift und -unterschrift
Der Text einer Tabellenüberschrift wird zwischen die Tags <CAPTION> und </CAPTION> geschrieben:
<CAPTION> Überschrift </CAPTION>
Will man zusätzlich eine Tabellenunterschrift, wird das Tag mit einem entsprechenden Attribut versehen.
Dabei handelt es sich um das schon bekannte Attribut ALIGN, welches den Wert bottom bekommt.
Hier ein konkretes Bsp. für eine Tabelle mit Über- und Unterschrift:
<HTML>
<HEAD>
<TITLE> Tabelle mit Über- und Unterschrift </TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER>
<CAPTION> Standorte der Abendgymnasien </CAPTION>
<TR>
<TH>Tirol</TH> <TD>Innsbruck</TD>
</TR>
<TR>
<TH>Salzburg</TH> <TD>Salzburg</TD>
</TR>
<TR>
<TH>Steiermark</TH> <TD>Graz</TD>
</TR>
<TR>
<TH>Kärnten1 </TH> <TD>Klagenfurt</TD>
</TR>
22
<TR>
<TH>Kärnten 2</TH> <TD>Villach</TD>
</TR>
</TABLE>
<CAPTION ALIGN=bottom> Herzlich Willkommen! </CAPTION>
</P>
</BODY>
</HTML>
5.2. Zellengröße
Für die Tabellenbreite existiert das Attribut WIDTH, so dass man bei Bedarf Einfluss auf die Gesamtbreite
nehmen kann. Mit dem Attribut WIDTH lässt sich aber genauso die Zellenbreite variieren. Es lässt sich auf
alle Zellen, die mit <TD> erzeugt wurden, anwenden (sowohl als Absolutwert in Pixel als auch als
Prozentwert).
Die Zellenhöhe lässt sich durch einen kleinen Trick variieren, indem man nämlich in die Zelle ein
Leerzeichen ( ) eingibt und dann einen Absatz mit den Tags <P> und </P> einfügt.
<HTML>
<HEAD>
<TITLE> Tabelle mit unterschiedlich großen Zellen </TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER WIDTH=80%>
<TR>
<TD> <P></P>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
23
5.3. Textausrichtung in Tabellenzellen
Standardmäßig ist der Text einer Zelle immer linksbündig ausgerichtet. Mit dem Attribut ALIGN lässt sich der
Text auch rechtsbündig, zentriert oder als Blocksatz darstellen. Verwendet wird dieses Attribut im Tag
<TD>.
Text lässt sich allerdings nicht nur horizontal, sondern auch vertikal ausrichten. Für die vertikale
Textpositionierung dient das Attribut VALIGN. Folgende Aufstellung zeigt die korrekte Verwendung dieser
Attribute:
<TD ALIGN=left>
<TD ALIGN=right>
<TD ALIGN=center>
<TD ALIGN=justify>
<TD VALIGN=top>
<TD VALIGN=middle>
<TD VALIGN=bottom>
<TD VALIGN=baseline>
Text linksbündig
Text rechtsbündig
Text zentriert
Text als Blocksatz
Text oben
Text vertikal in der Mitte
Text unten
Text aller Zellen einer Zeile auf gleicher Höhe
5.4. Tabellenrand
Mit dem Attribut BORDER wird die Dicke des Randes in Pixel angegeben. Wird kein Wert zugeordnet, ist
der Wert 1 voreingestellt. Lässt man das Attribut BORDER weg, erzeugt man eine rahmenlose Tabelle.
Verpackt man Bilder in Tabellen, kann durch den Tabellenrand eine Art Bilderrahmen erzeugt werden, oder
aber man umrahmt eine oder mehrere Textpassagen durch einen Tabellenrahmen.
Neben dem Attribut BORDER dient auch das Attribut RULES zum Setzten von Tabellenlinien. Auch hier
erfolgt die Angabe im Tag <TABLE>. Folgende Linienarten stehen zur Verfügung:
¾ RULES=none Ö
es werden keine Trennlinien gezeichnet
¾ RULES=rows Ö
Trennlinien zwischen jeder Zeile
¾ RULES=cols Ö
Trennlinien zwischen jeder Spalte
¾ RULES=all
Ö
Trennlinie um alle Zellen
<HTML>
<HEAD>
<TITLE> Tabelle mit vertikalen Trennlinien </TITLE>
</HEAD>
<BODY>
<H2> Vertikale Trennlinien </H2>
<TABLE RULES=cols>
<TR>
<TD>Zelle 1</TD> <TD>Zelle 2</TD> <TD>Zelle 3</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
24
Ebenfalls Auswirkungen auf das Erscheinungsbild des Rahmens haben die Attribute CELLSPACING und
CELLPADDING, die beide innerhalb des Tags <TABLE> eingesetzt werden – die Werte werden wiederum
in Pixel angegeben. Beide dienen einer Art Polsterung. CELLPADING legt den Abstand zwischen Zellrand
und Zellinhalt fest. CELLSPACING steht für den Abstand zwischen den einzelnen Feldern, also die Dicke
der Wand.
<TABLE CELLSPACING=n>
<TABLE CELLPADDING=n>
<HTML>
<HEAD>
<TITLE> Gepolsterte Tabelle mit Rahmen </TITLE>
</HEAD>
<BODY>
<P>
<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=10>
<CAPTION> Cellpadding </CAPTION>
<TR>
<TD>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</P>
<P>
<TABLE ALIGN=center BORDER=2 CELLSPACING=10 CELLPADDING=0>
<CAPTION> Cellspacing </CAPTION>
<TR>
<TD>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
25
5.5. Verbinden von Zellen
Durch das sog. Spanning können Zellen innerhalb von Tabellen miteinander verbunden werden. Die dazu
benötigten Attribute ROWSPAN und COLSPAN werden innerhalb der Tags <TD> oder <TH> angegeben.
Als Wert (n)wird die Anzahl der zu verbindenden Zellen definiert.
<TD COLSPAN=n> </TD>
<TD ROWSPAN=n> </TD>
Bei COLSPAN werden die rechts davon befindlichen Zellen verbunden, bei ROWSPAN die darunter
liegenden.
<HTML>
<HEAD>
<TITLE> Tabelle mit verbundenen Zellen </TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER CELLPADDING=3 ALIGN=center>
<TR>
<TH COLSPAN=2> Standorte der Abendgymnasien </TH>
</TR>
<TR>
<TH>Salzburg</TH> <TD>Salzburg</TD>
</TR>
<TR>
<TH>Steiermark</TH> <TD>Graz</TD>
</TR>
<TR>
<TH ROWSPAN=2>Kärnten</TH> <TD>Klagenfurt</TD>
</TR>
<TR>
<TD>Villach</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
26
5.6. Farben in Tabellen
Zur farbigen Gestaltung von Tabellen wird das Attribut BGCOLOR eingesetzt. Es kann sowohl die ganze
Tabelle eingefärbt werden (das Attribut wird dann im Tag <TABLE> gesetzt), als auch einzelne Zellen
(Verwendung des Attributs im Tag <TD>).
<HTML>
<HEAD>
<TITLE> Tabelle mit Farbe </TITLE>
</HEAD>
<BODY>
<P>
<TABLE ALIGN=center BORDER=2 CELLPADDING=3 BGCOLOR=blue>
<TR>
<TD>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</P>
<P>
<TABLE ALIGN=center BORDER=2 CELLPADDING=3>
<TR>
<TD BGCOLOR=silver>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD BGCOLOR=silver>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
27
Farben werden entweder mit gültigen Farbnamen angegeben oder man setzt den entsprechenden
Hexadezimalcode ein.
Sämtliche Farben setzten sich aus den drei Grundfarben rot, grün und blau (RGB) zusammen. Jeder
Bildpunkt besteht dabei aus drei Bytes (drei Bytes = drei Grundfarben). Der Inhalt eines Bytes kann einen
Wert zwischen 0 und 255 annehmen. Je höher der Wert, desto heller die Farbe. Weiß setzt sich somit aus
der Farbkombination 255, 255, 255 zusammen, schwarz hingegen hat die Farbkombination 0, 0, 0.
Für die Grundfarben ergibt sich folgende Kombination:
¾ Rot:
R:255, G:0, B:0
¾ Grün:
R:0, G:255, B:0
¾ Blau:
R:0, G:0, B:255
Hier ein paar Beispiele für die Zusammensetzung von Mischfarben:
¾ Cyan:
R:0, G:255, B:255
¾ Gelb:
R:255, G:255, B:0
¾ Magenta: R:255, G:0, B:255
¾ Weiß:
R:255, G:255, B:255
In HTML werden die Farben aber nicht im RGB-Mischungsverhältnis angegeben, sondern hexadezimal.
Basiszahl des Hexadezimalsystems ist die 16. Da im arabischen Zahlensystem nur 10 Ziffern zur Verfügung
stehen, werden die übrigen Ziffern mit Großbuchstaben dargestellt:
0123456789ABCDEF
Die Angabe eines Farbwertes besteht immer aus zwei Stellen. So sieht ein Farbcode im hexadezimalen
System aus:
# A0 C0 3F
Ø
Ø
Ø
R
G
B
Es muss also die Dezimalzahl in eine hexadezimale umgewandelt werden, um den passenden Code für
HTML zu bestimmen. Diese Umwandlung soll an Beispiel eines hellen Blaus (R:102, G:153, B:255)
beschrieben werden:
Dezimalzahl
102
6
/
/
16
16
153
9
/
/
16
16
255
15
/
/
16
16
Ergebnis Rest
=6
6
=0
6
Ö Rot =
=9
9
=0
Ö Grün =
= 15
15
=0
15
Ö Blau =
Hex
6
6
9
9
F
F
Hex
6
6
9
9
F
F
In das HTML-Dokument muss nun folglich der Farbcode #6699FF eingegeben werden, um ein helles Blau
zu erzeugen.
Standardisierte Farbnamen und die dazugehörigen hexadezimalen Farbencodes
black
schwarz
#000000
maroon
dunkelrot
#800000
28
navy
silver
blue
green
teal
lime
aqua
dunkelblau
hellgrau
blau
dunkelgrün
blaugrün
hellgrün
cyan
#000080
#C0C0C0
#0000FF
#008000
#008080
#00FF00
#00FFFF
purple
red
fuchsia
olive
gray
yellow
white
violett
rot
magenta
ocker
dunkelgrau
gelb
weiß
#800080
#FF0000
#FF00FF
#808000
#808080
#FFFF00
#FFFFFF
Es können in Tabellen nicht nur einzelne Zellen eingefärbt werden, sondern auch bunte Rahmenlinien sind
möglich. Möchte man einen farbigen Rahmen, kann man dies leicht durch das Attribut BORDERCOLOR
bewerkstelligen. Auch dieses Attribut kann wieder auf die gesamte Tabelle angewandt werden (also im Tag
<TABLE>) als auch nur für einzelne Zellen (dann im Tag <TD> bzw. <TH>).
5.7. Tabellen als Layouthilfen
Fast jedes gewünschte Layout lässt sich mit Hilfe von Tabellen gestalten. Der häufigste Anwendungszweck
für das Tag <TABLE> ist der mehrspaltige Satz. Dabei wird eine Tabelle mit einer Reihe und zwei oder drei
Tabellenzellen nebeneinander erstellt. Mehr als drei Spalten werden bei niedriger Bildschirmauflösung schon
eher unübersichtlich.
<HTML>
<HEAD>
<TITLE> Tabellen in der Praxis </TITLE>
</HEAD>
<BODY>
<H2> Übersichtliche Tabelle </H2>
<P>
<TABLE BORDER=0 CELLPADDING=3 >
<TR>
<TD BGCOLOR=silver>Hier steht der Text links vom Bild</TD>
<TD><IMG SRC="Eule.jpg></TD>
<TD BGCOLOR=silver>Hier steht der Text rechts vom Bild</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>
6. Frames
Frames sind im Grunde nichts anderes wie Rahmen, die mit Inhalten gefüllt sind. Somit lässt sich das
Seitenlayout wesentlich verbessern (z.B. durch eine fixe Navigationsleiste, die nicht jedes Mal neu geladen
werden muss, oder durch ein Logo, das auch nur einmal geladen wird). Der einzige Nachteil, den Frames
mit sich bringen, ist die längere Ladezeit beim ersten Bildaufbau, da für jedes Frame ein eigenes HTMLDokument geladen wird.
29
Quelle: Frame2.html
Quelle: Frame1.html
20%
80%
Framename:Frame1
Framename:Frame2
Damit der Browser die Frames aufbaut und die dazugehörigen Inhalte lädt, wird zuerst ein HTML-Dokument
geladen, das die Informationen enthält, die zum Aufbau der Frames notwendig sind. Dazu werden die Tags
<FRAMESET> und </FRAMESET> verwendet.
<FRAMESET> Definition der Frames </FRAMESET>
Wie gesagt benötigt die Definition des Frameset ein eigenes Dokument, welches sich von herkömmlichen
HTML-Seiten etwas unterscheidet. Anstelle des Tags <BODY> wird nämlich das Tag <FRAMESET>
eingesetzt. Außerdem ändert sich die DTD (Document Type Declaration).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD> <TITLE> </TITLE> </HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Der Rand eines Frames wird durch das Attribut FRAMEBORDER festgelegt, welches die Werte 0 oder 1
haben kann (FRAMEBORDER=0 Ö kein Rahmen, FRAMEBORDER=1 Ö sichtbarer Rahmen).
<FRAMESET FRAMEBORDER=n> Definition der Frames </FRAMESET>
6.1. Aufteilung in Frames
Die Einteilung der Frames geschieht mit Hilfe der Attribute ROWS und COLS.
Soll das Fenster in zwei nebeneinander liegende Frames aufgeteilt werden, verwendet man das Attribut
COLS. Die Einteilung kann durch Prozentangaben (prozentual zur verfügbaren Fensterbreite) oder absolut
(in Pixel) erfolgen.
<FRAMESET COLS="n%,n%"> </FRAMESET> bzw. <FRAMESET COLS="n,n"> </FRAMESET>
<HTML>
<FRAMESET FRAMEBORDER=1 COLS="20%,80%">
</FRAMESET>
</HTML>
Ebenso wie beim Attribut COLS wird beim Attribut ROWS der Wert in Prozenten oder Pixeln angegeben.
Durch die Verwendung des Attributes ROWS kommt es zu einer horizontalen Trennung des Fensters.
<FRAMESET ROWS="n%,n%"> </FRAMESET> bzw. <FRAMESET ROWS="n,n"> </FRAMESET>
<HTML>
<FRAMESET FRAMEBORDER=1 ROWS="120,*">
</FRAMESET>
</HTML>
Der * als Zweitwert beim Attribut ROWS bedeutet, dass der restliche zur Verfügung stehende Platz diesem
zweiten Frame zugewiesen wird. Dieses Vorgehen ist natürlich auch beim Attribut COLS zulässig und wird in
der Praxis häufig eingesetzt.
Auch das Kombinieren von Attributen und somit mehr als zwei Frames sind möglich. Das Attribut
ROWS="20%,20%,60%" würde z.B. eine Aufteilung in drei horizontale Fenster ergeben, wobei der letzte
Wert (60%) genauso gut durch ein * ersetzt werden hätte können. Adäquates gilt für das Attribut COLS.
Aber auch ROWS und COLS können innerhalb eines Framesets miteinander kombiniert werden. Dazu sind
zwei verschachtelte <FRAMESET>-Tags notwendig. Diese Verschachtelung ermöglicht das Anordnen von
horizontalen und vertikalen Frames.
<HTML>
<FRAMESET FRAMEBORDER=1 COLS="20%,*%">
<FRAMESET FRAMEBORDER=1 ROWS="30%,*%">
</FRAMESET>
30
</FRAMESET>
</HTML>
6.2. Rahmen füllen
Oft werden Frames ohne Inhalt im Browser gar nicht angezeigt. Erst wenn sie mit Inhalten gefüllt werden,
kommt die Framestruktur zum Vorschein.
Jedem Frame wird ein HTML-Dokument zugeordnet, wobei das Tag <FRAME> verwendet wird, welches
immer in Kombination mit dem Attribut SRC steht.
<FRAME SRC="Datei">
Beim Dateinamen ist wieder auf die exakte Adressierung zu achten (je nachdem, wo das Dokument
abgespeichert ist).
<HTML>
<HEAD> <TITLE>Frames mit Inhalt</TITLE> </HEAD>
<FRAME SRC="Frame1.html">
<FRAME SRC="Frame2.html">
</FRAMESET>
</HTML>
6.3. Zuordnung der Frames
Eine häufige Einsatzmöglichkeit der Frametechnik ist eine Navigationsleiste, die beim Browsen durch die
Website immer stehen bleibt. Damit die ausgeführten Links nicht im selben Fenster wie die Navigationsleiste
selbst erscheinen, müssen die einzelnen HTML-Dokumente bestimmten Frames zugewiesen werden.
Dazu müssen die einzelnen Frames zuerst einmal benannt werden. Die Namensvergabe erfolgt mit dem
Attribut NAME.
<FRAME SRC="Datei.hmtl" NAME="Frame1">
<HTML>
<HEAD> <TITLE> Frames mit Inhalt </TITLE> </HEAD>
<FRAME SRC="Frame1.html" NAME="1">
</FRAMESET>
</HTML>
Nach der Namenszuweisung kann nun mit Hilfe eines Links innerhalb des einen Fensters das Zieldokument
im zweiten Fenster angezeigt werden. Dazu muss noch im zu ladenden Dokument im Tag <A> das Attribut
TARGET eingebaut werden.
<A HREF="Datei.html" TARGET="n"> Link <A>
<HTML>
31
<BODY>
<H2>Frame1.html</H2>
<A HREF="Frame3.html" TARGET="2">Frame3.html</A>
<P>
Die Darstellung des Dokuments Frame3.html soll im rechten Fenster erfolgen.
</P>
</BODY>
</HTML>
6.4. Darstellung der Frames
¾ Normalerweise erhält ein Frame eine Scrollleiste immer dann, wenn die Fläche nicht ausreicht, um
den Inhalt komplett darzustellen. Der Browser stellt dann automatisch den Frame mit einer oder zwei
Scrollleisten dar. Mit dem Attribut SCROLLING kann darauf Einfluss genommen werden. Man kann
also die Darstellung mit Scrollleisten erzwingen oder unterbinden.
<FRAME SCROLLING=n>
n wird hier entweder durch Yes (dann werden Scrollleisten immer dargestellt) oder durch No ersetzt
(dann werden nie Scrollleisten gezeigt).
<HTML>
<HEAD> <TITLE> Frames mit Inhalt </TITLE> </HEAD>
<FRAME SRC="Frame1.html" SCROLLING= Yes NAME="1">
<FRAME SRC="Frame2.html" SCROLLING=No NAME="2">
</FRAMESET>
</HTML>
32
¾
Zwischen dem Inhalt eines Frames und dem Rand lässt sich mit den Attributen MARGINGWIDTH
und MARGINHEIGHT (beide werden in Pixel angegeben) ein bestimmter Abstand definieren.
<FRAME MARGINHEIGHT=n> Ö definiert den Abstand zum oberen und unteren Rahmenrand
<FRAME MARGINWIDTH=n>
Ö definiert den Abstand zum linken und rechten Rahmenrand
¾
In der Regel lassen sich die Rahmengrößen der Frames im Browser vom Betrachter verändern. Soll
dies verhindert werden, und möchte man dem Frame eine feste Größe zuweisen, kann in das Tag
<FRAME> das Attribut NORSIZE eingebaut werden. Sinn macht dieses Argument v.a. dann, wenn
z.B. Links oder Grafiken auf keinen Fall verdeckt werden sollen.
6.6. Verweise aus dem Frameset
Wird aus dem Frameset heraus ein externer Link gesetzt, ist darauf zu achten, wo sich dieser Link öffnet.
Soll das Dokument in einem neuen leeren Fenster geöffnet werden, wird im Tag <A> das Ziel als
TARGET="_blank" gewählt. Soll das gesamte Frameset geschlossen und das Dokument im gesamten
Browserfenster gezeigt werden, lautet das Zielattribut TARGET="_top". Wird das Attribut TARGET nicht
gesetzt, wird der Link im Frame angezeigt.
Die korrekte Syntax für einen Link könnte also z.B. so aussehen:
<A HREF=http://www.abendgymnasium.salzburg.at TARGET="_top">Abendgym Salzburg</A>
6.7. Alternativen zu Frames
Leider gibt es noch immer Browser, die keine Frames anzeigen. Wird mit einem solchen Browser ein
HTML-Dokument aufgerufen, das aus Frames zusammengesetzt ist, sieht der Betrachter gar nichts. Um dies
zu verhindern, kann zwischen die Tags <FRAMESET> und </FRAMESET> das Tag <NOFRAME> gesetzt
werden.
<NOFRAMES> Inhalt </NOFRAMES>
Framefähige Browser ignorieren dieses Tag, solche, die keine Frames darstellen können, zeigen dem
Betrachter dann zumindest den Inhalt, der zwischen den Tags <NOFRAMES> und </NOFRAMES> steht.
Natürlich kann hier derselbe Inhalt, wie in den Frames stehen.
<HTML>
<HEAD> <TITLE> Inhalt für nicht framefähige Browser </TITLE> </HEAD>
<FRAME SRC="Frame1.html" NORSIZE NAME="1">
<NOFRAMES>
Ihr Browser zeigt leider keine Frames an. Deshalb sehen Sie hier
keinen Inhalt!
</NOFRAMES>
</FRAMESET>
</HTML>
7. Formulare
Formulare dienen dem vereinfachten Auswerten und Eingeben verschiedenster Daten. So können z.B.
Fragebögen ausgefüllt oder Rückmeldungen versandt werden, oder man kann an einem Gewinnspiel
teilnehmen. Zur Auswertung von Formularen und der automatischen Verarbeitung sind dann allerdings
eigene Programme (sog. CGI-Programme) notwendig.
Ein Formularblock wird durch die Tags <FORM> und </FORM> definiert.
<FORM> Definition </FORM>
Die Art der Datenweiterleitung wird durch das Attribut METHOD bestimmt.
¾ METHOD=post
Ö
Formular wird nur versandt (z.B. an eine E-Mail-Adresse)
33
¾
METHOD=get
Ö
Formular wird versandt und weiterverarbeitet
Das Attribut ACTION gibt an, mit welchem Programm das Formular ausgeführt werden soll. Hier ist auch die
Zieladresse enthalten, an der das CGI-Programm, das die Verarbeitung übernimmt, zu finden ist, oder die EMail-Adresse, an die der Inhalt geschickt werden soll.
Beide Attribute müssen im Tag <FORM> enthalten sein:
<FORM METHOD=n ACTION="URL"> Definition </FORM>
Folgendes Bsp. zeigt, wie ein Formularinhalt an eine E-Mail-Adresse geschickt wird:
<HTML>
<HEAD>
<TITLE> Formular als Mail versandt </TITLE>
</HEAD>
<BODY>
<FORM METHOD=post ACTION="MAILTO:ute.baumgartner@schule.at>
</FORM>
</BODY>
</HTML>
7.1. Textfelder
Ein Textfeld dient zur Eingabe von Text in das Formular. Es wird mit der Hilfe des Tags <INPUT> erstellt.
Zwingend notwendig ist hier außerdem die Zuweisung eines Namens mit dem Attribut NAME.
<INPUT NAME="Name">
<HTML>
<HEAD>
<TITLE> Formular mit Textfeldern </TITLE>
</HEAD>
<BODY>
<FORM METHOD=post ACTION="MAILTO:ute.baumgartner@schule.at">
<INPUT NAME="Feld1">
<INPUT NAME="Feld2">
</FORM>
</BODY>
</HTML>
Dieses Formular weist allerdings noch grobe Mängel auf, da es keine Möglichkeit gibt, die Eingabe
abzusenden, die Felder nicht beschriftet sind und die Größe der Felder nicht definiert wurde.
Die Beschriftung erfolgt durch Eingabe einer ganz normalen HTML-Textes. Wird kein Zeilenumbruch oder
Absatz gesetzt, folgt das Eingabefeld direkt im Anschluss an den Text.
Das Attribut SIZE legt die Größe des Textfeldes fest. Dabei kann die Größe des sichtbaren Feldes
durchaus vom Platz für den Text abweichen. Mit Hilfe des Attributs MAXLENGTH kann festgelegt werden,
wie viel Zeichen der darin enthaltene Text lang sein darf.
<INPUT NAME="Name" SIZE=n MAXLENGTH=n>
n wird jeweils durch die Zahl der Zeichen ersetzt, die zugelassen sind.
<HTML>
<HEAD>
<TITLE> Formular mit Namenseingabefeldern </TITLE>
</HEAD>
<BODY>
Vorname: <INPUT NAME="Feld1" SIZE=20 MAXLENGTH=50> <BR>
Nachname: <INPUT NAME="Feld2" SIZE=20 MAXLENGTH=50> <BR>
</FORM>
</BODY>
</HTML>
34
Wie in jedem anderen HTML-Dokument können natürlich auch Grafiken in Formulare eingebunden werden
oder Formulare in Tabellenstruktur erstellt werden, was ein sehr geordnetes Bild ergibt.
Ein weiteres wichtiges Attribut im Tag <INPUT> ist das Attribut TYPE. Hiermit wird die Feldart, also die Art
der einzugebenden Daten festgelegt.
¾ <INPUT TYPE=text>
Ö
¾ <INPUT TYPE=password>
Ö
¾ <INPUT TYPE=int>
Ö
¾ <INPUT TYPE=date>
Ö
Der Wert TEXT bewirkt das gleiche, wie wenn kein Wert
angegeben wird. Man kann hier alle möglichen Zeichen in das
Feld eingeben.
Der Wert PASSWORD dient der Eingabe von Passwörtern, die
während der Eingabe nicht sichtbar sind, sondern wo die
eingegebenen Zeichen nur als Sternchen dargestellt werden.
Der Wert INT ist für Eingabefelder vorgesehen, die numerisch
sind.
Der Wert DATE ermöglicht es, ein Feld zur Eingabe von Daten
zu definieren.
<HTML>
<HEAD>
<TITLE> Formular mit verschiedenen Feldarten </TITLE>
</HEAD>
<BODY>
Vorname: <INPUT TYPE=text NAME="Vorname" SIZE=20 MAXLENGTH=50>
Nachname: <INPUT TYPE=text NAME="Nachname" SIZE=20 MAXLENGTH=50>
<BR>
Straße: <INPUT TYPE=text NAME="Straße" SIZE=30 MAXLENGTH=50>
<BR>
PLZ: <INPUT TYPE=text NAME="PLZ" SIZE=5 MAXLENGTH=5>
Ort: <INPUT TYPE=text NAME="Ort" SIZE=20 MAXLENGTH=50> <BR>
Geburtsdatum: <INPUT TYPE=text NAME="GebDatum" SIZE=20 MAXLENGTH=50>
<BR>
Passwort: <INPUT TYPE=password NAME="Passwort" SIZE=10 MAXLENGTH=10>
</FORM>
</BODY>
</HTML>
35
Man kann Eingabefelder auch schon vorab mit Inhalten füllen. Die geschieht mit dem Attribut VALUE, mit
dem der Feldinhalt vorbelegt werden kann. Die Eingabe <INPUT TYPE=text NAME="URL"
VALUE="http://www."> würde ein Textfeld mit folgendem Aussehen kreieren:
Ihre Webseite: http://www.
Möchte man die Eingabe in ein Feld verhindern, kann das mit dem Attribut READONLY passieren. Dann
ist dieses Feld also gesperrt.
Die zuvor besprochenen Eingabefelder sind nur für die Eingabe von relativ kurzem Text geeignet. Sollen
mehrzeilige Felder für die Texteingabe zur Verfügung stehen, kann dies durch das Tag <TEXTAREA>
ermöglicht werden. Hier lassen sich z.B. Mitteilungen oder Kommentare vom Besucher der Website
eingeben.
<TEXTAREA NAME="Name"> </TEXTAREA>
Die Feldgröße für ein mehrzeiliges Texteingabefeld wird durch die Angabe der Zeilenzahl und die Breite
durch die Anzahl der Zeichen festgelegt. Hierfür werden die Attribute COLS und ROWS eingesetzt.
<TEXTAREA NAME="Name" COLS=n ROWS=n> </TEXTAREA>
n gibt in diesem Fall die Anzahl der Zeichen für die Breite bzw. die Anzahl der Zeilen an.
<HTML>
<HEAD>
<TITLE> Formular mit mehrzeiligem Texteingabefeld </TITLE>
</HEAD>
<BODY>
Bitte geben Sie hier Ihren Kommentar ein! <BR>
<TEXTAREA NAME="Kommentar" COLS=35 ROWS=8>
</TEXTAREA>
</FORM>
</BODY>
</HTML>
7.2. Schaltflächen
Zum Absenden eines Formulars werden meist Schaltflächen verwendet. Dafür steht an sich in HTML 4 das
Tag <BUTTON> zur Verfügung. Allerdings kann es von nur wenigen Browsern interpretiert werden,
weswegen meist für Schaltflächen ebenfalls das Tag <INPUT> verwendet wird, diesmal allerdings mit einem
besonderen TYPE. Zwei Werte sind möglich, nämlich:
¾ TYPE=submit Ö
setzt das Formular zurück und löscht dabei die Benutzereingaben
¾ TYPE=reset Ö
bestätigt die Eingabe und sendet den Inhalt an die Adresse, die im Tag
<FORM> unter dem Attribut ACTION angegeben wurde
Zur Beschriftung der Schaltfläche wird mit dem Attribut VALUE realisiert.
<INPUT TYPE=n VALUE="Beschriftung">
Die Breite der Schaltfläche passt sich automatisch an die Länge der Schrift an.
<HTML>
<HEAD>
<TITLE> Formular mit verschiedenen Feldarten </TITLE>
</HEAD>
<BODY>
36
Vorname: <INPUT TYPE=text NAME="Vorname" SIZE=20 MAXLENGTH=50>
Nachname: <INPUT TYPE=text NAME="Nachname" SIZE=20 MAXLENGTH=50>
<BR>
Straße: <INPUT TYPE=text NAME="Straße" SIZE=30 MAXLENGTH=50>
<BR>
PLZ: <INPUT TYPE=text NAME="PLZ" SIZE=5 MAXLENGTH=5>
Ort: <INPUT TYPE=text NAME="Ort" SIZE=20 MAXLENGTH=50> <BR>
Geburtsdatum: <INPUT TYPE=text NAME="GebDatum" SIZE=20 MAXLENGTH=50>
<BR>
Passwort: <INPUT TYPE=password NAME="Passwort" SIZE=10 MAXLENGTH=10>
<BR>
<INPUT TYPE=submit VALUE="abschicken">
<INPUT TYPE=reset VALUE="löschen">
</FORM>
</BODY>
</HTML>
7.3. Check –und Radiobuttons
Bei Checkbuttons handelt es sich um kleine rechteckige Kästchen, die durch Anklicken selektiert werden
können, wobei das innerhalb einer Gruppe beliebig viele sein können. Radiobuttons sind kleine Kreise, die
ebenfalls durch Mausklick ausgewählt werden. Hier ist jedoch nur die Auswahl eines Feldes möglich.
Für diese Buttons wird ebenfalls das Tag <INPUT> eingesetzt. Durch das Attribut TYPE wird festgelegt, ob
es sich um Check- oder Radiobuttons handelt.
¾ <INPUT TYPE=ckeckbox VALUE="Text">
¾ <INPUT TYPE=radio VALUE="Text">
Der Text unter dem Attribut VALUE wird durch den gewünschten Wert ersetzt, der bei der Aktivierung
verarbeitet wird.
<HTML>
<HEAD>
<TITLE> Formular mit Checkbox und Radiobutton </TITLE>
</HEAD>
<BODY>
Was sind Ihre Hobbys? <BR>
<INPUT NAME="Hobby" TYPE=checkbox VALUE="Kino"> Kino <BR>
<INPUT NAME="Hobby" TYPE=checkbox VALUE="Sport"> Sport <BR>
<INPUT NAME="Hobby" TYPE=checkbox VALUE="Lesen"> Lesen <BR><BR>
Welche Kreditkarte benutzen Sie? <BR>
<INPUT NAME="Karte" TYPE=radio VALUE="Visa"> Visa <BR>
<INPUT NAME="Karte" TYPE=radio VALUE="Mastercard"> Mastercard <BR>
<INPUT NAME="Karte" TYPE=radio VALUE="American"> American Express<BR>
</FORM>
</BODY>
</HTML>
37
7.4. Auswahllisten
Listenfelder ermöglichen durch Anklicken eines Feldes eine Auswahl verschiedener Optionen. Dabei öffnet
sich per Mausklick die Liste der möglichen Optionen, von denen dann eine ausgewählt werden kann.
Die Definition für eine Auswahlliste wird zwischen die Tags <SELECT> und </SELECT> geschrieben.
<SELECT> Definition </SELECT>
Die Listeneinträge erfolgen mit dem Tag <OPTION>. Die Vergabe eines Namens für das Feld ist dabei
obligatorisch.
<SELECT>
<OPTION> Text1 </OPTION>
<OPTION> Text2 </OPTION>
</SELECT>
Das Tag <OPTION> wird häufig zusammen mit dem Attribut SELECTED verwendet, womit ein Eintrag
vorselektiert warden kann. Dies macht allerdings nur Sinn, wenn dem Tag auch das Attribut MULTIPLE
zugeordnet ist.
Weitere Attribute, die im Tag <SELECT> verwendet werden können:
¾ Mit VALUE hat man die Möglichkeit, das Feld zu bezeichnen. Die Bezeichnung ist nicht sichtbar,
wird aber bei der Versendung des Formulars übertragen und erleichtert so die Auswertung.
<SELECT VALUE="Bezeichnung"> Definition </SELECT>
¾ SIZE nimmt Einfluss auf die Darstellung des Feldes. Man kann hier festlegen, wie viele
Listeneinträge der aktivierten Liste sichtbar sind. Ist die Höhe der Anzeige kleiner als die Menge der
Einträge, wird eine vertikale Bildlaufleiste eingeschaltet.
<SELECT SIZE=n> Definition </SELECT>
¾ MULTIPLE erlaubt die Auswahl mehrerer Einträge. Der Benutzer kann also zwei oder mehr
Optionen auswählen.
<SELECT MULTIPLE=n> Definition </SELECT>
n wird durch die Anzahl der Einträge bzw. die Anzahl der Auswahlmöglichkeiten ersetzt.
<HTML>
<HEAD>
<TITLE> Formular mit Listenfeldern </TITLE>
</HEAD>
<BODY>
Wählen Sie eine Note aus! <BR>
<SELECT SIZE=1 NAME="Liste1">
<OPTION> Sehr gut </OPTION>
<OPTION> Gut </OPTION>
<OPTION> Befriedigend </OPTION>
<OPTION> Genügend </OPTION>
<OPTION> Nicht genügend </OPTION>
</SELECT>
<BR><BR> Und noch eine Auswahlliste! <BR>
<SELECT SIZE=3 NAME="Liste2">
<OPTION SELECTED> Sehr gut </OPTION>
<OPTION> Gut </OPTION>
<OPTION> Befriedigend </OPTION>
<OPTION> Genügend </OPTION>
<OPTION> Nicht genügend </OPTION>
38
</SELECT>
</BODY>
</HTML>
39

HTML (Hypertext Markup Language)

Transcription

Similar documents

romana scheffknecht installationen

Das Sondersammelgebiets- Fachinformationsprojekt

SAE Magazin - SAE Alumni Association Europe

das spielejournal - Österreichisches Spiele Museum