Inhalt. 1 Einleitung Grundlagen... 25

Transkript

1

2 1 Einleitung Vorwort Über dieses Buch Entstehung Aufbau Fehlermeldungen und Verbesserungsvorschläge Koautoren Vorveröffentlichungen Weiterbildung, Diskussionen und Problemlösungen Danksagung Grundlagen Begrifflichkeiten: Website, Webseite, Homepage Textauszeichnung: Die erste Komponente des Webs Dokumente Strukturorientiert schreiben Standards: SGML und XML Zusammenfassung Hypertext: Die zweite Komponente des Webs Eine kurze Geschichte des Hypertexts Das World Wide Web Gewirr, Verknüpfungen und Netze Das World Wide Web Consortium Technische Fundamente des World Wide Webs URI HTTP MIME-Typen Sprachen des World Wide Webs HTML XHTML Warum sollten Webautoren heute auf XHTML setzen? Ausblick: XHTML 2.0, (X)HTML CSS Spezifikationen, Empfehlungen und Arbeitsentwürfe Browser Die Entwicklung bis zum Browserkrieg Browserkrieg Windows Internet Explorer Firefox Opera Konqueror Safari

3 2.7.8 Lynx Browsertests Bezugsquellen und Testumgebungen Webstandards Was ist ein Standard? Der Sinn von Standards Die Realität der Browserhersteller Die Realität der Standards Standards sind mehr als nur pure Regeln Was also sind Webstandards? Barrierefreiheit Warum dies auch eine Einführung in barrierefreies Webdesign ist Welche Arten von Behinderungen müssen Sie berücksichtigen? Verordnungen und Richtlinien Zeichenkodierung Am Anfang waren null und eins Von Bits und Bytes, dezimal und hexadezimal Begrifflichkeiten Zeichenkodierungen Das Problem mit Zeichenkodierungen Zeichendarstellung Zeicheneingabe Die Wahl der»richtigen«zeichenkodierung Typografie Leerzeichen und Festabstände Waagerechte Striche Anführungszeichen, Apostroph und falsche Freunde Punkte Zahlen, Einheiten und Währungszeichen Mathematische Symbole und Formeln Pfeile Hilfsmittel Editoren WYSIWYG-Programme Texteditoren Fazit Validatoren Natürliche und formale Sprachen Syntaktische Fehler und proprietäre Erweiterungen Gültigkeit und Wohlgeformtheit W3C Markup Validation Service Schema-Validator Grenzen CSS-Validator Bildbearbeitung Rastergrafiken Vektorgrafiken

4 3.4 Nützliche Werkzeuge Tidy FTP Xenu s Link Sleuth Color Cop Browsererweiterungen Firebug Web Developer Toolbar Html Validator (based on Tidy) Fangs MeasureIt LinkChecker Right-Click Lynx viewer WAVE-Toolbar Einführung in XHTML Syntax und Vokabular Elementtypen, Elemente, Tags, Elementinhalte Attribute Kommentare Zeichenreferenzen Die globale Struktur eines XHTML-Dokuments Die XML-Deklaration Die Dokumenttyp-Deklaration Wurzelelement: Der Elementtyp html Dokumentkopf: Der Elementtyp head Dokumentrumpf: Der Elementtyp body Hallo-Welt-Beispiel Das Document Object Model Kompatibilitätsrichtlinien Metaangaben: Der Elementtyp meta Metaangaben und Suchmaschinen Universalattribute Element-Identifikatoren: Die Attribute id und class Angabe der natürlichen Sprache: Die Attribute lang und xml:lang Inzeilige Formatierung: Das Attribut style Kommentierende Informationen: Das Attribut title Auszeichnung der Inhalte Überschriften und Absätze Überschriften: Die Elementtypen h1, h2, h3, h4, h5 und h Absätze: Der Elementtyp p Zeilenumbrüche: Der Elementtyp br Links und Anker Anker: Der Elementtyp a Dokumentbeziehungen: Der Elementtyp link

5 5.3 Bilder Grafiken einbinden: Der Elementtyp img Objekte Objekte einbetten: Der Elementtyp object Auszeichnung im Text Logische Textauszeichnung: Die Elementtypen em, strong, dfn, code, samp, kbd und var Kennzeichnen von Dokumentänderungen: Die Elementtypen del und ins Abkürzungen und Akronyme: Die Elementtypen abbr und acronym Physische Textauszeichnung: Die Elementtypen i, b, tt, big und small Listen Ungeordnete Listen: Die Elementtypen ul und li Geordnete Listen: Die Elementtypen ol und li Definitionslisten: Die Elementtypen dl, dt und dd Tabellen Tabellen, Zeilen, Kopf- und Datenzellen: Die Elementtypen table, tr, th und td Tabellenüberschrift, Zusammenfassung und Abkürzungen: Der Elementtyp caption und die Attribute summary und abbr Zeilengruppen: Die Elementtypen thead, tfoot und tbody Spaltengruppen: Die Elementtypen colgroup und col Zellen miteinander verbinden: Die Attribute colspan und rowspan Zitate Inzeilige Zitate: Der Elementtyp q Zitatblöcke: Der Elementtyp blockquote Referenz auf die Quelle eines Zitats: Der Elementtyp und das Attribut cite Struktur und Gruppierung Gruppierung: Die Elementtypen div und span Formulare Formularcontainer: Der Elementtyp form Steuerelemente Beschriftungen: Der Elementtyp label Struktur: Die Elementtypen fieldset und legend Weitere Elemente Kontaktinformationen: Der Elementtyp address Präformatierter Text: Der Elementtyp pre Programmcode eines Scripts: Die Elementtypen script und noscript Einführung in CSS Design und Styling Design Styling Design und Styling in der Webentwicklung Entwurfskonzepte und Vorteile Einbindung von CSS in ein XHTML-Dokument Einbindung per style-attribut Einbindung per style-element

6 6.3.3 Einbindung per link-element Ausgabemedien CSS: Syntax und Vokabular Regeln Maskierung Kommentare At-Regeln Selektoren Universalselektor Typselektor Klassen- und ID-Selektor Attributselektoren Pseudoklassen Pseudoelemente Kombinatoren Vererbung und Initialwerte Die Kaskade Reihenfolge Browserkompatibilität Browserunterstützung Doctype Switching Der Grund für viele IE-Bugs: haslayout CSS-Hacks für den Internet Explorer Eigenschaften und Werte Werte <Farbe> <Integer> <Zahl> <Länge> <Prozent> <URI> <Zeichenkette> <inherit> Farben und Hintergründe Vordergrundfarbe: Die Eigenschaft color Hintergrundfarbe: Die Eigenschaft background-color Hintergrundbild: Die Eigenschaft background-image Wiederholung eines Hintergrundbilds: Die Eigenschaft background-repeat Scrolleigenschaft eines Hintergrundbilds: Die Eigenschaft backgroundattachment Position eines Hintergrundbilds: Die Eigenschaft background-position Hintergrund: Die zusammenfassende Eigenschaft background Schrift Schriftfamilie: Die Eigenschaft font-family Schriftstil: Die Eigenschaft font-style Schriftvariante: Die Eigenschaft font-variant Schriftgewichtung: Die Eigenschaft font-weight

7 7.3.5 Schriftgröße: Die Eigenschaft font-size Schrift: Die zusammenfassende Eigenschaft font Text Texteinzug: Die Eigenschaft text-indent Horizontale Ausrichtung: Die Eigenschaft text-align Ausschmückung: Die Eigenschaft text-decoration Laufweite: Die Eigenschaft letter-spacing Wortabstände: Die Eigenschaft word-spacing Groß- und Kleinschreibung: Die Eigenschaft text-transform Behandlung von Leerraum: Die Eigenschaft white-space Das CSS-Boxmodell Polsterung, Rahmen und Randabstand Boxtypen Polsterung: Die Eigenschaft padding Rahmenstil: Die zusammenfassende Eigenschaft border-style Rahmenbreite: Die Eigenschaft border-width Rahmenfarbe: Die zusammenfassende Eigenschaft border-color Rahmen: Die zusammenfassende Eigenschaft border Randabstand: Die Eigenschaft margin Boxtyp eines Elements: Die Eigenschaft display Ausrichtung und Elementfluss Vertikale Ausrichtung: Die Eigenschaft vertical-align Floatierte Boxen: Die Eigenschaft float Steuerung des Elementflusses um floatierte Boxen: Die Eigenschaft clear YAML Positionierung Positionierung: Die Eigenschaft position Boxabstände: Die Eigenschaften top, right, bottom und left Angabe der Ebene: Die Eigenschaft z-index Breite und Höhe Content-Breite: Die Eigenschaft width Mindestbreite: Die Eigenschaft min-width Maximalbreite: Die Eigenschaft max-width Content-Höhe: Die Eigenschaft height Mindesthöhe: Die Eigenschaft min-height Maximalhöhe: Die Eigenschaft max-height Der Boxmodell-Bug Höhe der Zeilenbox: Die Eigenschaft line-height Sichtbarkeit und visuelle Effekte Sichtbarkeit: Die Eigenschaft visibility Überlauf: Die Eigenschaft overflow Deckkraft: Die Eigenschaft opacity Mauszeiger: Die Eigenschaft cursor Gestaltung von Listen Stil der Listenelementmarkierung: Die Eigenschaft list-style-type Grafiken als Listenelementmarkierung: Die Eigenschaft list-style-image Position der Listenelementmarkierung: Die Eigenschaft list-style-position Listenelementmarkierungen: Die zusammenfassende Eigenschaft list-style

8 7.11 Das CSS-Tabellenmodell Virtuelle Tabellenschichten und Transparenz Algorithmen für die Tabellenbreite: Die Eigenschaft table-layout Algorithmus für die Tabellenhöhe Rahmenmodell: Die Eigenschaft border-collapse Rahmenabstand: Die Eigenschaft border-spacing Rahmen um leere Zellen: Die Eigenschaft empty-cells Ausrichtung von Tabellenüberschriften: Die Eigenschaft caption-side Generierter Content Generierter Inhalt: Die Eigenschaft content Zähler: Die Eigenschaften counter-increment und counter-reset Eine Beispielwebsite: Die Kochbar Einleitung Vorbereitung Schritt 1: XHTML-Grundgerüst Schritt 2: Logo Schritt 3: Hauptnavigation Schritt 4: Sidebar Schritt 5: Content und Fußzeile Schritt 6: Styling der Startseite Vorgehensweise und Coderichtlinien beim Schreiben eines Stylesheets Globale Einstellungen Schritt 7: Regeln für allgemeine Elemente Schritt 8: Styling des Kopfbereichs Schritt 9: Illustrationen Schritt 10: Sidebar Schritt 11: Content Schritt 12: Fußzeile Schritt 13: Über die Kochbar Schritt 14: Impressum Schritt 15: Speisekarte Schritt 16: Öffnungszeiten Schritt 17: Kontaktformular Schritt 18: Rezept des Tages Schritt 19: Browsertests und Bugfixes Das Ergebnis Anhang Glossar Literaturverzeichnis Index