Das Synonym HTML steht für Hyper Text Markup Language. Auf dieser Seite sollen Anfängern die Grundstruktur einer HTML-Seite gezeigt werden. Eine solche Seite lässt sich mit einem einfachen Editor wie z. B. Notpad oder aber auch HTML-Editoren z. B. dem Netscape Composer, ich benutze abwechselnd beide erwähnte Varianten, erstellen. Ich finde es auch ratsam, nach einem 'Designschritt' zu speichern (entweder unter dem htm- oder unter dem html-Format) und anschließend über einen Browser seine Arbeit zu testen, ob alles so aussieht, wie man es sich vorgestellt hat und ob auch alles funktioniert, wie z. B. Links oder Grafiken.
Die Befehle, aus denen eine HTML-Seite besteht, nennt man "Tags" (=Befehle):
Zum Beispiel: <title> Meine 1. Homepage </title>
Alle
Tags werden in <> Zeichen geschrieben. Jeder begonnene Tag MUSS
auch wieder geschlossen werden, sonst kann es, wie schon häufiger
bei mir vorgekommen, passieren, dass die Seite auf einmal leer ist,
obwohl man eine halbe Seite geschrieben hat.
Grundlegende Reihnfolge oder Struktur einer Page ist folgende:
<html> Beginn
der HTML-Seite
<head> Der Kopf der Seite, in der Informationen wie
<title> der Titel, der dem Fenster einen Namen nach Wunsch, wie
oben z. B. HTML-Einführung zu sehen ist
</title> Wie oben erwähnt, muss jeder Tag, auch der Tag für
den Titel geschlossen werden
</head> Beendung des Kopfes
<body> Der sichtbare Bereich für den User, der die Seite aufgerufen
hat. In diesem Bereich können auch weiterhin Tags definiert werden,
um Grafiken oder Links zu definieren.
</body> Abschluss des Tags
</html> Ende der HTML-Seite
Erstell deine erste Page
Ein kleiner Hinweis vorweg: Eine Startseite wird, so kenn ich es jedenfals, als Index.html auf dem Server abgelegt. Angenommen, eine Startseite soll generiert werden, die wie diese aussieht:
 |
Ich musste mich jetzt entscheiden, wie ich den Aufbau dieser Site erläutere und habe mich nun dazu durchgerungen, von oben nach unten zu gehen, wie auch die fertige Site (von den Tags her gesehnen) aussieht.
Hier der erst Abschnitt:
<html>
<head>
<meta http-equiv="refresh" content="12; URL=http://home.knuut.de/Florian.E/DSAauto.htm">
<title>DSA-Seite und DSA-Chat (Das Abenteuer hat begonnen)</title>
</head>
<body bgcolor="#000000" link="#0000FF" vlink="#800080">
Wie
oben schon erwähnt, wird die Website durch <html> eingeleitet.
Danach wird mit <head> der Kopf gestartet.
Dies wird vielleicht nicht jeden interessieren,
ist aber für eine Startseite solchen Typs nützlich, denn
der Tag <meta http-equiv="refresh" content="12; URL=http://home.knuut.de/Florian.E/DSAauto.htm"> bewirkt,
dass nach einer bestimmten Zeit (12 sec) erneut diese oder eine andere
(automatische Weiterleitung) Page geladen wird. Der erste Ausdruck
bis content leitet den Wiederaufruf (refresh) ein. Nach dem Ausdruck
content= folgt die Zeit in Sekunden und durch ein Semikolon getrennt,
die zu verweisende URL. Beide werden zusammen in Anführungszeichen
eingeschlossen.
So, hier geht es wieder für alle weiter.
Durch den Tag <title>, ob man die Tags groß oder klein
schreibt, ist eigentlich egal, wird beim Browser über die Menüleiste
der Titel dieser Seite angezeicht; und nicht vergessen, den Tag wieder
mit </title> zu schließen. Damit kann man nun auch den
Abschnitt "head" schließen. Danach beginnt der eigentliche
Hauptteil der Seite. Wie in der Grafik oben zu sehen ist, ist er Hintergrund
schwarz. Hinter dem Anfang <body> wird eingeleitet, dass der
Hauptteil beschrieben wird. bgcolor steht für die Hintergrungfarbe,
die nach dem Ist-Gleich-Zeichen in Anführungszeichen steht. Vor
der Zahl ist ein #-Zeichen gestezt. Die Hexamalzahl kann man in Programmen
wie PaintPro oder ähnlichen ablesen. link= gibt die Farbe eines "unbenutzten” Links
an und vlink= steht für schon besuchte (visited) Links.
<center>
<p><img SRC="Grafiken/welcome2.gif" NOSAVE height=40
width=262>
<p><font color="#FF0000"><font size=+1>Du
betrittst nun das Reich der DSA-Fantasy
und vielem mehr!</font></font>
<br>
Als
nächstes folgt, da alles auf der Seite zentriert ist, der Tag <center>.
Der in der nächsten Zeile stehende Tag <p> steht für "paragraph" -
zu deutsch Absatz. Fast die gleiche Wirkung wird auch mit dem <br>-Tag
erreicht (br steht für break). br springt in die nächste
Zeile, p lässt zusätzlich noch einen Leerraum. Beide Tags
müssen nicht geschlossen werden. Als nächstes wird die Grafik
welcome2.gif eingebunden. Dies erfolgt durch den Tag <img src="Pfad/Grafikname">.
img steht für image und src für source. Man sollte tunenstlich
keine absoluten Pfade, wie c:\Grafiken angeben, da diese auf dem Server
nicht funktionieren und man dann, wie bei vielen anderen Seiten einen
Grafikplatzhalter zu sehen bekommt und der Seite so ja auch etwas verlohren
geht. In den Tag können auch noch weitere Informationen, wie Höhe
der Grafik (height), Länge der Grafik (width) angegeben werden.
Ist die Grafik gleichzeigt auch ein Link, entsteht häufig ein
ungewollter Rahmen, der mit dem Zusatz border=0 verschwindet. Auch
könnte hier die Ausrichtung ("align" = alignment) mit
den Befehlen left , right oder center festgelegt werden, was aber schon
durch <center> für das ganze Dokument geschah. Alles was
nun nicht in diesen <>-Zeiche steht, wird normalerweise als Text
interpretiert. Über den Befehl <font color="#FF0000"> wird
die Vordergrund- oder Textfarbe definiert. In diesem Beispiel ist dies
ein roter Farbton. Gezählt wird von 0 bis 9 und dann von A bis
F, bevor man zur nächsten Stelle kommt. Je näher man dem
Buchstaben F kommt, desto satter wird der Farbton. Die Farbe kann aber
auch durch vordefinierte Bezeichnungen wie white, blue, green, etc.
gesetzt werden. Allerdings interpretiert nicht jeder Browser die Farbschlüsselwörter
nicht immer gleich. Jetzt wird der Schriftgrad festgelegt. Dies kann
auf zwei Arten geschehen. Die erste wäre, wie im Beispiel, durch <font
size=+- X> eine um X größere oder kleinere Schrift darzustellen.
Die zweite wäre durch den Tag <h1>TEXT</h1> die Schriftgröße, <hX> steht
für headline, zu setzten. <h1> ist die größte
und <h6> die kleinste Schriftgröße. Auch dieser Tag
kann erweitert werden.
<h3 align=right>TEXT</h3>
<br>
<p><a href="DSAauto.htm"><img src="Grafiken/eintr.jpg" nosave
border=0 height=300 width=370></a>
<p><font color="#FF0000">automatische Weiterleitung
in 12 Sekunden</font>
<br><font color="#FF0000">ansonsten geh' durch
das Stargate!</font></center>
</body>
</html>
Als
nächstes folgt ein Link. Ein Link begint immer mit einem "a" (es
steht fur anchor=Anker). Hinter dem "a" steht der Ausdruck "href",
welcher für Hyperreference (Bezugnahme) steht. Als das WorldWideWeb
noch in den Kinderschuhen steckte, gab es nur Zahlenkombinationen um
eine Seite aufzurufen. Diese Zahlen wurden, zum Glück für
uns Surfer, in eine meist einfache Linkadresse umgewandelt. Jeder hat
einen Browser, aber die wenigsten werden sich mal Gedanken gemacht
haben, was das eigentlich heißt. Browser, abgeleitet von to browse,
was soviel bedeutet, wie blättern/schmökern. Beenden wir
mal die Exkursion und kommen wieder auf das Wesentliche zurück.
Der in Anführungszeichen stehende Verweis ist ein sogennanter "interner
Verweis". Er bezieht sich eigentlich auf selbstentworfene Daten,
die auch unbedingt, sofern man nicht noch eine Pfaderweiterung angibt,
wie "Grafik/Bild1.gif" im gleichen Verzeichnis sein müssen.
Es sind auch "externe Verweise", die das Format <a href=" http://home.knuut.de/Florian.E/Hauptseite.htm"> Zurück
zur Hauptseite </a>, möglich. Auch innerhalb einer Seite
sind Verweise möglich. Sie werden dann benutzt, wenn man ein Inhaltsverzeichnis
verwenden möchte, um auf der Seite zu bestimmten Abschnitten zu
springen.
<a name="Anfang">Einstieg in die HTML-Programmierung</a> => Die Überschrift
bekommt die Zielmarke "Anfang"
<a href="#Anfang">Zum Anfang</a> => Der eigentliche
Link. die Raute bedeutet, dass das Ziel auf der gleichen Seite zu finden
ist.
Danach folgt der Linktext, der ungefähr beschreiben soll, wohin
einem der Verweis schickt. Der Linkbereich wird durch </a> beendet.
Im Beispiel oben, ist allerdings kein Linktext vorhanden, dafür
aber eine Grafik. In den nächsten zwei Zeilen, wird wieder die
Textfarbe definiert, ein Text geschrieben und der Tag geschlossen und
durch </center> der am Anfang der Seite Zentrierungstag beendet,
der Body geschlossen und die HTML-Page fertig gestellt.
So, ich hoffe, dass diese Art der Einführung nicht zu verwirrend war und dass man etwas daraus lernen kann.
