Hier verwendete Abkürzungen/Definitionen/Schreibweisen
|
| ...="URL" | "URL"
muss durch einen Uniform Resource Locator ersetzt werden:
"Methode://Server[:Port][/Pfad/File[#Anker]]".
Z.B. "http://www.w3.org/MarkUp". |
| ...="Farbe" | "Farbe"
muss durch eines der folgenden Schlüsselworte ersetzt werden: "black",
"maroon", "red", "yellow",
"lime", "green", "olive", "teal", "aqua", "blue", "navy", "purple", "fuchsia", "white", "gray",
"silver" oder ein RGB-Hexadezimalwert mit vorangestelltem
'#', z.B. "#00FF00". |
<br
clear=["left"|"right"|"all"|"none"]> | Bedeutet:
Das Tag <br> kann entweder ohne Parameter oder mit Parameter und mit genau
einem der aufgezählten Schlüsselworte verwendet werden. Korrekte Beispiele wären:
<br> und <br clear="left">. Die Zeichen '[', '|' und ']' müssen
weggelassen werden. |
HTML-Dokument-Struktur
|
<html>
<head>...</head>
<body>...</body>
</html> | <html>
Schließt das gesamte Dokument ein.
<head> Schließt den Header ein.
<body> Schließt den Hauptteil ein. |
Header-Elemente (zwischen <head>...</head>)
|
| <title>...</title> | Titel des
Dokuments. |
| <meta http-equiv="..." content="..."> | Metaanweisungen,
z.B.
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta http-equiv="refresh" content="1; url='AndereSeite.htm'"> |
| <meta name="..." content="..."> | Metaanweisungen,
z.B.
<meta name="description" content="Erklärungen zu HTML-Tags">
<meta name="keywords" content="HTML, Tags">
<meta name="author" content="Torsten
Horn"> |
<style type="text/css">
<!--
@import url( style.css );
body, td { font-family: Arial,Helvetica }
h1
{ color: blue; font-family: Arial }
a:hover { color: green }
-->
</style> | CSS (Cascading Style Sheets).
CSS sollte nur vorsichtig
verwendet werden, da es von den ver. |
Body-Parameter (<body ... >)
|
<body
bgcolor="Farbe"
background="URL"
bgproperties="fixed"
text="Farbe"
link="Farbe"
alink="Farbe"
vlink="Farbe"> | body-Parameter:
Hintergrundfarbe,
Hintergrund(-Bild),
Hintergrundbild nicht scrollen (nur
IE),
Textfarbe,
noch nicht angeklickter Hyperlink,
Hyperlink während Anklicken,
bereits besuchter Hyperlink.
Z.B.: <body bgcolor="#FFFFFF"> |
Hyperlinks
|
| <a href="URL">...</a> | Verweis
auf eine andere Datei (kann außer HTML-Datei auch anderer Dateityp sein). Zwischen
den Tags muss Text oder ein Bild stehen. Z.B.
<a href="http://www.w3.org/MarkUp">W3C</a>
<a href="http://www.w3.org/MarkUp"><img src="w3c.gif"></a> |
| <a href="URL" target="_blank">...</a> | Öffnen
eines Dokuments in einem neuen Browser-Fenster. |
| <a
href="URL" target="...">...</a> | Laden
eines Dokuments in einen bestimmten Frame eines Framesets. Z.B.
<a href="http://www.w3.org/MarkUp"
target="FrameName">W3C</a> |
| <a name="...">...</a> | Definition
eines Zielankers, der per Hyperlink angesprungen werden kann. Z.B.
<a name="Ankername">Zieltext</a>
|
| <a href="#...">...</a> | Hyperlink
auf Anker innerhalb des gleichen Dokuments. Z.B.
<a href="#Ankername">Springe
zu Anker</a> |
| <a href="URL#...">...</a> | Hyperlink
auf bestimmte Textstelle (Anker) innerhalb eines anderen Dokuments. |
| <a href="mailto:...@...">...</a> | Hyperlink
auf E-Mail-Adresse. Z.B.
<a href="mailto:emailadresse@domain.de">E-Mail</a> |
Bilder
|
| <img src="URL"> | Bildwiedergabe,
üblicherweise als .gif- oder .jpg-Datei. Z.B. <img src="w3c.gif"> |
<img
src="URL"
alt="..."
border=...
height=...
width=...
hspace=...
vspace=...
align=["top"|"middle"|"bottom"|"left"|"right"]
ismap
usemap="..."> | Parameter zur Bildwiedergabe:
Damit bei abgeschalteter Grafik oder bei textbasierten Browsern der Inhalt verständlich
ist, sollte mit alt ein Ersatztext definiert werden.
border=0 schaltet den
Rahmen aus.
Angabe der Bildgröße über height und width in Pixeln bewirkt einen
schnelleren Bildaufbau.
hspace/vspace definieren den Abstand zum Text. align
definiert Anordnung zu nachfolgendem Text.
Über ismap/usemap kann das Bild
als Image-Map behandelt werden. |
<map name="...">
<area ...>
...
</map> | Image-Map
(Bild mit anklickbaren Bereichen).
Name wie in <img src="URL" usemap="...">
definiert.
Beliebig viele <area ...>-Elemente (sensitive Regionen).
|
<area
nohref
href="URL"
alt="..."
shape=["rect"|"circle"|"poly"|"default"]
coords="...">
| Sensitive Region einer Image-Map (<map ...>). |
Gliederungselemente, Absatzformatierungen
|
<hr
align=["left"|"center"|"right"]
size=...
width=...
noshade> | Horizontale Trennlinie.
Z.B. <hr size=1 noshade>. |
<h[1...6]
align=["left"|"center"|"right"]>
...</h[1...6]> | Überschrift, h1 = größte, h6 = kleinste
Schrift.
Z.B. <h1>Überschrift</h1>. |
<p
align=["left"|"center"|"right"]>
...</p> | Textabsatz. |
<div
align=["left"|"center"|"right"]>
...</div> | Textausrichtung. |
| <center>...</center> | Kurzform
für <div align="center">. |
<br
clear=["left"|"right"|"all"|"none"]> | Zeilenumbruch.
Mit clear kann bei umflossenen Bildern das Umfließen gesteuert werden. |
| <pre>...</pre> | Vorformatierter Text, der
exakt übernommen wird (Leerzeichen und Zeilenumbrüche bleiben erhalten) und mit
einem fixed Font (diktengleich) dargestellt wird. HTML-Tags werden weiter interpretiert.
|
Schriftarten
|
| <basefont ...> | Basis-Font für ganzes
Dokument, Attribute wie <font ...> |
<font
color="Farbe"
face="..."
size=...>
...</font> | Schriftfarbe,
-art und -größe (1...7).
Z.B.: <font face="Arial,Helvetica">...</font> |
| <b>...</b> | Fett (bold): A |
| <i>...</i> | Kursiv (italic): A |
<u>...</u>
<ins>...</ins> | Unterstrichen
(inserted): A, A |
| <tt>...</tt> | Schreibmaschine:
A |
| <big>...</big> | Großer
Font: A |
| <small>...</small> | Kleiner
Font: A |
<strike>...</strike>
<del>...</del> | Durchgestrichen
(deleted): A, A |
| <sub>...</sub> | Tiefgestellt:
A |
| <sup>...</sup> | Hochgestellt:
A |
Aufzählungen, Listen
|
<dl>
<dt>...</dt><dd>...</dd>
<dt>...</dt><dd>...</dd>
</dl>
| Glossar, Liste von Definitionen. |
<ol
type=["1"|"I"|"A"|"a"]
start=...>
<li>...</li>
<li>...</li>
</ol> | Geordnete Liste (mit Nummerierung).
type: 1=Zahlen, I=römische
Zahlen, A=Großbuchstaben, a=Kleinbuchstaben.
start: Startwert.
<li>:
Listenelemente (Zeilen). |
<ul
type=["square"|"disc"|"circle"]>
<li>...</li>
<li>...</li>
</ul> | Ungeordnete Liste (alle Zeilen mit gleicher Markierung).
type: Markierungssymbol.
<li>: Listenelemente (Zeilen). |
<li
type="..."
value=...>
...</li> | Listenelemente (für <ol> und <ul>).
type: Siehe <ol> bzw. <ul>. |
Beispiel:
- erstes Listenelement (square)
- zweites Listenelement (circle)
| Beispiel:
<ul type="square">
<li>erstes
Listenelement (square)</li>
<li type="circle">zweites Listenelement
(circle)</li>
</ul> |
Tabellen
|
<table
width="..."
hspace="..."
vspace="..."
align=["left"|"right"]
background="Hintergrundbild.gif"
border=...
cellspacing=...
cellpadding=...>
<tr>
<td>...</td><td>...</td>...
</tr>
...
</table>
| Tabellendefinition.
width definiert Tabellenbreite in Pixel oder
in Prozent relativ zum Fenster.
hspace/vspace definieren Abstandsrand der
Tabelle seitlich bzw. ober-/unterhalb.
align definiert Tabellenposition relativ
zum Fenster.
background legt Hintergrundbild unter Tabelle (inoffiziell).
border definiert die Rahmenbreite (border=0 bedeutet kein Rahmen).
cellspacing/cellpadding
steuern Rahmenbreite und Zellenabstände.
<tr>...</tr> schließt
alle Elemente einer Zeile ein (muss innerhalb <table>...</table> stehen).
<td>...</td> schließt eine Zelle ein (muss innerhalb <tr>...</tr>
stehen). |
| <tr>...</tr> | Tabellenzeile
(innerhalb <table>...</table>). |
<td
colspan=...
rowspan=...
width=...
height=...
bgcolor="Farbe"
align=["left"|"center"|"right"|"justify"]
valign=["top"|"middle"|"bottom"|"baseline"]
nowrap>
...</td> | Tabellenzelle (innerhalb <tr>...</tr>).
colspan/rowspan verbinden Zellen.
width/height legen minimale Zellengröße
fest.
bgcolor definiert die Tabellenzellenhintergrundfarbe.
align/valign
definieren die Ausrichtung innerhalb der Zelle.
nowrap verhindert Zeilenumbruch.
|
| | Beispiel:
<table border=1 cellspacing=0>
<tr><td colspan=2 bgcolor="silver">Beispiel</td></tr>
<tr><td>X</td><td>2</td></tr>
<tr><td>Y</td><td>3</td></tr>
</table>
|
Frames
|
<frameset cols="..." rows="...">
<frame
src="URL" name="...">
<frame src="URL" name="..."
marginwidth=... marginheight=...>
...
<noframes>...</noframes>
</frameset> | Frameset-Definition (nach "</head>", ohne "<body>",
siehe unten Beispiel).
cols definiert die Breite der Frame-Spalten in Pixel
oder Prozent. Z.B. cols="200,*" bedeuted: 1. Spalte 200 Pixel, 2. Spalte
restliche Pixel.
rows definiert die Höhe der Frame-Zeilen (analog zu cols).
Sollen keine Rahmenlinien gezeigt werden, müssen wegen unterschiedlicher Browser-Interpretationen
drei zusätzliche Parameter eingefügt werden:
<frameset frameborder="0"
border="0" framespacing="0">.
<frame ...> ... definieren die in die
Frames zu ladenden HTML-Seiten.
name vergibt den Frames Namen (z.B. für Hyperlinks
wie <a href="URL" target="FrameName">).
marginwidth und marginheight definieren den Abstand des Inhaltes zur Begrenzung.
<noframes> ... wird angezeigt, wenn der Browser keine Frames unterstützt.
Über einen Hyperlink in der Form:
<a href="HtmlSeiteOhneFrames.htm" target="_top">Hyperlink</a>
kann die Framestruktur wieder aufgehoben werden. |
| | Beispiel: verschachtelte Navigations-Frames:
<html><head></head>
<frameset rows="100,*">
<frame src="frame1.htm">
<frameset
cols="200,*">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</frameset>
</html>
|
Formulare
|
<form
action="URL"
method=["post"|"get"]
enctype=["application/x-www-form-urlencoded"|"text/plain"|"multipart/form-data"]>
...</form> | Formularbegrenzung. Alle Formularelemente
müssen sich zwischen <form ...> und </form> befinden.
action verweist
auf das auszuführende Programm oder Skript.
method steuert die Parameter-Übergabe
(Stdin bzw. Environment).
enctype beeinflusst die Kodierung:
"application/x-www-form-urlencoded"
ist der Default,
"text/plain" wird nicht von allen Browsern korrekt unterstützt
und
"multipart/form-data" ist nur zum Datei-Upload nötig. |
<select
name="..." size=1>
<option value="...">...</option>
<option value="..." selected>...</option>
...</select> |
|
<select name="..." size=... multiple>
<option value="...">...</option>
<option
value="..." selected>...</option>
...</select> |
| | size
> 1: mehrzeilige Auswahlliste.
multiple: Mehrfachauswahl möglich
(mit Strg-Taste).
value: Name der auszuwählenden Option.
selected:
voreingestellte Auswahl. | |
| <textarea
name="..." cols=... rows=...>...</textarea> | |
| <input
type="text" name="..." value="..." size=... maxlength=...> | |
| <input type="password" name="..." size=...
maxlength=...> | |
| <input type="checkbox"
name="..." value="..." checked> | |
| <input
type="radio" name="..." value="..." checked> | |
| <input type="submit" value="..."> |
|
| <input type="button"
value="..." onClick="..."> | |
| <input
type="hidden" name="..." value="..."> | Versteckte Informationen. |
Sonderzeichen
|
| Ä, Ö, Ü, ä, ö, ü, ß | Ä, Ö,
Ü, ä, ö, ü, ß |
| ·,
¦, §, ©, ®, °, µ, ±, ², ½, ¼ | ·, ¦, §,
©, ®, °, µ, ±, ², ½,
¼ |
| &, ", <, > | &,
", <, > |
| |
(non braking space, Leerzeichen ohne Zeilenumbruch) |
Die Medienseite mit Wissenswertem