Einführung in XHTML CSS und Webdesign - Standardkonforme, moderne und barrierefreie Websites erstellen

Inhalt

Vorwort

Danksagung

1 Einleitung

1.1 Über dieses Buch

1.1.1 Entstehung

1.1.2 Aufbau

1.1.3 Die Kochbar

1.1.4 Fehlermeldungen und Verbesserungsvorschläge

1.1.5 Koautoren

1.1.6 Vorveröffentlichungen

1.2 Weiterbildung, Diskussionen und Problemlösungen

2 Grundlagen

2.1 Begrifflichkeiten: Website, Webseite, Homepage

2.2 Textauszeichnung: Die erste Komponente des Webs

2.2.1 Dokumente

2.2.2 Strukturorientiert schreiben

2.2.3 Standards: SGML und XML

2.2.4 Zusammenfassung

2.3 Hypertext: Die zweite Komponente des Webs

2.3.1 Eine kurze Geschichte des Hypertexts

2.4 Das World Wide Web

2.4.1 Gewirr, Verknüpfungen und Netze

2.4.2 Das World Wide Web Consortium

2.5 Technische Fundamente des World Wide Webs

2.5.1 URI

2.5.2 HTTP

2.5.3 MIME-Typen

2.6 Sprachen des World Wide Webs

2.6.1 HTML

2.6.2 XHTML

2.6.3 Warum sollten Webautoren heute auf XHTML setzen?

2.6.4 CSS

2.6.5 Spezifikationen, Empfehlungen und Arbeitsentwürfe

2.7 Browser

2.7.1 Die Entwicklung bis zum ersten Browserkrieg

2.7.2 Browseralternativen

2.7.3 Browsertests

2.7.4 Bezugsquellen und Testumgebungen

2.8 Barrierefreiheit

2.8.1 Warum dies auch eine Einführung in barrierefreies Webdesign geworden ist

2.8.2 Welche Arten von Behinderungen müssen Sie berücksichtigen?

2.8.3 Verordnungen und Richtlinien

2.9 Zeichenkodierung

2.9.1 00101010 - Am Anfang waren null und eins

2.9.2 Von Bits und Bytes, dezimal und hexadezimal

2.9.3 Begrifflichkeiten

2.9.4 Zeichenkodierungen

2.9.5 Das Problem mit Zeichenkodierungen

2.9.6 Zeichendarstellung

2.9.7 Zeicheneingabe

2.9.8 Die Wahl der »richtigen« Zeichenkodierung

3 Hilfsmittel

3.1 Editoren

3.1.1 WYSIWYG-Programme

3.1.2 Texteditoren

3.1.3 Fazit

3.2 Validatoren

3.2.1 Natürliche und formale Sprachen

3.2.2 Syntaktische Fehler und proprietäre Erweiterungen

3.2.3 Gültigkeit und Wohlgeformtheit

3.2.4 W3C Markup Validation Service

3.2.5 Schema-Validator

3.2.6 CSS-Validator

3.3 Bildbearbeitung

3.3.1 Rastergrafiken

3.3.2 Vektorgrafiken

3.4 Nützliche Werkzeuge

3.4.1 Tidy

3.4.2 FTP

3.4.3 Xenu’s Link Sleuth

3.5 Browsererweiterungen

3.5.1 Web Developer Toolbar

3.5.2 Html Validator (based on Tidy)

3.5.3 Fangs

3.5.4 IE Tab

3.5.5 MeasureIt

3.5.6 LinkChecker

3.5.7 Right-Click Lynx viewer

4 Einführung in XHTML

4.1 Syntax und Vokabular

4.1.1 Elementtypen, Elemente, Tags, Elementinhalte

4.1.2 Attribute

4.1.3 Kommentare

4.1.4 Zeichenreferenzen

4.2 Die globale Struktur eines XHTML-Dokuments

4.2.1 Die XML-Deklaration

4.2.2 Die Dokumenttyp-Deklaration

4.2.3 Wurzelelement: Der Elementtyp html

4.2.4 Dokumentkopf: Der Elementtyp head

4.2.5 Dokumentrumpf: Der Elementtyp body

4.2.6 Kochbar: XHTML-Grundgerüst

4.3 Das Document Object Model

4.4 Kompatibilitätsrichtlinien

4.5 Metaangaben: Der Elementtyp meta

4.5.1 Metaangaben und Suchmaschinen

4.5.2 Kochbar: Metaangaben

4.6 Universalattribute

4.6.1 Element-Identifikatoren: Die Attribute id und class

4.6.2 Angabe der natürlichen Sprache: Die Attribute lang und xml:lang

4.6.3 Inzeilige Formatierung: Das Attribut style

4.6.4 Kommentierende Informationen: Das Attribut title

5 Auszeichnung der Inhalte

5.1 Überschriften und Absätze

5.1.1 Überschriften: Die Elementtypen h1, h2, h3, h4, h5 und h6

5.1.2 Absätze: Der Elementtyp p

5.1.3 Zeilenumbrüche: Der Elementtyp br

5.1.4 Kochbar: Erste Inhalte

5.2 Links und Anker

5.2.1 Anker: Der Elementtyp a

5.2.2 Dokumentbeziehungen: Der Elementtyp link

5.2.3 Kochbar: Hinzufügen von Links

5.3 Bilder

5.3.1 Grafiken einbinden: Der Elementtyp img

5.3.2 Kochbar: Inhaltsgrafiken

5.4 Objekte

5.4.1 Objekte einbetten: Der Elementtyp object

5.5 Auszeichnung im Text

5.5.1 Logische Textauszeichnung: Die Elementtypen em, strong, dfn, code, samp, kbd und var

5.5.2 Kennzeichnen von Dokumentänderungen: Die Elementtypen del und ins

5.5.3 Abkürzungen und Akronyme: Die Elementtypen abbr und acronym

5.5.4 Physische Textauszeichnung: Die Elementtypen i, b, tt, big und small

5.6 Listen

5.6.1 Ungeordnete Listen: Die Elementtypen ul und li

5.6.2 Geordnete Listen: Die Elementtypen ol und li

5.6.3 Definitionslisten: Die Elementtypen dl, dt und dd

5.6.4 Kochbar: Auszeichnung von Navigationslisten

5.6.5 Kochbar: Rezept des Tages

5.7 Tabellen

5.7.1 Tabellen, Zeilen, Kopf- und Datenzellen: Die Elementtypen table, tr, th und td

5.7.2 Tabellenüberschrift, Zusammenfassung und Abkürzungen: Der Elementtyp caption und die Attribute summary und abbr

5.7.3 Zeilengruppen: Die Elementtypen thead, tfoot und tbody

5.7.4 Spaltengruppen: Die Elementtypen colgroup und col

5.7.5 Zellen miteinander verbinden: Die Attribute colspan und rowspan

5.7.6 Kochbar: Öffnungszeiten

5.8 Zitate

5.8.1 Inzeilige Zitate: Der Elementtyp q

5.8.2 Zitatblöcke: Der Elementtyp blockquote

5.8.3 Referenz auf die Quelle eines Zitats: Der Elementtyp und das Attribut cite

5.9 Struktur und Gruppierung

5.9.1 Gruppierung: Die Elementtypen div und span

5.9.2 Kochbar: Feinstrukturierung

5.10 Formulare

5.10.1 Formularcontainer: Der Elementtyp form

5.10.2 Steuerelemente

5.10.3 Beschriftungen: Der Elementtyp label

5.10.4 Struktur: Die Elementtypen fieldset und legend

5.10.5 Kochbar: Kontaktformular

5.10.6 Kochbar: Qualitätssicherung des Markups

5.11 Weitere Elemente

5.11.1 Kontaktinformationen: Der Elementtyp address

5.11.2 Präformatierter Text: Der Elementtyp pre

5.11.3 Programmcode eines Scripts: Die Elementtypen script und noscript

6 Einführung in CSS

6.1 Design und Styling

6.1.1 Design

6.1.2 Styling

6.1.3 Design und Styling in der Webentwicklung

6.2 Entwurfskonzepte und Vorteile

6.3 Einbindung von CSS in ein XHTML-Dokument

6.3.1 Einbindung per style-Attribut

6.3.2 Einbindung per style-Element

6.3.3 Einbindung per link-Element

6.3.4 Ausgabemedien

6.4 CSS: Syntax und Vokabular

6.4.1 Regeln

6.4.2 Maskierung

6.4.3 Kommentare

6.4.4 At-Regeln

6.5 Selektoren

6.5.1 Universalselektor

6.5.2 Typselektor

6.5.3 Klassen- und ID-Selektor

6.5.4 Attributselektoren

6.5.5 Pseudoklassen

6.5.6 Namensraumselektor

6.5.7 Pseudoelemente

6.5.8 Kombinatoren

6.6 Vererbung und Initialwerte

6.7 Die Kaskade

6.7.1 Reihenfolge

6.8 Browserkompatibilität

6.8.1 Browserunterstützung

6.8.2 Doctype Switching

6.8.3 CSS-Filter

7 Eigenschaften und Werte

7.1 Werte

7.1.1 <Farbe>

7.1.2 <Integer>

7.1.3 <Zahl>

7.1.4 <Länge>

7.1.5 <Prozent>

7.1.6 <URI>

7.1.7 <Zeichenkette>

7.1.8 <inherit>

7.2 Farben und Hintergründe

7.2.1 Vordergrundfarbe: Die Eigenschaft color

7.2.2 Hintergrundfarbe: Die Eigenschaft background-color

7.2.3 Hintergrundbild: Die Eigenschaft background-image

7.2.4 Wiederholung eines Hintergrundbilds: Die Eigenschaft background-repeat

7.2.5 Scrolleigenschaft eines Hintergrundbilds: Die Eigenschaft background-attachment

7.2.6 Position eines Hintergrundbilds: Die Eigenschaft background-position

7.2.7 Hintergrund: Die zusammenfassende Eigenschaft background

7.2.8 Kochbar: Genereller Aufbau des Stylesheets

7.2.9 Kochbar: Farben und Hintergründe

7.3 Schrift

7.3.1 Schriftfamilie: Die Eigenschaft font-family

7.3.2 Schriftstil: Die Eigenschaft font-style

7.3.3 Schriftvariante: Die Eigenschaft font-variant

7.3.4 Schriftgewichtung: Die Eigenschaft font-weight

7.3.5 Schriftgröße: Die Eigenschaft font-size

7.3.6 Schrift: Die zusammenfassende Eigenschaft font

7.3.7 Kochbar: Schriftdeklarationen

7.4 Text

7.4.1 Texteinzug: Die Eigenschaft text-indent

7.4.2 Horizontale Ausrichtung: Die Eigenschaft text-align

7.4.3 Ausschmückung: Die Eigenschaft text-decoration

7.4.4 Laufweite: Die Eigenschaft letter-spacing

7.4.5 Wortabstände: Die Eigenschaft word-spacing

7.4.6 Groß- und Kleinschreibung: Die Eigenschaft text- transform

7.4.7 Behandlung von Leerraum: Die Eigenschaft white-space

7.4.8 Kochbar: Textdeklarationen

7.5 Das CSS-Boxmodell

7.5.1 Polsterung, Rahmen und Randabstand

7.5.2 Boxtypen

7.5.3 Polsterung: Die Eigenschaft padding

7.5.4 Rahmenstil: Die zusammenfassende Eigenschaft border-style

7.5.5 Rahmenbreite: Die Eigenschaft border-width

7.5.6 Rahmenfarbe: Die zusammenfassende Eigenschaft border-color

7.5.7 Rahmen: Die zusammenfassende Eigenschaft border

7.5.8 Randabstand: Die Eigenschaft margin

7.5.9 Boxtyp eines Elements: Die Eigenschaft display

7.5.10 Kochbar: Innere und äußere Abstände sowie Rahmen

7.6 Ausrichtung und Elementfluss

7.6.1 Vertikale Ausrichtung: Die Eigenschaft vertical-align

7.6.2 Floatierte Boxen: Die Eigenschaft float

7.6.3 Steuerung des Elementflusses um floatierte Boxen: Die Eigenschaft clear

7.6.4 YAML

7.6.5 Kochbar: Vertikale Ausrichtung

7.7 Positionierung

7.7.1 Positionierung: Die Eigenschaft position

7.7.2 Boxabstände: Die Eigenschaften top, right, bottom und left

7.7.3 Angabe der Ebene: Die Eigenschaft z-index

7.7.4 Kochbar: Unsichtbare Inhalte

7.8 Breite und Höhe

7.8.1 Contentbreite: Die Eigenschaft width

7.8.2 Mindestbreite: Die Eigenschaft min-width

7.8.3 Maximalbreite: Die Eigenschaft max-width

7.8.4 Contenthöhe: Die Eigenschaft height

7.8.5 Mindesthöhe: Die Eigenschaft min-height

7.8.6 Maximalhöhe: Die Eigenschaft max-height

7.8.7 Der Boxmodell-Bug

7.8.8 Höhe der Zeilenbox: Die Eigenschaft line-height

7.8.9 Kochbar: Realisierung des Seitenlayouts

7.9 Sichtbarkeit und visuelle Effekte

7.9.1 Sichtbarkeit: Die Eigenschaft visibility

7.9.2 Überlauf: Die Eigenschaft overflow

7.9.3 Abschneiden: Die Eigenschaft clip

7.9.4 Deckkraft: Die Eigenschaft opacity

7.9.5 Mauszeiger: Die Eigenschaft cursor

7.10 Gestaltung von Listen

7.10.1 Stil der Listenelementmarkierung: Die Eigenschaft list-style-type

7.10.2 Grafiken als Listenelementmarkierung: Die Eigenschaft list-style-image

7.10.3 Position der Listenelementmarkierung: Die Eigenschaft list-style-position

7.10.4 Listenelementmarkierungen: Die zusammenfassende Eigenschaft list-style

7.10.5 Kochbar: Gestaltung der Listen

7.11 Das CSS-Tabellenmodell

7.11.1 Virtuelle Tabellenschichten und Transparenz

7.11.2 Algorithmen für die Tabellenbreite: Die Eigenschaft table-layout

7.11.3 Algorithmus für die Tabellenhöhe

7.11.4 Rahmenmodell: Die Eigenschaft border-collapse

7.11.5 Rahmenabstand: Die Eigenschaft border-spacing

7.11.6 Rahmen um leere Zellen: Die Eigenschaft empty-cells

7.11.7 Ausrichtung von Tabellenüberschriften: Die Eigenschaft caption-side

7.11.8 Kochbar: Öffnungszeiten

7.11.9 Kochbar: Qualitätssicherung des Stylesheets

7.12 Generierter Content

7.12.1 Generierter Inhalt: Die Eigenschaft content

7.12.2 Zähler: Die Eigenschaften counter-increment und counter-reset

8 Anhang

8.1 Glossar

8.2 Literaturverzeichnis

Index

!

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z