<div class="navi"><a href="../start2.html" title="">Startseite ohne Frames</a></div>
Startseite / Webdesign / HTML
Grundlagen HTML

Inhaltsverzeichnis

  • 1 HTML ist eine Auszeichnungssprache
    • 1.1 Struktur
    • 1.2 Syntax
  • 2 Eine einfache HTML-Seite
    • 2.1 HTML, HEAD und BODY
    • 2.2 TITLE und META
    • 2.3 Zeilenumbruch (BR und NOBR)
    • 2.4 Überschriften (H1..H6)
    • 2.5 Schriftformat (B, I und FONT)
    • 2.6 Horizontale Linie (HR)
    • 2.7 Zusammengefaßte Bereiche (DIV und SPAN)
    • 2.8 Grafiken
  • 3 Ausrichtung und Formatierung von Elementen
    • 3.1 Horizontale Ausrichtung
    • 3.2 Vertikale Ausrichtung
    • 3.3 Farbe
    • 3.4 Breite, Höhe und Dicke/Größe
    • 3.5 Rahmen
    • 3.6 Seitenränder und Innen- und Außenabstand
    • 3.7 Hintergrundbild
  • 4 Absatzkontrolle (P)
  • 5 Listen
    • 5.1 Aufzählungslisten (UL)
    • 5.2 Nummerierte Listen (OL)
    • 5.3 Nummerierte und Aufzählungslisten kombinieren
    • 5.4 Definitionslisten (DL)
  • 6 Tabellen
    • 6.1 Ausrichtung und Formatierung von Tabellen
    • 6.2 Zellabstand und Innenabstand
    • 6.3 Ausrichtung und Formatierung von Zellen
    • 6.4 Spaltenbreite, Zeilenhöhe
    • 6.5 Zellen verbinden
    • 6.6 Zellen mit beliebigen Inhalt füllen
    • 6.7 Definitionen
    • 6.8 Übungsaufgabe
  • 7 Die Frame-Technik
    • 7.1 Aufteilung der Anzeige
    • 7.2 Seiten einbinden
    • 7.3 NOFRAMES
    • 7.4 Frameset und Frames formatieren
    • 7.5 Zuordnung der Frames
    • 7.6 Eingebettete Frames
  • 8 Verknüpfungen zu anderen Dokumenten
    • 8.1 URL
    • 8.2 Links zu anderen Seiten
    • 8.3 Anker und ein Link zu diesen Anker
    • 8.4 Zielfenster für Links
    • 8.5 Links zu anderen Diensten
    • 8.6 Grafische Links
    • 8.7 Imagemap als Link
  • 9 Formulare
    • 9.1 Funktion und Zielangabe (Action)
    • 9.2 Zielfenster für Antwortseiten (Target)
    • 9.3 Übertragungsmethode (method)
    • 9.4 Formatierung der Daten (enctype und accept-charset)
    • 9.5 Steuerelemente für Formulare
    • 9.6 Eingabefelder
    • 9.7 Check- und Radioboxen
    • 9.8 Auswahllisten
    • 9.9 Versteckte Felder
    • 9.10 Buttons
    • 9.11 Übung
  • 10 Sonstiges
  • 11 Weiterführende Links

1 HTML ist eine Auszeichnungssprache

HTML-Dokumente enthalten normalen Text. Mit der Auszeichnungssprache HTML (HyperText Markup Language) definiert ein Webdesigner das Aussehen eines HTML-Dokuments. Das HTML-Dokument besitzt eine Struktur, in die z.B. Text- oder Steuerelemente abgelegt werden. Jedes Element läßt sich formatieren. Ähnlich einem Worddokument können HTML-Dokumente Text, Bilder, Tabellen, Eingabefelder, Schaltflächen sowie eingebettete Audio- und Videodateien darstellen.

Zum HTML-Standard gehören außerdem Hyperlinks. Es gibt zwei Arten. Anker markieren eine Stelle in einer Seite, die von außen direkt angesprungen werden kann. Verweise zeigen auf andere Seiten oder andere Internetadressen, die angesprungen werden können. Die Seiten lassen sich so miteinander verknüpfen.

         
  Dokument 1

  
Verweis auf "Anker a" in "Dokument 2"   Verweis auf "Dokument 3"
Dokument 2
[Anker a]
[Anker b]		 Verweis auf "Dokument 3"
 Dokument 3
Verknüpfte Dokumente

1.1 Struktur

HTML-Dokumente besitzen einen Kopf (Head) und einen Rumpf (Body). Im Kopf befinden sich besondere Angaben,wie z.B. zum Author oder Schlagworte. Außerdem steht dort der Titel der Internetseite.

Titel = Bauwerke
Autor = Bob
Stichworte: ...
Sonstiges: ...
 
Kopfdaten (unsichtbar)

Der Rumpf enthält die sichtbaren Elemente. Diese können auch ineinander verschachtelt sein. Befindet sich beispielsweise eine Tabelle im Rumpf, können in diese Tabelle noch weitere Tabellen eingebettet werden. Die meisten Elemente besitzen Unterelemente. Formulare besitzen Eingabefelder, Buttons, Optionsfelder, u.s.w. Tabellen besitzen Reihen und Spalten. In jedes Element können andere Elemente eingebettet werden. Ein Textabschnitt kann einige Bilder enthalten. Die Bilder und der Text lassen sich auch in Tabellen oder Formulare packen. Formulare können Tabellen beinhalten und umgekehrt. Das ermöglicht eine individuelle an die Bedürfnisse ausgerichtete Dokumentstruktur.

Äußere Tabelle  
Innere Tabelle  
   
Bild
 
Rumpf (sichtbar)

1.2 Syntax

Bevor HTML-Elemente angelegt werden können, ist gleich zu Beginn des Dokuments folgende Zeile einzufügen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Sie teilt dem Browser mit, daß es sich um ein englisches HTML-Dokument handelt. Für deutsche Dokumente kann 'EN' durch 'DE' ersetzt werden.

Jedes HTML-Element wird mit seiner Typ-Bezeichnung eingeleitet. Bei der Bezeichnung muß nicht auf Groß- und Kleinschreibung geachtet werden. Diese Bezeichnungen, nachfolgend Tag genannt, werden in ein spitzes Klammernpaar '< >' notiert.
Fast alle Elemente benötigen ebenfalls ein abschließendes Tag. Ein abschließendes Tag besitzt immer ein vorangestelltes '/'.
Der Inhalt, der sich zw. den beiden Tags befindet, gehört dann zu diesem Element.

Beispiel-Tag italic (i):

<i>Dieser Inhalt ist kursiv</i>

So wirds im Browser dargestellt:

Dieser Inhalt ist kursiv

Elemente lassen sich auch verschachteln.

Beispiel italic (i) und bold (b):

<i>Dieser Inhalt ist kursiv <b> und fett </b></i>

So wirds im Browser dargestellt:

Dieser Inhalt ist kursiv und fett

Für die meisten Elemente lassen sich spezielle Eigenschaften (Attribute) festlegen. Die Attribute werden einfach in dem Tag notiert. Die Eigenschaftswerte werden zw. zwei ' " ' eingetragen und dann dem Element mit ' = ' zugewiesen.

Beispiel horizontal rule (hr):

<hr color="#FFFF69" size="10px"> </hr>
Diese Linie ist gelb und 10 Pixel breit.

So wirds im Browser dargestellt:

Diese Linie ist gelb und 10 Pixel breit.

Kommentare sind nur im Quelltext sichtbar und werden nicht im Browser angezeigt. Kommentare werden mit '<!--' eingeleitet und mit einem '-->' abgeschlossen.

Beispiel Kommentar:

<!-- Ich bin nur ein Kommentar -->
Ich bin normaler Text.

So wirds im Browser dargestellt:

Ich bin normaler Text.

2 Eine einfache HTML-Seite

2.1 HTML, HEAD und BODY

Jedes HTML-Dokument beginnt mit '<HTML>' und endet mit '</HTML>'. Kopf und Rumpf werden von '<HTML>' und '</HTML>' umschlossen.

Jeder Kopf beginnt mit '<HEAD>' und endet mit '</HEAD>'. Die Kopfdaten sind unsichtbar.

Ein Rumpf beginnt stets mit '<BODY>' und endet mit '</BODY>'.

Beispiel "Hello world !":

<HTML>
  <HEAD> </HEAD>
  <BODY> Hello world ! </BODY>
</HTML>

So wirds im Browser dargestellt:

Hello world !

2.2 TITLE und META

Die Tags 'TITLE' und 'META' befinden sich immer im Kopf. Oben in der Fensterleiste läßt sich mit 'TITLE' ein Title für die Internetseite ausgeben.
In den META-Tags stehen Stichworte, Autor oder spezielle Angaben. In META-Tags werden zwei Attribute eingetragen. Das erste unterscheidet zwischen allgemeinen und speziellen Angaben und gibt an um welche Information es sich handelt. 'name' kennzeichnet allgemeine Angaben und 'http-equiv' kennzeichnet spezielle Angaben. Das zweite Attribut heißt 'content' und enthält die Information.

Das folgende Beispiel verwendet die spezielle META-Angabe "expires" mit dem Wert "10". Sie bewirkt, daß die Seite für nur 10 Sekunden im Cache zwischengespeichert wird. Im Browser wird der Titel "Herzlich Willkommen !" ausgegeben.

<HTML>
  <HEAD>
    <TITLE> Herzlich Willkommen ! </TITLE>
    <meta name="author" content="Peter May">
    <meta http-equiv="expires" content="10">
  </HEAD>
  <BODY> Hello world ! </BODY>
</HTML>

So wirds im Browser dargestellt:

2.3 Zeilenumbruch (BR und NOBR)

Mit '<BR>' wird nachfolgenden Text in der nächsten Zeile ausgegeben.

<HTML> <BODY>
    Hello world !<BR>Hello world !<BR>Hello world !<BR>
    Hello world !<BR>Hello world !
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world !
Hello world !
Hello world !
Hello world !
Hello world !

Mit '<NOBR>' wird der automatische Zeilenumbruch verhindert.

<HTML> <BODY>
    <NOBR> Hello world ! Hello world ! Hello world !
    Hello world ! Hello world ! </NOBR>
</BODY> </HTML>

So wirds im Browser dargestellt:
Demo öffnen

2.4 Überschriften (H1..H6)

Es gibt sechs Ebenen für Überschriften. '<H1>' ist die höchste und '<H6>' die unterste Ebene.

<HTML> <BODY>
    <H1>Hello world !</H1> <H2>Hello world !</H2>
    <H3>Hello world !</H3> <H4>Hello world !</H4>
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world !

Hello world !

Hello world !

Hello world !

2.5 Schriftformat (B, I und FONT)

'<B>' stellt den Text fett dar.'<I>' stellt den Text kursiv dar.

<HTML> <BODY>
    Hello world ! <B>Hello world !</B> <I>Hello world !</I>
   <B><I>Hello world !</B></I>
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world ! Hello world ! Hello world ! Hello world !

Es gibt noch andere Formatelemente (U, S,...) die jedoch als "Depricated" eingestuft sind. Deshalb wird auf diese hier nicht weiter eingegangen.

Mit '<FONT>' kann eine Schriftart, ein Schriftstil, Schriftgröße und die Schriftfarbe festgelegt werden. Da es ebenfalls als "Depricated" eingestuft wurde, wird hier auf die Formatierung mittels CSS verwiesen.

2.6 Horizontale Linie (HR)

'<HR>' gibt eine horizontale Linie aus.

<HTML> <BODY>
    Hello world ! <HR> Hello world !
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world !
Hello world !

2.7 Zusammengefaßte Bereiche (DIV und SPAN)

'<DIV>' faßt mehrere Elemente zu einem Bereich zusammen.

<HTML> <BODY>
    <DIV><B>Bereich1</B> Bereich1</DIV>
    <DIV>Bereich2 <I>Bereich2</I></DIV>
</BODY> </HTML>

So wirds im Browser dargestellt:

Bereich1 Bereich1
Bereich2 Bereich2

'<SPAN>' legt einen zusammenhängenden Bereich für Text-Elemente an. Im Gegensatz zu '<DIV>' können bei '<SPAN>' mehrere Textbereiche nebeneinander stehen.

<HTML> <BODY>
    <SPAN><B>Bereich1</B> Bereich1</SPAN>
    <SPAN>Bereich2 <I>Bereich2</I></SPAN>
</BODY> </HTML>

So wirds im Browser dargestellt:

Bereich1 Bereich1 Bereich2 Bereich2

2.8 Grafiken

Mit '<IMG>' werden Grafiken eingebunden. 'src' teilt dem Browser mit, wo die anzuzeigende Grafikdatei liegt. Gültige Werte für 'src' sind relative und absolute Pfadangaben. Es ist darauf zu achten, daß in der Pfadangabe jedes '\' durch ein '/' ersetzt wird.

Relative Pfadangaben beginnen mit '../' oder './'. Ausgangspunkt bei relativen Angaben ist der Pfad der geöffneten HTML-Seite. '..' bedeutet übergeordnetes und '.' das aktuelle Verzeichnis. Das '.' und das darauf folgende '/' werden meist weggelassen.

Absolute Pfadangaben beginnen mit '/', dem Start- bzw. Wurzelverzeichnis der Homepage. Grafiken von anderen Homepages können geladen werden, indem die URL der anderen Homepage mit angegeben wird. Da dies häufig mißbraucht wird, gibt es hierzu keine Erklärung.

Die Grafikformate "GIF", "JPEG" und "PNG" werden von jedem Browser unterstützt. Nur Netscape 4.7 kennt kein "PNG". Auf noch ältere Browser wird keine Rücksicht mehr genommen. Für moderne Browser ist das "ICO" Format für Icons interessant.

<HTML> <BODY>
    Relative Pfadangabe: <IMG src="../web/tasse.gif">
    Relative Pfadangabe: <IMG src="./tasse.gif">
    Absolute Pfadangabe: <IMG src="/web/tasse.gif">
</BODY> </HTML>

So wirds im Browser dargestellt:

Relative Pfadangabe: Relative Pfadangabe: Absolute Pfadangabe:

3 Ausrichtung und Formatierung von Elementen

Als Einführungsbeispiel wird die horizontale Linie etwas aufgepeppt. Das Attribut 'size' bestimmt die Größe/Dicke und 'width' die Breite. Mit 'align' kann die Linie linksbündig, zentriert oder rechtsbündig sein. 'color' bestimmt die Fabe.
Die hauchdünne Linie soll nur ein Pixel dick und 400 Pixel breit sein. Sie soll außerdem linksbündig sein und eine weinrote Farbe haben.

<HTML> <BODY>
    <HR align="left" color="maroon" size="1px" width="400px">
</BODY> </HTML>

So wirds im Browser dargestellt:

Fast jedes HTML-Element läßt sich formatieren und ausrichten. Aus gutem Grund sind nicht immer alle Eigenschaften vorhanden. Eine Hintergrundfarbe für Linien ergäbe keinen Sinn. Eine Dicke für Seiten wäre ebenso sinnfrei - falls doch jemand mit seinen Fingern die Dicke von elektronischen Seiten gespürt hat, bin ich ganz Ohr.
Bei einigen Elementen fehlen Eigenschaften, die eigentlich sinnvoll wären. Durch Verschachtelung, läßt sich diese Hürde umgehen. Mit 'DIV' wird ein Bereich festgelegt, der beliebig formatiert und ausgerichet werden kann. In diesen Bereich werden dann die anderen HTML-Elemente eingebettet.

3.1 Horizontale Ausrichtung

Mit 'align' werden Elemente horizontal ausgerichtet. Der Eigenschaft können die Werte 'left' (linksbündig), 'center' (zentriert), 'right' (rechtsbündig) und 'justify' (Blocksatz) zugewiesen werden.

<HTML> <BODY>
    <DIV align="center">Hello world !<br>Hello world !</DIV>
    <DIV align="right">Hello world !<br>Hello world !</DIV>
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world !
Hello world !
Hello world !
Hello world !

Bei einer Grafik bewirkt align="left", daß sie linksbündig ist und rechts von Text umflossen wird. Bei align="right" ist es umgekehrt.

3.2 Vertikale Ausrichtung

Mit 'valign' werden Elemente vertikal ausgerichtet. Der Eigenschaft können die Werte 'top' (obenbündig), 'middle' (mittig) und 'bottom' (untenbündig) zugewiesen werden.
Ein Beispiel hierzu befindet sich im Abschnitt 6 Tabellen.

Bei einer Grafik bewirkt align="top", daß sie obenbündig ist und nebenstehender Text in Höhe der Oberkante liegt. Bei align="bottom" ist sie untenbündig und bei align="middle" mittig.

3.3 Farbe

Die Vordergrundfarbe wird mit 'color' festgelegt, die Hintergrundfarbe mit 'bgcolor'. Gültige Werte sind alle Zahlen zwischen hexadezimal #0 und #FFFFFF. Das '#' wird immer den Farbwerten vorangestellt. Die Farbangaben sind im RGB Format (Red-Green-Blue). Die ersten zwei Stellen bestimmen den Rotanteil, die nächsten zwei den Grünanteil und die letzten beiden den Blauanteil.

Gelb z.B. mischt sich aus Rot und Grün zusammen. #FFFF00 ergibt ein sehr helles und #CCCC00 ein dunkles Gelb. Sind alle drei Farbtanteile gleich ergibt sich ein Grauton. #000000 ist Schwarz, #C0C0C0 ist Grau und #FFFFFF ist Weiß.

Insgesamt sind 16 Mio Farben durch subtraktive Mischung darstellbar. Die Begriffe "additive" und "subtraktive Farbmischung" werden in der Farbenlehre erklärt. Wer in der Schule nicht aufgepaßt hat, kann alternativ eine der 16 Grundfarben mit ihrem Namen ansprechen: 'black', 'red', 'blue' u.s.w. Eine vollständige Liste findet Ihr auf Selfhtml.de.

Als Beispiel wird auf einer Seite mit schwarzem Hintergrund eine Überschrift in Türkis und Orange ausgegeben.

<HTML> <BODY bgcolor="#000000">
    <H1 color="#00FFFF">Hello world !</H1>
    <H1 color="#FFCC00">Hello world !</H1>
</BODY> </HTML>

So wirds im Browser dargestellt:

Hello world !

Hello world !

3.4 Breite, Höhe und Dicke/Größe

Gültige Werte für Größenangaben sind prozentuale Angaben ('%'), Pixelangaben ('px'), Punktgröße ('pt'), relative Angaben zur Schriftgröße ('em' und 'ex'), oder Angaben in mm/cm/Zoll ('mm', 'cm' und 'in').
In der Praxis haben sich 'pt' und 'em' für die Angabe der Schriftgröße von Textelementen bewährt. Bei den anderen Elementen ist je nach Anwendungsfall 'px' oder '%' die beste Wahl. Für Seitenränder sind oft die Angaben in 'cm' oder 'in' ganz nützlich.

'width' legt die Breite von Elementen fest. 'height' legt die Höhe.von Elementen fest. 'width' und 'height' werden häufig bei Tabellen, Frames und Bildern genutzt.
'size' legt die Dicke/Größe fest. 'size' wird für die Schriftgröße oder Liniendicke genutzt.

Die erste Tasse soll 50 Pixel breit und 14 Pixel hoch sein. Die zweite soll 70% der Seitebreite einehmen und 14 Pixel hoch sein. Eine 20 Pixel dicke Linie trennt die beiden Grafiken.

<HTML> <BODY>
    50px x 14px:
    <IMG width="50px" height="14px" src="./tasse.gif">
    <HR size="20px"></HR>
    70% x 14px:
    <IMG width="70%" height="14px" src="./tasse.gif">
</BODY> </HTML>

So wirds im Browser dargestellt:

50px x 14px:
70% x 14px:

3.5 Rahmen

Tabellen, Frames und Bilder können mit einem Rahmen versehen werden. Die Eigenschaft 'border' legt die Rahmendicke fest. Gültig sind dieselben Größenangaben, die für Breite, Höhe und Größe erlaubt sind.

Die Tasse soll eine zwei Pixel dicken Rahmen haben.

<HTML> <BODY>
    <IMG border="2px" src="./tasse.gif">
</BODY> </HTML>

So wirds im Browser dargestellt:

3.6 Seitenränder und Innen- und Außenabstand

Frames und Seiten besitzen Seitenränder. Der linke Seitenrand und der rechte sind immer gleich groß. Der obere und der untere Rand sind ebenfalls gleich groß. 'marginwidth' gibt den seitlichen Rand und 'marginheight' den oberen u. unteren Rand an.

Bei Seitenrändern für Frames verhalten sich alle Browser gleich. Innerhalb von Seiten erwartet der Internet Explorer jedoch 'marginleft' und 'margintop' als Parameter. Deshalb ist es wichtig stets beide Parameter zu berücksichtigen.

Eine Seite soll links und rechts 2,5 cm Seitenrand besitzen. Der Seitenrand oben und unten soll 2 cm betragen.

<HTML>
<BODY marginwidth="2.5cm" marginheight="2cm" marginleft="2.5cm"
 margintop="2cm">
    Ganz viel Text
</BODY> </HTML>

So wirds im Browser dargestellt:

Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text. Ganz viel Text.

Bei Bildern gibt 'hspace' den horizontalen und 'vspace' den vertikalen Außenabstand an.

Die Tasse soll 50 Pixel Abstand zum Text haben.

<HTML> <BODY>
    <IMG align="left" vspace="50px" hspace="50px"
     src="./tasse.gif">
</BODY> </HTML>

So wirds im Browser dargestellt:

Text.
Text.
Text.
Text.
Text.
Text.
Text.
Text.

Bei Tabellen gibt 'cellspacing' den äußeren Abstand zw. den Zellen an. 'cellpadding' bestimmt den inneren Abstand des Zelleninhalts zum Zellenrand. Ein Beispiel hierzu befindet sich im Abschnitt 6 Tabellen.

3.7 Hintergrundbild

Seiten, ganze Tabellen und einzelne Zellen können optisch mit einem Hintergrundbild verschönert werden. Hintergrundgrafiken werden mit der Eigenschaft 'background' eingebunden. Die Syntax ist dieselbe wie bei 'src' für Grafiken ('<IMG>').

<HTML> <BODY background="../images/pinie.gif">
    ganz viel Text ganz viel Text<br>
    ganz viel Text ganz viel Text<br>
    ganz viel Text ganz viel Text<br>
</BODY> </HTML>

So wirds im Browser dargestellt:

ganz viel Text ganz viel Text
ganz viel Text ganz viel Text
ganz viel Text ganz viel Text

4 Absatzkontrolle (P)

Lange Texte werden mit '<P>' in übersichtliche Textabsätze aufgeteilt. Analog zu 'DIV' und 'SPAN' können auch Textabsätze ausgerichtet werden.

<HTML> <BODY>
    <p align="left">Abschnitt 1<br> bla</p>
    <p align="center">Abschnitt 2<br> bla</p>
    <p align="right">Abschnitt 3<br> bla</p>
</BODY> </HTML>

So wirds im Browser dargestellt:

Abschnitt 1
bla

Abschnitt 2
bla

Abschnitt 3
bla

5 Listen

Es gibt Aufzählungslisten '<UL>', nummerierte Listen '<OL>' und Definitionslisten '<DL>'. Jeder der drei Listentypen ermöglicht mehrere Ebenen innerhalb der Listen. Dazu werden die Listen verschachtelt.

5.1 Aufzählungslisten (UL)

Bei '<UL>' werden Sichpunkte mit '<LI>' hinzugefügt. Eine tiefere Ebene wird mit einem weiteren '<UL>' innerhalb der Liste angelegt.

<HTML> <BODY>
    <UL><!--Liste-->
      <LI>Stichpunkt</LI>
      <UL><!--Unterliste-->
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </UL>
      <LI>Stichpunkt</LI>
      <UL><!--Unterliste-->
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </UL>
      <LI>Stichpunkt</LI>
    </UL>
</BODY> </HTML>

So wirds im Browser dargestellt:

  • Stichpunkt
    • Stichpunkt
    • Stichpunkt
  • Stichpunkt
    • Stichpunkt
    • Stichpunkt
  • Stichpunkt

Mit 'type' wird der Liste ein Aufzählzeichen (bullet) zugewiesen. Mögliche bullets sind Punkt 'disc', Kreis 'circle' und Rechteck 'square'.

<HTML> <BODY>
    <UL type="disc">
      <LI>Stichpunkt</LI>
    </UL><UL type="circle">
      <LI>Stichpunkt</LI>
    </UL><UL type="square">
      <LI>Stichpunkt</LI>
    </UL>
</BODY> </HTML>

So wirds im Browser dargestellt:

  • Stichpunkt
  • Stichpunkt
  • Stichpunkt

5.2 Nummerierte Listen (OL)

Bei '<OL>' werden Sichpunkte mit '<LI>' hinzugefügt. Eine tiefere Ebene wird mit einem weiteren '<OL>' innerhalb der Liste angelegt.

<HTML> <BODY>
    <OL><!--Liste-->
      <LI>Stichpunkt</LI>
      <OL><!--Unterliste-->
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </OL>
      <LI>Stichpunkt</LI>
      <OL><!--Unterliste-->
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </OL>
      <LI>Stichpunkt</LI>
    </OL>
</BODY> </HTML>

So wirds im Browser dargestellt:

  1. Stichpunkt
    1. Stichpunkt
    2. Stichpunkt
  2. Stichpunkt
    1. Stichpunkt
    2. Stichpunkt
  3. Stichpunkt

Mit 'type' wird der Liste eine Nummerierung zugewiesen. Mögliche Formen sind Nummern '1', römische Zahlen 'I' bzw. 'i' und alphabetisch 'A' bzw. 'a'. Mit 'start' wird ein Startwert festgelegt. Mit 'value' wird für einen Stichpunkt eine Nummer bestimmt.

<HTML> <BODY>
    <OL type="I" start="4">
      <LI>Stichpunkt</LI>
    </OL><OL type="A" value="3">
      <LI value="3">Stichpunkt</LI>
    </OL><OL type="a">
      <LI value="26">Stichpunkt</LI>
    </OL>
</BODY> </HTML>

So wirds im Browser dargestellt:

  1. Stichpunkt
  1. Stichpunkt
  1. Stichpunkt

5.3 Nummerierte und Aufzählungslisten kombinieren

Eine Kombination aus nummerierten und Aufzählungslisten ist ebenfalls möglich:

<HTML> <BODY>
    <OL>
      <LI>Stichpunkt</LI>
      <UL>
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </UL>
      <LI>Stichpunkt</LI>
      <UL>
        <LI>Stichpunkt</LI>
        <LI>Stichpunkt</LI>
      </UL>
      <LI>Stichpunkt</LI>
    </OL>
</BODY> </HTML>

So wirds im Browser dargestellt:

  1. Stichpunkt
    • Stichpunkt
    • Stichpunkt
  2. Stichpunkt
    • Stichpunkt
    • Stichpunkt
  3. Stichpunkt

5.4 Definitionslisten (DL)

Bei '<DL>' werden Begriffe mit '<DT>' Definition mit '<DD>' hinzugefügt. Ein gutes Beispiel gibt es auf der Seite Selfhtml.de

6 Tabellen

Tabellen sind eines der mächtigsten Werkzeuge zur optischen Gestaltung von HTML-Seiten. '<TABLE>' legt eine Tabelle an. Zeilen werden mit '<TR>' eingefügt. In die Zeilen werden mit '<TD>' Zellen mit ihren Inhalten eingefügt. Statt '<TD>' kann auch '<TH>' verwendet werden um eine Zelle hervorzuheben. In der Regel ist dann ihr Inhalt automatisch fett und zentriert.

<HTML> <BODY>
    <table>
      <tr>
        <th>Zelle 1</th>
        <th>Zelle 2</th>
        <th>Zelle 3</th>
      </tr><tr>
        <td>Zelle 4<br>bla</td>
        <td>Zelle 5<br>bla</td>
        <td>Zelle 6<br>bla</td>
      </tr><tr>
        <td>Zelle 7<br>bla</td>
        <td>Zelle 8<br>bla</td>
        <td>Zelle 9<br>bla</td>
      </tr>
    </table>
</BODY> </HTML>

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Zelle 3
Zelle 4
bla		 Zelle 5
bla		 Zelle 6
bla
Zelle 7
bla		 Zelle 8
bla		 Zelle 9
bla

6.1 Ausrichtung und Formatierung von Tabellen

Die Tabelle ist sehr unübersichtlich. Zeit das gelernte aus Kapitel 3 bei der Tabelle anzuwenden. Die Tabelle wird zentriert und erhält 320 Pixel Breite und 200 Pixel Höhe. Als Hintergrundfarbe wird Weiß festgelegt. Ein zwei Pixel dicker Rahmen trennt die Zellen optisch voneinander. '<table>' wird dementsprechend ergänzt.

<table align="center" border="2px" width="320px" height="200px"
 bgcolor="white">

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Zelle 3
Zelle 4
bla		 Zelle 5
bla		 Zelle 6
bla
Zelle 7
bla		 Zelle 8
bla		 Zelle 9
bla

Mit 'background' wird Tabellen eine Hintergrundgrafik zugewiesen.

<table background="../images/pinie.gif">

6.2 Zellabstand und Innenabstand

Die Zellinhalte sind zu dicht am Zellrand und erhalten mit 'cellpadding' mehr Abstand. Mit 'cellspacing' werden die Zellen etwas auseinandergezogen. In diesem Fall um zehn Pixel.

<table cellpadding="5px" cellspacing="10px" align="center"
 border="2px" width="320px" height="200px" bgcolor="white">

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Zelle 3
Zelle 4
bla		 Zelle 5
bla		 Zelle 6
bla
Zelle 7
bla		 Zelle 8
bla		 Zelle 9
bla

6.3 Ausrichtung und Formatierung von Zellen

Die Zellen werden einzeln formatiert und ausgerichtet. Die erste Spalte soll linksbündig, die zweite zentriert und die dritte rechtsbündig ausgerichtet sein. Die obere Zeile soll obenbündig, die zweite mittig und die dritte untenbündig sein. Jede Spalte erhält eine andere Hintergrundfarbe. Zelle 5 bekommt Pinienholz als Hintergrundgrafik.

<HTML> <BODY>
    <table cellpadding="5px" cellspacing="10px" border="2px"
     width="320px" height="200px" bgcolor="white" align="center">
      <tr>
        <th align="left" valign="top" bgcolor="lime">Zelle 1</th>
        <th align="center" valign="top" bgcolor="yellow">
          Zelle 2</th>
        <th align="right" valign="top" bgcolor="red">Zelle 3</th>
      </tr><tr>
        <td align="left" valign="middle" bgcolor="lime">
          Zelle 4<br>bla</td>
        <td align="center" valign="middle"
         background="../images/pinie.gif">Zelle 5<br>bla</td>
        <td align="right" valign="middle" bgcolor="red">
          Zelle 6<br>bla</td>
      </tr><tr>
        <td align="left" valign="bottom" bgcolor="lime">
          Zelle 7<br>bla</td>
        <td align="center" valign="bottom" bgcolor="yellow">
          Zelle 8<br>bla</td>
        <td align="right" valign="bottom" bgcolor="red">
          Zelle 9<br>bla</td>
      </tr>
    </table>
</BODY> </HTML>

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Zelle 3
Zelle 4
bla		 Zelle 5
bla		 Zelle 6
bla
Zelle 7
bla		 Zelle 8
bla		 Zelle 9
bla

6.4 Spaltenbreite, Zeilenhöhe

Die Spaltenbreiten sind beim Verbinden verloren gegangen. Für Zelle 3 wird 50 Pixel Breite festgelegt. Die Zeilenhöhe für die erste Zeile wird auf 30 Pixel gestaucht. Einige Browser erwarten erwarten das Argument 'height' für Zeilenhöhe innerhalb '<tr>'. Andere innerhalb von '<td>'. Deswegen wird height="30px" zweimal zugewiesen.

<HTML> <BODY>
    <table cellpadding="5px" cellspacing="10px" border="2px"
     width="320px" height="200px" bgcolor="white" align="center">
      <tr height="30px">
        <th height="30px" align="left" valign="top"
         bgcolor="lime">Zelle 1</th>
        <th align="center" valign="top"
         bgcolor="yellow">Zelle 2</th>
        <th width="50px" align="right" valign="top"
         bgcolor="red">Z 3</th>
      </tr><tr>
        <td align="left" valign="middle" bgcolor="lime">
          Zelle 4<br>bla</td>
        <td align="center" valign="middle"
         background="../images/pinie.gif">Zelle 5<br>bla</td>
        <td align="right" valign="middle" bgcolor="red">
          Zelle 6<br>bla</td>
      </tr><tr>
        <td align="left" valign="bottom" bgcolor="lime">
          Zelle 7<br>bla</td>
        <td align="center" valign="bottom" bgcolor="yellow">
          Zelle 8<br>bla</td>
        <td align="right" valign="bottom" bgcolor="red">
          Zelle 9<br>bla</td>
      </tr>
    </table>
</BODY> </HTML>

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Z 3
Zelle 4
bla		 Zelle 5
bla		 Zelle 6
bla
Zelle 7
bla		 Zelle 8
bla		 Zelle 9
bla

6.5 Zellen verbinden

Mit 'colspan' werden benachbarte Zellen spaltenweise zu einer Zelle verbunden. Mit 'rowspan' werden benachbarte Zellen zeilenweise zu einer Zelle verbunden. Gültige Werte für 'colspan' und 'rowspan' sind Ganzzahlen, die die Anzahl der zu verbindenden Zellen angeben. 'colspan' und 'rowspan' können kombiniert werden.

<HTML> <BODY>
    <table cellpadding="0px" cellspacing="1px" border="1px"
     width="320px" height="100px" bgcolor="white" align="center">
      <tr>
        <td>Zelle 1</td>
        <td>Zelle 2</td>
        <td>Zelle 3</td>
        <td rowspan="3">Zelle 4</td>
      </tr><tr>
        <td colspan="2">Zelle 5</td>
        <td>Zelle 7</td>
      </tr><tr>
        <td>Zelle 9</td>
        <td colspan="2" rowspan="2">Zelle 10</td>
      </tr><tr>
        <td>Zelle 13</td>
        <td>Zelle 16</td>
      </tr>
    </table>
</BODY> </HTML>

So wirds im Browser dargestellt:

Zelle 1 Zelle 2 Zelle 3 Zelle 4
4+8+12
Zelle 5 (5+6) Zelle 7
Zelle 9 Zelle 10
10+11+14+15
Zelle 13 Zelle 16

6.6 Zellen mit beliebigen Inhalt füllen

In Tabellenzellen kann jedes HTML-Element eingefügt werden. Eine Zelle kann eine innere Tabelle enthalten. In die erste Zelle wurde eine rechtsbündige Grafik eine linksbündige Grafik und das Alphabet eingefügt. Die zweite Zelle enthält eine innere Tabelle.

<HTML> <BODY>
    <table cellpadding="5px" cellspacing="0px" border="0px"
     width="200px" height="100px" bgcolor="white" align="center">
      <tr>
        <td align="right" valign="top">Zelle 1
        <br><img align="right" src="./tasse.gif">a b c d e g h
        <img align="left" src="./tasse.gif"> i j k l m n o p q r s t u v w x y z
        </td><td valign="top">Zelle 2<br>
        <table border="1px" bgcolor="silver">
          <tr>
            <td>innere</td>
          </tr><tr>
            <td>Tabelle</td>
          </tr>
        </table>
        </td>
      </tr>
    </table>
</BODY> </HTML>

So wirds im Browser dargestellt:

Zelle 1

a b c d e f g h i j k l m n o p q r s t u v w x y z 		Zelle 2
innere
Tabelle

6.7 Definitionen

Mit '<colgroup>' wird der Tabellenaufbau vordefiniert. Dies kann die Anzeige der Tabelle beschleunigen. Mit '<tbody>' (Tabellenrumpf) werden mehrere Zeilen zu einem Bereich gruppiert. Wenn '<tbody>' verwendet wird, dann ist die Definition von Tabellenkopf ('<thead>') und Tabellenfuß ('<tfoot>') zwingend erforderlich. Mit '<tbody>' läßt sich u.a. Schreibarbeit sparen. Auf Selfhtml.de befindet sich eine ausführliche Beschreibung dazu.

6.8 Übungsaufgabe

Das bisher vermittelte Wissen genügt um eine kleine Bildergalerie mit Bildbschriftungen in HTML zu verfassen. Als kleine Übung sollt Ihr diese Beispielgalarie erstellen:

Galerie
 
"Die Tasse"
Lutz Lustig 2006
Daten
  • Stil
    • markant
  • Rubrik
    • Fotografie
    • Zeitlos
"Der Becher"
Max Müller 2006
Daten
  • Stil
    • schlicht
    • elegant
  • Rubrik
    • Stilleben
    • Moderne

7 Die Frame-Technik

Frames sind Rahmen in die Inhalte gepackt werden. Das besondere daran ist, daß jeder Rahmen eine eigene komplette HTML-Seite erhält. Die Anzeige wird in mehrere Bereiche aufgeteilt. Dies geschieht mit '<FRAMESET>'.In jeden Bereich wird mit '<FRAME>' eine HTML-Seite gelegt.

HTML-Dokumente, die Framesets definieren dürfen keinen Rumpf '<BODY>' enthalten. Sie enthalten nur das Tag '<HTML>', eine Kopfdefinition '<HEAD>' und die Definitionen der Framesets '<FRAMESET>'.

7.1 Aufteilung der Anzeige

Die Aufteilung der Anzeige erfolgt vertikal mit 'rows' und horizontal mit 'cols'. Für jeden vertikalen Anzeigebereich wird in 'rows' seine Höhe angegeben. Für jeden horizontalen Bereich wird in 'cols' seine Breite angegeben. Erlaubt sind prozentuale oder Pixel Angaben, die mit Komma von einander getrennt sind. Mit '*' wird für einen Anzeigebereich der gesamte noch frei verfügbare Platz reserviert.

Horizontal:

<HTML>
    <frameset cols="50px,80%,*">
    <frame></frame><frame></frame><frame></frame>
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Vertikal:

<HTML>
    <frameset rows="20%,*,20%">>
    <frame></frame><frame></frame><frame></frame>
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Framesets lassen sich ineinander verschachteln. Interessant ist eine Kombination aus vertikalen und horizontalen Framesets.

<HTML>
    <frameset rows="20%,40%,*">
      <frame></frame>
      <frameset cols="200px,*">
        <frame></frame>
        <frame></frame>
      </frameset>
      <frameset cols="50%,50%">
        <frame></frame>
        <frame></frame>
      </frameset>
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

7.2 Seiten einbinden

Die Aufteilung der Framesets erzeugt leere Anzeigebereiche, die mit Inhalten zu füllen sind. In jedes '<FRAME>' wird eine HTML-Seite gelegt. Wie bei Grafiken teilt 'src' dem Browser mit, wo die anzuzeigende HTML-Datei liegt. Für die Pfadangabe gelten die gleichen Regeln, wie beim Einbinden von Grafiken.

<HTML>
    <frameset cols="*,*">
      <frame src="./frame1.html">
      <frame src="./frame2.html">
    </frameset>
</HTML>

Die datei "frame1.html" hat folgenden Inhalt:

<HTML><body bgcolor="aqua">
   T&uuml;rkise HTML-Seite
</body></HTML>

Die datei "frame2.html" hat folgenden Inhalt:

<HTML><body bgcolor="lime">
   Gr&uuml;ne HTML-Seite
</body></HTML>

So wirds im Browser dargestellt:

Demo

7.3 NOFRAMES

Nicht alle Browser unterstützen Framesets. Beim Öffnen einer HTML-Seite mit Framesets zeigen diese Browser nur eine leere Seite an. Deswegen wird mit '<NOFRAMES>' diesen Browsern ein alternativer Inhalt angeboten. Framefähige Browser ignorieren den NOFRAMES-Bereich und seinen Inhalt. '<NOFRAMES>' wird stets am Ende des letzten Framesets angelegt.

<HTML>
    <frameset cols="*,*">
      <frame src="./frame1.html">
      <frame src="./frame2.html">
      <noframes>
      Ihr Browser unterstützt keine Frames.
      Hier gehts zu Seite 1: <a href="./frame1.htm">Seite 1</a>
      </noframes>
    </frameset>
</HTML>

So siehts bei nicht framefähigen Browsern aus:

Ihr Browser unterstützt keine Frames.
Hier gehts zu Seite 1: Seite 1

Auch in Seiten die keine framesets definieren, kann '<NOFRAMES>' für alternative Inhalte verwendet werden.

<HTML><body bgcolor="aqua">
   T&uuml;rkise HTML-Seite
   <NOFRAMES>
      Ihr Browser unterstützt keine Frames.
      Hier gehts zu Seite 2: <a href="./frame2.htm">Seite 2</a>
   </NOFRAMES>
</body></HTML>

So siehts bei nicht framefähigen Browsern aus:

Türkise HTML-Seite
Ihr Browser unterstützt keine Frames.
Hier gehts zu Seite 2: Seite 2

7.4 Frameset und Frames formatieren

Feste Fenstergröße

Die Demo in "Seiten einbinden" zeigt zwei Frames. Die Größe der beiden Frames läßt sich im Browser ändern indem mit der Maus die Trennlinie verschoben wird. Häufig ist es notwendig das zu verhindern. Die Änderung der Größe wird mit 'noresize' verhindert.

<HTML>
    <frameset cols="*,*" >
      <frame src="./frame1.html" noresize>
      <frame src="./frame2.html">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Scrolleiste

Paßt der Seiteninhalt nicht komplett in ein Frame dann erscheint automatisch eine Scrolleiste. Mit 'scrolling' wird dieses Verhalten beeinflußt. Der Wert 'yes' für 'scrolling' bewirkt, daß die Scrolleisten immer sichtbar sind, auch wenn der Seiteninhalt komplett in den Frame paßt. 'no' sorgt dafür daß keine Scrolleiste sichtbar ist, auch nicht wenn der Seiteninhalt zu groß ist. 'auto' gibt an, daß keine Scrolleisten sichtbar sind, aber automatisch eingeblendet werden, wenn der Seiteninhalt zu groß ist.

<HTML>
    <frameset rows="80px,80px,*" >
      <frame src="./frame1.html" scrolling="auto">
      <frame src="./frame2.html" scrolling="no">
      <frame src="./frame1.html scrolling="yes"">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo Spielen Sie etwas an den Größen herum (horizontale und vertikale Trennlinien verschieben).

Abstände

Mit 'marginwidth' läßt sich der horizontale Abstand des Inhalts zum Frame-Rand einstellen. Mit 'marginheight' der vertikale Abstand. Die Wertangaben sind in Pixel.

<HTML>
    <frameset cols="*,*" >
      <frame src="./frame1.html" marginwidth="100px" marginheight="50px">
      <frame src="./frame2.html" marginwidth="0px" marginheight="0px">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Rahmen

Mit 'frameborder' wird für ein Frameset die Rahmendicke festgelegt. Die Wertzuweisung der Rahmendicke erfolgt in Pixelangaben. Netscape erwartet 'border' statt 'frameborder'. Deswegen werden beide Angaben berücksichtigt.

<HTML>
    <frameset cols="*,*" border="20px" frameborder="20px" >
      <frame src="./frame1.html">
      <frame src="./frame2.html">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Der Rahmen kann ganz unterdrückt werden, indem die Dicke auf 0 Pixel gesetzt wird. Der Internet Explorer zeigt dann jedoch eine Lücke an. Das Entstehen einer Lücke wird mit 'framespacing="0"' verhindert.

<HTML>
    <frameset cols="*,*" border="0" frameborder="0" framespacing="0" >
      <frame src="./frame1.html">
      <frame src="./frame2.html">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

Mit 'bordercolor' kann dem Rahmen eine andere Farbe zugewiesen werden.

<HTML>
    <frameset cols="*,*" border="10px" frameborder="10px" bordercolor="yellow" >
      <frame src="./frame1.html">
      <frame src="./frame2.html">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

7.5 Zuordnung der Frames

Klickt der Benutzer auf einen Verweis zu einer anderen Seite, wird sie im aktuellen Frame angezeigt. Manchmal soll die Seite aber in einem anderen Frame angezeigt werden. Damit das funktioniert ist eine eindeutige Adresse für Frames notwendig. Mit 'name' erhält jedes Frame einen eindeutigen Bezeichner zugeordnet. Über diesen Bezeichner kann das Frame aus anderen Frames adressiert werden.

<HTML>
    <frameset cols="*,*" border="0" frameborder="0" framespacing="0" >
      <frame name="left" src="./frame1.html">
      <frame name="right" src="./frame2.html">
    </frameset>
</HTML>

So wirds im Browser dargestellt:

Demo

7.6 Eingebettete Frames

Eingebettete Frames werden oft genutzt um Werberbanner oder fremde Inhalte in der eigenen Seite einzublenden. Die Browser blocken unter Umständen diese eingebetteten Frames. Deswegen sollte möglichst darauf verzichtet werden. Das Tag für eingebettete Frames lautet '<IFRAME>'. IFrames werden genauso in eine HTML-Seite eingebunden, wie Grafiken. Mehr Informationen gibt es bei Selfhtml.de

8 Verknüpfungen zu anderen Dokumenten

Mehrere zusammengehörende HTML-Seiten können miteinander verknüpft werden. Diese Verknüpfungen werden Link oder Verweis genannt. Ein Link kann auch auf eine bestimmte Stelle innerhalb der aktuellen Seite oder innerhalb einer anderen Seite zeigen. Dazu ist an der entsprechenden Stelle in der HTML-Seite ein Anker anzulegen, auf den ein Link zeigen kann. Links und Anker werden mit '<A>' angelegt. Die Adressierung bei Links basiert auf URLs.

8.1 URL

Die URL (Uniform Resource Locator) gibt den Pfad zum Linkziel an. Es ist darauf zu achten, daß in der Pfadangabe jedes '\' durch ein '/' ersetzt wird.

Absolute Pfadangaben

Absolute Pfadangaben beginnen mit '/', dem Start- bzw. Wurzelverzeichnis der Homepage.

Beispiel URLs:

/index.html
/web/web.html
/images/pinie.gif

Soll der Link auf eine Datei auf einer anderen Homepage im Internet zeigen, dann wird zuerst das Protokoll gefolgt von '://' notiert. Dahinter wird die Internetadresse und der Pfad zur Datei eingetragen.

Beispiel URLs:

http://www.selfhtml.de/index.html
http://esole.de/images/pinie.gif ftp://microsoft.com

Relative Pfadangaben

Relative Pfadangaben beginnen mit '../' oder './'. Ausgangspunkt bei relativen Angaben ist der Pfad der geöffneten HTML-Seite. '..' bedeutet übergeordnetes und '.' das aktuelle Verzeichnis. Das '.' und das darauf folgende '/' werden meist weggelassen.

Beispiel URLs:

../index.html
../web/web.html
./web.html
demo/example.html

Mehrere übergeordnete Ebenen werden durch mehrere hintereinander stehende '../' erreicht.

../../../bild.gif

8.2 Links zu anderen Seiten

Bei Links wird im Tag '<A>' mit 'href' die Zieladresse nach dem URL-Schema angegeben. Damit die Links mit der Maus angeklickt werden können, wird innerhalb von Link Text eingefügt. Dieser Text sollte den Link möglichst gut beschreiben.

<A href="http://esole.de">esole.de</A>
<A href="../index.html">Startseite</A>
<A href="./web.html">web.html</A>
<A href="/web/web.html">Noch einmal web.html</A>

So wirds im Browser dargestellt:

esole.de
Startseite
web.html
Noch einmal web.html

8.3 Anker und ein Link zu diesen Anker

Anker kennzeichnen eine Stelle in einer Seite, damit sie direkt angesprungen werden kann. Im Tag '<A>' wir mit 'name' dem Anker ein eindeutiger Name vergeben. In den Anker kann beliebiger Inhalt eingefügt werden. Soll ein Link auf diesen Anker verweisen, wird an die Zieladresse des Links ein '#' gefolgt vom Ankernamen angehängt.

<A name="oben">Anker mit Inhalt</A>
<A name="unten"></A>
<A href="#oben">nach oben</A>
<A href="#unten">nach unten></A>

Demo

8.4 Zielfenster für Links

Mit 'target' wird festgelegt in welchem Fenster der Link geöffnet werden soll. '_self' verwendet das aktuelle Fenster.
'_blank' öffnet ein neues Fenster.
'_parent' schließt das aktuelle Frameset und öffnet dafür den Link.
'_top' schließt alle Framesets im aktuellen Fenster und öffnet dafür den Link.
Bei Framesets kann ein Frame festgelegt werden in dem der Link geöffnet werden soll. Dazu wird dem Frame ein Name vergeben. Dieser Name wird in 'target' angegeben.

<HTML>
    <frameset cols="*,*" border="0" frameborder="0" framespacing="0" >
      <frame name="left" src="./links.html">
      <frame name="center" src="./mitte.html">
      <frame name="right" src="./rechts.html">
    </frameset>
</HTML>

Die Datei "links.html" enthält Links die im rechten Frame geöffnet werden sollen.

<A href="rechts1.html" target="right">gelbe Seite für den rechten Frame;/A>
<A href="rechts2.html" target="right">grüne Seite für den rechten Frame</A>

Die Datei "rechts.html" enthält Links die im linken Frame geöffnet werden sollen.

<A href="links1.html" target="left">gelbe Seite für den linken Frame;/A>
<A href="links2.html" target="left">grüne Seite für den linken Frame</A>

Die Datei "mitte.html" enthält Links die in einem neuen Fenster geöffnet werden sollen, oder das aktuelle Frameset schließen.

<A href="example.html" target="_blank">Beispiel in neuem Fenster</A>
<A href="example.html" target="_parent">Beispiel in diesem Fenster</A>

Demo

8.5 Links zu anderen Diensten

Links können zu anderen Internet-Diensten zeigen. Jeder Dienst hat ein Protokoll über das er aktiviert wird. Mögliche Dienste sind verschlüsselte Internetseiten ('https'), gopher-Seiten ('gopher'),File Transfer ('ftp'), Newsreader ('nntp'), telnet ('telnet').

<A href="https://server.de">HTTPS</A>
<A href="gopher://server.de">Gopher</A>
<A href="ftp://server.de">FTP</A>
<A href="nntp://server.de">NNTP</A>
<A href="telnet://server.de">Telnet</A>

Ein Sonderfall ist der E-Mail Dienst. Mit 'mailto:' wird ein E-Mail Programm gestartet. Hinter 'mailto:' kann die E-Mail Adresse des Empfängers angegeben werden.

<A href="mailto:info@esole.de">Mail an esole.de</A>

So wirds im Browser dargestellt:

Mail an esole.de

8.6 Grafische Links

Im Link dürfen auch andere Elemente als Text stehen. Oft werden Grafiken als Links verwendet. Diese Grafiken erhalten standardmäßig einen Rahmen, der mit 'border="0"' unterdrückt wird. Mit 'title' erhält der grafische Link einen Tooltip-Text zugewiesen.

<A href="tasse.html"><img src="../images/tasse.gif" title="viele Tassen"></A>

So wirds im Browser dargestellt:


8.7 Imagemap als Link

Imagemaps teilen eine Grafik in mehrere Bereiche auf, die mit der Maus angeklickt werden können. Für jeden Bereich läßt sich ein eigenes Linkziel bestimmen. Diese Technik wird häufig bei anklickbaren Landkarten genutzt.

Mit 'MAP' wird eine Imagemap angelegt. Mit 'AREA' wird ein anklickbarer Bereich in der Imagemap angelegt. 'shape' bestimmt für den Bereich die Form Kreis ('circle'), Rechteck ('rect') oder Polygon ('polygon').

Mit 'coords' werden die Koordinaten des Bereichs innerhalb der Grafik angegeben. Beim Rechteck sind es die obere linke Ecke und dir untere rechte Ecke. Beim Kreis der Mittelpunkt und sein Radius. Beim Polygon wird jeder Eckpunkt angegeben. Dabei wird mit einem Punkt begonnen und der Reihe nach, alle anderen Eckpunkte bis zum letzten.

Für jeden Bereich wird mit 'href' das Linkziel angegeben. Mit 'title' erhält der Bereich einen Tooltip-Text zugewiesen.

An beliebiger Stelle der HTML-Seite wird eine Grafik eingebunden. Mit 'usemap' wird ihr die Imagemap zugewiesen.

Beispiel Imagemap:

Wählen Sie eine Farbe !<br>
<IMG SRC="map.gif" WIDTH="128" HEIGHT="64" BORDER="0"
 USEMAP="#map">
  <MAP NAME="map">
  <AREA SHAPE="rect" COORDS="29,19,59,48" HREF="orange.html"
   TARGET="right" title="orange">
  <AREA SHAPE="poly" COORDS="59,19,89,19,89,62,29,62,29,48,59,48"
   HREF="gelb.html" TARGET="right" title="gelb">
  <AREA SHAPE="poly" COORDS="1,0,58,0,58,19,29,19,29,48,0,48"
   HREF="rot.html" TARGET="right" title="rot">
  <AREA SHAPE="circle" COORDS="110,18,17" HREF="blau.html"
   TARGET="right" title="blau">
</MAP>

Demo

9 Formulare

Elektronische Formulare werden vom Anwender ausgefüllt und anschließend von einem Programm ausgewertet. Sie werden als Eingabemaske für Datenbanken, für Suchanfragen, Bestellungen, Dateitransfer und für den E-Mail Kontakt verwendet. Das Programm zur Auswertung befindet sich immer auf einem Webserver.

9.1 Funktion und Zielangabe (Action)

Formulare werden mit '<FORM>' angelegt. Im FORM-Tag wird mit 'action' angegeben, wohin die Formulardaten gesendet werden sollen. Erlaubte Werte für 'action' sind eine URL oder 'mailto:' und die E-Mail Adresse eines Empfängers. Für die URL sind relative und absolute Pfadangaben erlaubt.

Wird für 'action' die URL zu einer HTML-Seite angegeben, öffnet der Browser sie nach dem Absenden der Formulardaten. Zeigt die URL zu einem Programm auf dem Server, generiert das Programm eine HTML-Antwortseite, die dann vom Browser angezeigt wird.

Beispiel Url:

<FORM action="http://esole.de/programm.cgi">
</FORM>

Beispiel E-Mail:

<FORM action="mailto:info@esole.de">
</FORM>

9.2 Zielfenster für Antwortseiten (Target)

Mit 'target' wird festgelegt in welchem Fenster die Antwortseite geöffnet werden soll. 'target' bei Formularen verhält sich genauso, wie 'target' bei Links. Als Zielfenster für Formulare wird ebenfalls '_self', '_blank', '_parent' oder '_top' angegeben.

Beispiel für target:

<FORM action="http://esole.de/programm.cgi" target="_blank">
</FORM>

9.3 Übertragungsmethode (method)

Es gibt zwei Übertragungsarten, die mit 'method' festgelegt werden.

GET

Die Methode 'get' hängt beim Absenden die Formulardaten an die URL ran. Diese Daten können nur von CGI Programmen ausgewertet werden. Außerdem ist die Datenmenge begrenzt, da die URL sonst zu groß wird.

<FORM action="http://esole.de/programm.cgi" method="get">
</FORM>

POST

Ist das Ziel ein Programm, schickt die Methode 'post' die Formulardaten als Datenpaket zum Webserver. Das Programm auf dem Webserver kann anschließend die Daten vom Standardeingabekanal auslesen.

Ist das Ziel eine E-Mail Adresse, gibt die Methode 'post' das Datenpaket an das E-Mail Programm des Benutzers weiter. Hat der Benutzer kein E-Mail Programm, passiert nichts. Andernfalls verschickt das E-Mail Programm das Paket zum Empfänger.

<FORM action="http://esole.de/programm.cgi" method="post">
</FORM>

9.4 Formatierung der Daten (enctype und accept-charset)

Enctype

Die Formulardaten werden standardmäßig vor dem Absenden kodiert. Danach sind sie für Menschen sehr schwer lesbar. Beim Versenden von E-Mails wird deshalb mit 'enctype="text/plain"' die Kodierung verhindert.

Beim Hochladen von Dateien wird mit 'enctype="multipart/form-data"' angegeben, daß ein Dateitransfer erfolgt.

<FORM action="http://esole.de/programm.cgi" enctype="text/plain">
</FORM>

Accept-charset

Mit 'accept-charset' wird angegeben, in welchen Zeichensätzen die Benutzereingaben erfolgen dürfen. Die erlaubten Zeichensätze werden mit ', ' voneinander getrennt. Eine Umsetzung in der Praxis ist bisher nicht bekannt.

Beispiel europäische Zeichensätze:

<FORM action="http://esole.de/programm.cgi" accept-charset="ISO-8859-1, ISO-8859-2">
</FORM>

9.5 Steuerelemente für Formulare

Elektronische Formulare enthalten Steuerelemente. Steuerelemente sind Eingabefelder, Auswahllisten, Check-und Radioboxen und Buttons. Jedes Steuerelement erhält mit 'name' einen eindeutigen Namen. Ohne die Namensangaben können die Formulardaten nicht verarbeitet werden.

9.6 Eingabefelder

Einzeiliges Eingabefeld (INPUT)

Einzeilige Eingabefelder werden mit '<INPUT type="text">' angelegt.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Ihr Name:
    <INPUT name="P1" type="text"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Ihr Name:

Feldgröße und Zeichenlänge

Mit 'size' wird die sichtbare Zeichenlänge des Feldes festgelegt. Mit 'maxlength' wird die Eingabe auf eine maximale Zeichenlänge begrenzt.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Nur 10 Zeichen:
    <INPUT name="P1" type="text" size="40" maxlength="10"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Nur 10 Zeichen:

Vorbelegung

Mit 'value' wird das Eingabefeld mit einem Wert vorbelegt.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Nationalität:
    <INPUT name="P1" type="text" value="deutsch"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Nationalität:

Feldarten

Mit 'type' wird für ein Eingabefeld ein spezielles Eingabeformat festgelegt.
  • Texteingabe: type="text"
  • Paßworteingabe: type="password"
  • Eingabe von Zahlen: type="int"
  • Datumseingabe: type="date"
Die Browser unterstützen 'date' und 'int' nicht.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Benutzer:
    <INPUT name="P1" type="text" value="Gast"></input>
    Paßwort:
    <INPUT name="P2" type="password"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Benutzer: Paßwort:

Mehrzeiliges Eingabefeld (TEXTAREA)

Mehrzeilige Eingabefelder werden mit '<TEXTAREA>' angelegt. Mit 'cols' wird die sichtbare Zeichenlänge, mit 'rows' werden die sichtbaren Zeilen festgelegt.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Anschrift:
    <TEXTAREA name="P1" cols="20" rows="4"></TEXTAREA>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Anschrift:

Vorbelegung bei mehrzeiligen Eingabefeldern

Mehrzeilige Eingabefelder werden mit dem Text vorbelegt, der in das Element '<TEXTAREA>' eingetragen wurde.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Anschrift:
    <TEXTAREA name="P1" cols="20" rows="4">
Max Müller
Musterweg 5
12000 Berlin
    </TEXTAREA>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Anschrift:

Schreibschutz für Eingabefelder

Ab NS 6.0, Opera 6 und IE 4.0 lassen sich Eingabefelder mit 'readonly="readonly"' fürs Schreiben sperren.

<INPUT name="P1" type="text" value="Anschrift"
 readonly="readonly">
</input>
<TEXTAREA name="P1" cols="20" rows="4" readonly="readonly">
Max Müller
Musterweg 5
12000 Berlin
</TEXTAREA>

So siehts im Browser aus:

9.7 Check- und Radioboxen

Check- und Radioboxen werden ebenfalls mit '<INPUT>' angelegt.

Radioboxen sind Kreise, die mit der Maus ausgewählt werden können. Ausgewählte Kreise werden mit einem Punkt markiert. In einer Gruppe kann nur eine Radiobox markiert werden.

Checkboxen sind Quadrate, die mit der Maus ausgewählt werden können. Ausgewählte Quadrate werden mit einem Kreuz markiert. In einer Gruppe könnn mehrere Checkboxen markiert werden.

Radiobox

Eine Radiobox wird mit 'type="radio"' angelegt. Radioboxen werden gruppiert, indem sie den gleichen Namen erhalten. Jede Radiobox bekommt mit 'value' einen Wert zugewiesen. Mit 'checked="checked"' wird eine Radiobox vorselektiert.

Beispiel Radioboxen in einer Gruppe:

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Ihre Lieblingsfarbe:<br>
    <INPUT name="P1" type="radio" value="blue"></INPUT>
    Blau
    <INPUT name="P1" type="radio" value="red" checked="checked"></INPUT>
    Rot
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Ihre Lieblingsfarbe:
Blau
Rot

Checkbox

Eine Checkbox wird mit 'type="checkbox"' angelegt. Checkboxen werden gruppiert, indem sie den gleichen Namen erhalten. Jede Checkbox bekommt mit 'value' einen Wert zugewiesen. Mit 'checked="checked"' wird eine Checkbox vorselektiert.

Beispiel Checkboxen in einer Gruppe:

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Ihre Bestellung:<br>
    <INPUT name="P1" type="checkbox" value="food"></INPUT>
    Essen
    <INPUT name="P1" type="checkbox" value="drink" checked="checked"></INPUT>
    Trinken
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Ihre Bestellung:
Essen
Trinken

9.8 Auswahllisten

Mit '<SELECT>' wird eine Auswahlliste angelegt. 'size' bestimmt die Anzahl der sichtbaren Einträge. Einträge werden mit '<OPTION>' eingefügt. Jeder Eintrag erhält mit 'value' einen Wert zugewiesen. Mit 'selected="selected"' wird ein Eintrag vorselektiert.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Ihre Lieblingsfarbe:<br>
    <SELECT name="P1" size="3">
      <OPTION value="blue">Blau</OPTION>
      <OPTION value="red" selected="selected">Rot</OPTION>
    <</SELECT>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Ihre Lieblingsfarbe:

Auswahllisten mit Mehrfachauswahl

Mit 'multiple="multiple"' wird eine Mehrfachauswahl zugelassen. Für die Mehrfachauswahl hält der Benutzer die STRG-Taste gedrückt und wählt die gewünschten Einträge aus. Bei Mehrfachauswahl können auch mehrere Einträge vorselektiert werden.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Ihre Bestellung:<br>
    <SELECT name="P1" size="3" multiple="multiple">
      <OPTION value="rind">Rindfleisch</OPTION>
      <OPTION value="schwein" selected="selected">Schweinefleisch</OPTION>
      <OPTION value="huhn">Geflügel</OPTION>
      <OPTION value="fisch" selected="selected">Fisch</OPTION>
    <</SELECT>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Ihre Bestellung:

9.9 Versteckte Felder

Versteckte Felder werden auch mit '<INPUT>' angelegt. Die Angabe 'type' erhält den Wert "hidden". Mit 'value' bekommt das versteckte Feld einen Wert zugwiesen. Dieser wird beim Absenden heimlich mitübertragen.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    unsichtbar:
    <INPUT name="P1" type="hidden" value="design"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

unsichtbar:

9.10 Buttons

Buttons werden mit '<INPUT>' angelegt. Mit 'value' wird ihnen ein Wert zugewiesen.

Einfacher Button

Einfache Buttons werden mit 'type="button"' angelegt. Sie besitzen keine Funktion. Mittels Scriptsprachen, wie JavaScript, wird die Funktionalität nachträglich eingebaut. Bei einfachen Buttons bleibt das Formular geöffnet und wird nicht abgesendet.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post">
    Klick mich:
    <INPUT name="P1" type="button" value="tuwas"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Klick mich:

Absenden und zurücksetzen

Fürs Absenden und Zurücksetzen von Formularen gibt es zwei Standardbuttons. Der Absendebutton wird mit 'type="submit"' angelegt. Ein Button zum Löschen der Formulareingaben wird mit 'type="reset"' angelegt.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post" target="_blank">
    Name:
    <INPUT name="P1" type="text"></input><br>
    <INPUT type="submit" value="Absenden"></input>
    <INPUT type="reset" value="Abbrechen"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Name:

Grafischer Absendebutton

type="image"

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post" target="_blank">
    Name:
    <INPUT name="P1" type="text"></input>
    <INPUT input type="image" src="./demo/button.gif"></input>
  </FORM>
</BODY> </HTML>

So siehts im Browser aus:

Name:

Dateitransfer

Der Standardbutton fürs Öffnen von Dateien wird mit 'type="file"' angelegt. Damit das Verschicken von Dateien funktioniert, ist im FORM-Tag 'enctype="multipart/form-data"' anzugeben.

Einige Browser unterstützen das Filtern der Dateiauswahl nach MIME-Typen. Dazu wird dem Button mit 'accept' ein Datei-Filter zugewiesen.

<HTML> <BODY>
  <FORM action="http://esole.de/programm.cgi" method="post"
   enctype="multipart/form-data">
    Textdatei hochladen:
    <INPUT name="P1" type="file" accept="text/*"></input><br>
    GIF-Grafik hochladen:
    <INPUT name="P1" type="file" accept="image/gif"></input>
  </FORM>
</BODY> </HTML>

Textdatei hochladen:
GIF-Grafik hochladen:

9.11 Übung

Formulare, Tabellen und Frames lassen sich wunderbar kombinieren. Erstellen Sie ein Formular für eine Auktion. Fügen Sie in das Formular eine Tabelle mit einer Bildergalerie ein. Neben jedem Bild soll ein Eingabefeld für die Eingabe des Gebots sein. Am Ende des Formulars sollen sich ein Absendebutton und ein Resetbutton befinden.

10 Sonstiges

Groß-Klein-Schreibung Entities SCRIPT NOSCRIPT OBJECT Attribut 'ALT' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

11 Weiterführende Links

  • Online Tutorials
    • Selfhtml
      • Farbcodes
  • Spezifikationen und Protokolle
    • rfc
      • iso
  • Werkzeuge
    • Browser
      • Netscape
    • Editor
      • Phase 5


 CSS
 Webdesign
<div class="navi"><a href="../start2.html" title="">Startseite ohne Frames</a></div>
Startseite / Webdesign / HTML