Kurzreferenz html

Kurzreferenz HTML, Seite 1
Kurzreferenz HTML
S. 2 Grundlagen HTML Tag, End-Tag
Verschachtelung
Parameter (Attribut, Argument)
Leerzeichen, Zeilenwechsel
Klein- und Großschreibung
Dateinamen
HTML-Grundgerüst
Kommentar
S. 3-4 Textformatierung Zeilenumbruch
Absatz
Trennlinie
Physisches Formatieren
Logisches Formatieren
Überschrift
Ausrichtung
Schriftgröße
S. 4 Farbe Schriftart, Schriftfarbe
Farbnamen
Hexadezimale Angaben für Farben
Dateiweite Farb-Angaben im body
S. 5 Maskierungen Maskierung von Umlauten
Maskierung von Sonderzeichen
S. 6 Listen Ungeordnete Liste
Ungeordnete Liste, verschachtelt
Nummerierte Liste
Definitionsliste
Eigenschaften für Listen
S. 7 Grafiken Grafiken einbinden
Attribute zu Grafiken
Grafik als Hintergrundbild
S. 7 Pfadangaben Relative Pfadangaben
Absolute Pfadangaben
S. 8 Verweise Allgemeine Verweise
Verweise auf bestimmte Textstellen
Zielfenster für Verweise
Grafik als Verweis, E-Mail-Verweis
Download-Verweis, Verweis zu einer beliebigen Datei
Image Maps
S. 9-10 Tabellen Tabellen, Grundlagen
Tabellen, Kopfzellen
Tabellenränder, cellspacing, cellpadding
Tabellen, Hintergrundfarben
Tabellen, Breiten- und Höhenangaben
Tabellen, Zelleninhalt horizontal ausrichten
Tabellen, Zelleninhalt vertikal ausrichten
Tabellen ausrichten
Tabellenüberschrift
Zellen verbinden
S. 11 Eingebettete Frames Eingebetteten Frame definieren
Neue Datei in eingebettetem Frame laden
S. 11-13 Formulare Formulare definieren
Formulare: einzeilige Eingabefelder
Formulare: mehrzeilige Eingabefelder
Formulare: Auswahllisten
Formulare: Radiobuttons
Formulare: Checkboxen
Formulare: Versteckte Elemente
Formulare: Buttons zum Absenden und Abbrechen
S. 13 Angaben im head Meta-Angaben
Dokument-Typ-Angaben

Grundlagen HTML:
Tag, End-Tag:
<font>xxx</font>
Tags werden vom normalen Text dadurch unterschieden, dass sie zwischen zwei spitzen Klammern eingeschlossen werden.
Die meisten HTML-Befehle treten paarweise auf, mit einem Start-Tag der Form <tag> und einem End-Tag der Form </tag>.
Diese Befehlspaare geben jeweils die Bedeutung des dazwischenliegenden Textes an.
<br>
Seltener treten HTML-Befehle treten einzeln auf, d. h. ohne End-Tag.
Verschachtelung:
<i><b>xxx</b></i>
Mehrere unmittelbar aufeinanderfolgende HTML-Befehle müssen immer richtig geschachtelt werden:
<tag1><tag2><tag3>xxx</tag3></tag2></tag1>
Parameter (Attribut, Argument):
<font size="3">xxx</font>
Manche Tags können Parameter, bestehend aus Attributen und ihren Argumenten, haben.
Im obigen Beispiel hat der Tag <font> (=Schrift) das Attribut size (=Schriftgröße) mit dem Argument 3 (= Normalschriftgröße).
Leerzeichen, Zeilenwechsel:
Innerhalb von Tags sind Leerzeichen oder gar ein Zeilenwechsel nicht gestattet. Der Text, der von Tags eingeschlossen wird,
darf Leerzeichen (welche auch als solche dargestellt werden) und Zeilenumbrüche enthalten. Zu beachten ist aber, daß
Zeilenumbrüche (und ebenso Absätze und Tabulatoren) im Browser nicht so dargestellt werden, wie sie im Editor eingegeben
wurden. Für Zeilenumbrüche und Absätze, die im Browser wirksam sein sollen, müssen die entsprechenden HTML-Befehle
verwendet werden.
Klein- und Großschreibung:
HTML unterscheidet bei Namen von HTML-Elementen und Attributnamen nicht zwischen Groß- und Kleinschreibung. Nur bei
der Wertzuweisung an manche Attribute wird Groß-und Kleinschreibung unterschieden - aber auch nur im Hinblick etwa auf
Scriptsprachen. Für XHTML wurde festgelegt, dass alle Elementnamen und Attributnamen klein geschrieben werden.
Empfehlung: Generelle Kleinschreibung auch bei HTML, außer bei Verweisen auf Dateinamen, falls diese großgeschrieben
werden, wie etwa Bild.gif.
Dateinamen:
Bei der Namensvergabe von HTML-Dateien keine Umlaute, Leerzeichen und Sonderzeichen verwenden. Statt der
Dateiendung *.html kann auch die Endung *.htm verwendet werden.
HTML-Grundgerüst:
<html>
<head>
<title>erstes Dokument</title>
</head>
<body>
Hallo!
</body>
</html>
(Weitere Angaben im head siehe letzte Seite.)
Kommentar:

Textformatierung:
Zeilenumbruch:
<br>
<nobr>Zeilenumbruch verhindern</nobr>
<wbr>Zeilenumbruch erlauben
Absatz:
<p>ein Absatz</p>
<p align="right">ein Absatz, rechtsbündig angeordnet</p>
<p align="center">ein Absatz, zentriert angeordnet</p>
<p align="left">ein Absatz, linksbündig angeordnet (Voreinstellung)</p>
Trennlinie:
<hr size="5" width="70">
mit size wird die Stärke der Trennlinie festgelegt (Normalstärke ist 2),
mit width wird die Breite der Trennlinie festgelegt.
Physisches Formatieren:
<b>fetter Text</b>
<i>kursiv gestellter Text</i>
<u>unterstrichener Text</u>
<s>durchgestrichener Text</s>
<tt>diktengleicher Text</tt>
<big>größer formatierter Text</big>
<small>kleiner formatierter Text</small>
<strike>ebenfalls durchgestrichener Text</strike>
<sup>hochgestellter Text</sup>
<sub>tiefgestellter Text</sub>
<blink>blinkender Text</blink>
<marquee>hin- und herlaufender Text</marquee>
Logisches Formatieren:
<abbr>dies ist eine Abkürzung</abbr>
<acronym>dies ist ebenso eine Abkürzung</acronym>
<cite>dies ist ein Zitat</cite>
<code>dies ist Quellcode</code>
<dfn>dies ist eine Begriffsdefinition</dfn>
<em>ein Text mit der Bedeutung: betont, emphatisch</em>
<kbd>dies ist eine Tastatureingabe</kbd>
<samp>dies ist ein Beispiel</samp>
<strong>stark betonter Text</strong>
<var>dies ist eine Variable</var>
<blockquote>dies ist ein Zitat</blockquote>
<address>dies ist eine Adresse</address>
<pre>präformatierter Text</pre>
Überschrift:
<h1>Überschrift erster Ordnung (relativ groß)</h1>
u.s.w.
<h6>Überschrift sechster Ordnung (relativ klein)</h6>
Ausrichtung:
<h1 align="center">mittig</h1>
<h1 align="left">linksbündig</h1>
<h1 align="right">rechtsbündig</h1>
<h1 align="justify">Blocksatz</h1>
<center>älteres Blockelement zur zentrierten Ausrichtung</center>

Schriftgröße:
<font size="1">sehr kleine Schrift</font>
u.s.w.
<font size="7">sehr große Schrift</font>
<font size="3">Normalschriftgröße</font>
<font size="-1">Text kleiner als normal</font>
Farbe:
Schriftart, Schriftfarbe:
<font face="Verdana, Courier New">Schriftart ist Verdana, falls nicht darstellbar, die Courier New</font>
<font color="green">grüner Text</font>
Farbnamen:
black = schwarz (entspricht hexadezimal: #000000)
maroon = braun (entspricht hexadezimal: #800000)
green = dunkelgrün (entspricht hexadezimal: #008000)
olive = olivgrün (entspricht hexadezimal: #808000)
navy = dunkelblau (entspricht hexadezimal: #000080)
purple = violett (entspricht hexadezimal: #800080)
teal = graublau (entspricht hexadezimal: #008080)
silver = hellgrau (entspricht hexadezimal: #C0C0C0)
gray = grau (entspricht hexadezimal: #808080)
red = rot (entspricht hexadezimal: #FF0000)
lime = hellgrün (entspricht hexadezimal: #00FF00)
yellow = gelb (entspricht hexadezimal: #FFFF00)
blue = blau (entspricht hexadezimal: #0000FF)
fuchsia = rosa (entspricht hexadezimal: #FF00FF)
aqua = hellblau (entspricht hexadezimal: #00FFFF)
white = weiß (entspricht hexadezimal: #FFFFFF)
Hexadezimale Angaben für Farben:
Notation: #rrggbb (rr=Rotanteil, gg=Grünanteil, bb=Blauanteil)
0 (entspricht dezimal 0)
A (entspricht dezimal 10)
B (entspricht dezimal 11)
C (entspricht dezimal 12)
D (entspricht dezimal 13)
E (entspricht dezimal 14)
F (entspricht dezimal 15)
Beispiel: <font color="#000000">schwarze Schrift</font>
Dateiweite Farb-Angaben im body:
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Mit text definiert man die Farbe für den Text,
mit bgcolor die Hintergrundfarbe für die Seite,
mit link eine Farbe für Verweise zu noch nicht besuchten Links,
mit vlink eine Farbe für Verweise zu bereits besuchten Links,
mit alink eine Farbe für Verweise, die der Anwender gerade anklickt.
</body>

Maskierungen:
Maskierung von
ä für ä
Ä für Ä
ö für ö
Ö für Ö
ü für ü
Ü für Ü
ß für ß
Maskierung von Sonderzeichen:
á für á
Á für Á
à für à
À für À
â für â
Â für Â
é für é
É für É
ç für ç
Ç für Ç
Α für Alpha groß (A)
α für Alpha klein (α)
Β für Beta groß (B)
β für Beta klein (β)
Γ für Gamma groß (Γ)
γ für Gamma klein (γ)
< für <
> für >
& für &
" für "
  (geschütztes Leerzeichen)
€ für das Euro-Zeichen (€)
° für das Grad-Zeichen (°)
¶ für das Absatz-Zeichen (¶)
§ für das Paragraph-Zeichen (§)
© für das Copyright-Zeichen (©)
± für das Plusminus-Zeichen (±)
¼ für ein Viertel (¼)
½ für ein Halb (½)
¾ für drei Viertel (¾)
∞ für das Unendlichkeitszeichen (∞)
• für das Bullet-Zeichen (•)

Listen:
Ungeordnete Liste:
<ul>
<li>Probieren geht über Studieren</li>
<li>Liebe geht über Triebe</li>
<li>Tante fällt über Kante</li>
</ul>
Ungeordnete Liste, verschachtelt:
<ul>
<li>Suchmaschinen
<ul>
<li>Google</li>
<li>Altavista</li>
<li>Fireball</li>
</ul>
</li>
<li>Verzeichnisse</li>
<li>Was anderes</li>
<li>Noch was anderes</li>
</ul>
Zwischen <li> und </li> darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt.
Nummerierte Liste:
<ol>
<li>Einheimische Wildrosen</li>
<li>Ausländische Wildrosen</li>
<li>Gartenrosen</li>
</ol>
Definitionsliste:
<dl>
<dt>br</dt>
<dd>Zeilenumbruch</dd>
<dt>hr</dt>
<dd>Trennlinie</dd>
<dt>p</dt>
<dd>Absatz</dd>
</dl>
Zwischen <dt> und </dt> steht der Begriff (definition term), zwischen <dd> und </dd> steht die Beschreibung des Begriffs
(definition description).
Eigenschaften für Listen:
Für ungeordnete Listen kann der Bullet-Typ bestimmt werden:
<ul type="circle"> erzeugt ein rundes Bullet.
<ul type="square"> erzeugt ein eckiges Bullet.
<ul type="disc"> erzeugt ein Dateisymbol als Bullet.
Für nummerierte Listen kann die Art der Nummerierung bestimmt werden:
Mit <ol type="I"> werden die Listeneinträge mit I., II., III. usw. nummeriert.
Mit <ol type="i"> werden die Listeneinträge mit i., ii., iii., iv. usw. nummeriert.
Mit <ol type="A"> werden die Listeneinträge mit A., B., C. usw. nummeriert.
Mit <ol type="a"> werden die Listeneinträge mit a., b., c. usw. nummeriert.
Mit start= innerhalb des einleitenden Tags von <ol> kann ein beliebiger Startwert gesetzt werden,
z.B. <ol start="7">. Die Nummerierung beginnt dann bei 7.
Mit value= innerhalb des Tags von <li> in einer nummerierten Liste kann der Startwert beliebig neu gesetzt werden,
z. B. auf <li value="15">. Die Nummerierung fährt dann bei 15 fort.

Grafiken:
Grafiken einbinden:
<img src="bild.gif">
Attribute zu Grafiken:
<img src="bild.jpg" width="200" height="150" border="3" alt="ein schönes Bild" title="Bild" name="bild">
width ist die Breite von bild.jpg, height die Höhe (angegeben in Pixeln),
mit border wird ein Rahmen um die Grafik (in Pixeln) definiert,
mit alt gibt man einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann (obligatorisch),
title ist dem Attribut alt ähnlich, der title-Text wird auch vom Netscape angezeigt, wenn man mit der Maus eine Weile auf dem
Bild verweilt,
mit name vergibt man einen Namen für die Grafik (in Verbindung mit JavaScript sinnvoll). Der Name darf keine Umlaute,
Leerzeichen, Sonderzeichen enthalten, er darf nicht mit einer Zahl anfangen und sollte nicht zu lang sein.
Grafik als Hintergrundbild:
<body background="bild.gif">
"bild.gif" als Hintergrundbild. Dabei wird das Bild über das ganze Anzeigefenster hinweg immer wiederholt, so dass ein
Tapeteneffekt (Wallpaper) entsteht.
Pfadangaben:
Relative Pfadangaben:
<img src="bild.jpg">
"bild.jpg" liegt im selben Verzeichnis wie diese HTML-Datei.
<img src="bilder/bild.jpg">
"bild.jpg" befindet sich im Verzeichnis "bilder", welches im selben Verzeichnis wie diese HTML-Datei liegt.
<img src="../bild.jpg">
"bild.jpg" befindet sich ein Verzeichnis höher als diese HTML-Datei.
<img src="../bilder/bild.jpg">
"bild.jpg" befindet sich im Verzeichnis "bilder", welches ein Verzeichnis höher liegt als diese HTML-Datei.
<img src="../../bild.jpg">
"bild.jpg" befindet sich zwei Verzeichnisse höher als diese HTML-Datei.
Merke:
- gehe von der Datei aus, in der dieser Befehl steht, in den Ordner NeuerOdner: NeuerOrdner/
- gehe von der Datei aus, in der dieser Befehl steht, einen Ordner höher: ../
Absolute Pfadangaben:
<img src="/bild.jpg">
"bild.jpg" liegt im Stammverzeichnis des Servers, auf dem auch irgendwo diese HTML-Datei liegt.
<img src="/bilder/bild.jpg">
"bild.jpg" liegt im Verzeichnis "bilder", welches im Stammverzeichnis des Servers liegt.
<img src="http://www.irgendwas.de/bild.jpg">
"bild.jpg" liegt im Stammverzeichnis des Servers http://www.irgendwas.de.
<img src="http://www.irgendwas.de/bilder/bild.jpg">
"bild.jpg" liegt im Verzeichnis "bilder",welches im Stammverzeichnis des Servers http://www.irgendwas.de liegt.

Verweise:
Allgemeine Verweise:
<a href="ziel.html">Verweis zur Datei "ziel.html"</a>
Achten Sie bei Verweisen zu HTML-Dateien auf korrekte Pfadangaben (s.o.):
<a href="unterordner/ziel.html">ein relativer Verweis</a>
<a href="http://www.irgendwas.de/ziel.html">ein absoluter externer Verweis</a>
Verweise auf bestimmte Textstellen:
Innerhalb einer HTML-Datei:
<a href="#ziel">hier geht's zum Ziel</a>
<a name="ziel">hier ist das Ziel</a>(Bei der Vergabe eines Namens mit name= keine Umlaute, Sonderzeichen und
Leerzeichen verwenden und den Namen nicht mit einer Zahl beginnen.)
In eine andere HTML-Datei:
<a href="../neu.html#ziel">hier geht's zum Ziel in der Datei "neu.html"</a>
Kombination aus Zielverweis und Ziel:
<a href="#unten" name="oben">an eine Stelle weiter unten</a>
<a href="#oben" name="unten">an eine Stelle weiter oben</a>
Zielfenster für Verweise:
<a href="datei.html" target="_self">Datei wird im selben Browserfenster geöffnet</a>
<a href="datei.html" target="_blank">Datei wird in einem neuen Browserfenster geöffnet</a>
Grafik als Verweis, E-Mail-Verweis:
<a href="ziel.html"><img src="bild.gif" alt="zum Ziel"></a>("bild.gif" als Verweis zur HTML-Datei "ziel.html")
<a href="mailto:otto.meier@web.de">eine Mail an Otto Meier</a>(E-Mail-Verweis. Nach mailto: folgt die E-Mail-Adresse.)
Download-Verweis, Verweis zu einer beliebigen Datei:
<a href="daten.zip">Daten</a>
Es gibt keine spezifische Notation in HTML, um Dateien beim Anklicken zum Downloaden anzubieten. Es gibt lediglich
Dateitypen, die (fast) jeder Web-Browser so interpretiert, dass er dem Anwender anbietet, die Datei downzuloaden. Das
bekannteste Dateiformat dafür ist heute das ZIP-Format (*.zip).
<a href="dokument.txt">ein Text-Dokument</a>
Dateitypen wie reine Textdateien (*.txt) können die Browser selbst anzeigen.
<a href="dokument.pdf" type="application/pdf">ein PDF-Dokument</a>
<a href="dokument.xls" type="application/msexcel">ein Excel-Dokument</a>
<a href="dokument.doc" type="application/msword">ein Word-Dokument</a>
Bei Verweisen auf PDF-, Excel- und Word-Dateien empfielt sich die Angabe des Mime-Typs für entsprechende Dateien
Image Maps:
<map name="bild">
<area shape="rect" coords="53,46,132,100" href="datei1.html" alt="">
</map>
<img src="bild.gif" usemap="#bild" border="0" alt="">
Zwischen <map> und </map> werden die verweis-sensitiven Flächen der Grafik definiert, und zwar mit dem Tag <area>.
Mit shape="rect" wird eine viereckige Fläche, mit shape="circle" wird ein Kreis, und mit shape="polygon" wird ein beliebiges
Vieleck in der Grafik als verweis-sensitiv definiert.
Bei coords= werden die Koordinaten der verweis-sensitiven Flächen angegeben. Die Pixelangaben bedeuten absolute Werte
innerhalb der Grafik, die verweis-sensitiv sein soll.
Ein Viereck (shape="rect") wird mit den Koordinaten für x1,y1,x2,y2 definiert: x1 = linke obere Ecke, Pixel von links, y1 = linke
obere Ecke, Pixel von oben, x2 = rechte untere Ecke, Pixel von links, y2 = rechte untere Ecke, Pixel von oben
Ein Kreis (shape="circle") wird mit den Koordinaten für x,y,r definiert: x = Mittelpunkt, Pixel von links, y = Mittelpunkt, Pixel von
oben, r = Radius in Pixeln
Ein beliebiges Vieleck (shape="polygon") wird mit den Koordinaten für x1,y1,x2,y2,...,xn,yn definiert:
x = Pixel einer Ecke von links, y = Pixel einer Ecke von oben.

Tabellen:
Tabellen, Grundlagen:
<table>
<tr>
<td>linke obere Zelle</td>
<td>rechte obere Zelle</td>
</tr>
<tr>
<td>linke untere Zelle</td>
<td>rechte untere Zelle</td>
</tr>
</table>
In einer Zelle, in der nichts stehen soll, sollte wenigstens ein geschütztes Leerzeichen oder ein sogenannter "blinder Pixel"
stehen, eine Zelle würde dann so aussehen: <td> </td>
Zwischen <td> und </td> kann eine weitere Tabelle stehen. Tabellen können beliebig tief verschachtelt werden.
Tabellen, Kopfzellen:
<table>
<tr>
<th>Obst</th>
<th>Gemüse</th>
</tr>
<tr>
<td>Apfel</td>
<td>Gurke</td>
</tr>
</table>
Tabellenränder, cellspacing, cellpadding:
<table cellspacing="10" cellpadding="8" border="3" bordercolor="#0000FF">
<tr>
<td>eins</td>
<td>zwei</td>
</tr>
<tr>
<td>drei</td>
<td>vier</td>
</tr>
</table>
Mit border wird die Dicke von Tabellenrändern in Pixeln definiert. Mit bordercolor wird die Farbe der Gitternetzlinien definiert.
Mit cellspacing wird der Abstand zwischen den Zellen in Pixeln definiert.
Mit cellpadding wird der Abstand zwischen Zelleninhalt und Zellenrand in Pixeln definiert.
Tabellen, Hintergrundfarben:
<table bgcolor="#FFFF00">
<tr bgcolor="#00FF00">
<td>grün</td>
<td>grün</td>
</tr>
<tr>
<td bgcolor="#FF0000">rot</td>
<td>gelb</td>
</tr>
</table>
Tabellen, Breiten- und Höhenangaben:
<table width="60%">
<tr>
<td width="30%" height="100">Karl</td>
<td>Vera</td>
</tr>
</table>

Tabellen, Zelleninhalt horizontal ausrichten:
<table width="100%">
<tr>
<td align="left">Zellinhalt links</td>
<td align="right">Zellinhalt rechts</td>
<td align="center">Zellinhalt mittig</td>
</tr>
</table>
Tabellen, Zelleninhalt vertikal ausrichten:
<table>
<tr>
<td height="200" valign="top">Zellinhalt oben</td>
<td valign="middle">Zellinhalt mittig</td>
<td valign="bottom">Zellinhalt unten</td>
</tr>
</table>
Tabellen ausrichten:
<table align="right">
<tr>
<td>Zelle1</td>
<td>Zelle2</td>
<td>Zelle3</td>
</tr>
</table>
Mit align="left" wird die Tabelle linksbündig ausgerichtet, nachfolgender Text fließt rechts um die Tabelle. Mit align="right" wird
die Tabelle rechtsbündig ausgerichtet, nachfolgender Text fließt links um die Tabelle, mit align="center" wird die Tabelle mittig
ausgerichtet, nachfolgender Text steht unterhalb der Tabelle.
Tabellenüberschrift:
<table>
<caption>Tabellenüberschrift</caption>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</table>
Zellen verbinden:
<table>
<tr>
<td rowspan="2">Zelle geht über 2 Zeilen</td>
<td>Zelle in Zeile 1</td>
</tr>
rowspan=“2“
<tr>
<td>Zelle in Zeile 2</td>
</tr>
</table>
<table>
<tr>
<td colspan="2">Zelle geht über 2 Spalten</td>
</tr>
<tr>
colspan=“2“
<td>Zelle in Spalte 1</td>
<td>Zelle in Spalte 2</td>
</tr>
</table>
rowspan verbindet Zellen zeilenweise, colspan verbindet Zellen spaltenweise.

Eingebettete Frames:
Eingebetteten Frame definieren:
<iframe src="datei1.html" name="fenster" width="500" height="400" border="0" frameborder="0" scrolling="no"
noresize>
<p>Ihr Browser kann keine eingebetteten Frames anzeigen</p>
</iframe>
Mit dem Attribut src wird die HTML-Datei angegeben, welche in den jeweiligen Frame geladen werden soll.
Es gelten dieselben Regeln wie beim Referenzieren eines Verweisziels oder einer Grafik.
Mit name erhält der Frame einen Namen, damit außerhalb des Frames auf ihn verwiesen werden kann. Der Name sollte kurz
sein, darf keine Sonderzeichen, Leerzeichen oder Umlaute enthalten und nicht mit einer Zahl beginnen.
Mit width und height wird die Breite und Höhe des eingebetteten Frames definiert.
Mit frameborder und border wird die Dicke des Rahmens für den entsprechenden Frame angegeben.
Mit scrolling werden Bildlaufleisten für einen Frame erzwungen ("yes"), verhindert ("no") oder bei Bedarf angezeigt ("auto").
Mit noresize (ohne Argumente) wird verhindert, dass der Anwender die Größe des Framefensters verändern kann.
Neue Datei in eingebettetem Frame laden:
Heißt der eingebettete Frame wie im oberen Beispiel fenster (name="fenster"), dann kann in diesen eine andere HTML-Datei
geladen werden, wenn im <a>-Tag das Attribut target=““ verwendet wurde:
<a href="datei2.html" target="fenster">zur Datei 2</a>
<a href="datei3.html" target="fenster">zur Datei 3</a>
Formulare:
Formulare definieren:
<form action="mailto:info@domain.de" method="post" enctype="text/plain">
<table>
<tr>
<td>

</td>
</tr>
</table>
</form>
Wird das Formular in eine Tabelle eingebettet, so steht <form> vor <table> und </form> nach </table> der Tabelle, welche die
einzelnen Formularelemente einschließt.
Mit dem obligatorischen Attribut action im form-Tag wird angegeben, was mit den eingegebenen Formulardaten passieren soll.
Die Wertzuweisung an action= kann beispielsweise eine E-Mail-Adresse (normalerweise Ihre eigene) mit vorangestelltem
mailto: sein.
Das Attribut method= definiert die HTTP-Übertragungsmethode: get oder post. Wenn Sie sich die Formulardaten per E-Mail
zuschicken lassen, wie im zweiten obigen Beispiel gezeigt, dann benutzen Sie immer method="post".
Außerdem sollten Sie bei E-Mail-Empfang von Formulardaten im einleitenden form-Tag enctype="text/plain" mit angeben.
Formulare: einzeilige Eingabefelder
<form action="">
<input type="text" name="nachname" maxlength="60" value="Mustermann">
<input type="password" name="kennwort" maxlength="12">
</form>
Jedes Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=. Bei E-Mail-Formularen
taucht der Name als Feldname auf.
Ferner kann bei einzeiligen Eingabefeldern die maximal einzugebende Zeichenanzahl mit maxlength= bestimmt werden.
Mit dem zusätzlichen Attribut value= können Sie einen Text bestimmen, mit dem das Feld vorbelegt wird. Dieser vorbelegte
Text kann vom Anwender überschrieben werden.
Eingabefelder für Passwörter werden mit type="password" definiert. Die eingegebenen Zeichen werden dabei durch Platzhalter
(meistens Sternchen) dargestellt.

Formulare: mehrzeilige Eingabefelder
<form action="">
<textarea name="kommentar">Bitte Kommentar abgeben.</textarea>
</form>
Auch ein mehrzeiliges Eingabefeld sollte einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name=.
Optional kann ein Text, mit dem das Feld vorbelegt wird, zwischen <textarea> und </textarea> stehen. Dieser vorbelegte Text
kann vom Anwender überschrieben werden.
Formulare: Auswahllisten
<form action="">
<select name="top5" size="1" multiple>
<option value="jackson">Michael Jackson</option>
<option value="waits" selected>Tom Waits</option>
<option value="hagen">Nina Hagen</option>
</select>
</form>
Jede Auswahlliste sollte einen internen Bezeichnernamen erhalten, und zwar mit dem Attribut name=.
Mit dem Attribut size= bestimmen Sie die Anzeigegröße der Liste, d.h. wie viele Einträge angezeigt werden sollen. Wenn Sie
size="1" angeben, definieren Sie eine so genannte "Dropdown-Liste".
Um für einen Eintrag der Auswahlliste einen anderen Absendewert als den zwischen <option> und </option> zu bestimmen,
geben Sie im eineitenden <option>-Tag des betreffenden Eintrags das Attribut value= an.
Sie können eine Mehrfachauswahl erlauben durch das zusätzliche Attribut multiple im einleitenden select-Tag.
Um einen Eintrag der Auswahlliste vorzuselektieren, geben Sie im einleitenden option-Tag des betreffenden Eintrags das
Attribut selected an.
Formulare: Radiobuttons
<form action="">
<input type="radio" name="zahlmethode" value="Mastercard">Mastercard
<input type="radio" name="zahlmethode" value="Visa">Visa
<input type="radio" name="zahlmethode" value="AmericanExpress" checked>American Express
</form>
Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender
genau einen markieren.
Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert für jeden Radiobutton.
Um eine Auswahlmöglichkeiten vorzuselektieren, notieren Sie in dem input-Tag des entsprechenden Radiobuttons das Attribut
checked.
Formulare: Checkboxen
<form action="">
<input type="checkbox" name="zutat" value="salami">Salami
<input type="checkbox" name="zutat" value="pilze" checked>Pilze
<input type="checkbox" name="zutat" value="sardellen">Sardellen
</form>
Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender
keines, eines oder mehrere ankreuzen.
Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert für jede Checkbox.
Um eine Auswahlmöglichkeiten vorzuselektieren, notieren Sie in dem input-Tag der entsprechenden Checkbox das Attribut
checked.
Formulare: Versteckte Elemente
<form action="">
<input type="hidden" name="user" value="">
Name: <input type="text" name="nachname" size="30" maxlength="60" value="Mustermann">
</form>
<script language="JavaScript">

</script>
Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten
enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. So könnte ein Java Script
beispielsweise, nachdem die Seite mit dem Formular beim Anwender geladen ist, Informationen zur Bildschirmauflösung oder
zum Browsertyp (hier im Beispiel) beim Anwender sammeln.

Formulare: Buttons zum Absenden und Abbrechen
<form action="">
<input type="submit" value="Absenden">
<input type="reset" value="Abbrechen">
<input type="button" onClick="pruefe()">
</form>
Mit <input type="submit"> definieren Sie einen Absende-Button. Beim Anklicken dieses Buttons werden die Formulardaten
abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action= angegeben ist.
Mit <input type="reset"> definieren Sie einen Abbrechen-Button, eingegebene Daten werden verworfen und nicht abgeschickt.
Mit dem Attribut value= bestimmen Sie die Beschriftung der Buttons (value = Wert).
Mit <input type="button"> definieren Sie eine Schaltfläche ohne das Abschicken bzw. Zurücksetzen der oberen Schaltflächen.
In diesem Beispiel wird mit dem Eventhandler onClick= beim Klicken die JavaScript-Funktion pruefe() in Gang gesetzt.
Angaben im head:
Meta-Angaben:
<meta name="description" content="Beschreibungstext">
<meta name="author" content="Autor dieser Webseite">
<meta name="keywords" content="Schlüsselwörter">
<meta name="generator" content="Name der Software, mit der diese Seite erstellt wurde">
<meta name="robots" content="index">
mit content="index": indiziere diese Seite
mit content="noindex": indiziere diese Seite nicht
mit content="follow": indiziere diese Seite und folge den Links
mit content="nofollow": indiziere nur diese Seite -->
<meta name="revisit-after" content="3 days">
wie oft die Suchmaschinen die Seite neu indizieren sollen
<meta name="expires" content="x">
ist content="0", wird diese Seite immer wieder neu vom Server geladen, d.h. nicht evtl. aus dem Cache. Es ist auch möglich,
eine konkretes Datum bzw. Uhrzeit anzugeben, ab der diese Seite neu vom Server geladen werden soll.
Beispiel: content="Sat, 15 Dec 2001 12:00:00 GMT"
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Angabe zum Zeichensatz. Bei content= geben Sie zunächst den Mime-Type an, der für HTML-Dateien immer text/html lautet.
Dahinter folgt, durch einen Strichpunkt getrennt, die Angabe des Zeichensatzes. Im obigen Beispiel wird der Zeichensatz
ISO-8859-1 definiert (das ist der normale Zeichensatz für westeuropäische Sprachen, unter anderem auch für Deutsch).
<meta http-equiv="refresh" content="5; URL=http://www.weiter.de">
Weiterleitung zu einer anderen Adresse. content=5 bestimmt, nach wie vielen Sekunden die Weiterleitung starten soll. Mit URL=
wird die Adresse der Seite angegeben, zu der weitergeleitet werden soll.
Alle Meta-Angaben werden zwischen <head> und </head> definiert.
Dokument-Typ-Angaben:
Die Dokument-Typ-Angabe wird vor dem einleitenden <html> definiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Benutzen Sie dieser Angabe, wenn Sie bestimmte Elemente und Attribute nicht mehr verwenden wollen, die früher mal zum
HTML-Standard gehörten, aber mittlerweile durch andere Möglichkeiten (vor allem durch CSS Stylesheets) ersetzbar sind und
deshalb nicht mehr zum "reinen" HTML gehören. Die Verschachtelungsregeln für HTML-Elemente in der strict-Variante strenger
formuliert. So ist es in dieser Variante beispielsweise nicht erlaubt, zwischen <body> und </body> einfach nur Text zu notieren.
Alle Inhalte müssen in so genannten Block-Elementen stehen, z.B. in Überschriften, Textabsätzen, Tabellen usw.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Benutzen Sie diese Angabe, wenn Sie auch die früher mal erlaubten Elemente und Attribute noch verwenden wollen. In der
Variante "transitional" sind auch die Regeln für die Elementverschachtelung etwas milder. In dieser Variante werden z.B. leer
notierte Tabellenzellen angezeigt (in der oberen Strict-Variante dagegen nicht).
<!DOCTYPE html>
Mit dieser Dokument-Typ-Angabe weisen Sie den Browser an, Ihr HTML als HTML 5 zu interpretieren.
Nach dieser Dokument-Typ-Angabe folgt der einleitende Tag <html> mit dem Attribut lang=“de“:
<!DOCTYPE html>
<html lang="de">

Kurzreferenz html

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Kurzreferenz html