CSS Missing Das Manual fehlende Handbuch zu Ihrer Website David Sawyer McFarland Deutsche Übersetzung von Jørgen W. Lang

Transkript

1 CSS Deutsche Ausgabe Das fehlende Handbuch zu Ihrer Website Missing Manual»Die Missing Manuals gehören zu den klügsten und nützlichsten Computer büchern überhaupt«kevin Kelly, Mitbegründer von Wired David Sawyer McFarland Deutsche Übersetzung von Jørgen W. Lang

2

3 CSS MISSING MANUAL David Sawyer McFarland Deutsche Übersetzung von Jørgen W. Lang Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo

4 Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O Reilly Verlag Balthasarstr Köln kommentar@oreilly.de Copyright der deutschen Ausgabe: 2009 by O Reilly Verlag GmbH & Co. KG 1. Auflage 2009 Die Originalausgabe erschien 2006 unter dem Titel CSS: The Missing Manual bei Pogue Press/O Reilly Media, Inc. Der Name»Missing Manual«, das korrespondierende Logo sowie die Bezeichnung»Das fehlende Handbuch zu Ihrer Software«sind eingetragene Warenzeichen von Pogue Press/O Reilly Media. Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Deutsche Übersetzung und Aktualisierung: Jørgen W. Lang, Oberlauterbach Lektorat: Inken Kiupel, Köln Korrektorat: Sibylle Feldmann, Düsseldorf Satz: III-satz, Husby, Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; ISBN Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt

5 Inhaltsverzeichnis Die fehlenden Danksagungen Einleitung XI XV Teil 1: CSS-Grundlagen Kapitel 1: HTML-Code für CSS optimieren HTML: Vergangenheit und Zukunft HTML in der Vergangenheit: Hauptsache, es sieht gut aus HTML heute: Das Grundgerüst für CSS HTML-Code für die Verwendung mit CSS schreiben HTML = Struktur Zwei neue HTML-Tags HTML-Code, den Sie am besten vergessen Ein paar Tipps für unterwegs Die Bedeutung der Dokumenttyp-Definition Kapitel 2: Stildefinitionen und Stylesheets Anatomie einer Stildefinition Stylesheets verstehen Intern oder extern die richtige Wahl Interne Stylesheets Externe Stylesheets Stylesheets mit HTML einbinden Stylesheets mit CSS einbinden Übung: Ihre ersten eigenen Stildefinitionen Inline-Stile definieren Interne Stylesheets erstellen Externe Stylesheets erstellen Kapitel 3: Selektoren-Grundlagen: Welcher Stil für wen? Typ-Selektoren: Stile für die ganze Seite Klassen-Selektoren: zielgenaue Kontrolle ID-Selektoren: Regeln für ein bestimmtes Seitenelement Stildefinitionen für verschachtelte Tags Der HTML-Stammbaum Selektoren für Nachfahren-Elemente verwenden Stile für mehrere Tags auf einmal definieren Selektoren gruppieren Der universelle Selektor (Asterisk, *) V

6 Pseudoklassen und Pseudoelemente Stildefinitionen für Links Noch mehr Pseudoelemente und -klassen Selektoren für Fortgeschrittene Kind-Selektoren Benachbarte Geschwister-Elemente Attribut-Selektoren Übung: Beispiele für Selektoren Selektoren gruppieren Klassen-Selektoren anlegen und verwenden ID-Selektoren erstellen und anwenden Nachfahren-Selektoren erstellen und verwenden Kapitel 4: Zeit sparen durch Vererbung Was ist Vererbung? Wie die Vererbung Stylesheets vereinfachen kann Einschränkungen der Vererbung Übung: Vererbung Ein einfaches Beispiel: Eine Vererbungsebene Vererbung verwenden, um eine ganze Seite umzugestalten Ausnahmen von der Vererbung Kapitel 5: Mit mehreren Stilen umgehen: die Kaskade Wie Stile kaskadiert werden Vererbte Stile werden zusammengefasst Der nächste Vorfahr gewinnt Direkt zugewiesene Stildefinitionen gewinnen Ein Tag, viele Stile Spezifität: Welcher Stil gewinnt? Das Zünglein an der Waage: Der zuletzt definierte Stil gewinnt Die Kaskade unter Kontrolle behalten Die Spezifität ändern Selektives Überschreiben Übung: Die Kaskade in Aktion Eine hybride Stildefinition erstellen Kaskadierung und Vererbung kombinieren Konflikte ausräumen Teil 2: Angewandtes CSS Kapitel 6: Textformatierung Text formatieren Die richtige Schrift auswählen Farbiger Text Die Schriftgröße ändern Pixel Schlüsselwörter, Prozentwerte und em-einheiten Wörter und Buchstaben formatieren Kursiv- und Fettschrift VI CSS: Missing Manual

7 Großbuchstaben Ausschmückungen Buchstaben- und Wortabstände Ganze Absätze formatieren Zeilenabstand anpassen Textausrichtung Zeilen einrücken und unerwünschte Ränder entfernen Den ersten Buchstaben oder die erste Zeile eines Absatzes formatieren Stildefinitionen für Listen Verschiedene Aufzählungszeichen oder: die Quadratur des Kreises Aufzählungszeichen positionieren Grafische Aufzählungszeichen Übung: Textformatierung in der Praxis Die Seite einrichten Überschriften und Absätze formatieren Listen formatieren Der letzte Schliff Kapitel 7: Rahmen, Innen- und Außenabstände Das Boxmodell verstehen Den Leerraum mit Innen- und Außenabständen kontrollieren Kurzschrift-Eigenschaften für Innen- und Außenabstände Wenn Außenabstände kollabieren Negative Außenabstände zum Entfernen von Leerraum Inline- und Block-Elemente darstellen Rahmen Die Kurzschrift-Eigenschaft für Rahmen Rahmenseiten einzeln formatieren Hintergrundfarben Höhe und Breite festlegen Die tatsächliche Höhe und Breite einer Box berechnen Textüberlauf im Griff mit der Eigenschaft overflow Das defekte Boxmodell des Internet Explorer 5 reparieren Elemente umfließen lassen Hintergründe, Rahmen und Floats Umfließen verhindern Übung: Außenabstände, Hintergründe und Rahmen Seitenränder anpassen Den Leerraum zwischen den Elementen anpassen Text mit Hintergründen und Rahmen hervorheben Eine Seitenleiste erstellen Die Programmierfehler ausbügeln Weitere Schritte Kapitel 8: Webseiten mit Grafiken versehen CSS und das <img>-tag Hintergrundbilder Bildwiederholungen steuern Hintergrundbilder positionieren Schlüsselwörter Inhaltsverzeichnis VII

8 Präzise Werte Prozentwerte Hintergrundbilder fixieren Die Kurzschrift-Eigenschaft für Hintergründe Übung: Eine Fotogalerie erstellen Bilder rahmen Bildunterschriften hinzufügen Eine Fotogalerie erstellen Schattenwürfe Übung: Hintergrundbilder verwenden Ein Bild als Hintergrund für Seitenelemente verwenden Rahmenlinien durch Grafiken ersetzen Eigene Grafiken als Aufzählungszeichen für Listen Abgerundete Ecken für die Seitenleiste Ein externes Stylesheet anlegen Kapitel 9: Zeitgemäße Navigation für Ihre Website Entscheiden, welche Links formatiert werden sollen Den Link-Zustand verstehen Nur bestimmte Links formatieren Links gestalten Links unterstreichen Buttons erstellen Grafiken verwenden Navigationsleisten erstellen Ungeordnete Listen verwenden Vertikale Navigationsleisten Horizontale Navigationsleisten Fortgeschrittene Techniken für Links Große, anklickbare Buttons CSS-basierte Rollover-Effekte Sliding Doors Übung: Links formatieren Grundsätzliche Formatierungen für Links Links mit Hintergrundbildern versehen Externe Links speziell kennzeichnen Besuchte Seiten markieren Ein vertikales Navigationsmenü erstellen Rollover-Effekte und»sie sind hier«-links Programmierfehler im Internet Explorer ausbügeln Von vertikal nach horizontal Kapitel 10: Tabellen und Formulare Tabellen richtig verwenden Tabellen mit Stil Innenabstände Vertikale und horizontale Ausrichtung anpassen Rahmen anlegen Zeilen und Spalten gestalten VIII CSS: Missing Manual

9 Formulare mit Stil HTML-Formularelemente Formulardesign mit CSS Übung: Stile für Tabellen Übung: Stile für Formulare Teil 3: Seitenlayout mit CSS Kapitel 11: Float-basierte Layouts Wie das Layout mit CSS funktioniert Das mächtige <div>-tag Verschiedene Arten von Webseitenlayouts Grundlagen des Float-basierten Layouts Floats für Ihre Layouts einsetzen Alle Spalten als Float definieren Floats in Floats Elemente mit negativen Außenabständen positionieren Probleme mit Floats lösen Das Umfließen von Floats steuern Spalten über die gesamte Höhe der Seite Das Verrutschen von Floats verhindern Programmierfehler im Internet Explorer umgehen Der»Double-Margin«-Bug Pixel-Lücken Weitere Probleme mit dem Internet Explorer Übung: Mehrspaltige Layouts Strukturieren Sie den HTML-Code Die Layoutregeln erstellen Weitere Spalten hinzufügen Spalten über die ganze Höhe der Seite (»Faux Columns«) Die Breite korrigieren Übung: Layout mit negativen Außenabständen Das Layout zentrieren Die Spalten als Floats definieren Letzte Anpassungen Kapitel 12: HTML-Elemente positionieren Wie CSS-Eigenschaften für die Positionierung funktionieren Die Positionierung steuern Einstein und die absolute Positionierung Wann (und wo) relative Positionierung sinnvoll ist Elemente stapeln Teile einer Seite verstecken Sinnvolle Strategien für die Positionierung Positionierung innerhalb eines Elements Ein Element außerhalb seiner Box darstellen CSS-Positionierung für das Seitenlayout verwenden Frames mit CSS und fester Positionierung Inhaltsverzeichnis IX

10 Übung: Seitenelemente positionieren Den Kopfteil einer Seite verbessern Fotos mit Beschriftungen versehen Seitenlayout Teil 4: Fortgeschrittenes CSS Kapitel 13: CSS für gedruckte Seiten Wie medienspezifische Stylesheets funktionieren Medienspezifische Stylesheets einbinden Medientypen für ein externes Stylesheet angeben Medientypen innerhalb eines Stylesheets angeben Stylesheets für den Ausdruck erstellen Regeln zur Bildschirmdarstellung mithilfe von!important überschreiben Textstile überarbeiten Hintergründe für den Ausdruck formatieren Unerwünschte Bereiche einer Seite ausblenden Seitenumbrüche für das Ausdrucken hinzufügen Übung: Ein Stylesheet für die Druckversion einer Webseite erstellen Unerwünschte Seitenelemente entfernen Hintergründe entfernen und das Layout anpassen Den Text neu formatieren Das Logo darstellen URLs mit ausdrucken Kapitel 14: Besseren CSS-Code schreiben Kommentare Stildefinitionen und Stylesheets sinnvoll ordnen Aussagekräftige Namen verwenden Mehrere Klassen gleichzeitig verwenden Stile durch thematische Zusammenfassung ordnen Mehrere Stylesheets verwenden Unterschiede in der Browserdarstellung beheben Nachfahren-Selektoren verwenden Unterteilen Sie Ihre Seiten Mein Körper gehört mir Mit Hacks für den Internet Explorer umgehen Entwickeln Sie zuerst für aktuelle Browser Isolieren Sie CSS-Code für den IE mit Conditional Comments Teil 5: Anhänge Anhang A: Referenz der CSS-Eigenschaften Anhang B: CSS-Ressourcen Index X CSS: Missing Manual

11 9- Die fehlenden Danksagungen Über den Autor David Sawyer McFarland ist Präsident der Sawyer McFarland Media, Inc., einer Firma für Website-Entwicklung und -Training in Portland, Oregon. David entwirft seit 1995 Websites, sein erstes Werk war ein Onlinemagazin für Profis aus der Kommunikationsbranche. Er arbeitete als Webmaster für die University of California in Berkeley und das Berkeley Multimedia Research Center. Außerdem leitete er das komplett CSS-basierte Redesign von Macworld.com. Neben dem Webdesign arbeitet David als Autor, Trainer und Dozent. Er unterrichtete unter anderem an der UC Berkeley Graduate School of Journalism, dem Center for Electronic Art, dem Academy of Art College, dem Ex Pressions Center for New Media und der Portland State University. Artikel von David finden Sie beispielsweise in den Magazinen Practical Web Design, MX Developer s Journal, Macworld magazine und CreativePro.com. Rückmeldungen zu diesem Buch sind willkommen. Bitte benutzen Sie hierfür die Adresse missing@sawmac.com. Wenn Sie technische Untersützung benötigen, hilft Ihnen sicher die Ressourcenliste in Anhang B. Über das kreative Team Nan Barber (Lektorin) ist seit den Anfängen mit der Missing Manual-Reihe betraut. Das sind inzwischen so viele Jahre, dass sie sich noch daran erinnert, wie sie ihren Computer mit einer Floppy-Disk gestartet hat. Peter Meyers (Lektor) arbeitet bei O Reilly Media als Lektor für die Missing Manual-Reihe. Er lebt mit seiner Frau in New York City. Die fehlenden Danksagungen XI

12 Die fehlenden Danksagungen Mark Levitt (Fachgutachter) ist Senior Web Producer für die Online Publishing Group von O Reilly Media. Ursprünglich von der Informatik kommend, liegen seine beruflichen Schwerpunkte auf interaktiven Medien, Lernmedien sowie auf Webentwicklung. Er ist bekannt dafür, zu allen Tageszeiten Müsli zu essen. Justin Watt (Fachgutachter) arbeitet momentan als Author Services Engineer für Federated Media Publishing, einer Firma für Werbung in Blogs aus Sausalito, Kalifornien. Sein Blog finden Sie unter justinsomnia.org, wo Sie sich über seine Abenteuer in Nordkalifornien informieren können. Jørgen W. Lang (Übersetzer) lebt als freier Übersetzer, Webdesigner, Programmierer, Dozent und Musiker im Elsass. Als er sich 1996 seinen ersten Mac zulegte, ahnte er noch nicht, dass er einmal über 14 Bücher für den O'Reilly-Verlag übersetzen würde. Eines davon halten Sie gerade in den Händen. Zu erreichen ist Jørgen unter der -Adresse jwl@worldmusic.de. Danksagungen Vielen Dank an alle, die an diesem Buch mitgearbeitet haben, inklusive meiner Studenten, die mir immer wieder helfen, technische Themen mit den Augen eines Anfängers zu sehen. Danke an meine technischen Sachverständigen Mark Levitt und Justin Watt, die mich vor so manch peinlichem Fehler bewahrt haben. Danke auch an Zoe Gillenwater für ihre wertvollen Ratschläge und all die großzügigen Seelen auf der CSS-Discuss-Mailingliste, die ihr reichhaltiges Wissen über CSS mit mir geteilt haben. Außerdem sind wir den vielen Webdesignern zu Dank verpflichtet, die neues Terrain für die kreative Nutzung von CSS erschlossen haben und ihre Entdeckungen mit der Webdesign-Gemeinschaft teilen. Danke natürlich auch an David Pogue, dessen unermüdliche Begeisterung und Ausdauer eine große Inspiration sind. Danke ebenfalls an Nan Barber für die Verfeinerung meiner Texte, Peter Meyers für das Aufpolieren meiner Formulierungen und dafür, mich auf der Spur zu halten. Danke an meine Frau Scholle für die Motivation, dieses Projekt zu Ende zu bringen, und an meinen Sohn Graham, der keine Ahnung hat und dem es auch egal ist, was ich beruflich mache. Die Missing Manual-Reihe Missing Manuals sind clevere, verständlich geschriebene Handbücher zu Software und Gadgets, Anwendungen und Sprachen, die ohne gedruckte Handbücher daherkommen (also praktisch alle). Jedes Buch hat einen handverlesenen Index und konkrete Querverweise zu bestimmten Seiten (nicht nur zu Kapiteln). Auf deutsch liegen folgende Missing Manuals vor: JavaScript: Missing Manual von David Sawyer McFarland Websites: Missing Manual von Matthew MacDonald (in Vorbereitung) Mac OS X: Missing Manual Tiger-Ausgabe von David Pogue XII CSS: Missing Manual

13 Die fehlenden Danksagungen Mac OS X Leopard: Missing Manual von David Pogue David Pogues Digitale Fotografie: Missing Manual von David Pogue (in Vorbereitung) iphone: Missing Manual von David Pogue & Christian Hieber ipod: Missing Manual von J.D. Biersdorfer Dein Gehirn: Das fehlende Handbuch von Matthew MacDonald Die fehlenden Danksagungen XIII

14

15 9- Einleitung Cascading Style Sheets, kurz CSS, geben Ihnen die vollständige kreative Kontrolle über das Layout und die Gestaltung Ihrer Webseiten. Mithilfe von CSS können Sie Texte mit Überschriften, Initialen (schmückende Anfangsbuchstaben) und Rahmen versehen, die ins Auge springen und die Sie sonst nur aus Hochglanzmagazinen kennen. Sie können Bilder mit großer Genauigkeit im Dokument platzieren, mehrspaltige Layouts verwenden und Ihre Textlinks mit dynamischen Rollover- Effekten hervorheben. Aber das muss doch ganz schön schwierig sein, oder? Ganz und gar nicht! Schließlich wurde CSS entwickelt, um die Gestaltung von Webseiten zu vereinfachen. Auf den folgenden Seiten werden Sie die Grundlagen von CSS kennenlernen. Schon in Kapitel 1 werden Sie Ihre erste CSS-basierte Webseite anlegen. Wie CSS funktioniert Wenn Sie in Textverarbeitungsprogrammen wie Microsoft Word oder Layoutprogrammen wie Adobe InDesign bereits mit Stilvorgaben gearbeitet haben, wird Ihnen CSS bekannt vorkommen. Ein Stil bzw. eine Stildefinition ist einfach eine Regel, die beschreibt, wie ein bestimmter Teil einer Webseite formatiert werden soll. Und ein Stylesheet ist dann eine Sammlung mehrerer Stildefinitionen. CSS ist nicht das Gleiche wie HTML. Mit HTML strukturieren Sie ein Dokument, indem Sie es in Überschriften, Absätze, Aufzählungslisten und so weiter aufteilen. CSS ist eine vollkommen andere Sprache. Aber sie arbeitet Hand in Hand mit Ihrem Webbrowser, damit die Informationen im HTML-Dokument gut aussehen. So verwenden Sie beispielsweise HTML, um einen bestimmten Satz als Überschrift ersten Grades (<h1>) zu kennzeichnen, die den Inhalt der übrigen Seite einleitet. Einleitung XV

16 Die Vorteile von CSS Mit CSS sorgen Sie dafür, dass diese Überschrift beispielsweise in großen, roten, fett gedruckten Buchstaben dargestellt wird und 50 Pixel vom linken Rand des Ansichtsbereichs beginnt. In CSS geht es also darum, dass Erscheinungsbild von HTML-Dokumenten zu steuern (und bestenfalls zu verbessern). Sie können auch Stilvorgaben entwickeln, die spezielle Stile für die Gestaltung von Bildern definieren. So könnte eine Stildefinition beispielsweise dafür sorgen, dass ein Bild am rechten Rand einer Webseite angezeigt wird. Außerdem wird es mit einem farbigen Rand umgeben und durch einen 50 Pixel breiten Außenabstand vom umgebenden Text getrennt. Sobald Sie einen Stil angelegt haben, können Sie diesen auf Texte, Bilder, Überschriften und andere Seitenelemente anwenden. So können Sie beispielsweise eine bestimmte Schriftart sowie -farbe und -größe festlegen, die sofort die Darstellung verändern. Sie können aber auch bestimmte HTML-Elemente mit eigenen Stilvorgaben versehen, sodass z.b. alle Überschriften ersten Grades (<h1>-tags) auf der gesamten Website im gleichen Stil dargestellt werden, egal an welcher Stelle sie stehen. Die Vorteile von CSS Bevor es CSS gab, waren Webdesigner auf die in HTML selbst vorhandenen Möglichkeiten für Layout und Gestaltung beschränkt. Wenn Sie sich eine Webseite aus dem Jahr 1995 ansehen, wissen Sie, was hier mit beschränkt gemeint ist. Wie Sie später in dieser Einleitung sehen werden, bildet HTML zwar immer noch die Grundlage der meisten Seiten im World Wide Web, aber es ist einfach kein Designwerkzeug. Sicher bietet HTML auch weiterhin einfache Formatierungsoptionen für Texte, Bilder, Tabellen und andere Elemente, und Webdesigner mit genügend Geduld und Akribie können Seiten auch mit reinem HTML-Code gut aussehen lassen. Die resultierenden Dokumente sind aber meistens überladen mit Code und dazu behäbig in der Darstellung, die oftmals kaum vorhersehbar ist. Im Gegensatz dazu hat CSS folgende Vorteile: Stylesheets bieten wesentlich mehr Formatierungsoptionen als HTML. Mit CSS können Sie Absätze so formatieren wie in Büchern und Zeitungen (z.b. indem Sie die erste Zeile einrücken und ohne Zwischenräume zwischen den Absätzen darstellen). Sie können den sogar den Durchschuss (also den Zeilenabstand) anpassen, wenn Ihnen danach ist. Binden Sie Ihr Hintergrundbild per CSS in eine Seite ein, können Sie entscheiden, wie (und ob) das Bild gekachelt (vertikal und horizontal wiederholt) werden soll. Diese Möglichkeiten fehlen in HTML komplett. Der Platzbedarf für CSS-basierte Stildefinitionen ist wesentlich geringer als die HTML-eigenen Formatierungsoptionen, wie beispielsweise das vielgehasste <font>-tag. Mit CSS können Sie eine textüberladene Webseite um viele Kilo(byte) leichter machen. Das Ergebnis sieht nicht nur besser aus, sondern wird auch schneller geladen. XVI CSS: Missing Manual

17 HTML: Das Grundgerüst Außerdem erleichtern Stylesheets die Aktualisierung Ihrer Site. Sie können sämtliche Stildefinitionen in einem externen Stylesheet speichern, das alle Seiten Ihrer Site gemeinsam nutzen. Wenn Sie einen Stil ändern, wirkt sich diese Änderung sofort auf sämtliche Teile Ihrer Site aus, in denen diese Definition verwendet wird. Sie können das Aussehen Ihrer Seiten also komplett umkrempeln, indem Sie lediglich ein einziges Stylesheet verändern. Hinweis: HTML ist mittlerweile so betagt, dass das World Wide Web Consortium (W3C), die für Definition der Standards im Web zuständige Organisation, viele HTML-Tags als deprecated (nicht mehr offiziell unterstützt, veraltet) bezeichnet. Hierzu gehören besonders Tags, die für die Darstellung verwendet wurden (wie beispielsweise das unsägliche <font>-tag). Was Sie wissen müssen Wir gehen in diesem Buch davon aus, dass Sie bereits über HTML-Grundwissen (und vielleicht auch schon über ein wenig Erfahrung mit CSS) verfügen, dass Sie vielleicht schon die eine oder andere Website gebaut haben (oder zumindest mal eine Webseite) und dass Sie sich mit den Tags (<html>, <p>, <h1>, <table> usw.) auskennen, aus denen die Hypertext Markup Language besteht. Ohne HTML ist CSS quasi wertlos. Wenn Sie also weiterkommen wollen, müssen Sie zumindest wissen, wie Sie mit einfachen HTML-Mitteln eine Webseite erstellen können. Haben Sie bereits Webseiten mit HTML erstellt, werden aber das Gefühl nicht los, dass Ihr Wissen ein wenig angestaubt ist, geben wir Ihnen auf den folgenden Seiten einen kleinen mentalen Staubwedel an die Hand. Hinweis: Damit Sie beim Lernen von HTML keine nassen Füße bekommen, gibt es eine Reihe von kostenlosen Onlineanleitungen. Die umfassendste deutschsprachige Seite ist wohl von Stefan Münz. Für Leute, die des Englischen mächtig sind, gibt es außerdem HTML Dog ( und W3Schools ( Wenn Sie gedruckte Seiten bevorzugen, empfehlen wir Ihnen Websites erstellen: Missing Manual oder HTML mit CSS & XHTML von Kopf bis Fuß (beide O Reilly Verlag). HTML: Das Grundgerüst HTML (Hypertext Markup Language) verwendet eine Reihe einfacher Anweisungen, Tags genannt, um die verschiedenen Teile einer Webseite zu strukturieren. Der folgende HTML-Code erzeugt eine (sehr) einfache Webseite: <html> <head> <title>hallo, ich bin der Titel dieser Webseite.</title> </head> <body> Moin, und ich bin etwas Text im Körper (Body) der Seite. </body> </html> Einleitung XVII

18 HTML: Das Grundgerüst Auch wenn das nicht besonders aufregend aussieht, enthält dieses Beispiel sämtliche wesentlichen Elemente einer Webseite. Sie sehen die html-tags (innerhalb spitzer Klammern) ganz am Anfang und am Ende des Codes, einen Kopfteil (head), einen Dokumentenkörper (body) und ein paar Dinge, die den eigentlichen Inhalt der Seite bilden. Wie HTML-Tags funktionieren Im obigen Beispiel wie auch im HTML-Code aller anderen Webseiten wird Ihnen auffallen, dass die meisten Anweisungen in Paaren auftreten, die ein Stück Text oder auch andere Anweisungen umgeben. Innerhalb der spitzen Klammern stehen die sogenannten Tags, Anweisungen, die dem Webbrowser mitteilen, wie das Dokument strukturiert ist (Überschriften, Absätze, Links usw.). Diese Tags bilden das Markup (die Markierung bestimmter Teile, z.b. als Tabelle, Bild usw.) der Hypertext Markup Language. Gelegentlich sprechen wir im Buch der Einfachheit halber davon, dass sich ein Tag innerhalb eines anderen Tags befindet. Tatsächlich werden diese natürlich von einem Tag-Paar umgeben. Das öffnende Tag eines Paars teilt dem Browser mit, wo die Anweisung beginnt, während das schließende Tag anzeigt, wo die Instruktion zu Ende ist. Schließende Tags enthalten prinzipiell einen Schrägstrich (/) nach der öffnenden spitzen Klammer (<). Damit eine Webseite funktioniert, müssen mindestens drei Tags vorhanden sein: Das <html>-tag erscheint immer am Anfang einer Webseite und am Ende noch einmal (mit Schrägstrich). Dieses Tag-Paar zeigt dem Webbrowser an, dass das Dokument in HTML geschrieben ist und nicht in irgendeiner anderen Sprache. Sämtlicher Inhalt einer Seite, inklusive anderer Tags, steht zwischen den öffnenden und schließenden <html> </html>-tags. Wenn Sie sich die Struktur einer Webseite als Baum vorstellen, wäre das <html>-tag der Stamm. Dem Stamm entspringen zwei Äste, die die beiden Hauptteile jeder Webseite bilden: der Kopfteil (head) und der Körper (body). Der Kopfteil einer Webseite (umgeben mit <head>-tags) enthält den Titel der Seite. Es kann außerdem noch eine Reihe für den Benutzer unsichtbare Informationen enthalten (z.b. Suchbegriffe), die Browser und Suchmaschinen auswerten können. Zusätzlich kann der Kopfteil Informationen enthalten, die der Webbrowser für die Darstellung der Webseite und zusätzliche Interaktivität verwenden kann, z.b. die Cascading Style Sheets. Auch JavaScript-Programme, -Funktionen und -Variablen können im Kopfteil einer HTML-Datei deklariert werden. Im Körper (body) des HTML-Dokuments, der durch die <body>-tags gekennzeichnet wird, stehen sämtliche Informationen, die im Browserfenster dargestellt werden Überschriften, Text, Bilder und so weiter. XVIII CSS: Missing Manual

19 XHTML: HTML der nächsten Generation Innerhalb der <body>-tags werden Sie häufig die folgenden Tags antreffen: Um einem Webbrowser mitzuteilen, wo ein Absatz beginnt und aufhört, verwenden Sie das <p> </p>-tag-paar. (Das»p«steht hier für»paragraph«, das englische Wort für Absatz.) Innerhalb dieses Paars können natürlich weitere Tags stehen, wie wir gleich sehen werden. Das <strong>-tag hebt Text hervor. Wenn Sie einen Textteil mit diesen Tags umgeben, wird der Text in den meisten Fällen fett gedruckt dargestellt. Das HTML-Schnipsel <strong>warnung!</strong> teilt dem Browser mit, die Zeichenfolge»Warnung!«stark hervorzuheben. Wird ein Hyperlink, meistens einfach nur als»link«bezeichnet, angeklickt, wird eine beliebige andere Adresse im Web geöffnet. Sie können dem Browser mitteilen, welche Adresse das sein soll, indem Sie diese in das öffnende <a>-tag schreiben, z.b.: <a href=" klicken!</a>. Hiermit weisen Sie den Browser an, die Missing Manual-Website zu öffnen, sobald jemand der Aufforderung»Hier klicken!«folgt. Der href-teil im öffnenden Tag wird als Attribut bezeichnet. Dessen Wert ist eine sogenannte URL (»Uniform Resource Locator«, sprich: Webadresse). Wie jeder anderen Technologie ist HTML das Alter anzusehen. Auch wenn es seinen Zweck erfüllt hat, war es schon immer eine etwas schludrige Sprache. Unter anderem können Tags in Groß- und Kleinbuchstaben verwendet werden (<body> und <BODY> sind beispielsweise beide gültig). Auch nicht geschlossene Tags sind möglich (ein öffnendes <p>-tag reicht im Prinzip aus, um einen Absatz zu erzeugen). Zwar erleichtert diese Flexibilität das Schreiben von Seiten, auf der anderen Seite erschwert es aber die Darstellung der Seiten durch Webbrowser, PDAs und andere Geräte erheblich. Außerdem ist HTML mit der heißesten neuen Internetsprache nicht kompatibel: mit XML oder auch Extensible Markup Language (erweiterbare Auszeichnungssprache). XML ist ebenfalls eine Tag-basierte Sprache, ähnlich wie HTML. Mit ihr können Daten in einer deutlichen und leicht verständlichen Weise organisiert werden, damit Computer, Betriebssysteme und Programme schnell und einfach Daten austauschen können. Im Gegensatz zu HTML ist XML dabei nicht auf eine Handvoll Tags beschränkt. Anhand einiger Regeln können Sie im Prinzip sogar Ihre eigenen Tags definieren. Vom RSS-Feed bis itunes-wiedergabeliste überall kommt XML zum Einsatz. Eine weitere Variante ist XHTML. XHTML: HTML der nächsten Generation Um mit der Zeit Schritt zu halten, findet eine neue HTML-Version mit dem Namen XHTML ihren Weg auf immer mehr Websites. Wenn Sie HTML bereits verstehen, ist die Umstellung recht einfach. XHTML ist keine revolutionäre neue Einleitung XIX

20 XHTML: HTML der nächsten Generation Sprache, sondern im Grunde genommen einfach nur HTML mit etwas strikteren Regeln. Es wird hitzig darüber gestritten, ob nun HTML oder XHTML der bessere Ansatz sei. Wenn man sich einige der Diskussionen im Netz anschaut, könnte man meinen, HTML und XHTML wären zwei vollkommen unterschiedliche Sprachen was sie aber nicht sind. Sie können heute und auch in Zukunft mit HTML schicke und funktionale Websites bauen. Wenn Sie HTML weiter benutzen wollen, ist es nur wichtig, dass Sie sich an die Regeln aus Kapitel 1 halten. Besonders wichtig ist, dass Sie die korrekte Dokumenttyp-Definition (s. Seite 13) verwenden, ansonsten kann es sein, dass Ihr CSS-Code in manchen Browsern nicht besonders vorteilhaft aussieht. Außerdem ist es wichtig, dass Sie Ihren Code validieren (s. Seite 11), damit Sie absolut sicher sind, dass es im Code keine Tippfehler oder andere Probleme gibt, die Ihre HTML-Darstellung durcheinanderbringen können. Das Gleiche gilt für XHTML. Die Regeln sind strikter, wodurch sichergestellt wird, dass die Seite funktioniert (beispielsweise wird bei HTML nicht unbedingt eine Angabe zum Dokumenttyp gebraucht bei XHTML schon). XHTML ist die Zukunft der Websprachen. Während HTML an Bedeutung verliert, wird schon schwer daran gearbeitet, die nächste XHTML-Generation auf die Beine zu stellen. (Machen Sie sich darüber nicht zu viele Gedanken es wird noch Jahre dauern, bis die gängigen Browser diesen Standard unterstützen.) Hinweis: Wenn Sie sich näher mit den Innereien von XHTML und seinen Unterschieden zu HTML beschäftigen wollen, werfen Sie einen Blick auf die entsprechenden Selfhtml-Seiten unter de.selfhtml.org/html/xhtml/unterschiede.htm und das XHTML-Tutorial (englisch) der W3Schools unter In XHTML würde die auf Seite XVII gezeigte HTML-Seite so aussehen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>hallo, ich bin der Titel dieser Webseite.</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> Moin, und ich bin etwas Text im Körper (Body) der Seite. </body> </html> XX CSS: Missing Manual

21 XHTML: HTML der nächsten Generation Die Ähnlichkeit zum HTML-Code ist nicht zu übersehen. Damit eine XHTML- Datei allerdings dem XML-Standard entspricht, sind einige Regeln zu beachten: Beginnen Sie die Seite mit einer Dokumenttyp-Deklaration. Hiermit sind die ersten Zeilen im obigen Code gemeint, die mit <!DOCTYPE beginnen. Die Dokumenttyp-Deklaration (auch als Doctype bezeichnet) ist der wichtigste Teil einer XHTML-Seite, wie Sie im folgenden Abschnitt sehen werden. Alle Tags und deren Attribute müssen in Kleinbuchstaben geschrieben werden. Im Gegensatz zu HTML ist es nicht erlaubt, das <body>-tag als <BODY> zu schreiben. Wenn Sie XHTML schreiben, sind großgeschriebene Tags leider nicht zur Party eingeladen. Die Werte der Tag-Attribute müssen mit Anführungszeichen umgeben sein. Die Formulierung <a href= ist zwar gültiger HTML-Code, hat aber in XHTML keinen Wert. Hier müssen Sie den Wert des href-attributs mit Anführungszeichen umgeben: <a href=" Alle Tags (auch die leeren) müssen geschlossen werden. Um in XHTML einen Absatz zu markieren, müssen Sie mit <p> beginnen und mit </p> aufhören. Das Problem ist nur, dass manche Tags lieber allein unterwegs sind, also keine Paare bilden. Diese werden als leere Tags bezeichnet, weil ihnen das schließende Gegenstück fehlt. Ein Beispiel ist der Tag für den Zeilenumbruch. Einen leeren Tag schließen Sie, indem Sie vor die schließende spitze Klammer einen Schrägstrich stellen, z.b. <br />. Die Auswirkungen der Dokumenttyp-Deklaration Im XHTML-Beispielcode ist alles unterhalb des <head>-teils genau so wie im zuvor gezeigten HTML-Beispiel. Dafür unterscheiden sich die Informationen am Anfang der Seite besonders stark. Jede XHTML-Seite beginnt mit ein paar Zeilen, die beschreiben, um welche Art von Dokument es sich handelt und nach welchem Standard sie sich richtet. Diese Dokumenttyp-Definitionen (oder kurz DTD) verweisen auf Dateien im Internet, die im Einzelnen regeln, wie dieser Dateityp zu behandeln ist. In unserem Fall besagt die DTD nur, dass es sich um ein XML-Dokument handelt, genauer gesagt um ein XHTML-Dokument. Der Dokumenttyp spielt eine entscheidende Rolle dabei, wie der Browser die CSS-Anweisungen umsetzt. Ein falscher Dokumenttyp kann leicht dafür sorgen, dass bestimmte Versionen des Internet Explorer die Darstellung einer Seite, die viel CSS verwendet, komplett durcheinanderwürfelt. Mehr zu Dokumenttypen und deren Bedeutung für CSS finden Sie in Kapitel 1. Einleitung XXI

22 Software für CSS Hinweis: Das scheint für den Anfang eine Menge Stoff zu sein, wenn Sie noch nicht so viel Erfahrung mit dem Erstellen von Webseiten haben. Stimmt. In Kapitel 1 werden Sie aber auch ein Werkzeug kennenlernen, mit dem Sie sicherstellen können, dass Ihr XHTML-Code korrekt ist: den W3C Validator. Er überprüft Ihre Seite und teilt Ihnen mit, ob alles in Ordnung ist. Noch wichtiger ist es allerdings, dass Sie auch noch lernen, CSS-freundlichen XHTML-Code zu schreiben. Software für CSS Um (X)HTML- und CSS-basierte Webseiten zu erstellen, brauchen Sie nicht viel mehr als einen einfachen Texteditor wie Notepad (Windows) oder TextEdit (Mac). Nachdem Sie Ihre ersten paar hundert Zeilen HTML und CSS eingegeben haben, werden Sie sich aber ein Programm wünschen, das die Arbeit mit Webseiten etwas leichter macht. Im folgenden Abschnitt finden Sie einige häufig verwendete Programme; manche gibt es kostenlos, andere müssen Sie kaufen. Hinweis: Es gibt Hunderte verschiedener Werkzeuge, die Ihnen beim Erstellen von Webseiten helfen können. Daher ist die folgende Liste auch nicht vollständig. sondern eher so eine Art»Greatest Hits«der Programme, die CSS-Fans heutzutage am liebsten benutzen. Kostenlose Programme Für das Erstellen und Bearbeiten von Webseiten und Stylesheets gibt es reichlich kostenlose Programme. Wenn Sie immer noch mit Notepad oder TextEdit herumbasteln, probieren Sie es doch einmal mit einem der folgenden Programme: HTML-Kit (Windows, Dieser mächtige (X)HTML- Editor besitzt eine Reihe nützlicher Fähigkeiten, z.b. die Möglichkeit einer Webseitenvorschau direkt im Programm (damit Sie nicht ständig zwischen Editor und Browser wechseln müssen), außerdem Abkürzungen für HTML-Tags und vieles mehr. TextWrangler (Mac, Dieses kostenlose Programm ist im Prinzip eine abgespeckte Version von BBedit, einem hoch entwickelten und wohlbekannten Textbearbeitungsprogramm für den Mac. Text- Wrangler besitzt zwar nicht alle Fähigkeiten von BBEdit, verfügt aber immerhin über Syntax-Highlighting (d.h., (X)HTML-Tags und CSS-Eigenschaften werden in unterschiedlichen Farben hervorgehoben, wodurch Sie die einzelnen Teile einer Seite leichter unterscheiden können), FTP-Unterstützung (damit Sie die Dateien direkt aus dem Programm heraus auf einen Webserver hochladen können) und vieles andere. Kommerzielle Software Programme für die Webentwicklung reichen von kostengünstigen Texteditoren bis hin zu kompletten Website-Konstruktionswerkzeugen mit allem Drum und Dran: XXII CSS: Missing Manual

23 Über dieses Buch EditPlus (Windows, ist ein preiswerter ($35) Texteditor. Er verfügt über Syntax-Highlighting, FTP-Funktionen, automatische Codevervollständigung und andere handgelenkschonende Eigenschaften. skedit (Mac, ist ebenfalls ein günstiger ($34,95) Webseiten- Texteditor. Seine Funktionen umfassen FTP-/SFTP-Unterstützung, Syntax- Highlighting, automatische Codevervollständigung, eine Funktion zum»aufräumen«von HTML-Code und vieles mehr. BBEdit (Mac, Dieser viel geliebte Texteditor für den Mac ($125, Studenten: $49) ist vollgepackt mit Werkzeugen zur Arbeit mit HTML, XHTML, CSS und diversen anderen Programmiersprachen. BBedit enthält eine Menge nützlicher Werkzeuge und Hilfestellungen zum Erstellen von Websites. Dreamweaver (Mac und Windows, ist ein visuelles Editorprogramm für Websites (570 ). Sie können die Seiten so bearbeiten, wie sie nachher im Webbrowser dargestellt werden. Das Programm verfügt außerdem über einen mächtigen Texteditor und ausgezeichnete Werkzeuge zum Erstellen und Verwalten von CSS. Eine vollständige Anleitung zu diesem mächtigen Programm finden Sie beispielsweise im Buch Dreamweaver CS4: The Missing Manual. Expression Web Designer (Windows, ist Microsofts neues Webdesignprogramm. Es ersetzt FrontPage und enthält eine Menge professioneller Webdesignwerkzeuge, inklusive einer recht guten Unterstützung bei der CSS-Erstellung. Coda (Mac, ist ein recht neues Webdesignwerkzeug für den Mac ($99). Es fasst alle Entwicklungsschritte in einem Fenster zusammen und enthält neben umfassenden XHTML-Fähigkeiten eine große Zahl nützlicher Werkzeuge für die Arbeit mit CSS. Hinweis: Die verschiedenen in diesem Abschnitt besprochenen Programme sind Mehrzweckwerkzeuge, mit denen Sie sowhl (X)HTML als auch CSS bearbeiten können. Auf diese Weise brauchen Sie nur ein Programm für die Webentwicklung zu lernen. Wenn Sie sich bereits auf ein Programm zum Schreiben von (X)HTML festgelegt haben, finden Sie in Anhang B eine Liste von speziellen CSS-Editoren. Über dieses Buch Das World Wide Web ist so einfach zu benutzen, dass selbst eine Rentnerin aus Obereglfing oder ein Erstklässler aus Meuselwitz an der Schnauder damit klarkommen sollte. Leider sind die Regeln, nach denen das Web funktioniert, nicht so einfach zu verstehen. Die Informatiker und Techniker, die die offizielle Dokumentation schreiben, haben wenig Interesse daran, ihre Konzepte normalsterblichen Webbenutzern zu erklären. Wenn Sie einen Blick auf die offizielle Spezifikation zu CSS (2) werfen, bekomen Sie einen guten Eindruck von dem technischen Kauder- Einleitung XXIII

24 Über dieses Buch Wie Betriebssysteme und ipods wird auch CSS beständig weiterentwickelt. Das 1996 veröffentlichte CSS 1 legte das Fundament zur Verwendung von Cascading Style Sheets. Die grundsätzliche Struktur einer Stildefinition, das Konzept der Selektoren (s. Kapitel 3) und die meisten in diesem Buch behandelten CSS- Eigenschaften waren bereits Teil von Version 1. In CSS 2 kamen neue Fähigkeiten hinzu, beispielsweise die Möglichkeit, CSS für bestimmte Ausgabegeräte (Drucker, Monitore, Projektoren usw., s. Seite 391) separat zu definieren. Seit CSS 2 ist es außerdem möglich, Elemente pixelgenau im Ansichtsbereich der Webseite zu positionieren. Dieses Buch basiert auf CSS 2.1, dem gegenwärtigen Standard für Cascading Style Sheets. Dieser Standard enthält sämtliche Elemente von CSS 1 sowie eine Vielzahl neuer Eigenschaften (Properties) und korrigiert eine Reihe von Problemen mit CSS 2. Dabei enthält CSS 2.1 gegenüber Version 2 keine radikalen Änderungen, und die meisten Webbrowser haben die neuen IM HÖCHSTEN GANG Die verschiedenen CSS-Versionen Regeln mittlerweile ganz gut verinnerlicht. Vielen Dank! (Eine bemerkenswerte Ausnahme bildet der Internet Explorer 6 für Windows. Aus diesem Grund werden Sie in diesem Buch auch eine Reihe von Lösungen finden, mit denen sich diese Probleme umgehen lassen. Zum Glück wurden die meisten teils haarsträubenden Fehler im Internet Explorer 7 behoben, und der Internet Explorer 8 hält sich sogar noch besser an die Standards.) CSS 3 ist bereits in den Startlöchern. Obwohl das W3C den Standard noch absegnen muss, werden die neuen Richtlinien und Funktionen in einigen Browsern bereits umgesetzt. So kann Apples Browser Safari dank CSS 3 bereits mehrere Hintergrundbilder für ein Element verwenden. Sowohl Safari als auch Firefox unterstützen außerdem die neuen Eigenschaften zum Erzeugen von abgerundeten Ecken. Da CSS 3 aber immer noch nicht fertiggestellt ist, ist in den meisten Browsern noch nicht viel davon zu sehen und so auch in diesem Buch. welsch, das diese Leute sprechen ( und das ist schon die deutsche Übersetzung!). Für Cascading Style Sheets gibt es kein offizielles Handbuch. Leute, die CSS lernen wollen, wissen oft nicht, wo sie anfangen sollen. Und die Feinheiten von CSS bringen selbst gestandene Webprofis manchmal noch ins Stolpern. Dieses Buch soll Ihnen als Handbuch dienen, das CSS eigentlich mitgeliefert werden müsste. Hier finden Sie schrittweise Anleitungen, mit denen Sie lernen, wunderschöne Webseiten zu erstellen. CSS: Missing Manual ist so angelegt, dass es Lesern aller technischen Wissenslevel als Hilfestellung dienen kann. Um das Optimale aus diesem Buch herausziehen zu können, sollten Sie ein gewisses Basiswissen zu HTML und vielleicht auch schon zu CSS besitzen. Wenn Sie noch nie zuvor eine Webseite erstellt haben, sehen Sie sich unsere Kurzanleitung auf Seite 25 an. Die meisten Erläuterungen in diesen Kapiteln sind für fortgeschrittene Anfänger gedacht. Wenn Ihnen das Erstellen von Webseiten noch neu ist, finden Sie in den mit»im höchsten Gang«überschriebenen Kästen die einführenden Informationen, die Sie für das Verständnis des jeweiligen Themas benötigen. Die Kästen mit der Überschrift»Sprechstunde für Power-User«sind für erfahrene Webentwickler gedacht. Sie enthalten technische Tipps, Tricks und Schleichwege für diejenigen, die noch tiefer in die Materie eindringen wollen. Hinweis: Gelegentlich empfiehlt dieses Buch andere CSS-Bücher, die Themen behandeln, die viel zu speziell oder nicht so wichtig für dieses Handbuch sind. Manche Titel sind beim Missing Manual-Verlag O Reilly erschienen, andere nicht. Stammt ein großartiges Buch einmal nicht aus der O Reilly-Familie, werden wir darauf hinweisen. XXIV CSS: Missing Manual