Dieses Dokument informiert in aller Kürze über die wichtigsten HTML-Befehle, zur Erstellung eigener Dokumente. Es wird auch das Einbinden von Bildern und Tabellen behandelt.
<HEAD><TITLE>Der Titel des Dokuments</TITLE></HEAD>
<BODY>
<H1>Hauptueberschrift des Dokuments</H1>
<!-- Hier steht ein Kommentar -->
<!-- Jetzt folgt ein Hypertext-Link -->
Dieses ist ein
<A HREF="http://info.cern.ch/hypertext/WWW/WhatIs.html">Hypertext</A>-Dokument.
<H2>Unterueberschrift</H2>
<H3>Unterunterueberschrift</H3>
<!-- Jetzt folgt eine Liste, mit markierten Listenelementen -->
<UL>
<LI> Listenelement
<LI> weiteres Listenelement
</UL>
Nun folgt ein Absatz, dessen Ende als solches markiert wird.
<P>
Auch Schriftattribute können gesetzt werden:
<B>Fett</B> und <I>kursiv</I> und <U>unterstrichen</U> und <TT>Typewriter</TT>.
Präformatierter Text wird nicht neu umgebrochen:
<PRE>
Ein
Wort
schräg
unter
dem
anderen
</PRE>
<!-- Unterzeichnung eines Dokuments (Referenz auf den Autor der WWW-Seite) -->
<ADDRESS>
____________________<p>
<A HREF="/adressen/myname.html">Anno Nymos</A>,
31. Feb. 2099
</ADDRESS>
</BODY> </HTML>
HTML ist die Abkürzung für "HyperText Markup Language". Diese Sprache ist ein ASCII-Text mit sog. "MARKUP"s zur Strukturierung des Dokuments. Hierzu dienen sog. "Elemente". Es gibt leere Elemente und solche mit Inhalt. Leere Elemente bestehen nur aus einem "Start Tag", wobei der Elementname zwischen den Zeichen "<" und ">" eingeschlossen wird.
Beispiel:
Nicht leere Elemente bestehen dagegen aus einem "Start Tag", Inhalt und einem "End Tag". Das "End Tag" enthält den Elementnamen zwischen den Zeichen "</" und ">".
Beispiel: <H1>Überschrift</H1>
"Start Tags" können "Attribute" enthalten. Ein "Attribut" besteht aus einem Namen, gefolgt von einem "=" (Gleichheitszeichen) und einem String (in Anführungszeichen). Die inhaltliche Erläuterung der Attributtypen findet sich weiter unten.
Beispiel: <A NAME="anchor">
Hinweis: Namen sind nicht "case sensitive", d.h. Groß- und Kleinschreibung wird nicht unterschieden.
Elementtypen werden durch einen "Attribut-Typ" und einen "Inhalts-Typ" charakterisiert.
Zeichen-Referenzen erfolgen im ASCII-Code (Dezimalsystem). Aufbau: "&"Dezimalzahl";" (Semikolon).
Beispiel: "<" wuerde als "<<" eingegeben
Entity Referenzen (z.B. für Umlaute) sind übergreifend definiert. Aufbau: "&"_"Name"_";" (Semikolon).
Einige ausgewählte "Entity References":
Kommentare: zwischen <!-- und -->
Beispiel: <!-- Dies ist ein unsichtbarer Kommentar -->
Zusammenstellung der "Markup Signals":
HTML-Dokumente sind generell aus HEAD (Informationen über das Dokument) und BODY (Inhalt des Dokuments) aufgebaut.
Beispiel:
<HTML>
<head><title>Dokumententitel
einfuegen.</title></head>
<body>
....
Dokumentbereich
....
</body>
</HTML>
Der "HEAD"-Bereich umfaßt dabei folgende Elementtypen.
TITLE: Titel des Dokuments
Beispiel: <TITLE>Der Titel</TITLE>
ISINDEX: Es handelt sich um einen Index, "Keyword Search" möglich
Beispiel: <ISINDEX> Keyword1 Keyword2 </ISINDEX>
NEXTID: nächster numerischer Identifizierer
Beispiel: <NEXTID N=27>
LINK: Beziehung zu anderen Dokumenten, ähnlich wie "anchor"
BASE: spezifiziert die URL-Basis, Attribut ist HREF
Der "BODY"-Bereich markiert Anfang und Ende des Dokumentbereichs und umfaßt folgende Elementtypen.
Überschriften (sechs Ebenen sind vordefiniert):
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
Beispiel: <H1>Hauptüberschrift</H1>
Abschnittsende: <P>
Schriftattribute (physikalisch):
Beispiel
Schriftattribute (logisch):
Liste (eingerückte Aufzählung mit "Punkten" vor einem Listenelement):
<UL>
<LI> Listenelement
<LI> weiteres Listenelement
<\UL>
Liste (eingerückte Aufzählung mit "Nummerierung" vor einem Listenelement):
<OL>
<LI> Listenelement
<LI> weiteres Listenelement
<\OL>
Glossar (vordefiniertes Absatzformat):
<DL>
<DT>Term
<DD>Definition
</DL>
Anker (anchor): Hypertext Link
Das wichtigste Element von Hypertext überhaupt. Es dient für Verweise auf andere Textstellen und andere Dokumente, die sich auch auf anderen Rechnern in der Welt befinden können. Die Verweise erfolgen mittels "URL" (Universal Resource Locator). Ein Anker, also Hypertext Link, hat folgenden allgemeinen Aufbau: <A optionales_attribut="string">Text auf den sich der Link bezieht</A>.
Attribute:
Beispiele:
(a) Weitere Informationen finden Sie unter <A HREF="http://info.cern.ch/">CERN</A>.
(b) Unter <A NAME=Gesundheit>Gesundheit</A> versteht die WHO mehr als die Abwesenheit von Krankheit.
(c) The Organization may refuse employment to anyone convicted of a <A HREF="#serious">serious</A> crime.
Beispiele, die URLs beinhalten:
(a) <A HREF="http://info.cern.ch/"> - Hypertext-Link zum Rechner info.cern.ch (Homepage)
(b) <A HREF="http://www.ncsa.uiuc.edu/General/NCSAHome.html"> - wie (a), nur Datei im Directory General
(c) <A HREF="ftp://ftp.ncsa.uiuc.edu/Mosaic"> - FTP-Link.
(d) <A HREF="gopher://gopher.ncsa.uiuc.edu:70/11/Metacenter"> - Gopher-Link.
(e) <A HREF="file:/myfile.html"> - Datei-Referenz ("file:" ist optional)
Einbinden von Bildern
Bilder werden mittels des Kommandos <img src="Bilddatei.GIF"> eingebunden. Dabei sollte die Bilddatei in den Formaten GIF oder JPEG vorliegen. Andere Bildformate können von den meisten Browsern nicht standardmäßig gelesen werden.
Bei Verwendung des IMG-Elementtyp können weitere Attribute genutzt werden.
Beispiel: <img align=middle alt="Foto" src="foto.gif">
Die Reihenfolge der Tags innerhalb einer Tabelle entspricht der Anordnung in einer normalen Tabelle. Dies wird auch durch die Einrückung in der ersten Spalte deutlich.
| HTML-TAG | Optionen | Beschreibung |
| <table> ... </table> | Definition der Tabelle | |
| border=n | Rahmen der Tabelle mit Strichstrichbreite n (0 bis 9). Wert 0 zeichnet keinen Rahmen. | |
| width=% | prozentuale Breite vom WWW-Fenster | |
| width=n | Tabellenbreite in Pixel | |
| cellspacing=n | Pixel zwischen Zellinhalt und Zellenrahmen | |
| cellpading=n | Pixel zwischen den Zellen | |
| <caption> ... </capion> | Beschriftung der Tabelle definieren | |
| valing=(top oder bottom) | Position der Tabelle | |
| <tr> | Neue Zeile einer Tabelle einleiten | |
| align=(left,middle,right) | Horizontale Standardausrichtung in dieser Zeile | |
| valign=(top,middle,bottom) | Vertikale Standardausrichtung in dieser Zeile | |
| <td> | Neue Datenzelle einleiten | |
| rowspan=n | Zelle erstreckt sich über n Zeilen | |
| colspan=n | Zelle erstreckt sich über n Spalten | |
| align=(left,middle,right) | Horizontale Ausrichtung in der aktuellen Zelle | |
| valign=(top,middle,bottom) | Vertikale Ausrichtung in der aktuellen Zelle | |
| <br> | Manueller Umbruch (für leere Zellen erforderlich) |