Einleitung
HTML (Hypertext Markup Language) ist eine Auszeichnungssprache,
keine Programmiersprache, d.h. reines HTML kann nichts mit Variablen,
Schleifen oder Funktionen anfangen, sondern dient nur zur Formatierung
von darzustellenden Elementen. Es können aber Script- und Programmiersprachen
integriert werden (Sowas wie PHP, Java, JavaSc-ript usw.).
Was braucht man für die HTML-"Programmierung"?
Nicht viel. Man benötigt lediglich einen Browser
zum Testen und ein Textprogramm mit dem man die HTML-Dokumente erstellt.
Es gibt natürlich eine unendliche Zahl an HTML-Editoren, mit denen
man quasi auf Knopfdruck eine Seite erstellen kann. Für den Anfang
finde ich aber das Handgetippte lehrreicher.
Also: HTML-Dokumente sind eigentlich nur txt-Dokumente (Text) mit der
Endung html
"Beispiel.html". Man findet auch Dateien, die so aussehen: "Beispiel.htm"
Grundaufbau einer HTML-Seite:
| <html> <head><title>Meine erste Seite</title> </head> <body> Hallo Harry </body> </html> |
Die in den spitzen Klammern stehenden
Ausdrücke nennen sich Tags.
Dabei kann man hier ganz gut erkennen, dass es zu jedem <Start-Tag>
ein </End-Tag> gibt. Es gibt natürlich Ausnahmen, wie z.B.
das <img>Tag, welches nicht geschlossen wird. Dazu aber später
mehr.
Alles was nachher im Browserfenster dargestellt werden soll steht innerhalb
der <body>-Tags. Wenn Du Lust hast, kannst Du den Beispiel-Abschnitt
einfach mal in ein Text-Dokument kopieren, als HTML-Datei abspeichern
und öffnen.
Das Ergebnis ist dann die Ausgabe ins Browserfenster "Hallo Harry",
in der Titelzeile steht dann "Meine erste Seite".
Attribute
Tags können zusätzlich Attribute enthalten, die die Farbe, die
Größe und sonstige Eigenschaften des auszuzeichnenden Objektes
enthalten.
| <body bgcolor="#00ffcc"> |
Wobei "#00ffcc" der Farbwert ist, den wir nun für den Hintergrund des Browserfenster bestimmt haben.
Tabellen
Tabellen sind somit das wichtigste was man für
das Layout in HTML benutzt.
Das fällt deswegen nicht so auf, weil die Randstärke der Tabellen
für Layoutzwecke auf Null gesetzt werden.
Die ganze Seite, die Du hier siehst ist auch mit einer Tabelle gelayoutet
worden.
Grundsätzlicher Aufbau:
|
<table width="100" height="20" border="1"> |
Ausgabe:
|
Wobei das Table-Tag den Inhalt der Tabelle umschliesst. <tr> meint
die Tabellen Zeile (Table-Row); <td> besagt, dass das was zwischen
diesen Tags steht in die Tabelle ausgegeben werden soll. (Spalten)
Als Attribute haben wir die Breite und Höhe der Tabelle, sowie die
Randstärke gesetzt.
Als nächstes möchten wir zwei Spalten und eine Zeile erstellen und die erste Tabellezelle soll blau sein:
|
<table width="100" height="20" border="4"> |
Ausgabe:
|
||||
|
<table width="100" height="20" border="7"> |
Ausgabe:
|
||||
Hier ist eine weitere Tabellezeile definiert worden, die
sich zudem aufgrund des colspan-Attributes über zwei Spalten erstreckt
und 50 pixel hoch ist. Soll sich eine Spalte über mehrere Zeilen
erstrecken, dann benutzt man das rowspan-Attribut
Mittels des align-Attributs läßt sich die horizontale Ausrichtung
des Zelleninhaltes festlegen (left, center, right).
Analog für die vertikale Ausrichtung: valign mit (top, middle, bottom).
Bilder einfügen
<img src="Ordner/Bild.gif" width=100
height=100>
Das ist eines der wenigen Tags, die nicht geschlossen werden.
Hiermit können Bilder dargestellt werden.
Hierbei ist die Adressierung des Bildes zu verstehen.
src="Bild.gif": Das Bild ist im gleichen Ordner gespeichert, wie die HTML-Datei.
src="Ordnername/Bild.gif": Das Bild liegt in einem Ordner, der im gleichen Ordner wie die HTML-Datei liegt.
src="Ordername1/Ordnername2/Bild.gif": Ist klar, oder?
src="../Ordnername/Bild.gif":
Das Bild befindet sich in einem Ordner, der auf der selben Ebene liegt,
wie der Ordner, in dem die HTML-Datei gespeichert ist.
LINKS
<a href="AndereDatei.html">Ich bin ein Link</a>