Inhaltsverzeichnis -> Hyperlinks setzen

HTML: Die grafische Gestaltung einer Webseite

Nun möchte ich Ihnen zeigen, wie wir eine Homepage optisch aufbereiten können. Schauen Sie sich dazu bitte einmal dieses Beispiel an.

Diese Seite verfügt über zwei Besonderheiten: Es wird nicht mehr die Standardschrift Times New Roman verwendet und die Überschrift wird außerdem in einer dunkelroten Farbe angezeigt.

Der Programmcode weicht kaum von einer regulären Internetseite ab. Zwischen den head-Tags der Datei finden wir den entscheidenden Unterschied:

<head> 

<link rel="stylesheet" type="text/css" href="style.css" />

<title>Homepage von XY</title>

</head>

Die neu eingefügte zweite Zeile in diesem Code ist folgendermaßen zu verstehen: Der Befehl "link" teil mit, dass wir ein Zusatzdokument in unsere Internetseite einbinden möchten. Die dann folgenden Parameter sagen aus, dass es sich um ein CSS-Dokument handeln soll. Die Abkürzung CSS steht für Cascading Style Sheets. Mit CSS ist es möglich, festzulegen, wie einzelne HTML-Tags von einem Browser dargestellt werden. Die Ursprügliche Idee von HTML war es eigentliche, die genaue Darstellung aller Elemente allein dem Browser zu überlassen, um den Datenverkehr zu minimieren. Weil man als Webdesigner aber auch gerne ein wenig Einfluss auf die Erscheinungsweise einer Webseite nehmen möchte, wurde der CSS-Standard ins Leben gerufen.

Am Ende des Links, mit dem wir unsere CSS-Datei einfügen, wird ein Paramter nahmens "href" festgelegt. Sie haben diesen Paramter schon kennengelernt, als Sie einen Link eingefügt haben. Auch hier folgt eine Pfadangabe, die auf ein Dokument verweist. Das Dokument heißt "style.css" und befindet sich im selben Ordner wie unsere HTML-Datei.

CSS-Dateien können wie HTML-Dateien mit einem einfachen Texteditor erstellt werden. Wichtig ist nur, dass die Datei die Endung CSS am Ende erhält.

Ich möchte mir mit Ihnen einmal den Code der CSS-Datei anschauen:

html {
font-family: verdana;

}

h1 {
color: #880000;
}

Wie sie sehen, haben wir es hier mit neuen Begriffen und einer neuen Syntax tun. Auch CSS ist ein Bereich des Webdesigns, zu dem man ein eigenes Tutorial verfassen kann. Diese Thema wird daher an dieser Stelle nur kurz behandelt.

Zu Beginn unseres CSS-Dokuments lesen Sie den Begriff "html", gefolgt von einer geschweiften Klammer. Der Begriff "html" entspricht dem html-Tag, der das gesamte HTML-Dokument umschließt. Die Angabe "font-family: verdana;" besagt nun, dass alle Texte, die zwischen dem HTML-Tag stehen, die Schriftart "Verdana" erhalten.

Auch für das h1-Tag, das man für Überschriften verwendet, wird eine Festlegung vorgenommen. Es wird eine Farbe festgelegt, die als Hexadezimalzahl angegeben wird. Hexadezimalzahlen werden grundätzlich mit einem Raute-Zeichen eingeleitet. Jeweils zwei Ziffern stehen für einen Kanal im RGB-Farbraum. Im Internet finden Sie Tabellen mit Übersichten zu den Farbwerten.

nächstes Kapitel - Inhaltsverzeichnis