HMTL-Kurzreferenz für Profis

Diese Seite wurde von Stefan Münz übernommen und etwas gekürzt. Ich bitte den Autor um Verzeihung und verweise die Leser dieser Seite auf sein >Original.
Dieses Dokument (Version 6.0) gibt es auch als Buch:

Münz/Nefzger, HTML-Referenz. Franzis-Verlag, Feldkirchen 1996. ISBN 3-7723-7044-6
DM 69.- (im WWW online bestellbar ).

 Grundgerüst HTML-Datei und Dateikopf
 Text und Absätze
 Tabellen
 Verweise und Grafiken
 Formulare
 JavaScript

Hinweis: Diese Kurzreferenz ist tabellarisch aufgebaut. Zur korrekten Darstellung ist ein Browser erforderlich, der Tabellen darstellen kann (z.B. Netscape).

Grundgerüst HTML-Datei und Dateikopf
Grundgerüst <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<html>
<head>
<title>Text für Titelleiste</title>
</head>
<body>
... Datei-Inhalt ...
</body>
</html>

Farben,
Hintergrundgrafiken,
Hintergrundmusik 		Farben:
<body bgcolor=#rgb text=#rgb link=#rgb vlink=#rgb alink=#rgb>
bgcolor = Bildschirmhintergrund
text = Textfarbe
link = Farbe von Verweisen
vlink = Farbe von Verweisen zu besuchten Zielen
alink = Farbe von Verweisen beim Anklicken
r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF

Hintergrundgrafik:
<body background="datei.gif">
Hintergrundgrafik mit Wasserzeicheneffekt:
<body background="datei.gif" bgproperties=fixed>

Hintergrundmusik (zwischen <head> und </head>):
<bgsound src="datei.mid" loop=infinite>
loop= Anzahl Wiederholungen, "infinite" oder Zahl

Meta-Information <base href="http://.../datei.html>
(komplette Url-Angabe der aktuellen Datei für Fehlerfälle)

<isindex>
(Datei als volltext-indexiert deklarieren)
<isindex href="index.idx">
(Datei als volltext-indexiert deklarieren und Indexdatei angeben)

<meta name="Stichwort" content="HTML">
(Persönliche Daten im Dateikopf)
<meta http-equiv="Datum" content="1.1.96">
(Daten im Dateikopf, die vom Server an den aufrufenden Browser übertragen werden)

Diashow:
<meta http-equiv="Refresh" content="(Zahl); url=datei2.html">
content = Anzahl Sekunden bis zur Anzeige der nächsten Datei
url = nächste Datei

Kommentare <!-- Kommentartext -->

<!--
Mehrzeiliger
Kommentartext
// -->

 Seitenanfang

Text und Absätze
Umlaute u. scharfes S ä = &auml;
Ä = &Auml;
ö = &ouml;
Ö = &Ouml;
ü = &uuml;
Ü = &Uuml;
ß = &szlig;

Sonderzeichen Leerzeichen von der Beite n = &ensp;
Leerzeichen von der Beite m = &emsp;
Bindestrich von der Beite n = &endash;
Bindestrich von der Beite m = &emdash;
Leerzeichen ohne Umbruchmöglichkeit dahinter = &nbsp;

HTML-Zeichen
und deren Maskierung 		Zeichen < = &lt;
Zeichen > = &gt;
Zeichen & = &amp;
Zeichen " = &quot;

Absatzschaltung und
Absatzausrichtung 		<p> = neuer Absatz
<p align=left> = folgender Absatz links
<p align=center> = folgender Absatz zentriert
<p align=right> = folgender Absatz rechts

Mehrere Elemente zentriert ausrichten:
<center> ... beliebige Elemente ... </center>

Mehrere Elemente zentriert ausrichten:
<div align=center> ... beliebige Elemente ... </div>

Mehrere Elemente rechts ausrichten:
<div align=right> ... beliebige Elemente ... </div>

<br> = Zeilenumbruch an dieser Stelle
<nobr> ... </nobr> = kein Zeilenumbruch im Bereich
<wbr> ... </wbr> = Zeilenumbruch NOBR-Bereich

Überschriften <h1> ... </h1> = Überschrift 1. Ordnung
<h2> ... </h2> = Überschrift 2. Ordnung
<h3> ... </h3> = Überschrift 3. Ordnung
<h4> ... </h4> = Überschrift 4. Ordnung
<h5> ... </h5> = Überschrift 5. Ordnung
<h6> ... </h6> = Überschrift 6. Ordnung

<h# align=left> ... </h#> = Überschrift links
<h# align=center> ... </h#> = Überschrift zentriert
<h# align=right> ... </h#> = Überschrift rechts
(# = 1-6)

Listen <ul> = Bullet-Liste
<li> = Listeneintrag
</ul> = Ende der Bullet-Liste>

<ul type=square> = Bullet-Liste mit eckigen Bullets
<ul type=circle> = Bullet-Liste mit runden Bullets
<ul type=disc> = Bullet-Liste mit Datei-Bullets

<ol> = numerierte Liste
<li> = Listeneintrag
</ol> = Ende der numerierten Liste>

<ol type=A> = numerierte Liste A,B,C...
<ol type=a> = numerierte Liste a,b,c...
<ol type=I> = numerierte Liste I,II,III...
<ol type=i> = numerierte Liste i,ii,iii
<ol start=(Zahl)> = numerierte Liste mit Startwert

<dir> = Verzeichnis-Liste
<li> = Listeneintrag
</dir> = Ende der Verzeichnis-Liste

Glossare <dl> = Glossar-Anfang
<dt> ... </dl> = zu definierender Ausdruck
<dd> ... </dd> = Definition
</dl> = Glossar-Ende

Andere Absatztypen <pre> ... </pre> = Präformatierter Text
<address> ... </address> = Internet-Adresse
<blockquote> ... </blockquote> = Zitat

Logische
Textauszeichnung 		<strong> ... </strong> = wichtig
<em> ... </em> = emphatisch
<tt> ... </tt> = dicktengleich
<cite> ... </cite> = Zitat
<code> ... </code> = Quellcode
<kbd> ... </kbd> = Terminal
<var> ... </var> = Variable
<samp> ... </samp> = Beispiel
<dfn> ... </dfn> = Definition

Physische
Textauszeichnung 		<b> ... </b> = fett
<i> ... </i> = kursiv
<u> ... </u> = unterstrichen
<blink> ... </blink> = blinkend
<s> ... </s> = durchgestrichen
<big> ... </big> = große Schrift
<small> ... </small> = kleine Schrift
<sub> ... </sub> = tiefgestellt
<sup> ... </sup> = hochgestellt

<basefont size=[1-7]> ... </basefont> = Default-Schriftgröße
<font size=[1-7]> ... </font> = Schriftgröße

<font color=#rgb> ... </font> = Schriftfarbe
(r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF)

<font face=> ... </font> = Schriftart

<marquee> ... </marquee> = Marquee-Effekt (Auto-Scrolling)
<marquee direction=right> ... </marquee> = Scrollrichtung nach rechts
<marquee scrollamount=(Zahl)> ... </marquee> = Pixel zwischen 2 Scrollzuständen
<marquee scrolldelay=(Zahl)> ... </marquee> = Millisekunden zwischen 2 Scrollzuständen
<marquee behavior=slide> ... </marquee> = Textverschlucken ausschalten
<marquee align=top> ... </marquee> = Marquee-Umgebung oben ausrichten
<marquee align=middle> ... </marquee> = Marquee-Umgebung mittig ausrichten
<marquee align=bottom> ... </marquee> = Marquee-Umgebung unten ausrichten
<marquee height=(Zahl)> ... </marquee> = Höhe des Marquee-Bereichs
<marquee hspace=(Zahl)> ... </marquee> = Abstand zum umgebenden Text
<marquee bgcolor=rgb> ... </marquee> = Hintergundfarbe des Marquee-Bereichs
(r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF)

Freies Plazieren von Text Horizontaler Leerraum (z.B. vor einer Textzeile):
<spacer type=horizontal size=(Zahl)> = Leerraum in Pixeln

Vertikaler Leerraum (z.B. vor erster Textzeile eines Absatzes):
<spacer type=vertical size=(Zahl)> = Leerraum in Pixeln

Unsichtbares Bild (Rechteck, das sich wie eine Grafik auswirkt):
<spacer type=block width=(Zahl) height=(Zahl)> = Breite und Höhe in Pixeln

Mehrspaltiger Textfluß <multicol cols=(Zahl)>...Text...</multicol>
(Zahl) = Anzahl Spalten (Text wird automatisch umgebrochen)

Gesamtbreite des mehrspaltigen Textflusses:
<multicol cols=(Zahl) width=(Zahl)>...Text...</multicol>
Angabe in Pixeln oder Prozent

Abstand zwischen den Spalten:
<multicol cols=(Zahl) gutter=(Zahl)>...Text...</multicol>
Angabe in Pixeln

 Seitenanfang

Tabellen

Tabelle definieren <table> = Tabellen-Anfang
<tr> = neue Tabellenzeile
<th> ... </th> = Kopfzelle
<td> ... </td> = Datenzelle
</tr> = Ende der Tabellenzeile
</table> = Tabellen-Ende

Tabellengestaltung
(tabellenglobal) 		im Einleitungs-Tag der Tabelle:
<table border> = Gitternetzlinien anzeigen
<table border=(Zahl)> = Außenrahmendicke in Pixel
<table width=(Zahl)%> = Gesamtbreite prozentual zum Anzeigefenster
<table width=(Zahl)> = Gesamtbreite in Pixel
<table height=(Zahl)%> = Gesamthöhe prozentual zum Anzeigefenster
<table height=(Zahl)> = Gesamthöhe in Pixel
<table cellspacing=(Zahl)> = Gitternetzdicke in Pixel
<table cellpadding=(Zahl)> = Abstand Zelleninhalt von Rand in Pixel
<table bgcolor=rgb> = tabellenweite Hintergrundfarbe
<table bordercolor=rgb> = Rahmen- und Gitternetzfarbe
<table bordercolordark=rgb> = dunkler Teil der Rahmen- und Gitternetzfarbe
<table bordercolorlight=rgb> = heller Teil der Rahmen- und Gitternetzfarbe
(r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF)

Tabellenzellengestaltung im Einleitungs-Tag einer Kopfzelle:
<th align=left> = Kopfzelle links ausrichten
<th align=center> = Kopfzelle zentriert ausrichten
<th align=right> = Kopfzelle rechts ausrichten
<th width=(Zahl)%> = Spaltenbreite proz. zum Anzeigefenster
<th width=(Zahl)> = Spaltenbreite in Pixel
<th height=(Zahl)%> = Zeilenhöhe proz. zum Anzeigefenster
<th height=(Zahl)> = Zeilenhöhe in Pixel
<th valign=top> = Kopfzelle oben ausrichten
<th valign=middle> = Kopfzelle mittig ausrichten
<th valign=bottom> = Kopfzelle unten ausrichten
<th bgcolor=rgb> = Hintergrundfarbe der Kopfzelle
(r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF)

im Einleitungs-Tag einer Datenzelle:
<td align=left> = Datenzelle links ausrichten
<td align=center> = Datenzelle zentriert ausrichten
<td align=right> = Datenzelle rechts ausrichten
<td width=(Zahl)%> = Spaltenbreite proz. zum Anzeigefenster
<td width=(Zahl)> = Spaltenbreite in Pixel
<td height=(Zahl)%> = Zeilenhöhe proz. zum Anzeigefenster
<td height=(Zahl)> = Zeilenhöhe in Pixel
<td valign=top> = Datenzelle oben ausrichten
<td valign=middle> = Datenzelle mittig ausrichten
<td valign=bottom> = Datenzelle unten ausrichten
<td bgcolor=rgb> = Hintergrundfarbe der Datenzelle
(r = Rotwert, hexadezimal 00 bis FF
g = Grünwert, hexadezimal 00 bis FF
b = Blauwert, hexadezimal 00 bis FF)

Tabellenzellen verbinden im Einleitungs-Tag einer Kopfzelle:
<th rowspan=(Zahl)> = (Zahl) Zeilen zu einer verbinden
<th colspan=(Zahl)> = (Zahl) Spalten zu einer verbinden

im Einleitungs-Tag einer Datenzelle:
<td rowspan=(Zahl)> = (Zahl) Zeilen zu einer verbinden
<td colspan=(Zahl)> = (Zahl) Spalten zu einer verbinden

Tabellenüberschriften
Tabellenunterschriften
 <caption valign=top>Tabellenüberschrift</caption>
<caption valign=bottom>Tabellenunterschrift</caption>
<caption valign=top align=center>Tabellenüberschrift zentriert</caption>
<caption valign=top align=center>Tabellenüberschrift rechtsbündig</caption>

 Seitenanfang

Verweise und Grafiken

Lokale Verweise Innerhalb einer Datei:

Anker in Datei setzen: <a name="Bezeichner"> ... </a>
Verweis zu Anker: <a href="#Bezeichner">Verweistext</a>

Zwischen Dateien:

Verweis zu Datei im gleichen Verzeichnis:
<a href="datei.htm">Verweistext</a>

Verweis zu Datei in anderem Verzeichnis (relativ):
<a href="../[pfad]/datei.htm">Verweistext</a>

Verweis zu Datei in anderem Verzeichnis (absolut):
<a href="file://localhost/[lw:/pfad]/datei.htm">Verweistext</a>

Verweis zu Anker innerhalb einer anderen Datei:
<a href="datei.htm#Bezeichner">Verweistext</a>

Weltweite Verweise Schema:
<a href="URL-Typ://Server/Verzeichnis/Datei">Verweistext</a>

URL-Typen http:// = Adressierung von HTML-Dateien im WWW
ftp:// = Adressierung von Dateien auf FTP-Servern
telnet:// = Adressierung von Telnet-Servern
gopher:// = Adressierung von Dateien auf Gopher-Servern
news: = Adressierung von Newsgroups im Usenet
mailto: = Adressierung von persönlichen Email-Adressen

Grafiken Zwischen Dateien:

Grafik im gleichen Verzeichnis:
<img src="datei.gif">

Grafik in anderem Verzeichnis (relativ):
<img src="../[pfad]/datei.gif">

Grafik in anderem Verzeichnis (absolut):
<img src="file://localhost/[lw:/pfad]/datei.gif">

Alternativer Text bei Nichtanzeige der Grafik:
<img src="datei.gif" alt="anzuzeigender Text">

Rahmen um Grafiken:
<img src="datei.gif" border=(Zahl)> = Breite in Pixel

Grafiken ausrichten (Text fließt um die Grafik):
<img src="datei.gif" align=left> = links ausrichten
<img src="datei.gif" align=right> = rechts ausrichten

Abstand zwischen Grafik und Umgebung:
<img src="datei.gif" vspace=(Zahl)> = Abstand oben/unten
<img src="datei.gif" hspace=(Zahl)> = Abstand links/rechts

Grafikbeschriftung (ein Textabsatz!) links neben der Grafik:
<img src="datei.gif" align=top> = Beschriftung oben
<img src="datei.gif" align=middle> = Beschriftung mittig
<img src="datei.gif" align=bottom> = Beschriftung unten

Grafiken skalieren:
<img src="datei.gif" width=(Zahl oder %)> = in Breite dehnen
<img src="datei.gif" height=(Zahl oder %)> = in Höhe dehnen

Verweis-sensitive
Grafiken
 <map name="Bildname">
<area shape="rect" coords="ol,or,ul,ur" href="#datei.html">
<area shape="circle" coords="x,y,r" href="datei.html">
<area shape="polygon" coords="x1,y2,x2,x2,..." href="datei.html">
</map>
<img src="datei.gif" usemap="#Bildname" border=0>

rect = viereckige verweis-sensitive Fläche
cirle = runde verweis-sensitive Fläche
polygon = beliebige vieleckige verweis-sensitive Fläche
ol = Pixel von links für linke obere Ecke
or = Pixel von oben für linke obere Ecke
ul = Pixel von links für rechte untere Ecke
ur = Pixel von oben für rechte untere Ecke
x(1,2).. = Pixel von links
y(1,2).. = Pixel von oben
r = Radius
datei.html = Verweisziele
Bildname = zu vergebender Ankername
#Bildname = Sprung zum Ankernamen

Formulare

Formular definieren <form action="(URL-Adresse)" method=[get od. post]>
... Formular-Elemente und beliebige andere Elemente ... </form>
Eingabefelder Einzeilige Eingabefelder:
<input name="(Bezeichner)" size=#(Zeichen) maxlength=#(Zeichen)">

Extras:
<input ... type=int> = für ganzzahlige Eingaben
<input ... type=float> = für Kommazahlen-Eingaben
<input ... type=date> = für Datums-Eingaben
<input ... type=url> = für URL-Adreßeingaben

Mehrzeilige Eingabefelder:
<textarea="Bezeichner" rows=#(Zeilen) cols=#(Zeichen)>
... evtl.: vorbelegter Text ...
</textarea>

Zeilenumbruch erzwingen:
<textarea="Bezeichner" wrap=virtual>
(wrap=virtual: Zeilenumbrüche werden nicht übertragen)
(wrap=physical: Zeilenumbrüche werden übertragen)

Auswahllisten <select name="(Bezeichner)" size=#(Anzahl)>
  <option> angezeigter Text
  ...
</select>

Extras:
<select ... multiple> = Mehrfachauswahl möglich
<option selected> = per Voreinstellung ausgewählter Eintrag

Radio- und Checkbuttons Radiobuttons:
<input type=radio name="(Bezeichner)" value="(Daten)"> Beschriftung
(mehrere Radio-Buttons mit gleichem Namen bilden eine Gruppe)

Radiobuttons:
<input type=checkbox name="(Bezeichner)" value="(Daten)"> Beschriftung
(mehrere Check-Boxes mit gleichem Namen bilden eine Gruppe)

Ausführungsbuttons <input type=submit value="(Beschriftung)"> = Abschicken
<input type=reset value="(Beschriftung)"> = Verwerfen

Frei definierbare
Buttons 		<input type=button value="(Beschriftung)" onClick=> (JavaScript)

Versteckte Elemente <input hidden value="(Daten)">
(wird vom HTTP-Protokoll mit übertragen)

 Seitenanfang

JavaScript

JavaScript-Code
einbinden 		<!--
<script language="JavaScript"
... JavaScript-Code ...
</script>
<// -->

© 1997  Stefan Münz, muenz@compuserve.com