Webstandards Adventskalender

1.12. Wozu Webstandards?

Dieser Adventskalender dreht sich hauptsächlich um Webstandards. Es handelt sich hierbei nicht um einen Modebegriff und auch nicht um eine Modeerscheinung, sondern einfach um den Grundgedanken des Internet.

Am Anfang stand die Idee, Informationen auf der ganzen Welt für Jedermann zugänglich zu machen. Es wurden Grundregeln entwickelt, nach denen Endgeräte die aufbereiteten texte interpretieren sollten. Es wurden also Standards gesetzt. Leider haben die Browserentwickler diese Standards nie vollkommen erfüllt. Auch heute gibt es noch keinen Browser, der XHTML und CSS hundertprozentig beherrscht. Insbesondere der Marktführer, der Internet Explorer, hängt in der Entwicklung extrem hinterher und behindert so die Weiterentwicklung des Web.

Wer genaueres über den Nutzen und Sinn der Standards erfahren möchte, der kann dies auf folgenden Seiten tun:

2.12. Webstandards und Browser

Aus der Sicht der Unterstützung von Webstandards, aber auch der Sicherheit des eigenen Rechners plädieren wir für die Nutzung eines anderen Browsers als des Internet Explorer (IE). Der IE stammt aus den späten 90ern und hat noch nie die Webstandards in großem Maße unterstützt. Firefox und Opera sind da viel weiter. Die möglichst gute Unterstützung von Webstandards wiederum verbessert unser Surfvergnügen und fördert die Entwicklung des Internet.

Den Menschen, die die Nutzung eines anderen Browsers scheuen, weil sie sich dessen Installation und Bedienung nicht zutrauen, kann geholfen werden. Denn beides ist keine Hexerei und wer einmal einen alternativen Browser getestet hat, wird durch dessen Bedienungskomfort und den Einfallsreichtum der Programmierer schnell begeistert.

Empfehlung: Auf Firefox umsteigen

Wir empfehlen zur Nutzung Firefox. Hilfreiche Hinweise zur Installation und Nutzung gibt es seit Kurzem auch in Deutsch im Netz. Alp Uçkan beschreibt die Installation von Firefox, sehr leicht verständlich und mit vielen Bildern. Ralph Segert wiederum beschreibt in "Mit Firefox per Du" in 11 Kapiteln eine "Browserfreundschaft".

Firefox ist schlank und schnell installiert und glänzt durch hohe Funktionalität, viele Erweiterungen und eine hohe Sicherheit. Anstatt eine separate Google-Leiste installieren zu müssen, ist in Firefox ein kleines Suchfeld integriert, dank dessen man per Eingabe auch in Google, aber auch in über 1000 anderen Suchmaschinen, Katalogen, Lexika etc. suchen kann. Die Nutzung von Tabs statt neuer Fenster spart Platz in der Taskleiste und erleichtert den Überblick, wenn man auf mehreren Seiten gleichzeitig surft. Auch der standardmäßig aktivierte Popup-Blocker sorgt für Sicherheit und Komfort.

Darf es etwas mehr sein? Alternativen und Erweiterungen

Firefox ist Browser pur, wie der IE. Für E-Mails und Newsgroups bietet sich als OutlookExpress-Alternative der Firefox-Bruder Thunderbird an. Wenn Du es aber lieber kompakt hast, dann schau Dir doch den "älteren Bruder" von Firefox an: die Mozilla-Websuite. Dieser Browser vereint neben dem Browser auch ein Email-Programm (Mozilla Mail), ein Chatprogramm (IRC Chat), ein Adressbuch und einen HTML-Editor (Composer).
Firefox und auch Mozilla sind durch viele kleine Helfer erweiterbar und so an jeden Geschmack anpassbar. So ist vom Notizblock bis zum Downloadmanager alles vertreten. Insbesondere für Webentwickler gibt es ein Arsenal einfallsreicher Erweiterungen. Informationen zu wichtigen Erweiterungen findest Du in zwei Artikeln bei Wertewerk.

Direkte Downloads für Firefox

Viele Informationen rund um die Mozilla-Websuite bekommst Du u.a. auf Perun.net, Pixelgraphix wiederum hat einen speziellen Firefox-Bereich.
Direkte Downloads für Firefox:
Windows, Mac OS X, Linux, noch mehr Betriebssysteme

3.12. Was ist eigentlich barrierefreies Internet?

Allerorten geistert es durch die Medien: das barrierefreie Internet. Doch die meisten fragen sich: Was ist damit überhaupt gemeint? Wenn man dies in einem Satz beantwortet, lautet er: Barrierefreies Internet ist die Zugänglichkeit und Bedienbarkeit von webbasierten Angeboten für alle Nutzergruppen und Ausgabegeräte.

Klingt zunächst entweder unverständlich oder unspektakulär. Vergegenwärtigt man sich aber, dass es nicht nur die PC-Nutzer mit Windows, Internet Explorer, Monitor mit 1024er Aufösung und Maus gibt, sieht das schnell anders aus. Man denke an:

Es wird schnell deutlich, dass die Masse der Internetbenutzer hier nur die Summe ihrer Randgruppen und Gerätekonstellationen ist. Grundlage für ein zugänglicheres Internet sind selbstverständlich die Webstandards, denn nur durch sie erhalten wir eine inhaltsgerechte Struktur, die auch von allen Ausgabegeräten abgebildet werden kann.

Der Einstieg in das Thema Barrierefreies Internet

Ein paar Links zum Einstieg für Anfänger und Fortgeschrittene:

4.12. HTML dient nicht der visuellen Gestaltung

Sehr oft wird der Sinn und Einsatzzweck der Auszeichnungssprache HTML missverstanden und anstatt damit ein Text logisch zu strukturieren versuchen viele Webmaster damit ein Text visuell zu gestalten.

Was ist HTML?

In dem Begriff HTML sind zwei Begriffe (HyperText und Markup) eingebettet, die schon die Funktion von dieser Sprache erklären.

Hypertext kann man als die nichtlineare Organisation von Texten erklären. Die einzelnen, teilweise von einander unabhängigen Texte/Informationen, werden als Knoten bezeichnet und ein Link ist die Verbindung zwischen zwei solcher Knoten. Ein Link zeichnet sich dadurch aus, daß er zwei Endpunkte (Anker) und eine Richtung hat.

Markup bedeutet "die Textauszeichnung". Mit HTML weist man den einzelnen Abschnitten eines Textes Eigenschaften zu oder besser gesagt man bringt in einen Text die logische Struktur (Überschrift, Absätze, Listen, Tabellen etc.) rein und erzeugt somit einzelne strukturelle Bereiche (Elemente).

Mit HTML kann man nicht programmieren

Somit kann man einige Sachen ausschließen: HTML ist keine Programmiersprache. Denn mit HTML kann man z. B. keinen Roboter steuern und auch kein Spiel programmieren. Eine Webseite wird in HTML nicht programmiert, sondern geschrieben und jemand, der seine Seite in HTML erstellt ist kein Programmierer, sondern Autor bzw. Webautor.

HTML ist aber auch keine Seitenbeschreibungssprache. Denn, wie schon oben beschrieben, gibt HTML dem Text die logische Struktur, das visuelle ist erstmal nebensächlich und wird durch CSS realisiert. Eine Seitenbeschreibungssprache, wie z. B. PDF oder PostScript, geht von einer fixen Fläche (eine Seite) aus und auf dieser Fläche werden die einzelnen Elemente visuell angeordnet.

Als umfassende Einführung in die grundlegende Thematik empfehlen wir die "Einführung in XHTML, CSS und Webdesign" von Michael Jendryschik. Wer sich dann um die genauen Schreibweisen von HTML und CSS Gedanken macht, der findet bei SelfHTML die wohl beste deutschsprachige Referenz.

5.12. Werkzeuge zur Webseitenerstellung

Den meisten Lesern sind Webwerkzeuge wie Macromedia Dreamweaver, Adobe GoLive und Microfoft FrontPage ein Begriff. Diese umfangreichen Werkzeuge erlauben dem Programmierer in der so genannten WYSIWYG Ansicht zu arbeiten. Die genannten Werkzeuge sind für Windows Systeme ebenso erhältlich wie für Mac OS. Für die tägliche Arbeit ist es häufig gar nicht notwendig, mit den Boliden zu arbeiten, denn viele kleine Tools sind preiswerter oder kostenlos im Web erhältlich.

Kostengünstige Tools

Für die Erstellung von XHTML- und CSS-Dateien ist TopStyle Pro mittlerweile kein Geheimtipp mehr. Übersichtlichkeit und eine Fülle von Funktionen machen das Werkzeug zur ersten Wahl auf Windows Systemen. Die abgespeckte Version TopStyle Light ist als Freeware erhältlich. Ähnlich populär auf dem Mac ist BBEdit, das ebenfalls mit einer Vielzahl von Funktionen für die Arbeit mit HTML und Texten aufwarten kann. Im Funktionsumfang etwas eingeschänkter aber nicht minder handlich sind CSSEdit und SkEdit. Alle Programm bieten eine Codevorschau direkt bei der Eingabe. Völlig kostenlose und empfehlenswerte Text-/HTML-Editoren sind ConText für Windows und Smultron(für OS X ab Version 10.3).

Bildbearbeitung

Für die schnelle Bearbeitung und Ansicht von Grafiken muss nicht mit Kanonen auf Spatzen geschossen werden. Kleine Freewarewerkzeuge wie IrfanView und xnview für Windows oder ImageWell für den Mac erlauben die schnelle Ansicht und Größenanpassung von Grafiken. Letzteres erlaubt nicht nur das Laden einer Grafik oder die Erstellung eines Screenshots des Desktops oder einer Auswahl, sondern auch noch das Hochladen des Bildes in ein vorgegebenes Verzeichnis eines .Mac oder FTP-Kontos. Dabei merkt sich ImageWell praktischerweise die URL in der Zwischenablage, so dass diese weiter verwendet werden kann.

Kleine Helferlein

Zum Hochladen von Webseiten oder Bildern bieten sich Freeware Programme wie FileZilla für Windows und Cyberduck für Mac OS X an.

Für die Überprüfung und Bearbeitung von Webseiten und Grafiken am Bildschirm können wir weitere praktische Werkzeuge empfehlen. xScope für Mac OS X bietet neben der Möglichkeit der Einblendung von Bildschirmlinealen eine Lupe und Guides für die Ausrichtung von Fenstern. Lesern, die für Windows ein Bildschirmlineal benötigen sei ScreenRuler empfohlen. Der pkColorPicker hilft bei der Suche nach Farbcodes.

Browser als Webtool

Für den Alleskönner Firefox gibt es Erweiterungen, die speziell für Grafik- und Screendesign empfehlenswert und natürlich kostenlos sind:

Für den IE gibt es mit der Accessibility Toolbar eine mächtige Hilfe

Entstanden sind viele dieser Ideen aus den Favelets für den IE und den Bookmarklets für Mozilla-Browser. Ein Blick auf diese netten kleinen Javascript-Helfer kann nicht schaden.

6.12. Trennung von Inhalt und Layout

Wir haben bereits erfahren, daß HTML dazu dient, den Text logisch zu strukturieren. Für die visuelle Gestaltung einer Webpräsenz sind CSS gedacht.

Warum sollte man dies tun? Dadurch, daß wir mit HTML den Text strukturieren und mit CSS gestalten, erreichen wir eine Trennung von Inhalt und Layout. Alle Formatierungsanweisungen befinden sich dann in einer zentralen CSS-Datei. Das schafft bessere Übersicht und im Fall einer Neugestaltung der Website muss man nur die Anweisungen in der CSS-Datei ändern, nicht mehr jede einzelne HTML-Seite.

Es kommt ein weiterer wichtiger Aspekt hinzu. Der Monitor eines Rechners ist mittlerweile nicht das einzige Ausgabegerät für HTML-Dokumente. TV, Projektoren, PDAs etc. sind auch Ausgabegeräte und können HTML-Dokumente anzeigen, aber sie brauchen u.U. ein anderes Layout bzw. visuelle Gestaltung. Und dadurch, daß der Inhalt vom Layout getrennt ist, brauchen wir die ganzen HTML-Dokumente einer Webpräsenz nicht anzupassen/ändern, es reicht dann eine alternative CSS-Datei für das jeweilige Ausgabegerät anzufertigen. Das gleiche gilt für z. B. eine druckerfreundliche Ausgabe eines HTML-Dokumentes.

Erst der Inhalt, ...

Man kann es auch auf diesen Punkt bringen: Das Zentrale einer Webseite ist deren Inhalt. Ein Layout ist eine nette, meist wichtige, aber nicht notwendige Beigabe und eventuelle Javascript-Beigaben sind auch nur als Zugabe zu verstehen. Wenn man so an eine Webseite herangeht, ist der Schritt zu einer barrierefreien Seite gering. Aber vor allem: die eigene Webseite wird überall nutz- und lesbar. Was will man mehr?

Der Niederländer Peter-Paul Koch hat ein paar sehr erhellende Artikel (in Englisch) dazu verfaßt:

7.12. Design fürs Internet

Ein erster Schritt hin zu einem modernen Design mit XHTML ist sich klarzumachen, dass die Webseite nicht für den Designer gestaltet wird, eigentlich auch nicht für den Kunden. Die Seite wird für den möglichen Kunden des Kunden bzw. denjenigen gemacht, den der Kunde erreichen möchte. Doch über den Rechner dieses ominösen Dritten fehlt uns jede gesicherte Information. Wir können zwar ein paar Informationen anhand der Serverstatistiken (falls eine Seite schon existiert) gewinnen, doch viele weiterführende Informationen fehlen uns.

Wir können bei einer schon bestehenden Seite erfahren, mit welchen Bildschirmauflösungen, Betriebssystemen und Browsern die Surfer vorbeikommen. Auch die Farbtiefe erfahren wir und woher sie auf unsere Seite kommen. Aber wir wissen nicht, ob auf dem Computer extra große Schriften eingestellt wurden, ob im Browser vielleicht sogar größere Schriften eingestellt wurden. Wir wissen nicht, ob mit maximiertem Browser gesurft wird oder mit einem verkleinerten Fenster.

Ungewissheit ist der Normalfall

Diese Ungewissheit sollte uns davon abhalten, pixelgenaue Gestaltungen zu erstellen. Auch die exzessive Benutzung von Bildern sollten wir hinterfragen, insbesondere wenn diese nur Texte darstellen. Texte sind Texte, Bilder sind Bilder. Es sollte so gut wie möglich vermieden werden, Texte als Bilder zu verwenden. Wenn überhaupt, dann nur bei Überschriften. Hier sollte dann auf die ALT- und TITLE-Attribute geachtet werden. Dadurch haben wir auch den Vorteil, dass Überschriften - wenn sie nicht als Bild, sondern als Text erstellt werden - von den Suchmaschinen erfasst werden und dadurch unsere Seite leichter gefunden werden kann. Zudem ermöglicht es den Nutzern alternativer Darstellungsmedien - Screenreader für Blinde oder PDAs für den gestressten Manager - den Inhalt einer Seite zu erfassen. Die Seite lädt schneller und es werden weniger Daten übertragen, was bei stark frequentierten Seiten eine echte Kostenersparnis bedeuten kann.

Flexibles Layout

Je flexibler ein Layout angelegt ist, desto weniger Schwierigkeiten dürften in der Praxis auftauchen. Pixelgenaue Layouts gehen oft ins Auge. Im Gegensatz zum Print kann man die Umgebung der Seite nur schlecht kontrollieren. Popup-Fenster, die auf eine genaue Pixelgröße festgezurrt werden lösen das Problem nicht wirklich. Auch die Darstellung in diesen Fenstern kann ich in den meisten Browsern beeinflussen. Zudem erschweren Popup-Blocker die Arbeit und nicht jeder User mag es, wenn ihm die Kontrolle über seinen Browser genommen wird.

Nicht komplizierter, klarer wird die Sache!

Auch wenn es sich manchmal so anhört, als sei mit dem Wechsel zu tabellenlosem Design die Welt komplizierter geworden, stimmt dies so nicht. Der Verzicht auf Layouttabellen zwingt zu einer Betrachtung des Seiteninhaltes, nicht der Optik und macht so die Sicht klarer auf den eigentlichen Charakter der Seite. Zudem öffnen sich auch neue Möglichkeiten mit CSS, die man so mit einem puren Tabellendesign nicht hat. Mittels CSS kann man Objekte nämlich stapeln. So könnte man zwei Bilder sich überlappen lassen oder Text über ein Bild legen.

8.12. Ab in die Ausstellung: Bewundern und inspirieren lassen

Wer den Schritt in das Gebiet Web Standards wagen möchte, wird gern Beispiele bewundern. Wer mit der Programmierung oder dem Design von Sites befasst ist, lässt sich gern inspirieren, holt sich Anregungen oder Tipps.

Verschiedene Portale sind in den letzen Jahren entstanden, die diesen Bedürfnissen Rechnung tragen wollen.
Das Urgestein CSSVault listet, wie die anderen Verzeichnisse auch, Websites, die durch CSS gesteuert werden und auf denen Tabellen für Daten und nicht für das Layout eingesetzt werden. Seiten, die im CSSVault gelistet sind, werden von Besuchern empfohlen und von Autor Paul Scrivens rezensiert. Der Autor gibt in einer knappen persönlichen Beurteilung an, was ihn besonders anspricht und womit er seine Probleme hat. Besucher von CSSVault können Kommentare zu den einzelnen Beiträgen abgeben.

Sylegala geht einen anderen und öffentlicheren Weg. Webseiten können vorgeschlagen und nach Aufnahme in das Verzeichnis von den Besuchern bewertet werden. So entsteht eine echte Hitliste von Web Standards Sites. Stylegala bietet zusätzlich ein CSS Kompendium, Foren und einen Buchladen.

CSSBeauty ist ein Projekt von Hector Alexander Giron, das Websites kategorisch listet. Eine Bewertung wird nicht vorgenommen, Kommentare können abgegeben werden.
Piepmatzel.de ist eine interessant präsentierte subjektive Auflistung von W3C Seiten von Oliver Schwarz.
W3 Compliant sites verfolgt einen komplett anderen Ansatz und bietet dem Designer oder Programmierer die Möglichkeit, eigene Arbeiten mit Screenshot auszustellen. Nach der Anmeldung können beliebig viele eigene Projekte ausgestellt werden.

Die ganze Kraft des CSS basierten Designs zeigt der CSS Zen Garden, der basierend auf einer XHTML-Datei eine schier fantastische Auswahl an Designs präsentiert. Mitmachen kann jeder.

Na dann: Viel Spaß beim Surfen, Staunen und inspirieren lassen.

9.12. Lesenswertes rund um Webstandards

Eine gute online Referenz ist eine Sache, ein Buch auf den Schreibtisch zum Nachblättern, Nachlesen und Nachschlagen eine andere. Auch zum Thema Webstandards gibt es eine ansehnliche Auswahl an Titeln, von denen wir einige im Folgenden empfehlen können. Vielleicht ist für den ein oder anderen Leser noch ein Posten für den Gabentisch dabei.

Allgemeines

Designing With Web Standards

Designing With Web Standards Designing With Web Standards von Jeffrey Zeldman ist das wohl bekannteste Buch zum Thema, das viele Webdesigner zum Nachdenken brachte. Zeldman beschreibt anhand ausführlicher Beispiele, die Vorteile der Verwendung von Webstandards. Auch aus heutiger Sicht ist es Einsteigern rundum zu empfehlen. Für Profis ziehen sich einige Kapitel vielleicht etwas in die Länge.

Web Standards Solutions

Web Standards Solutions Web Standards Solutions von Dan Cederholm basiert auf dem vom Autor auf seiner Website Simplebits betriebenen SimpleQuiz. Anhand von Multiple Choice Fragen werden praktische Lösungsansätze für alltägliche Probleme vorgestellt.

CSS

Cascading Stylesheets

Cascading Style Sheets Cascading Style Sheets von Eric A. Meyer. DAS Standardwerk zum Thema CSS Design. Es richtet sich aufgrund hoher Theorielastigkeit eher an fortgeschrittene Leser.

CSS-Praxis

CSS-Praxis. Browserübergreifende Lösungen, mit CD CSS-Praxis. Browserübergreifende Lösungen, mit CD von Kai Laborenz. Sehr gut geeignet für Anfänger, aber auch Fortgeschrittene und Profis finden hier eine Menge Lesenswertes. Weniger eine Referenz sondern an der Praxis orientiertes Buch, als Ergänzung zum Werk von Eric Meyer prima geeignet. Kommt Anfang nächsten Jahres in einer dritten, wieder erweiterten Auflage auf den Markt.

Cascading Stylesheets. Stil mit <stil>

Cascading Stylesheets. Stil mit <stil> (X.media.press) Cascading Stylesheets. Stil mit <stil> (X.media.press) von Ulrike Häßler. Eine gute Einführung für Einsteiger und ein gutes Nachschlagewerk für Fortgeschrittene.

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets von O. Briggs, S. Champeon und E. Costello. Die Autoren geben eine gut zugängliche und praxisnahe Einführung.

Barrierefreies Webdesign und Nutzerfreundlichkeit

Barrierefreies Webdesign

Barrierefreies Webdesign, m. CD-ROM Barrierefreies Webdesign, m. CD-ROM von Jan E. Hellbusch und Christian Bühler. DAS Standardwerk zum Thema barrierefreies Webdesign! Seit September 2004 auf dem Markt und schon in der ersten Auflage nach nicht einmal zwei Wochen ausverkauft. Anfang Dezember 2004 kommt die zweite Auflage auf den Markt.

Building Accessible Websites

Building Accessible Websites, w. CD-ROM Building Accessible Websites, w. CD-ROM von Joe Clark.
Auch kostenlos online zu lesen.

Defensive Design for the Web

Defensive Design for the Web Defensive Design for the Web von Matthew Linderman und Jason Fried ist ein praktischer Begleiter bei der Optimierung von Webseiten wenn es um die Benutzerführung geht. Wie aussagekräftig sind Fehlermeldungen? Wie können Formulare benutzerfreundlicher gestaltet werden? Diese und andere Fragen versuchen die Autoren zu beantworten.

Don't make me think

Don't make me think Don't make me think von Steve Krug zielt auf den Nutzwert einer Webseite ab. Besucher, die sich auf einer Site nicht zurecht finden, verlassen diese schnell wieder. Der Autor gibt anhand von praktischen Beispielen und Bildschirmabbildungen viele Tipps.

10.12. Grundlagen von CSS

Mit CSS geben wir der Struktur der XHTML-Seite Form und Gestaltung. Wir haben dabei vier Möglichkeiten, um die Gestaltung an das XHTML-Objekt zu bringen.

  1. Über die direkte Ansprache eines Tags.
  2. Über die Ansprache einer Klasse.
  3. Über die Ansprache einer ID.
  4. Über die Ansprache einer Pseudoklasse (bspw. a:hover)

Im Zusammenhang mit CSS erlangen zwei XHTML-Tags eine besondere Bedeutung: DIV und SPAN. Diese beiden Tags sind an sich eigenschaftslos, denn sie bezeichnen nicht wie z.B. TABLE eine Tabelle oder wie P einen Absatz. Beide grenzen schlicht Bereiche ein, deshalb nennt man sie auch nur "Container". Der Unterschied zwischen beiden liegt darin, dass DIV vor und nach sich einen Absatz erzeugt, SPAN hingegen nicht. Deshalb nennt man DIV ein Block-Element, SPAN ein Inline-Element.

Styledefinitionen kann man an mehreren Ecken im Dokument schreiben oder gar in eine separate Datei auslagern. Jede dieser Möglichkeiten hat ihre Vor- und Nachteile. Man kann den Code in den HEAD-Bereich der Seite zwischen die Tags <style type="text/css"> und </style> schreiben:

<style type="text/css">
   p {color: black; background-color: red;}
</style>

Innerhalb der geschweiften Klammern stehen die CSS-Anweisungen (insgesamt als Deklaration bezeichnet), jeweils mit einem Semikolon beendet und dadurch getrennt. Vor den Klammern steht der Tag, auf den sich die Eigenschaften in den Klammern beziehen. Man nennt ihn auch den Selektor. Auch eine Klasse oder eine ID kann ein Selektor sein. Bei dem Paar color: black; sprechen wir von der Eigenschaft (color), der ein Wert (black) zugewiesen wird.

Eine zweite Möglichkeit ist, die Tags direkt zu stylen. Dafür gibt es das Attribut style in (X)HTML. Beispiel:

<p style="color: black; background-color: red;">Hier steht Text.</p>

Wenn man diese Art der Stylezuweisung zu oft in einem Dokument macht, konterkariert man den Sinn und den Vorteil von Stylesheets. Man kann dann nicht einfach mit der Änderung einer CSS-Datei das Aussehen vieler verknüpfter HTML-Dateien ändern, sondern trifft immer nur eine Datei. Zudem werden hier Struktur und Design zu sehr miteinander verschmolzen. Praktisch kann dies bei der Fehlersuche (dem sog. debuggen) sein oder aber, wenn man für eine Datei eine Ausnahme von der ansonsten durch ein externes Styleheet definierten Regel machen möchte.

Die eleganteste, nützlichste und gebräuchlichste Methode hingegen ist die Auslagerung des CSS-Codes in eine externe Datei, die im Head über <link href="pfad/zur/datei.css" rel="stylesheet" type="text/css"> in HTML bzw. <link href="pfad/zur/datei.css" rel="stylesheet" type="text/css" /> in XHTML eingelesen wird.

Es ist sehr sinnvoll, während der Entwicklung einer Seite den CSS-Code im HEAD der Seite komplett zu belassen. Bei Anpassungen muß so nur eine Datei geändert und gespeichert werden. Ist man aber (fast) fertig, sollte man den CSS-Code in eine externe CSS-Datei auslagern. Hierbei wird nur der Code zwischen <style> und </style> genommen, es dürfen sich keine Tags in der CSS-Datei befinden (es sei denn, als Selektor).

Eine detailliertere Einführung in die Thematik gibt es z.B. bei Michael Jendryschik und bei CSS4You.

11.12. Kurzschreibweise in CSS

CSS bietet uns die Möglichkeit, bestimmte Anweisungen zusammenzufassen und sie auch verkürzt niederzuschreiben. Das macht die Datei um einiges kleiner und übersichtlicher.

Gehen wir davon aus, daß für einen bestimmten Bereich folgende Angabe gemacht wurde:

p.rahmen {
border-style: solid;
border-width: 1px;
border-color: #cccccc;
}

Hierbei handelt sich um einen Absatz, der einen Rahmen zugewiesen bekommen hat. Es ist ein Standardrahmen (solid), der einen Pixel breit ist und hellgrau eingefärbt ist. Und nun kommen wir zu der kurzen Schreibweise:

div.rahmen {
border: solid 1px #ccc;
}

Diese Anweisung erreicht die gleiche Wirkung. Denn die drei Angaben zum Rahmen wurden in einer Anweisung zusammengefaßt und zusätzlich wurde die Angabe zur Farbe verkürzt.

Achtung, nicht jede Farbe läßt sich verkürzt ausgeben. Denn diese verkürzte Angabe von 3 Zahlen bezieht sich immer auf die Zahlenpaare der Farbwerte. Die hexadezimalen Farbenangaben bestehen immer aus drei Zahlenpaaren (Rot, Grün, Blau). Die hellgraue Farbe besteht aus cc cc cc daher ist die Kurzschreibweise ccc. Bei schwarzer Farbe ist die "normale" Hexadezimalangabe: #000000. Somit wäre die Kurzschreibweise #000. Bei der Farbe z. B. #00ffff wäre die Kurzschreibweise #0ff und bei z. B. der Farbe #22ccdd wäre es #2cd. Allerdings lassen sich Farben, die keine gepaarten Werte haben (z. B. #98FF30) nicht in Kurzschreibform schreiben.

Es lassen sich noch einige andere Anweisungen zusammenfassen:

div.abstand {
padding-top: 15px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5px;

}

Dieser Bereich hat einige Angaben zum Innenabstand (padding). Oben sind es 15 Pixel, rechts 10 Pixel, unten 20 Pixel und links 5 Pixel Abstand. Man könnte diese Anweisungen zusammenfassen:

div.abstand {
padding: 15px 10px 20px 5px;
}

Auch hier ist das Ergebnis das Gleiche. Aber man muß darauf achten, daß die CSS-Angaben beim Zusammenfassen immer im Uhrzeigersinn anzugeben sind, also oben-rechts-unten-links.

Hier ein weiteres Beispiel welches auf dem letzten aufbaut:

p.abstand {
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}

In diesem Falle ist die Abkürzung noch kürzer:

p.abstand {
padding: 15px 0;
}

"Hmmm, warum nur zwei Angaben?" Könnte man fragen. Ganz einfach. Die erste Angabe umfaßt die Maße für oben und unten und die zweite Angabe für rechts und links. Und bei einem Wert der gleich Null ist, muß man keine Maßeinheit angeben.

Hier noch weitere Beispiele:

Lang: <p style="border-width: 1px; border-style: solid; border-color: #000000;">Inhalt</p>
Kurz: <p style="border: 1px solid #000;">Inhalt</p>

Lang: <h1 style="border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: #ff0000;">Inhalt</h1>
Kurz: <h1 style="border-bottom:2px dashed #f00;">Inhalt</h1>

Die Kurzschreibweise eignet sich hervorragend für homogen aufgebaute Rahmen. Wenn man z. B. auf allen vier Seiten verschiedenartige Rahmentypen angeben will, dann lässt sich die Kurzschreibweise nicht nach dem gleichen Muster tätigen, sondern so:

p.beispiel {
border-width: 2px 3px 4px 5px;
border-style: solid dashed dotted double;
border-color: #000 #adadad blue yellow;

}

Hierbei haben wir ein Bereich mit einem heterogenem Rahmen. Oben haben wir einen soliden, schwarzen Rahmen der 2 Pixel breit ist. Der rechte Rahmen ist gestrichelt, grau und ist 3 Pixel breit, der untere Rahmen ist gepunktet, blau und ist 4 Pixel breit. Der linke Rahmen ist gelb, doppelt und 5 Pixel breit.

Anmerkung: wenn mehrere Angaben zusammengefasst werden z. B. border: 2p 3px 4px 5px; dann geschieht auch das wieder im Uhrzeigersinn (oben-rechts-unten-links).

Da CSS-Eigenschaften sich gegenseitig überschreiben können, kann man beispielsweise für einen Rahmen, der nur an einer Seite etwas dicker sein soll, folgendes notieren:

p.beispiel {
border: 1px solid #000;
border-left: 10px solid #f00;

}

Mit dieser Schreibweise sieht man auf einen Blick, wie der "Ausreißer" sich von den anderen Seiten unterscheidet und vor allem sieht man auch direkt an der Eigenschaft "border-left", daß es sich um den linken Rand handelt. Im Gegensatz zu den Notierungen im Uhrzeigersinn, bei denen man erst einmal nachdenken muß.

Hier noch ein letztes Beispiel:

body {
background-color: #dddddd;
background-image: url(bild.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;
color: #000000;
}

Kurzschreibweise:

body {
background: #ddd url(bild.png) fixed no-repeat top left;
color: #000;
}

12.12. Vorlagen für CSS-Seiten

Der Umstieg von einem Design, das auf Layouttabellen basiert auf ein rein CSS-gesteuertes Design ist kein ganz einfacher Schritt und jeder Einsteiger ist froh, Vorlagen zu finden, die selbst erweitert und umgestaltet werden können.

Einige Services ermöglichen die Erstellung einer Layoutvorlage online. Zu diesen gehören:

Statische Vorlagen zum Studium und zur Erstellung eigener Seiten bieten unter anderem die folgenden Sites:

Eine Reihe deutschsprachiger Layoutvorlagen bietet intensivstation.ch.

Steht das grobe Layout wird in einem nächsten Schritt eine listenbasierte Navigation für die Webseite benötigt. Hier bietet Free Menu Designs eine Auswahl an grafisch ansprechenden Vorlagen, die frei verwendet bzw. an eigene Bedürfnisse angepasst werden dürfen. Eine hervorragende Quelle für die Gestaltung von Listen bietet Listamatic.

13.12. Klassen und IDs

Um eine sparsame und auch gut verständliche CSS-Datei zu schreiben, empfiehlt es sich, möglichst mit groben Reglen zu beginnen und dann Schritt für SChritt Abweichungen festzulegen.

So können wir beispielsweise für die gesamte Seite eine SChriftart, Schriftfarbe und Schriftgröße festlegen. Das tun wir, indem wir BODY und zur Sicherheit auch TD stylen. Abweichungen von der Regel könne wir dann direkt oder indirekt über IDs und Klassen ansprechen.

Eine Klasse definiert man in XHTML, indem man dem betreffenden Tag das Attribut class mitgibt und diesem einen Namen gibt. Beispiel:

<p class="eingerueckt">Hier steht Text.</p>

Eine Klasse spricht man durch ihren Namen mit einem vorangestellten Punkt an. Eine Klasse kann mehrfach auf einer Seite vertreten sein und ist zudem nicht an einen Tag gebunden. Auf der gleichen Seite kann die Klasse eingerueckt beispielsweise auch noch einem Listenelement und dem Tag <code> zugewiesen werden.

Eine ID hingegen ist einmalig auf der Seite. Sie wird durch eine vorangestellte Raute im CSS-Code angesprochen. In XHTML gibt man dem betreffenden Tag das Attribut id mit, dem man einen Namen zuweist. Beispiel:

<p id="fussnote">Hier steht mal wieder Text.</p>

Der CSS-Code für beide Beispiele könnte so aussehen:

.eingerueckt {margin-left: 10px;} #fussnote {border-top: 1px solid black; font-size: 10px;}

Auf alle Fälle solltem an der Versuchung widerstehen, allzuviel direkt mit IDs und Klassen zu versehen. Anstatt ein Listenelement in einem Menü direkt anzusprechen, reicht es oft, dieses Listenelement über das die Liste umgebende DIV anzusprechen.

14.12. Logische Verweise

Seit den "Kindertagen" von HTML sind die logischen Verweise (relational links) verfügbar. Die Gecko-Browser (Mozilla, Firefox [benötigt eine Erweiterung], Netscape 7.x etc.) und Opera integrieren diese Verweise direkt in der Kopfleiste und geben dem Webmaster und Nutzer die Möglichkeit einer alternativen Navigation und/oder bringen Unterseiten in ein logisches Verhältnis zueinander.

Leider scheitert eine weite Verbreitung dieser nützlichen Funktion wiedermal am Internet Explorer, er zeigt sie (von zwei Außnahmen abgesehen) nicht an. Auch in der 6er Version nicht.

Manchen von uns, sind einige logische Verweise schon bekannt, die zwei bekanntesten (die u. a. auch vom IE angezeigt werden, sind:

Mit dem ersten logischen Verweis bindet man eine externe CSS-Datei ein und mit dem zweiten wird ein Favicon eingebunden. Jedoch interessieren uns diese beiden Verweise momentan nicht, denn sie dienen nicht dem Zweck einer "alternativen" Navigation.

Daher wenden wir uns den anderen logischen Verweisen zu. Der logische Verweis beginnt mit der HTML-Markierung <link>. Der Typ der logischen Beziehung wird durch rel="…" (oder rev="…") vorgegeben. Daraufhin folgt die Angabe der Quelle (href="verweis") und des Titels (title="titel"). Hier einige Beispiele, die in den Kopfbereich (Head) eingebunden werden können:

Möglich sind auch eigene Kreationen, diese werden leider nur von Mozilla unterstützt. Opera 7.x tut es leider noch nicht. Nehmen wir mal an, man möchte auf den Downloadbereich der Seite verweisen:

<link rel="downloads" href="downloads.php" title="Download-Bereich" />

Die Möglichkeiten, die sich anbieten sind vielfältig: man kann alternative Inhalte und alternative CSS-Dateien anbieten, Unterseiten in Kapitel zusammenfassen, alternative Navigation anbieten, Wordpress z. B. bietet so auch ein alternatives Archiv an.

Mehr Infos gibt es hier:

In Mozilla kann man die Anzeige der logischen Verweise unter "Ansicht" > "Anzeigen/Verstecken" > "Site-Naviagtionsleiste" an- und ausschalten.

15.12. Das Box-Modell

Alles im Internet ist eckig, auch wenn es rund aussieht.

Um jedes Element herum kann man sich ein Rechteck vorstellen, das sich aus dem Elementinhalt, dem Innenabstand (padding), dem Rahmen (border) und dem Außenabstand zum nächsten Element (margin) zusammensetzt.

Das Box-Modell

Der Außenabstand (margin) ist immer transparent, die Ränder (border) können unterschiedlich aussehen. Allerdings unterstützt der IE nicht alle Varianten, die unterschiedlichen IE-Versionen verhalten sich zudem auch noch unterschiedlich. Der Hintergrund eines Elementes existiert auch noch im Bereich des padding.

Es gibt zwei Arten von Boxen: block und inline. Ein Block-Element erzeugt um sich einen Absatz und damit nach sich einen Abstand (margin-bottom). Das bekannteste Beispiel ist der Absatz selber (<p>). Auch Überschriften (<h1>, <h2>), Listen (<ul> und <ol>) und das DIV sind Block-Elemente. Inline-Elemente sitzen hingegen innerhalb eines Absatzes, ohne einen neuen zu erzeugen. Bekannte Beispiele sind Links (<a>), Bilder (<img>) oder auch das Element SPAN.

Dank der Eigenschaft display kann man auch aus einem Inline-Element ein Block-Element machen und umgekehrt. Durch a {display: block;} wird aus dem Link ein Block-Element, das vor und nach sich einen Absatz erzeugt. Dieses Vorgehen ist besonders praktisch, wenn man anhand von Listen ein Menü mit Button-Optik erstellen will.

Wenn man keine Positionierungen vornimmt, sondern im normalen Fluß des Quellcodes die Elemente nacheinander erscheinen lässt, addieren sich die vertikalen margins nicht, sie kollabieren. Hat also bspw. der erste Block eine margin-bottom: 5px; und der zweite Block eine margin-top: 10px, so ist das Ergebnis ein gemeinsamer Abstand von 10px (der größeren Einheit) und nicht von 15px. Horizontale margins kollabieren hingegen nicht.

Der Box-Model-Bug

Das Box-Modell wird vom IE anders interpretiert, als von den restlichen Browsern. Während der IE die Breite eines Elementes als gesamte Breite (Element + padding + border + margin) und ebenso die Höhe als gesamte Höhe interpretiert, interpretieren alle anderen Browser die Breite eines Elementes (width) nur als die Breite des Elementinhaltes und addieren padding, border und margin dazu. So kann man zu frappierend unterschiedlichen Ergebnissen kommen. Für den IE sind im Zweifelsfall die Boxen immer schmaler, als für die anderen Browser.

Der Box-Model-Bug ist ein ärgerlicher Fehler des IE, den es zu Umschiffen gilt. Ansonsten stimmen die Dimensionen der Seite nicht mehr. Es gibt nicht nur einen Weg, dem IE die korrekten Breiten beizubringen, es gibt mehrere Ideen. Sie alle hier aufzuzählen würde den Rahmen unseres Adventskalenders eindeutig sprengen. Es seien zwei einfach anzuwendende Lösungswege und ein paar hilfreiche Links genannt. Jeder, der sich ernsthaft mit CSS beschäftigt, sollte den Box-Model-Bug und seine Lösungen kennen und verinnerlicht haben:

Mehr Lesestoff

16.12. Positionierung

Die CSS-Eigenschaft position bietet vier Möglichkeiten: absolute, fixed, relative und static.

Static ist die Standardeigenschaft. Die Elemente werden in der Reihenfolge ihres Auftretens im Quellcode nacheinander gezeigt.
Ein relativ positioniertes Element hingegen wird verschoben. Die Werte für top, bottom, left oder right geben an, wie weit und in welche Richtung verschoben wird. Bezugspunkt ist die normale Position des Elements, andere Elemente werden nicht beeinträchtigt. Ein relativ positioniertes Element kann also auch ein anderes überlagern.

Auch bei absoluter Positionierung wird die Position in den vier Himmelsrichtungen angegeben. Es ist dabei logisch, dass immer nur ein Wert der Paare top/bottom und left/right angegeben werden muß. Der andere würde ignoriert werden. Bei der absoluten Positionierung wird das Element aus dem normalen Dokumentenfluß geholt. Bezugspunkt der Positionierung ist immer die obere linke Ecke des jeweiligen Elternelements. Ein DIV auf der obersten Ebene hätte also BODY als Bezugspunkt (die Seite selber). Ein Absatz innerhalb dieses DIVs hätte wiederum das DIV als Bezugspunkt.

Mit position: fixed; positioniert man ein Element in Bezug auf das Browserfenster und fixiert es. Scrollt die Seite, scrollt das Element nicht mit. Bei Hintergrundbildern wird der gleiche Effekt mit background-attachment: fixed; erzielt. Das Problem bei der guten Sache ist allerdings, dass der IE diese Eigenschaft nicht kennt. Man kann ihn jedoch zum gleichen Verhalten bewegen. Dieses Vorgehen ist ein wenig trickreich und nutzt Conditional Comments, um den speziellen IE-Code vor allen anderen Browsern zu vestecken. Es liegt in der Logik der Sache, dass dieser spezielle Code erst nach dem allgemeinen im Quellcode stehen darf.

Um auch den IE in den Genuß einer fixierten Ebene kommen zu lassen, wird eine Ebene auf 100% Höhe und 100% Breite definiert und somit über den Browser gelegt. Der dann möglicherweise sichtbare Scrollbalken stammt von diesem Layer. Alle Inhalte werden nun innerhalb dieser Ebene absolut positioniert. Problematisch ist diese Lösung nur, wenn man unbedingt rechtsaußen oder unten einen Layer fixieren möchte. Bei kleineren Auflösungen oder wenn man das Fenster kleiner zieht, kann schon mal die gesamte Seite unbedienbar werden. Leider ist die Nutzung dieser "CSS-Frames" durch die Unfähigkeit des IE eingeschränkt und nicht so weit verbreitet, wie es sich anbieten würde.

Neben diesen Positionierungen gibt es auch die Möglichkeit, Elemente floaten zu lassen. Floating ist eine der kompliziertesten Arten mit CSS zu layouten. Wenn sie funktioniert, können sich aber auch prima Effekte und Layouts ergeben. Wenn ein Element gefloatet wird, wird es aus dem normalen Dokumentenfluß herausgenommen, aber nur in Bezug auf das eigene Elternelement. Ein im normalen Dokumentenfluß befindliches Element kann von diesem floatenden Element überlagert werden, ohne dass - wie sonst üblich - ein z-index vergeben wurde.

Ein Element kann nach rechts oder links floaten (float: left; und float: right;). Möchte man danach den normalen Dokumentenfluß wiederherstellen, so muß man einem Element (manchmal nur ein leeres DIV) die Eigenschaft clear zuweisen (meist ist clear: both; am sichersten). Wenn ein Element gefloated wird, muss es immer eine Breite zugewiesen bekommen.

17.12. "Semantik" in (X)HTML

Neeeeiiin, nicht wegklicken!
Keine Angst, an dieser Stelle gibt es keine Vorträge über Tim Berner-Lees Konzept eines Semantic Web oder ein Kolloquium über die formale Logik von Bedeutungsrelationen. Wir wollen Ihnen den Begriff "semantisch" als etwas Praktisches und Nutzbares vorstellen.

Inhalte strukturieren

Wenn sie im Internet etwas "semantisieren" wollen, beutet das technisch zunächst nichts anderes, als dass Sie Ihre Inhalte mit den HTML-Elementen umklammern, die sinngemäß dafür erfunden wurden. Wie das funktioniert, wollen wir Ihnen mit einem einfachen Beispiel nahe bringen:

Kennen Sie das?

Bestimmt haben Sie schon einmal in einem Word-Dokument eine Überschrift gekennzeichnet, indem Sie davor und dahinter eine Leerzeile eingefügt haben. Danach haben Sie vermutlich den Text der Überschrift mit dem Cursor markiert und anschließend auf Schriftgröße 16 eingestellt. Vielleicht haben Sie auch auf den F-Knopf geklickt, damit Sie Ihren Lesern eine zusätzliche Markierung mit auf den Weg geben. Was Sie da vollbracht haben, nennt man "physische Auszeichnung", das heißt: sie haben (unbewusst) lediglich die Optik (die Physis) eines Inhaltes verändert, nicht aber seine semantische Struktur.

So geht's besser:

Warum machen Sie es nicht bewusster und verwenden beim Erstellen einer Internetseite ein Element, das für Überschriften vorgesehen ist? (In Word funktioniert das ähnlich mit den Formatvorlagen). HTML sieht für Überschriften das hx-Element vor, wobei x für die Ordnungstiefe (1-6) steht. Wollten Sie also unser Beispiel in HTML auszeichnen, ginge das so:

<h1>Meine erste semantische Überschrift</h1>
Das Aussehen erhält die Überschrift dann durch eine Formatierung in der externen CSS-Datei, mit der Sie zugleich die Trennung von Inhalt und Struktur vollziehen:
h1 {
font: bold 1.6em arial, sans-serif;
margin:15px 0;
}

Und wozu ist das gut?

Vielleicht fragen Sie sich gerade: "Wieso soll ich das jetzt anders machen als bisher? Das sieht doch genau gleich aus und der Inhalt ist auch der selbe!" Die semantische Strukturierung oder auch einfach die Anwendung von Webstandards hat bestechende Vorteile, die Sie verinnerlichen sollten:

Sie haben soeben ein einfaches Beispiel für die semantische Interpretation von Inhalten erhalten. Weitere Beispiele sind Textabsätze (<p>), Listen (<ul>, <ol>) oder Datentabellen (<table>). Eine gute Vorgehensweise ist hier immer die Frage: "Was stellt dieser Inhalt dar?". Die alltagssprachliche Antwort (z.B. "Eine Überschrift.") gibt Ihnen in aller Regel bereits die Antwort auf das zu verwendende Element. Manchmal wird es allerdings etwas komplizierter, wenn sich Inhalte aus mehreren Bestandteilen zusammensetzen, wie beispielsweise bei Bildern mit Untertiteln oder bei Navigationsmenüs. Diese Beispiele behandeln wir... wird nicht verraten, das ist ja schließlich ein Adventskalender.

18.12. Bilder mit Untertiteln versehen

Weihnachtsmann-Stammhaus mit Bildunterschrift Ein relativ häufiger Anwendungsfall in der Redaktion von Internetinhalten ist die Einbindung von Bildern und dazugehörigen Untertiteln. Sie werden meist in weitere Inhalte einbezogen, die das Bild umfließen sollen. Hier stößt man wie so manches Mal auf die Grenzen von (X)HTML, innerhalb dessen für bestimmte Zusammenhänge keine adäquate logische Struktur spezifiziert ist. Es müssen also das Bild und sein Untertitel aus den vorhandenen Elementen zusammengesetzt werden.

Hilfskonstrukte

Entwickler haben hierzu bereits zahlreiche Lösungsversuche unternommen. Wir wollen uns an dieser Stelle mit Rücksicht auf den vorweihnachtlichen Stress auf zwei Möglichkeiten beschränken. Sie haben sich nach allgemeinem Dafürhalten als die Praktikabelsten herausgebildet.

A. Einen eigenen Bereich verwenden

Eine Möglichkeit besteht darin, den Bildern und ihren Untertiteln einen eigenen Bereich zu geben:

<div class="bildlinks">
<img scr="bild.jpg" width="xxx" height="yyy" alt="Bildbeschreibung" />
<p>Bildunterschrift</p>
</div>

Dieses Konstrukt scheint zunächst logisch. Eigener Bereich, das Bild und ein Text, den man als Bildunterschrift ersonnen hat, wird in einem eigenen Absatz eingefügt. Zweifellos eine Möglichkeit, doch hat sie einen Nachteil: Es gibt keine logische Beziehung zwischen dem Bild und dem Text des Untertitels, obwohl er inhaltlich besteht. Dies kann zu Zugänglichkeitsproblemen in den Darstellungen führen, die textbasiert sind bzw. auf Layouts verzichten (Screenreader, Textbrowser, abgeschaltetes CSS u.ä.). Deshalb verwendet man häufig auch folgendes Konstrukt:

B. Eine Definitionsliste einsetzen

Die Definitionsliste (DL) bietet den logischen Zusammenhang zwischen zwischen zwei Elementen. Das Bild wird hier als zu definierender Term (DT) eingesetzt, die Bildunterschrift als dessen Beschreibung (DD):

<dl>
<dt><img scr="bild.jpg" width="xxx" height="yyy" alt="Bildbeschreibung" /></dt>
<dd>Bildunterschrift</dd>
</dl>

Nun besteht der logische Zusammenhang zwischen zwei Elementen, dafür müssen wir aber mit kleineren semantischen Fragwürdigkeiten leben. Das ist aber in Anbetracht der Realitäten (keine expliziten Elemente in HTML und praktischer Nutzen) akzeptabel.

Ein Bild mit CSS umfließen lassen

Für die praktische Umsetzung beschränken wir uns auf das Beispiel mit den Definitionslisten. Die Möglichkeiten und Herausforderungen sind hierbei aber die selben, die beim Einsatz anderer Konstrukte ebenfalls gültig sind. Nehmen wir also an, ein Bild samt Unterschrift soll von einem längeren Text umflossen werden und auf der linken Seite stehen.

Das Problem der Boxenbreite

Für eine optimale Darstellung des Layouts benötigen wir eine Breitenangabe der Definitionsliste, vor allem dann, wenn der Bilduntertitel länger als die Bildbreite ist. Die Breitenangabe ist auch zwingend notwendig für das floating der Box mit dem Bild und ihrem Untertitel. Im CSS gibt man das wie folgt an:

dl {
float:left;
}

Bei der Breitenangabe (in der Regel identisch mit der Bildbreite) kann man innerhalb von Projekten im wesentlichen drei Fälle unterscheiden:

1. Alle Bilder haben die gleiche Breite
Hier ist die Lösung am einfachsten. Sie müssen dann die Eigenschaft in der zentralen CSS-Datei hinzufügen:
width:XXXpx;
2. Es gibt eine beschränkte, regelmäßige wiederkehrende Anzahl von Bildbreiten
Hier empfiehlt sich der Einsatz von Klassen, um die einzelnen Fälle zu bedienen:
<dl class="breite1">
und im CSS:
.breite1 {
width:XXXpx;
}
.breite2 {
width:YYYpx;
}

usw.
3. Die Breite variiert bei den meisten Bildern
Für eine freie Eingabe gibt es nur die Möglichkeit, die Breite über eine lokale Style-Angabe anzugeben:
<dl style="width:XXXpx;">

Alles andere bleibt Ihrer Kreativität oder den Anforderungen in Ihren Projekten überlassen. Zum Vertiefen gibt's aber noch ein paar...

Weiterführende Links

19.12. Schriften im Web

Schrift im Web kann bezüglich der Schriftart, der Schriftgröße, der Schriftfarbe, dem Schriftgewicht und dem Abstand der einzelnen Zeichen und Wörter untereinander definiert werden.

Die Theorie

Das Angebot an für das Web verwendbaren Schriften ist relativ klein, wenn man als Gestalter sicher gehen will, dass die gewählte Formatierung auch so beim Leser ankommt. Dennoch kann man sich nie sicher sein, dass eine bestimmte Schriftart auch auf dem Zielsystem vorhanden ist. Eine gute Übersicht an Schriftarten, die auf den meisten Rechnern zu finden sind, bietet: VisiBone. Gerrit van Aaken hat in seinem hervorragenden Essay "HTML-Schriften unter der Lupe" die meist verwendeten Web-Schriftarten im Detail näher beleuchtet.

Die folgenden Zusammenstellungen von Schriftfamilien sind gängig:

Die gewählte Schrift muss in der gewählten Größe gut auf dem Monitor lesbar sein. Da sie in den meisten Fällen ungeglättet daher kommt, gehen kleine Schriftgrössen und eine Serifenschrift ebenso wenig zusammen wie kleine Schriftgrösse und kursiver Text.

Ergänzt man ausgefallenere Schriftarten durch die Nennung von Alternativen, gibt man dem Gestalter ein wenig mehr Designspielraum.

Der Sonderfall Verdana wird von Stephen Poley näher diskutiert. Dave Shea legt ein Wort für Times New Roman ein.

Für die Maßangaben der Schriftgröße werden verschiedene Verfahren verwendet. Im Allgemeinen werden drei Techniken unterschieden:

In seinem hervorragenden Artikel How to size text using ems beschreibt Richard Rutter wie die letztere Methode erfolgreich angewendet wird.

Der Internet Explorer und Schriftgrößen

Im Gegensatz zu beispielsweise den Mozilla-Browsern erlaubt der Internet Explorer keine generelle Schriftskalierung. Sind die Schriften in Pixel ausgezeichnet, skaliert der IE nicht. Jeder andere gängige Browser hingegen tut es. Wenn die Basisgröße in Prozenten gesetzt wird, skaliert der IE deutlich feiner und erlaubt auch noch ein Herunterskalieren, mit dem man als Gestalter leben kann.

Abhängig davon erreicht man im IE folgende Werte für normalen Fließtext:

Basisgrößegrößersehr groß
Quelle: Thomas Scholz in de.comm.infosystems.www.pages.misc
ungesetzt19px22px
101%19px22px
100%19px22px
95%18px20px
90%17px19px
1em22px28px
.95em21px27px
.9em20px26px

Mittels em lassen sich also höhere Maximalwerte erzielen, dafür ist das "Feintuning" praktisch unmöglich.
Der Wert "Mittel" entspricht immer 16px. Verkleinert wird bei em ebenfalls viel drastischer als bei Prozenten.

Die Praxis

Die Schriftgröße des BODY sollte per CSS auf 100.01% gesetzt werden (wenn man in Prozentwerten auszeichnen möchte), denn bei Angabe des Wertes 100% stellt Opera6 den Text dann sehr klein dar. Bei der Angabe von 101% hingegen vergößert Safari die Schrift unverhältnismäßig. Alle anderen Browser kümmeren sich um die kleine Differenz nicht, deshalb dieser Wert. Auf keinen Fall darf die Schriftgröße hingegen auf 1em gesetzt werden, da in diesem Zusammenhang der IE5 (Windows) einen verhängnisvollen Bug in der Schriftdarstellung hat. Weitere Informationen zum Thema bietet CSS-Technik.

20.12. Das Basis-Stylesheet

(X)HTML-Tags haben in erster Linie eine strukturelle Bedeutung, sie sagen nicht zwangswese über die optische Präsentation. Dafür gibt es schließlich CSS.

Natürlich soll eine Tabelle auch ohne CSS wie eine Tabelle aussehen, auch ein Absatz soll ohne CSS als solcher erkennbar sein, ebenso eine Liste. Aber das Tag <code></code> beispielsweise muß nicht zwingend so aussehen, wie sich die Browserhersteller dies gedacht haben.

Jeder Browser zeigt auf seine Art jeden HTML-Tag in einer Grundformatierung an. Deshalb ist eine gute Idee, am Anfang einer neuen Seite erst einmal dafür zu sorgen, daß alle Browser von ein und derselben Basis aus das Layout erzeugen.

Dafür empfehlen wir ein Basis-Stylesheet. Es nivelliert viele Tags und gibt eine grobe Richtung vor. Wir können uns in diesem zusammnhang eine der wichtigsten Eigenheiten von CSS zu Nutze machen: spätere Eigenschaftsdefinitionen können frühere überschreiben. Also kommt unser Basis-Stylesheet entweder an den Anfang unseres globalen Stylesheets und wird sukzessive ergäzt oder aber wird binden es als Erstes ein und lassen dann unser eigentliches Stylesheet für da Projekt als Zweites folgen.

Das Basis-Stylesheet in kleinen Schritten

body {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #fff;
color: #000;
}

Hier definieren wir nicht nur die Hintergrundfarbe der Seite und die Standardschriftart und die Standardschriftfarbe, sondern auch die Standardschriftgröße. Da der Internet Explorer die Schriften nicht sklaieren kann, wenn wir sie in Pixeln auszeichnen, ist es ein Gebot der Höflichkeit gegenüber all dnjenigen, die nicht so toll lesen können oder mit einem Laptop mit hoher Auflösung arbeiten müssen, daß sie die Schriften vergrößern können.

Es gibt mehrere Ansätze, an die Sache heranzugehen. Der hier gemachte Vorschlag reduziert die Basis-Schriftgröße der Webseite so weit, daß wir dann im Folgenden ganz praktikabel mit der Einheit em weiterarbeiten können.

Die Standardschriftgröße imBrowser bei mittlerer Schriftgrößeneinstellung sind 16px. Von diesen 16px sind die geforderten 62.5% genau 10px. Wenn wir dann jetzt Elementen die Größen in emzuweisen, lesen sich die Dezimalschritte, als würden wir in Pixeln auszeichnen. 1em sind dann 10px, 1.6em sind 16px und so weiter. Solcherart aufgebaute Stylesheets lassen sich leicht lesen. Das ist wichtig, wenn wir nach ein paar Monaten unser "altes Werk" wieder betrachten.

body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
margin: 0;
padding: 0;
}

Hier nehmen wir allen Blockelementen der Seite die Außenabstände (margin)und Innenabstände (padding). Die unterschiedlichen Browser haben nämlich unterschiedliche Standardeinstellungen beispielsweise für den Abstand nach einer Überschrift. Zudem beginnen nun alle Blockelemente bei Null, sodaß wir sicher sein können, auch wirklich unseren Willen durchzusetzen. Man kann es auch kürzer formulieren:

* { margin: 0; padding: 0;}

Der Stern ist der Universalselektor, der - wie der Name es schon andeutet - einfach alle Tags selektiert. Was auf den ersten Blick elegant aussieht ist auf den zweiten Blick wenig nützlich. Den Universalselektor benötigt man unter normalen Umständen nie. Weshalb also dann an dieser Stelle einsetzen? Zudem: das Basis-Stylesheet wird einmal erstellt und dann immer wieder kopiert. Der Arbeitsaufwand ist gering, speziell wenn man sich das Stylesheet weiter unten einfach kopiert. Aber wie vieles im Web ist diese Möglichkeit ebenso korrekt und Geschmackssache.

p, li, h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 1em; }

Hier werden die Schriftgrößen für die Überschriften, die normalen Absätze und die Listenelemente auf eine einheitliche Größe gebracht. Von dieser Größe aus können nun später die Abweichungen definiert werden.

Das Basis-Stylesheet als Ganzes

Um die Sache nicht unnötig kompliziert zu machen, gibt es das ganze Basis-Stylesheet hier zum Kopieren:

<style type="text/css">
body {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 62.5%;
background-color: #fff;
color: #000;
}
body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
margin: 0;
padding: 0;
}
p, li, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1em;
}</style>

Zum Schluß

Dieses Basis-Stylesheet ist natürlich nur eine Empfehlung. Es hat sich in der Praxis mehrfach bewährt, kann also so falsch nicht sein. Wichtig ist: Einmal definiert, sollte an diesem Stylesheet nichts mehr geändert, schon gar nicht gestrichen werden. Die Schriftgröen werden neu definiert, deshalb darf auf keinen Fall die Definition im Basis-Stylesheet gestrichen werden.

21.12. Wo bekomme ich Hilfe?

Wer kennt das nicht: Man hat ein Layout zusammengestellt und erkennt beim Browsertest noch den ein oder anderen Fehler, für den es partout keine Erklärung geben will. Wie findet man am Schnellsten die bestmögliche Erklärung für ein bestehendes Problem bei der Entwicklung eines Layouts, das auf Standards basiert?

Nachschlagewerke

Foren

Das deutschsprachige Forum rund um XHTML und CSS ist das XHTMLForum, wo hunderte Anwender sich gegenseitig schnell und kompetent helfen. Umfangreiche Foren in englischer Sprache bieten z.B. Sitepoint und CSSCreator.

Mailinglisten

Für den deutschsprachigen Raum ist die CSS-Design Mailingliste. Sie hat derzeit ca. 500 Mitglieder und tauscht an starken Tagen 40-60 Mails aus. Eine sehr gut besuchte Mailingliste in englischer Sprache ist die Web Standards Group Discussion List.

Für Anfänger und Fortgeschrittene

Für Anfänger und Fortgeschrittene ist neben den Foren und Mailinglisten auch die CSS-FAQ gedacht. Sie will in kurzen Artikeln Erklärungen und Hinweise zur Problemlösung bieten.

22.12. Häufige Fehler der Webentwickler

Obwohl es sich mittlerweile herumgesprochen hat, daß (X)HTML der Strukturierung des Inhaltes dient, daß es Sinn macht Struktur und Layout durch den Einsatz von CSS zu trennen, daß es verschiedene Browser und Darstellungsmedien gibt, machen viele Webentwickler immer noch die gleichen alten Fehler. Aber auch der eine oder andere Webentwickler, der mittlerweile auf Tabellen zum Layoutzweck verzichtet und stattdessen CSS einsetzt, macht den einen oder anderen Fehler.

Fehlendes Doctype

Damit der Browser weiss, wie er das HTML-Dokument darstellen soll, muss er auch wissen um welchen Dokumenttyp es sich handelt. Daher notiert man am Anfang eines HTML-Dokumentes die Angabe zum Dokumenttyp das sog. "Doctype":

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

Hierbei handelt sich um ein XHTML-Dokument. Transitional bedeutet, daß an dieses Dokument nicht so strenge Regeln angelegt werden wie an die Strict-Variante.

Die Angabe der XML-Deklaration vor der Angabe des Doctypes wird empfohlen, ist aber nicht zwingend erforderlich. Was aber nicht erlaubt ist, ist Notierung von z. B. Javascript vor dem Doctype.

Informationen zur Doctype gibt es u.a. bei SelfHTML und bei Fabrice Pascal. Beim W3C gibt es zudem eine Liste valider (X)HTML-DTDs.

Sonderzeichen Maskieren

Ein weiterer Fehler ist, daß Sonderzeichen, wie z. B. €, & oder © nicht maskiert werden. Unter maskieren wird in diesem Fall verstanden, daß die Sonderzeichen durch HTML-Entitäten oder nummerische Werte ersetzt werden. Im Falle des Eurozeichens sollte man daher nicht einfach via AltGr + e eingeben sondern entweder &euro; oder &#x20AC; eintippen. Ähnliches gilt für die deutschen Umlaute. Diese müssen allerdings nicht maskiert werden, wenn dem Dokument der richtige Zeichensatz mitgegeben wird (siehe die Informationen bei SelfHTML). Bei den e-workers gibt es vertiefende Ausführungen.

Unnötiger Einsatz von eingebetteten Stilen und Klassen

Sehr häufig sieht man im Quelltext mancher Webentwickler folgende Angaben:

<address style="font-size: 12px;">

Hierbei handelt es sich um eine eingebetete Stilvorgabe (einen Inline-Stylesheet) und dies ist meistens unnötig, da man diese Angaben in der zentralen CSS-Datei tätigen kann und sollte. Will man HTML-Elemente gezielt und in bestimmten Dokument-Bereich unterschiedlich gestalten, ist es auch hier meist unnötig auf eingebetete Stilvorgabe und Klassen auszuweichen. CSS bietet uns die Möglichkeit, mit Selektoren zu arbeiten:

#navigation address { … }
#inhalt address { … }

Mit diesen Angaben haben wir erreicht, daß das Adressen-Element in der Navigation und im Inhaltsbereich unterschiedlich aussieht.

Die Sache mit Flash

In regelmäßigen Zeitabständen trifft man auf Webpräsenzen, die vollkommen auf Flash basieren. Flash ist zwar eine sehr feine Sache und man kann damit sehr schöne Projekte realisieren, aber einige Aspekte darf man nicht ausser Acht lassen.

Nicht jeder Browser und auch nicht jedes Ausgabemedium kann Flash darstellen, in manchen Firmennetzwerken ist die Darstellung von Flash blockiert. Der Besucher Namens "Suchmaschine" kann mit Flash absolut nichts anfangen. Dies sollte man beachten wenn man eine Präsenz aufbaut, die nur auf Flash basiert.

Nur für den Internet Explorer entwickeln

Häufig liest man auf Präsenzen Optimiert für Internet Explorer oder hört Aussagen wie z. B. Ich optimiere für Internet Explorer, die anderen Browser nutzt eh kaum einer.

Solche Ansichten sind mittlerweile überholt. Es lohnt sich immer, auch auf alternative Browser Rücksicht zu nehmen, schon alleine deswegen weil sich Suchmaschinen wie ein Textbrowser verhalten. Aber auch die Marktdominanz von Internet Explorer ist nicht mehr so stark, mittlerweile ist die Verbreitung des Internet Explorer im deutschsprachigen Raum auf etwa 80% gesunken. Dieser Trend wird sich sehr wahrscheinlich fortsetzen, da die alternativen Browser (Mozilla, Firefox, Opera, Safari etc.) mit neueren und nützlichen Funktionen aufwarten, in der Regel ein besseres Sicherheits-Konzept bieten und im Falle von Mozilla-Firefox, die Entwickler mittlerweile massiv für ihre Produkte werben.

23.12. Hintergründe und Schlagschatten

Ein aktueller Trend im Bereich Webdesign ist neben der Wiederkehr von Schlagschatten die Verwendung von Hintergründen für Webseiten und ihre Elemente. Dabei gibt es zwei Möglichkeiten für die Verwendung der Grafik:

Ein besonders schönes Beispiel für die erste Kategorie liefert Cameron Moll auf Authentic Boredom mit einer sehr gut funktionierenden Kombination von Vordergrund- und Hintergrundmustern, die gefühlvoll ineinander blenden. Weitere interessante Beispiele sind:

Beispiele für die zweite Gruppe:

Im Folgenden soll erläutert werden, wie Hintergründe mittels CSS gestaltet werden können.

CSS und Hintergründe

Hintergründe (also Farbe oder Grafik) können in CSS mit den folgenden Eigenschaften ausgestattet werden:

background, background-attachment, background-image, background-position, background-repeat

Praktischer als die Auflistung der einzelnen Eigenschaften ist die Verwendung der Kurzschrift mittels background:

background-color - background-image - background-repeat - background-attachment - background-position

background: #ccc url(pfad/zum/Bild) repeat-x top left;

Im Beispiel wird das Bild auf grauem Hintergrund beginnend in der oberen linken Ecke entlang der X-Achse wiederholt.

Die Verwendung einer gekachelten Grafik für die "Tapete" einer Webseite ist ein alter Hut. Mittels CSS wird ein gekachelter Hintergrund für den Body einer Seite wie folgt dargestellt:

body{
background: url(pfad/zum/Bild) repeat;
}

Wir verwenden CSS, um Webseiten schmal und zugänglich zu halten und sie leicht anpassen zu können. Deshalb ist es wünschenswert, sämtliche Schmuckelemente, wie z.B. Hintergrundbilder und auch Grafiken möglichst über das Stylesheet aufzurufen und nicht in den Quellcode der Seite zu packen. Dies vorausgesetzt, bietet es sich für eine Headergrafik einer Webseite, die keinen semantischen Zweck erfüllt an, sie als Hintergrund per CSS zu beschreiben. Dies kann so aussehen:

Im Stylesheet:

#header {
margin: 0; padding: 0;
background: #fff url(pfad/zum/Bild) top left no-repeat;
width:720px;
height:200px;
border:0;
}

Im Quelltext:

<div id="header"></div>

Der Verwendung von Hintergründen sind praktisch keine Grenzen gesetzt. Um z.B. Links als externe Links zu kennzeichnen, kann eine kleine Grafik vor den Link platziert werden:

Dazu definieren wir die Klasse extern:

Im Stylesheet:

.extern {
background: url(outer.gif) no-repeat 0 2px;
padding-left: 10px;
height:1%;
}

Im Quelltext:

<a href="http://www.meinewebseite.de" title="Hier geht es zu meiner Webseite" class="extern">Meine Webseite</a>

Die Angabe der Höhe mit 1% bringt den IE 5.0 dazu, das Element als einen Inline-Block zu sehen und das Padding anzuwenden, das er anderenfalls ignorieren würde. Alle Browser außer dem IE unter Windows ignorieren diese Angabe.

Auch die Erstellung einer Navigationsleiste mit Mouse-Over-Effekt ist mittels CSS sehr einfach und kein zusätzliches Javascript ist von Nöten. Wir definieren z.B. für alle Verweise der ID Navigation ein Hintergrundbild bg.gif. Für den Hover-Effekt definieren wir bg-over.gif:

#navigation {
width: 140px
}

#navigation a {
background: url(bg.gif) no-repeat 0 50%;
}

#navigation a:hover {
background: url(bg-over.gif) no-repeat 0 50%;
}

Dabei wird der Hintergrund jeweils nur einmal angezeigt und vertikal zentriert.

Eine Erweiterung dieser Methode wird in Navigation Matrix Reloaded diskutiert.

24.12. Die Kaskade

Es ist auf den ersten Blick sehr verlockend, einzelne Teile der Webseite, einzelne Elemente mit einer ID oder einer Klasse anzusprechen. Oft sind IDs und Klassen aber gar nicht notwendig. Man kann sich die sogenannte Kaskade zu Nutze machen, also das kaskadierende an den Cascading Stylesheets.

Man kann sich die Struktur einer Webseite, eines HTML-Dokuments, ansatzweise verdeutlichen, indem man den Inhalt löscht und nur die Tags übrig behält. Ihre Beziehung zueinander, ihre Verschachtelung, kann man in ein Diagramm übetragen, wie ich es unten sehr skizzenhaft getan habe. Man sieht dann, daß es immer Tags gibt, die in ein anderes Tag geschachtelt sind, man sagt auch, ein "Kind-Element" zu etwas sind.

So ist immer body ein Kind-Element von html, genauso wie head. Direkte Kinder von body wiederum sind beispielsweise h1 und ul. li ist wiederum Kind von ul.

Ein Beispiel für die Kaskade eines HTML-Dokumentes.

In dem Beispiel sind zwei code-Elemente angeführt, eines als Kind von p und eines als Kind von div. Wenn wir code { color: black;} definieren, sind beide Tags betroffen. Wenn wir allerdings div code { color: black;} und p code { color: red;} schreiben, wird der Code im Absatz in roter Farbe und der im div in schwarzer Farbe angezeigt. Dafür müssen wir keine ID und keine Klasse vergeben und haben den Vorteil, damit eine allgemeine Regel aufgestellt zu haben, die für alle Code-Abschnitte innerhalb eines Absatzes oder eines DIVs gelten.

Aber auch, wenn wir keine allgemeine Regeln aufstellen wollen, sondern eventuell einen ganz bestimmten Tag treffen wollen, müssen wir nicht zwangsweise diesen direkt über eine ID ansprechen. Es reicht auch, wenn das Elternelement eindeutig unterscheidbar ist. Sollte also in unserem Beispiel das div eine ID besitzen, dann könnten wir jedes Element innerhalb dieses div direkt über die oben vorgestellte Kaskade ansprechen, ohne daß sich Verwicklungen mit einem anderen DIV ergäben.

So vorzugehen bedeutet nicht zwangsweise eine Code-Ersparnis. Das CSS wird aber lesbarer, weil Bezüge sichtbar werden. Wir sehen auf einmal, welche Elemente von welchen anderen Elementen umgeben werden. Sprächen wir sie direkt an, könnten wir es nur wissen oder möglicherweise aus dem Namen erschließen.

Dieser Webstandards-Adventskalender wird präsentiert von
Stefan Blanz, Jens Grochtdreis, Manuela Hoffmann und Vladimir Simovic.