-Tag
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. ,
.
.
. ,
.
.
.
.
•
.
.
. ,
.
.
•
,
•
.
. ,
.
.
. ,
.
.
. ,
.
.
•
•
•
.
.
.
.
.
.
•
•
.
. ,
.
.
.
.
•
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
•
.
.
.
.
.
•
.
•
.
.
.
Verschiedene Arten von Webseitenlayouts
.
.
.
197
,...,...
297
,...,...
298
.
.
.
•
.
.
.
.
299
Grundlagen des Float·basierten layouts . . . . . . . . . . . . . . . ......... . .. . . .. . . .. . . ..
301
Roats für Ihre layouts einsetzen .
...
305
..
306
. ..
308
. .. Probleme mit Roats lösen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , . . .. . . . . . . . .. . . . . . . . . Das Umfließen von Roats steuern . ..
310 314
.
. .
.
Alle Spalten als Float definieren.. Aoats in Roats
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
.
.
.
. .
.
.
. •
.
.
. .
.
.
. .
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
. .
.
. .
.
.
, .
.
Elemente mit negativen Außenabständen positionieren,
.
.
.
.
.
.
.
Spalten über die gesamte Höhe der Seite. Das Verrutschen von Roats verhindern
.
.
3·Pixel--lücken
.
.
.
.
.
.
.
.
.
.
.
.
. .
•
. .
.
. .
.
.
•
.
.
.
. .
.
.
• .
.
.
.
.
.
. .
•
.
•
.
.
.
.
. •
.
.
. .
.
.
.
•
.
.
. .
.
•
. •
.
.
. .
.
•
. •
.
.
.
.
.
.
.
.
.
.
.
.
.
,
.
.
.
.
.
.
.
. • .
. . . . . •
.
.
.
. .
.
.
. .
.
.
.
. •
.
.
. .
.
. •
.
•
. .
.
.
.
. • .
.
.
.
.
.
.
.
.
.
.
. •
.
.
.
.
.
•
.
•
.
.
.
.
.
.
•
.
•
•
•
.
.
.
.
•
.
. . .
.
. • •
.
.
.
.
.
.
.
•
•
•
•
•
. .
.
.
.
. .
.
.
. .
.
.
. .
.
.
.
. .
.
.
. .
.
.
•
• •
.
.
. .
.
. •
.
. .
.
.
.
.
.
. .
.
.
.
.
.
.
.
.
.
.
•
.
•
. ,
.
.
•
. • .
•
.
.
. .
.
.
. .
•
. .
. .
.
.
• . .
.
.
.
Programmierfehler im Internet Explorer umgehen Der lOouble-Margin«·8ug
.
.
Weitere Probleme mit dem Internet Explorer.
• •
. .
.
.
.
. . .
.
. • .
.
.
• .
. • .
•
.
.
•
.
•
.
.
. .. .
.
.
.
.
.
Die layoutregeln erstellen
.
Weitere Spalten hinzufügen
.
.
. .
.
.
. .
.
.
.
.
.
.
.
. .
•
. .
.
.
.
.
•
.
•
.
. .
.
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. ,
.
.
. .
.
.
. .
.
.
. •
•
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. ,
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
.
.
.
.
. .
.
.
. .
.
.
. .
. .
325 327
•
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
.
•
. •
.
.
.
.
. .
.
.
•
•
.
. .
.
. .
.
.
. .
•
.
.
.
. .
.
.
. .
.
. .
.
.
. •
.
.
. .
.
•
• •
.
. . . . • •
•
. .. . . . .
343
. . . . . ..
347
.
.
.
.
. .
.
.
.
. •
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
"
•
.
. . . . . •
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
, .
•
.
• .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
•
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
.
. .
.
. •
.
.
.
. .
.
•
. • .
.
. .
.
. .
. .
.
.
. .
.
.
. .
.
.
.
.
.
.
.
.
.
.
. .
.
.
. .
.
.
. .
.
.
.
.
.
. .
.
.
. .
. .
.
.
.
. .
Positionierung innerhalb eines Elements . Ein Element außerhalb seiner Box darstellen. .
.
.
.
.
.
.
. .
.
.
.
.
. .
.
.
.
. . .
.
.
.
. .
.
.
.
.
.
. • .
. ,
.
.
•
. .
339
. .
.
.
•
.. . . . . .. . . . .
.
.
.
.
.
. .
.
• . .
.
. • •
. •
• .
. • .
. . . .
. • . • .
. .
.
.
. . .
.
. • .
.
.
.
.
.
.
.
. .
.
.
. .
.
.
. •
.
•
. .
.
. •
. •
.
.
.
.
.
.
.
.
.
.
.
.
•
. .
.
.
.
. •
.
•
.
.
.
.
.
.
. .
.
.
.
.
•
.
.
.
.
.
. • •
•
.
.
.
. .
•
.
. .
.
•
. •
•
.
CS5--Positionierung für das Seiten layout verwenden .
.
. .
.
• .
.
.
.
•
. .
.
.
.
.
337
.
.
. .
.
. .
334 335
... .. . . .. . •
. .
.
. .
.
.
. ... . . .
.
. .
.
.
332
.
.
.
Elemente stapeln Teile einer Seite verstecken . Sinnvolle Strategien für die Positionierung .
.
. .
.. . . .
•
•
. .
.
.
. .
.
330 331
.
.
Einstein und die absolute Positionierung Wann (und wo) relative Positionierung sinnvoll ist . .
.
.
329
...
•
.
Wie CS5--Eigenschaften für die Positionierung funktionieren .
.
.
.
325
. .. . .
.
Kapitel 11: HTML-Elemente posHionieren Die Positionierung steuern.
. .
.
Die Spalten als Roats definieren letzte Anpassungen
.
.
Übung: layout mit negativen Außenabständen Das layout zentrieren. .
.
.
Spalten über die ganze Höhe der Seite (»Faux Columns«) Die Breite korrigieren . .
. .
322
...
Übung: Mehrspaltige layouts . . . . . . . . . . . . . . . . . . . . . . . . . .... . . . .... . . ... . . . . . . . Strukturieren Sie den HTMl·Code.
315 319
.
. ... . . .
338
349 350 352
. . ... ... .
356
. . ...
356
.......
•
.
. .
. . . .. . . .
360 361
.........
363
. . ..
363 364
. .
.
.
.
. •
.
.. . . . . . . . .. . ... . . .
Frames mit CSS und fester Positionierung . . . . . . . . . . . . . . . . .... ... . . . . . . . . . . .
365 371
Inhaltsverzeichnis
IX
Übung: Seitenelemente positionieren .
. .
.
.
. .
.
.
•
.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Den Kopfteil einer Seite verbessern.
.
.
.
. .
.
.
. •
.
.
. .
.
.
•
Fotos mit Beschriftungen versehen .
.
.
.
. .
.
.
. •
.
.
. .
.
.
. .
. .
.
.
. .
.
.
. •
.
.
. .
.
.
.
Seitenlayout
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
..... .....
375 380 382
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
l91
. .
.
.
. .
.
.
• .
.
.
. .
.
.
.
•
.
.
. .
.
.
. .
•
.
. .
.
.
. •
•
. •
.
.
. .
.
.
. .
•
.
. .
.
.
. •
.
....
Teil 4: FortgeschriHenes C55 Kapiteln: C55 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
391 394 394 394 395
Regeln zur Bildschirmdarstellung mithilfe von !important überschreiben . . . . . . . . .
396
Textstile überarbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hintergründe für den Ausdruck formatieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
397 398
.
Unerwünschte Bereiche einer Seite ausblenden. Seitenumbrüche für das Ausdrucken hinzufügen.
. .
.
.
. .
. .
.
.
.
.
. .
. .
.
.
.
.
. .
.
.
.
. .
.
.
. .
•
.
. .
.
.
.
. .
.
.
. .
.
.
.
•
.
.
.
.
.
.
.
•
.
•
.
Übung: Ein Stylesheet für die Druckversion einer Webseite erstellen
.
.
. . . . 400 . . . . 401 403
.
.
.
.
. . . . 403 Unerwünschte Seitenelemente entfernen . . . . . . 405 Hintergründe entfernen und das layout anpassen. Den Text neu formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 .
Das logo darstellen. URls mit ausdrucken. . .
.
.
.
.
. .
. .
.
.
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
. .
Kommentare Stildefinitionen und Stylesheets sinnvoll ordnen .
.
.
.
.
.
.
Aussagekräftige Namen verwenden.
.
.
.
.
.
.
.
.
.
.
. .
.
Kapitel 14: Besseren C55-Code schreiben .
.
.
. .
.
. .
. .
.
.
.
.
. .
.
.
. .
.
.
.
. .
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
•
.
.
.
.
.
.
. .
.
.
. .
•
.
•
.
.
.
. .
.
.
. .
.
• .
•
. . . . . . . . . . . 408 . . . . . . . . . . . 408
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. .
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
•
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
.
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 .
.
. .
.
.
. .
.
.
.
.
. .
.
.
. .
.
411 412
. . . . . . . . . . . . 412 414
. .
Mehrere Klassen gleichzeitig verwenden
411
.
.
.
.
.
. . . . 416
. . . . . 417
420 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
.
.
. .
. .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
•
.
•
•
.
.
.
. .
.
.
. .
.
.
. .
•
.
. .
.
.
. •
.
.
. .
.
.
. .
. .
.
.
. .
.
.
. .
.
.
.
. •
.
.
. .
.
.
. .
•
.
. .
.
.
. •
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
•
.
.
.
.
.
.
.
.
. .
.
.
. .
.
.
. .
.
.
. .
.
.
.
. .
.
. .
.
.
.
. •
.
.
.
. .
.
.
. .
.
.
. •
.
.
. .
. .
.
.
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.
•
.
.
.
.
.
. . . . . 424 . . . . . 425 .
.
.
.
.
428
. . . . . 428 . . . . . 429
Teil 5: Anhänge Anhang A: Referenz der C55-Eigenschaften Anhang B: C55-Ressourcen Index
x
. . . . . . . . . . . . . . . . . . . . . . . . . .
435
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4&5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS: Missing Manual
475
Die fehlenden Danksagungen
Über den Autor David Sawyer McFariand ist Präsident der Sawyer McFariand Media, Ine., einer Firma für Website-Entwicklung und -Training in Portland, Oregon. David entwirft seit 1995 Websites, sein ers tes Werk war ein Onlinemagazin für Profis aus der Kommunika tionsbranche. 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 unterrich tete unter anderem an der UC Berkeley Graduate School of Journalism, dem Cen ter for Electronic Art, dem Academy of Art College. dem Ex'Pressions Center for New Media und der Portland State University. Artikel von David fmden Sie bei spielsweise in den Magazinen Practical
Web Design, MX Developer's Journal, Mac
world magazine und CreativePro.com. Rückmeldungen zu diesem Buch sind willkommen. Bitte benutzen Sie hierfür die Adresse
[email protected]. 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 Anfangen 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
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. Kali fornien. Sein Blog fmden Sie unter justinsomnia.org, wo Sie sich über seine Aben teuer in Nordkalifornien informieren können.
Jergen W. Lang (Übersetzer) lebt als freier Übersetzer, Webdesigner. Programmie rer. 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 überset zen würde. Eines davon halten Sie gerade in den Händen. Zu erreichen ist J0rgen unter der E-Mail-Adressejwl@worldmusic de. .
Danksagungen Vielen Dank an alle. die an diesem Buch mitgearbeitet haben, inklusive meiner Stu denten, die mir immer wieder helfen, technische Themen mit den Augen eines
Anfcingers 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 verpflich tet. 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 Ver feinerung 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:
XII
•
JavaScript: Missing Manual von David Sawyer MeFarland
•
Websites: Missing Manual von Matthew MacDonald (in Vorbereitung)
•
Mac OS X: Missing Manual Tiger-Ausgabe von David Pogue
CSS: Missing Manual
Die fehlenden Danksagungen • •
Mac OS X Leopard: Missing Manual von David Pogue David Pogues Digitale Fotografie: Missing Manual von reitung)
David Pogue (in Vorbe-
•
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
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 Rah men versehen, die ins Auge springen und die Sie sonst nur aus Hochglanzmagazi nen 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 C55 funktioniert Wenn Sie in Textverarbeitungsprogrammen wie Microsoft Word oder Layoutpro grammen 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 Stildefmitionen.
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 «h 1 » zu kennzeichnen, die den Inhalt der übrigen Seite einleitet.
Einleitung
xv
Die Vorteile von (55
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 Stildeftnition 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, Über schriften 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 Stilvor gaben versehen, sodass z.B. alle Überschriften ersten Grades «hl>-Tags) auf der gesamten Website im gleichen Stil dargestellt werden, egal an welcher Stelle sie stehen.
Die Vorteile von C55 Bevor es CSS gab, waren Webdesigner auf die in HTML selbst vorhandenen Mög lichkeiten 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 Design werkzeug. 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
XVI
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 entschei den, wie (und ob) das Bild gekachelt (vertikal und horizontal wiederholt) wer den 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
-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.
CSS: Missing Manual
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 Sei ten Ihrer Site gemeinsam nutzen. W enn 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 umkrem peln, indem Sie lediglich ein einziges Stylesheet verändern. _: HTMl i� mittlerweile so betagt, dass das World Wid€ Web Consortium I!NJQ, die für Defini
tion 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-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>. , , 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.
1IhIweIs: Damit Sie beim lernen von HTMl keine nassen Füße bekommen, gibt es eine Reihe von kos tenlosen Onlineanleitungen. Die umfassendste deutschsprachige Seite ist wohl http./lde.selfhtml.orglvon
Stefan Münz. Für leute, die des Englischen mächtig sind, gibt es außerdem HTMl Dog (www.html dog.comjguidesjhtmfbeginnerf) und W3Schools (www.w3schoofs.comjhrmff). Wenn Sie gedruckte Setten bevorzugen, empfehlen wir Ihnen Websites erstellen: Missing Manual oder HTML mit C55 & XHTML von Kopf bis Fuß (beide O'Reilly Verlag).
HTML: Das Grundgerüst HTML (Hypertext Markup Language) verwendet eine Reihe einfacher Anweisun gen.
Tags genannt, um die verschiedenen Teile einer Webseite zu strukturieren. Der
folgende HTML-Code erzeugt eine (sehr) einfache Webseite:
Hallo, ich bin der Titel dieser Webseite. Moin, und ich bin etwas Text im Körper (Body) der Seite.
