öffentlich
Redaktion Druckversion

Große Websites selbst bauen

4.666665
(3)
Beitrag bewerten
Kommentar schreiben
Stand: 13. Oktober 2011

Erste Schritte

Cascading Style Sheets

Schon mit HTML 4.01/strict ist das background-Attribut im body-Element verboten und damit in XHTML erst recht. Das ist aber nicht nur theoretisch in Ordnung, sondern auch in der Praxis.

Stellen Sie sich vor, Sie haben über hundert HTML-Dateien fertig und anschließend fällt Ihnen ein, dass Sie ein anderes Hintergrundbild nehmen wollen. Natürlich könnten Sie unter dem gleichen Namen eine andere Bilddatei speichern, aber was wäre bei einem Hinzufügen einer Hintergrund-Farbe mit bgcolor="red"? Selbst wenn Sie mit Web-Editoren über mehrere Dateien hinweg ein Bearbeiten/Ersetzen durchführen können, klappt das nicht für alle möglichen Änderungen.

Sobald Sie die gestalterischen Teile des Dokuments jedoch in einer einzigen, zentralen Datei formulieren können, sind dort auch nachträglich jederzeit beliebige Änderungen möglich. Dieses Konzept gibt es bereits, und zwar unter dem Namen CSS (Cascading Style Sheets).

StyleSheets im Detail

Eine Einführung in die Tricks und Tipps von Cascading Style Sheets finden Sie im Beitrag "CSS: Stylesheets in der Praxis" viel ausführlicher, als das in diesem Rahmen möglich ist.

Dabei werden alle Formatierungen in so genannten StyleSheets (engl. Formatierungsblättern) gesammelt, wobei es sich dabei normalerweise um eine einzige Datei handelt. Die Tatsache, dass diese styles verschachtelt (engl. cascading) werden können, betrifft uns derzeit nicht.

Erstellen Sie im Hauptverzeichnis eine neue Text-Datei mit dem Namen stylesheet.css. Auch dabei gibt es verschiedene Versionen. Hier wird CSS 2.1 eingesetzt. Schreiben Sie in die Datei die folgenden Angaben:

body 
{
    background:url(bilder/hintergrund.png);
}

Die Schreibweise ist zwar anders als bei HTML, aber die Idee ist die gleiche: Es gibt Selektoren (body), die den Elementen entsprechen, und Attribut-Wert-Paare wie background. Die mehrzeilige Schreibweise ist keineswegs verpflichtend, Sie dürfen auch alles hintereinander schreiben. Das trägt jedoch nicht zur Übersicht bei, denn es werden gelegentlich noch mehr Attribute folgen.

Hier wird lediglich für ein HTML-body-Element vereinbart, dass es ein Hintergrundbild aus dieser Datei lädt. Das Konzept von sauberem HTML (und XHTML ist auch da vorbildlich streng) fordert ja, Inhalt und Optik zu trennen. Ein Hintergrundbild ist ganz klar Optik und daher im StyleSheet enthalten.

StyleSheets pflegen

Auch hier sind spezielle Web-Editoren keineswegs notwendig, aber doch recht hilfreich. Sie bieten die möglichen Attribute und Werte an und prüfen die korrekte Syntax. Der bereits erwähnte Visual Web Developer enthält einen Assistenten mit Vorschau dafür.

Bild vergrößernStyleSheet-Generator im Visual Web Developer

Sie können diese StyleSheet-Datei jetzt schließen, denn sie ist soweit fertig. Allerdings muss die HTML-Datei noch erfahren, dass ihre Formatangaben überhaupt im StyleSheet zu finden sind. Ergänzen Sie in index.html das <link>-Tag im Header:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wunderbare Welt der Wolpertinger</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Das wird die wichtigste Seite zum Thema "Wolpertinger"</h1>
<p>
Hier fehlt allerdings noch ein wenig Text. Das macht aber nichts, weil sich diese Seite noch erheblich ändern wird. So sehen Sie aber schon mal, dass es technisch funktioniert.
</p>
</body>

</html>

Kein Text in body erlaubt

XHTML erlaubt keinen Text innerhalb des body-Elements. Sie müssen dort immer die p-Elemente (paragraph, engl. Absatz) benutzen, wie es im obigen Text schon zu sehen ist.

Äußerlich hat sich an der Seite nichts geändert, wenn Sie das folgende Bild mit der vorigen Version vergleichen:

Bild vergrößernDie Seite mit CSS-Formatierung

Konzeptionell hat sich aber viel getan, denn so sind nicht nur die XHTML-Regeln eingehalten, sondern vor allem auch alle Vorbereitungen für größere Internet-Präsenzen getroffen worden. Sollte es später mal Änderungen am Layout geben, können Sie diese mit geringstem Aufwand in dieser einen StyleSheet-Datei pflegen. Sie werden gleich sehen, wie umfangreich Sie sogar damit Einfluss nehmen können!

Keine erste Tabelle!

Sehr weit verbreitet und nichtsdestotrotz verpönt ist die "Gestaltung" einer Seite mit Tabellen. Auf den ersten Blick mag das bequem sein, vor allem, wenn die Seiten mit so untauglichen Werkzeugen wie Word erzeugt werden.

Der dazu notwendige Code vergrößert aber die Datei beträchtlich und mischt vor allem Layout mit Inhalt. Er ist dadurch praktisch unlesbar und ganz furchtbar zu pflegen. Wem das noch nicht genug Quälerei ist, der schreibt noch Tabellenzellen, die über mehrere Spalten oder Zeilen reichen oder gar Tabellen, die in Tabellen geschachtelt sind.

Tabellen sind nur dazu da, Daten tabellarisch anzuzeigen. Für alles andere gibt es viel bessere Methoden, allen voran die Formatierung mit CSS, die Sie gerade ansatzweise schon kennengelernt haben.

Der Beitrag "Websites leichter gestalten - übersichtlichen HTML-Code und ansprechendes Design verbinden" zeigt ausführlich, wie Sie ohne Tabellen viel besser formatieren können.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Newsletter abonnieren