Einleitung 19
UEber dieses Buch 19
Konventionen in diesem Buch 19
Was Sie nicht lesen muessen 19
Toerichte Annahmen ueber den Leser 20
Wie dieses Buch aufgebaut ist (Achtung Spoiler!) 20
Teil I Die absoluten Basics 20
Teil II HTML - alles Wichtige 21
Teil III Losstarten mit CSS 21
Teil IV CSS fuer Layouts 21
Teil V Der Top-Ten-Teil 21
Symbole, die in diesem Buch verwendet werden 21
Wie es weitergeht 22
Teil I: Die absoluten Basics 23
Kapitel 1 Ziemlich beste Freunde: HTML und CSS 25
Webseiten: vor dem Tunen ein Blick unter die Haube 25
Aufgebrezelt mit CSS 27
Ausgezeichnet mit HTML 28
Browser: the two and only 29
Fundamental: HTML-Grundstruktur 30
HTML-Dokument erstellen 32
Alles klar mit Attributen 35
Leere Elemente: leer, aber nicht hohl 36
Kontrolle ist besser 36
CSS - auswaehlen, formatieren und los 39
Geschweifte Klammern, Doppelpunkt & Strichpunkt 39
Das erste Stylesheet 40
Kurzgefasst 42
Kapitel 2 Beispiel fuer das HTML/CSS-Team 43
Gestatten: die Beispielsite 43
Der HTML-Code fuer die Beispielseite 45
HTML-Code der Startseite im UEberblick 46
head-Bereich 48
Grobe Struktur 49
header im Detail 51
Hauptinhalt 53
Einmal Gestaltung bitte - CSS-Code erklaert 55
Stylesheet gesamt 55
Formatierung von body 56
UEberschriften formatieren 58
Formatierung der Navigation 60
Zweispaltige Darstellung des Inhalts und Footer 62
Flexible Bilder 63
Anpassungen fuer kleine Screens 64
HTML-Code der zweiten Seite 65
CSS-Code der zweiten Seite 68
Kurzgefasst 69
Kapitel 3 Fremden Code untersuchen, eigenen besser verstehen 71
Entwicklertools aufrufen 71
HTML-Code ansehen 73
CSS-Code untersuchen 76
Verhalten bei unterschiedlichen Bildschirmgroessen 77
Kurzgefasst 78
Kapitel 4 Ab ins Internet 79
Grundprinzip verstehen 79
Hosting - Begriffe und Fakten 80
Dateien mit einem FTP-Programm uebertragen 83
Zugangsdaten fuer FTP 84
FTP-Programm waehlen und installieren 84
Daten uebertragen mit FileZilla 84
Fehler beheben und Probleme loesen 88
Baustellenseite 88
403 Fehlermeldung - >>Zugriff verweigert<< 88
Dateien werden nicht angezeigt 89
Probleme mit Bildern 89
Nicht funktionierende Links 89
Kurzgefasst 89
Teil II: HTML - alles Wichtige 91
Kapitel 5 Gut strukturiert ist halb gewonnen 93
Kopf und Rumpf 93
Sprachangabe 95
Zeichensatzangabe UTF-8 95
Seitentitel - aber richtig 97
Mehr meta 98
Grundlegende Techniken 99
Leerzeichen und Zeilenumbrueche 99
Kommentare 101
Entities fuer Sonderzeichen 103
Der Blick auf body 104
Texte unterteilen 105
Am Anfang war der Absatz 105
UEberschriften 106
Listen 108
hr fuer eine inhaltliche Unterteilung 115
Zitate mit blockquote und cite 116
pre - Leerzeichen und Zeilenumbrueche beibehalten 117
Ausklappbar: details und summary 117
Inline-Elemente 118
In der Zeile 118
Die wichtigsten Inline-Elemente 119
Struktur im Groben 122
Kurzgefasst 125
Kapitel 6 Bilder und Videos 127
Mehr als Worte: Bilder 127
Raster versus Vektor 127
Eine Frage des (Bild-)Formats 128
Das richtige Format fuer die richtige Situation 131
Bilder einbinden 131
Immer scharf: SVG-Bilder 136
Echte kleine Lieblinge: Favicons 138
Bewegt: Videos 139
Kodierung und Container 139
Video einbinden 140
Videos von Youtube und anderen Diensten einbinden 142
iframes: die guten Frames 143
Was auf die Ohren: Audio 144
Mehr Objekte 145
Kurzgefasst 145
Kapitel 7 Links und Pfade 147
Verlinkungen 147
Bilder verlinken 148
Links auf externe Webseiten 149
An bestimmte Stellen auf Seiten verlinken 151
Links auf andere Dateitypen 154
Auf Dateien zum Download verlinken 155
E-Mail-Links definieren 155
Ruf! mich! an! - Telefonlinks 157
Pfade - von hier nach dort und wieder zurueck 157
Innerhalb eines Ordners auf derselben Ebene 159
In einen Unterordner verweisen 160
UEbergeordnete Ordner 160
In Parallelordner wechseln 161
Noch hoeher hinaus und tiefer hinunter 162
Absolute und relative Pfade 162
Kurzgefasst 164
Kapitel 8 Tabellen und Formulare 165
Von der Wiege bis zur Bahre - Formulare, Formulare 165
Grundsaetzliches zu Formularen 166
Viele, viele Input-Typen 176
Formularueberpruefung 183
Informationen in Reih und Glied - Tabellen 186
Grundlegender Aufbau von Tabellen 186
Tabellen fehlerfrei erstellen 190
Weitere Strukturierungselemente bei Tabellen 191
Kurzgefasst 192
Teil III: Losstarten mit CSS 193
Kapitel 9 HTML mit CSS zusammenbringen 195
HTML und CSS verknuepfen 195
Externe Datei 195
Eingebettete Stylesheets 196
Inline-Stile 199
Externe Stylesheets mit @import einbinden 200
Kommentare - in CSS (im Unterschied zu HTML) 201
Die Qual der Wahl - Elemente auswaehlen 202
Typselektor element 202
Klassenselektor .klasse 203
id-Selektor #id 204
Selektoren gruppieren: el1, el2, el3 205
Universeller Selektor * 205
Attributselektoren 206
Kombinatoren 208
Voll pseudo: Pseudoklassen und Pseudoelemente 214
Die allerallerwichtigsten Selektoren in Kurzform 223
Das Recht des Staerken - Spezifitaet verstehen 224
Kurzgefasst 227
Kapitel 10 CSS: Farben, Masseinheiten und Vererbung 229
Farben in CSS 229
Farben am Bildschirm 230
rgb(), rgba() und hexadezimale Angaben 230
hsl() und hsla() 232
Farben waehlen 233
Farbkombinationen finden 234
Masseinheiten 236
UEberblick ueber die Masseinheiten 236
Pixel verstehen 237
Prozent 239
em und rem 239
vw, vh, vwmin, vwmax 240
cm, pt, inch fuer Druck-Stylesheets 241
Tipp fuer die Verwendung der Einheiten 241
Rechnen mit CSS ueber calc() 241
Vererbung und Standardwert - oder was gilt? 242
Erb das! 242
Nicht vererbbare und vererbbare Eigenschaften 244
Vererbung in den Browserentwicklertools 244
Fehlersuche 245
Kurzgefasst 246
Kapitel 11 Schriften, Absaetze und Listen formatieren 247
Schrift formatieren 247
Standardschriften verwenden 247
Webfonts 250
Schriftgroesse bestimmen 256
Fett, kursiv, Kapitaelchen 260
Zeilenhoehe 261
Kuerze mit Wuerze: die font-Eigenschaft 263
Textschatten 264
Abstaende zwischen Woertern oder Buchstaben 265
text-decoration zur Linkformatierung, aber nicht nur 266
Linkformatierungen 266
Mehr Optionen fuer text-decoration 267
Mit unterschiedlichen Browsern umgehen 267
Texte formatieren und ausrichten 268
Text ausrichten 268
Erste Zeile einruecken 269
Listen formatieren 270
Kurzgefasst 271
Kapitel 12 Kaestchen messen 273
Ausmasse von Elementen 273
Breite 274
Hoehe 276
Innenabstand 277
Verkuerzte Angaben mit mehreren Werten bei padding, margin etc 279
Rahmen 280
UEberfliessen steuern mit overflow 281
Aussenabstand 281
Grundprinzip von margin 282
Zusammenfallende Aussenabstaende 282
box-sizing und die Gesamtgroesse 284
Effektvoll - abgerundete Ecken und Schatten 286
Abgerundet: border-radius 286
Schatten um Boxen zeichnen: box-shadow 287
Boxmodell bei Inline-Elementen ... und die Eigenschaft display 288
width, padding, border, margin bei einem Inline-Element 288
Verwandlungskuenstler: display 289
display bei der Erstellung von Buttons 290
Elemente drehen, verschieben und skalieren 292
Kurzgefasst 293
Kapitel 13 Hintergrundbilder und Farbverlaeufe 295
Hintergrundfarben und -bilder 295
Hintergrundbild ergaenzen 295
Wiederholung steuern 296
Position des Hintergrundbilds bestimmen 297
Groesse des Hintergrundbilds veraendern: background-size 299
Fixiert beim Scrollen: background-attachment 300
Kuerzer mit background 301
Mehr Optionen bei Hintergrundbildern 302
Bildschirmfuellendes Hintergrundbild 303
Farbverlaeufe erstellen 304
Grundprinzip von Farbverlaeufen 304
Code fuer aeltere Browser 305
Variationen fuer Farbverlaeufe 306
Kurzgefasst 307
Teil IV: CSS fuer Layouts 309
Kapitel 14 Bilder floaten, Elemente positionieren 311
Bilder und anderes umfliessen lassen 311
clear - Floaten aufheben 315
Mehrere Elemente floaten 316
Gefloatete Elemente umschliessen 318
Inhalte nicht rechteckig umfliessen 321
In Position 324
position: absolute 325
position: relative 327
Vorhang auf fuer die Kombi: relative + absolute Positionierung 328
Halbtransparente Bildbeschriftung auf einem Bild 329
position: fixed - Footer unten festkleben 331
position: sticky - scrollen und dann feststehen 332
Multicolumn - Spaltensatz 334
Kurzgefasst 336
Kapitel 15 Flexbox und Gridlayout 337
Flexbox fuer Layouts und Navigationsleisten 337
Einstieg in Flexbox 338
Flexbox-Konzepte 339
Elemente mit Flexbox ausrichten 341
Navigation mit Flexbox realisieren 345
Autoprefixer: Flexbox fuer so viele Browser wie moeglich 351
Rasterlayouts leicht gemacht mit Gridlayout 352
Erstes Raster 352
Gridlayout mit benannten Bereichen 356
Voll flexibles Raster 358
Ausrichten mit Gridlayout und Abstaende zwischen Rasterzellen 361
Kurzgefasst 362
Kapitel 16 Responsives Webdesign 365
Responsiv - das Wesentliche 365
So fing alles an 365
Alternativen zum responsiven Webdesign 366
Bestandteile des responsiven Webdesigns 368
Viewport-Meta-Angabe 368
Klassische Medienangaben 370
Media Queries fuer responsive Webseiten 372
Breakpoints - woher nehmen oder stehlen? 374
Mehr Abfragen 375
Responsive Layouts 376
Einfaches responsives Layoutbeispiel 376
Dreispaltiges responsives Layout mit Flexbox 377
Responsives Layout mit Gridlayout 379
Komponenten auf responsiv trimmen 381
Bilder im responsiven Webdesign 382
Responsives Formular 383
Navigation responsiv machen 388
Responsiv ohne Media Queries 393
Kurzgefasst 393
Kapitel 17 Responsive Bilder 395
Ansprueche an responsive Bilder 395
Hochaufloesende Displays 396
Unterschiedliche Bilder je nach Layout und Viewport 399
Art Direction: nicht nur fuer Kuenstler 403
Verschiedene Bildformate 405
Alle zusammen 405
Und die Browser? 406
Kurzgefasst 406
Teil V: Top-Ten-Teil 407
Kapitel 18 Wenn der Browser nicht das macht, was er soll 409
Willkommen im Club 409
HTML-Fehler aufspueren 409
CSS-Fehler aufspueren 410
Verknuepfungen ueberpruefen 410
Bilder zur Anzeige bewegen 410
Probleme mit einem Hintergrundbild beheben 410
Dokumentstruktur pruefen 411
Browserunterstuetzung pruefen 411
Fallbackloesungen fuer aeltere Browser 412
Sonderangaben fuer die modernen Browser 412
Kapitel 19 Die wichtigsten Tipps zur Suchmaschinenoptimierung 413
Seite fuer Leser erstellen und nicht fuer Suchmaschinen 413
Passende und eindeutige Seitentitel 414
Beschreibung bei meta name="description" 414
Seite mit UEberschriften strukturieren 414
Klare Navigation mit einfachen URLs 414
Aussagekraeftige Linktexte 414
Bilder mit aussagekraeftige Dateinamen und alt-Texten 415
Auch fuer Smartphones und Co 415
Google-/Bing-Tools etc nutzen 415
Noch mehr Tipps 415
Kapitel 20 10 Dinge, von denen Sie nicht gedacht haetten, dass sie mit CSS gehen 417
Mauszeiger aendern 417
Animationen definieren 417
Animationen anwenden 418
CSS-Variablen (Custom Properties) definieren 418
CSS-Variablen anwenden 418
UEberblendeffekte 418
Filter 419
Transformationen in 3D 419
Lustige Formen schnipseln mit clip-path 420
Karomuster definieren mit Farbverlaeufen 420
Stichwortverzeichnis 423
