Einen im Anzeigebereich des Browsers unsichtbaren Bereich. Dies ist der Header (Kopf) einer Webseite.
Einen im Anzeigebereich des Browsers sichtbaren Bereich, d. h. die für den Anwender sichtbare Website. Das ist der Body (Körper) einer Webseite.
In dem der einleitenden HTML-Anweisung direkt folgenden Header werden allgemeine Hintergrundinformationen über die Seite zusammengefasst. Der Header wird immer als erster Teil einer Webseite geladen. In diesem Teil befinden sich die Meta-Tags, welche für die Suchmaschinen-Erfassung erforderlich sind. Auch für die Einbindung von Scripten oder Style-Sheets ist der Header von Bedeutung. Er beginnt mit der Anweisung
Code
0:
<HEAD>
und wird mit
Code
0:
</HEAD>
geschlossen.
Der Body enthält sämtliche Informationen, die der WWW-Browser einem Anwender auf dem Bildschirm anzeigen soll. Er beginnt mit der Anweisung
Code
0:
<BODY>
und wird mit
Code
0:
</BODY>
wieder geschlossen.
Das vollständige Grundgerüst einer normalen HTML-Datei sieht immer wie folgt aus:
Code
0: 1: 2: 3: 4: 5: 6: 7:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Der Header
Der Header ist der Bereich einer Webseite, der im Anzeigebereich des Browsers nicht angezeigt wird. Dennoch sind die Befehle im Head-Bereich von enormer Bedeutung.
Der Titel
Eine der wichtigsten Angaben im Kopfteil, die jede HTML-Datei enthalten sollte, ist der Titel. Der Titel wird in die Zeichenkette
Code
0:
<TITLE>
und
Code
0:
</TITLE>
eingeschlossen.
Der Titel erscheint beim Browser in der Titelzeile. Darüber kann also unter anderem eine im Browser angezeigte Seite identifiziert werden. Ein weiterer Effekt der Titelzeile ist, dass sie der Browser bei Lesezeichen und beim Anzeigen der bereits besuchten Dateien (Historie) verwendet. Der wichtigste Zweck der Titelzeile beruht auf der Funktion der Suchmaschinen im Internet. Die Titelzeile ist eine der wichtigsten Informationen, die Suchmaschinen zum Bewerten und Einsortieren von Webseiten verwenden. Nur über eine gut ausgewählte Titelzeile können Sie gewährleisten, dass später Anwender einer Suchmaschine bereits bei der Abfrage eine vernünftige Aussage über Ihre Seite präsentiert bekommen.
Die Tags im Header
Innerhalb des Kopfbereiches einer Webseite können diverse Elemente untergebracht werden. Zum Beispiel Hintergrundinformationen über das Dokument wie den Autor, das Erstellungsdatum oder den verwendeten Zeichensatz. Man nennt solche Informationen Metadaten. Sie werden beim Leser einer Seite nicht direkt angezeigt, stehen aber auswertenden Programmen wie Suchmaschinen oder anderen Dokumentationstools zur Verfügung. Daneben gibt es Aktionen wie eine Weiterleitung einer Seite, die über Meta-Informationen ausgelöst werden.
STYLE
Über den STYLE-Tag werden so genannte Style-Sheets in einer Webseite eingebettet. Näheres zum Style-Sheets erfahren Sie im Tutorial Style-Sheets.
Script
Der SCRIPT-Tag ist für von ganz entscheidender Bedeutung für die Programmierung mit JavaScript.
META
META-Tag s sind für Suchmaschinen zusammen mit dem TITLE-Tag die wichtigsten Anweisungen. Sie können auf verschiedenste Art und Weise verwendet werden. Etwa für Informationen über den Autor, den verwendeten Zeichensatz oder das Entstehungsdatum. Also jegliche Art von allgemeinen Hintergrundinformationen.
Nähere s zu META-Tags finden Sie hier.
Der LINK-Tag
Ein i. d. R. nur am Rande interessanter Tag ist
Code
0:
<LINK>
, um Beziehungen zwischen HTML-Dokumenten zu dokumentieren. Über die nachfolgende Anweisung kann die nachfolgende Seite der aktuellen Seite dokumentiert werden.
Code
0:
<LINK rel="Next" href="Beispiel3.htm">
Die Vorgängerseite wird so dokumentiert
Code
0:
<LINK rev="Previous" href="Beispiel1.htm">
Das Attribut rel definiert eine Vorwärtsbeziehung, rev hingegen eine Rückwärtsbeziehung. Das Attribut href gibt die konkrete Link-Beziehung an. Der LINK-Tag darf nicht als Hyperlink fehlinterpretiert werden. Der Tag hat eine wichtige Bedeutung, wenn Sie bei Style-Sheets externe Dateien angeben wollen. Eine Variante arbeitet mit dem Tag und referenziert damit die externe Datei. Etwa so:
Alle HTML-Dokumente besitzen einen Basispfad. Dies bedeutet, diese Pfadangabe wird bei sämtlichen relativen Verweisen auf andere HTML-Dokumente als Grundlage benutzt. Normalerweise ist der Basispfad das Verzeichnis, in dem sich die aktuelle Datei befindet. Deshalb ist es im Allgemeinen nicht erforderlich, diesen Basis-URL anzugeben. In Sonderfällen kann man über den BASE-Tag den Basispfad verändern, in dem man einen URL dafür angibt. Diesen URL gibt man über den Wert des Attributs href an.
Beispiel:
Code
0:
<BASE href="http://www.webmasterarchiv.c om/">
Der BODY
Der Body-Bereich einer Webseite umfasst sämtliche sichtbaren Informationen einer Webseite. Innerhalb des von dem Start- und Ende-Tag gebildeten Containers sind sämtliche Daten einzufügen.
Beispiel:
Code
0: 1: 2: 3: 4: 5: 6: 7: 8:
< HTML>
<HEAD>
<TITLE>Webmasterarchiv.com - Webmaster-Tools, Tutorials, Downloads, Grafiken,...</TITLE>
</HEAD>
<BODY>Ab hier wird alles sichtbar, d. h. alles was zwischen Body steht wird auch der Browser anzeigen.
</BODY>
</HTML>
Farban gaben
Farbangaben können unter HTML in zwei Varianten durchgeführt werden:
Angabe des RGB-Wertes einer Farbe in Hexadezimalform
Angabe eines expliziten Farbnamens
Bei der Angabe der RGB-Werte in Hexadezimalform müssen die Farben aus den drei Grundfarben Rot, Grün und Blau über ihre jeweiligen Anteile zusammengestellt werden. Dabei ist jede hexadezimale Farbdefinition sechsstellig und hat das Schema: #XXXXXX
Hinter dem Gatter '#' folgen zwei Stellen für den Rotwert, die Stellen drei und vier für den Grünwert und die letzten beiden Stellen für den Anteil von Blau. Die Angabe der RGB-Werte in Hexadezimalform hat den Vorteil, Browser-unabhängig zu sein, und es stehen im Prinzip 16,7 Millionen Farben zur Verfügung. Hier folgen einige Beispiele für die hexadezimale Farbangabe:
Die Liste von Farbangaben ist nicht willkürlich, sondern entspricht den 16 Standardfarben, welche auch bei einer Bildschirmpalette vn nur 16 Farben korrekt angezeigt werden sollten.
Deshalb gibt es die Möglichkeit der direkten Eingabe von standardisierten Farbnamen, die weitgehend den normalen englischen Farbbezeichnungen entsprechen. Die folgenden Farbnamen werden von den wichtigsten neueren Browsern korrekt interpretiert. Es handelt sich dabei um die gleichen Farben wie bei der hexadezimalen Farbangabe.
Farbe Farbangabe Weiß: white
Silber: silver
Grau: gray
Schwarz: black
Rostbraun: maroon
Lila: purple
Rot: red
Lilaton: fuchsia
Gelb: yellow
Grün: green
Hellgrün: lime
Olivgrün: olive
Blau: blue
Marineblau: navy
Dunkeltürkis: teal
Hellblau: aqua
Der Nachteil der direkten Farbangabe ist zum einen, dass es natürlich nicht für 16,7 Millionen Farbnuancen einen Namen gibt. Es gibt zwar weit mehr als 16 Farbnamen, aber die meisten der Farbnamen sind nicht standardisiert. Es ist oft nicht eindeutig, wie Mischfarben - also aus den drei Grundfarben zusammengemischter Farben - genau auszusehen haben. Eine Farbangabe kann auf verschiedenen Browsern ganz unterschiedlich ausschauen. Die Interpretation der Farbangabe ist also in den meisten Fällen explizit Browser-abhängig.
Angabe der globalen Hintergrundfarbe
Die Farbdefinition für die Hintergrundfarbe erfolgt einfach als Ergänzung des -Tags mit dem Attribut bgcolor. Dieser hätte dann folgende Struktur:
Code
0:
<BODY bgcolor=[Farbe]>
Beispiel für die Hintergrundfarbe Gelb über eine direkte Farbangabe:
Code
0:
<BODY bgcolor=yellow>
Beispiel für die Hintergrundfarbe Blau über eine hexadezimale RGB-Angabe:
Code
0:
<BODY bgcolor=#FFFF00>
Beispiel für die globale Textfarbe Schwarz über eine direkte Farbangabe:
Code
0:
<BODY text=black>
Die HTML-Datei sollte nun so aussehen:
Code
0: 1: 2: 3: 4: 5: 6: 7: 8:
<HTML>
<HEAD>
<TITLE>Webmasterarchiv.com - Webmaster-Tools, Tutorials, Downloads, Grafiken,...</TITLE>
</HEAD>
<BODY bgcolor=#FFFF00 text=black>Ab hier wird alles sichtbar, d. h. alles was zwischen Body steht wird auch der Browser anzeigen.
</BODY>
</HTML>
Hintergrundbilder
Ein e alternative zur Hintergrundfarbe stellen Hintergrundbilder dar. Hierzu wird das Attribut background verwendet. Mit der folgenden Struktur lässt sich die Darstellung eines Hintergrundbildes realisieren:
Wichtig: Die Tutorials wurden entweder von uns erstellt oder von unseren Usern eingetragen. Sollten wir mit irgenteinem Tutorial ein Copyright verletzten, schickt uns bitte umgehend eine E-mail. Wir werden das entsprechende Tutorial entfernen. Kommentare werden von uns nur in unregelmäßigen Abständen überprüft.
zurück
