HTML-Dateien selbst erstellen


HMTL-Kurzreferenz für Profis

Grundgerüst HTML-Datei und Dateikopf
Text und Absätze
Tabellen
Verweise und (Grafik)-Referenzen
Formulare

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.0//EN" "html.dtd">
<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="(Grafikdatei)">

Hintergrundmusik (zwischen <head> und </head>:
<bgsound src="(Musikdatei)">

Kommentare <!-- Kommentartext -->


HTML-Dateien selbst erstellen
Kurzreferenz


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>

<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=(Nummer)> = Startwert der numerierten Liste

<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
<q> ... </q> = Kurzzitat
<lang> ... </lang> = fremdsprachig
<person> ... </person> = Personenname
<acronym> ... </acronym> = Akronym
<abbrev> ... </abbrev> = Abkürzung
<ins> ... </ins> = eingefügt (Revisionsmarkierung)
<del> ... </del> = gelöscht (Revisionsmarkierung)
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> = Schriftgrößenbasis
<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)


HTML-Dateien selbst erstellen
Kurzreferenz


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


HTML-Dateien selbst erstellen
Kurzreferenz


Verweise und (Grafik)-Referenzen

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>

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

Weltweite Verweise Schema:
<a href="Protokoll://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
Spezielle Verweistypen Daten
Grafikreferenzen 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

Grafikreferenzen ab HTML 3.0
Einfache Grafikreferenz:
<fig src="datei.gif">
... beliebige Textelemente...
</fig>

(Textelemente innerhalb fließen um die Grafik.
Referenzieren von Grafiken in anderen Verzeichnissen wie
bei <img src=...>)

Grafiken ausrichten:
<fig src="datei.gif" align=left> ... </fig>
(Grafik am linken Textrand ausrichten)
<fig src="datei.gif" align=bleedleft> ... </fig> (Grafik am linken Fensterrand ausrichten)
<fig src="datei.gif" align=center> ... </fig> (Grafik zentriert ausrichten)
<fig src="datei.gif" align=right> ... </fig> (Grafik am rechten Textrand ausrichten)
<fig src="datei.gif" align=bleedright> ... </fig> (Grafik am rechten Fensterrand ausrichten)

Grafiken beschriften (Grafiküberschrift):
<fig src="datei.gif">
<caption>Überschriftentext</caption>
</fig>

Grafiken beschriften (Bild-Credits):
<fig src="datei.gif">
<credit>&Text für Bild-Credits</credit>
</fig>

Verweis-sensitive
Grafiken (HTML 3.0)
<fig src="datei.gif">
<ul>
<li><a href="ziel.htm" shape="rect x,y,b,h">Text/a>
<li><a href="auchziel.htm" shape="circle x,y,r">Text</a>
<li><a href="feedback.htm" shape="polygon x1,y1,x2,y2,...">Text</a>
</ul>
</fig>

rect = viereckige verweis-sensitive Fläche
cirle = runde verweis-sensitive Fläche
polygon = beliebige vieleckige verweis-sensitive Fläche
x = Pixel von links
y = Pixel von oben
r = Radius
Text = Alternativ zur Grafik anzuzeigender Text


HTML-Dateien selbst erstellen
Kurzreferenz


Formulare

Forular 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>

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 Buttons mit gleichem Namen bilden eine Gruppe

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

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


HTML-Dateien selbst erstellen
Kurzreferenz