Senden Sie eine E-Mail mit Kommentaren oder
Fragen zu dieser Web-Site an: gb.sl@snafu.de
Die HTML-Sprache, HTML-Beschreibung
Die folgende Beschreibung stellt keine vollstaendige Beschreibung
von HTML dar. Die offizielle Sprach-Spezifikation von HTML ist im
WWW unter der URL: http://www.w3.org zu erreichen.
Alle Sprachelemente werden in <
> spitzen Klammern eingeschlossen.
Diese Darstellung kann hier nur teilweise verwendet werden, da
sonst die Darstellung nicht als Text sondern als Befehl
interpretiert wird.
Eine HTML-Datei definiert die Struktur eines Textes, Jedoch nicht
das exakte Aussehen des Textes. Somit kann eine HTML-Datei auf
verschiedenen Browsern ganz unterschiedlich aussehen.
Der Aufbau von HTML
Am wichtigsten bei HTML sind die sogenannten Tags die aus Start-
und Endmarken bestehen. Eine Startmarke besteht aus einem Befehl in
spitzen Klammer; < befehl > .
Die Endmarke aus dem Befehl ebenfalls in spitzen Klammer an aber
mit einen Schraegstrich vorangesetzt; </befehl> .
Einige HTML-Befehle benoetigen jedoch keine Endmarke. Innerhalb
dieser Start- und Endmarken steht der eigentliche Text auf den sich
der Tag bezieht.
Bei manchen HTML-Befehlen gibt es noch Parameter die in der
Startmarke uebergeben werden;
<befehl parameter> .
Die Endmarke bleibt dabei unveraendert.
Die gesamte HTML-Datei wird zwischen den Tags <HTML> und
</HTML> eingeschlossen.
Dieser Bereich wird in 2 weitere Teile unterteilt; Den Kopf der
Seite (<HEAD> </HEAD>) und dem eigentlichen
Textkoerper (<BODY> </BODY>).
Die Struktur einer HTML-Seite sieht also folgendermassen aus:
<html>
<head></head>
<body></body>
</html>
Wenn die Seite Frames enthaelt entfaellt der Body-Bereich
und wird durch die Definition der Frames ersetzt.
Im Kopfbereich der Seite stehen Angaben die die gesamte Seite
betreffen. Meist ist das nur die Angabe
<title></title>.
Damit wird der Titel der Seite festgelegt der von vielen
Suchmaschinen indiziert wird oder von Browsern in der Titelleiste
angezeigt wird.
Der eigentliche Textteil ist der Body. Der Text innerhalb des Body
wird automatisch umbrochen. Um an einer bestimmten Stelle einen
Zeilenumbruch zu erzwingen koennen sie ein
<BR> fuer Break einfuegen. Um einen neuen Absatz zu
beginnen verwenden Sie das <P> Tag.
Text in einer vorformatierten Form können Sie innerhalb eines
<pre> </pre> für Preformated schreiben.
Um Überschriften anzugeben verwenden Sie das <hx> Tag
wobei x für die Groesse der Ueberschrift steht. 1 ist die
groesste Ueberschrift und 6 die kleinste. Beispiel:
<h2>Das ist eine Ueberschrift</h2>
Um die Information auf Ihrer Seite Übersichtlicher zu
gestalten können Sie das <hr> Tag verwenden.
Dadurch wird vom Browser eine Trennlinie dargestellt. Die
Trennlinie kann noch in ihrer Grösse, Ausrichtung oder
Schattierung verändert werden.
Beispiel einer HTML-Seite:
<html> <head> <title> Eine Beispiel Seite </title> </head> <body> <h1> Willkommen auf der
Beispielseite </h1> <p>
mit dem Tag oben beginnt ein neuer Absatz <br> Zeilenumbruch <hr size=5
width=60%> eine horizontale Linie 5 Pixel dick und
?er 60 Prozent der Seitenbreite
</body> </html>
Dem Text können noch verschiedene Formatierungstile zugeordnet
werden wobei <i></i> fuer kursiven Text oder
<b></b> fuer fettgedruckten Text steht.
Gross- und Kleinschreibung spielt bei der Eingabe der Tags keine
Rolle.
Bei der Angabe von Pfadangaben sollten Sie die Gross- und
Kleinschreibung aber beachten weil viele Web-Server unter dem
Betriebssystem Unix laufen und da zwischen Gross- und
Kleinschreibung unterschieden wird.
In HTML werden Umlaute und Sonderzeichen ueber ASCII 127 in einer
besonderen Form geschrieben.
Wichtige HTML-Befehle:
Haupt Tags, die jedes Dokument beinhalten
muss
Bezeichnung
HTML Tag
Anmerkung
Dokument Typ
<HTML></HTML>
Anfang und Ende der Datei
Titel
<TITLE></TITLE>
muss im Header stehen
Kopf der Datei
<HEAD></HEAD>
Allgemeine Infos zum Dokument
Körper der Datei
<BODY></BODY>
Der Rest der Datei
Strukturelle Definitionen (kontrolliert
durch die Browser Einstellungen)
Ein wichtiger Bestandteil von HTML sind die Hyperlinks. Das sind
Textstellen die Sie auf Mausklick an eine andere Stelle Ihres
Dokumentes oder an ein beliebig anders Dokument im WWW bringen.
Mit dem Befehl <a></a> können Sie solche
auf Mausklick reagierende Textstellen oder auch Sprungzielmarken in
Ihrem Text setzen. Um eine Sprungmarke zu setzen verwenden Sie den
Befehl mit dem Parameter Name=Sprungmarkenname.
Wenn Sie an die URL Ihres Dokumentes #Sprungmarkenname
anhängen können Sie direkt zu dieser Stelle springen.
Um einen Link zu erstellen benutzen Sie den Parameter
Href=Linkadresse. Links zu Sprungmarken in Ihrem Dokument
definieren Sie mit Href=#Sprungmarkenname.
Links zu einer anderen Internet-Site geben Sie mit
Href="http://www.server.com/seite.htm" an. Wenn Sie einen Link auf
eine Ihrer eigenen Seite angeben genuegt es den relativen Pfadnamen
anzugeben.
Wenn Ihre Seite Frames verwendet können Sie bei der Angabe
der Links das Fenster angeben in den die gewaehlte Seite erscheint.
Das geht mit dem Parameter target="name" wobei Name der Name des
Frames ist den Sie in der Definition der Frames angegeben
haben.
Grafiken und Bilder ausrichten:
Grafiken sind in Web-Seiten mit dem Befehl <img> und
einigen Parametern schnell eingebaut.
Der wichtigste Parameter dabei ist src . In der Handhabung
ist er dem Parameter Href aehnlich, da mit src der Pfad festgelegt
wird unter dem die Grafik zu finden ist.
Beispiel: src="pictures/bild.gif".
Als weiterer Parameter sollte immer alt angegeben werden der einen
Text ausgibt wenn die Grafik vom Browser nicht angezeigt wird. z.B.
alt="Das ist eine Grafik". Mit dem Parameter align kann die
Ausrichtung der Grafik und des umgebenen Textes festgelegt werden;
align=left richtet die Grafik links an der Seite aus. Mit dem Wert
Top oder Bottom wird die Grafik zur Ober- bzw Unterkante der
aktuellen Textzeile ausgerichtet. Middle richtet die Grafik mittig
zum Text aus. Schliesslich kann mit den Parametern Height und Width
noch die Breite und Hoehe der Grafik in Pixeln angegeben werden.
Das ist ein Bild, welches mit
ALIGN=left ausgerichtet wurde.
Der Text fließt jetzt "ganz normal" um das Bild herum,
bis er dann schließlich unter das Bild gelangt.
Diese Bild ist mit
ALIGN=right ausgerichtet.
Es verhält sich ansonsten wie das vorhergehende Bild.
Der Text fängt bei diesem mit
ALIGN=top ausgerichteten Bild an der Oberkante des
Bildes an, und wenn ein Zeilenumbruch folgt, geht der Text unter
dem Bild weiter.
Die Ausrichtung
ALIGN=texttop wirkt genauso wie
ALIGN=top, auch bei einem Zeilenumbruch.
Das Bild wurde mit
ALIGN=middle ausgerichtet. Es richtet folglich den
Text in der Mitte des Bildes aus. Bei einem Zeilenumbruch wird der
Text, wie bei manchen anderen auch, unter dem Bild fortgesetzt.
ALIGN=absmiddle richtet
den Text auch an der Mitte des Bildes aus wie ALIGN=middle. Der
Text geht auch bei einem Zeilenumbruch unter dem Bild weiter.
ALIGN=baseline richtet
den nachfolgenden Text an der Unterkante des Bildes aus. Bei einem
Zeilenumbruch geht der Text unter dem Bild weiter.
Das Bild mit ALIGN=bottom
wird genauso ausgerichtet, wie das Bild mit ALIGN=baseline.
ALIGN=baseline ist bloß neuer und "schöner".
ALIGN=absbottom ist das
gleiche wie ALIGN=baseline und ALIGN=bottom. Oder mal probieren, ob
man nicht doch einen Unterschied bemerkt.
1. Übergeordnete Tags:
<html> Steht am Anfang und am Ende eines
html-Dokumentes
<head> Steht im Kopf des Dokumentes und beinhaltet
Titel und Seitendarstellung.
<body> Umrahmt den eigentlichen Inhalt des
html-Dokumentes.
Es existieren Unmassen von weiteren Zeichen für diverse
Schriftsätze, welche aber bei weitem den Umfang dieser
Referenz sprengen würden. Wer es genau wissen will, sollte die
W3C-Referenz anschauen.
5. Hintergrundfarben:
Hintergrundfarben, Nachfolgend einige Farbbeispiele
Vordefinierte Konstanten:
#000000 Black, #C0C0C0 Silver, #808080
Gray, #FFFFFF White,
#800000 Maroon, #FF0000 Red, #800080
Purple, #FF00FF
Fuchsia, #008000
Green, #00FF00 Lime,
#808000 Olive, #FFFF00 Yellow, #000080
Navy, #008080 Teal,
#00FFFF Aqua, #0000FF BlueEigene Farben lassen sich durch
Angabe der entsprechenden RGB-Werte selbst definieren
(00..FF).
Hinweise: Nach W3C-Refenenz soll man statt den Farbkonstanten
Stylesheets verwenden!
Alle Farben sehen auf verschiedenen Plattformen geringfügig
unterschiedlich aus!
BEISPIEL: <FONT COLOR="Navy"> Navy - vordefiniert </FONT> <FONT
COLOR="#00C0FF"> Blau - selbst
definiert </FONT>
Eine praktische Funktion zur Strukturierung von WWW-Seiten sind die
Eine Liste ist folgendermassen aufgebaut:
<ul> Listenanfang
<li> Listeneintrag
<li> Listeneintrag
</ul> Listenende
Bei nummerierten Listen gibt es die Möglichkeit zwischen
verschiedenen Nummerierungsarten zu wählen. z.b. römische
oder arabische Ziffern.
Die Liste wird dabei in den Tags <ol></ol>
eingeschlossen.
In der Startmarke wird dann noch die Art der Nummerierung als
Parameter uebergeben.
z.b. ergibt <ol type=a> eine fortlaufende Nummerierung
in Kleinbuchstaben.
Bei der Bulletliste wird keine Nummerierung angezeigt sondern die
einzelnen Listenpunkte durch einen Punkt getrennt. Dabei gibt es
verschiedene Typen wie circle fuer einen Kreis oder square fuer ein
Quadrat. Das obige Beispiel ergibt eine Bulletliste.
Lists
Definition List
Definition Term 1
Definition Definition 1
Definition Term 2
Definition Definition 2
Definition Term 3
Definition Definition 3
Unordered List
list item 1
list item 2
list item 3
Ordered List
list item 1
list item 2
list item 3
Directory List
list item 1
list item 2
list item 3
Menu List
list item 1
list item 2
list item 3
6. Alphabethischer HTML-Code
Anfang-Tag
End-Tag
Beschreibung
ACTION="
"
Ziel im Form-Tag
ALINK="#
"
Farbe des aktiven Links
<ADDRESS>
</ADDRESS>
Freie Wahl einer Adresse
ALIGN=
Platzierung Text zu Bild
ALT
Text statt Bild
<A HREF="
">Beschreibung</A>
Hyperlinkbefehl
<B>
</B>
Fettdruck
BGCOLOR="#
">
Hintergrundfarbe
BACKGROUND="
">
Hintergrundgraphik
BGSOUND SRC="
">
Hintergrundmusik
BANNER="
"
Permanente Logos
<BASE HREF="
">
Adresse des Dokuments
<BASEFONT SIZE=
>
Standardschriftgröße
<BLINK>
</BLINK>
blinkender Text
<BLOCKQUOTE>
</BLOCKQUOTE>
Markierung von Zitaten
<BODY>
</BODY>
Inhalt des Dokuments
BORDER
Rahmen
BORDER=
Dicke des Rahmens
<BR>
Zeilenumbruch
<CAPTION>
</CAPTION>
Bildunterschrift
<CENTER>
</CENTER>
zentrierter Text
CHECKBOX
Kontrollkästchen
CLASS=
Dokumenteinteilung
CLEAR=
Zuordnung von Objekten
<!--
-->
Kommentartext
COMPACT
platzsparendes Listenattribut
CONTINUE
Listennummerierung fortsetzen
<CREDIT>
</CREDIT>
Bildquellangabe
<DD>
Listenelement
DP="
"Sprache|||LANG=|||
Sprachdefinition
<DFN>
</DFN>
Definitionstext
<DT>
</DT>
Listenelement
<DL>
</DL>
Definitionsliste
DINGBAT
Standardbullet
<DIR>
</DIR>
Verzeichnisliste
<DIV>
</DIV>
gestufte Absätze
<EM>
</EM>
Hervorhebung meist kursiv
<FIG
>
Formatierte Information zu Bildern
<FN>
</FN>
Fußnote
<FONT SIZE=>
</FONT>
Schriftgröße
<FORM>
</FORM>
Formular
<HEAD>
</HEAD>
Kopf des Dokuments
<H1>
</H1>
Überschrift Schriftgröße 1
<H2>
</H2>
Überschrift Schriftgröße 2
<H3>
</H3>
Überschrift Schriftgröße 3
<H4>
</H4>
Überschrift Schriftgröße 4
<H5>
</H5>
Überschrift Schriftgröße 5
<H6>
</H6>
Überschrift Schriftgröße 6
HEIGHT=
Höhe des Bildes
<HR>
Horizontaler Strich
HREF="
"
Link
<HTML>
</HTML>
Abgrenzung HTML-Dokument
<I>
</I>
Kursivschrift
ID=
Definition Tabstop
<IMG
>
Bilder einfügen
IMAGEMAP=
Linkbereich im Bild
INDENT=
Tabeinrübkbreite
<INPUT
>
Definition Eingabefeld
<ISINDEX
>
Durchsuchbares Dokument
ISMAP
Bild als Link
<KBD>
</KBD>
meist Schreibmaschinenschrift
<LINK
>
Verbindung zu anderen Dokumenten
LINK="#
"
Farbe des Links
<LH>
</LH>
Kopflistenelement
<LI>
Listenelement
LOWSRC="
"
unteres Bild
<MENUE>
</MENUE>
formatierte Liste
<META
>
Deklaration von Dokumenten
METHOD=GET
Übermittlungsart
MULTIPLE
Mehrfachauswahl
NAME="
"
Name Auswahlbutton
<NEXTID
>
Eindeutigkeit von Adressen
NOSHADE
Ausgefühlt
NOWRAP
Zelle ohne Zeilenumbruch
<NOBR>
Kein Zeilenumbruch
<OL>
</OL>
geordnete Liste
<OPTION>
Auswahlelemente
<P>
Absatz
<PRE>
</PRE>
Vorformatierter Text
PROMPT="
"
Individuelles Textfeld
RADIO
Radiobutton
<RANGE
<
Zuordnung ID oder CLASS
REL=
Linktyp
RESET
Löschung der Eingabe
REV=
rekursiver Linktyp
<SELECT>
</SELECT>
Multiple Choice
SELECTED
OPTION ist aktiv
SIZE="
"
Gr?e des Feldes
SRC="
"
Quelle des Bildes
<STRIKE>
</STRIKE>
durchgestrichener Text
<STRONG>
</STRONG>
Starke Hervorhebung meist fett
<SUB>
</SUB>
tiefgestellter Text
<SUP>
</SUP>
Hochgestellter Text
<TAB
>
Tabulator
<TABLE
>
Tabelle
<TD>
</TD>
Zellinhalt
<TEXTAREA>
</TEXTAREA>
mehrzeiliges Eingabefeld
<TH>
</TH>
Tabellen?erschrift
<TITLE>
</TITLE>
Titel des Dokuments
<TR>
</TR>
Liniendefinition
<TT>
</TT>
Schreibmaschinenschrift
TYPE
Art des Eingabefeldes
<U>
</U>
unterstrichener Text
<UL>
</UL>
ungeordnete Liste
VALUE="
"
Defaultwert des Eingabefeldes
<VAR>
</VAR>
Variablenname meist kursiv
VLINK="#
"
Farbe des genutzten Links
WIDTH=
Breite des Bildes
<XMP>
</XMP>
Beispiel
Tag Samples
This page contains examples of many of the HTML tags. It will help
to give you an idea of which tags are supported by your browser,
and how they will appear.
Text formatting
Big | | Bold |
Cite | Code | Definition |
Emphasis | Font Size +3 | Font Color FF0000 | Italics |
Keyboard | Sample | Small |
Strikethrough | Strong |
Subscript | Superscript | Typewriter
| Underline | Variable |
Address
Block Quote - blockquote
Listing
Preformatted
Divide or Align
Center
DIV ALIGN=CENTER
P ALIGN=CENTER
Form Items
Radio Button -
Check box -
Text Box -
Password Box -
Select -
Text Area -
Submit Button -
Reset Button -
Horizontal Rules
Das ist ein Bild, welches mit
ALIGN=left ausgerichtet wurde.
6x6x6 und noch mehr Farben - kleine
Farbanalyse
