Webseiten erstellen Browser zeigen das Web Viele einzelne Publikationen Text ist die Basis Blick auf bits und bytes HTML beschreibt das Web Bau einer HTML-Seite Ihre erste HTML-Seite Ihr eigenes Mini-CMS Ausgestaltung von HTML-Befehlen Bilder einbinden Bildformate beachten Bilder aus dem Internet Seitengestaltung mit CSS Einfache Dynamik mit JavaScript AJAX im Web 2.0 HTML-Editoren

Seitengestaltung mit CSS

Mit der zunehmenden Verbreitung und der kommerziellen Nutzung des World Wide Web sind auch die Anforderungen an die Gestaltung von Webseiten gestiegen. Die klassischen HTML-Tags wurden für die neuen Anforderungen zu ungenau. Die Change lag in der Einführung einer weiteren Beschreibungssprache, die mit HTML verzahnt wurde: CSS – Cascading Style Sheets.

Nutzung von CSS

CSS-Angaben werden HTML-Tags zugeordnet und übernehmen die Detail-Gestaltung deren Inhalte. Diese Verzahnung geht inzwischen so weit, dass einige Formatierungs-Befehle aus HTML bereits als veraltet gelten und bald entfallen werden. Ihre Funktion wird bereits von CSS-Informationen übernommen.

Einbindung von CSS

Für die Anbindung von CSS-Angaben an die HTML-Tags stehen zwei Methoden zu Wahl: Die direkte Formatierung und die Bildung von CSS-Klassen. Für Angaben, die für die gesamte Webseite gelten sollen, sind CSS-Klassen zu empfehlen. Sie können zentral gepflegt werden und sind so auch leicht anzupassen. Nur bei einzelnen Elementen, die eine spezielle Gestaltung erfahren sollen, lohnt sich eine direkte Formatierung des Elements.

Mit der Nutzung von CSS-Klassen empfiehlt sich die Einbindung einer externen CSS-Datei. Diese Datei ist ebenfalls eine reine Textdatei, die zumeist die Endung „.css“ erhält. Sie zeichnet sich vor allem durch ihre eigene Syntax aus, die von allen aktuellen Browsern interpretiert wird. Sie wird mit der folgenden Syntax im Head Ihrer HTML-Datei eingebunden:

<link type=“text/css“ src=“my_style.css“ />

Mit dieser Definition können auch HTML-Tags ohne spezielle Klasse formatiert werden. So können Sie in dieser Datei allgemeine Vorgaben für den Body der Seite setzen:

body