HTML-Tutorial

Als erstes erstellen Sie auf Ihrer Festplatte ein Verzeichnis, z.B. HOMEPAGE. In dieses Verzeichnis werden Sie nachher alle Bilder und Dateien speichern, welche Sie für Ihre Homepage verwenden wollen. Wenn Sie später Ihre Homepage uploaden wollen, müssen Sie natürlich alle Dateien die sich im Verzeichniss befinden uploaden!

Grundwissen über den Aufbau einer HTML Datei

Bevor wir Informationen in unserer HTML-Datei schreiben, müssen wir das Grundgerüst der HTML Datei aufbauen. Dieses sieht ungefähr so aus:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body background="Grund1.gif" bgcolor="#000000" text="#00ff00" link="#80ffff" vlink="#400000" alink="#00ff00">

</BODY>
</HTML>

Das Gründgerüst besteht aus dem <HTML> Tag, dem Datei Kopf <HEAD> und dem Bodygerüst, in das wir später alle Informationen unserer Homepage reinschreiben.

Im <HEAD> Tag notieren wir alle Browserspezifischen Informationen, wie Scripts, Metainformationen (Das sind Informationen, die z.B. der Server mit Hilfe von Javascript abrufen kann), und die Titelzeile. Die Titelzeile ist die Zeile in Windows die standartmäßig blau unterlegt ist, und immer im oberem Bereich eines Fensters liegt. Diese Information müssen wir jedoch noch mit dem Subtag <TITLE> einführen.

Im <BODY> Bereich werden die für den HTML Inhalt verantwortlichen Grundfarben eingetragen. So kann mit dem Parameter background="" ein Hintergrundbild eingetragen werden, mit bgcolor="#(Farbenwert)" eine Hintergrundfarbe (Wenn beides eingetragen ist, gibt der Browser dem Hintergrundbild den Vorzug). Mit text="#(Farbenwert)", link="#(Farbenwert)", vlink="#(Farbenwert)" und alink="#(Farbenwert)" bestimmen Sie die Text, Link, besuchte Link und die aktive Linkfarbe. Das heißt Sie wählen die Texteigenschaften wie Farbe vor und nach dem anklicken aus!
Im nachfolgenden Bereich wollen wir gleich unsere Informationen einbringen, die dem Surfer in seinem Browserfenster angezeigt werden sollen.
Anschließend schließen wir die Tags <BODY> und <HTML> wieder.

erstes Designen der Homepage

Als erstes wollen wir eine einfache zentrierte Überschrift mit einem durchgezogenem dadrunter Strich kreiren.

Wir verwenden hierzu den <Hx> und den <center> Tag. Der <Hx> Tag führt eine Überschrift ein die die Größe x hat. Für x müssen Sie einen Wert zwischen einschließlich 1 und 6 wählen. Der Wert 1 steht für die größte, und die 6 für die kleinste Überschrift. Eine Trennlinie erreichen wir mit dem Befehl <hr>.

Nun schreiben wir in die ersten Zeilen folgendes:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body background="Grund1.gif" bgcolor="#000000" text="#00ff00" link="#80ffff" vlink="#400000" alink="#00ff00">
<h1><center>Meine erste HTML Seite</center></h1>
<hr>
</BODY>
</HTML>

Am besten probieren Sie dies mal aus, und begutachten das Resultat Ihrer Arbeit. Als Nächstes wollen wir ein Bild von uns unter die Überschrift mit dem Strich setzen. Der entsprechende Tag heißt <IMG> Tag.
Die Syntax für den <IMG> Tag:
<IMG src="Bild1.gif" align=center>

SRC steht für das englische Wort Source und gibt den Pfad an, wo das Bild liegt. Da wir unser Bild in unserem Ordner HOMEPAGE abgelegt haben, soll uns dieser nicht weiter interessieren. Da uns das Bild in seiner jetzigen Größe nicht gefällt, verkleinern wir es etwas. Dafür müssen wir unsere Syntax durch zwei Parameter ergänzen. Diese Parameter sind height=x und width=x. X steht für eine Größe die variieren können. wir nehmen als Beispiel für die Höhe (height) 63, und für die Breite(width) 501. Die Zahelnangaben wrden immer in Pixeln gemacht. Der Parameter ALIGN=CENTER gibt die Ausrichtung des Bildes an. Anstatt CENTER könnte dort auch LEFT für Links und RIGHT für Rechts stehen.

Jetzt steht in unser Bildzeile folgendes: <IMG src="Bild1.gif" height=63 width=501>

Allerdings wollen wir das Bild nicht so dicht unter den Trennstrich setzen, also fügen wir mit dem Tag <br> einen Zeilensprung ein.

Wir wollen ein zweites, weiteres Bild in unsere Homepage einfügen. Also springen wir mit Hilfe des Tags <BR> in die nächste Zeile unseres Dokumentes und wieder holen die Syntax, mit der Ausnahme, das wir jetzt natürlich ein anderes Bild nehmen, nämlich BILD2.GIF.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body background="Grund1.gif" bgcolor="#000000" text="#00ff00" link="#80ffff" vlink="#400000" alink="#00ff00">
<h1><center>Meine erste HTML Seite</center></h1>
<hr>
<br>
<IMG src="Bild1.gif" height=63 width=501>
<br>
<IMG src="Bild2.gif" height=63 width=501>
</BODY>
</HTML>

Unter unsere beiden schönen Bilder setzen wir wieder eine Linie mit <hr>. Da diese Linie allerdings etwas dicker ausfallen sollte, ergänzen wir den <hr> Tag um den Parameter size=3. Eine normale Linie hat die Dicke 1. mit dem Parameter 3, verdreifachen wir die Dicke also.

Jetzt wollen wir etwas schreiben. Dazu aktivieren wir Zuerst den automatischen Zeilenumbruch mit dem Tag <P>. Hinter dem <P> schreiben wir jetzt unseren Text.
Als Beispiel schreiben wir:

Dies ist mein erstes HTML-Dokument. Wie findest du es?? Ich habe es selbst geschrieben, und es macht riesen Spaß. Ich benutze dafür eine tolle Onlinehilfe und ein echt cooles Programm. Natürlich werde ich es bald registrieren!

Nach diesem Text setzen wir wie bei fast jedem HTML-Tag das </p>.

Unsere HTML-Seite müßte jetzt so aussehen:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body background="Grund1.gif" bgcolor="#000000" text="#00ff00" link="#80ffff" vlink="#400000" alink="#00ff00">
<h1><center>Meine erste HTML Seite</center></h1>
<hr>
<br>
<IMG src="Bild1.gif" height=63 width=501>
<br>
<IMG src="Bild2.gif" height=63 width=501>
<hr size=3>
<p>Dies ist mein erstes HTML-Dokument. Wie findest du es?? Ich habe es selbst geschrieben, und es macht riesen Spaß. Ich benutze dafür eine tolle Onlinehilfe und ein echt cooles Programm. Natürlich werde ich es bald registrieren!</p>
</BODY>
</HTML>

An dieser Stelle möchte ich erst einmal erklären, wie ein Link funktioniert. Ein Link ist eine Verbindung innerhalb eines Dokumentes, dem Internet oder einer eMail Funktion. Die Syntax des Links sieht mit einer Ausnahme immer folgendermaßen aus:
<a href="XXXXX">Text</a>

XXXXX steht in diesem Fall für eine der drei Optionen. Wir können anstatt XXXXX eine Seite im Internet angeben, also eine URL wie http://www.polpotyle.com. Wenn wir eine E-Mailfunktion einbinden wollen, ersetzen wir XXXXX durch mailto:Mustermann@provider.com (Wie Ihre Internetadresse ist, erfragen Sie am besten bei Ihrem Provider oder dem Sysop Ihrer Mailbox!). Wollen wir jedoch einen Link innerhalb einer Seite definieren, sieht die Syntax folgendermaßen aus:

<a href="#XXXXX">Text</a>
Nun muß jedoch an der Stelle wohin der Link führen soll folgendes stehen:
<a name="XXXXX">Text</a>

XXXXX steht in diesem Fall für eine Sprungmarke, und Muß in beiden Fällen gleich bleiben! Der "Text" steht in allen 3 Möglichkeiten für den Text, den der User anklicken soll, um die gewünschte Funktion auszuführen, sei es eMailen oder einen Sprung zu vollführen. Die Funktion eines Links kann auch innerhalb eines zusammenhängenden Textes ausgeführt werden. So wollen wir unseren Text den wir schon implementiert haben, um einen Satz erweitern:

Wenn Dir diese Homepage gefällt, dann schicke mir doch eine <a href="mailto:Mustermann@provider.com">E-Mail</a>!!
Wenn Sie jetzt Ihre Page in einem Browser anschausen, dann werden Sie feststellen, daß wenn Sie auf das Wort E-MAIL klicken, sich ein E-Mail Fenster öffnen wird.

Jetzt wollen wir eine weitere Trennlinie mit <hr> einleiten. Anschließend machen wir noch eine kleine Liste mit Links. Dazu benutzen wir den Aufzählungstag <li>. die Syntax für den <LI> Tag lautet folgendermaßen:
<LI>(Text)

Wir wollen jedoch 2 Links einbauen, und so setzen wir 2 <LI> Tags untereinander.
Und hinter den einen schreiben wir <a href="http://www.polpotyle.com">Hier ein Link zu einem Superserver</a>, hinter den anderen Hier ein Link zu einer <a href="http://www.obernsoft.de/partner/ops">Multiplayerseite</a> Nun müßte unser HTML-Dokument so aussehen:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body background="Grund1.gif" bgcolor="#000000" text="#00ff00" link="#80ffff" vlink="#400000" alink="#00ff00">
<h1><center>Meine erste HTML Seite</center></h1>
<hr>
<br>
<IMG src="Bild1.gif" height=63 width=501>
<br>
<IMG src="Bild2.gif" height=63 width=501>
<hr size=3>
<p>Dies ist mein erstes HTML-Dokument. Wie findest du es?? Ich habe es selbst geschrieben, und es macht riesen Spaß. Ich benutze dafür eine tolle Onlinehilfe und ein echt cooles Programm. Natürlich werde ich es bald registrieren! Wenn Dir diese Homepage gefällt, dann schicke mir doch eine <a href="mailto:Mustermann@provider.com">eMail</a>!!</p>
<hr>
<li><a href="http://www.polpotyle.com">Hier ein Link zu einem Superserver</a>
<li>Hier ein Link zu einer <a href="http://www.obernsoft.de/partner/ops">Multiplayerseite</a>
</BODY>
</HTML>

Jetzt schauen Sie sich Ihre Arbeit in einem Browser an, und Sie können stolz sein, Sie haben Ihre erste Webpage designed. Sie ist zwar nicht sehr anspruchsvoll, aber immerhin. Um mehr HTML Tags kennenzulernen klicken Sie hier.

Viele der hier verwendeten Tags hat eine ganze Reihe von Parametern. Über diese können Sie sich am besten in der Referenz informieren.