|
1 | Allgemeine und dateiweite Angaben |
|
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.
|
|
| Kommentare |
<!-- Dies ist ein Kommentar --> |
Zum internen Auskommentieren von Inhalten oder Befehlen. Wird im Browser nicht angezeigt.
|
|
| Adreßbasis |
<base href="URL"> |
Im Dateikopf zwischen <head> und </head> erlaubt. Nur in begründeten Ausnahmefällen verwenden!
|
|
| 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.
|
|
Meta-Angabe:
Autor |
<meta name="author" content="Name"> |
Urheber-Angabe. Im Dateikopf zwischen <head> und </head> erlaubt.
|
|
Meta-Angabe:
Beschreibung |
<meta name="description" content="Text"> |
Kurzbeschreibung des Inhalts. Im Dateikopf zwischen <head> und </head> erlaubt.
|
|
Meta-Angabe:
Stichwörter |
<meta name="keywords" content="Wort, Wort, Wort"> |
Stichwörter zum Inhalt. Im Dateikopf zwischen <head> und </head> erlaubt.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
Meta-Angaben
in separater
Datei |
<head profile="URL"> |
URL ist eine Datei oder WWW-Adresse, in der sich die Meta-Angaben befinden.
|
|
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 an des Bezugsziels an, title= ist als Beschriftung für Buttons gedacht, wenn Browser dies unterstützen.
Im Dateikopf zwischen <head> und </head> erlaubt.
|
|
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=).
|
|
Hintergrundbild
(Wallpaper) |
<body background="URL"> |
Angabe im einleitenden <body>-Tag notieren. GIF- oder JPG-Grafiken angeben.
|
|
Unbewegliches
Hintergrundbild |
<body background="URL" bgproperties=fixed> |
Angabe bgproperties=fixed zusätzlich zu background= notieren.
|
|
| 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.
|
|
2 | Absatztypen und Textgestaltung
|
|
| Überschriften |
<h[1-6]>Text</h[1-6]> |
Sechs Überschriftenebenen sind erlaubt, also z.B. <h1>Text</h1>.
|
|
Ü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).
|
|
| Textabsätze |
<p>Text</p> |
End-Tag nicht zwingend, aber empfehlenswert.
|
|
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).
|
|
Zeilenumbruch
erzwingen |
Text alte Zeile<br>Text neue Zeile |
|
|
Automatischen
Zeilenumbruch
verhindern |
<nobr>Text</nobr> |
|
|
Zeilenumbruch
erlauben |
Text<wbr>Text |
|
|
| Numerierte Listen |
<ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol> |
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert.
|
|
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
|
|
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)
|
|
| Aufzählungslisten |
<ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul> |
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert.
|
|
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). |
|
| Menülisten |
<menu>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</menu> |
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert.
|
|
| Verzeichnislisten |
<dir>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</dir> |
End-Tag bei Listeneinträgen nicht zwingend erforderlich, aber empfehlenswert.
|
|
| Definitionslisten |
<dl>
<dt>Zu definierender Ausdruck</dt>
<dd>Definition des Ausdrucks</dd>
</dl> |
|
|
Listen kompakt
darstellen |
<ol compact>
<ul compact>
<dl compact> |
| Erlaubt in einleitenden Tags von numerierten Listen, Aufzählungslisten und Definitionslisten. |
|
| Zitate |
<blockquote>Text</blockquote> |
|
|
| Zitate mit URL |
<blockquote cite="URL">Text</blockquote> |
|
|
| Adressen |
<address>Text</address> |
|
|
Präformatierter
Text |
<pre>Text</pre> |
|
|
Breite eines
präformatierten
Textes |
<pre width=x>Text</pre> |
Breite (width=) ist die Anzahl Zeichen pro Zeile.
|
|
Ältere Befehle
für diktengleiche
Textabsätze |
<xmp>Text</xmp>
<listing>Text</listing>
<plaintext>Text
|
| Absätze für Beispieltexte (<xmp>), Quellcodes (<listing>) oder generell für Klartext (<plaintext>). |
|
Befehle
für diktengleiche
Textabsätze |
<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> |
|
|
| 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. |
|
| Schriftfarbe |
<font color=#XXXXXX>Text</font> |
|
|
| Schriftart |
<font face="Schriftart_1,Schriftart_2,...">Text</font> |
| Als Schriftart (face=) einen oder auch mehrere Schriftartennamen angeben. |
|
Normal-
Schriftgröße |
<basefont size=1|2|3|4|5|6|7>Text |
Normal-Schriftgröße (size=) in 7 Stufen angeben. Kein End-Tag.
|
|
Normal-
Schriftfarbe |
<basefont color=#XXXXXX>Text |
Kein End-Tag.
|
|
Normal-
Schriftart |
<basefont face="Schriftart_1,Schriftart_2,...">Text |
| Als Schriftart (face=) einen oder auch mehrere Schriftartennamen angeben. Kein End-Tag. |
|
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. |
|
Zentrierter
Bereich mit
mehreren Elementen |
<center>verschiedene HTML-Elemente</center> |
|
|
| Trennlinien |
Text davor
<hr>
Text danach |
|
|
Trennlinien
gestalten |
<hr width=x size=x align=left|center|right>
<hr color=#XXXXXX>
|
| Nichtschattierung (Model DirectoryA1-Dateien), 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=). |
|
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=. |
|
| 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). |
|
Lauftexte
(Marquee) |
<marquee>Text</marquee> |
|
|
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=. |
|
3 | Tabellen |
|
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. |
|
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. |
|
Kopf, Körper und
Fuß einer Tabelle |
<table border>
<thead>
<!--Tabellenzeilen-->
</thead>
<tbody>
<!--Tabellenzeilen-->
</tbody>
<tfoot>
<!--Tabellenzeilen-->
</tfoot>
</table> |
|
|
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. |
|
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). |
|
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). |
|
| 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. |
|
Zeilenumbruch
in Zellen
verhindern |
<th nowrap>
<td nowrap> |
|
|
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).
|
|
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). |
|
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. |
|
| Hintergrundfarbe |
<table bgcolor=#XXXXXX>
<tr bgcolor=#XXXXXX>
<th bgcolor=#XXXXXX>
<td bgcolor=#XXXXXX> |
|
|
| Rahmenfarbe |
<table bordercolor=#XXXXXX>
<table bordercolordark=#XXXXXX bordercolorlight=#XXXXXX> |
Einheitliche Rahmenfarbe mit bordercolor=, Schatteneffekt mit bordercolordark= (dunkle Farbe) und bordercolorlight= (helle Farbe)
|
|
| Hintergrundbild |
<table background="URL">
<tr background="URL">
<th background="URL">
<td background="URL"> |
GIF- oder JPG-Grafik angeben.
|
|
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). |
|
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. |
|
4 | Verweise |
|
Verweisanker
definieren |
<a name="Name">Text</a> |
|
|
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://...) |
|
| 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. |
|
Mime-Type des
Verweisziels |
<a href="URL" type="Typ/Subtyp">Verweistext</a> |
|
|
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 |
|
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. |
|
Tabulator-
Reihenfolge |
<a href="URL" tabindex=x>Verweistext</a> |
| Niedrigste Nummer wird zuerst angesprungen, höchste zuletzt. |
|
| Tastenkürzel |
<a href="URL" accesskey="z">Verweistext</a> |
| Bei accesskey= Buchstaben angeben, über den der Verweis direkt anwählbar ist. |
|
5 | Grafiken |
|
| Grafiken einbinden |
<img src="URL"> |
| GIF- oder JPG-Grafiken verwenden. |
|
| Alternativer Text |
<img src="URL"
alt="Text"> |
| Text (alt=) angezeigt, wenn die Grafik
nicht darstellbar ist. |
|
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! |
|
Rahmen
um Grafik |
<img src="URL" border=x> |
| Pixel der Rahmendicke (border) angeben. |
|
Namen
für Grafik |
<img src="URL" name="Name"> |
| Interessant z.B. für JavaScript |
|
| Grafik beschriften |
<img src="URL" align=top|middle|bottom>Text |
| Ausrichtung des nachfolgenden Textes (align=) obenbündig (top), mittig (middle) oder untenbündig (bottom). |
|
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). |
|
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. |
|
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=). |
|
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. |
|
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. |
|
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. |
|
6 | Formulare |
|
| 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. |
|
Zielfenster für
Server-Antwort |
<form ... target="Fenstername"> |
| Bei Verwendung von Frames und in Verbindung mit CGI-Scripts interessant. |
|
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. |
|
Einzeilige
Eingabefelder
Textvorbelegung |
<input size=x maxlength=x name="Elementname" value="Text"> |
| Textvorbelegung mit value= bestimmen. |
|
Eingabefelder
für Paßwort |
<input type=password size=x maxlength=x name="Elementname"> |
| Blindeingabe mit type=password bestimmen. |
|
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. |
|
Mehrzeilige
Eingabefelder
Umbruchkontrolle |
<textarea wrap=virtual|physical cols=x rows=x name="Elementname">
</textarea>
|
| Automatischen Zeilenumbruch bei Eingabe mit wrap=virtual erlauben. |
|
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. |
|
| Auswahlliste |
<select name="Elementname">
<option> Eintrag
<option> anderer Eintrag
</select> |
|
|
Auswahlliste
Mehrfachauswahl |
<select multiple> |
| Attribut multiple für Mehrfachauswahl notieren. |
|
Auswahlliste
mit Vorauswahl |
<select name="Elementname">
<option selected> Eintrag
<option> anderer Eintrag
</select> |
| Attribut selected in gewünschtem <option>-Tag notieren. |
|
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. |
|
| Menüstruktur |
<select>
<optgroup>
<option> Eintrag
</optgroup>
</select> |
| So viele <optgroup>-Untermenüs notieren wie gewünscht. Verschachtelung möglich. |
|
| Radiobuttons |
<input type=radio name="Name" value="Wert"> Text |
| Gemeinsame Namen für alle zusammengehörigen Radiobuttons vergeben. |
|
| Checkboxen |
<input type=checkbox name="Name" value="Wert"> Text |
| Gemeinsame Namen für alle zusammengehörigen Checkboxen vergeben. |
|
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. |
|
| Klickbuttons (1) |
<input type=button name="Name" value="Beschriftung" onClick="..."> |
| Sinnvoll zum Ausführen von JavaScript-Code bei onClick=. |
|
| Klickbuttons (2) |
<button type=button name="Name" value="Beschriftung" onClick="...">
<img src="URL">
</button> |
| Sinnvoll z.B. um Grafiken als Button-Beschriftung zu benutzen. |
|
| 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/*" |
|
Elemente
gruppieren |
<fieldset>
<legend>Gruppenüberschrift</legend>
<!-- Formularelemente -->
</fieldset>
|
|
|
Label für
Elemente |
<label for="idName">Beschriftung:</label>
<input size=40 id="idName"> |
|
|
Tabulator-
Reihenfolge |
<input ... tabindex=x> |
| Niedrigste Nummer wird zuerst angesprungen, höchste zuletzt. |
|
| Tastenkürzel |
<input ... accesskey="z"> |
| Bei accesskey= Buchstaben angeben, über den das Element direkt anwählbar ist. |
|
Elemente
ausgrauen |
<input ... disabled> |
|
|
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. |
|
Grafischer
Absendebutton |
<input type=image src="URL"> |
|
|
7 | Frames |
|
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. |
|
| 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. |
|
Scrollbars
in Frames |
<frame src="URL" name="Name" scrolling=yes|no|auto> |
| Scrollbars immer anzeigen (yes), nie anzeigen (no) oder wie voreingestellt automatisch (auto). |
|
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. |
|
Unveränderbare
Fenstergröße |
<frame src="URL" name="Name" noresize> |
| Alle benachbarten Frames sind durch noresize betroffen. |
|
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. |
|
Farbige
Fensterrahmen |
<frameset bordercolor=#XXXXXX> |
|
|
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 |
|
Eingebettete
Frames |
<iframe src="URL" name="Name">
Inhalt bei Nichtanzeige
</iframe> |
|
|
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. |
|
8 | Multimedia |
|
Daten als
Objekt
einbinden |
<object data="URL" type="MimeType">
Alternativer Inhalt
</object>
|
|
|
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. |
|
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. |
|
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. |
|
Rahmen
um Objekt |
<object ... border=x>
</object>
|
| Pixel der Rahmendicke (border) angeben. |
|
Namen
für Objekt |
<object ... name="Name">
</object>
|
| Interessant z.B. für JavaScript. |
|
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! |
|
Objekt
beschriften |
<object ... align=top|middle|bottom>Text
</object> |
| Ausrichtung des nachfolgenden Textes (align=) obenbündig (top), mittig (middle) oder untenbündig (bottom). |
|
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). |
|
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. |
|
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=). |
|
Meldung bei
Ladevorgang |
<object ... standby="Meldungstext">
</object> |
|
|
Objektinstanz
nur auf Wunsch |
<object ... declare>
</object> |
|
|
Multimedia
(Netscape) |
<embed src="URL"> |
|
|
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. |
|
Alternativer
Inhalt |
<noembed>Inhalt</noembed><embed src="URL"> |
|
|
Videos
(Microsoft) |
<img dynsrc="URL">
|
| AVI-Datei angeben. |
|
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. |
|
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. |
|
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. |
|
9 | Layer |
|
| 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. |
|
Inline-Layer
definieren |
<ilayer>Inhalt</ilayer> |
| Erzeugt keinen eigenen Block. Sonst gleiche Angaben möglich wie bei <layer>. |
|
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. |
|
| Externe Datei |
<layer src="URL">Inhalt</layer> |
|
|
| Hintergrundfarbe |
<layer bgcolor=#XXXXXX>Inhalt</layer> |
|
|
| Hintergrundbild |
<layer background="URL">Inhalt</layer> |
| GIF oder JPG angeben. |
|
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. |
|
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. |
|
| 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. |
|
10 | Styles und Scripts |
|
Zentrale
Style-Definitionen |
<head>
<style type="text/css">
<!--
Style-Sheet-Angaben
//-->
</style>
</head> |
|
|
Lokale
Style-Definitionen |
<span style="Style-Sheet-Angaben">Text</span> |
|
|
| Script-Bereiche |
<script language="JavaScript">
<!--
JavaScript
//-->
</script>
<noscript>
Text, wenn kein Script möglich
</noscript> |
| Gewünschte Scriptsprache angeben. |
|
| Angaben zum Script |
<script language="JavaScript" src="URL" type="text/javascript"> |
| Attribut src= zum Einbinden externer Scriptdateien verwenden. Gegebenenfalls Mime-Type der Scriptsprache angeben. |
 |