Manuelle Erstellung von HTML-Dokumenten
von Dirk Taggesell
Als ersten Schritt auf dem Weg zum Webdesigner sollten sie die grundsätzliche Struktur einer HTML-Datei kennenlernen. Die Syntax ist recht einfach und leicht zu erlernen. Innerhalb dieses Artikels kann HTML natürlich nur grob umrissen werden. Weiterführende Informationen finden Sie im Internet unter www.teamone.de/selfhtml/.
Diese Anleitung ist sehr umfangreich und gut verständlich. Außerdem wird sie in Abständen auf den neuesten Stand gebracht. Sie können Selfhtml entweder online lesen oder als Archiv downloaden und die Dokumentation auf Ihrer Festplatte installieren. SelfHtml ist auch in Buchform erhältlich.
--- schnipp---
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>
</body>
</html>
--- schnapp ---
In der Abbildung sehen Sie die Minimalversion einer HTML-Datei. Sie haben gewiß bemerkt, daß die Befehle (nachfolgend "Tags" genannt) immer paarweise auftreten. Ein "<tag>" wird jeweils durch ein "</tag>" abgeschlossen. So schließt das Tag "<html>" die gesamte Datei ein. Dazwischen gibt es zwei Abschnitte: den Kopf (zwischen "<head>" und "</head>") sowie den Körper der Datei (zwischen "<body>" und "</body>").
Während im Kopf verschiedene sogenannte Meta-Informationen stehen können, wie z.B. der Seitentitel, welcher in der Titelzeile des Browsers erscheint, befinden sich die eigentlichen, sichtbaren Elemente der Webseite im Körper. Im obigen Minimalbeispiel ist dieser leer, weshalb Sie im Browser nur einen leeren Hintergrund sehen würden.
--- schnipp---
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<b>Das ist meine erste Webseite!</b>
<hr width="200" size="2"><br>
Hier sehen Sie mein Motorrad.<p>
<img src="bilder/meinmotorrad.jpg" width=474 height=289 border="0">
</div>
<a href="seite2.html">Hier geht es weiter...</a>
</body>
</html>
--- schnapp ---
Hier ist schon ein wenig Inhalt zu sehen. Im Body-Tag sind nun auch die Hintergrundfarbe ("bgcolor") und die Textfarbe festgelegt. Die Farbwerte sind dabei Sedezimal anzugeben. Dazu sind die jeweils drei Grundfarben Rot, Grün und Blau mit Werten von 0-255 besetzt, die in sedezimale Werte umgerechnet werden.
Den Zusammenhang zwischen dem dezimalen und sedezimalen Zahlensystem zu erklären, würde den Rahmen dieses Buches sprengen. Auf der Selfhtml-Website (http://www.teamone.de/selfhtml/tkb.htm) gibt es ein kleines Programm, das die Umrechnung erledigt.
Im obigen Beispiel ist nach dem Beginn des Körpers ("<body>") als erstes
ein Befehl zum Zentrieren des folgenden Inhaltes zu sehen ("<div align="center">").
Alles was zwischen diesem und dem schließenden Tag "</div>" liegt, wird
somit im Browserfenster zentriert. Die Zeile "Das ist meine erste Webseite"
wird obendrein wegen "<b>" in fetter Schrift angezeigt.
Als nächstes folgt ein sogenannter Horizontal Ruler ("<hr>"), ein waagerechter
Strich mit 200 Pixel Breite, gefolgt von einer weiteren Textzeile.
Nun wird es interessant: mit "<img src="...">" wird ein Bild innerhalb der Webseite plaziert. Als Parameter sind dabei Dateipfad und -name der Bilddatei anzugeben. Die Angabe von Höhe und Breite in Pixel muß nicht unbedingt vorhanden sein, ist aber sehr hilfreich, weiß doch der Browser damit bereits ehe er das Bild geladen hat, wieviel Platz auf dem Bildschirm dafür reserviert werden muß. Das beschleunigt den Bildaufbau. Mit "border=0" schließlich unterdrückt man den ansonsten angezeigten blauen Rand um das Bild.
Nach dem Tag, welches das Bild einbindet, ist der DIV-Befehl zum Zentrieren zu Ende. Das heißt, alles was danach kommt, wird linksbündig angezeigt. So auch der Link in der nächsten Zeile. Auf der Webseite ist die Mitteilung "Hier geht es weiter..." zu lesen. Klickt man darauf, wird die im HTML-Code angegebene Datei ("seite2.html") geladen. HTML-Dateien sollten generell die Endung ".html" besitzen. Die verkürzte Form ".htm" funktioniert zwar meistens auch, ist aber nicht ganz korrekt.
Natürlich ist die vorgestellte Beispielseite recht primitiv, zeigt aber anschaulich den grundsätzlichen Aufbau einer Webseite. Für die professionelle Gestaltung gibt es mit Tables, StyleSheets und Layern noch eine ganze Menge Instrumente, deren Anwendung jedoch nicht mehr ganz so einfach ist. Das oben erwähnte Selfhtml oder auch andere HTML-Kurse bringen Ihnen diese Werkzeuge leicht verständlich nahe.