HTML-Dateien selbst erstellen


HMTL-Kurzreferenz für Profis

 Grundgerüst HTML-Datei und Dateikopf
 Text und Absätze
 Tabellen
 Verweise und (Grafik)-Referenzen
 Multimedia und Fremdprogramme
 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="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)

Diahow:
<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 -->


 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=(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
<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>

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

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="datei.html" shape="rect ol,or,ul,ur">Text/a>
<li><a href="datei.html" shape="circle x,y,r">Text</a>
<li><a href="datei.html" 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
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
Text = Alternativ zur Grafik anzuzeigender Text
datei.html = Verweisziele

Verweis-sensitive
Grafiken
(Netscape / MS IE
ab Version 2.0)
<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 vergbender Ankername
#Bildname = Sprung zum Ankernamen


 HTML-Dateien selbst erstellen
 Kurzreferenz


Multimedia und Fremdprogramme

Videos Einfache Video-Referenz:
<img dynsrc="datei.avi">

Video-Referenz mit Abspielwiederholung:
<img dynsrc="datei.avi" loop=infinite>
(infinite = Endloswiederholung, ansonsten Wiederholung als Zahlenwert angeben)

Anzeigegröße des Videos:
<img dynsrc="datei.avi" width=(Pixel) height=(Pixel)>

Alternative Grafikanzeige:
<img dynsrc="datei.avi" img src="datei.gif">

Start erst, wenn Video im Anzeigebereich:
<img dynsrc="datei.avi" start=mouseover>

Kontrollbuttons für Anwender:
<img dynsrc="datei.avi" controls>

Sound Einfache Sound-Referenz:
<sound src="datei.wav">

Sound-Referenz mit Abspielwiederholung und Zwischenpausen:
<sound src="datei.wav" loop=infinite delay=(Zahl)>
(infinite = Endloswiederholung, ansonsten Wiederholung als Zahlenwert angeben)
(delay = Zwischenpausen in Sekunden)

Java-Applets Netscape-Syntax:

<applet code=Objektklasse.class width=(Pixel) height=(Pixel) src="datei.java">
  <param name=Name value="Text">
</applet>

HotJava-Syntax:

<app class="Objektklasse" src="datei.java" width=(Pixel) height=(Pixel) ParameterName=Wert>

OLE-Objekte (Windows) <embed src="datei.typ">
(Typ = beliebiger Dateityp, der unter Windows registriert ist)


 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>

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