Zurück zur Startseite



HTML-Tutorial



Diese Referenz ist in 10 grobe Teile eingeteilt:

  1. Text Layout
  2. Seiten Layout
  3. Listen Tags
  4. Frames
  5. Links
  6. Bilder und Graphiken
  7. Tabellen
  8. Multimedia
  9. Forms und Eingabemasken
  10. Kommentare



***Text Layout***



<B>(text)</B>
 zeigt den ausgewählten Text im Fettdruck

<I>(text)</I>
 zeigt den ausgewählten Text im Kursivdruck

<U>(text)</U>
 Unterstreicht den gewählten Text

<strong>(text)</strong>
 Zeigt dem Browser an, das der ausgewählte Text besonders wichtig ist. Wird von den meißten Browsern im Fettdruck interpretiert

<tt>(text)</tt>
 läßt den gewählten Text dicktengleich erscheinen

<s>(text)</s>
 streicht den gewählten Text durch

<small>(text)</small>
 verkleinert den gewählten Text

<big>(text)</big>
 vergrößert den gewählten Text

<sub>(text)</sub>
 stellt den gewählten Text tief

<sup>(text)</sup>
 stellt den gewählten Text hoch

<blink>(text)</blink>
 Läßt den gewählten Text in festen nicht veränderbaren Intervallen blinken

<font>(text)</font>
 Der Font Tag bestimmt Größe und Farbe des durch ihn erfassten Textabschnittes

<font color=#000080>(text)</font>
 läßt den gewählten Text in beliebiger Farbe erschienen. Der Farbcode (in diesem Fall #000080) gibt an, welche Farbe der Text haben soll. Siehe dazu die Farbtabelle

<fontsize="+1">(text)</font>
 läßt den gewählten Text in einer Größe von -2, -1 normal, +1 und +2 erscheinen

<hx>(text)</hx>
 läßt den gewählten Text in der Überschriftsgröße X erscheinen. Für X können wir eine Zahl zwischen 1 und 6 eingeben, wobei 1 die größte und 6 die kleinste Variante ist

<blink>(text)</blink>
 läßt den ausgewählten Text blinken

<em>(text)</em>
 läßt den ausgewählten Text emphatisch erscheinen

<cite>(text)</cite>
 Zeigt dem Browser an, das der ausgewählte Text ein Zitat ist. Wird von den meißten Browsern in Kursivschrift interpretiert

<code>(tag)</code>
 Zeigt dem Browser an, das der eingetagte Tag nicht interpretiert, sondern nur am Monitor abgebildet wird

<adress>(text)</adress>
 Der Textbereich zeigt dem Browser den Autor und dessen eMail-Adresse an. Wird von den meißten Browsern in Kursivschrift wiedergegeben


***Sonderzeichen***



Gewisse Zeichen können von einigen Browsern fehlinterpretiert werden. Es gibt daher Sonderzeichen, die International von allen Browsern anerkannt werden. Dies sind für die deutsche Sprache folgende:
ZeichenHTML-Ersatz
ä&auml;
Ä&Auml;
ü&uuml;
Ü&Uuml;
ö&ouml;
Ö&Ouml;
ß&szlig;
<&lt;
>&gt;
"&quot;
&&amp;
´&acute;




***Seiten Layout***



<p>(text)</p>
 Fügt einen automatischen Zeilenumbruch im Text ein

<br>(text)</br>
 Fügt an dieser Stelle einen Zeilensprung ein

<pre>(text)</pre>
 Läßt den Text so erscheinen, wie man ihn im Editor definiert

<center>(tag)</center>
 Läßt den ausgewählten Text in die Mitte rücken

<hr>
 Läßt eine Linie auf dem Browser erscheinen, die in ihrer Größe durch SIZE, in der Länge durch width= und in ihrer Ausrichtung durch ALIGN= verändert werden kann



***Listen Tags***



<Ul> <li>(text) ... </Ul> Setzt einen dicken Markierungspunkt vor den Text <OL> <li> (text) ... </OL> Durch den Tag OL wird die Liste numerisch. Das heißt, alle <li>`s in diesem Tag werden durchnumeriert, unzwar von oben nach unten!


***Frames***



Mit Hilfe von Frames kann man das Browserfenster in verschiedene, voneinander unabhängige Teile aufteilen. Die Verschiedenen durch Frames definierten Fenster können verschiedene HTML-Dateien angezeigt werden.
Frames werden anstatt des BODY Bereichs in einer HTML Datei notiert. Das sieht dann etwa so aus:
 <html>
  <head>
  <title>Frame-Test</title>
  </head>
  <frameset cols="50%,50%">
       <frame src="Zelle1.htm" name="1">
       <frame src="Zelle2.htm" name="2">
  </frameset>
  </html>

Im Frameset definieren sie ob der Bildschirm Horizont, oder vertikal aufgeteilt werden soll. Nach dem Frameset kommen die eigentlichen HTML Dateien, die im Fenster angezeigt werden sollen. Wollen sie nun das eine Fenster nun noch mal unterteilen, schreibt man anstatt der Framequelle einfach ein neues Frameset. Das sieht dann zum Beispiel so aus:
 <html>
  <head>
  <title>Frame-Test</title>
  </head>                                                                                                                        

  <frameset cols="50%,50%">                                                                                     
        <frameset rows="50%,50%">                                                                             
        <frame src="Zelle1.htm" name="1">                                                                  
        <frame src="Zelle3.htm" name="3">                                                                   
        </frameset>
    <frame src="Zelle2.htm" name="2">
  </frameset>
 </html>

_____________
|     |     |
|_1___|     |
|     |   2 |
|_2___|_____|
Anhand der Skizze kann man erkennen, wie die Frames jetzt aufgebaut sind. Ich gebe zu die Skizze ist nicht besonders gut, aber das Programm mit dem ich arbeite ist in der Beziehung etwas eigensinnig.
Im Frameset definiert man per ROWS und COLS ob der Bildschirm horizontal oder vertikal aufgeteilt werden soll. Außerdem kann man in Pixel- oder in Prozentangaben angeben. Natürlich müssen sich diese Aufgaben sich nicht nur auf 2 Angaben beschränken. Es können beliebig viele Angaben dort stehen, Voraussetzung ist jedoch, daß die Prozent oder Pixel Angaben in sich stimmen, also nicht das im Endeffekt 103% entstehen oder sonst etwas in der Richtung. Man darf auch den Joker * benutzen, um dem Browser zu zeigen, das der Rest für das letzte Fenster reserviert ist, also würde so ein Frameset etwas so aussehen:

<frameset rows="135,650,99,*">

**Links in Frames**



Wenn man innerhalb eines Framefensters einen Link betätigt, so erscheint das Ergebnis des Links im Aktuellem Fenster!! Man kann jedoch mit Hilfe von TARGET="" das Framefenster wählen, in welchem der Link erscheinen soll. Dazu müssen wir jedoch die Framefenster bezeichnen, in unserem Beispiel weiter oben sind die Namen 1, 2 und 3. Ein Link der von Zelle1 betätigt wird, und in Fenster 2 erscheinen soll, sähe dann so aus:

(text)<a href="datei.htm" target="2">Link</a>(text)

Um aus dem Frameset auszubrechen, gibt man als target einfach "_parent" ein. Der Link wird dann im übergeordnetem Fenster dargestellt. Dies kann ein weiteres Framefenster sein, oder das standart Browser Fenster. Soll mit einem Link aus sämtlichen Framesets auf einmal ausgebrochen werden, gibt man als Target einfach "_top" an. Der Browser verläst dann das Frameset, und baut die Seite neu auf. Der ursprüngliche Zustand kann dann jedoch nicht mehr hergestellt werden, es sei denn, man lädt das ganze Frameset noch einmal. Wenn man durch einen Link ein völlig neues, unabhängigen Browserfenster öffen möchte, sollte man als Target Befehl "_blank" eingeben. Es öffnet sich dann ein neues Fenster das den Inhalt des Links anzeigt.

Wenn Sie eine reine Linkseite innerhalb eines Framesets aufbauen, ist es nicht besonders sinnvoll bei jedem Link ein target="_top" zu setzen. Dafür gibt es den Befehl <base>. Als Parameter geben Sie einfach target="_parent" ein. Natürlich kann hier auch ein von Ihnen definierter Fenstername stehen.
Wenn Sie so eine Lösung benützen wollen, achten Sie bitte darauf, das der <base> Tag im Dateikopf stehen muß!! Also im <head>(dateikopf)</head> Bereich!

Es ist leider nicht möglich mit einem Link 2 Fenster, und oder alle Framefenster neu zu laden. Diese Lösung ist jedoch mit Javascript realisierbar.



***Links***



<a href="http://www.polopty.com">(text)</a>
Dies ist eine Linkform, die zu einer anderen Internetadresse führt.

<a href="mailto:Mustermann@provider.com">(text)</a>
 Diese Linkform läßt ein eMail Eingabemenü im Browser erscheinen, indem eine eMail an die Adresse abgeschickt wird!

<a href="#XXX">(text)</a>
 Dies ist eine Linkform. Dieser Link führt innerhalb einer Webseite zu einem spezifischem Ort, der mit <a name="XXX">(text)</a> markiert wird!. XXX muß identisch mit dem Folgelink sein!

<a name="XXX">(text)</a>
 Dies ist eine Sprungmarke. Der vorhergehende Link führt hierher. XXX muß identisch mit dem erstem Link sein!



***Bilder und Graphiken***



Wenn wir Bilder implementieren wollen, benutzen wir entweder das JPG oder das GIF Format, welche von allen gängigen Browsern unterstüzt werden! Wenn wir andere Formate benutzen, kann es sein, das einige Browser Fehlermeldungen ausgeben werden!

<img src="Bild.gif" alt="(text)" ></A>
 Ein Bild wird in die gegebene Stelle eingesetzt. Sollte das Bild noch nicht geladen sein, erscheint ein Alternativtext auf dem Browser, den man hier editieren kann. zwei weitere Parameter kann man innerhalb der Bildsyntax noch einfügen, unzwar die Größe und Breite des Bildes in Pixeln. Die Parameter sind width=(Pixelwert) und height=(Pixelwert) Achtung: als Quelle (SRC) eines Bildes können Sie auch eine Datei auf einem fremdem Rechner im Internet benutzen, sie müssen dann nur als Quelle die URL des Bildes angeben, zum Beispiel bei einem Counter!

<body background="Bild.gif" bgproperties=fixed>
 Hintergrundgrafik mit Wasserzeichen


***Ein Bild in Verbindung mit einem Link***



<a href="XXX"><img align="bottom" src="Bild.gif" alt="(text)" Border="0"></A>
 XXX steht in diesem Fall für eine der drei uns bekannten Link Arten. Ansonsten siehe vorherige Erklärungen!

Es gibt noch eine zweite Variente, um ein Bild mit einem Link zu kombinieren. Diese Funktion heißt "Imagemaps" oder "klickable maps". Sie ist ungleich komplizierter, hat jedoch den Vorteil, das jedes Pixel in einem Bild einen Link zu einer anderen Stelle durchführen kann. Da ich zur Zeit mir überlege wie ich dieses Prinzip am deutlichstem machen kann, verweise ich vorläufig auf die Shareware Szene, die in diesem Bereich hervorragende Arbeit leistet.



***Tabellen***



<Table>
<Tr><Th></Th><Th></Th></Tr>
<Tr><Td></Td><Td></Td></Tr>
</Table>
Um eine Tabelle zu generieren, genügt ein simpler <Table> Tag.
Der <Table> Tag erlaubt eine Vielzahl von Parametern:


align=(left, right oder center)
 weißt der Tabelle eine Ausrichtung auf der Seite zu

border=(wert)
 gibt der Tabelle optional einen Rand

bordercolor=(farbwert)
 legt die Farbe des Rahmens fest

cellspacing=(Pixelangabe)
 gibt den Zellen innerhalb der Tabelle einen Rahmen

height=(Prozent oder Pixelangabe)
 legt die Höhe der Tabelle fest. Bei Weglassen dieses Wertes wird die Tabelle so hoch, wie es die Werte der Zellen erfordern

width=(Prozentoder Pixelangabe)
 legt die Breite der Tabelle fest. Siehe hight

Innerhalb des <Table> Tags leiten sie mit <TR> eine Zeile ein, und beenden sie mit </TR> wieder.
Innerhalb dieses Subtags ist die Anzahl und Art der Reihen angegeben. So wird mit dem <TH></TH> Tag der Kopf einer Tabelle notiert, und erscheint bei den meißten Browsern im Fettdruck. Der <TD> Tag notiert eine ganz normale Tabellenreihe. Ebenso wie der <TH> Tag notiert der <TD> Tag eine Reihe.
Innerhalb dieser Subtags ist es möglich durch verschiedene Parameter das Aussehen der Zelle zu verändern:


bgcolor=(farbwert)
 weißt der Zelle eine bestimmte Hintergrundfarbe zu

align=(left, right oder center)
 erlaubt den Zelleninhalt auszurichten

border=(Wert)
 Optional kann die Zelle einen bestimmbaren Rand bekommen

height=(Pixelangabe)
 weißt der Zelle eine bestimmte Höhe in Pixeln zu

width=(Pixelangabe)
 weißt der Zelle eine ebstimmte Breite in Pixeln zu

valign=(top oder bottom)
 richtet den Zellentext oben oder unten aus

colspan=(Zellenwert)
 Dieser Parameter erlaubt es horinzontal gelagerte Zellen miteinander zu verbinden. Jedoch muß wenn zum Beispiel 2 Zellen miteinander verbunden werden sollen, die nachfolgende Zelle gelöscht werden, da sonst eine weitere unerwünschte Zelle in Ihrer Tabelle auftaucht

rowspan=(Zellenwert)
Hier werden Zelleninhalte in der Senkrechten miteinander Verbunden. Hier gilt die gleiche Regel wie bei rowspan


Bedenken Sie jedoch, das Sie bei einigen dieser Parameter in Konflikte geraten können, die im <Table> Tag notiert werden!!


***Multimedia***



**Musik**

<bgsound src="sound.au" alt="(text)" loop=infinite>
Fügt Backgropund Sound zur Seite hinzu. "loop=" gibt an, wie oft die Musik wiederholt werden soll.

**Videos**

<img dynsrc="datei.avi" loop=infinite width=(Pixel) height=(Pixel) img src="Bild.gif">
einfaches Video wird mit dem Betriebssystem eigenem Player wiedergegeben! Vorsicht, das AVI (MPG, MOV, etc.) muß vorher komplett heruntergeladen werden! Auch hier wieder die Einstellungen für die wiederholungen, die Höhe und Breite sowie eine alternative Grafikanzeige!



***Forms und Eingabe Masken***



Forms oder auch Eingabemasken werden dazu gebraucht Informationen vom Betrachter ohne E-Mail an den Hersteller zu schicken. Diese Eingabemasken können beispielsweise wie ein Vertrag oder ein Fragebogen aufgebaut sein.

Mit dem <FORM> Tag signalisieren Sie dem Browser, das jetzt eine Eingabemaske kommt. In den selben Tag müssen jedoch noch Informationen bezüglich der Art des Zustellens. Dies sieht dann etwa so aus:
<Form action="mailto:mustermann@provider.com" method="post">
Anstatt "mailto:..." könnten Sie auch ein CGI Script definieren, welches dann vom Browser ausgeführt wird. Mit </FORM> beenden Sie die Eingabemaske wieder.

Um Informationen vom Benutzer zu erlangen gibt es verschiedene Eingabemöglichkeiten. Ich möchte sie hier aufzählen, und der Reihe nach besprechen:


Bevor ich jedoch in die Besprechung der einzelnen Arten eingehe, möchte ich noch den Aufbau eines Tags zur Erfassung der Daten:

<Input Type="" Name="" Size="" Maxlength="" Value=""></Input> Der Tag heißt INPUT. TYPE="" signalisiert dem Browser um welche Eingabe es sich handelt. Mit NAME="" wird ein Name für die Eingabe vergeben. Besonders bei den Radioeingaben wird die Namenvergabe wichtig. SIZE="" und MAXLENGTH="" setzen die Länge der Eingabe in Buchstaben fest. VALUE="" setzt eine Vorgabe für Texteingaben fest. Bei Knöpfen hat der VALUE Wert jedoch eine spezielle Bedeutung, auf die ich später noch eingehen werde.
Einzellige Texteingaben TYPE="TEXT"
stellt ein vorher definiertes Textfeld zur Verfügung.

Mehrzeilige Texteingabe
<Textarea Name=" " Value="" Rows="" Cols=""></Textarea>
Die mehrzeilige Texteingabe ist eine Eingabeform, die vom <;INPUT> Tag abweicht. Sie generiert einen neuen Tag, dessen Spalten (Cols) und Reihen (Rows) in Buchstabenlängen wieder definiert werden müssen.

Radioeingaben TYPE="RADIO"
Radioeingaben stellen eine Vielzahl von möglichen Auswahlmöglichkeiten vor, wovon jedoch nur eine einzige angeklickt werden kann. Man muß sich das in etwa so vorstellen, das man einen kleinen Kreis hat, den man anklicken kann, also auf JA setzen kann. Um dem Browser zu signalisieren, das mehrere Radioeingaben zusammengehören, müssen diese denselben Namen tragen.

Checkboxen TYPE="CHECKBOX"
Checkboxen funktionieren im Prinzip genauso wie Radioeingaben, nur mit dem Unterschied, das sie nicht zusammengehören.

Auswahlmenüs
<Select name="">
<Option>
<Option>
<Option>
<Option>
</select>

 Auch die Auswahlmenüs weichen vom INPUT Tag ab. Hinter die <OPTION> Subtags, werden die einzelnen Auswahlmöglichkeiten dargestellt. Ebenso wie bei den Radioeingaben, kann hier nur eine Auswahl getroffen werden.

Aktions Knöpfe TYPE="BUTTON"
Der VALUE="" hat hier eine besondere Bedeutung. Er gibt an, was auf dem Knopf steht. Natürlich können Sie dieses Feld auch leerlassen, jedoch wird der Benutzer dann einen grauen Knopf sehen, auf dem nichts draufsteht, und dessen Funktion ihm bis zum drücken unerschlossen bleibt. Solche Knöpfe sind vorallem für Scriptsprachen wie Javascript interessant, da es da zum Beispiel bei Javascript den onClick Event-Handler gibt.

Es gibt besondere Knöpfe, die jedoch ein eigenen TYPE Wert haben; Dies sind die Knöpfe zum absenden und zum löschen der eingegebenen Daten:

<INPUT NAME="Abschicken" TYPE="submit" value="Abschicken">
sendet die Daten per ACTION (im Kopf des Formtags) dem Hersteller zu.

<INPUT NAME="Reset" TYPE="reset" value="Löschen">
löscht die durch den Benutzer eingegebenen Werte.


***Auswertung von Forms und Eingabemasken***



Sofern Sie nicht ein CGI Script zur Erfassung der Daten benutzen, werden Sie jedesmal wenn Sie eine Form zugesendet bekommen, verschiedene ASCII Zeichen sehen. Diese beruhen etwa nicht auf Fehleingaben des Benutzers sondern des Internets. Um die Daten wieder lesbar zumachen, brauchen Sie ein TOOL zum entparsen. Als Beispiel wäre da Webparse zu n ennen.


***Kommentare***



<!--(text)//-->
Fügt einen Kommentar in das Dokument ein, das vom Browser nicht gelesen, jedoch durch den User per Texteditor angesehen werden kann. Wird auch zur Einbindung von Scriptsprachen wie Javascript benutzt.




© 1996-1999 bei Wiktor Wodecki