Inhalt
Wozu?
Eine Einführung ·
Wie's dann weitergeht
Grundstruktur:
Einfache HTML-Anweisungen ·
Grundstruktur eines HTML-Dokumentes ·
Anweisungen mit Attributen ·
Zeichen in Anweisungen
Ein erster Text:
Titel ·
Text ·
Gesetzter Zeilenumbruch ·
Einige Sonderzeichen ·
Ausprobieren
Gliedern:
Überschriften ·
Absätze ·
Horizontale Ausrichtung ·
Horizontale Linien ·
Breite ·
Verweise/Links
Hervorheben:
Schriftumschaltungen ·
Font-Deklarationen ·
Farbwerte ·
Schrift- und Hintergrundfarben
Strukturen:
Verschachtelung von Strukturen ·
Eingerückter Absatz ·
Listen ·
Tabellen ·
Randschattierungen und Zellabstände ·
Zellgröße ·
Vertikale Ausrichtung ·
Zellverschmelzung
Fortgeschritteneres:
Bilder ·
Gegliedert anklickbare Bilder ·
Frames
Index:
! ·
A ·
B ·
C ·
D ·
E ·
F ·
G ·
H ·
I ·
L ·
M ·
N ·
O ·
P ·
R ·
S ·
T ·
U ·
V ·
W ·
Y
Wozu?
Eine Einführung:
Dieser Kurs ist zum einen als Einführung für Leute gedacht,
die noch keine Erfahrung mit dem Erstellen von
HTML-Dokumenten haben. Zum anderen soll eine
einfache Übersicht über grundlegende Gestaltungsmittel
für Webseiten bereitgestellt werden.
Wie's dann weitergeht:
Das hier bereitgestellte Material ist stark begrenzt. Die
Original-HTML4.0-Spezifikation ist beim
World Wide Web
Consortium nachzulesen. Etwas besser lesbar sind die Seiten der
Web Design Group. Eine
umfangreiche Dokumentation für Einsteiger und Fortgeschrittene
bietet Stefan Münz
an, eine brauchbare Übersicht über viele
HTML-Anweisungen hat
D. J. Quad
zusammengetragen. Eine Tabelle der Sonderzeichen
steht bei der
TU
Berlin, eine neuere bei der Web Design Group.
Über Formulare, Java, JavaScript etc. steht hier gar nichts. Und
natürlich gibt es noch viel, viel mehr.
[
Inhalt]
Grundstruktur
Einfache HTML-Anweisungen:
Die Grundform von HTML-Anweisungen ist
<tag> (ohne
Leerzeichen zwischen < und
tag). Dabei steht tag
für ein Schlüsselwort wie
HTML oder
HEAD. Viele Anweisungen schalten
das Dokument gewissermaßen in einen neuen Zustand um; die
entspechende Anweisung, um diesen Zustand wieder auszuschalten,
heißt dann </tag> (wieder ohne Leerzeichen
zwischen <, / und
tag).
Schema der Grundstruktur eines
HTML-Dokumentes
| |
<HTML>
<HEAD>
... Titel, Stichwörter ...
</HEAD>
<BODY>
... Inhalt ...
</BODY>
</HTML> |
|
|
Grundstruktur eines HTML-Dokumentes:
Ein Beispiel für eine einfache HTML-Anweisung
ist das Einschalten des HTML-Zustandes am Anfang
eines Textes durch
<HTML>, der am Ende des
Textes mit </HTML>
wieder abgeschaltet wird. Innerhalb dieses äußersten Rahmens
besteht ein HTML-Dokument aus einem Kopf und einem
Körper zwischen den Anweisungspaaren
<HEAD> ...
</HEAD> bzw.
<BODY> ...
</BODY> (siehe Kasten
oben). Im Kopf stehen Informationen über das Dokument, z. B.
der Titel und einige Stichwörter. Form und Inhalt des Dokumentes
bestimmt der Körper.
Anweisungen mit Attributen:
Häufig werden in einer Anweisung zum Schlüsselwort passende
Attribute angegeben. Einige Attribute werden als Schalter
übergeben. So erzeugt <TABLE BORDER> ...
</TABLE> eine Tabelle mit Rand.
Anderen Attributen werden Werte zugewiesen, z. B. dem Attribut
SIZE beim Umschalten auf eine kleinere Schrift
innerhalb von <FONT
SIZE="-1"> ... </FONT>.
Dem Attribut BORDER im vorhergehenden
Beispiel kann auch ein Wert zugewiesen werden, der die Breite des
Randes bestimmt. Wie in den Beispielen werden mit
<Schlüsselwort
Attribut[="..."]...>
eingeschaltete Zustände mit </Schlüsselwort> ausgeschaltet,
also ohne die Nennung von Attributen.
Zeichen in Anweisungen:
Bei den Schlüsselwörtern von Anweisungen, den Attributnamen
und vielen Argumenten sind Groß- und Kleinschreibung
gleichwertig. Hier wird Großschreibung verwendet. Mehrere
Attribute in einer Anweisung werden durch Leerzeichen getrennt,
z. B. <BODY
TEXT="#000000" BGCOLOR="#FFFFFF">.
Mehrere Leerzeichen, ein oder mehrere Zeilenwechsel und Kombinationen
von beiden werden wie ein Leerzeichen interpretiert.
Deshalb kann man eine Anweisung über mehrere Zeilen verteilen oder
zur optischen Gliederung der Datei Leerzeilen einfügen. Man kann
auch nicht anzuzeigende Kommentare innerhalb von
<!-- ... -->
einfügen. So kann man auch Zeilenwechsel auskommentieren.
Um explizit Leerzeichen in eine Seite einzufügen, verwendet man
geschützte Leerzeichen.
[
Inhalt]
Ein erster Text
Titel:
Der Titel "HTML-Kurs" dieses Dokumentes, dass Du gerade
ließt, wird im Kopf (d. h. zwischen
<HEAD> und
</HEAD>) durch
<TITLE>HTML-Kurs</TITLE> angegeben.
Text:
Ein einfacher Text, der ohne weitere Anweisungen zwischen
<BODY> und
</BODY> steht,
wird vom Web-Browser als Inhalt der Seite widergegeben. Der
Zeilenumbruch richtet sich dabei nicht nach dem im
HTML-Dokument sondern nach der Breite des
Browser-Fensters.
Gesetzter Zeilenumbruch:
Ein einfacher Zeilenumbruch wird mit <BR> erzeugt. Eine leere Zeile wird
nicht umgebrochen, d. h. <BR><BR> ergibt nur einen
Zeilenumbruch. Man kann aber eine Leerzeile durch das Einfügen
eines geschützten Leerzeichens zwischen die
Zeilenumbrüche erzeugen. Um einen Zeilenumbruch zwischen zwei
Wörtern zu verhindern, kann man das oder die Leerzeichen durch
geschützte Leerzeichen ersetzen.
Einige Sonderzeichen
|
ä |
|
ä |
|
ö |
|
ö |
|
ü |
|
ü |
|
| Ä |
|
Ä |
|
Ö |
|
Ö |
|
Ü |
|
Ü |
| ß |
|
ß |
|
& |
|
& |
|
" |
|
" |
| < |
|
< |
|
> |
|
> |
|
geschütztes Leerzeichen |
|
Sonderzeichen:
Einige Tastaturen und Editoren haben Schwierigkeiten mit deutschen
Umlauten und dem ß, weshalb diese Zeichen mit Kombinationen von
anderen Zeichen dargestellt werden, die auch im angloamerikanischen
Sprachraum üblich sind. Es gibt eine ganze Reihe solcher
Sonderzeichen. Eine Liste der Sonderzeichen aus der ISO 8859-1
liegt auf einem WWW-Server der TU-Berlin, eine neuere bei der Web Design
Group. Im Kasten oben deshalb nur eine kleine Auswahl.
Ausprobieren:
Schreibe ein einfaches HTML-Dokument mit einem Titel
und etwas Text. Benutze dazu einen ASCII-Editor (z. B. MS
Notepad) oder eine Textverarbeitung (wie MS Word).
Mit letzterer musst Du das Dokument als "Text only"
abspeichern. Öffne es ("Open File") mit Deinem
Web-Browser (z. B. dem
Netscape
Navigator) und schaue es Dir an. Dieses Dokument kannst Du
im folgenden verwenden, um verschiedene Dinge auszuprobieren.
Aufschlussreich kann es auch sein, wenn man sich mit einer
"View Source"-Funktion des Browsers den Seitenquelltext
anderer interessanter Seiten anschauen kann.
[
Inhalt]
Gliedern
Verschiedene Überschriftsgrößen
| |
<H1> |
|
Überschrift Größe 1 |
|
| |
<H2> |
|
Überschrift Größe 2 |
|
| |
<H3> |
|
Überschrift Größe 3 |
|
| |
<H4> |
|
Überschrift Größe 4 (normale
Textgröße) |
|
| |
<H5> |
|
Überschrift Größe 5 |
|
| |
<H6> |
|
Überschrift Größe 6 |
|
|
Überschriften:
HTML stellt für Überschriften in verschiedenen
Größen die Anweisungen <H1>
bis <H6> bereit. Gemeinsam ist diesen
die Umschaltung auf fette Schrift und der
anschließende Absatz. Die benutzten
Schriftgrößen entsprechen den FONT-Größen
SIZE="+3" bis
SIZE="-2".
Absätze:
Ein Absatz wird mit <P>
eröffnet. Diese Anweisung erzeugt einen Zeilenumbruch und eine
Leerzeile. Diese Struktur ist insbesondere für die
horizontale Ausrichtung von Text
interessant.
Horizontale Ausrichtung:
Bei Absätzen wie bei
horizontalen Linien und in
Tabellenzellen lässt sich die horizontale
Ausrichtung mit dem Attribut
ALIGN steuern, dem die Werte
"LEFT",
"RIGHT" oder
"CENTER" zugewiesen werden
können, z. B.
<P ALIGN="RIGHT">.
Das bewirkt linksbündige, rechtsbündige bzw. horizontal
zentrierte Ausrichtung. Bei Absätzen gibt es zusätzlich noch
die Möglichkeit ALIGN="JUSTIFY" für
Blocksatz. "LEFT" ist voreingestellt
Daneben gibt es noch die Anweisung <CENTER>, die zentrierte Ausrichtung einschaltet. Diese muss
anschließend abgeschaltet werden.
Beispiele für horizontale Linien
| |
<HR SIZE="1" WIDTH="70"> |
|
|
|
| |
<HR SIZE="5" WIDTH="40"> |
|
|
|
| |
<HR SIZE="10" WIDTH="10"> |
|
|
|
|
Horizontale Linien:
Die Anweisung <HR>
erzeugten eine Zeile mit einer horizontalen Linie. Mit dem Attribut
SIZE="..." lässt sich die
Höhe der Linie bzw. des Balkens beeinflussen. Voreinstellung ist
SIZE="1".
Breite:
Die Breite horizontaler Linien lässt sich
mit <HR WIDTH="..."> angeben. Die absolute Breite in Pixeln kann
man etwa mit WIDTH="50"
angegeben, den Anteil an der umgebenden Struktur z. B. mit WIDTH="70%".
In einer Tabelle würde die horizontale Linie dann 70 Prozent
der Breite der Tabellenzelle einnehmen. Die
Voreinstellung ist WIDTH="100%".
Auch die Breite von Tabellen und
Tabellenzellen lässt sich mit dem Attribut
WIDTH steuern.
Verweise/Links:
Mit <A NAME="ANKER">Punkt</A> wird das Wort
"Punkt" zu einem Bezugspunkt, auf den man mit <A HREF="#ANKER"> anklickbar verweisen
kann. Auf eine andere Datei verweist man mit <A HREF="File">. Ausgehend vom Verzeichnis des angezeigten
Dokumentes, kann
"File"
ein relativer Pfadname sein, wie etwa
"datei",
"verz1/verz2/datei" oder
"../verz1/datei", oder auch ein
absoluter, wie
"/home/hansi/verz1/verz2/datei".
Mit <A HREF="File#ANKER"> wird auf
einen Bezugspunkt in einem anderen Dokument verwiesen. Auf eine Datei
auf einem anderen Server verweist man z. B. mit <A HREF="http://www.uni-kiel.de/verz1/verz2/datei">, auf eine Email-Adresse
z. B. mit <A HREF="mailto:name@domain.de">.
Dem Attribut ALT kann ein Text zugewiesen
werden, der beim Zeigen auf den Verweisbereich erscheint. Das Attribut
TARGET bestimmt, wo
der Verweisort erscheint. Z. B. wird der Verweis mit TARGET="window" oder TARGET="_blank" in einem neuen
Browser-Fenster angezeigt. Dieses Attribut ist auch für das
Arbeiten mit Frames von großer
Bedeutung.
[
Inhalt]
Hervorheben
Übersicht Schriftumschaltungen
| |
<B> |
|
fett |
|
| |
<U> |
|
unterstrichen |
|
| |
<I> |
|
kursiv |
|
| |
<EM> |
|
kursiv |
|
| |
<TT> |
|
Schreibmaschine |
|
| |
<CODE> |
|
Schreibmaschine |
|
| |
<BLINK> |
|
|
|
| |
<STRIKE> |
|
durchgestrichen |
|
| |
<SUP> |
|
hoch-gestellt zur Zeile |
|
| |
<SUB> |
|
tief-gestellt zur Zeile |
|
|
Schriftumschaltungen:
Es gibt eine Anzahl einfacher Anweisungen, um das Aussehen der
Schrift zu steuern. <B>
erzeugt z. B. fette Schrift, <I> kursive. Dabei müssen
innerhalb einer Schriftumschaltung alle weiteren Schriftumschaltungen
ausgeschaltet werden, bevor die übergeordnete Schriftumschaltung
ausgeschaltet werden kann. Deshalb ergibt der Text "(norm)
<B>(bold) <I>(bold+ital) </B>(ital)
</I>(norm)" folgende Zeile:
(norm) (bold) (bold+ital) (ital) (norm)
Die Änderung zu "(norm) <B>(bold)
<I>(bold+ital)</I></B> <I>(ital)</I>
(norm)" bringt das gewünschte Ergebnis:
(norm) (bold) (bold+ital) (ital)
(norm)
Im Kasten oben sind verschiedene Schriftumschaltungsanweisungen
zusammengestellt.
Übersicht Font-Deklarationen
| |
|
Size="1"
Size="2"
Size="3" (=normal)
Size="4"
Size="5"
Size="6"
Size="7"
|
FACE= |
"Times New Roman"
"Arial"
"Book Antiqua"
"Century Gothic"
"Comic Sans MS"
"Courier New"
"Garamond"
"Haettenschweiler"
"Impact"
"Modern"
"Symbol"(Symbol)
"Verdana"
|
COLOR= |
"RED"
"GREEN"
"BLUE"
"MAGENTA"
"#FF0000"
"#00FF00"
"#0000FF"
"#FF00FF"
|
|
|
|
Font-Deklarationen:
Die Anweisung <FONT>
dient der Auswahl einer Schriftgröße, eines Zeichensatzes
oder einer Textfarbe.
Schriftgrößen werden durch SIZE="..." angegeben.
Absolute Schriftgrößen gibt es für Werte von
"1" bis "7", relative
von "-2" bis "+4".
Die normale Schriftgröße entspricht dem absoluten Wert
"3". <FONT
SIZE="+1"> ist also gleichwertig mit <FONT SIZE="4">.
Wenn Dein Web-Browser verschiedene Zeichensätze anbietet,
dann kannst Du sie durch FACE="..." auswählen.
Der "Symbol"-Font etwa stellt mathematische Symbole und
griechische Buchstaben bereit.
Die Farbe des Textes wird mit COLOR="..." eingestellt.
Mögliche Werte sind einige englische
Farbbezeichnungen (z. B.
"BLUE") oder ein
sechstelliger hexadezimaler
RGB-Farbcode.
Die acht Ecken des RGB-Farbwürfels
| |
"#FF0000" |
rot |
|
"#00FFFF" |
cyan |
|
| |
"#00FF00" |
grün |
|
"#FF00FF" |
magenta |
|
| |
"#0000FF" |
blau |
|
"#FFFF00" |
gelb |
|
| |
"#000000" |
schwarz |
|
"#FFFFFF" |
weiß |
|
|
Farbwerte:
Farben werden in HTML eingestellt, indem einem Attribut
wie COLOR einen Farbwert
zuweist. Mögliche Farbwerte sind einige englische
Farbbezeichnungen (z. B.
"WHITE", "BLACK",
"RED", "YELLOW",
"GREEN", "BLUE",
"PURPLE" oder
"MAGENTA") oder ein sechstelliger
hexadezimaler RGB-Farbcode.
Ein sechsstelliger hexadezimaler Code besteht aus sechs Zeichen, von
denen jedes entweder eine der zehn Ziffern von 0 bis
9 oder einer der sechs Buchstaben von A
bis F ist. Für jedes der sechs Zeichen gibt es
also sechzehn Möglichkeiten. Die sechs Zeichen sind in drei
Zweiergruppen aufgeteilt: die ersten beiden Zeichen bestimmen den
Rotanteil der Farbe, die nächsten beiden den Grünanteil und
die letzten beiden den Blauanteil (R-G-B).
Jede der Zweiergruppen ist eine zweistellige hexadezimale Zahl, mit der
man folgendermaßen von 00 aus hochzählt:
00, 01, 02, ... ,
08, 09, 0A, 0B,
... , 0F, 10, 11,
12, ... , 1F, 20,
21, ... , 9F, A0,
... , FF. Das sind 16×16=256
verschiedene Zeichenkombinationen und damit auch 256 verschiedene
mögliche Werte für jede der drei Farben rot, grün und
blau. Die gängigen Browser stellen allerdings nur sechs
verschiedene Werte für jede der drei Farben dar: 00,
33, 66, 99, CC und
FF. Jeder andere Wert wird wie der nächst
benachbarte dieser sechs dargestellt.
00 auf den ersten beiden Stellen bedeutet minimaler
Rotanteil (= aus), FF maximaler Rotanteil (= an).
Entsprechendes gilt für grün und blau. Im RGB-Farbmodell
ergibt die Mischung von Rot mit Grün Gelb, die von Grün mit
Blau Cyan und die von Blau mit Rot Magenta. Wenn alle drei Farben aus
sind, erhält man schwarz, wenn alle an sind, weiß. Damit
ergibt sich die Farbtabelle im Kasten oben.
Schrift- und Hintergrundfarben:
In der Anweisung <FONT> bestimmt der
Wert des Attributes COLOR die Farbe
der Schrift. Leuchtend blaue Schrift bekommt man z. B. mit
<FONT COLOR="BLUE">,
gedeckt grüne Schrift mit <FONT
COLOR="#009900">.
Die Farben von normalem Text sowie von neuen, aktivierten und alten
Verweisen kann man in der Anweisung
<BODY> den
Attributen TEXT, LINK,
ALINK bzw. VLINK
zuweisen. TEXT="#000000" erzeugt
schwarzen Text. Neue Verweise, denen man noch
nicht gefolgt ist, würden durch
LINK="#0000CC" eine gedeckt
blaue Farbe erhalten. Aktive Verweise, die
gerade verfolgt werden,leuchten mit
ALINK="#FF00FF" magentafarben
auf. Alte Verweise, denen man früher schon
gefolgt ist, sind durch
VLINK="#990099" violett.
In den Anweisungen <BODY>,
<TABLE> und
<TD> kann man dem
Attribut BGCOLOR eine Hintergrundfarbe
für die gesamte Seite, für die ganze Tabelle bzw. für
eine Tabellenzelle zuweisen.
[
Inhalt]
Strukturen
Verschachtelung von
Strukturen:
Komplexere Gliederungseinheiten wie eingerückte
Absätze, verschiedene Listentypen oder
Tabellen sollen hier Strukturen genannt werden.
HTML ermöglicht es, alle diese Strukturen tiefer und
tiefer ineinander zu verschachteln, also z. B. in eine
Tabellenzelle eine Liste,
darein ein eingerückter Absätz, hier
hinein wieder eine Liste und hierein wieder eine
Tabelle.
Eingerückter Absatz:
Ein beidseitig eingerückter Absatz wird durch
<BLOCKQUOTE> geöffnet. Diesen muss
man explizit schließen.
Beispiele für die drei Listentypen
| nummerierte Liste |
<OL>
<LI>Punkt i
<OL>
<LI>Punkt i.i
</OL>
<LI>Punkt ii
<LI>Punkt iii
</OL> |
- Punkt i
- Punkt i.i
- Punkt ii
- Punkt iii
|
|
| nicht nummerierte Liste |
<UL>
<LI>Punkt i
<UL>
<LI>Punkt i.i
</UL>
<LI>Punkt ii
<LI>Punkt iii
</UL> |
- Punkt i
- Punkt ii
- Punkt iii
|
|
| Beschreibungs-Liste |
<DL>
<DT>Begriff i
<DD>Beschreibung i
<DL>
<DT>Begriff i.i
<DD>Beschr. i.i
</DL>
<DT>Begriff ii
<DD>Beschreibung ii
<DT>Begriff iii
<DD>Beschreibung iii
</DL> |
- Begriff i
- Beschreibung i
- Begriff i.i
- Beschr. i.i
- Begriff ii
- Beschreibung ii
- Begriff iii
- Beschreibung iii
|
Listen:
HTML stellt drei Arten von Listen zur Verfügung:
nummerierte Listen <OL>, nicht
nummerierte Listen <UL> und
Beschreibungs-Listen
<DL>. Die Anweisungen
<MENU> und
<UL> erzeugen gleiche
Listen. Nummerierte und nicht nummerierte Listen werden mit linkem
Einzug gesetzt.
Ein Listeneintrag wird in nummerierten und nicht nummerierten Listen
mit <LI> geöffnet.
<LI> muss nicht
explizit geschlossen werden, d. h. der Listeneintrag endet
automatisch beim nächsten
<LI> bzw. beim
Schließen der Liste.
Eine Beschreibungs-Liste besteht aus abwechselnd einem nicht
eingerückten Textabschnitt und einem eingerückten. Der nicht
eingerückte Abschnitt ist für einen Begriff gedacht, der
eingerückte für dessen Beschreibung oder Erklärung.
Ein Begriffs-Abschnitt wird mit
<DT> eröffnet, ein
Beschreibungs-Abschnitt mit
<DD>. Beide brauchen
nicht explizit geschlossen werden.
In den HTML-Beispielen oben wurden einige Zeilen der
Übersichtlichkeit wegen eingerückt. Auf die Darstellung hat
das keinen Einfluss.
Beispiel für eine Tabelle
| |
<TABLE BORDER>
<TR>
<TD>oben links</TD>
<TD>oben rechts</TD>
</TR>
<TR>
<TD>unten links</TD>
<TD>unten rechts</TD>
</TR>
</TABLE> |
|
| oben links |
oben rechts |
| unten links |
unten rechts |
|
|
|
Tabellen:
Mit der Struktur
<TABLE> kann man
Tabellen erzeugen. Jede Zeile ist von
<TR> ...
</TR> eingefasst, in
einer Zeile jede Zelle von
<TD> ...
</TD>. Dieses Schema
ist im Kasten oben dargestellt.
Beispiele für Randschattierungen und
Zellabstände
| |
| - |
<TABLE BORDER="5" CELLSPACING="1"
CELLPADDING="1"> |
- |
| - |
<TABLE BORDER="1" CELLSPACING="5"
CELLPADDING="1"> |
- |
| - |
<TABLE BORDER="1" CELLSPACING="1"
CELLPADDING="5"> |
- |
|
|
|
Randschattierungen und Zellabstände:
Mit dem Attribut BORDER
wird der äußere Rand und die Ränder der Stege um
gefüllte Zellen schattiert. Durch eine optionale Wertzuweisung
BORDER="..."
kann man die Breite der Schattierung des äußeren Randes
steuern. Ohne Wertzuweisung ist
BORDER gleichwertig mit
BORDER="1".
Das Attribut
CELLSPACING="..."
bestimmt die Breite der Stege zwischen den Zellen.
CELLPADDING="..."
stellt den Mindestabstand des Zellinhaltes vom Zellsteg ein. Für
beide Attribute ist der Wert 2 voreingestellt.
Zellgröße:
Die Breite einer Tabellenzelle wird implizit von dem breitesten
Zellinhalt aller Zellen der selben Tabellenspalte bestimmt, die
Zellhöhe von dem höchsten Zellinhalt in der Tabellenreihe.
Um einer Zelle zusätzliche Breite zu geben,
kann dem Attribut
WIDTH
ein entsprechender Wert zugewiesen werden. Mit einer analogen
Wertzuweisung für das Attribut
HEIGHT kann die Zellhöhe
vergrößert werden. Auch in der Anweisung
<TABLE> kann man den
Attributen
WIDTH
und HEIGHT entsprechende
Werte zuweisen.
Übersicht zur Ausrichtung von Text und
Bildern
| |
<P
<TABLE
<TD |
} |
ALIGN= |
{ |
"LEFT", "RIGHT", "CENTER",
"JUSTIFY" |
} |
> |
|
| |
VALIGN= |
{ |
"TOP", "CENTER", "BOTTOM",
"BASELINE" |
} |
> |
| |
|
|
| |
<IMG |
|
ALIGN= |
{ |
"LEFT", "RIGHT", "TOP", "TEXTTOP", "MIDDLE",
"ABSMIDDLE", "BOTTOM", "BASELINE", "ABSBOTTOM" |
} |
> |
|
|
Vertikale Ausrichtung:
Die vertikale Ausrichtung des Zelleninhalts lässt sich mit der
Zuweisung
VALIGN="..." und
den Zuweisungsmöglichkeiten
"TOP",
"CENTER",
"BOTTOM" oder
"BASELINE" steuern, um
oberbündig, zentriert, unterbündig bzw. nach der Grundlinie
auszurichten. "CENTER" ist
voreingestellt. Die horizontale Ausrichtung
erfolgt über Zuweisungen zum Attribut ALIGN.
Eine Übersicht über horizontale und vertikale Ausrichtung
in Absätzen, Tabellen
und Tabellenzellen
und von Bildern
bietet der Kasten oben.
Beispiel zur Zellverschmelzung
| |
<TABLE BORDER>
<TR>
<TD>1.1</TD><TD>1.2</TD>
<TD>1.3</TD><TD>1.4</TD>
<TD>1.5</TD>
</TR>
<TR>
<TD>2.1</TD>
<TD COLSPAN="3"
BGCOLOR="#FFCCFF">
2.2-4</TD>
<TD>2.5</TD>
</TR>
<TR>
<TD>3.1</TD>
<TD ROWSPAN="2"
BGCOLOR="#FFFFCC">
3.2<BR>
4.2</TD>
<TD COLSPAN="2"
ROWSPAN="2"
BGCOLOR="#FFFFFF">
3.3-4<BR>
4.3-4</TD>
<TD>3.5</TD>
</TR>
<TR>
<TD>4.1</TD><TD>4.5</TD>
</TR>
<TR>
<TD>5.1</TD><TD>5.2</TD>
<TD>5.3</TD><TD>5.4</TD>
<TD>5.5</TD>
</TR>
</TABLE> |
|
| 1.1 |
1.2 |
1.3 |
1.4 |
1.5 |
| 2.1 |
2.2-4 |
2.5 |
| 3.1 |
3.2
4.2 |
3.3-4
4.3-4 |
3.5 |
| 4.1 |
4.5 |
| 5.1 |
5.2 |
5.3 |
5.4 |
5.5 |
|
|
|
Zellverschmelzung:
Mit den Attributen COLSPAN
und ROWSPAN kann man
Tabellenzellen verschmelzen. Siehe dazu das Beispiel im Kasten
oben.
[
Inhalt]
Fortgeschritteneres
Bilder:
Mit <IMG SRC="File"> kann
man die Bilddatei File ins Dokument einbinden.
Verbreitete Web-Browser unterstützen die Grafikformate GIF
(Endung ".gif") und JPEG (Endung ".jpg").
Ähnlich wie bei einem Verweis kann
File ein relativer oder absoluter Pfadname
sein oder die URL einer Grafik auf einem anderen Server
("http://...").
Mit ALIGN="..."
steuert man die Ausrichtung des Bildes, allerdings nicht so, wie mit
dem gleichnamigen Attribut zur horizontalen Ausrichtung von Text (siehe
Übersicht).
Die Werte "LEFT" und
"RIGHT" plazieren das Bild am linken bzw.
rechten Rand und lassen es von Text umfließen;
"TOP" richtet die Oberkante
des Bildes nach der höchsten Oberkante der Zeile aus,
"TEXTTOP" nach der Textoberkante;
"MIDDLE" die Mitte des Bildes nach der
Grundlinie der Zeile, "ABSMIDDLE" nach der
Mitte der Zeile; "BOTTOM" und
"BASELINE" die Unterkante des Bildes nach der
Grundlinie der Zeile, und "ABSBOTTOM" nach der
Unterkante der Zeile.
Mit BORDER="0" kann man
einen Rahmen um das Bild unterdrücken. Dem Attribut
ALT kann man einen Ersatztext zuweisen, falls
das Bild nicht angezeigt werden soll oder kann.
Beispiel für ein gegliedert anklickbares
Bild
| |
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<IMG BORDER=0 SRC="BildFile"
USEMAP="#Karte" ALT="Prima Karte">
...
<!-- Karte mit zwei Rechtecken
übereinander, daneben einem
Kreis und einem Dreieck: -->
<MAP NAME="Karte">
<AREA HREF="VerweisFile1" SHAPE="RECT"
COORDS="1,1,100,50">
<AREA HREF="VerweisFile2" SHAPE="RECT"
COORDS="1,51,100,100">
<AREA HREF="VerweisFile3" SHAPE="CIRCLE"
COORDS="130,30,30">
<AREA HREF="VerweisFile4" SHAPE="POLY"
COORDS="101,61,140,80,101,100">
</MAP>
</BODY>
</HTML> |
|
|
Gegliedert anklickbare Bilder:
In der Anweisung
<IMG> kann man für
das eingebundene Bild mit der Zuweisung
USEMAP="#Mapname" eine Karte namens
Mapname auswählen, die einen oder mehrere
Bildbereiche zu Verweisbereichen erklärt. Durch Anklicken so eines
Bereiches wird dann ein Verweis aktiviert.
Eine Kartendefinition wird von <MAP
NAME="Mapname">
... </MAP>
umschlossen und enthält für jeden Verweisbereich eine
Anweisung der Form:
<AREA SHAPE="Form" COORDS="Koord" HREF="File">. "Form" kann "RECT" sein,
"CIRCLE" oder "POLY"
und steckt einen rechteckigen, kreisförmigen bzw. n-eckigen
Verweisbereich ab. Für "RECT" ist
COORDS="Xol,Yol,Xur,Yur". Dabei bezeichnet
X den Abstand eines Punktes vom linken Rand
des Bildes in Pixeln, Y den vom oberen Rand.
Xol und
Yol beziehen
sich auf den oberen linken Eckpunkt des Verweis-Rechtecks,
Xur und
Yur auf den
unteren rechten. Für SHAPE="CIRCLE" muss man COORDS="Xm,Ym,R" mit den Mittelpunktskoordinaten Xm und Ym und dem Radius R angeben.
SHAPE="POLY" benötigt
COORDS="X1,Y1,X2,Y2,...,Xn,Yn" mit
den X- und Y-Koordinaten der Punkte 1 bis
n. Wie bei Verweisen wird
HREF der Verweisort
zugewiesen, und dem Attribut
ALT kann ein Text
zugewiesen werden, der beim Zeigen auf den Verweisbereich
erscheint.
Beispiel für eine Frames-Steuer-Datei
| |
<HTML>
<HEAD>
<TITLE>Ein FRAMES-Test</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="NO" COLS="10%,120,*">
<FRAME SRC="test_l.htm" NAME="links">
<FRAME SRC="test_m.htm" NAME="mitte">
<FRAMESET FRAMEBORDER="YES" ROWS="10%,*">
<FRAME SRC="test_ro.htm" NAME="roben">
<FRAME SRC="test_ru.htm" NAME="runten">
</FRAMESET>
<NOFRAMES>
<BODY>
Nee nee, ohne <CODE>FRAMES</CODE>
wird das nix!
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> |
|
|
Frames:
Frames dienen dazu, das Browser-Fenster in Teilfenster zu
gliedern, die sich gegenseitig steuern. Der Browser liest aus einer
Steuer-Datei zuerst die Fenster-Gliederung und lädt dann
Inhaltsseiten für die einzelnen Frames. In der Steuerdatei steht
die Gliederung zwischen
<FRAMESET ...
> ...
</FRAMESET>, dass den
<BODY> ...
</BODY>-Teil aus
einer Inhaltsdatei ersetzt. In der Anweisung
<FRAMESET> teilt das
Attribut COLS das Fenster in
nebeneinanderliegende Streifen. Z. B. teilt <FRAMESET COLS="10%,120,*"> das Fenster in drei nebeneinanderliegende
Streifen; einen linken mit zehn Prozent der Fensterbreite, einen
mittleren mit 120 Pixeln Breite und einen rechten, der den Rest
einnimmt. Analog funktioniert die Aufteilung in
übereinanderliegende Streifen durch ROWS="...".
Jedem der mit COLS bzw.
ROWS erzeugten Streifen wird
mit <FRAME NAME="..."
SRC="..."> ein Name
und eine in diesen Streifen zu ladende Inhaltsseite zugeordnet - oder
wiederum eine Aufteilung des Streifens mit
<FRAMESET ...
> ...
</FRAMESET>.
Die Namen der Frames bieten interessante
Verweis-Varianten. So erzeugt z. B.
<A HREF="File" TARGET="Name2"> in einer Inhaltsdatei, die in einem Frame
namens Name1 angezeigt wird, dort einen
Verweis, bei dessen Aktivierung der Verweisort
im Frame namens Name2 angezeigt wird.
Reservierte Namen sind "_blank" (Verweis
in ein neu öffnendes Browser-Fenster),
"_self" (ins verweisende Frame),
"_parent" (ins nächst übergeordnete
Frame), "_top" (ins gesamte
Browser-Fenster) und "window" (wie
"_blank").
In der Anweisung
<FRAME> führt die
Zuweisung FRAMEBORDER="NO"
dazu, dass der entsprechende Streifen ohne Frame-Berandung
dargestellt wird. Voreingestellt ist
FRAMEBORDER="YES".
Vor dem letzten schließenden
</FRAMESET> kann man
zwischen <NOFRAMES><BODY> ...
</BODY></NOFRAMES> den Inhalt der angezeigten Seite einfügen, falls
der Browser der Betrachterin Frames nicht unterstützt.
[
Inhalt]
Index
Anweisungen, Attribute und Zuweisungen
alphabetisch:
[
Inhalt]
Enno Erchinger
IfG/Universität Kiel
Email: enno@sfb313.uni-kiel.de
|
© Enno Erchinger, Kiel,
Deutschland,
16. August 1999 |