HTML für Anfänger

HTML-Anleitung

Übersicht:

Einleitung
Grundstruktur
Standardeinstellungen (Farben, Schrift, Hintergrund, ...)
Sonderzeichen
Kommentare
Absätze und Zeilenumbrüche
Ausrichtungen
Überschriften
Textauszeichnungen (Attribute wie fett, kursiv usw.)
Schriften
Textmarken
Hyperlinks
Bilder
Auflistungen (Bullet-Listen, schachtelbar)
Aufzählungen (Numerierungen, schachtelbar)
Tabellenersatz für Listen und Aufzählungen (schachtelbar)
Tabellen (schachtelbar)
Farbnamen
Horizontale Trennlinien
Laufschriften und -bilder (nur MSIE und WebTV)
Frames
Formulare
Eingebettete Objekte
Style-Sheets
JavaScript
DHTML: Dynamic HTML
XML und XSL
Weiterführende Links und Literatur

HTML ist die Standard-Sprache des Internets
Die Dateien erhalten die Endung *.htm oder *.html
Start-Datei ist index.htm. Diese wird immer dann aufgerufen, wenn eine Internet-Adresse oder ein Unterordner ohne weitere Angaben aufgerufen wird. Je nach Browser werden noch weitere Dateinamen ersatzweise aufgerufen. Ist keinerlei Start-Datei vorhanden, wird der gesamte Ordnerinhalt aufgelistet.
Zur Bearbeitung sollte man keinen Texteditor verwenden, da dieser die Sonderzeichen nicht umwandelt. Das standardmäßige FrontPage Express reicht schon vollkommen aus.
Beginnen sollte man mit einer Gliederung, die auf alle weiteren Seiten verlinkt. Damit hat der Benutzer gleichzeitig eine perfekte Übersicht. (Für eine Gliederung kann man Aufzählungen schachteln).

<html>
    <head>
        <title>Fenstertitel</title>
    </head>
    <body>
        Text der HTML-Seite
    </body>
</html>

HTML-Befehlsworte stehen in spitzen Klammern und werden HTML-Tags genannt
Das einleitende HTML-Tag kann weitere Attribute enthalten (z. B. <body bgcolor=...> für die generelle Hintergrundfarbe)
Das ausleitende HTML-Tag hat einen Schrägstrich vor dem Namen und enthält keine weiteren Attribute
Einleitendes und ausleitendes HTML-Tag umschließen einen Inhalt, der weitere Tags enthalten kann (Schachtelung)
Nur sehr wenige HTML-Tags haben kein ausleitendes Tag (z. B. <br>, der einfache Zeilenumbruch, oder <img ...>, das Bild).
Zeilenschaltungen und mehrfache Leerzeichen werden ignoriert.und dienen daher nur zur Formatierung des HTML-Codes, nicht aber der Ausgabe. Bei der Ausgabe wird automatisch am rechten Rand umgebrochen.
- Statt mehrfacher Leerzeichen verwendet man Einrückungen (schachtelbar), Tabellen, verschachtelte Auflistungen, Aufzählungen
- Absätze und Zeilenumbrüche werden durch HTML-Tags angegeben

Standardeinstellungen (Farben, Schrift, Hintergrund, ...)

<title>...</title> Fenstertitel
- Verwendung innerhalb <head>...</head>
<body text=... link=... alink=... vlink=... bgcolor=... background=...>...</body>
- text=: Schriftfarbe von normalem Text (#rrggbb oder Farbname)
- link=: Schriftfarbe von Hyperlinks (#rrggbb oder Farbname)
- alink=: Schriftfarbe von aktiven Links (z. B. ein Link auf einen Frame)
- vlink=: Schriftfarbe von bereits besuchten Links (visited)
- bgcolor=: Hintergrundfarbe (#rrggbb oder Farbname)
- backgrount=: URL eines Hintergrundbildes
- Linker Rand: marginwidh=... leftmargin=... (für NN+IE getrennt)
- Oberer Rand: marginheight=... topmargin=... (für NN+IE getrennt)
- Nur IE, Hintergrundbild nicht mitscrollen: bgproperties=fixed
<basefont face="...,..." size=... color=...> Standardschriftart und -größe (MSIE 3.0+ auch Farbe)
- face=: in Anführungszeichen eine durch Komma getrennte Liste von Schriftarten. Die Ersatz-Schriftarten können angegeben werden, da nicht jeder Benutzer alle Schriften installiert hat.
- size=: Größe, entweder absolut von 1-7 (1=klein, 7=groß) oder besser relativ, z. B. +1, -2,... Standardgröße ist 3. Der Benutzer kann aber im Browser die Standardschriftgröße einstellen (MSIE: Ansicht, Schriftgrad).
- color=#rrggbb oder Farbname (nur MSIE3.0+, daher besser <body text=...> verwenden)
- gültig bis zum nächsten basefont-tag, sonst bis Dokumentende. Kann daher sowohl innerhalb <head>...</head> als auch innerhalb <body>...</body> verwendet werden.
<base href="..." target="...">
- href=: Basis-URL für alle relativen Links
- target=: Basis-Ziel für alle Links ohne target-Angabe
- Verwendung innerhalb von <head>...</head>
<bgsound src=... loop=...> Hintergrundsound
- Gültig nur im MSIE. Für Netscape empfiehlt sich ein Link auf die Datei (mit target="_blank", sonst wird beim Anklicken der Datei das Browserfenster geschlossen).
- src=: URL einer Audiodatei, z. B. *.wav, *.midi, neuerdings auch *.mp3
- loop=: Anzahl oder infinite (unendlich). Standard ist einmaliges abspielen (wenn loop weggelassen wird).
- Verwendung innerhalb von <head>...</head>
<link> Dokumentbeziehung
- href="..." URL absolut oder relativ (relativ empfohlen)
- rel="..." Beziehung zum Zieldokument, z. B. toc/glossary/parent
- rev="..." Beziehung des Zieldokumentes, z. B. toc/glossary/parent
- style="..." Stylesheet
- title="..." Titel für Zieldokument
- type="..." MIME-Typ des Links ("text/css": Zieldokument=Stylesheet)
- urn="..." URN (Platzhalter für zukünfitge HTML-Versionen)
- methods="...,..." (List browserabhängiger Darstellungsmethoden)
- Beispiel: <link style="..." type="text/css">
<meta> Zusätzliche Dokumentinfos
- Verwendung innerhalb <head>...</head>
- name="..." Bezeichner für die Zusatzinformation
- content="..." Inhalt der Zusatzinformation
- http-equiv="..." HTTP-Header-Infos
- scheme="..." Zusatzinfos (neu in HTML 4.0-Spezifikation)
- Beispiel:<meta http-equiv="refresh" content="10"> Lädt alle 10 Sekunden die Seite neu (z. B. Börsenkurse)
- Beispiel:<meta http-equiv="refresh" content="10;url=http://www.xyz.de"> Lädt nach 10 Sekunden eine andere Seite ("Weiterleitung")

Sonderzeichen

Zur Bearbeitung von Internetseiten sollte man keinen Texteditor verwenden, da dieser die Sonderzeichen nicht umwandelt.
die Sonderzeichen "<", ">" und "&"sind für HTML reserviert und müssen daher vor der Verwendung in normalem Text umgewandelt werden in < (less-than), > (greater than) und & (ampersand). (Die spitzen Klammern kennzeichnen die HTML-Tags, das Kaufmanns-Und "&" kennzeichnet Sonderzeichen-Angaben)
andere Sonderzeichen (z. B. ßäöüÄÖÜ) erscheinen nur auf dem jeweiligen System und sollten vor der Verwendung im Internet in systemunabhängige Formate umgewandelt werden (z. B. ß ä ö ü Ä Ö Ü)
Programme wie FrontPage Express übernehmen die Umwandlung automatisch. Dadurch kann man leicht HTML-Code, Programm-Listings, Handy-Klingeltoncodes usw. darstellen.
Eine Sonderstellung nimmt das Leerzeichen ohne Zeilenumbruch ein:   . Es verhindert nicht nur den Zeilenumbruch, sondern wird auch immer dann als Lückenfüller benötigt, wenn HTML-Tags ohne Inhalt nicht funktionieren. Beispiel: mehrfache Leerzeichen, mehrfache leere Absätze (ohne   würden mehrfache Leerzeichen und Leerabsätze ausgefiltert).

Sonderzeichen: < > & ß ä ö ü Ä Ö Ü " •

HTML-Name: < > & ß ä ö ü Ä Ö Ü &quot  

HTML-Nummer: < > & ß ä ö ü Ä Ö Ü "   

Kommentare

Der Kommentar kann auch weitere HTML-Tags umschließen, z. B.
- um diese vorübergehend auszuklammern
- um ein Muster anzulegen, z. B. eine Definition einer Tabellenzeile mit mehreren leeren Spalten
Alles ab <! bis zum nächsten > zählt als Kommentar und wird oft für erweiterte Definitionen verwendet, z. B. <!DOCTYPE...>. Daher müssen z. B. Handy-Klingeltoncodes, die diese Sonderzeichenfolge <! enthalten, umgewandelt werden, indem diese z. B. innerhalb FrontPage Express eingeben werden.

Absätze und Zeilenumbrüche

<p> Absatz </p>
<p align=... title="...">...</p>
- align=: Ausrichtung (center/left/right/justify)
- title="...": Tool-Tip, erscheint beim darüberfahren mit der Maus (nicht NN4, NN erst ab NN6)
- Absätze funktionieren zwar auch ohne das Ende-Tag </p>, dieses sollte aber immer verwendet werden, besonders wenn kaskadierende Stylesheets verwendet werden.
<br> Zeilenumbruch (direkt ohne Leerzeile, kein Ende-Tag. In XML aber werden Tags ohne Ende-Tag direkt mit / abgeschlossen, z. B. <br />)
<nobr>...</nobr> Kein Zeilenumbruch (ggf. Scrollen nötig).
<wbr> Mögliche Umbruchstelle, nur für mit <nobr> formatierten Text.
Nur Netscape 3 und höher: <spacer> Freiraum, folgende Optionen:
- type=vertical/horizontal/block Typ (senkrecht/horizontal/Rechteck)
- size=... Freiraum in Pixeln, bei vertikalem oder horizontalem Freiraum (type=vertical/horizontal)
- height=... Höhe in Pixeln, bei rechteckigem Leerraum (type=block)
- widht=... Breite in Pixeln, bei rechteckigem Leerraum (type=block)
- align="..." Ausrichtung (siehe img-Tag)

Ausrichtungen

<center>...</center> Zentrierte Darstellung
<div align=center/left/right>...<div> zentriert/links-/rechtsbündig
verschiedene HTML-Tags enthalten eigene Ausrichtungs-Attribute, z. B.:
- Absätze (align=center/left/right/justify)
- horizontale Trennlinien (align=center/left/right)
- Bilder (align=center/left/right/top/middle/bottom)
- Tabellen-Zellen (<td align=left/center/right valign=top/middle/bottom/baseline)

Überschriften

<h1>...</h1> bis <h6>...</h6> (1=riesig, 6=Mini)
erweiterbar mit dem Ausrichtungs-Attribut: align=center/left/right

Überschrift <h1>...</h1>

Überschrift <h2>...</h2>

Überschrift <h3>...</h3>

Überschrift <h4>...</h4>

Überschrift <h5>...</h5>

Überschrift <h6>...</h6>

Oft reicht aber auch die fette Darstellung als Überschrift

Textauszeichnungen (Attribute incl. tt, strong, sup, sub)

Fett:
- <b>...</b> (bold)
- oder: <strong>...</strong> (stark hervorgehoben, also fett)
Kursiv:
- <i>...</i> (italic)
- oder: <em>...</em> (extrem marked, stark hervorgehoben ?)
Unterstrichen: <u>...</u> (nicht verwenden wegen Verwechslung mit Links)
~~Durchgestrichen:~~
- <strike>...</strike>
- <s>...</s> (erst ab NN3 und IE4, daher besser <strike>...</strike> verwenden)
^Hochgestellter Text: <sup>...</sup> (Superscript), durch Schachtelung auch mehrfach möglich
_Tiefgesteller Text: <sub>...</sub> (Subscript), durch Schachtelung auch mehrfach möglich
<b><i><u><s><sup> ~~Kombiniert~~ </sup> </s></u></i></b>
Schreibmaschinenschrift:
- <tt>...</tt> (Typewriter Types)
- in FrontPage Express 2.0: Schriftart="Courier New" und Darstellung="Schreibmaschine" (unter Bearbeiten, Zeicheneigenschaften)
- <pre>...</pre> (preformatted text, vorvormatierter Text) Einrückungen und Leerzeichen bleiben erhalten.Optionaler Parameter width=... für Anzahl Zeichen bis zum Umbruch.
- in FrontPage Express 2.0: in der ersten Auswahlliste in der Symbolleiste "Formatiert" wählen. Dieses gilt jedoch gleich absatzweise.
- <code>...</code>
- <kbd>...</kbd> (keyboard, alle außer MSIE3)
- <samp>...</samp> (sample text, alle außer MSIE3)
Blinkend: <blink>...</blink> (Nur Netscape. Der MSIE unterstützt dafür Laufschriften)

Schriften

<big>...</big> Text 1 Stufe größer. Entspricht <font size="+1">...</font> (alle außer MSIE2). Schachtelbar.
<small>...</small> Text 1 Stufe kleiner. Entspricht <font size="-1">...</font> (alle außer MSIE3). Schachtelbar.
<font>...</font>
- color=#rrggbb Textfarbe
- face="...,..." Eine Schriftart oder mehrere (nicht jeder Anwender hat alle Schriften installiert)
- size=...
  - absolut: 1 (klein) bis 7 (riesig)
  - relativ: +1 bis +6 / -1 bis -6, Standard ist 3
  - relativ ist empfohlen, denn der Anwender kann die Standard-Größe einstellen, z. B. im MSIE: Ansicht, Schriftgrad

Weitere Schrift-bezogene Kommandos:

<blockquote>...</blockquote> Zitat/Einrückung, mit zusätzlichen Freiräumen ringsum. Nur bei älteren Browsern kursiv. Läßt sich als Einrückung nutzen und schachteln. (Anmerkung: das blockquote-Tag wird in einigen Foren/UBB zur Darstellung von HTML-Code benutzt, wobei eine automatische Umwandlung der HTML-Sonderzeichen erfolgt. In Foren, wo dies nicht voreingestellt ist, kann man z. B. FrontPage Express zur Umwandlung nutzen.)
<var>...</var> Variablen (kursiv)
<q>...</q> (MSIE4+/HTML4) Kurz-Zitat (fließt mit dem Text, keine zusätzlichen Absätze)
- cite="..." URL auf das zitierte Dokument
<cite>...</cite> Querverweis (Dokument/Bücher/...), kursiv
Definitionslisten: <dl>...</dl>, darin Begriffe <dt>...</dt> und Erklärungen <dd>...</dd> (neue Zeile, eingerückt)
<del>...</del>, nur MSIE ab 4 und HTML4-Standard, markiert gelöschten Text, für Stylesheet-Formatierungen (z. B. unsichtbar=Hintergrundfarbe oder durchgestrichen)
<ins>...</ins>, nur MSIE ab 4 und HTML4-Standard, markiert eingefügten Text, für Stylesheet-Formatierungen (z. B. für rechtliche Dokumente)
<multicol>...</multicol> Spalten. Nur Netscape. Alle Spalten werden gleich breit und annähernd gleich lang dargestellt.
- cols=... Anzahl Spalten
- gutter=... Zwischenraum in Pixeln
- width=... Spaltenbreite in Pixeln
<span>...</span> Umschließt einen Bereich, um ihm Stylesheet-Formateigenschaften zuweisen zu können

Textmarken

Markieren Fragmente im Text als Sprungziel
Tipps für FrontPage Express:
- vorher per Doppelklick ein Wort markieren, dann wird es automatisch als Namensvorschlag übernommen (Wort doppelklicken, Bearbeiten, Textmarke..., OK)
- anschließend Sprungziel erstellen: ein Wort doppelklicken, Symbol "Hyperlink erstellen oder bearbeiten", Geöffnete Seiten: eine davon anklicken, Textmarke, ggf. Anfangsbuchstaben der Textmarke eintippen, die Liste springt dann automatisch dahin
<a name="Name">...</a>
bzw. <a name="NameDerTextmarke" title="Tool-Tip"><b>Überschrift</b></a>
Link zu einer Textmarke: <a href="#Name">...</a>
Beispiel: <a href="#Name" title="Sprung zu ...">Zu Textmarke "Name"</a>
man kann auch Nummern als Textmarken/Sprungzielnamen wählen (nicht so gut)
man kann auch ein neues Dokument aufrufen und direkt an eine Textmarke springen:
- <a href="Dokumentname#Name">...</a>
- auch hier kann man einen Tool-Tip ergänzen (mit title="Tool-Tip")
- oder gleich zu einer neuen URL springen
- Springt man zu einer fremden URL, sollte man ein neues Fenster öffnen (<a href"..." target="_blank">...</a>)

Hyperlinks

Hyperlinks sind Verweise zu anderen Dokumenten/Textstellen/Dateien. Erst duch die Verwendung von Hyperlinks in einem Text wird dieser zu Hypertext, denn damit kann man sekundenschnell zu einem Verweisziel springen. Viel schneller als dies mit Büchern gehen würde. Beispiele:
- Verweis zu einem neuen Dokument: <a href="dokument.htm">...</a>
- Verweis zu einer neuen Adresse: <a href="http://www.xyz.de">...</a>
- Verweis zu einer neuen Textstelle: <a href="#textstelle">...</a>. Beachte das #. Markieren einer solchen Textstelle: <a name="textstelle">...</a>
- Kombiniert: <a href="http://www.xyz.de/dokument.htm#textstelle">...</a>
- relativer Verweis: <a href="../dateien/dokument.htm">...</a>. Mit "../" wird eine Ebene höher gegangen, dann in den Unterordner "dateien".
- Verweis zu einer E-Mail-Adresse: <a href="mailto:name@xyz.de">...</a>.
  - Dabei sind folgende Optionen möglich:
    - subject=... Betreff
    - cc=... Kopie an
    - bcc=... Blindkopie an (Adresse erscheint nicht in den anderen E-Mails)
    - body=... Inhalt
  - Anhängen der Optionen
    - Die erste Option wird mit einem Fragezeichen an die E-Mail-Adresse gehängt: ?
    - Die nachfolgenden Optionen werden untereinander durch ein Kaufmanns-Und getrennt: &
    - Mehrere E-Mail-Adressen (in cc/bcc) untereinander durch Semikolon (;) trennen
  - Beispiele:
    - <a href="mailto:name@xyz.de?subject=...&cc=...&bcc=...&body=...">...</a>.
    - Beispiel mit allen Optionen: <a href="mailto:name1@xyz.de;name2@xyz.de?subject=Betreffzeile&cc=name3@xyz.de;name4@xyz.de&bcc=name5@xyz.de;name6@xyz.de&body=Nachrichtinhalt">...</a>.
    - So sieht's aus: mailto:name1@xyz.de;name2@xyz.de?subject=Betreffzeile&cc=name3@xyz.de;name4@xyz.de&bcc=name5@xyz.de;name6@xyz.de&body=Nachrichtinhalt oder so: Mail an die Autoren
  - Nach Klick auf eine mailto:E-Mail-Adresse wird das E-Mail-Programm aufgerufen, die E-Mail aber nicht automatisch gesendet. Der Benutzer sollte darauf hingewiesen werden, daß nach einem Klick auf "Senden" die E-Mail nur in seinem Postausgang landet und erst noch versendet werden muß, indem er z. B. Outlook Expreß aufruft (Schnellstartleiste) und Senden/Empfangen startet. Oder er soll die E-Mail-Adresse kopieren (rechte Maustaste: Verknüpfung kopieren) und in seinem Internet-E-Mail-Dienst einfügen, dabei aber das mailto: löschen.

Bilder

Ein Bild sagt oft mehr als 1000 Worte, Text ist dagegen genauer und wird schneller geladen. Es gilt eine sinnvolle Kombination aus beidem zu finden.
Es gibt nur 2 Standard-Grafikformate:
- GIF (*.gif): max. 256 Farben, ermöglicht Transparenz und Animationen. Einfache, dafür verlustfreie Komprimierung.
- JPEG (*.jpg): mehr Farben, z. B. für Fotos, keine Transparenz und keine Animationen, starke platzsparende aber verlustbehaftete Komprimierung.
- Unregelmäßige Umrisse gibt es nur bei *.gif (= Transparenz).
- Bei nachträglicher Bildbearbeitung (aufhellen, zoomen) wird die starke *.jpg-Komprimierung sichtbar. Deshalb sollte man wichtige Fotos nach der Komprimierung auch noch im unkomprimierten Format aufbewahren.
<img src="...">
- src="..." URL des Bildes, absolut oder relativ (möglichst immer relativ verwenden, um die Dateien zum Upload nicht ändern zu müssen)
- lowsrc="..." URL eines niedrig aufgelösten Bildes, das zuvor geladen wird und dann durch das hochaufgelöste überschrieben wird. Nur NN und MSIE ab 4.
- align=left/right/center/top/middle/bottom Ausrichtung links/rechts/zentriert/oben/mittig/unten
- alt="..." Alternativ-Text/Tool-Tip
- border=... Rahmendicke in Pixeln
- width=... Breite in Pixeln (nicht erforderlich, beschleunigt und beruhigt aber den Seitenaufbau)
- height=... Höhe in Pixeln (nicht erforderlich, beschleunigt und beruhigt aber den Seitenaufbau)
- hspace=... horizontaler Freiraum in Pixeln (vor allem bei Verwendung von align)
- vspace=... senkrechter Freiraum in Pixeln (vor allem bei Verwendung von align)
- longdesc="..." URL einer Beschreibung (für nichtvisuelle Browser), nur HTML4-Spezifikation
- ismap Das Bild ist eine anklickbare Karte
- usemap="#..." Name der Kartendefinition
Videos im <img>-Tag (nur MSIE), zusätzliche Optionen:
- dynsrc="..." URL des Videos
- controls Fügt Steuerelemente hinzu
- loop=Anzahl/infinite Anzahl Wiederholungen/unendlich
- start="fileopen"/"mouseover"/"fileopen,mouseover" Start nach Ladeende/bei Mouseover/beides
<map name="...">...</map> Definiert eine Karte, umschließt die <area>-Tags
<area> Definiert einen anklickbaren Bereich innerhalb einer Karte
- coords=...,... Liste von Koordinaten (unterschiedlich je nach Form)
  - bei shape=rect oder rectangle x1,y1,x2,y2 (1=obere linke Ecke, 2 = untere rechte Ecke)
  - bei shape=circ oder circle x,y,r (x,y=Zentrum, r=Radius)
  - bei shape=poly oder polygon x1,y1,x2,y2,x3,y3,... (für jeden Punkt eine x/y-Koordinate)
- shape=rect/rectangle/circ/circle/poly/polygon Form=Rechteck/Kreis/Vieleck
- href="..." Ziel-URL (Link)
- nohref Maussensitiver Bereich ohne Aktion
Es sollte immer die Größe des Bildes mit angegeben werden, damit sich der Browser vor dem Laden des Bildes darauf einstellen kann und schon vor dem Laden des Bildes den entsprechenden Platz freihält. Dann verschiebt sich nach dem Laden des Bildes das Layout nicht mehr (stört beim Betrachten). FrontPage 2.0 macht dies automatisch. Weitere Möglichkeiten der Größenangabe:
- Größenänderung (Ladezeit bleibt gleich. Tip: genaue Vielfache sehen besser aus.)
- Verzerrung des Seitenverhältnisses
Wurde in der Bilddatei die Größe geändert, müssen die Größenangaben angepaßt werden, sonst erscheint das Bild durch die veralteten, falschen Angaben verzerrt.
Bilder erscheinen normalerweise mitten im laufenden Text. Es empfiehlt sich die Verwendung von Absätzen (innerhalb derer das Bild z. B. links ausgerichtet werden kann) oder Tabellen.
Bilder können auch in den Hintergrund geladen werden. Gut: kleines Bild (Ladezeit) und hoher Kontrast zur Schrift:
- bei dunkler Schrift blasser Hintergrund (Bild ggf. aufhellen)
- bei heller Schrift kräftiger Hintergrund
Grafiken als Verweis: innerhalb <a hef="...">...</a> platzieren, z. B.:
- <a hef="..."><img src="klein.gif"></a>
- <a hef="..."><img border=0 title="Sprung zu ..." src="klein.gif"></a>
Thumbnails: Bild-Vorschau. Dazu vorher eine kleine und eine große Version speichern.
- <a href="groß.jpg"> <img src="klein.gif"> </a>
Favoriten-Icon (erscheint in Adreßzeile und Favoriten des Browsers, meist IE):
- Empfehlung: 16x16 Pixel, 16 Farben: kostet wenig Ladezeit. Umwandlung am Besten mit http://www.irfanview.com:
  - Menü Bild, Größe ändern, neue Größe: 16x16, Resample benutzen (bessere Qualtität), OK
  - Menü Bild, Farbtiefe reduzieren, 16 Farben, OK
- Platzierung:
  - im Web-Hauptverzeichnis als favicon.ico
  - oder Link im head angeben: <link rel="shortcut icon" href="pfad/dateiname.ico">.

Auflistungen (Bullet-Listen, schachtelbar)

<ul>...</ul> (unordered list) Umschließt die Listeneinträge
<li>...</li> Listeneintrag
- type=disc/circle/square Format=Punkt/Kreis/Quadrat
Grafische Bullets werden nicht unterstützt. Siehe dazu Tabellenersatz für Listen und Aufzählungen
FrontPage Express:
- Aufzählung mit dem Symbol "Aufzählung" starten
- weitere Zeilen mit Return
- tiefere Ebenen durch mehrfaches Anklicken der Symbole "Einzug verkleinern" und "Einzug vergrößern" wählen.
  - Dabei erscheinen abwechselnd Aufzählung und Einrückung (ohne Bullets).
  - Ggf. vorher die gewünschten Zeilen markieren, die eingerückt werden sollen.
  - Bei Mehrfachmarkierung von Zeilen erhalten diese alle die gleiche Ebene, daher unterschiedliche Ebenen getrennt markieren.
Ende durch Return(s) oder Backspace(s) (nur bei leerer Zeile)
Mehrfache Returns oder Backspaces (nur bei leerer Zeile) wandern jeweils eine Ebene zurück, dabei wird zwischen Einrückung und Gliederung gewechselt.

Auflistung mit Punkten (type=disc):

Listenpunkt

Listenpunkt

nächste Ebene

Auflistung mit Kreisen(type=circle):

Listenpunkt

Listenpunkt

nächste Ebene

Auflistung mit Quadraten (type=square):

Listenpunkt

Listenpunkt

nächste Ebene

Auflistung, ohne Typangabe:

Listenpunkt

nächste Ebene

nächste Ebene

nächste Ebene

...

Aufzählungen (Numerierungen, schachtelbar)

<ol>...</ol> (ordered list) Umschließt die Listeneinträge
- type=1/A/a/I/i Typ "1,2,3,4..." / "A,B,C,D..." / "a,b,c,d...." / "I,II,III,IV..." / "i,ii,iii,iv..." (röm. Zahlen groß/klein)
- start=... Startnummer
<li>...</li> Listeneintrag
- type==1/A/a/I/i Typ "1,2,3,4..." / "A,B,C,D..." / "a,b,c,d...." / "I,II,III,IV..." / "i,ii,iii,iv..." (röm. Zahlen groß/klein)
- value=... Startnummer (nachfolgende Einträge werden angepaßt)

Aufzählung mit Nummern (type=1):

Aufzählungspunkt

Aufzählungspunkt

nächste Ebene

Aufzählung mit Großbuchstaben (type=A):

Aufzählungspunkt

Aufzählungspunkt

nächste Ebene

Aufzählung mit Kleinbuchstaben (type=a):

Aufzählungspunkt

Aufzählungspunkt

nächste Ebene

Aufzählung römisch groß (type=I):

Aufzählungspunkt

Aufzählungspunkt

nächste Ebene

Aufzählung römisch klein (type=i):

Aufzählungspunkt

Aufzählungspunkt

nächste Ebene

Aufzählung mit Startwerten:

Startwertangabe in der Liste

Aufzählungspunkt

Startwertangabe im Listenelement

Standardmäßig wird jede Ebene mit Nummern (1,2,...) numeriert. Ggf. muß man für jede Ebene den Typ neu mit angeben.
Andere Aufzählungsarten, z. B. mit Klammern "a)", gibt es nicht. Dafür sollte man einen Tabellenersatz wählen.
FrontPage Express: siehe oben (Auflistungen)

Tabellenersatz für Listen und Aufzählungen (Beispiel, schachtelbar):

Überschrift:
•		Punkt 1
•		Punkt 2

<table border="0">
    <tr>
        <td colspan="3"><b>Überschrift:</b></td>
    </tr>
    <tr>
        <td valign="top">&#149;</td>
        <td>&nbsp;</td>
        <td>Punkt 1</td>
    </tr>
    <tr>
        <td valign="top">&#149;</td>
        <td>&nbsp;</td>
        <td>Punkt 2</td>
    </tr>
</table>
<p></p>

Dieser Tabellenersatz ist auch geeignet für grafische Bullets oder andere Aufzählungsarten, z. B. mit Klammern "a)"
Tabellen sind schachtelbar
Um Tabellen in FrontPage Express zu schachteln, die ganze Tabelle markieren und innerhalb einer Zelle einfügen.
FrontPage Express fügt nach dem editieren   innerhalb <p></p> ein, das führt zu einer Anzeige von 2 Leerzeilen zwischen 2 Tabellen. Dies muß dann jeweils in einem Texteditor gelöscht werden. Statt die 1. Tabellenzeile über 3 Spalten laufen zu lassen könnte man die Überschrift auch vor der Tabelle plazieren, aber dann setzt FrontPage Express diese in eigene <p>...</p>-Zeichen, so daß nach der Überschrift eine Freizeile entstehen würde. Dann müßte man nach einer Bearbeitung mit FrontPage Express vor und hinter der Überschrift löschen (das wäre doppelt soviel aufwand wie jeweils 1x   zu löschen).

Tabellen (schachtelbar)

Beispiel:

Überschrift
Ü1	Ü2
Zelle1	Zelle2
Zelle3	Zelle4

<table>

  <caption>Überschrift</caption>

<tr><!-- Kommentar: Zeile mit Überschrifts-Zellen -->
    <th>Ü1</th>
    <th>Ü2</th>
</tr>

<tr><!-- Kommentar: Zeile 1 -->
    <td>Zelle1</td>
    <td>Zelle2</td>
</tr>

<tr<!-- Kommentar: Zeile 2 -->>
    <td>Zelle3</td>
    <td>Zelle4</td>
</tr>

</table>

Eine Tabelle besteht hauptsächlich aus dem table-Tag, das mehrere Zeilen umschließet (<tr>-Tag), welches wiederum mehrere Zellen umschließt (<td>-Tag).
Zellen, die eine Überschrift beinhalten, werden statt mit dem <td>-Tag mit dem <th>-Tag definiert.
Tips für FrontPage Express 2.0:
- Von Zelle zu Zelle springen: Tab
- Tabelle erweitern: in letzter Zelle Tab drücken
- Zeilen/Spalten markieren: Tabellenkante mit der Maus anfahren, bis diese zu einem Pfeil wird, dann anklicken.
- Zeilen/Spalten einfügen:
  - Tabelle am Ende erweitern: in letzter Zelle Tab drücken
  - die Zeilen markieren, die runterrutschen müssen (Maus an Tabellenkante, bis diese zu einem Pfeil wird, dann klicken und runterziehen). Leerzeile nicht mit markieren!
  - Kopieren (nicht Ausschneiden)
  - die Zeilenmarkierung um eine Reihe tiefergesetzt wiederholen
  - Einfügen
- Um Tabellen zu schachteln, die ganze Tabelle markieren und innerhalb einer Zelle einfügen.
<table>...</table> Umschließt die Tabellendefintion
- align=left/right/center Ausrichtung links/rechts/zentriert (zentriert wird nicht von allen Browsern unterstützt, besser z. B. center-Tag verwenden)
- background="..." URL einer Hintergrundgrafik (im IE für Tabelle, im NN für Rahmen)
- bgcolor=#rrggbb oder Farbname Hintergrundfarbe
- border/border=... Mit Rahmen/Rahmendicke in Pixeln (ohne das Attribut border fehlt der Rahmen, es entsteht eine sogenannte "blinde" Tabelle)
- cellpadding=... Leerraum in Pixeln (zwischen Zellinhalt und Rand)
- cellspacing=... Zwischenraum in Pixeln (zwischen den Zellen, Standard ist 2)
- frame=void/above/below/hsides/lhs/rhs/vsides/box/border Rahmen (void=keine, above=oben, below=unten, hsides=oben + unten, vsides=links + rechts, lhs=links, rhs=rechts, box=rundum, border=rundum). Nicht von NN4 unterstützt.
- height=.../...% Höhe in Pixeln oder in Prozent vom Fenster
- width=.../...% Breite in Pixeln oder in Prozent vom Fenster
- hspace=... Freiraum links + rechts in Pixeln
- vspace=... Freiraum oben + unten in Pixeln
- rules=none/groups/rows/cols/all Trennlinien keine/gruppenweise/zeilenweise/spaltenweise/alle (nicht von NN4 unterstützt)
- summary="..." Zusammenfassung für nicht-visuelle browser
- bordercolor=#rrggbb oder Farbname (nur MSIE) Farbe der mittigen 3D-Tabellenumrandungs-Linie
- bordercolordark=#rrggbb oder Farbname (nur MSIE) Farbe der dunklen 3D-Tabellenumrandungs-Linie
- bordercolorlight=#rrggbb oder Farbname (nur MSIE) Farbe der hellen 3D-Tabellenumrandungs-Linie
<caption>...</caption> Tabellenüberschrift. Muß unmittelbar auf das <table>-Tag folgen.
- align=top/bottom/left/right/center
- summary="..." Zusammenfassung, nur HTML-4.0-Spezifikation, für Sprach- oder Braille-Browser.
- valign=top/bottom Vertikale Ausrichtung der Überschrift, nur MSIE ab 3
<tr>...</tr> Tabellen-Zeile. Umfaßt mehrere Zellen (<td> oder <th>).
- align=left/center/right Ausrichtung links/zentriert/rechts
- valign=top/middle/bottom/baseline Vertikale Ausrichtung oben/mittig/unten/Grundlinie
- bgcolor=#rrggbb oder Farbname Hintergrundfarbe
- bordercolor=#rrggbb oder Farbname (nur MSIE) Farbe der mittigen 3D-Tabellenumrandungs-Linie
- bordercolordark=#rrggbb oder Farbname (nur MSIE) Farbe der dunklen 3D-Tabellenumrandungs-Linie
- bordercolorlight=#rrggbb oder Farbname (nur MSIE) Farbe der hellen 3D-Tabellenumrandungs-Linie
<td>...</td> Tabellen-Zelle
- align=left/center/right Ausrichtung links/zentriert/rechts
- valign=top/middle/bottom/baseline Vertikale Ausrichtung oben/mittig/unten/Grundlinie
- background="..." URL einer Hintergrundgrafik
- bgcolor=#rrggbb oder Farbname Hintergrundfarbe
- colspan=... Anzahl spaltenweise zusammenzufassender Zellen (wenn sich eine Zelle über mehrere Spalten in die Breite erstrecken soll)
- rowspan... Anzahl zeilenweise zusammenzufassender Zellen (wenn sich eine Zelle über mehrere Zeilen in die Höhe erstrecken soll)
- height=.../...% Zell-Höhe in Pixeln oder in Prozent der Tabelle
- width=.../...% Zell-Breite in Pixeln oder in Prozent der Tabelle
- nowrap Kein Zeilenumbruch
- bordercolor=#rrggbb oder Farbname (nur MSIE) Farbe der mittigen 3D-Zellenumrandungs-Linie
- bordercolordark=#rrggbb oder Farbname (nur MSIE) Farbe der dunklen 3D-Zellenumrandungs-Linie
- bordercolorlight=#rrggbb oder Farbname (nur MSIE) Farbe der hellen 3D-Zellenumrandungs-Linie
<th>...</th> Tabellen-Überschrifts-Zelle. Attribute wie <td>. Inhalt aber fett und zentriert.
<col> und <colgroup>...</colgroup> nur MSIE ab 4, siehe Buch HTML kurz und gut
<thead>...</tfoot> Tabellen-Kopf. Nur MSIE4+/HTML4. Umschließt die Kopf-Zeilen.
- align=left/center/right/jusitfy/char Ausrichtung links/zentriert/rechts/blocksatz/an einem Zeichen (siehe char=...)
- valign=top/middle/bottom/baseline Vertikale Ausrichtung oben/mittig/unten/Grundlinie
- char=... Ausrichtungs-Zeichen, z. B. Dezimal-Komma
- charoff=... Zeichenanzahl bis zum Ausrichtungszeichen
<tfoot>...</tfoot> Tabellen-Fuß. Nur MSIE4+/HTML4. Umschließt die Fuß-Zeilen. Attribute wie <thead>.
<tbody>...</tbody> Tabellenkörper. Nur MSIE4+/HTML4. Umschließt die Haupt-Zeilen. Attribute wie <thead>.

Farbnamen

Es gibt 16 Standardfarben (ab IE2). Mit * markiert die dither-losen Farben (zuzüglich cyan, magenta):
- aqua (Wasser)*
- black (Schwarz)*
- blue (Blau)*
- fuchsia (Fuchsie)*
- gray (Grau)
- green (Grün)
- lime (Limone)*
- maroon (Kastanienbraun)
- navy (Marine)
- olive (Oliv)
- purple (lila)
- red (Rot)*
- silver (Silber)
- teal (Krickentengrün)
- white (Weiß)*
- yellow (Gelb)*
Insgesamt sind 140 Farbnamen definiert, siehe Anhang im Buch "HTML kurz und gut" (ab IE3/NN2)

Horizontale Trennlinien

<hr>
- width=... Linienlänge in Pixeln oder %, z. B. width=75%
- size=... Lininendicke in Pixeln
- align=center/left/right Ausrichtung zentriert/links/rechts, falls die Linie kürzer als die Fensterbreite ist.
- noshade Linie ohne Schatten darstellen

Laufschriften und -bilder (nur MSIE und WebTV)

<marquee>...</marquee>
- align=top/middle/bottom
- behavior=scroll/slide/alternate (wiederholend/1x/hin-und-her)
- bgcolor=#rrggbb oder Farbname (Hintergrundfarbe)
- direction=left/right (Laufrichtung links/rechts)
- height=Anzahl (Texthöhe in Pixeln)
- width=Anzahl (Breite in Pixeln)
- hspace=Anzahl (Freiraum links+rechts in Pixeln)
- vspace=Anzahl (Freiraum über+unter in Pixeln)
- loop=Anzahl/infinite (Wiederholungsanzahl/unendlich)
- scrollamount=Anzahl (Scrollweite in Pixel je Bewegung)
- scrolldelay=Anzahl (Verzögerung in Millisekunden je Bewegung)
interessant wird es, wenn man ein Bild einfügt

Frames

Frames sind Rahmen, in denen unterschiedliche HTML-Dateien dargestellt werden. Hauptsächlich, um Navigation und Inhalt zu trennen. Links in dem einen Rahmen verweisen dann auf Dokumente, die im anderen Rahmen dargestellt werden. Fremde Inhalte sollten aber in einem neuen Fenster dargestellt werden (mittels target="_blank"), um die Verantwortung sauber abzugrenzen.
<frameset>...</frameset> Umschließt die Rahmen (Frames) oder weitere Framesets
- zwischen </head> und <body>
- unbedingt mit </frameset> abschließen, sonst zeigt NS4 nichts mehr an
- cols="...,..." Spaltengröße in Pixeln/%/* für Restwert. Es lassen sich auch mehr als 2 Spalten angeben.
- rows="...,..." Reihen in Pixeln/%/* für Restwert. Es lassen sich auch mehr als 2 Spalten angeben.
- entweder Spalten (cols) oder Zeilen/Reihen (rows) verwenden
- border=... Rahmengröße in Pixeln
- bordercolor=#rrggbb oder Farbname Rahmenfarbe (ab NN3/MSIE4)
- frameborder=1 frameborder=yes / frameborder=0 frameborder=no (doppelt für MSIE3+/HTML4 und NN3+/IE4) 3D-Trennlinie ein/aus
- framespacing=... Rahmendicke in Pixeln, nur MSIE
<frame>
- innerhalb <frameset>...</frameset>
- name="..." Name zur zur Ansteuerung mittels target-Attributen (von Links)
- src="..." URL der in diesem Rahmen darzustellenden Ausgangsdatei (möglichst nur relativ angeben)
- bordercolor=#rrggbb oder Farbname Rahmenfarbe (ab NN3/MSIE4)
- frameborder=1 frameborder=yes / frameborder=0 frameborder=no (doppelt für MSIE3+/HTML4 und NN3+/IE4) 3D-Trennlinie ein/aus
- longdesc=URL Link zu einem beschreibenden Dokument (für nichtvisuelle Browser)
- marginwidth=... horizontale Ränder in Pixeln (NN/HTML4 Minimum 1, IE Minimum 0)
- marginheight=... senkrechte Ränder in Pixeln (NN/HTML4 Minimum 1, IE Minimum 0)
- noresize Unveränderliche Rahmengröße (sollte man vermeiden, da der Anwender ja unterschiedliche Schriftgrößen einstellen kann, z. B. MSIE Ansicht, Schriftgrad)
- scrolling=yes/no/auto Scrollbalken ja/nein/bei Bedarf (bei NN6 nur an starren Inhalt angepaßt, nicht an dynamischen)
<iframe>...</iframe> Inline-Frames, nur MSIE und HTML4. Sollte man vermeiden, da sich sonst der Standard-Rahmeninhalt nicht wiederherstellen läßt.
<noframes>...</noframes> Ersatztext. Erscheint, wenn ein Browser keine Frames unterstützt.

Formulare und Formular-Elemente

<form>...</form> Formular, umschließt die Formularelemente.
- (weitere Attribute siehe Buch HTML kurz und gut)
- target="..." Frame für die Formular-Ausgabe. Laut "HTML kurz und gut" nur MSIE, laut SelfHTML aber auch schon ab NS2. Beachten Sie dazu die SelfHTML-Hinweise "Transitional" in "Formulare difinieren"/"Allgemein" und /"Zielfenster".
<fieldset>...</fieldset> Feldgruppen, nur MSIE ab 4 und HTML4 und NS6. Zieht einen Rahmen um die eingeschlossenen Felder.
<legend>...</legend> Beschriftungstext, der oben im Fieldset-Rahmen erscheint. Kann HTML-Code enthalten.
Button/Knopf: <input type=button> (ab NN4/IE4)
- name="..." Bezeichner
- value="..." Ausgangswert (Knopf-Beschriftung)
Button, modern (MSIE4, NS6): <button>...</button> Der HTML-Code innerhalb des Tags wird in den Button übernommen. Läuft nicht mit NS4. Daher dafür zusätzlich etwas vorsehen!
- type="submit" für Absenden-Button, "reset" für Abbrechen-Button
Checkbox/Ankreuz-Kästchen: <input type=checkbox>
- name="..." Bezeichner
- value="..." Übergabewert (Standardwert=on)
- checked Falls das Kästchen standardmäßig angekreuzt sein soll
File/Datei: <input type=file>
- name="..." Bezeichner
- value="..." Ausgangsdateiname
- accept="...,..." MIME-Typ-Liste, durch Komma getrennt (bestimmt die Dateitypen)
Hidden/Versteckt: <input type=hidden>
- name="..." Bezeichner
- value="..." Übergabewert
Image/Bild (ersetzt automatisch den Submit-Button): <input type=image>
- src="..." URL des Bildes (absolut oder relativ)
- name="..." Parameter-Name
- align=top/middle/bottom Ausrichtung oben/mittig/unten
- um normale Buttons durch Bilder zu ersetzen, einfach einen Link mit einem Bild als Inhalt schreiben: <a href="#"><img src="..."></a>. Dabei kann man sich aussuchen, ob man den Event-Handler onclick="..." benutzt oder href="javascript:...". Bei onclick sollte href="#" sein (noch nicht getestet, sonst "javascript:void(0)", oder "javascript:,", bei letzterem Semikolon nicht vergessen)
Password/Paßwort (Texteingabefeld mit Sternchen): <input type=password>
- name="..." Bezeichner
- size=... Darstellungsgröße in Zeichen (es wird ggf. gescrollt)
- maxlength=... Maximalanzahl Zeichen, die eingegeben werden können
- value="..." Ausgangswert
- es erfolgt keine Verschlüsselung, also keine echte Sicherheit
Radiobutton/Radioknopf (rund, immer nur einer auswählbar!): <input type=radio>
- name="..." Bezeichner. Alle Radiobuttons einer Gruppe müssen den gleichen Bezeichner haben!
- value="..." Übergabewert. Jeder Radiobutton einer Gruppe sollte natürlich einen anderen Wert haben.
- checked Voreinstellung Angewählt. Sollte natürlich nur bei einem der Radiobuttons innerhalb einer Gruppe stehen.
- JavaScript Event-Handler: Soll das Objekt live reagieren (nicht erst beim Absenden des Formulars), so ist nicht der onChange-Handler zu benutzen (reagiert erst beim Verlassen der Radiobuttongruppe), sondern onClick und onKeyup (mit gleicher Funktion, für Opera Reaktion auf Pfeiltasten)
Resetbutton/Rücksetzknopf (Setzt das Formular auf die Standardvorgaben zurück): <input type=reset>
- value="..." Beschriftung (Standard="Reset")
Submitbutton/Übergabeknopf (OK-Knopf, übergibt das Formular)): <input type=submit>
- value="..." Beschriftung (Standard="Submit")
  Vergleich Submit-Button (<input type=submit>) gegen normalen Button (<input type=button>)
  - Submit-Button regiert auf Return-Taste, egal an welcher Stelle im Forumular sie gedrückt wurde. Dies führt oft zu verfrühtem Abschicken des Formulars.
  - Standard-Button benötigt Event-Handler onClick="..." und funktioniert daher nur bei eingeschaltetem JavaScript.
  - Submit-Button benötigt dagegen keinen Event-Handler onClick="..." und funktioniert daher auch bei ausgeschaltetem JavaScript.
  - Ausweg aus dieser Zwickmühle: Event-Handler onSubmit im Formular, der vor dem Abschicken eine Rückfrage stellt und dementsprechend true oder false zurückgibt (in diesem Beispiel mit zusätzlich mit Überprüfung auf leere Felder, das aus SelfHTML übernommen und mit der Rückfrage ergänzt wurde):
```
<html><head><title>Test</title>
<script language="JavaScript">
function CheckInput(){
  // auf leere Felder überprüfen
  for(i=0; i<document.forms[0].elements.length; ++i)
    if(document.forms[0].elements[i].value == ""){
      alert("Es wurden nicht alle Felder ausgefuellt!");
        document.forms[0].elements[i].focus();
        return false;
    }
  // Sicherheitsrückfrage, falls zu früh Return-Taste betätigt wurde
  return confirm("Formular jetzt absenden?")
}
</script>
</head><body>
<form onSubmit="return CheckInput();">
Feld 1: <input size=30><br>
Feld 2: <input size=30><br>
Feld 3: <input size=30><br>
<input type=submit>
</form>
</body></html>
```
    Überprüfen Sie das Beispiel, indem Sie alle Felder ausfüllen und in irgendeinem Feld auf Return drücken.
Textfeld/Eingabezeile (1zeilig): <input type=text>
- name="..." Bezeichner
- size=... Darstellungsgröße in Zeichen (es wird ggf. gescrollt)
- maxlength=... Maximalanzahl Zeichen, die eingegeben werden können
- value="..." Ausgangswert
Mehrzeilige Eingabefelder: <textarea>...</textarea>
- Umschließt den Vorgabetext
- cols=... Breite in Zeichen
- rows=... Höhe in Zeilen
- name="..." Bezeichner
- wrap=off/virtual/physical/soft/hard Wortumbruch (off=manuell, virtutal=Darstellung aber keine Übergabe, physical=Darstellung und Übergabe, soft=virtual, hard=physical)
Mehrfachauswahlfeld
- <select>...</select> Umschließt die einzelnen Optionen (oder Options-Gruppen).
  - multiple Erlaubt gleichzeitige Mehrfachauswahlen (z. B. mit gedrückter Shift- oder Strg-Taste).
  - name="..." Bezeichner
  - size=... Zeilenanzahl (Standardmäßig 1=entweder Pulldown-Menü bei Einfachauswahlmöglichkeit, sonst: Scroll-Menü)
- <optgroup label="...">...</optgroup> Nur HTML4-Standard. Umschließt mehrere Optionen zu einer Gruppe und gibt ihnen eine Zwischen-Überschrift (label"...").
- <option>...</option>
  - value="..." Übergabewert. Standardmäßig wird der Inhalt von <option>...</option> übergeben.
  - selected Diesen Eintrag standardmäßig einstellen.
  - width=... Objektbreite in Pixeln (???)

<label for="...">...</label> Nur MSIE/HTML4, Bezeichnungen für mit id="..." versehene Formularelemente

Eingebettete Objekte

In eine Website lassen sich Objekte einbinden (z. B. Multimediadateien), die eigene PlugIns zur Darstellung benötigen.
<applet>...</applet> Bettet ein Java-Applet ein. Attribute siehe Buch "HTML kurz und gut".
<embed>...</embed> Bettet ein Objekt ein. Attribute siehe Buch "HTML kurz und gut".
<noembed>...</noembed> Ersatztext. Erscheint, wenn das Objekt nicht dargestellt werden kann. Verwendung innerhalb <embed>...</embed>
<object>...</object> Bettet ein Objekt ein. Attribute siehe Buch "HTML kurz und gut". Unterscheidet sich vom embed-Tag auch durch die unterstützten Browser.
<param>...</param> Gibt innerhalb eines applet- oder object-Tags eienen Parameter an. Attribute siehe Buch "HTML kurz und gut".

Cascading Style-Sheets

Cascading Style-Sheets sind Formatvorlagen für die einzelnen HTML-Elemente.

innerhalb einer HTML-Datei: <style "type=text/css">...</style> innerhalb <head>...</head>, zur Sicherheit als Kommentar:

<html>
    <head>
        <title>Fenstertitel</title>
        <style type="text/css">
        <!-- /* ... Style-Sheet-Angaben ... */
            /* ... */
        //-->
        </style>
    </head>
    <body>
    </body>
</html>

in einer separaten CSS-Datei: <link rel=stylesheet type="text/css" href="css/style.css"> innerhalb <head>...</head>, Beispiel:

<html>
    <head>
        <title>Fenstertitel</title>
        <link rel=stylesheet type="text/css" href="css/style.css"> 
        <style type="text/css">
        <!--
            /* ... zusätzliche Stylesheet-Angaben ... */
        //--> </style>
    </head>
    <body>
    </body>
</html>

Beispiele:

h1, h2 { font-family:Helvetica; color:#FF0000; }Vorne eine durch Komma getrennte Liste der HTML-Tags, dahinter in geschweiften Klammern eine durch Semikolon getrennte Liste von Style-Angaben.
p.normal { font-size:10pt; color:black; } p.gross { font-size:12pt; color:black; }Unterklassenbildung eines HTML-Tags. Ansprechen durch <p class="normal">Normaler Text</p> <p class="gross">Grosser Text</p> . Für eine Unterklasse, die für alle HTML-Tags gültig ist, den Tag-Namen all verwenden oder ganz weglassen und mit dem Punkt beginnen.
Für größere Textabschnitte sollte man Unterklassen für das div-Tag definieren, z. B: div.rot {color:red; }
Größenangaben sollten besser prozentual erfolgen, z. B. font-size:150%, besonders wenn man mit all arbeitet (dann sind nicht plötzlich alle Überschriften gleich groß)
Angaben für verschachtelte Tags: h1 { color:red; } h1 i { color:blue; }Eine kursive Überschrift (h1 + i) erscheint dann blau.
Unabhängige Formate werden mit einem # definiert: #fettkursiv { font-weight:bold; font-style:italic; } Ansprechen durch: <p id="fettkursiv">Fettkursiver Text</p>
Pseudo-Formate werden mit einem : definiert:
a:link { color:#FF0000; } a:visited { color:#990000; } a:active { color:#0000FF; } a:hover { color:#FFFF00; }Ansprechen durch: <p id="fettkursiv">Fettkursiver Text</p>
Damit in NS6 der hover-Effekt funktioniert, darf bei gleichzeigier onmouseover-Definition darin keine Return-Anweisung verwendet werden (Statustext funktioniert dann allerdings nicht mehr).
Weitere Pseudo-Formate:
- :first-line (erste Absatzzeile)
- :first-letter (erstes Absatzzeichen)
- :before (vor einem Tag, z. b. p.Hinweis:before { content: "Hinweis: " }
- :after (nach einem Tag, z. b. p.veraltet:after { content: " nicht mehr aktuell" }
Soll eine Angabe für alle Textelemente gelten, so wählt man das body-Tag: body { font-family:Avantgarde,Arial,Helvetica }

Fest vordefinierte Schriftfamilien (je nach Browser andere Schriften):

Name	Beschreibung	Zum Vergleich
serif	mit Serifen (kursiv)	Times New Roman (kursiv)
sans-serif	ohne Serifen (kursiv)	Arial (kursiv)
cursive	Kursivschrift (kursiv)
fantasy	Fantasieschrift (kursiv)
monospace	Schreibmaschinenschrift (kursiv)	Courier New (kursiv)

Tipp 1: Vergleichen Sie die Anzeige mit mehreren Browsern, z. B. Opera. Die Anzeige ist unterschiedlich!

Tipp 2: Wenn Sie den Namen einer Schrift angeben, geben Sie dahinter immer eine passende Schriftfamilie an (für den Ersatz-Fall).

Manchmal kommt es auf die Reihenfolge der Formatdefinition an, deshalb wird ein geordneter Baum empfohlen. Meine Erfahrung dazu:
- A:hover muß nach A:visited stehen, sonst haben besuchte Links keinen Hover-Effekt mehr!
- A:active muß ebenfalls nach A:visited stehen, hat sonst keine Wirkung!
- Wenn A:hover nach A:active, dann haben aktive Links auch einen Hover-Effekt
- Wenn A:hover vor A:active, dann haben aktive Links keinen Hover-Effekt (sieht evtl. besser aus)
Schnellformatierung im Text: <p style="margin-left:1.5cm; ">Ein Textabsatz</p> (führt bei NS4 meist zum Absturz, mit NS4 testen!)
Bereiche (hier: mitten im Text): <span style="font-style:italic; color:red;">rote Worte mitten im Text</span>
Weitere Infos siehe Buch bzw. Onlineversion von SelfHTML, unter "CSS Style-Sheets"

JavaScript

Programmiersprache für das Internet
Weitere Infos siehe Buch bzw. Onlineversion von SelfHTML.
<script>...</script>
- type="..." Inhaltstyp, z. B. "text/javascript". Erforderlich in HTML4.0
- language="..." Sprache, z. B. "JavaScript" oder "VBScript". Veraltet, besser type-Attribut verwenden.
- src="..." URL eines extern zu ladenden (einfügenden) Script-Datei (entgegen Buch "HTML kurz und gut" nicht nur Netscape, sondern auch andere Browser)
Den Bereich innerhalb von <script>...</script> mit HTML-Kommentar ausklammern: , um
- a) den Skriptbereich für nicht-Skript-fähige Browser auszuklammern
- b) die Verwendung von HTML-Tags in den JavaScript-Strings zu ermöglichen (insbesondere "</script>")
```
<script type="text/javascript">

</script>
```
Orte für Skripte:
- im head-Bereich: Skript wird nicht aufgeführt. Aufrufe nur mittels Event-Handlern in HTML
- im body-Bereich: Skript wird ausgeführt.
Fehler in Skripten:
- Skriptausführung wird rigoros angehalten. Fortsetzung unmöglich.
- MSIE mit installierter Entwicklungsumgebung bietet Debugger-Aufruf an, zeigt die Zeile, falls möglich.
- Netscape zeigt in Statuszeile "type in javascript: in URL", wenn man dies macht, kommt eine Konsole.
- Oft fehlt die Angabe, in welchem Frame der Fehler auftrat. Dann Gesamtquelltext und Rahmenquelltexte durchsuchen, z. b. erzeugen Quelltext oder Datei im rechten Frame.
- Häufigste Ursachen:
  - a) = statt == verwendet
  - b) String nicht abgeschlossen ("...")
  - c) ()-Klammern innerhalb einer Zeile passen nicht
  - d) {} falsch, dann aber Fehlermeldung an anderer Stelle im Quelltext. Dann hilft nur noch zu überlegen, welche Zeilen zuletzt geändert wurden, und diese dann auf {} zu untersuchen.
- Tips gegen diese Fehler
  - a und c) Bei Zuweisungen und Vergleichen sollten immer Leerstellen gelassen werden. Beispiele
    - a == b ? c + d : e - f
    - x = (a + 3) * 4
    - y = a == 1 && b == 2
  - d) Blöcke nicht mit Leerzeichen, sondern mit Tabs einrücken. Spart viel Tipparbeit ist eindeutig. Leerzeichen sind immer nur ungenau.
    - ```
    // Beispiel:
    if(a == b){
            alert("gleich")
    }else{
            alert("ungleich)
    }
```
- Generell:
  - Während der Entwicklung häufige Testdurchläufe durchführen. Fehler sind dann (meistens) in den zuletzt geänderten Zeilen zu suchen.
  - Script mit mehreren Browsern testen (z. B. Netscape unterstützt weniger Event-Handler als MSIE)
  - NS6.01 unterstützt kein opener.eval(...), dann function eval2(wert){return eval(wert)} im opener-Fenster unterbringen
  - Wenn ein Skript HTML-Code erzeugt, welcher wieder ein Skript enthält, wird dieser von Netscape ignoriert. Das erzeugte Skript muß dann in das übergeordnete Skript eingebaut werden und ggf. gemäß Frame-Schachtelung angesprochen werden, z. B. mittels "parent." oder "frames['subFrame'].parent."
  - Objekt-Schachtelung gemäß SelfHTML einhalten:
    - Ausgangspunkt ist window, daher objekte darin mit "document." ansprechen
    - bei Frames Schachtelung einhalten. Schlüsselworte: frames[nr/'name'], parent, top verwenden
    - Formulare mit Namen versehen und mit Namen ansprechen hilft, z. B. document.Formular.radiobuttongruppe1[0].checked/.value
Zeilen trennen:
- Zeilenumbruch reicht aus. Semikolon (;) am Zeilenende ist jedem freigestellt.
- mehrere Befehle in 1 Zeile mit Semikolon (;) trennen, z. B.
  - Event-Handler: onMouseover="...;..."oderonMouseover="status='...';return true"
  - JavaScript-Links: href="javascript:...;..."
Kommentare:
- einzeilig: // Kommentar (Tipp: Leerzeichen nach // erhöht die Lesbarkeit)
- mehrzeilig: /* ... */ (Tipp: immer in eigene Zeile setzen, Textkommentare 3 Zeichen einrücken, Programmcode nicht)
HTML-Tags in JavaScript-Strings:
- Empfohlen: den Bereich innerhalb von <script>...</script> mit HTML-Kommentar ausklammern: 
- Klammert man das Skript nicht per HTML-Kommentar aus, muß man besonders den Script-Ende-Tag in JavaScript-Strings mit einem Rückstrich maskieren:"<\/script>" (siehe SelfHTML Auslese Script in Script)
<noscript>...</noscript>. Ersatztext. Erscheint, wenn Scripts ausgeschaltet sind oder nicht unterstützt werden.
<server>...</server> Nur Netscape. Server-seitiges JavaScript (LiveWire)
Anführungszeichen innerhalb von Anführungszeichen, in JavaScript:
- a) \ voransetzen: a="...\"Zitat\"..."
- b) außen Hochkommas: a='..."Zitat"...'
Anführungszeichen innerhalb von Anführungszeichen, in HTML-Event-Handlern (z. B. für die Statuszeile):
- Hochkomma verwenden: "...'Kommando'...", z. B. ... onmouseover="status='Statuszeilentext';return true;"...
- Hochkomma (') innerhalb Hochkomma durch Akzentzeichen (´) ersetzen oder mit doppeltem Rückstrich maskieren (\\') (wird nach 1 Parserdurchlauf zu \', beim 2. Parserdurchlauf zu ' )
- Anführungszeichen (") innerhalb Hochkomma durch HTML-Sonderzeichen " ersetzen (Semikolon nicht vergessen)
if
- Abfrage in Klammern: if(a==b)
- then-Teil folgt direkt anschließend ohne then
- 1 then-Befehl ohne {}, mehrere mit {} zu einem Block zusammenfassen
- 1 else-Befehl ohne {}, mehrere mit {} zu einem Block zusammenfassen
- sobald else-Befehl folgt, muß der Then-Befehl in {}, auch wenn es nur 1 ist
- Beispiel: if(a==b){c=1}else c=2
if-Ersatz bei Wertzuweisung:
- Vergleich?ja-wert:nein-wert, Beispiel: x = a==b ? 1 : 0
- hat höchste Priorität, deshalb müssen bei weiteren Angaben in der gleichen Zeile Klammern benutzt werden, Beispiel: x = a + (a==b?1:0) + b, sonst zählt die ganze Zeile zum Vergleich.
Wahrheitswerte:
- true (das gleiche wie 1), false (das gleiche wie 0)
- Aber Vorsicht bei Strings: ein String ist true, sobald er einen Inhalt hat. Beispiel: a="0", also ist a true, nicht false. Nur der leere String ("") ist false.
- Nochmal: var a=0; a ist false, var a="0", a ist true.
- Gleich: Vergleich nur mittels 2 Gleichheitszeichen (==), ein Gleichheitszeichen (=) bedeutet Zuweisung!!!
- Ungleich: != (nicht etwa <>)
Modulo (%) = Rest einer Division. Beispiel:
- tab: wenn spalte von 0 bis 7, dann tabraum=7-spalte%8, ggf. +1
Random, Beispiel:
- wenn Zufallszahl = +/- 8, dann var x = Math.round( 8 - 16*Math.random() )
Zählweise bei Strings. Beispiel: var a="abc"
- Länge=Anzahl Zeichen: a.length, = 3
- Positionen (ab 0): 0 bis 2
Zugriff auf Strings:
- Strings erzeugen:
  - a="abc" (String setzen)
  - a+="def" (String verlängern)
- Strings auslesen
  - einzelnes Zeichen: a.charAt(pos) (pos von 0 bis a.length-1)
  - Teilstring: a.substring(anfang, nachende) (im Gegensatz zu den meisten anderen Funktionen wird substring vollständig klein geschrieben)
    - anfang: Pos. des ersten Zeichens, 0 bis length-1
    - nachende: Pos. nach dem letzten Zeichen, 0 bis length
    - Beispiel: var a="abc", a.substring(0,3) gleich Zeichen 0+1+2 gleich "abc"
  - Teilstring suchen: a.indexOf(teilstring) oder a.indexOf(teilstring,pos) (ab pos)
    - Rückgabe: Position ab 0 oder -1 wenn nicht gefunden
  - Teilstring von hinten suchen: a.lastIndexOf(teilstring) oder a.lastIndexOf(teilstring,pos)
- Beachte: mit den Funktioen (charAt,indexOf,substring) läßt sich nur auslesen, kein Zeichen setzen.
Variablen-Definition:
- a) automatisch (beim ersten Auftauchen). Nachteil: Es wird immer nur 1 Variable verwendet, doppelte Variablenbenutzung wird nicht erkannt, die Variablen überschreiben sich gegenseitig. Vorteil: Zugriff auf Variablen außerhalb dieses Blocks möglich
- b) manuell (mittels "var" davor, z. B. "var idx=0"). Vorteil: Variable nur innerhalb dieses Blocks gültig, eine Variable außerhalb dieses Blocks wird nicht verändert (wichtig z. B. beim Einfügen von Funktionen zur Wiederverwendung aus anderen Quelltexten)
- c) kombiniert mit Zuweisung (z. B. "var idx=0"): Zuweisung erfolgt auch dann, wenn die Variable schon erzeugt wurde (z. B. bei mehrfachem Schleifendurchlauf wird die Variable trotzdem auf 0 gesetzt). (Dies steht im Gegensatz zu anderen Programmiersprachen, wo eine solche Deklaration dazu führt, daß die Variable nur beim 1. Durchlauf auf 0 gesetzt wird.)
Achtung bei Fenster-Definition: die Parameter erwarten nicht =true/false, sondern =yes/no !

DHTML

Dynamisches HTML. Von Netscape und Microsoft ganz unterschiedschiedlich implementiert.
Weitere Infos siehe Buch bzw. Onlineversion von SelfHTML.
<layer>...</layer> Fensterbereich. Nur Netscape. Attribute siehe Buch "HTML kurz und gut". In ein Layer können eigene Inhalte geladen werden, sichtbar/unsichtbar gemacht werden, verschoben werden usw.. Es können mehrere Layer übereinander geladen werden.
<nolayer>...</nolayer> Ersatztext. Erscheint, wenn ein Browser keine Layers unterstützt.

XML und XSL

XML = Extensible Markup Language
XSL = XML Style Language
gehen über HTML hinaus und werden unabhängig davon weiterentwickelt.
Sehr komplex, daher vor allem für große Dokumentationsprojekte, große Werkeditionen oder Lexikonprojekte
Weitere Links dazu im Stichwortverzeichnis von SelfHTML (siehe Literatur)

Weiterführende Links und Literatur

SelfHTML, Stefan Münz, Buch und downloadbare Online-Version (mit Suchmöglichkeit, unter "Kleine Helferlein"), http://www.teamone.de/selfaktuell/. Tip: Fortgeschrittene sollten dies unbedingt downloaden, denn hier gibt es weiterführende Infos: http://selfaktuell.teamone.de/extras/download.shtml. Inzwischen mind. Version 8.0.
HTML kurz & gut, Jennifer Niederst, O'Reilly, ISBN 3-89721-214-5, ca. 15 DM. Eine sehr gute, alphabetisch aufgebaute Taschenreferenz, mit Angabe der Unterstützung (NN 2, 3, 4, MSIE 2, 3, 4, 5, HTML4-Standard, WebTV, Opera 3). Gut für sicheres Nachschlagen. Sehr empfohlen. Unbedingt kaufen.
HTML Taschentabelle, Gottfried Wolmeringer, Hofacker Verlag, ISBN 3-88963-373-0, ca. 10 DM. Ein nicht so gutes Buch, das aber auch einige Infos enthielt, die in "HTML kurz & gut" nicht stehen, z. B. der Kommentar-Tag.
HTML-schnell und einfach, HTML verstehen und effektiv nutzen, Malte Borges, Markt + Technik, ISBN 3-453-18225-1, 5 DM. Ein thematisch aufgebautes, kleines Taschenbuch.

Aufzählung mit Nummern (type=1): Aufzählungspunkt Aufzählungspunkt nächste Ebene	Aufzählung mit Großbuchstaben (type=A): Aufzählungspunkt Aufzählungspunkt nächste Ebene	Aufzählung mit Kleinbuchstaben (type=a): Aufzählungspunkt Aufzählungspunkt nächste Ebene
Aufzählung römisch groß (type=I): Aufzählungspunkt Aufzählungspunkt nächste Ebene	Aufzählung römisch klein (type=i): Aufzählungspunkt Aufzählungspunkt nächste Ebene	Aufzählung mit Startwerten: Startwertangabe in der Liste Aufzählungspunkt Startwertangabe im Listenelement