HTML-Kurzreferenz |
|
Hinweise zur Kurzreferenz |
|
Die HTML-Kurzreferenz ist für Anwender gedacht, die sich bereits mit HTML auskennen und bei der täglichen Arbeit einfach eine Hilfe am Bildschirm oder als Ausdruck haben möchten, ohne viel klicken zu müssen. Wenn Sie in der verkürzten Darstellung auf dieser Seite etwas nicht verstehen oder Probleme mit der Anwendung der Befehle haben, folgen Sie den Verweisen vom Typ Beschreibung.
Die Kurzreferenz erhebt keinen Anspruch auf Vollständigkeit!
In der Kurzreferenz wird folgende Symbolik verwendet:
Attribute, die bestimmte Werte erwarten, werden so dargestellt (Beispiel):
align=left|center|right|justify
Das bedeutet, es ist eine der Angaben align=left, align=right, align=center oder align=justify erlaubt.
Attribute, die selbst zu vergebende Namen oder Daten erwarten, werden so dargestellt (Beispiel):
value="Wert"
Das bedeutet, Sie müssen anstelle von Wert etwas Sinnvolles einsetzen, z.B. value="Salami".
Attribute, die Farbangaben erwarten, werden so dargestellt (Beispiel):
bgcolor=#XXXXXX
Das bedeutet, Sie können entweder eine hexadezimale RGB-Farbangabe wie bgcolor=#3300CC angeben oder einen erlaubten Farbnamen wie bgcolor="blue".
Attribute, die eine URL-Adresse bzw. eine externe Datei erwarten, werden so dargestellt (Beispiel):
src="URL"
Das bedeutet, Sie können eine einfache Dateireferenz wie src="team100.jpg", eine relative Angabe wie src="../bilder/team100.jpg" oder eine absolute URL-Adresse wie src="http://www.teamone.de/team100.jpg" angeben.
Attribute, die einen numerischen Wert erwarten, werden so dargestellt (Beispiel):
border=x
Bei den Kurzbeschreibungen wird angegeben, was der Wert bedeutet bzw. welche Maßeinheiten erlaubt sind.
HTML Grundgerüst |
<html> <head> <title>Titel der Datei</title> </head> <body> Inhalt der Datei </body> </html> |
|
Innerhalb des Dateikopfes einen aussagekräftigen Titel vergeben! Den gesamten sichtbaren Inhalt der Datei zwischen <body> und </body> notieren. Beschreibung |
||
SGML Dokumenttyp |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "URL"> |
|
Wenn verwendet, in der ersten Zeile der HTML-Datei vor dem einleitenden <html>-Tag verwenden. Gewünschte HTML-Version, die in der Datei verwendet wird, angeben. Bei HTML 4.0 sind optionale Angaben möglich: Transitional bedeutet: es werden Scripts und Style-Sheets verwendet. Frameset bedeutet: Datei enthält Frame-Set-Definitionen. "URL" bedeutet: Adresse der HTML-DTD mit angeben Beschreibung |
||
Kommentare | <!-- Dies ist ein Kommentar --> | |
Zum internen Auskommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt. Beschreibung |
||
Adreßbasis | <base href="URL"> | |
Im Dateikopf zwischen <head> und </head> erlaubt. Nur in begründeten Ausnahmefällen verwenden! Beschreibung |
||
Zielfensterbasis | <base target="Name"> | |
Standardzielfenster für Verweise bei Frames, bei Verweisen selbst ist dann keine Angabe zu target= mehr erforderlich. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Autor |
<meta name="author" content="Name"> | |
Urheber-Angabe. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Beschreibung |
<meta name="description" content="Text"> | |
Kurzbeschreibung des Inhalts. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Stichwörter |
<meta name="keywords" content="Wort, Wort, Wort"> | |
Stichwörter zum Inhalt. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Zeitstempel |
<meta name="date" content="1998-04-30T08:49:37+00:00"> | |
Zeitpunkt der Veröffentlichung. Im Beispiel: 1998=Jahr, 04=Monat, 30=Tag, 08=Stunden, 49=Minuten, 37=Sekunden, +00:00=keine Abweichung gegenüber Greenwich-Zeit.
Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angaben: Robots |
<meta name="robots" content="index|noindex|follow|nofollow"> | |
Anweisung an Suchmaschinen: Auslesen erlaubt (index) oder nicht erlaubt (noindex), Verweisen folgen erlaubt (follow) oder nicht erlaubt (nofollow). Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Zeichensatz |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> | |
Mime-Type der Datei angeben (text/html) und verwendeten Zeichensatz (iso-8859-1) - letztere Angabe bezeichnet den Zeichensatz Western Latin 1 (Normalfall für deutsch). Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Script-Sprache |
<meta http-equiv="Content-Script-Type" content="text/javascript"> | |
Mime-Type der Scriptsprache angeben. Im Beispiel: text/javascript für JavaScript. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Style-Sprache |
<meta http-equiv="Content-Style-Type" content="text/css"> | |
Mime-Type der Style-Sheet-Sprache angeben. Im Beispiel: text/css für CSS Style-Sheets. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: von Originaladresse laden |
<meta http-equiv="expires" content="0"> | |
Zeitpunkt angeben, ab dem von Originaladresse geladen werden soll. 0 bedeutet: immer von Originaladresse laden (Proxy-Server ignorieren). Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angabe: Automatische Weiterleitung |
<meta http-equiv="refresh" content="0; URL=http://www.xy.de/"> | |
Angeben, wann und welche Adresse automatisch geladen werden soll. 0 bedeutet: sofort (ansonsten eine Angabe in Sekunden). URL ist eine Datei oder WWW-Adresse, die nach der angegebenen Zeit automatisch geladen werden soll. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Meta-Angaben in separater Datei |
<head profile="URL"> | |
URL ist eine Datei oder WWW-Adresse, in der sich die Meta-Angaben befinden. Beschreibung |
||
Logische Beziehungen |
<link rel="contents" title="Titel" href="URL"> oder <link rev="contents" title="Titel" href="URL"> |
|
Das Attribut rel= steht für Bezug, rev= für Rückbezug. Bei beiden Attributen sind folgende Angaben erlaubt: contents = Inhaltsverzeichnis chapter = Kapitel section = Abschnitt subsection = Unterabschnitt index = Stichwortverzeichnis glossary = Glossar appendix = Anhang copyright = rechtliche Hinweise next = nächste Seite prev = vorherige Seite start = Anfangsseite bookmark = allgemeiner Orientierungspunkt alternate = andere Lesart Das Attribut href= gibt die URL-Adresse oder Datei des Bezugsziels an, title= ist als Beschriftung für Buttons gedacht, wenn Browser dies unterstützen. Im Dateikopf zwischen <head> und </head> erlaubt. Beschreibung |
||
Dateiweite Farben |
<body bgcolor=#XXXXXX text=#XXXXXX link=#XXXXXX vlink=#XXXXXX alink=#XXXXXX> | |
Angaben im einleitenden <body>-Tag notieren. Angaben möglich zu Hintergrundfarbe (bgcolor=), Textfarbe (text=), Verweisen zu noch nicht besuchten Seiten (link=), zu bereits besuchten Seiten (vlink=) und zu gerade angeklickten Verweisen (alink=). Beschreibung |
||
Hintergrundbild (Wallpaper) |
<body background="URL"> | |
Angabe im einleitenden <body>-Tag notieren. GIF- oder JPG-Grafiken angeben. Beschreibung |
||
Unbewegliches Hintergrundbild |
<body background="URL" bgproperties=fixed> | |
Angabe bgproperties=fixed zusätzlich zu background= notieren. Beschreibung |
||
Hintergrundmusik |
Microsoft: <bgsound src="URL" loop=infinite> Netscape: <embed src="URL" loop=true autostart=true hidden=true width=0 height=0> |
|
Microsoft-Angabe zwischen <head> und </head> notieren, Netscape-Angabe hinter dem einleitenden <body>-Tag. Dateien vom Typ WAV, MID oder AU angeben. Beschreibung |
||
Überschriften | <h[1-6]>Text</h[1-6]> | |
Sechs Überschriftenebenen sind erlaubt, also z.B. <h1>Text</h1>. Beschreibung |
||
Überschriften ausrichten |
<h[1-6] align=left|center|right|justify>Text</h[1-6]> | |
Ausrichten mit align=, entweder zentriert (center), rechtsbündig (right), Blocksatz (justify) oder wie voreingestellt linksbündig (left). Beschreibung |
||
Textabsätze | <p>Text</p> | |
End-Tag nicht zwingend, aber empfehlenswert. Beschreibung |
||
Textabsätze ausrichten |
<p align=left|center|right|justify>Text</p> | |
Ausrichten mit align=, entweder zentriert (center), rechtsbündig (right), Blocksatz (justify) oder wie voreingestellt linksbündig (left). Beschreibung |
||
Zeilenumbruch erzwingen |
Text alte Zeile<br>Text neue Zeile | |
Beschreibung | ||
Automatischen Zeilenumbruch verhindern |
<nobr>Text</nobr> | |
Beschreibung | ||
Zeilenumbruch erlauben |
Text<wbr>Text | |
Beschreibung | ||
Numerierte Listen |
<ol> <li>Listeneintrag</li> <li>Listeneintrag</li> </ol> |
|
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert. Beschreibung |
||
Numerierte Listen alphabetisch oder römisch |
<ol type=a|A|i|I> <li>Listeneintrag</li> <li>Listeneintrag</li> </ol> |
|
Numerierungstyp angeben mit type= a für klein alphabetisch A für groß alphabetisch i für klein römisch I für groß römisch Beschreibung (alphabetisch) / Beschreibung (römisch) |
||
Numerierung beeinflussen |
<ol start=x> <li>Listeneintrag</li> <li value=x>Listeneintrag</li> </ol> |
|
Startwert angeben mit start= (Zahl) Neuer Fortzählungswert innerhalb der Liste angeben mit value= (Zahl) Beschreibung |
||
Aufzählungslisten |
<ul> <li>Listeneintrag</li> <li>Listeneintrag</li> </ul> |
|
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert. Beschreibung |
||
Bullet-Typ festlegen |
<ul type=square|circle|disc> <li>Listeneintrag</li> <li>Listeneintrag</li> </ol> |
|
Bullet-Typ angeben mit type=, entweder als Kreis/Punkt (circle), Quadrat (square) oder Dateisymbol (disc). Beschreibung (alphabetisch) / Beschreibung (römisch) |
||
Menülisten |
<menu> <li>Listeneintrag</li> <li>Listeneintrag</li> </menu> |
|
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert. Beschreibung |
||
Verzeichnislisten |
<dir> <li>Listeneintrag</li> <li>Listeneintrag</li> </dir> |
|
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert. Beschreibung |
||
Definitionslisten |
<dl> <dt>Zu definierender Ausdruck</dt> <dd>Definition des Ausdrucks</dd> </dl> |
|
Beschreibung | ||
Listen kompakt darstellen |
<ol compact> <ul compact> <dl compact> |
|
Erlaubt in einleitenden Tags von numerierten Listen, Aufzählungslisten und Definitionslisten. Beschreibung (numerierte Listen) / Beschreibung (Aufzählungslisten) / Beschreibung (Definitionslisten) |
||
Zitate | <blockquote>Text</blockquote> | |
Beschreibung | ||
Zitate mit URL | <blockquote cite="URL">Text</blockquote> | |
Beschreibung | ||
Adressen | <address>Text</address> | |
Beschreibung | ||
Präformatierter Text |
<pre>Text</pre> | |
Beschreibung | ||
Breite eines präformatierten Textes |
<pre width=x>Text</pre> | |
Breite (width=) ist die Anzahl Zeichen pro Zeile. Beschreibung |
||
Ältere Befehle für dicktengleiche Textabsätze |
<xmp>Text</xmp> <listing>Text</listing> <plaintext>Text |
|
Absätze für Beispieltexte (<xmp>), Quellcodes (<listing>) oder generell für Klartext (<plaintext>). Beschreibung |
||
Logische Textauszeichnung |
<em>betont</em> <strong>stark betont</strong> <code>Quellcode</code> <samp>Beispiel</samp> <kbd>Tastatureingabe</kbd> <var>Variable</var> <cite>Zitat</cite> |
|
<dfn>Definition</dfn> | ||
<acronym>Abkürzung</acronym> <q cite="URL">Zitat</q> |
||
Beschreibung | ||
Physische Textauszeichnung |
<b>fett</b> <i>kursiv</i> <tt>dicktengleich</tt> |
|
<u>unterstrichen</u> <strike>durchgestrichen</strike> <big>größer</big> <small>kleiner</small> <sup>hochgestellt</sup> <sub>tiefgestellt</sub> |
||
<s>durchgestrichen</s> | ||
<blink>blinkend</blink> | ||
Beschreibung | ||
Schriftgröße |
<font size=1|2|3|4|5|6|7>Text</font> oder <font size=+1|+2|+3|-1|-2|-3>Text</font> |
|
Schriftgröße (size=) in 7 Stufen absolut oder relativ angeben. Normalgröße ist 3. Beschreibung |
||
Schriftfarbe | <font color=#XXXXXX>Text</font> | |
Beschreibung | ||
Schriftart | <font face="Schriftart_1,Schriftart_2,...">Text</font> | |
Als Schriftart (face=) einen oder auch mehrere Schriftartennamen angeben. Beschreibung |
||
Normal- Schriftgröße |
<basefont size=1|2|3|4|5|6|7>Text | |
Normal-Schriftgröße (size=) in 7 Stufen angeben. Kein End-Tag. Beschreibung |
||
Normal- Schriftfarbe |
<basefont color=#XXXXXX>Text | |
Kein End-Tag. Beschreibung |
||
Normal- Schriftart |
<basefont face="Schriftart_1,Schriftart_2,...">Text | |
Als Schriftart (face=) einen oder auch mehrere Schriftartennamen angeben. Kein End-Tag. Beschreibung |
||
Bereich mit mehreren Elementen |
<div align=left|center|right|justify>verschiedene HTML-Elemente</div> | |
Gemeinsame Ausrichtung (align=) zentriert (center), rechtsbündig (right), Blocksatz (justify) oder wie voreingestellt linksbündig (left) möglich. Beschreibung |
||
Zentrierter Bereich mit mehreren Elementen |
<center>verschiedene HTML-Elemente</center> | |
Beschreibung | ||
Trennlinien |
Text davor <hr> Text danach |
|
Beschreibung | ||
Trennlinien gestalten |
<hr width=x size=x align=left|center|right> |
|
<hr color=#XXXXXX> |
||
Nichtschattierung (noshade), Liniendicke (size=) in Pixeln, Linienbreite (width=) in Pixeln oder Prozent, Ausrichtung (align=) linksbündig (left), rechtsbündig (right) oder wie voreingestellt zentriert (center). Farbige Trennlinie (color=). Beschreibung (Nichtschattierung) / Beschreibung (Breite/Höhe) / Beschreibung (Ausrichtung) / Beschreibung (Farbe). |
||
Mehrspaltiger Textfluß |
<multicol cols=x width= gutter=> Inhalt </multicol> |
|
Anzahl Spalten angeben mit cols= (Zahl). Auf Wunsch Breite aller Spalten in Pixeln oder Prozent bestimmen mit width= und Spaltenabstand in Pixeln gutter=. Beschreibung |
||
Abstände |
<spacer type=vertical|horizontal size=x> <spacer type=block width=x height=x align=left|right> |
|
Vertikalen Abstand in Pixeln durch type=vertical bestimmen, horizontalen Abstand (Einrückung) durch type=horizontal, in beiden Fällen mit size= den Abstand in Pixeln angeben. Unsichtbares Bild (Block) erzeugen mit type=block, dabei Breite (width=) und Höhe (height=) des Blocks in Pixeln angeben, und mit align= Ausrichtung bestimmen als links mit Textumfluß rechts (left) oder rechts mit Textumfluß links (right). Beschreibung |
||
Lauftexte (Marquee) |
<marquee>Text</marquee> | |
Beschreibung | ||
Lauftexte (Marquee) gestalten |
<marquee direction=left|right>Text</marquee> <marquee scrollamount=x scrolldelay=x>Text</marquee> <marquee behavior=alternate>Text</marquee> <marquee align=top|middle|bottom>Text</marquee> <marquee height=x hspace=x>Text</marquee> |
|
Laufrichtung (direction=) bestimmen nach rechts nach links (right) oder wie voreingestellt von links nach rechts (left). Laufgeschwindigkeit einstellen mit den Angaben scrollamount= und scrolldelay=. Hin- und herwechselnder Lauftext durch behavior=alternate. Ausrichtung zum umgebenden Text mit align=. Abstand zur Umgebung mit hspace= und Höhe mit height=. Beschreibung |
||
Aufbau einer Tabelle |
<table border> <tr> <th>Kopfzelle</th> <th>Kopfzelle</th> </tr> <tr> <td>Datenzelle</td> <td>Datenzelle</td> </tr> </table> |
|
Tabelle mit sichtbaren Gitternetzlinien durch Angabe border im einleitenden Tabellen-Tag, durch Weglassen der Angabe wird die Tabelle eine blinde Tabelle. Beschreibung (Tabellen-Tag) / Beschreibung (Zeilen und Spalten definieren). |
||
Spalten vordefinieren |
<table border> <colgroup> <col> <col width=x span=x> </colgroup> <tr> <td>Zelle</td> <td>Zelle</td> </tr> </table> |
|
Mit <col>-Tags so viele Spalten vordefinieren wie die Tabelle hat. Spaltenbreite auf Wunsch mit width= angeben, und zwar in Pixeln, Prozent oder Relation zu anderen Spalten (z.B. 4* = 4 Anteile an der Summe so definierter Anteile in den anderen Spalten). Spalte, die sich über mehrere Spalten erstreckt, mit span= (Anzahl Spalten) definieren. Beschreibung. |
||
Kopf, Körper und Fuß einer Tabelle |
<table border> <thead> <!--Tabellenzeilen--> </thead> <tbody> <!--Tabellenzeilen--> </tbody> <tfoot> <!--Tabellenzeilen--> </tfoot> </table> |
|
Beschreibung. | ||
Außenrahmen, Gitternetzlinien und Zellenabstand |
<table border=x cellspacing=x cellpadding=x> | |
Rahmendicke (border=) in Pixeln angeben. Dicke der Gitternetzlinien (cellspacing=) in Pixeln angeben. Randabstand von Zelleninhalt zum Zellenrand (cellpadding=) in Pixeln angeben. Beschreibung (Außenrahmendicke) / Beschreibung (Gitternetzliniendicke) / Beschreibung (Randinnenabstand). |
||
Regeln für Außenrahmen |
<table border frame=box|void|above|below|hsides|vsides|lhs|rhs> | |
Rahmenregeln (frame=) bestimmen als rundum (box), nur oben (above), nur unten (below), nur oben und unten (hsides), nur links und rechts (vsides), nur links (lhs) oder nur rechts (rhs). Beschreibung. |
||
Regeln für Gitternetzlinien |
<table border rules=none|rows|cols|groups|all> | |
Gitternetzregeln (rules=) bestimmen als keine (none), nur zwischen Zeilen (rows), nur zwischen Spalten (cols), nur zwischen Kopf, Körper und Fuß (groups), oder überall wie voreingestellt (all). Beschreibung. |
||
Breite und Höhe |
<table border width=x height=x> <tr height=x> <th width=x height=x>Zelle</th> <td width=x height=x>Zelle</td> </tr> </table> |
|
Breite (width=) und Höhe (height=) für gesamte Tabelle im einleitenden <table>-Tag, Zeilenhöhe im einleitenden <tr>-Tag oder in einem <th>/<td>-Tag (gilt dann für gesamte Zeile) angeben. Spaltenbreite in einem <th>/<td>-Tag (gilt dann für alle Zellen dieser Spalte) angeben. Angaben in Pixel oder Prozent erlaubt. Beschreibung (gesamte Tabelle) / Beschreibung (Spaltenbreite) / Beschreibung (Zeilenhöhe). |
||
Zeilenumbruch in Zellen verhindern |
<th nowrap> <td nowrap> |
|
Beschreibung | ||
Zellen horizontal ausrichten |
<th align=left|center|right> <td align=left|center|right> |
|
Horizontale Ausrichtung (align=) linksbündig (left), rechtsbündig (right) oder zentriert (center). Beschreibung |
||
Zellen vertikal ausrichten |
<th valign=top|middle|bottom> <td valign=top|middle|bottom> |
|
Vertikale Ausrichtung (valign=) obenbündig (top), untenbündig (bottom) oder mittig (middle). Beschreibung |
||
Zellen verbinden |
<th colspan=x> <td rowspan=x> <th colspan=x> <td rowspan=x> |
|
Spaltenweise verbinden colspan=) über so viele Spalten wie angegeben, zeilenweise verbinden rowspan=) über so viele Zeilen wie angegeben. Bei Definition nachfolgender Zeilen berücksichtigen. Beschreibung |
||
Hintergrundfarbe |
<table bgcolor=#XXXXXX> <tr bgcolor=#XXXXXX> <th bgcolor=#XXXXXX> <td bgcolor=#XXXXXX> |
|
Beschreibung (gesamte Tabelle) / Beschreibung (Zeilen und Zellen) | ||
Rahmenfarbe |
<table bordercolor=#XXXXXX> <table bordercolordark=#XXXXXX bordercolorlight=#XXXXXX> |
|
Einheitliche Rahmenfarbe mit bordercolor=, Schatteneffekt mit bordercolordark= (dunkle Farbe) und bordercolorlight= (helle Farbe) Beschreibung |
||
Hintergrundbild |
<table background="URL"> <tr background="URL"> <th background="URL"> <td background="URL"> |
|
GIF- oder JPG-Grafik angeben. Beschreibung |
||
Tabellenüberschrift Tabellenunterschrift |
<table border> <caption align=top|bottom|left|right>Text</caption> <tr> <td>Zelle</td> <td>Zelle</td> </tr> </table> |
|
Tabellenüberschrift (align=top), Tabellenunterschrift (align=bottom), seitliche Tabellenüberschrift links (align=left) oder seitliche Tabellenüberschrift rechts (align=right). Beschreibung |
||
Tabellen ausrichten |
<table border align=left|center|right hspace=x vspace=x> | |
Ausrichtung (align=) linksbündig mit Textumfluß rechts (left), rechtsbündig mit Textumfluß links (align=right) oder zentriert (center). Abstand zu umfließendem Text daneben (hspace=) oder zu Text oberhalb/unterhalb (vspace=) in Pixeln angeben. Beschreibung (Ausrichtung) / Beschreibung (Abstand) |
||
Verweisanker definieren |
<a name="Name">Text</a> | |
Beschreibung | ||
Verweis definieren |
<a href="URL">Verweistext</a> | |
URL kann sein: Anker in der gleichen Datei (#Ankername) Andere Datei (datei.htm) Andere Datei in anderem Verzeichnis (../verzeichnis/datei.htm) WWW-Adresse (http://...) Gopher-Adresse (gopher://...) FTP-Adresse (ftp://...) Telnet-Adresse (telnet://...) Newsgroup-Adresse (news:...) Absolute lokale Adresse (file://...) Beschreibung (Verweis zu Anker) / Beschreibung (Verweis zu Datei) / Beschreibung (Verweis zu anderem Verzeichnis) / Beschreibung (Verweis zu WWW-Adresse) / Beschreibung (Verweis zu FTP-Adresse) / Beschreibung (Verweis zu Gopher-Adresse) / Beschreibung (Verweis zu Telnet-Adresse) / Beschreibung (Verweis zu Newsgroup-Adresse) / Beschreibung (Verweis zu absoluter lokaler Adresse) |
||
E-Mail-Verweise |
<a href="mailto:name@domain.xy">Verweistext</a> <a href="mailto:name@domain.xy?subject=Thema">Verweistext</a> <a href="mailto:name@domain.xy?cc=name2@domain.xy">Verweistext</a> <a href="mailto:name@domain.xy?bcc=name2@domain.xy">Verweistext</a> <a href="mailto:name@domain.xy?body=Text">Verweistext</a> <a href="mailto:name@domain.xy?Zusatz1&Zusatz2">Verweistext</a> |
|
Auf Wunsch vorbelegtes Thema (subject=), sichtbaren Kopienempfänger (cc=), unsichtbaren Kopienempfänger (bcc=) oder vorbelegten Text (body=) angeben. Mehrere solcher Zusatzangaben kombinieren wie im Schema mit ?Zusatz1&Zusatz2. Angaben mit cc=, bcc= und subject= kein HTML-Standard, ab Netscape 2.x und MS IE 4.x, body= und Kombinieren von Angaben kein HTML-Standard, ab Netscape und MS IE 4.x. Beschreibung |
||
Mime-Type des Verweisziels |
<a href="URL" type="Typ/Subtyp">Verweistext</a> | |
Beschreibung | ||
Logischer Bezug des Verweisziels |
<a href="URL" rel="contents">Verweistext</a> <a href="URL" rev="contents">Verweistext</a> |
|
Das Attribut rel= steht für Bezug, rev= für Rückbezug. Bei beiden Attributen sind folgende Angaben erlaubt: contents = Inhaltsverzeichnis chapter = Kapitel section = Abschnitt subsection = Unterabschnitt index = Stichwortverzeichnis glossary = Glossar appendix = Anhang copyright = rechtliche Hinweise next = nächste Seite prev = vorherige Seite start = Anfangsseite bookmark = allgemeiner Orientierungspunkt alternate = andere Lesart Beschreibung |
||
Sprache und Zeichensatz des Verweisziels |
<a href="URL" hreflang="de" charset="iso-8859-1">Verweistext</a> |
|
Sprache als 2-Zeichen-Kürzel bei hreflang=, Zeichensatz bei charset= angeben. Beschreibung |
||
Tabulator- Reihenfolge |
<a href="URL" tabindex=x>Verweistext</a> | |
Niedrigste Nummer wird zuerst angesprungen, höchste zuletzt. Beschreibung |
||
Tastenkürzel | <a href="URL" accesskey="z">Verweistext</a> | |
Bei accesskey= Buchstaben angeben, über den der Verweis direkt anwählbar ist. Beschreibung |
||
Grafiken einbinden | <img src="URL"> | |
GIF- oder JPG-Grafiken verwenden.
Beschreibung |
||
Alternativer Text | <img src="URL" alt="Text"> | |
Text (alt=) angezeigt, wenn die Grafik nicht darstellbar ist.
Beschreibung |
||
Breite und Höhe der Grafik |
<img src="URL" width=x height=x> | |
Pixel oder Pozent zum Anzeigefenster der Breite (width=) und/oder Höhe (height=) angeben. Diese Angaben tragen zu einem besseren Seitenaufbau bei!
Beschreibung |
||
Rahmen um Grafik |
<img src="URL" border=x> | |
Pixel der Rahmendicke (border) angeben.
Beschreibung |
||
Namen für Grafik |
<img src="URL" name="Name"> | |
Interessant z.B. für JavaScript ( images-Objekt).
Beschreibung |
||
Grafik beschriften | <img src="URL" align=top|middle|bottom>Text | |
Ausrichtung des nachfolgenden Textes (align=) obenbündig (top), mittig (middle) oder untenbündig (bottom).
Beschreibung |
||
Grafik beschriften |
<img src="URL" align=texttop|absmiddle|absbottom|baseline>Text | |
Ausrichtung des nachfolgenden Textes (align=) oben zum kleinsten folgenden Text (texttop), absolut mittig (absmiddle), untenbündig zum kleinsten folgenden Text (absbottom) oder normal untenbündig (baseline).
Beschreibung |
||
Text um Grafik fließen lassen |
<img src="URL" align=left|right>Text | |
Ausrichtung der Grafik (align=) linksbündig (left) mit rechts darum fließendem Text, oder rechtsbündig (right) mit links darum fließendem Text.
Beschreibung |
||
Abstand zwischen Grafik und Umgebung |
<img src="URL" hspace=x vspace=x>Text | |
Abstand zwischen Grafik und Umgebung in Pixeln. Abstand nach oben bzw. unten (vspace=) und/oder nach links bzw. rechts (hspace=).
Beschreibung |
||
Grafik in zwei Versionen laden |
<img src="URL" lowsrc="URL">Text | |
Grafik mit kleinerer Bytezahl (lowsrc=) zuerst laden, dann normale Grafik (src=). Beide Grafiken sollten die gleichen Abmessungen haben.
Beschreibung |
||
Grafik als Verweis |
<a href="URL"><img src="URL" border=0></a> | |
Ohne border=0 wird ein Rahmen um die Grafik gezeichnet, und zwar in der Farbe für Verweise.
Beschreibung |
||
Verweis-sensitive Grafik |
<img src="URL" usemap="#Mapname"> <map name="Mapname"> <area shape=rect|circle|polygon coords=x,x,x,[x]... href="URL"> </map> |
|
Grafik muß das Attribut usemap= enthalten, um auf den Map-Bereich zu verweisen. Der Map-Bereich muß mit name= unter diesem Namen ein Verweisziel darstellen. shape=rect definiert einen viereckigen Bereich innerhalb der Grafik, z.B. 10,20,90,100 (10 ist Anfang Pixel von links, 20 Anfang oben, 90 Ende links, 100 Ende unten). shape=circle definiert einen Kreis-Bereich innerhalb der Grafik, z.B. 100,150,50 (100 ist Kreismittelpunkt in Pixeln von links, 150 Kreismittelpunkt von oben, 50 der Kreisradius). shape=polygon definiert ein Vieleck innerhalb der Grafik, z.B. 10,20,40,30,300,200 (10 ist erste Ecke links in Pixeln, 20 erste Ecke oben, 40 zweite Ecke links, 30 zweite Ecke oben, 300 dritte Ecke links, 200 dritte Ecke oben). Usw. bebliebig viele Ecken. href= enthält das Verweisziel. Beschreibung |
||
Formular definieren |
<form action="mailto:name@domain.xy" method=post enctype="text/plain"> <!-- Formularelemente --> </form> oder <form action="cgi-prog" method=get|post> <!-- Formularelemente --> </form> |
|
enctype="text/plain" wird nicht von allen Browsern interpretiert. mailto-Formulare funktionieren bei Browsern ohne Mail-Client nicht. Beschreibung |
||
Zielfenster für Server-Antwort |
<form ... target="Fenstername"> | |
Bei Verwendung von Frames und in Verbindung mit CGI-Scripts interessant. Beschreibung |
||
Einzeilige Eingabefelder |
<input size=x maxlength=x name="Elementname"> | |
Anzeigebreite mit size= (Anzahl Zeichen) bestimmen, auf Wunsch maximale Eingabelänge mit maxlength= (Anzahl Zeichen). Name für JavaScript-Verarbeitung interessant. Beschreibung |
||
Einzeilige Eingabefelder Textvorbelegung |
<input size=x maxlength=x name="Elementname" value="Text"> | |
Textvorbelegung mit value= bestimmen. Beschreibung |
||
Eingabefelder für Paßwort |
<input type=password size=x maxlength=x name="Elementname"> | |
Blindeingabe mit type=password bestimmen. Beschreibung |
||
Mehrzeilige Eingabefelder |
<textarea cols=x rows=x name="Elementname"> Optionale Textvorbelegung </textarea> |
|
Breite des Eingabebereichs mit cols= (Anzahl Zeichen) angeben, Höhe mit rows= (Anzahl Zeilen). Name für JavaScript-Verarbeitung interessant. Wenn Textvorbelegung gewünscht, zwischen Einleitungs- und End-Tag notieren. Beschreibung (mehrzeilige Eingabefelder) / Beschreibung (mit Textvorbelegung) |
||
Mehrzeilige Eingabefelder Umbruchkontrolle |
<textarea wrap=virtual|physical cols=x rows=x name="Elementname"> </textarea> |
|
Automatischen Zeilenumbruch bei Eingabe mit wrap=virtual erlauben. Beschreibung |
||
Eingabefelder nur lesen |
<input readonly value="Text nur lesbar" size=x maxlength=x name="Elementname"> oder <textarea readonly cols=x rows=x name="Elementname"> Text nur lesbar </textarea> |
|
Attribut readonly für Nur-Lesen notieren. Beschreibung (einzeilige Eingabefelder) / Beschreibung (mehrzeilige Eingabefelder) |
||
Auswahlliste |
<select name="Elementname"> <option> Eintrag <option> anderer Eintrag </select> |
|
Beschreibung | ||
Auswahlliste Mehrfachauswahl |
<select multiple> | |
Attribut multiple für Mehrfachauswahl notieren. Beschreibung |
||
Auswahlliste mit Vorauswahl |
<select name="Elementname"> <option selected> Eintrag <option> anderer Eintrag </select> |
|
Attribut selected in gewünschtem <option>-Tag notieren. Beschreibung |
||
Absendewert von Listeneinträgen |
<select name="Elementname"> <option value="Wert"> Eintrag <option value="Wert"> anderer Eintrag </select> |
|
Mit value= den internen Wert für die Übertragung bestimmen. Beschreibung |
||
Menüstruktur |
<select> <optgroup> <option> Eintrag </optgroup> </select> |
|
So viele <optgroup>-Untermenüs notieren wie gewünscht. Verschachtelung möglich. Beschreibung |
||
Radiobuttons | <input type=radio name="Name" value="Wert"> Text | |
Gemeinsame Namen für alle zusammengehörigen Radiobuttons vergeben. Beschreibung |
||
Checkboxen | <input type=checkbox name="Name" value="Wert"> Text | |
Gemeinsame Namen für alle zusammengehörigen Checkboxen vergeben. Beschreibung |
||
Einträge vorselektieren |
<input type=radio checked name="Name" value="Wert"> Text <input type=checkbox checked name="Name" value="Wert"> Text |
|
Attribut checked für Vorauswahl verwenden. Beschreibung |
||
Klickbuttons (1) | <input type=button name="Name" value="Beschriftung" onClick="..."> | |
Sinnvoll zum Ausführen von JavaScript-Code bei onClick=. Beschreibung |
||
Klickbuttons (2) |
<button type=button name="Name" value="Beschriftung" onClick="..."> <img src="URL"> </button> |
|
Sinnvoll z.B. um Grafiken als Button-Beschriftung zu benutzen. Beschreibung |
||
Dateibuttons | <input type=file name="Name" maxlength=x accept="MimeType"> | |
Wichtig: bei <form>-Tag die Angabe enctype="multipart/form-data" notieren. Dateigröße mit maxlength= (Bytes) begrenzen. Dateityp mit accept= eingrenzen, z.B. accept="text/*" Beschreibung |
||
Elemente gruppieren |
<fieldset> <legend>Gruppenüberschrift</legend> <!-- Formularelemente --> </fieldset> |
|
Beschreibung | ||
Label für Elemente |
<label for="idName">Beschriftung:</label> <input size=40 id="idName"> |
|
Beschreibung | ||
Tabulator- Reihenfolge |
<input ... tabindex=x> | |
Niedrigste Nummer wird zuerst angesprungen, höchste zuletzt. Beschreibung |
||
Tastenkürzel | <input ... accesskey="z"> | |
Bei accesskey= Buchstaben angeben, über den das Element direkt anwählbar ist. Beschreibung |
||
Elemente ausgrauen |
<input ... disabled> | |
Beschreibung | ||
Buttons zum Absenden/ Abbrechen |
<input type=submit value="Beschriftung"> <input type=reset value="Beschriftung"> |
|
type=submit schickt das Formular ab, type=reset löscht alle Eingaben. Beschreibung |
||
Grafischer Absendebutton |
<input type=image src="URL"> | |
Beschreibung | ||
Frame-Sets und Frames definieren |
<frameset rows|cols="x,*"> <frame src="URL" name="Fenstername"> </frameset> |
|
Anzeigefenster in Spalten (cols=) oder Zeilen (rows=) aufteilen. Zwei oder mehrere Teile in Pixeln oder Prozent angeben, durch Kommata getrennt. Wildcard * erlaubt. Verschachtelung von Framesets möglich. Für jedes entstehende Segment ein <frame>-Tag notieren. Angabe zur Datei, die darin angezeigt werden soll, mit src= möglich. Namen für Frame-Fenster vergeben, damit Verweise zu anderen Frames möglich sind. Beschreibung |
||
Noframes-Bereiche |
<noframes> Inhalt </noframes> |
|
In Dateien notieren, die in einem Frame-Set angezeigt werden (HTML4.0). Bei Netscape als "Alternativtext" für Datei mit Frame-Set-Definitionen gedacht. Beschreibung |
||
Scrollbars in Frames |
<frame src="URL" name="Name" scrolling=yes|no|auto> | |
Scrollbars immer anzeigen (yes), nie anzeigen (no) oder wie voreingestellt automatisch (auto). Beschreibung |
||
Abstand Rahmen zu Fensterinhalt |
<frame src="URL" name="Name" marginwidth=x marginheight=x> | |
Abstand Inhalt links und rechts (marginwidth=) bzw. oben und unten (marginheight=) in Pixeln angeben. Beschreibung |
||
Unveränderbare Fenstergröße |
<frame src="URL" name="Name" noresize> | |
Alle benachbarten Frames sind durch noresize betroffen. Beschreibung |
||
Rahmendicke/ unsichtbare Rahmen |
<frame src="URL" name="Name" frameborder=x> | |
<frameset ... border=x frameborder=x framespacing=x> | ||
Browser interpretieren diese Angaben anders als HTML-Standard. Für unsichtbare Rahmen alle drei Werte auf 0 setzen. Beschreibung |
||
Farbige Fensterrahmen |
<frameset bordercolor=#XXXXXX> | |
Beschreibung | ||
Verweise bei Frames |
<a href="URL" target="Fenstername">Verweistext</a> |
|
Entweder <frame name=>-Fensternamen angeben oder einen der reservierten Namen: target="_blank" für Verweisziel in neuem Fenster target="_parent" für Verweisziel in übergeordnetem Fensterzustand target="_top" für Verweisziel im gesamten Anzeigefenster Beschreibung (Verweis zu anderem Fenster) / Beschreibung (Verweis zum Beenden des Framesets) |
||
Eingebettete Frames |
<iframe src="URL" name="Name"> Inhalt bei Nichtanzeige </iframe> |
|
Beschreibung | ||
Eigenschaften eingebetteter Frames |
<iframe ... width=x height=x hspace=x vspace=x align=left|center|right scrolling=yes|no|auto> Inhalt bei Nichtanzeige </iframe> |
|
Breite (width=) und Höhe (height=) in Pixeln oder Prozent angeben. Mit align=left linksbündig mit rechtem Textumfluß ausrichten und mit align=right umgekehrt. Abstand oben und unten (vspace=) bzw. Abstand links und rechts (hspace=) in Pixeln angeben. Mit scrolling= Scrollbars erzwingen (yes), verhindern (no) oder wie voreingestellt (auto) definieren. Beschreibung |
||
Daten als Objekt einbinden |
<object data="URL" type="MimeType"> Alternativer Inhalt </object> |
|
Beschreibung | ||
Verweis-sensitive Grafiken als Objekt |
<object data="URL" shapes> <a href="URL" shape=rect|circle|polygon coords="x[x,...]">Verweistext</a> </object> |
|
Angaben zu shape= und coords= wie bei verweis-sensitiven Grafiken. Beschreibung |
||
Java-Applets als Objekt |
<object classid="java:Classname" codebase="URL" codetype="MimeType"> <param name="Name" value="Wert"> </object> |
|
Bei classid= class-Dateiname ohne Endung angeben, codebase= nur verwenden, wenn Applet in anderem Verzeichnis liegt. Code-Typ ist normalerweise application/java-vm. Beschreibung |
||
ActiveX als Objekt |
<object classid="clsid:xxxxxx" data="URL" codebase="URL"> </object> |
|
Bei classid= Registriernummer des ActiveX-Controls angeben, bei data= die Datei. codebase= nur verwenden, wenn Control in anderem Verzeichnis liegt. Beschreibung |
||
Rahmen um Objekt |
<object ... border=x> </object> |
|
Pixel der Rahmendicke (border) angeben. Beschreibung |
||
Namen für Objekt |
<object ... name="Name"> </object> |
|
Interessant z.B. für JavaScript. Beschreibung |
||
Breite und Höhe des Objekts |
<object ... width=x height=x> </object> |
|
Pixel oder Pozent zum Anzeigefenster der Breite (width=) und/oder Höhe (height=) angeben. Diese Angaben tragen zu einem besseren Seitenaufbau bei! Beschreibung |
||
Objekt beschriften |
<object ... align=top|middle|bottom>Text </object> |
|
Ausrichtung des nachfolgenden Textes (align=) obenbündig (top), mittig (middle) oder untenbündig (bottom). Beschreibung |
||
Objekt beschriften |
<object ... align=texttop|absmiddle|absbottom|baseline>Text </object> |
|
Ausrichtung des nachfolgenden Textes (align=) oben zum kleinsten folgenden Text (texttop), absolut mittig (absmiddle), untenbündig zum kleinsten folgenden Text (absbottom) oder normal untenbündig (baseline). Beschreibung |
||
Text um Objekt fließen lassen |
<object ... align=left|right>Text </object> |
|
Ausrichtung des Objekts (align=) linksbündig (left) mit rechts darum fließendem Text, oder rechtsbündig (right) mit links darum fließendem Text. Beschreibung |
||
Abstand zwischen Objekt und Umgebung |
<object ... hspace=x vspace=x> </object> |
|
Abstand zwischen Objekt und Umgebung in Pixeln. Abstand nach oben bzw. unten (vspace=) und/oder nach links bzw. rechts (hspace=). Beschreibung |
||
Meldung bei Ladevorgang |
<object ... standby="Meldungstext"> </object> |
|
Beschreibung | ||
Objektinstanz nur auf Wunsch |
<object ... declare> </object> |
|
Beschreibung | ||
Multimedia (Netscape) |
<embed src="URL"> | |
Beschreibung | ||
Multimedia (Netscape) weitere Angaben |
<embed src="URL" width=x height=x hspace=x vspace=x align=left|right|top|middle|bottom type="MimeType" pluginurl="URL" pluginspage="URL" hidden=true|false autostart=true|false loop=true|false palette=foreground|background> |
|
Angaben zu Breite, Höhe, Ausrichtung und Abstand zu Umgebung wie bei Objekten und Grafiken. Bei pluginurl= Download-Adresse eines Plugins möglich, bei pluginspage= eine WWW-Seite mit Installationshinweisen zum Plugin. Angabe hidden= für Anzeige ja/nein (true/false), autostart= für Start bei Laden ja/nein, loop= für Endloswiederholung ja/nein und palette= für anwenderspezifische Farben bei Anzeige eines Plugins. Beschreibung |
||
Alternativer Inhalt |
<noembed>Inhalt</noembed> <embed src="URL"> | |
Beschreibung | ||
Videos (Microsoft) |
<img dynsrc="URL"> |
|
AVI-Datei angeben. Beschreibung |
||
Videos (Microsoft) Weitere Angaben |
<img dynsrc="URL" width=x height=x loop=infinite|x src="URL" start=mouseover|fileopen controls> |
|
Breite und Höhe wie üblich. Mit loop=infinite Endloswiederholung (oder eine Anzahl Wiederholungen angeben) möglich. Mit src= eine Grafik angeben, falls Video nicht anzeigbar. Mit start=onmouseover Abspielbeginn bei Mausberührung, sonst bei Dateistart (fileopen). Attribut controls für sichtbare Steuerelemente. Beschreibung |
||
Java-Applets einbinden |
<applet code="URL" codebase="URL" alt="Text"> <param name="Name" value="Wert"> </applet> |
|
Bei code= class-Datei angeben, Dateiendung kann entfallen. codebase= verwenden, wenn sich das Applet in einem anderen Verzeichnis befindet. Alternativer Text bei Nichtanzeige mit alt= möglich. Beschreibung |
||
Java-Applets Weitere Angaben |
<applet code="URL" codebase="URL" width=x height=x align=left|right|top|middle|bottom hspace=x vspace=x archive="URL" mayscript> </applet> |
|
Angaben zu Breite, Höhe, Ausrichtung und Abstand zu Umgebung wie bei Objekten und Grafiken.
archive= verwenden, wenn Applet Teil einer ZIP-Datei ist. mayscript erlaubt JavaScript, auf das Applet einzuwirken. Beschreibung |
||
Layer definieren |
<layer id="Name" top=x left=x width=x height=x> Inhalt </layer> |
|
Attribut id= vergeben, falls Layer mit JavaScript dynamisch behandelt werden soll. Um Layer fest zu positionieren, linke obere Ecke in Pixeln mit left= (links) und top= angeben. Auf Wunsch Breite (width=) und Höhe (height=) bestimmen. Beschreibung |
||
Inline-Layer definieren |
<ilayer>Inhalt</ilayer> | |
Erzeugt keinen eigenen Block. Sonst gleiche Angaben möglich wie bei <layer>. Beschreibung |
||
Anzeigebereich beschneiden |
<layer clip="x1,x2,x3,x4">Inhalt</layer> oder <layer clip="xb,xh">Inhalt</layer> |
|
x1 = Pixel für links. x2 = Pixel für oben. x3 = Pixel für rechts. x4 = Pixel für unten. xb = Pixel für Breite. xh = Pixel für Höhe. Beschreibung |
||
Externe Datei | <layer src="URL">Inhalt</layer> | |
Beschreibung | ||
Hintergrundfarbe | <layer bgcolor=#XXXXXX>Inhalt</layer> | |
Beschreibung | ||
Hintergrundbild | <layer background="URL">Inhalt</layer> | |
GIF oder JPG angeben. Beschreibung |
||
Schichtposition mit Namen |
<layer above="Name" below="Name">Inhalt</layer> | |
Wenn zuvor definierter Layer über dem aktuellen liegen soll, dessen id-Namen bei above= angeben. Wenn zuvor definierter Layer unter dem aktuellen liegen soll, dessen id-Namen bei below= angeben. Beschreibung |
||
Schichtposition mit Nummern |
<layer z-index=x>Inhalt</layer> | |
Layer mit höchster Nummer überdeckt alle anderen, Layer mit niedrigster Nummer wird von allen anderen überdeckt. Beschreibung |
||
Sichtbarkeit | <layer visibility=hide|show|inherit>Inhalt</layer> | |
Sichtbarkeit im Hinblick auf dynamische Behandlung mit JavaScript interessant. Versteckter Layer mit hide, sichtbarer Layer mit show, Layer, der Sichtbarkeit vom übergeordneten Layer bei Verschachtelung erbt mit inherit. Beschreibung |
||
Zentrale Style-Definitionen |
<head> <style type="text/css"> <!-- Style-Sheet-Angaben //--> </style> </head> |
|
Beschreibung | ||
Lokale Style-Definitionen |
<span style=" Style-Sheet-Angaben">Text</span> | |
Beschreibung | ||
Script-Bereiche |
<script language="JavaScript"> <!-- JavaScript //--> </script> <noscript> Text, wenn kein Script möglich </noscript> |
|
Gewünschte Scriptsprache angeben. Beschreibung (Script-Bereich) / Beschreibung (Noscript-Bereich) |
||
Angaben zum Script | <script language="JavaScript" src="URL" type="text/javascript"> | |
Attribut src= zum Einbinden externer Scriptdateien verwenden. Gegebenenfalls Mime-Type der Scriptsprache angeben. Beschreibung |
||