XHTML und CSS

Dieses Buch führt Sie in die Welt von XHTML (eXtensible Hypertext Markup Language) und CSS (Cascading StyleSheets) ein und steht am Anfang einer ganzen Reihe an Standards im Bereich Web-Technologien. XHTML ist die Grammatik, die für Web-Anwendungen die Ausgaben im Browser darstellt, während mit CSS Formatierung und Layout im Internet möglich ist. XHTML ist dabei auch ein Beispiel von einer XML-Grammatik (eXtensible Markup Language). Die Möglichkeiten, die XML für Datenaustausch und Datenspeicherung bietet, sind keinesfalls zu unterschätzen, sondern sind für Web-Anwendungen ein wesentlicher Baustein. Mehr über XML-Standards und über die Document Type Definition, die für die Beschreibung von XML-Daten und damit auch für XHTML zum Einsatz kommt, erfahren Sie in unserem Buch „XML: Standards und Technologien“ (ISBN 978-3-939701-21-7). CSS ist ein seit längerer Zeit bekannter Standard für die Formatierung von HTML und XHTML, doch die Namen von Eigenschaften aus CSS, mit denen Formatierung und Layout von Dokumenten möglich sind, tauchen auch bspw. wiederum im Standard FO (Formatting Objects) auf.

XHTML ist ein wichtiges Ausgabeformat, wenn Daten, die in XML-Formaten vorliegen, im Browser ausgegeben werden sollen, d.h. in irgendeiner Art und Weise visualisiert werden sollen. Dazu kann man eine ganze Reihe von Standards einsetzen, doch der Standard XSLT (eXtensible Stylesheet Language for Transformations) ist hier besonders interessant, da die resultierenden Dateien mit den Ausgabe- bzw. Umwandlungsanweisungen wiederum in einem XML-Format vorliegen und aus allen Programmiersprachen heraus mit einem geeigneten Prozessor aufgerufen werden können. Auch Dokumenten im FO-Format werden im Normalfall über eine XSLT-Umwandlung erzeugt und dann zu einem weiteren Prozessor geschickt, der dann die gewünschten Druckdateien erstellt. Diese Technologie wird Ihnen im Buch „XSLT, XPath und Xquery“ (ISBN 978-3-939701-18-7) näher gebracht.

An dieser Stelle ist nur wichtig zu verstehen, dass XHTML in eine große Familie an Standards eingebettet ist und für viele andere eine ganz andere Bedeutung besitzt. Ein Redakteur erfasst seine Texte vielleicht in einem beliebigen XML-Format, wozu eine ganze Armada an verschiedenen Programmen zur Verfügung steht, wobei die Dateien dann vielleicht sogar in einer Datenbank gespeichert werden. Die Anzeige erfolgt dann bspw. sowohl in XHTML wie auch in PDF, wobei solche Umwandlungstechniken wie XSLT oder zum Einsatz kommen. Die Visualisierung der Daten im Browser wird dann zusätzlich durch CSS eingerichtet. Ein Programmierer erstellt dagegen nicht die Texte, sondern konzentriert sich auf die Erstellung von Import/Export-Vorgängen für die Aufnahme, Suche und Wiedergabe von gespeicherten Texten in XML-Formaten oder auch direkt XHTML. Für ihn ist XHTML ein Zielformat, für das er Software schreibt und für das er CSS, das von einem Designer erstellt wurde, zusätzlich im Ausgabedatenstrom aufruft. Ein Designer schließlich erstellt CSS und möglicherweise auch Umwandlungen für FO in einem grafischen Editor und versucht, Online- und Druck-Ausgabe möglichst ähnlich zu erzeugen, wobei die Ähnlichkeiten zwischen beiden den Standards XHTML und FO sowie CSS und FO besonders arbeitserleichternd ist.

Dieses Buch vermittelt Ihnen eine ausführliche Einführung über die beiden Standards XHTML und CSS mit vielen Beispielen. Eine allgemeine Vorstellung von XML und der Document Type Definition soll es Ihnen ermöglichen, insbesondere den XHTML-Standard besser einzuschätzen und die Dokumente, in denen er beschrieben ist, zu verstehen und in Zweifelsfällen direkt im Regeldokument nachzuschlagen. Danach stellen wir den XHTML-Standard, wobei es hier um die reine Erfassung von Texten und logische Formatierung in Blöcken, Tabellen und Listen geht. Sämtliche Formatierung und Layout ist dann den umfangreicheren Kapiteln zu CSS vorbehalten.

Für dieses Buch benötigen Sie grundsätzlich keine Vorkenntnisse, was den Themenkreis XHTML und CSS anbetrifft. Sie sollten sich im Internet bewegen, was aber bei Interesse an einem solchen Buch wohl sehr wahrscheinlich ist. Ihre Aufgabenstellung kann sehr unterschiedlich sein, wobei aber sicherlich vorausgesetzt werden kann, dass sie in irgendeiner Art und Weise mit XHTML umgehen sollen. Vielleicht sollen Sie direkt Texte in XHTML erfassen und später mit CSS formatieren. Vielleicht sollen Sie aber auch vorhandene Daten, die in anderen Textdateien oder einer Datenbank speichern, in XHTML umwandeln, um sie dann mit CSS auf-/zubereiten und benötigen dazu Kenntnisse beider Standards. Eine sichere Grundlage beider Standards erleichtert die Erstellung von reinen Dokumenten wie auch von sehr grafikorientierten Webseiten sehr, da sich dann auch die Zusammenhänge zwischen verschiedenen anderen Techniken im Umfeld der Erstellung von Online-Dokumenten erschließt.
Das erste Kapitel stellt als Einstiegskapitel die XML-Technologie dar und beschreibt kurz Vorteile von XML, um dann XHTML als Beispiel eines XML-Standards vorzustellen. Zur Verständnis des XHTML-Standards sind Grundkenntnisse der Document Type Definition (DTD) notwendig, mit denen der XHTML-Standard beschrieben wird. Also geht dieses Kapitel auch auf diesen zweiten Standard ein.
Das zweite Kapitel stellt das Grundgerüst vor, aus dem XHTML-Dokumente bestehen. Als Elemente treten hier html, body und head hervor, welche die gesamte XHTML-Datei, den sichtbaren Datenbereich und die vom Browser und Suchmaschinen verarbeiteten Kopfdatenbereich enthalten.
Das dritte Kapitel taucht tiefer in die Kind-Elemente des body-Elements ein. Hier werden die Elemente vorgestellt, mit denen im XHTML-Dokument Absätze und Überschriften sowie weitere Textteile ausgezeichnet werden können. Ein theoretischer Abschnitt geht auf die Bedeutung der logischen Formatierung ein, die XHTML zu Grunde liegt, während CSS die physische Formatierung überlassen bleibt. Einige eher selten gebrauchte Elemente runden dann dieses Kapitel ab.
Das vierte Kapitel präsentiert ausführlich die verschiedenen wichtigen Block-Elemente für Listen. Listen erscheinen in drei verschiedenen Varianten, nämlich nummeriert, nicht nummeriert und als so genannte Definitionslisten. Beispiele für die verschiedenen Typen zeigen die Unterschiede.
Das fünfte Kapitel lenkt den Fokus auf tabellarische Darstellungen von Informationen. Hier kann man nicht direkt zwischen verschiedenen Typen unterscheiden, sondern eher die Komplexität der Konstruktion als Vergleichsmerkmal nehmen. Tabellen haben also unterschiedlich komplexe Konstruktionen, d.h. auch verschiedene Elemente, die sie enthalten, was sich aber erst bei einer Formatierung mit CSS wieder bei der Darstellung auswirkt.
Das sechste Kapitel stellt die Elemente vor, mit denen in dynamischen Anwendungen Formulare erstellt werden können. Aus Sicht eines Designers sind sie interessant, da die Gestaltung von optisch ansprechenden Formularen in ihr Gebiet fällt. Die Verarbeitung erfolgt dann allerdings auf dem Server, was nicht Teil des Buchs ist, da hier unterschiedliche Programmiersprachen zum Einsatz kommen können. Dieses Kapitel konzentriert sich dann stattdessen darauf, die variantenreichen Elemente für Eingabefelder, Optionsfelder, Kontrollkästchen oder Auswahllisten darzustellen.
Das siebte Kapitel geht auf die verschiedenen so genannten Meta-Elemente ein, die für Suchmaschinen benutzt werden, um weitere Inhalte wie Beschreibungen oder Schlüsselwörter unterzubringen. Sie werden auch nicht auf der Webseite angezeigt, aber insbesondere von Suchmaschinen verarbeitet.

Das achte Kapitel betritt dann die Hemisphäre von CSS. Hier lernen Sie zunächst die Definition von CSS und die verschiedenen Varianten von CSS kennen. Man kann Formatvorlagen dazu verwenden, um global bestimmte XHTML-Elemente immer in einem bestimmten Format darzustellen. Man kann aber auch selbst benannte Formatvorlagen (Klassen) erstellen, die dann im Dokument einzelnen Elementen zugewiesen werden können. Komplexe Formatierungsregeln, welche die Struktur von XHTML-Dokumenten oder Werte von Attributen, Sprachangaben oder Schlüsselwerten von Elementen berücksichtigen, sind ebenfalls denkbar. In diesem Kapitel werden die sehr unterschiedlichen Selektor-Typen kurz vorgestellt und verglichen.
Das neunte Kapitel wendet die Formatierungsregeln von CSS auf die Schriftgestaltung an, d.h. auf die Darstellung von Absätzen, Überschriften und ausgewählten Textstellen innerhalb von anderen Block-Elementen. Dabei geht es um solche klassischen Formatierungen wie Schriftart, -größe und –farbe.
Das zehnte Kapitel führt das so genannte Boxmodell von CSS ein. Es besteht aus ineinander geschachtelten Boxen für den Inhalt, die Auffüllung, den Rahmen und den Abstand nach außen. Sie können sowohl bei der Formatierung von Tabellen wie auch bei allen anderen Block-Elementen individuell in jeder Himmelsrichtung definiert werden und bilden das Rückgrat für die Layout-Gestaltung.
Das elfte Kapitel greift noch einmal die beiden wichigen Gruppen für Block-Elemente auf, mit denen Tabellen und Listen erzeugt werden können. Es gibt hier eine Auswahl an CSS-Eigenschaften, die für die Formatierug von Bedeutung sind, um Einrückungen, Abstände und Rahmen sowie Listenarten festzulegen. Diese werden in einzelnen Beispielen im Zusammenhang alle in diesem Kapitel gezeigt. Dies schließt auch die umfangreiche Thematik des Layouts ein: Mit CSS können absolute und relative Positionen für Blöcke festgelegt werden, was für das vollständige Design bzw. das Layout einer Webseite nützlich ist, um die Seitenaufteilung zentral in einer Formatierungsdatei zu sammeln und bei Bedarf zu ändern.
Das zwölfte Kapitel schließlich zeigt CSS-Eigenschaften, die für die Gestaltung von visuellen Effekten verwendet werden. Bspw. ist es möglich, Gliederungen zu erstellen, was über die reine Formatierung von Listen deutlich hinausgeht. Auch ist es möglich, zusätzliche Inhalte dynamisch auszugeben, um strukturierende oder beschreibende Informationen zu veröffentlichen. In Kombination mit der Positionierung entlang der z-Achse und Berücksichtigung der Sichtbarkeit und Interaktivität ist es sogar möglich, Klappmenüs sowie dynamische Effekte zu realisieren. In diesem Kapitel finden Sie Beispiele, die auch wie Kochrezepte gesehen werden können und die Sie sofort im Projekt als Vorlage einsetzen können.
Das dreizehnte Kapitel gibt einen Ausblick auf die kommende dritte Version von CSS. Es stellt die Veränderungen gegenüber der aktuellen zweiten Version dar und zeigt auch, wie in den verschiedenen gängigen Browsern bereits Vorgaben aus CSS 3 umgesetzt werden können.

Vorwort

1 XML-Einführung und DTD
1.1 XML und XHTML
1.1.1 Auszeichnungssprache
1.1.2 Wohlgeformtheit
1.1.3 Besondere XML-Bereiche
1.1.4 Entitäten
1.2 Datenmodelle und DTD
1.2.1 Versionen
1.2.2 Elemente, Attribute
1.2.3 Komplexe Inhaltsmodelle
1.2.4 Schlüssel- und Schlüsselverweise
1.2.5 Entitäten
1.3 Web-/XHTML-Programme
1.3.1 Hilfreiche Links

2 Einfache XHTML-Dokumente
2.1 Standardseite
2.1.1 Grundgerüst (Prolog, head, body)
2.1.2 Kommentare (XHTML-Kommentar, title)
2.1.3 Entitäten
2.2 Absätze und Überschriften (h1 bis h6, p und br)
2.2.1 Absätze
2.2.2 Überschriften
2.2.3 Beispiel
2.3 Verknüpfungen (Anker, Links zu Emails, Dateien, Ankern)
2.3.1 Anker und Links
2.3.2 E-Mail-Links
2.3.3 Datei-Verknüpfungen
2.4 Grafik und Multimedia
2.4.1 Bilder (img)
2.4.2 Objekte (object)
2.5 Sonstige Block-Elemente
2.5.1 Adresse (address)
2.5.2 Vorformatierte Texte (pre)
2.5.3 Skripte (script, noscript)

3 Textauszeichnung
3.1 Einführung
3.2 Logische Formatierung (em, strong, dfn, code, samp, kbd, var)
3.3 Änderungen (del, ins)
3.4 Abkürzungen und Akronyme (abbr, acronym)
3.5 Physische Formatierung (i, b, tt, big, small)
3.6 Zitate (q und blockquote)
3.7 Referenzen (cite als Attribut und Element)

4 Listen
4.1 Ungeordnete Liste (ul, li)
4.2 Geordnete Liste (ol, li)
4.3 Definitionslisten (dl, dt, dd)

5 Tabellen
5.1 Standardtabelle (table, tr, th, td)
5.2 Gruppen
5.2.1 Zeilengruppen (thead, tfoot, tbody)
5.2.2 Spaltengruppen (colgroup, col)
5.3 Weitere Tabelleneigenschaften (caption, Attribut summary)
5.4 Komplexe Tabellen (Attribute colspan, rowspan)

6 Formulare
6.1 Grundgerüst (form)
6.2 Eingabefelder (verschiedene Attribute)
6.3 Wertelisten
6.4 Kontrollkästchen/Optionsfelder
6.5 Upload-Button
6.6 Schaltflächen (Attribute submit, reset)

7 Metadaten und Suchmaschinenoptimierung
7.1 Metadaten
7.1.1 Logische Beziehungen
7.2 Suchmaschinenoptimierung

8 CSS-Grundlagen
8.1 Definition und Einführung
8.1.1 Definition
8.1.2 Einsatzbereich
8.1.3 Unterstützung
8.1.4 Spezifikation

8.2 CSS-Typen
8.2.1 Inzeilen-CSS (style-Attribut in HTML)
8.2.2 Interne CSS (style-Element in HTML)
8.2.3 Externe CSS (link-Element)
8.2.4 Aufrufe (id, class, lang/xml:lang, style)8.3 Selektoren und ihre Varianten
8.3.1 Typologie
8.3.2 Selektoren im Beispiel
8.3.3 Links

9 Schriftformatierung
9.1 Schrift-Formatierung
9.1.1 Schriftart (font-family)
9.1.2 Größe (font-size)
9.1.3 Stil (font-style)
9.1.4 Sonstige Einstellungen (fett, unterstrichen, etc.)
9.2 Schrift- und Textdarstellung
9.2.1 Texteinzug (text-indent)
9.2.2 Horizontale und vertikale Ausrichtung (text-align, vertical-align)
9.2.3 Abstand
9.2.4 Groß-/Kleinschreibung (text-transform)
9.2.5 Leerraum (white-space)
9.3 Schrift-Formatierung für Links

10 Blockformatierung
10.1 CSS-Boxmodell
10.1.1 Einführung in das Boxmodell
10.1.2 Rahmen (border) und Rahmeneigenschaften
10.1.3 Auffüllung (padding)
10.1.4 leerRandabstand (margin)
10.1.5 Darstellung (display)
10.2 Breite und Höhe
10.2.1 Breite (width, min-/max-width)
10.2.2 Höhe (height, min-/max-width)
10.2.3 Zeilenhöhe (line-height)
10.3 Positionierung
10.3.1 Positionierung (position)
10.3.2 Abstände (top, right, bottom, left)
10.3.3 Ebene (z-index)
10.3.4 Elementfluss (float)
10.4 Runde Ecken
10.5 Einblenden von Elementen

11 Tabellen und Listen
11.1 Tabellen
11.1.1 Standardformatierung
11.1.2 caption-side
11.1.3 table-layout
11.1.4 border-collapse
11.1.5 border-spacing
11.1.6 empty-cells
11.2 Listen
11.2.1 List-style
11.2.2 List-style-position
11.2.3 List-style-type
11.2.4 Navigationsleisten mit Listen
11.2.5 Bildergalerien
12 Visuelle Effekte
12.1 Generierter Inhalt
12.1.1 Inhalt einfügen (content und Pseudo Elemente:after/:before)
12.1.2 Anführungszeichen
12.1.3 Gliederungen
12.2 Sichtbarkeit
12.2.1 Vollständige Sichtbarkeit (visibility)
12.2.2 Teilweise Sichtbarkeit mit Überlauf (overflow) und Abschneiden (clip)

13 CSS 3-Ausblick
13.1 Ein Blick in die Zukunft
13.1.1 Das neue Boxmodell
13.1.2 Mehr Hintergrundbilder
13.1.3 Durchblick dank Transparenz
13.1.4 Runde Ecken für alle
13.1.5 Neue Fenster und Tab
13.1.6 Größere Auswahl mit neuen Selektoren
13.1.7 Rechnen leicht gemacht
13.1.8 Spalten vom Feinsten
13.2 Was bisher geschah
13.2.1 Rahmen
13.2.2 Hintergrundbilder
13.2.3 Bilder
13.2.4 Farben
13.2.5 Textformatierung
13.2.6 Spalten
13.3 Die Zukunft der Zukunft