|
Übersicht Befehls-Syntax Seitenaufbau Head Body |
Anker Links Überschriften Text-Formate Listen |
Umlaute Sonderzeichen Absätze Tabellen Rahmen |
Grafiken Formulare Sound Sonstiges |
Eine sehr gute HTML-Anleitung finden Sie unter HTML-Kompendium. Dort habe ich auch mein Wissen über JavaScript her. Ein Beispiel für eine Anwendung mit JavaScript habe ich unter NIM-Spiel erarbeitet. Das Spiel müssen Sie ausprobieren!
Die goldenen Regeln für schlechtes HTML finden Sie bei Stefan Karzauninkat. Interessante Links zu HTML, Bildern und Hintergründen, animierten GIF's, HTML-Editoren usw. finden Sie bei Elke Kirschnick.
| Wichtig: Alle Browser stellen die HTML-Seiten anders da. Außerdem hat jeder die Möglichkeit Schriftart und -größe individuell einzustellen und einen anderen Monitor. Sie sollten Ihre Seite deshalb mit mehreren Browsern testen und nie den Text trennen. Sonst sieht es aus wie in diesem Negativ-Bei- spiel. |
Ein Dokument (Datei) in HTML hat immer folgenden Aufbau:
<HTML>
<HEAD>
Opitional: Allgemeine Dokumentenbefehle
<TITLE>
Dokumentenname 'erscheint oben im Fenster und auch als als Lesezeichen'
</TITLE>
</HEAD>
<BODY>
Alles was zwischen diesen beiden BODY Befehlen steht wird beim Aufruf des Dokuments im Fenster dargestellt. Das ist also der eigentliche Inhalte des HTML-Dokumentes.
</BODY>
</HTML>
Im Container TITLE wird die Überschrift für das Fenster festgelegt. Dieser Titel erscheint auch im Lesezeichen, wenn Sie die Seite dort ablegen.
In meinen Fenster wurde <TITLE>HTML in Kürze</TITLE> als Titel eingetragen.
Wenn Ihre Seite bei Suchmaschinen anmelden, sollten Sie META-Informationen hinzufügen. Ihre KeyWords werden dann in die Such-
<META NAME="description" CONTENT="Die Beschreibung Ihrer Seite">
Als Parameter kann mit dem BODY-Befehl die farbliche Darstellung der Seite festgelegt werden.
Das sieht dann wie folgt aus:
<BODY BGCOLOR="White" TEXT="Black" LINK="Blue" VLINK="Purple">
Es bedeuten: Ein Anker wird wie folgt definiert: <A Name="Markierung1"></A> Wenn Sie mit dem Befehl <A HREF="#Makierung1">Gehe zur Markierung</A>
eine Sprungmöglichkeit definiert haben, können Sie durch Anklicken zu dieser Markierung springen.
Keinen Container benötigen die Tags:
<UL>
Der <LI>-Container hat keine Ende-Kennung mit </LI>
<UL> kann zusätzlich mit dem TYPE-Parameter versehen werden.
Das erlaubt TYPE=SQUARE, TYPE=CIRCLE bzw. den Standard TYPE=DISK.
Beispiele:
<OL>
<OL> kann mit dem TYPE-Parameter versehen werden. Das erlaubt: Beispiele:
Zu diesem Sprungziel kann dann von einer oder mehreren Stellen verzweigt werden. Das geschieht mit dem Befehl: Der Text zwischen > und < wird später blau und unterstrichen erscheinen. Wenn die Markierung einmal angesprungen wurde ändert sich die Farbe in lila.
Eine Alternative ist der Befehl <P> der gleichzeitig noch eine Leerzeile einfügt.
Sie können einen Absatz auch mit einer Trennlinie erzwingen. Trennlinen werden mit dem Befehl <HR> erzeugt.
mit <HR WIDTH=60%> erzeugt man eine kürzere Linie
<TABLE>
Der Aufbau dieser Seite sieht so aus:
Im obigen Beispiel wird also der Bildschirm vertikal getrennt. Die Linke Spalte ist 170 Pixel breit. Der Rest steht für die rechte Spalte zur Verügung.
Für jeden Rahmen wird mit <FRAME SRC=datei.htm NAME="FensterName"> ein HTML-Dokument definiert. SRC bestimmt den Namen des anzuzeigenen Dokumentes. Die Adresse ist ananlog der normalen Links anzugeben. NAME bestimmt den Namen des Dokumentes. Über diesen Namen ist es möglich auf die Fenster zuzugreifen.
Die restlichen Parameter sind SCROLLING="NO" zum Unterdrücken von Bildlaufleisten,
Um das zu verhindern geben sie bei der Link-Adresse den zusätzlichen Parameter TARGET="_top" an.
Wollen Sie aus einem Rahmen heraus ein Dokument in einem anderen Rahmen anzeigen, verwenden Sie TARGET="FensterName". Dieser Fenstername wurde mit dem Befehl <FRAME SCR=... NAME="FensterName"> bestimmt.
Wenn Sie hier keinen Push-Button sehen, kann Ihr Browser nicht mit Formularen arbeiten:
<FORM METHOD="POST"> eingebunden.
Die Option MEHTOD="POST"regelt die Rückgabe der Daten an das Programm.
Ein Formular kann folgende Elemente beinhalten:
Die Option ALT="AlternativText" bietet die Möglichkeit einen alternativen Text zu zeigen wenn der Netzsurfer die Grafik nicht mitgeladen hat.
<EMBED SRC="datei.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="FALSE" VOLUME="100">
HIDDEN: Abspielgerät bleibt verborgen ?
Auf meiner Hobby-Seite können Sie sich das Ergebnis anhören. Sie müssen allerdings einen Moment warten, da die Datei schon sehr groß (42 KB) ist.
<META NAME="author" CONTENT="Ihr Name">
<META NAME="keywords" CONTENT="Suchbegriffe mit Komma's getrennt">
<META NAME="robots" CONTENT="follow">
Body
Der Container BODY enthält das eingentliche Internet-Dokument. Es ist alles was sie auf der Seite sehen können.
Anker
Ein Anker bietet die Möglichkeit innerhalb eines Dokuments (Datei) eine Markierung zu setzen die man später von jeder beliebigen Stelle des Dokumentes anspringen kann.
Wenn Sie über das Hauptmenü hierher gekommen sind haben Sie einen solchen Anker benutzt. Ein oft verwendeter Anker ist ganz oben in diesem Dokument definiert: der Sprung zum Anfang.
Befehls-Syntax
Die Sprache HTML benutzt sogenannte Container. Ein Container-Befehl wird mit
<Befehl> eingeleitet und mit </Befehl> abgeschlossen. Die Befehle nennt man 'Tags'.
Unbekannte Tags werden vom Browser einfach ignoriert! Bei der Verwendung von alten Browsern kann es also sein, daß nicht alle Befehle funktionieren.
Zur Überprüfung Ihrer Seite können Sie den HTML-Doctor verwenden. Dieser Link ist zwar in Englisch, findet dafür alle Eingabe-Fehler.
So werden Überschriften festgelegt
<H1>Riesig</H1>
<H2>Groß</H2>
<H3>Normal</H3>
<H4>Klein</H4>
<H5>Mini-Überschrift</H5>
<H6>Mikro-Überschrift</H6>
Text-Formatierung
So wird Text hervorgehoben
Listen
So wird eine Auflistung erzeugt:
<LI>Element 1
<LI>Element 2
<LI>Element 3
</UL>Standard TYPE=CIRCLE TYPE=SQUARE
siehe auch: Aufzählungen
Aufzählungen
So wird eine Aufzählung mit Numerierung realisiert:
<LI>Element 1
<LI>Element 2
<LI>Element 3
</OL>
<OL TYPE=I> Römische Zahlen,
<OL TYPE=A> Alphabethische Liste (A..Z)
bzw. den Standard <OL TYPE=1> Numerische Liste
Standard TYPE=I TYPE=A
siehe auch: Listen
Sprünge innerhalb des Dokuments
Für Sprünge innerhalb eines Dokumentes muß zunächst ein Sprungziel (Anker) festgelegt werden:
<A Name="Anfang"></A>
<A HREF="#Anfang">Zum Anfang</A>
und hier das praktische Beispiel: Zum Anfang
Sprünge außerhalb des Dokuments
Achtung: Dateinamen immer klein schreiben!
In meinem Fall also:
<A HREF="index.htm">Homepage</A>
Umlaute
Alle Umlaute wie ä,ö,ü oder ß erfordern eine Spezialschreibweise
Beispiel: 'Übeltäter' muß 'Übeltäter' geschrieben werden
siehe auch: Sonderzeichen
Sonderzeichen
Für Sonderzeichen gibt es aus dem englischen abgeleitete Namen
Alternativ kann auch das ASCII-Zeichen direkt eingeben werden:
siehe auch: Umlaute
Absätze
Ein Zeilenende muß mit <BR> erzwungen werden.
mit <HR WIDTH=30% ALIGN=LEFT>
bzw <HR WIDTH=30% ALIGN=RIGHT>
kann man die Linie justieren
mit dem Parameter <HR SIZE=8> kann die Linien-Dicke verändert werden
Tabellen
Tabellen haben folgende Struktur
<TR>
<TD>
Inhalt 1. Zelle Reihe 1
</TD>
<TD>
Inhalt 2. Zelle Reihe 1
</TD>
<TD>
Inhalt 3. Zelle Reihe 1
</TD>
</TR>
<TR>
<TD>
Inhalt 1. Zelle Reihe 2
</TD>
<TD>
Inhalt 2. Zelle Reihe 2
</TD>
<TD>
Inhalt 3. Zelle Reihe 2
</TD>
</TR>
</TABLE>
Beispiel-Tabelle mit Rahmen und Hintergrundfarbe:
Container Zweck Bemerkungen
<TABLE> Neue Tabelle Oberste Ebene <TR> Neue Reihe R steht für ROW <TH> Überschrift H steht für HEADLINE <TD> Datenfeld hier stehen die Daten
Die Tabellen-Container haben einen ganzen Haufen von Parametern.
<TABLE BORDER=1> Rahmenstärke <TABLE CELLSPACING=3> Abstand Rahmen:Zelle <TABLE CELLPADDING=3> Abstand Zelle:Inhalt <TABLE WIDTH=200> Feste Breite <TABLE WIDTH=50%> Relative Breite in % <TABLE BGCOLOR=GOLD> Hintergrund-Farbe <TR ALIGN=RIGHT> Reihe rechtsbündig <TR VALIGN=TOP> Reihe ist oben justiert <TR BGCOLOR=GREEN> Reihen-Hintergrundfarbe <TD ALIGN=RIGHT> Zelle rechtsbündig <TD VALIGN=TOP> Zelle ist oben justiert <TD COLSPAN=2> Diese Zelle geht über 2 Spalten <TD ROWSPAN=3> Diese Zelle ist 3 Reihen hoch <TD WIDTH=50> Zellen-Breite in Pixeln <TD HEIGHT=30> Zellen-Höhe in Pixeln <TD BGCOLOR=SKYBLUE> Zellen-Hintergrundfarbe
Rahmen
Rahmen bieten die Möglichkeit auf dem Bildschirm gleichzeitig mehrere HTML-Dateien anzuzeigen. Diese Seite besteht aktuell aus 2 Rahmen.
MARGINHEIGHT=(Zahl) für Abstand vom oberen Rand,
MARGINWIDTH=(Zahl) für Abstand vom linken Rand,
NORESIZE für nicht verschiebare Rahmen
ACHTUNG: Wenn Sie aus einem, in einem Rahmen dargestellten Dokument einen Sprung in ein anderes Dokument machen, wird dieses Dokument nur innerhalb des aktuellen Rahmens angezeigt.
Formulare
Formulare dienen der Kommunikation mit dem Benutzer. Leider funktionieren sie nicht bei allen Browser. Um mit Formularen arbeiten zu können ist außerdem Java-Script erforderlich. Diese Bedingungen
werden zur Zeit nur von NETSCAPE erfüllt.
Formular-Befehle
</FORM>
Zusätzlich sind folgende Parameter anzugeben: <INPUT TYPE="BUTTON"> Erzeugt einen Push-Button <INPUT TYPE="RESET"> Erzeugt einen Lösch-Button <INPUT TYPE="TEXT"> Erzeugt ein Eingabefeld <INPUT TYPE="PASSWORD"> Erzeugt ein Passwort-Eingabefeld <INPUT TYPE="CHECKBOX"> Erzeugt ein Kontrollkästchen <INPUT TYPE="RADIO"> Erzeugt einen Radio-Button
NAME="Name_des_Formular_Elements"
VALUE="Inhalt_des_Formular_Elements"
Außer Einzelelementen können auch Drop-Down-Listen erstellt werden:
Beispiel:
<SELECT NAME="Auswahl"> Erzeugt eine Auswahl-Liste <OPTION>Mensch</OPTION> Erstes Element <OPTION>Maschine</OPTION> Zweites Element <OPTION>Methode</OPTION> Drittes Element </SELECT> Ende der Auswahl-Liste
Des weiteren gibt es die Möglichkeit, große Textfelder anzulegen:
<TEXTAREA NAME="MyText" ROWS=10 COL=30> Erzeugt ein mehrzeiliges Text-Feld </TEXTAREA>
Grafiken
Grafiken werden mit dem Befehl
Sound
Über das abspielen von Sound-Dateien kann ich noch nicht viel sagen.
Hintergrundmusik
Hintergrundmusik in Form eine Midi-Datei wird wie folgt in eine HTML-Datei eingebaut:
AUTOSTART="TRUE": Datei wird direkt nach dem Laden abgespielt
LOOP="FALSE": Keine Wiederholung nach dem Abspielen der Datei
VOLUME=100: Midi-File wird mit voller Lautstärke gespielt
Sonstiges
Noch ein paar Sonderbefehle:
Zurück zum Anfang bzw. zur Homepage