Online-Internetkurs von Norbert Böing

HTML

Die wichtigsten Befehle

HTML steht für Hypertext Markup Language, das ist die Skriptsprache, mit der die "Webseiten", auch diese hier, erstellt werden. Tutorials und Handbücher und kostenlose HTML-Editoren sind im Netz erhältlich.

Eine sehr gute Einführung in HTML bietet Stefan Münz. Er nennt sein Werk "SelfHTML". Seine Website kann auch heruntergeladen werden und steht dann jedem Webdesigner offline zur Verfügung!

Keine Angst vor HTML - Die wichtigsten Befehle im Überblick

HTML-Grundgerüst

Grundgerüst einer HTML-Seite
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
sichtbarer Inhalt der Seite
</body>
</html> Ein HTML-Dokument hat einen Kopf- und einen Inhaltsteil.
Der Kopf steht zwischen den Befehlen <HEAD> ... </HEAD>, der Inhaltsteil zwischen den Befehlen <BODY> ...</BODY>.
Die HEAD-Angaben werden im Browserfenster nicht angezeigt. Sie enthalten Angaben, die z.B. von Suchmaschinen ausgewertet werden. Der Text zwischen <TITLE> ... </TITLE> wird in der Titelzeile des Browsers angezeigt.
Zwischen dem BODY-Anfangsbefehl und - Endbefehl können Texte, Graphiken, Sound, interne und externe Links, eMail-Adressen ... eingefügt werden. Erweiterungen des BODY-Befehls
<body bgcolor="">
BGCOLOR bestimmt die Hintergrundfarbe des Dokuments. Zwischen "" ist die Farbe (in englisch) anzugeben, z.B. "red", "blue", "green" ... oder der Farbwert einzutragen, z.B. "#000000" für schwarz oder "#4169E1" für königsblau.
Anstelle der Farbe kann auch eine Hintergrundgraphik im gif- oder jpg-Format eingefügt werden. Der Befehl lautet dann <body background="">. Zwischen "" muß der Dateiname der Hintergrundgraphik eingefügt werden, z.B. "hintergr.jpg".

Textformatierungsbefehle

<font> ... </font> Befehl zur Bestimmung der Schriftart, der -größe und der -farbe <font face="">
Zwischen "" kann die Schriftart, z.B. "Arial" oder "Comic Sans MS" ... eingetragen werden.
<font size="">
Es stehen verschiedene Schriftgrößen zur Verfügung: "1"(sehr klein) bis "7"(sehr groß)
<font color="">
Zwischen "" die Farbe (in englisch) oder den Farbwert eintragen.

<b>fetter Text</b>
<i>kursive Schrift</i>

<u>unterstrichener Text</u>

Zeilen- und Absatzformatierungen

<p> - neuer Absatz
<br> - neue Zeile
<center>zentrierter Text</center>

<div align="right">rechtsbündiger Text</div>

<p align="justify">B l o c k s a t z</p>

<blockquote>eingerückter Text, z.B. Zitat</blockquote>
Überschriften
<H1> ...</H1> bis <H6> ...</H6>
H1 = größte Schrift
H6 = kleinste Schrift
Unter der Überschrift wird automatisch ein Absatz eingefügt.

Listen und Aufzählungen

<ul> ... </ul>
<ol> ... </ol>
<li>
<ul> ... </ul> = Liste, deren Elemente mit Punkten versehen sind, z.B.
Automarken

Mercedes
Audi

<ol> ... </ol> = Durchnummerierte Aufzählung, z.B.
Teilnehmer der Klassenfahrt

Franz Meier
Lieschen Müller
Bei Liste und Aufzählung muß jede Zeile vorn mit dem Befehl <li> versehen werden. Die einzelnen Punkte werden automatisch eingerückt.

Tabelle

<table>
<tr>
<td> ...</td>
<td> ...</td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table> Eine Tabelle besteht aus Zeilen (<tr>) und Zellen in einer Zeile (<td>). In der Tabelle, die immer mit <table> beginnt und mit </table> endet, können natürlich mehrere Zeilen und mehrere Zellen, die sich dann als Spalten darstellen, aufgenommen werden.
Das nebenstehende Beispiel enthält zwei Zeilen und zwei Spalten (zwei Zellen je Zeile).
In den Zellen, also zwischen <td> und </td> können Texte und Grafiken, aber auch Links, eingefügt werden.
Tabellen bieten, besonders dann, wenn auf Rahmendarstellungen verzichtet wird, eine hervorragende Möglichkeit, Internetseiten grafisch zu gestalten. So können Texte neben Bilder gesetzt oder bestimmte Elemente auf einer Seite frei, z.B. nebeneinander oder übereinander, platziert werden.
Erweiterungen des <table>-Befehls
<table border="1" bgcolor="gewünschter Farbwert">
Soll ein Rahmen angezeigt werden, dann ist die Ergänzung border= einzufügen. Die Ziffern bestimmen die Rahmenbreite.
bgcolor= bestimmt die Hintergrundfarbe.
<table border="0" width="300" hight="300">
gibt die Breite und Höhe der Tabelle in Bildpunkten an, hier 300. Anstelle der Bildpunkte können auch Prozentangaben bezogen auf die Bildschirmgröße eingetragen werden, z.B. "30%".
Erweiterungen des <td>-Befehls
<td valign="top" align="right"> ... </td>
Normalerweise wird eingegebener Text in einer Zelle sowohl horizontal als auch vertikal zentriert. Soll dieses nicht geschehen, z.B. Ausrichtung nach oben oder nach rechts, sind Zusätze im <td>-Befehl notwendig.
valign="top" - vertikale Ausrichtung nach oben
weitere Befehle: "middle" oder "bottom"
align="right" - horizontale Ausrichtung nach rechts
weitere Befehle: "left" oder "center"

Hyperlinks und Graphik

Interner Link
Ein interner Link greift auf eine Datei zu, die im gleichen Verzeichnis gespeichert ist.
<A HREF="Dateiname.htm">sichtbare Bezeichnung</A>
Beispiel:
Link auf die Leitseite dieser Website
Zur Leitseite
Externer Link
Ein externer Link greift auf einen anderen Server/Host zu.
<A HREF="http://www.bwv-ahaus.de">Link auf die Homepage unserer Schule</A>
Beispiel:
Link auf die Homepage unserer Schule
Darstellung eines Bildes oder einer Graphik
GIF oder JPG (JPEG)-Dateien lassen sich mit folgendem Befehl darstellen:
<IMG src="Dateiname" ALT="Alternativtext">
Beispiel:
Anzeige der animierten Datei "feuerw.gif". Alternativtext "Feuerwerk"

Einbettung einer Graphik in einem Link
(=>Anklickbare Graphik)

<A HREF="http://www.meybohm.de"><IMG src="hedit2.gif" BORDER="0" width="180" HEIGHT="76" ALT="Link zur HTML-Editor-Homepage"></A>
An die Stelle des sichtbaren Textes in dem Linkbefehl wird eine Graphik angezeigt.
Dieser Befehl sieht im Browser dann folgendermaßen aus:

HTML-Grundgerüst
Grundgerüst einer HTML-Seite <html> <head> <title>Titel der Datei</title> </head> <body> sichtbarer Inhalt der Seite </body> </html>	Ein HTML-Dokument hat einen Kopf- und einen Inhaltsteil. Der Kopf steht zwischen den Befehlen <HEAD> ... </HEAD>, der Inhaltsteil zwischen den Befehlen <BODY> ...</BODY>. Die HEAD-Angaben werden im Browserfenster nicht angezeigt. Sie enthalten Angaben, die z.B. von Suchmaschinen ausgewertet werden. Der Text zwischen <TITLE> ... </TITLE> wird in der Titelzeile des Browsers angezeigt. Zwischen dem BODY-Anfangsbefehl und - Endbefehl können Texte, Graphiken, Sound, interne und externe Links, eMail-Adressen ... eingefügt werden.	Erweiterungen des BODY-Befehls <body bgcolor=""> BGCOLOR bestimmt die Hintergrundfarbe des Dokuments. Zwischen "" ist die Farbe (in englisch) anzugeben, z.B. "red", "blue", "green" ... oder der Farbwert einzutragen, z.B. "#000000" für schwarz oder "#4169E1" für königsblau. Anstelle der Farbe kann auch eine Hintergrundgraphik im gif- oder jpg-Format eingefügt werden. Der Befehl lautet dann <body background="">. Zwischen "" muß der Dateiname der Hintergrundgraphik eingefügt werden, z.B. "hintergr.jpg".
Textformatierungsbefehle
<font> ... </font>	Befehl zur Bestimmung der Schriftart, der -größe und der -farbe	<font face=""> Zwischen "" kann die Schriftart, z.B. "Arial" oder "Comic Sans MS" ... eingetragen werden. <font size=""> Es stehen verschiedene Schriftgrößen zur Verfügung: "1"(sehr klein) bis "7"(sehr groß) <font color=""> Zwischen "" die Farbe (in englisch) oder den Farbwert eintragen.
<b>fetter Text</b>	<i>kursive Schrift</i>	<u>unterstrichener Text</u>
Zeilen- und Absatzformatierungen
<p> - neuer Absatz <br> - neue Zeile	<center>zentrierter Text</center> <div align="right">rechtsbündiger Text</div> <p align="justify">B l o c k s a t z</p> <blockquote>eingerückter Text, z.B. Zitat</blockquote>	Überschriften <H1> ...</H1> bis <H6> ...</H6> H1 = größte Schrift H6 = kleinste Schrift Unter der Überschrift wird automatisch ein Absatz eingefügt.
Listen und Aufzählungen
<ul> ... </ul> <ol> ... </ol> <li>	<ul> ... </ul> = Liste, deren Elemente mit Punkten versehen sind, z.B. Automarken Mercedes Audi <ol> ... </ol> = Durchnummerierte Aufzählung, z.B. Teilnehmer der Klassenfahrt Franz Meier Lieschen Müller	Bei Liste und Aufzählung muß jede Zeile vorn mit dem Befehl <li> versehen werden. Die einzelnen Punkte werden automatisch eingerückt.
Tabelle
<table> <tr> <td> ...</td> <td> ...</td> </tr> <tr> <td> ... </td> <td> ... </td> </tr> </table>	Eine Tabelle besteht aus Zeilen (<tr>) und Zellen in einer Zeile (<td>). In der Tabelle, die immer mit <table> beginnt und mit </table> endet, können natürlich mehrere Zeilen und mehrere Zellen, die sich dann als Spalten darstellen, aufgenommen werden. Das nebenstehende Beispiel enthält zwei Zeilen und zwei Spalten (zwei Zellen je Zeile). In den Zellen, also zwischen <td> und </td> können Texte und Grafiken, aber auch Links, eingefügt werden. Tabellen bieten, besonders dann, wenn auf Rahmendarstellungen verzichtet wird, eine hervorragende Möglichkeit, Internetseiten grafisch zu gestalten. So können Texte neben Bilder gesetzt oder bestimmte Elemente auf einer Seite frei, z.B. nebeneinander oder übereinander, platziert werden.	Erweiterungen des <table>-Befehls <table border="1" bgcolor="gewünschter Farbwert"> Soll ein Rahmen angezeigt werden, dann ist die Ergänzung border= einzufügen. Die Ziffern bestimmen die Rahmenbreite. bgcolor= bestimmt die Hintergrundfarbe. <table border="0" width="300" hight="300"> gibt die Breite und Höhe der Tabelle in Bildpunkten an, hier 300. Anstelle der Bildpunkte können auch Prozentangaben bezogen auf die Bildschirmgröße eingetragen werden, z.B. "30%". Erweiterungen des <td>-Befehls <td valign="top" align="right"> ... </td> Normalerweise wird eingegebener Text in einer Zelle sowohl horizontal als auch vertikal zentriert. Soll dieses nicht geschehen, z.B. Ausrichtung nach oben oder nach rechts, sind Zusätze im <td>-Befehl notwendig. valign="top" - vertikale Ausrichtung nach oben weitere Befehle: "middle" oder "bottom" align="right" - horizontale Ausrichtung nach rechts weitere Befehle: "left" oder "center"
Hyperlinks und Graphik
Interner Link Ein interner Link greift auf eine Datei zu, die im gleichen Verzeichnis gespeichert ist. <A HREF="Dateiname.htm">sichtbare Bezeichnung</A> Beispiel: Link auf die Leitseite dieser Website Zur Leitseite	Externer Link Ein externer Link greift auf einen anderen Server/Host zu. <A HREF="http://www.bwv-ahaus.de">Link auf die Homepage unserer Schule</A> Beispiel: Link auf die Homepage unserer Schule	Darstellung eines Bildes oder einer Graphik GIF oder JPG (JPEG)-Dateien lassen sich mit folgendem Befehl darstellen: <IMG src="Dateiname" ALT="Alternativtext"> Beispiel: Anzeige der animierten Datei "feuerw.gif". Alternativtext "Feuerwerk"