Inhaltsverzeichnis

• Einleitung 1

• 

  Teil I - Workshop

  Schritt für Schritt zum professionellen HTML-CSS-Design

  • Kapitel 1: So geht der Workshop vor 6
  • Kapitel 2: Vorbereitungen 8
    • 2.1 Anlegen einer sinnvollen Ordnerstruktur 9
    • 2.2 Das brauchen Sie, um loslegen zu können 10
    • 2.3 Analyse des Layouts 11
  • Kapitel 3: Grundlayout aufbauen 18
    • 3.1 HTML-Grundgerüst anlegen 19
    • 3.2 HTML-Seitengerüst aufbauen 20
    • 3.3 CSS-Grundlayout aufsetzen 23
  • Kapitel 4: Grafiken einbinden 30
    • 4.1 Grafikdatei verlinken (src) 30
    • 4.2 Alternativtext einfügen (alt) 31
    • 4.3 Breite und Höhe (width und height) 32
    • 4.4 Das richtige Dateiformat 33
    • 4.5 Einbau der Grafiken in das Beispiellayout 35
  • Kapitel 5: Abstände einfügen und Elemente fließen lassen 36
    • 5.1 Innen- und Außenabstände 37
    • 5.2 Elemente fließen lassen (float) 41
    • 5.3 float-Verhalten auflösen 45
    • 5.4 Mindesthöhe für den Inhaltsbereich 48
  • Kapitel 6: Übergreifende Formate definieren 51
  • Kapitel 7: Seitenkopf und -fuß gestalten: Hintergrundgrafiken einbinden 56
  • Kapitel 8: Navigationselemente gestalten 62
    • 8.1 Hauptnavigation aufbauen 62
    • 8.2 Quernavigationen gestalten 66
    • 8.3 Funktionslinks gestalten 71
  • Kapitel 9: Seitentypen anlegen 73
  • Kapitel 10: Startseite aufbauen 75
    • 10.1 Bereiche für Teaser 75
    • 10.2 Textteaser aufbauen 81
    • 10.3 Teaser mit Bild 86
  • Kapitel 11: Inhalte aufbauen und gestalten 91
    • 11.1 Einfache Beitragsseite aufbauen 94
    • 11.2 Text-Bild-Bausteine unterschiedlich gestalten 97
    • 11.3 Video/Audio einbinden 102
  • Kapitel 12: Formulare gestalten 106
    • 12.1 Beispielseite aufbauen 106
    • 12.2 Login-Formular für die Startseite 116
    • 12.3 Schlechte CSS-Unterstützung von Formularelementen 120
  • Kapitel 13: Mit Listen im Inhalt arbeiten 122
  • Kapitel 14: Datentabellen gestalten 125
    • 14.1 Komplexe Tabellen 127
    • 14.2 Kinoprogramm-Tabelle Schritt für Schritt gestalten 128
  • Kapitel 15: Responsive Design: Mobile Endgeräte und Media Queries 133
  • Kapitel 16: Druckausgabe 138
  • Kapitel 17: Barrierefreiheit 142
    • 17.1 Verstecke Texte 143
    • 17.2 Skalierbare Einheiten 145
    • 17.3 Drei Layouttypen: fix, elastisch und flüssig 149
    • 17.4 Korrekter Einsatz von label-Elementen 150
    • 17.5 Kontraste 151
    • 17.6 Abkürzungen, Akronyme und Sprachauszeichnung 151
  • Kapitel 18: Suchmaschinenoptimierung 153
  • Kapitel 19: Cross-Browser-Kompatibilität 155
    • 19.1 Welche Browser sollten unterstützt werden? 157
    • 19.2 HTML5-Browser-Kompatibilität herstellen 160
    • 19.3 CSS3-Browser-Kompatibilität herstellen 164
  • Kapitel 20: Entwicklungs- und Debug-Tools 170
    • 20.1 Browsereigene Entwicklertools 170
    • 20.2 Zusätzliche Entwicklungstools 175
  • Kapitel 21: Quelltexte auf Standardkonformität prüfen 179
    • 21.1 HTML validieren 180
    • 21.2 CSS validieren 182
• 

  Teil II - Grundlagen

  • Kapitel 22: Was macht HTML und was CSS? 186
  • Kapitel 23: Allgemeines zu HTML und Spezielles zu HTML5 190
  • Kapitel 24: Syntax 192
    • 24.1 Tag 192
    • 24.2 HTML-Element 193
    • 24.3 HTML-Attribute 196
    • 24.4 HTML Entities und Sonderzeichen 200
    • 24.5 Relative und absolute Pfade 203
    • 24.6 Grundgerüst einer HTML-Datei 205
    • 24.7 Kommentare in HTML 206
  • Kapitel 25: Doctype-Deklaration 208
    • 25.1 Doctype-Deklaration für HTML5 208
    • 25.2 HTML 4.01- und XHTML 1.0-Doctype 209
    • 25.3 Quirks-Modus ohne Doctype-Deklaration 210
  • Kapitel 26: head: Kopf einer HTML-Datei 211
    • 26.1 title-Tag 211
    • 26.2 meta-Element 212
    • 26.3 link-Tag 214
    • 26.4 style-Element 218
    • 26.5 script-Element 219
  • Kapitel 27: HTML-Tags für den body 221
    • 27.1 HTML-Elemente zur Seitenstrukturierung 221
    • 27.2 HTML-Elemente zur Textstrukturierung 222
    • 27.3 HTML-Elemente zur Auszeichnung von Texten 224
    • 27.4 HTML-Formular-Elemente 225
    • 27.5 HTML-Elemente zum Einbetten verschiedener Medien und Inhalte 229
    • 27.6 HTML-Tabellen-Elemente 230
  • Kapitel 28: HTML-Elemente, die man nicht einsetzen sollte 231
    • 28.1 Veraltete HTML-Elemente 231
    • 28.2 Noch nicht unterstützte HTML-Elemente 232
    • 28.3 Nicht standardkonformes HTML in Browsern 232
  • Kapitel 29: Allgemeines zu CSS und Spezielles zu CSS3 234
  • Kapitel 30: Schlüsselwörter, Werte und Maßeinheiten 236
    • 30.1 Schlüsselwörter (Keywords) 237
    • 30.2 Numerische Datentypen 237
    • 30.3 Längenangaben (length) 238
    • 30.4 Farbangaben 240
    • 30.5 Bildangaben über url() 244
    • 30.6 Weitere Einheiten 244
  • Kapitel 31: CSS-Regel 245
    • 31.1 Aufbau einer CSS-Regel 245
    • 31.2 Kurzschreibweisen – Shorthand Properties 247
    • 31.3 @-Regeln 253
    • 31.4 CSS-Regeln zusammengefasst 253
  • Kapitel 32: Kommentare in CSS 254
  • Kapitel 33: CSS in HTML einbinden 256
    • 33.1 Inline-Styles über das HTML-Attribut style 256
    • 33.2 Styles im head per HTML-Element style 257
    • 33.3 Externe Styles über das link-Tag einbinden 258
    • 33.4 Styles über die @import-Regel einbinden 258
    • 33.5 @media-Regel / Media Queries 259
  • Kapitel 34: Elternelement, Kindelement, Geschwisterelement 263
  • Kapitel 35: HTML-Attribute id und class 265
  • Kapitel 36: Selektoren 267
    • 36.1 Einfachselektoren (simple selectors) 267
    • 36.2 Kombinationsselektoren (combinators) 269
    • 36.3 Arbeiten mit Selektoren 271
    • 36.4 Alle Selektoren im Überblick 273
  • Kapitel 37: Ergänzungs- und Vererbungsprinzip 277
    • 37.1 Kaskade 277
    • 37.2 Rangfolge und Gewichtung 279
    • 37.3 Vererbungsprinzip 282
  • Kapitel 38: Grundprinzipien der Darstellung: Box-Modell und Elementfluss 284
    • 38.1 Box-Modell 284
    • 38.2 Natürlicher Elementfluss (Dokumentfluss) 286
    • 38.3 Block-Elemente 287
    • 38.4 Inline-Elemente 289
    • 38.5 Inline-Block-Elemente 289
    • 38.6 Block- und Inlineverhalten sind veränderbar! 290
    • 38.7 Zeilenhöhe 290
  • Kapitel 39: @font-face-Regel 294
  • Kapitel 40: Browserkennungen / Vendor-Präfixe 297
  • Index 299