HTML 4.01 Tagliste


Zum Text der Seite

Inhalt

Auf dieser Seite soll so knapp wie möglich Fahne von Großbritannien HTML 4.01 aufgelistet werden. Diese Seite soll als Nachschlageseite und Ge­dankenstütze dienen, wobei die Empfehlung der strikten Trennung von Inhalt und Form Rechnung getragen wurde, indem Form-Tags und -Attribute nicht aufgeführt sind. Weiterhin wurden alle Mausevent-Attribute weggelassen, weil deren Funktionalität an JavaScript gekoppelt sind und dieses sich mit einem Mausklick abschalten läß.

Diese Seite ist sicherlich nicht zum Lernen von HTML geeignet. Sie soll bei der Programmierung von dynamischen Webseiten (Folgekurs) helfen. Eine kom­plette HTML-Referenz findet sich im SELFHTML, allerdings auch mit allen veralteten Tags und Attributen, deren Funktion heute als Stylesheets realisiert werden sollten.

Inhalt

  1. Grundstruktur
  2. Universalattribute
  3. Formatierung
  4. Überschriften
  5. Adressen
  6. Textauszeichnungen
  7. Zitate
  8. Indizes und Exponenten
  9. Absätze und Zeilen
  10. Listen
  11. Tabellen
  12. Hyperlinks
  13. Bilder und Objekte
  14. Waagerechte Linien
  15. Frames
  16. Formulare
  17. Skripte
Seitenanfang

Grundstruktur

Syntax
<tag [attribut="wert" ... ]>[Text</tag>]
Kommentar
<!-- Kommentar -->
<!-- Kommentar über mehrere
    Zeilen
//-->
Grundgerüst
<html lang="sprache">
  <head>
    <title>titel der seite</title>
    [ <meta ... > ]
    [ . . . ]
    [ <link ... > ]
    [ . . . ]
  </head>
  <body>
    Text der Seite
  </body>
</html>
Seitenanfang

Universalattribute

id="name"
Eindeutiger Identifikator (Groß-/Kleinschreibung ohne Bedeutung) des Tags, kann u. a. als Stylesheet-Verknüpfung und als Sprungziel genutzt werden.
class="name"
Name einer Stylesheet-Klassendefinition.
style="style-definition; ..."
Inline Stylesheet-Definition, gilt nur für dieses Tag, überlegt benutzen.
title="text"
Titel eines Tags, wird in guten Browsern als Flyout-Hilfe angezeigt, wenn man mit der Maus über dem Inhalt des Tags steht.
lang="sprache"
Sprache des Inhalts des Tags. Einige mögliche Sprachen sind:
  • de - Deutsch
  • en - Englisch
  • us-en - U.S. Englisch
  • fr - Französisch
  • es - Spanisch
  • he - Hebräisch
  • i-navajo - Sprache der Navajo-Indianer
  • x-klingon - Klingonisch (experimentell)
dir="LTR | RTL"
Ausrichtung der Sprache Links nach Rechts oder Rechts nach Links.
Seitenanfang

Tags

Block
Inahlt des Tags bildet stets einen Block, d. h. beginnt auf einer neuen Zeile und schließt mit einem Zeilenende. Block-Tags können gegeneinander ausgerichtet und positioniert werden.
Inline
Taginhalte stehen in der Zeile, keine Positionierung möglich.
Seitenanfang

Formatierung

<div>Text</div>
Zuweisung von Stylesheet-Anweisungen und Gruppierung von elementen als Block.
<span>Text</span> (Inline)
Zuweisung von Stylesheet-Anweisungen (Inline).
<style type="mime-type" [ media=" medium" ] >style sheets</style>
Definition von Stylesheet-Anweisungen im HTML-Dokument.
type Content-Type der Stylesheet-Anweisungen, meist "text/css",
media Bestimmt das Ausgabemedium (screen, print, speach, u.a.) für die die Stylesheets zu nutzen sind,
Seitenanfang

Überschriften

<h1>Ueberschrift</h1>
<h2>Ueberschrift</h2>
<h3>Ueberschrift</h3>
<h4>Ueberschrift</h4>
<h5>Ueberschrift</h5>
<h6>Ueberschrift</h6>
Überschriften der Wichtigkeit 1 bis 6.
Seitenanfang

Adressen

<address>Adresse</address>
Auszeichnung eines Text-Blockes als Adresse.
Seitenanfang

Textauszeichnung

<em;Text</em>
Betonung.
<strong>Text</strong>
Starke Betonung.
<dfn>Text</dfn>
Definition.
<code>Text</code>
Programm-Quelltext.
<samp>Text</samp>
Beispiele, Programm-Ausgaben.
<kbd>Text</kbd>
Tastatur-Eingaben oder Eingabedaten.
<var>Text</var>
Variablen oder Programm-Argumente.
<cite>Text</cite>
Zitat oder Referenz auf andere Quellen.
<abbr>Text</abbr>
Abkürzung, deren Buchstaben einzeln gepsrochen werden.
<acronym>Text</acronym>
Abkürzung, die als Wort gepsrochen wird (Kunstwort).
Seitenanfang

Zitate

<blockquote [ cite="url" ]>Zitat</blockquote>
<q [ cite="url" ]>Zitat</q>
Hervorhebung eines Zitates als Block oder Inline.
cite Als Attribut kann die Quelle des Zitates angegeben werden,
Seitenanfang

Indizes und Exponenten

<sub>Index</sub>
Kennzeichnung eines Indizes.
<sup>Exponent</sup>
Kennzeichnung eines Exponenten.
Seitenanfang

Absätze und Zeilen

<p>Text</p>
Auszeichnung eines Absatzes (Textblockes).
<br>
Zeilenumbruch erzwingen.
<nobr>Text</no>
Zeilenumbruch verbieten. Nicht HTML-Standard! Besser mit geschützten (erzwungenen) Leerzeichen &nbsp; (&#160; oder &#xA0;) arbeiten.
<wbr>
Zeilenumbruch erlauben, wenn notwendig. Nicht HTML-Standard! Besser mit Soft-Trennstrich &shy; (&#173; oder &#xAD;) arbeiten.
<pre>Text</pre>
Vorformatierter Text, hier haben alle Leerzeichen und Zeilenwechsel Bedeutung, es wird eine nichtproportional-Schrift (Courier) benutzt, so daß Ausrichtungen erhalten bleiben. Achtung: so aber keine Tabellen gestalten, 1. sind sie so nicht durch Software erkennbar und 2. sehen sie nicht schön aus.
Seitenanfang

Listen

<ul>
  <li>Listenelement</li>
  [ . . . ]
</ul>
Auszeichnung einer ungeordneten Liste.
<ol>
  <li>Listenelement</li>
  [ . . . ]
</ol>
Auszeichnung einer geordneten (numerierten) Liste.
<dl>
  <dt>Ausdruck</dt>
  <dd>Definition</dd>
  [ . . . ]
</dl>
Auszeichnung einer Definitionsliste.
Seitenanfang

Tabellen

Tabellen und deren anzeige am Bildschirm (Breite, Spaltenbildung, usw.) sind eine recht komplexe Angelgenheit. Im Zweifelsfall bitte in der HTNL 4.01-Refezenz für Tabellen nachsehen.

<table [ summary="text" ] [ width="länge" ] [ border="pixel" ]
[ frame="void | above | below | hsides | lhs | rhs | vsides | box | border"]
[rules="none | groups | rows | cols | all"]
[cellspacing="länge"] [cellpadding="länge"] >
[<caption>Tabellenbeschriftung</caption>]
<tr [align="left | center | right | justify | char"]
[valign="top | middle | bottom | baseline"]
[char="zeichen"] [charoff="länge"] >
[<th [align="left | center | right | justify | char"]
[valign="top | middle | bottom | baseline"] [char="zeichen"]
[rowspan="zahl"] [colspan="zahl"] >Kopfzelle</th> ]
<td [align="left | center | right | justify | char"]
[valign="top | middle | bottom | baseline"] [char="zeichen"]
[rowspan="zahl"] [colspan="zahl"] >Zelle</td>
[ . . . weitere Zellen . . . ]
</tr>
[ . . . weitere Zeilen . . . ]
</table>
Die Attribute haben folgende Bedeutung:
summary Zusammenfassung der Tabelle für Sprachausgabe, 
width Tabellenbreite,
border Randbreite der Tabellenlinien, border="0" ergibt unsichtbare Tabellen, border sollte durch frame="border" ersetzt werden,
frame äußere Rahmengestaltung,
rules Linien zwischen Zeilen und Spalten,
cellspacing Breite der Tabellenlinien,
cellpadding Abstand zw. Linien und Inhalt der Felder,
align Waagerechte Ausrichtung aller Felder einer zeile,
valign Senkrechte Ausrichtung aller Felder einer Zeile,
char das angegebene Zeichen dient zur Ausrichtung des Feldinhaltes,
charoff Verschiebung bei Ausrichtung mit dem Attribut char,
rowspan Anzahl von Zeilen, die ein Feld verbinden soll,
colspan Anzahl von Spalten, die ein Feld verbinden soll,
<thead>Tabellenzeile</thead>
Tabellenkopf.
<tfoot>Tabellenzeile</tfoot>
Tabellenfuss.
<tbody>Tabellenzeilen</tbody>
Tabelle.
Seitenanfang

Hyperlinks

<a name="name" | href="uri" [type="mime-type"] [hreflang="sprache"}
[accesskey="zeichen"] [tabindex="zahl"]
[shape="rect | circle | poly | default"] [coords="koordinaten"]>Linktext</a>
Definition eines Hylinks oder eines Ankers als Sprungziel.
name Name des Ankers (muß auch mit id eindeutig sein,,
href Adresse der verknüpften Seite,
type Content-Type der verknüpften Seite,
hreflang Sprache der verknüpften Seite,
accesskey Tastatur-Zeichen für Tastaturbedienung,
tabindex Position in der Reiehnfolge der Tabulatorsprünge für Tastaturbedienung,
shape Form des sensitiven Bereichs bei Bildern,
coords Positionen der Eckpunkte des sensitiven Bereichs,
<link href="uri" [type="mime-type"] [hreflang="sprache"] [rel="linktyp"] [rev="linktyp"]
[media="medium"] [target="name"] [charset="zeichensatz"]>
Beziehung einzelner Seiten untereinander, Tag muß sich im Kopf der HTML-Datei befinden.
href Adresse der verknüpften Seite,
type Content-Type der verknüpften Seite,
hreflang Sprache der verknüpften Seite,
rel Vorwärtsverknüpfunf,
rev Rückwärtsverknüpfung,
media Bestimmt das Ausgabemedium (screen, print, speach, u.a.) für die die verlinkte Seite zu nutzen ist.
target Name des Frames, in das standardmäßig ausgegeben werden soll,
charset Zeichensatz der verlinkten Seite,
<base href="uri" [target="name"]>
Festlegung der Basis-URI für die Auflösung von relativer URI's im Dokument und Festlegung des Standard-Fensternamens bei Frames, Tag muß sich im Kopf der HTML-Datei befinden.
href Absolute Adresse der Basis-Seite,
target Name des Frames, in das standardmäßig ausgegeben werden soll,
Seitenanfang

Bilder und Objekte

<img src="uri" alt="text" [longdesc="uri"] [name="name"]
[width="länge"] [height="länge"] [usemap="uri"] [ismap]>
Definition eines Bildes im GIF, JPG, PNG oder XBM -Format, folgende Attribute sind möglich:
src Adresse der Bilddatei,
alt alternativer Text zur Bildbeschreibung,
longdesc Adresse einer Bild-Langebeschreibung,
name Name des Bildes zur Referenzierung in Scripten,
width Breite des Bildes,
height Höhe des Bildes,
usemap URI der klientseitigen Beschreibung sensitiver Bereiche des Bildes,
ismap Bild besitzt serverseitige sensitive Bereiche,
<map name="name">
<area alt=text" [shape="rect | circle | poly | default"] [coords="koordinaten"]
[href="uri"] [nohref] [accesskey="zeichen"] [tabindex="zahl"]
[ <area . . . >
</map>
Definition von sensitiven Bereichen eines Bildes.
name Name zur Bezugnahme im usemap-Attribut der Bildbeschreibung,
alt alternativer Text zur Bildbereichsbeschreibung,
shape Form des sensitiven Bereichs,
coords Koordinaten der Eckpunkte des sensitiven Bereichs,
href Adresse der verknüpften Seite,
nohref Bereich hat keine Aktion zur Folge,
accesskey Tastatur-Zeichen für Tastaturbedienung,
tabindex Position in der Reiehnfolge der Tabulatorsprünge für Tastaturbedienung,
<object [declare] [classid="uri"] [codebase="uri"]
[data="uri"] [type="mime-type"] [codetype="mime-type" ]<
[archive="uri"] [standby="text"] [usemap="uri" ]
[height="länge"] [width="länge"] [name="name" ] [tabindex="zahl" ] >
<param name="name" [id="name"] [value="wert" ]
[valuetype="DATA | REF | OBJECT"] [type="mime-typ"]>
[ <param . . . ]
</object>
Definition eines Objektes.
declare nur Deklaration des Objektes,
classid Adresse des Programms,
codebase Basisadresse für Programm, Daten, Archiv,
data Adresse der Daten,
type Typ des Objektes,
codetype Typ des Programmcodes,
archive Liste von Uri's,
standby Anzeige-Text während des Ladens des Objektes,
height Höhe des Objektfensters,
width Breite des Objektfensters,
usemap Definition klientseitige sensitive Bereiche,<
name Name zur Referenzierung in Formularen,
tabindex Position in der Tabulatorreihenfolge zur Bedienung mit der Tastatur,
id dokumentenweiter eindeutiger Name,
name Name des Datenelementes,
value Wert des Datenelementes,
valuetype Art der Daten,
type Typ der Daten des Elements,
Seitenanfang

Waagerechte Linien

<hr>
Auszeichnung einer waagerechten Linie (Blockelement).
Seitenanfang

Frames

<frameset [ rows="liste von längen" ] [ cols="liste von längen"]>
<frame [ name="name" ] [ longdesc="uri"] [src="uri"] [frameborder="1 | 0"]
[marginwidth="pixel"] [scrolling="yes | no | auto"]>
[ <frame . . . ]
<noframes>
Text ohne Frames
</noframes>
</frameset>
Definition einer Menge von Frames.
rows Liste der Höhen der Fenster,
cols Liste der Breiten der Fenster,
name Name des Fensters zur Referenzierung als target>/code>,
longdesc Adresse einer Langbeschreibung des Frames, anstatt des Titels,
src Adresse des Inhalts des Frames,
frameborder Rand um die Frames,
marginwidth Randbreite in Pixel,
marginheight Randhöhe in Pixel,
scrolling Darstellung der Rollbalken am Fenster, niemals scrolling="no" setzen,
<iframe [name="name"] [longdesc="uri"] [ src="uri"] [ frameborder="1 | 0"]
[ marginwidth="pixel" ] [ scrolling="yes | no | auto"]
[ height="länge" ] width="länge" ]>
Definition eines eingebetteden Fensters.
name Name des Fensters zur Referenzierung als target>/code>,
longdesc Adresse einer Langbeschreibung des Frames, anstatt des Titels,
src Adresse des Inhalts des Frames,
frameborder Rand um die Frames,
marginwidth Randbreite in Pixel,
marginheight Randhöhe in Pixel,
scrolling Darstellung der Rollbalken am Fenster, niemals scrolling="no" setzen,
height Höhe des Fensters,
width Breite des Fensters,
Seitenanfang

Formulare

<form action="uri" [method="GET | POST"]
[enctype="application/x-www-form-urlencoded"]
[accept="mime-typ"] [name="name"]>
<input [type="text | password | checkbox | radio | submit | reset | file | hidden | image | button"]
[name="name"] [value="name"] [checked] [disabled] [readonly]
[size="zahl"] [maxlength="zahl"] [src="uri"] [alt="text"]
[usemap="uri"] [ismap] [accesskey="zeichen"] [tabindex="zahl"]>
<button [type="submit | reset | button] [name="name"]
[value="name"] [disabled] [accesskey="zeichen"] [tabindex="zahl"]>
Beschriftung des buttons
</button>
<select [name="name"] [disabled] [multiple] [size="zahl"] [tabindex="zahl"}>
<option [value="name"] [selected] [disabled]>Text Menüelement
</option>
</select>
<textarea [name="name"] [disabled] [readonly] [rows="zahl"]
[cols="zahl"] [accesskey="zeichen"] [tabindex="zahl"]>
Standard-Text des Eingabebereiches
</textarea>
</form>
Definition eines Formulars und seiner Elemente, stets nur eines pro Dokument.
action Adresse des Server-Programms zur Behandlung des Formulars,
method Methode der Datenübergabe,
enctype Mime-Typ der Daten,
accept erlaubte Mime-Typen für File upload,
name Name des Formulars bzw. des Eingabeelements,
tyoe Typ des Eingabeelementes,
value Wert (Standard) des Elementes,
checked Vorauswahl für Radioknöpfe und Checkboxen,
disabled Element ist ausgeschaltet,
readonly nur lesbar fü TEXT und PASSWD,
size Größe des Elements,
maxlength Maximale Anzahl von Zeichen in Textfeldern,
src Adresse eines Bildes fü Elemente mit Bildern,
alt alternativer Text zur Bildbeschreibung für Elemente mit Bildern,
usemap URI der Beschreibung eines klientseitigen sensitiven Bildes,
ismap zu nutzendes serverseitiges sensitives Bild,
accesskey Tastatur-Zeichen für Tastaturbedienung,
tabindex Position in der Reiehnfolge der Tabulatorsprünge für Tastaturbedienung,
accept erlaubte Mime-Typen für File upload,
multiple Mehrfachauswahl möglich,
selected Menü-Vorauswahl,
rows Anzahl der Zeilen des Feldes,
cols Anzahl der Spalten des Feldes,
<fieldset>
<legend>Beschriftung</legend>
</fieldset>
Zusammenfassung von Formularelementen und Beschriftung.
<label [for="name"] [accesskey="zeichen"]>Beschriftung</label>
Definition einer Beschriftung eines Formularelementes.
for Id-Name des zu beschriftenden Eingabeelementes,
accesskey Tastatur-Zeichen für Tastaturbedienung,
Seitenanfang

Skripte

<script type="mime-typ" [charset="zeichensatz"] [src="uri"] [defer]>
Skript-Text
</script>
Einbindung von Skripten in eine Webseite, folgende Attribute sind nötig:
charset Zeichensatz des Skriptes,
type Mime-Typ der Skript-Sprache,
src Adresse für ein externes Skript,
defer Browser darf die Ausführung verzögern,

Anfang
  Seitenanfang
 Trennstrich  ...Formluarvorherige Seite  Trennstrich  nächste SeiteCSS...

Kurs Web-Design