Kurzreferenz HTML

• Aufbau einer HTML Datei
• Attribute des body Elementes
• Universalattribute
• Textformatierung und Textausrichtung
• Aufzählungen / Listen
• Verweise / Links
• Tabellen
• Formulare

Wie Sie erkennen können lässt sich das Dokument in drei Hauptbereiche gliedern.

!DOCTYPE	der Dokumenttyp wird in einer eigenen Kategorie behandelt.
HEAD	auch die Kopfdaten werden in einer eigenen Kategorie behandelt.
BODY	die Elemente des HTML Körper werden im folgenden behandelt.

bgcolor	Hintergrundfarbe des Dokuments
text	Textfarbe (für das gesamte Dokument)
link	Farbe für noch nicht besuchte Verweise
vlink	Farbe für bereits besuchte Verweise
alink	Farbe für aktive Verweise
background	Angabe einer Bilddatei als Seitenhintergrund
Anmerkung: Alle Farbangaben sind optional.

Bei den Universalattributen handelt es sich um Attribute, deren Verwendung bei der Mehrzahl der HTML Elemente erlaubt ist. Diese Attribute haben verschiedene Aufgaben, wie Beispielsweise die Auszeichnung verschiedener Sprachen oder das zuweisen individueller Namen. Die Attribute sind alle optional.

1. Allgemeine Universalattribute

Attribut	Beschreibung	Nicht erlaubt bei Element
class	Zuordnung einer Stylesheet Klasse (siehe: Klassen in CSS)	base, basefont, head, html, meta, param, script, style, title
id	Zuordnung eines individuellen Namens	base, head, html, meta, script, style, title
style	Zuweisung von CSS Formatierungen (siehe: Einbinden von CSS Anweisungen)	base, basefont, head, html, meta, param, script, style, title
title	Angabe eines Titels bzw. einer Beschreibung. Wird beim darüberfahren mit der Maus angezeigt.	base, basefont, head, html, meta, param, script, style, title
dir	Angabe der Schreibrichtung der verwendeten Sprache (von links nach rechts bzw. von rechts nach links)	applet, base, basefont, br, frame, frameset, hr, iframe, param, script
lang	Angabe der verwendeten Sprache nach RFC 1766 (siehe Sprachenkürzel)	applet, base, basefont, br, frame, frameset, hr, iframe, meta, param, script

2. Universalattribute für Event-Handler

Event-Handler reagieren auf Benutzerinteraktionen wie Mausbewegung oder Tastatureingaben und können Beispielsweise für den Aufruf eines JavaScriptes verwendet werden.

Attribut	Beschreibung	Nicht erlaubt bei Element
onclick	beim Anklicken des Elements	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
ondblclick	beim doppelklicken auf das Element	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmousedown	bei gedrückter Maustaste über dem Element	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseup	beim Loslassen der Maustaste über dem Element	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseover	beim Überfahren des Elements mit der Maus	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmousemove	beim Ziehen des Elements mit der Maus	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onmouseout	beim Verlassen des Elements mit der Maus	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeypress	beim Drücken und wieder Loslassen einer Taste (z.B. in einer <textarea>)	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeydown	beim Drücken einer Taste	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title
onkeyup	beim Loslassen einer Taste	applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, param, script style, title

1. Überschriften

left	linksbündig
center	zentriert
right	rechtsbündig
justify	Blocksatz

2. Absätze

align

Textausrichtung (left, center, right, justify)

3. Zeilenumbrüche


4. Zitate / Adressen / Vorformatierter Text

blockquote	Kennzeichnung von Zitaten (die Angabe einer URL ist optional)
address	Kennzeichnung von Adressen
pre	Ausgabe von vorformatiertem Text. Zeilenumbrüche werden ausgegeben, wie im Sourcecode eingegeben. Für Breite die gewünschte Breite in Zeichen angeben.

5. logische Textkennzeichnung


6. Auszeichnung von Änderungen

yyyy	das Jahr
MM	der Monat
dd	der Tag
T	fixer Buchstabe (muss an dieser Stelle stehen)
hh	Stunde
mm	Minute
ss	Sekunde
±hh:mm	Abweichung gegenüber Greenwich in Stunden und Minuten.

7. Textformatierung


8. Textrichtung

ltr	von links nach rechts
rtl	von rechts nach links

9. Schriftformatierung

font	formatiert den Text innerhalb des font Elementes
basefont	formatiert den nachfolgenden Text
size	Schriftgröße ein Wert zw. 1 (klein) und 7 (groß) - Standard = 3 ein Wert wie +1, oder -2 (ausgehend von der Standardgröße)
color	Schriftfarbe in Hexadezimaler Darstellung (siehe: Farbtabelle)
face	Schriftart (z.b. face="Verdana, Georgia")

10. Trennlinien

width	Breite in Pixel oder Prozent
size	Höhe in Pixel
align	Ausrichtung der Trennlinie

11. Zentrieren


12. Allgemeines Blockelement


Blockelement (z.B. zur CSS Formatierung)

13. Allgemeines Inlineelement


Inlineelement (z.B. zur CSS Formatierung)

1. Aufzählungslisten

type	Typ des Aufzählungszeichens
compact	kompakte Darstellung (optional)

2. Nummerierte Listen

type	Art der Nummerierung a = alphabetisch, Keinbuchstaben A = alphabetisch, Großbuchstaben i = römisch, Kleinbuchstaben I = römisch, Großbuchstaben
start	Startwert der Zählung
value	Fortsetzungswert der Zählung
compact	kompakte Darstellung (optional)

3. Definitionslisten

compact

kompakte Darstellung (optional)

4. Menülisten

compact

kompakte Darstellung (optional)

5. Verzeichnislisten

compact

kompakte Darstellung (optional)

1. Anker definieren

Anker kennzeichnen eine Stelle im Dokument, die per Link erreicht werden können (Beispiel: Das Inhaltsverzeichnis bzw die nach oben Links auf dieser Seite).

name	Name des Ankers

2. Verweis erstellen

href	Sprungadresse des Verweises ein Anker in der gleichen Datei: href="#Ankername" eine andere Datei: href="datei.html" eine andere Datei in einen anderen Verzeichnis: href="./verzeichnis/datei.html" eine WWW Adresse: href="http://www..." eine FTP Adresse: href="ftp://..." eine Telnet Adresse: href="telnet://..." eine Newsgroup Adresse: href="news://..." eine absolute lokale Adresse: href="file://..." ...
title	Titel / Beschreibung des Verweises (wird angezeigt, wenn sich der Mauszeiger darüber befindet)
target	Zielfenster des Verweises _self       = Verweis im selben Fenster öffnen. _blank    = Verweis in neuem Fenster öffnen. _parent  = aktuelles Frameset beim Ausführen des Verweises auflösen _top       = alle Framesets beim Ausführen des Verweises auflösen 'name'    = Name des Zielframes in dem sich der Link öffnen soll

3. Sprache und Zeichensatz

hreflang	Sprache (de, fr, en, ...)
charset	Zeichensatz (z.B. ISO-8859-1)

4. Index / Tastenkürzel

tabindex	Index des Links (Sprungreihenfolge per <tab>)
accesskey	Buchstabe (Tastaturkürzel) zum aktivieren des Links

5. Beziehungen zum Verweis

rel steht hierbei für Beziehung; rev für Rückbeziehung.
contents	Inhaltsverzeichnis
capture	Kapitel
section	Abschnitt
subsection	Unterabschnitt
index	Stichwortverzeichnis
glossary	Glossar
appendix	Anhang
copyright	rechtliche Hinweise
next	nächste Seite
prev	vorherige Seite
start	Startseite
help	Hilfeseite
bookmark	Orientierungshilfe
alternate	alternative Bezugspunkte oder Ressourcen

6. eMail Verweise

1. Aufbau allgemein

border	Rahmendicke in Pixel
cellspacing	Abstand der Zellen untereinander (in Pixel)
cellpadding	Abstand des Zelleninhaltes zum Zellenrand (in Pixel)
summary	Zusammenfassung des Tabelleninhaltes

2. Tabellenkopf, -fuß und -körper

Die Verwendung der Elemente thead, tfoot und tbody ist optional. Wenn Sie die Elemente verwenden wollen, müssen Sie dies in der hier angegebenen Reihenfolge tun.

3. Hintergrundfarbe / Hintergrundbild

bgcolor	Zweisung einer Hintergrundfarbe
background	Zuweisung eines Hintergrundbildes

4. Rahmen / Gitternetz

frame Bestimmt das Aussehe des Außerahmens		rules Bestimmt das Aussehe des Gitternetzes
box	Rahmen rund herum	none	keine Linien
above	Rahmen nur oben	rows	Linien nur zwischen den Zeilen
below	Rahmen nur unten	cols	Linien nur zwischen Spalten
lhs	Rahmen nur links	all	komplettes Gitternetz
rhs	Rahmen nur rechts
hsides	Rahmen nur oben und unten
vsides	Rahmen nur links und rechts

5. Höhe / Breite

width	Breite in Pixel oder Prozent Als Attribut des table Elementes die gesamte Tabellenbreite Als Attribut der Elemente th und td die Breite der Zelle
height	Zellenhöhe

6. Zellen ausrichten

align Bestimmt die horizontale Ausrichtung		valign Bestimmt die vertikale Ausrichtung
left	linksbündig	top	oben bündig
center	zentriert	middle	mittig
right	rechtsbündig	bottom	unten bündig
justify	Blocksatz	baseline	gemeinsame Basislinie (erste Zeile liegt immer auf gleicher Höhe)
char	Bis zum angegebenen Zeichen einrücken (z.B. char="-") Mit dem Attribut charoff kann festgelegt werden, ab welcher Position in der Zeile frühestens nach char gesucht wird (z.B. charoff="20")

7. Hintergrundfarbe / -bild


Festlegen einer Hintergrundfarbe oder eines Hintergrundbildes für einzelne Zeilen, Spalten oder Zellen.

8. Zellen verbinden


Anzahl der Zeilen / Spalten, die Sie verbinden möchten. (siehe: Grundlagen HTML - Tabellen).

9. Zeilenumbrüche verhindern


10. Tabellenbeschriftung

Das Element caption muss unmittelbar nach dem table Element folgen
align	top = Beschriftung oberhalb der Tabelle bottom = Beschriftung unterhalb der Tabelle left = Beschriftung links von der Tabelle right = Beschriftung rechts von der Tabelle

11. Tabelle ausrichten

align	Ausrichtung der Tabelle
hspace	Abstand zu Elementen die sich links/rechts von der Tabelle befinden (in Pixel)
vspace	Abstand zu Elementen die sich oberhalb/unterhalb der Tabelle befinden (in Pixel)

Wie Sie möglicherweise beim surfen im Web bereits gesehen haben, gibt es in HTML die Möglichkeit, Formlare zu erstellen. Die Inhalte der Formulare können Sie dann beispielsweise per eMail versenden, oder Mithilfe eines PHP Scriptes auswerten. In diesem Kapitel werden kurz die wichtigsten Elemente bezüglich Formulare vorgestellt.

1. Das <form> Element

action	Zieladresse, die die Daten des Formulars verarbeitet (z.b. ein PHP oder CGI Script). Zum Versand der Formulardaten per Mail: action="mailto: user@adresse.tdl" (siehe: Links)
action	Übertragngsart der Daten (GET oder POST) bei action="mailto:" immer POST
enctype	Für MIME-Type einen entsprechenden Typ einsetzen. bei action="mailto:" immer text/plain

2. Einzeiliges Eingabefeld / Passwortfeld

type	Typ des Feldes (text oder password) password bedeutet, daß nur * angezeigt wird.
size	Länge des Eingabefeldes in Zeichen
maxlength	maximale Länge des Eingabefeldes in Zeichen
name	Name des Eingabefeldes (relevant für die Weiterverarbeitung)
value	Vorbelegung des Feldes mit einem Wert
readonly	keine Änderungen im Feld zulassen

3. Mehrzeiliges Eingabefeld

cols	Spalten (Breite in Zeichen)
rows	Höhe in Zeichen
name	Name des Textfeldes
wrap	Art der automatischen Zeilenumbrüche soft = automatischer Zeilenumbruch nur bei Eingabe hard = automatischer Zeilenumbruch bei Eingabe wird zu Zeilenumbrüchen bei Formularversand
value	Vorbelegung des Feldes mit einem Wert
readonly	keine Änderungen im Feld zulassen

4. Auswahllisten

size	Höhe der Liste (1 für 'Dropdown Menü')
name	Name des Feldes
value	Absendewert
selected	Vorauswahl eines Eintrages

5. Radio Buttons

type	radio für Radio-Buttons
name	Name des RadioButtons
value	Absendewert
checked	Vorauswahl eines Eintrages

6. Checkboxes

type	checkbox für Checkboxes
name	Name der Checkbox
value	Absendewert
checked	Vorauswahl eines Eintrages

7. Buttons


Buttons können mit den Elementen <input> und <button> erzeugt werden.

type	button für Buttons
name	Name des Buttons
value	Beschriftung / Alternativbeschriftung des Buttons
onClick	Angabe eines JavaScript Ereignisses

8. Datei Upload

type	file für Dateiupload
name	Name des Feldes
maxlength	maximale Größe der Datei
accept	Akzeptierte Dateitylen (z.b. text/*)

9. Versteckte Elemente

type	hidden für versteckte Elemente
name	Name des Elementes
value	Wert des Elementes

10. Buttons zum Absenden

type	submit bzw image für Absenden-Buttons reset für Rücksetzen-Button
value	Beschriftung des Buttons
src	Für URI die Adresse einer Bilddatei angeben

Dieses Dokument entspricht den aktuellen HTML / CSS Standards.