|
HTML-Tags
allgemeine Struktur jeder HTML-Seite
<html>
<head>
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
|
Dieser Tag definiert die Seite als HTML-Datei
Hier beginnt der Dateikopf mit technischen Angaben
Titel gibt an, was im Browserfenster als Titel steht
Hier endet der Dateikopf mit technischen Angaben
Hier beginnt der Inhalt der Seite
Hier endet der Inhalt der Seite
Hier endet die Seite
|
Jede Internetseite muss sich an diese Struktur halten. Im <head>-Bereich
sind weiter Angaben zur Einbindung eines Style-Sheets oder Programmzeilen
in JavaScript möglich.
Der Body-Tag kann Angaben zur Seitengestaltung enthalten, wie zB.
eine Hintergrundfarbe oder ein Hintergrundbild. diese werden mit
bgcol="farbe" oder img="datei" eingefügt.
Weiter ist es möglich Programm-Skripts im <body>-Tag
einzubinden. Diese werden dann automatisch beim Lesen der Seite
ausgeführt.
Wichtige Tags
Will man die wochtigsten Tags lernen, so hält man sich am
Besten an die Reihenfolge, die auch das WWW gewählt hat, als
es entstanden ist. HTML hat sich über Jahre entwickelt (und
es entwickelt sich noch immer) und mit der Sprache hat sich auch
das Erscheinungsbild gewandelt.
Am Anfang war das Wort
Das revolutionäre an der "Hypertext Markup
Language" war, dass sie Texte interaktiv mit einander verknüpfte.
Früher musste man immer eine komplette URL eingeben, um einen
Text abzurufen. Anfangs der Neunzigerjahre wurden am CERN in Genf
die Links erfunden. Das Web war geboren.
Link-Tag: HREF
Um aus einem normalen Wort einen Link zu machen, muss man es mit
einem Anker-Tag (<A>) markieren und dem Anker einen Link (HREF)
hinzufügen. Als Attribut wird dem Link eine Quelle und allenfalls
eine Ziel (TARGET) angegeben. Das Ziel sagt, in welchem Fenster/Frame
eine Seite geöffnet wird. Ohne Angabe wird das aktuelle Frame
verwendet.
Beispiel: In diesem Satz
verbirgt das Wort Satz einen Link zur Seite "satz.htm".
Quelle: In diesem <A HREF="satz.htm" target="_blank">
Satz </A> verbirgt... |
Absolute und relative
Links
Das Ziel unter HREF kann entweder relativ (wie im Beispiel) oder
absolut definiert werden. Die absolute URL beinhaltet die ganze
Adresse (http://www.michaelheim.com/php/wwwtags.htm), währenddem
die relative URL nur jenen Teil der Adresse verwendet, der sich
von der Adresse der aktuellen Datei unterscheidet.
Target kann verschiedene Attribute besitzen.
Sie sagen, in welchem Ziel die Datei geöffnet wird:
| _blank |
blank öffnet die Zieldatei in einem leeren
(zusätzlichen) Browserfenster |
| _top |
top öffent die seite im aktuellen Fenster
im obersten Frame (es ersetzt also alle Frames) |
| _parent |
öffnet die Seite im aktuellen Frame und entspricht
oft der Variante ohne Target-Befehl |
| "name" |
Da jedes Frame einen Namen
hat, kann man das Ziel auch über diesen Namen festlegen.
Anstelle eines Standardattributs wird dann einfach der Name
des Frames (ohne Unterstrich) verwendet. Gibt es kein Frame
mit dem entsprechenden Namen, so wird ein neues Browserfenster
geöffnet. |
Textstruktur
Um einen Text strukturieren zu können, muss man Zeilen- und
Abschnittswechsel definieren können. Zeilenwechsel
(Breaking Spaces) sind einfache Tags (<br>), die einfach an
der Stelle eingefügt werden, an der ein Zeilenwechsel wie hier
angezeigt werden soll.
Abschnittswechsel kann man entweder
mit einem oder zwei Tags beschreiben. Grundsätzlich führt
das einfügen eines <p>-Tags zu einem Abschnittswechel
(also einem Zeilenumbruch mit Lücke). Neuere Markup-Sprachen
(zB XML) verwenden allerdings nur noch Anweisungen mit End-Tag,
und daher wird empfohlen auch Abschnitte mit einem Anfangs (<p>)
und einem End-Tag (</p>) zu definieren.
Typographie
Es gibt ein paar einfache Tags (ohne Attribute), die es ermöglichen,
das Schriftbild zu gestalten:
<b>text</b> setzt
den Text zwischen den Tags fett.
<u>text</u> unterstreicht
den Text.
<i>text</i> setzt
den Text kursiv (italic)
Der Font-Tag beschreibt die
verwendete Schrift und das Schriftbild über verscheidene Attribute.
Form: <font attribut="anweisung"> text </font>.
Meistens wird der Font-Tag angewandt, um die Schriftgrösse
(Font Size) und die Schriftart (Font Face) zu definieren.
Die Schriftgrösse (<Font
Size="+1">) beeinflusst die angezeigte Schriftgrösse.
Dabei unterscheidet man zwischen relativen Schriftgrössen und
absoluten Schriftgrössen. Die direkt in HTML verwendeten Schriftgrössen
sind in der Regel relativ. Es gibt zwei Varianten:
-2, -1, +1, +2, .... zeigt direkt, ob die Schrift grösser oder
kleiner als die Standardschrift ist.
1, 2, 3, 4, ... definiert verschiedene Schriftgrösse, wie wir
sie uns in Textverarbeitungs-programmen gewöhnt sind.
Relative und absolute
Schriftgrössen:
In allen Browsern lässt sich die angezeigte Schriftgrösse
verstellen (bei Netscape unter View/Text Zoom bzw Ansicht/Textgrösse).
Dies soll zB Sehbehinderten ermöglichen, die Schrift zu vergrössern.
Nachteil ist, dass das Vergrössern der Schrift veränderungen
in der Seitenstruktur verursacht. Der Text braucht (relativ zu den
Grafiken) mehr Platz und die Umbriche liegen anders. Will man dies
verhindern und damit das Layout stärker kontrollieren, so muss
man absolute Schriftgrössen verwenden, die sich in den aktuellen
Browsern (mit Ausnahme des Mozilla 1.0) nicht verstellen lassen.
Allerdings kann man diese Schriftgrössen nur im Zusammenhang
mit Style Sheets (CSS) verwenden.
Schriftart: Mit Font Face (<Font
Face="Arial, Helvetica, Verdana">) lässt sich
die verwendete Schrift definieren. Dabei gibt ein ein paar Dinge
zu beachten: Nicht jeder User hat die gleichen Schriftarten installiert.
Man sollte daher nur allgemein bekannte Schriften verwenden. Auch
heissen die Schriften auf PCs und Macs nicht gleich. Der Arial auf
Windows entspricht beim Mac die Schrift Helvetica. Man kann daher
mehrere Schriften hinter einander, durch ein Komma getrennt, auflisten.
Der Browser verwendet dann die erste ihm bekannte Schrift.
Verschiedene Font-Attribute lassen sich in einem Tag kombinieren.
Ein Beispiel:
<Font Face="Times New Roman, Times, serif" Size="4">Gestalteter
Text</Font> |
Grafiken einbinden
Zu diesem Thema gibt es eine eigene Seite.
Andere Texte einbinden (mit PHP)
Zu diesem Thema gibt es eine eigene Seite.
|
