Ein HTML-Kurs
 

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
  ä   &auml;      ö   &ouml;      ü   &uuml;  
Ä   &Auml;      Ö   &Ouml;      Ü   &Uuml;
ß   &szlig;      &   &amp;      "   &quot;
<   &lt;      >   &gt;  
geschütztes Leerzeichen    &nbsp;

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>      blinkend     
     <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>
  1. Punkt i
    1. Punkt i.i
  2. Punkt ii
  3. 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 i.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:

! <!-- · -->
A <A> · "ABSBOTTOM" · "ABSMIDDLE" · ALIGN · ALINK · ALT · <AREA>
B <B> · "BASELINE" · BGCOLOR · "BLACK" · <BLINK> · <BLOCKQUOTE> · "BLUE" · <BODY> · <BODY>(<A>) · BORDER(<TABLE>) · BORDER(<IMG>) · "BOTTOM" · <BR>
C CELLPADDING · CELLSPACING · <CENTER> · "CENTER" · "CIRCLE" · <CODE> · COLOR · COLS · COLSPAN · COORDS
D <DD> · <DL> · <DT>
E <EM>
F FACE · <FONT> · <FRAME> · FRAMEBORDER · <FRAMESET>
G "GREEN"
H <H1>...<H6> · <HEAD> · HEIGHT · <HR> · HREF · <HTML> · HTML4.0
I <I> · <IMG>
L "LEFT" · <LI> · LINK
M "MAGENTA" · <MAP> · <MENU> · "MIDDLE"
N NAME(<A>) · NAME(<MAP>) · NAME(<FRAME>) · <NOFRAMES>
O <OL>
P <P> · "POLY" · "PURPLE"
R "RECT" · "RED" · "RIGHT" · ROWS · ROWSPAN
S SHAPE · SIZE · SRC(<IMG>) · SRC(<FRAME>) · <STRIKE> · <SUB> · <SUP>
T <TABLE> · TARGET(<A>) · TARGET(<FRAME>) · <TD> · TEXT · "TEXTTOP" · <TITLE> · "TOP" · <TR> · <TT>
U <U> · <UL> · USEMAP
V VALIGN · VLINK
W "WHITE" · WIDTH
Y "YELLOW"

[ Inhalt]


Enno Erchinger
IfG/Universität Kiel


Email: enno@sfb313.uni-kiel.de

© Enno Erchinger, Kiel, Deutschland,
16. August 1999