UEber die Autorin 9
Einleitung 23
UEber dieses Buch 23
Konventionen in diesem Buch 23
Was Sie nicht lesen muessen 23
Toerichte Annahmen ueber die Leser 24
Wie dieses Buch aufgebaut ist (Achtung Spoiler!) 24
Teil I: Die absoluten Basics 24
Teil II: HTML - alles Wichtige 25
Teil III: Losstarten mit CSS 25
Teil IV: CSS fuer Layouts 25
Teil V: Der Top-Ten- Teil 26
Symbole, die in diesem Buch verwendet werden 26
Wie es weitergeht 26
Teil I Die Absoluten Basics 27
Kapitel 1 Ziemlich beste Freunde: HTML und CSS 29
Webseiten: vor dem Tunen ein Blick unter die Haube 29
Aufbrezeln mit CSS 31
Ausgezeichnet mit HTML 33
Browser: the two and only 34
Fundamental: HTML-Grundstruktur 35
HTML-Dokument erstellen mit einem Editor 36
Atom 38
HTML-Dokument mit VS Code erstellen 39
1 Dokument im Browser ansehen und 2 sich freuen 42
Alles klar mit Attributen 42
Leere Elemente: leer, aber nicht hohl 43
Kontrolle ist besser 44
CSS - auswaehlen, formatieren und los 46
Geschweifte Klammern, Doppelpunkte & Strichpunkte 47
Das erste Stylesheet 48
Kurzgefasst 50
Kapitel 2 Beispiel fuer das HTML/CSS-Team 51
Gestatten: die Beispielsite 51
Der HTML-Code
fuer die Beispielseite 54
HTML-Code der Startseite im UEberblick 54
head-Bereich 56
Grobe Struktur 57
header im Detail 59
Hauptinhalt 61
Das Grundprinzip von CSS ist folgendes: 63
Stylesheet gesamt 64
Formatierung von body 65
UEberschriften formatieren 67
Formatierung der Navigation 69
Zweispaltige Darstellung des Inhalts und Gestaltung des Footers 71
Flexible Bilder 72
Anpassungen fuer kleine Screens 73
HTML-Code der zweiten Seite 74
Nun zum CSS-Code
der zweiten Seite 77
Kurzgefasst 77
Kapitel 3 Fremden Code untersuchen, eigenen besser verstehen 79
Entwicklertools aufrufen 79
HTML-Code
ansehen 82
CSS-Code untersuchen 84
Verhalten bei unterschiedlichen Bildschirmgroessen 85
Kurzgefasst 87
Kapitel 4 Ab ins Internet 89
Domain und Webspace 89
Hosting - Begriffe und Fakten 90
Dateien mit einem FTP-Programm
uebertragen 94
Zugangsdaten fuer FTP 94
FTP-Programm
waehlen und installieren 94
Daten uebertragen mit FileZilla 95
Fehler beheben und Probleme loesen 98
Baustellenseite 98
403-Fehlermeldung - >>Zugriff verweigert<< 98
Dateien werden nicht angezeigt 98
Probleme mit Bildern 98
Nicht funktionierende Links 99
Kurzgefasst 99
Teil Ii Html - Alles Wichtige 101
Kapitel 5 Gut strukturiert ist halb gewonnen 103
Kopf und Rumpf 103
Sprachangabe 105
Zeichensatzangabe UTF-8 105
Seitentitel - aber richtig 106
Mehr meta 108
Grundlegende Techniken 109
Leerzeichen und Zeilenumbrueche 109
Kommentare 112
Entities fuer Sonderzeichen 113
Der Blick auf body 114
Texte unterteilen 115
Am Anfang war der Absatz 115
UEberschriften 116
Listen 118
hr fuer eine inhaltliche Unterteilung 124
Zitate mit blockquote und cite 124
pre - Leerzeichen und Zeilenumbrueche beibehalten 125
Ausklappbar: details und summary 126
Inline-Elemente 126
In der Zeile 126
Die wichtigsten Inline-Elemente 127
Struktur im Groben 130
Kurzgefasst 133
Kapitel 6 Bilder und Videos 135
Mehr als Worte: Bilder 135
Raster versus Vektor 135
Eine Frage des (Bild-) Formats 136
Das richtige Format fuer die richtige Situation 138
Bilder einbinden 139
Immer scharf: SVG-Bilder 144
Echte kleine Lieblinge: Favicons 146
Gut fuer die Performance 147
Bewegt: Videos 147
Codierung und Container 147
Video einbinden 148
Videos von YouTube und anderen Diensten einbinden 150
iframes: die guten Frames 151
Was auf die Ohren: Audio 152
Object, embed und canvas! 153
Kurzgefasst 153
Kapitel 7 Links und Pfade 155
Verlinkungen 155
Bilder verlinken 156
Links auf externe Webseiten 157
An bestimmte Stellen auf Seiten verlinken 159
Links auf andere Dateitypen 162
Auf Dateien zum Download verlinken 163
E-Mail- Links definieren 163
Ruf! mich! an! Telefonlinks 165
Pfade - von hier nach dort und wieder zurueck 165
Innerhalb eines Ordners auf derselben Ebene 167
In einen Unterordner verweisen 168
UEbergeordnete Ordner 169
In Parallelordner wechseln 169
Noch hoeher hinaus und tiefer hinunter 170
Absolute und relative Pfade 170
Kurzgefasst 172
Kapitel 8 Tabellen und Formulare 173
Von der Wiege bis zur Bahre - Formulare, Formulare, Formulare 173
Formulare - wichtige Basics 174
Funktionsweise von Formularen 174
Viele, viele Input-Typen 185
Formularueberpruefung 192
Informationen in Reih und Glied - Tabellen 194
Grundlegender Aufbau von Tabellen 195
Tabellen fehlerfrei erstellen 199
Weitere Strukturierungselemente bei Tabellen 199
Kurzgefasst 200
Teil Iii Losstarten Mit Css 203
Kapitel 9 HTML mit CSS zusammenbringen 205
HTML und CSS verknuepfen 205
Externe Datei 205
Eingebettete Stylesheets 206
Inline-Stile 209
Externe Stylesheets mit @import einbinden 210
Kommentare - in CSS (im Unterschied zu HTML) 212
Die Qual der Wahl - Elemente auswaehlen 212
Typselektor element 212
Klassenselektor klasse 213
id-Selektor #id 215
Selektoren gruppieren: el1, el2, el3 215
Universeller Selektor * 216
Attributselektoren 217
Kombinatoren 218
Voll pseudo: Pseudoklassen und Pseudoelemente 224
Die allerallerwichtigsten Selektoren in Kurzform 233
Das Recht des Staerkeren - Spezifitaet verstehen 234
Kurzgefasst 237
Kapitel 10 CSS: Farben, Laengeneinheiten und Vererbung 239
Farben in CSS 239
Farben am Bildschirm 240
rgb(), rgba() und hexadezimale Angaben 240
hsl() und hsla() 241
Mehr Farbpower 243
Farben waehlen 244
Farbkombinationen finden 245
Laengenangaben 246
UEberblick ueber die Laengenangaben 247
Pixelversteher 248
Prozent 250
em und rem 250
vw, vh, vwmin, vwmax 251
cm, pt, inch fuer Druck-Stylesheets zum Beispiel 252
Tipps fuer die Verwendung der Einheiten 252
Spezielle Angaben 253
Rechnen mit CSS ueber calc() 253
Custom Properties 254
Vererbung und Standardwert - oder was gilt? 254
Erb das! 254
Nicht vererbare und vererbare Eigenschaften 256
Vererbung in den Browser-Entwicklertools 257
Fehlersuche 258
Kurzgefasst 260
Kapitel 11 Schriften waehlen und Texte gestalten 261
Schrift formatieren 261
Standardschriften verwenden 261
Webfonts 264
Schriftgroesse bestimmen 273
fett, kursiv, Kapitaelchen 277
Zeilenhoehe 279
Kuerze mit Wuerze: die font-Eigenschaft 280
Textschatten 282
Abstaende zwischen Woertern oder Buchstaben 283
text-decoration zur Linkformatierung, aber nicht nur 284
Linkformatierungen 284
Mehr Optionen fuer text-decoration 285
Mit unterschiedlichen Browsern umgehen 285
Texte formatieren und ausrichten 286
Text ausrichten 286
Ausrichtung und Schreibrichtung 287
Erste Zeile einruecken 288
Listen formatieren 289
Kurzgefasst 290
Kapitel 12 Richtig vermessen: die Ausmasse von Elementen 291
Ausmasse von Elementen 291
Breite 292
Hoehe 294
Innenabstand 295
Verkuerzte Angaben mit mehreren Werten bei padding, margin etc 297
Rahmen 298
Logische Werte 299
UEberfliessen steuern mit overflow 300
Aussenabstand 301
Grundprinzip von margin 301
Zusammenfallende Aussenabstaende 302
box-sizing und die Gesamtgroesse 303
Formvollendet - abgerundete Ecken und Schatten 306
Abgerundet: border-radius 306
Schatten um Boxen zeichnen: box-shadow 307
Boxmodell bei Inline-Elementen ... und die Eigenschaft display 308
width, padding, border, margin bei einem Inline-Element 308
Verwandlungskuenstler: display 309
display bei der Erstellung von Buttons 310
Elemente drehen, verschieben und skalieren 312
Kurzgefasst 313
Kapitel 13 Bilder mit CSS einbinden und formatieren 315
Hintergrundfarben und -bilder 315
Hintergrundbild ergaenzen 315
Wiederholung steuern 316
Position des Hintergrundbilds bestimmen 317
Groesse des Hintergrundbilds veraendern: background-size 318
Fixiert beim Scrollen: background-attachment 319
Kuerzer mit background 320
Mehr Optionen bei Hintergrundbildern 321
Bildschirmfuellendes Hintergrundbild 322
Farbverlaeufe erstellen 323
Grundprinzip von Farbverlaeufen 323
Variationen fuer Farbverlaeufe 324
HTML-Bilder mit CSS bearbeiten 325
object-fit - Groessenanpassung von HTML-Bildern 325
Filter for the world 326
Schoener Hover-Effekt bei Bildern 327
Kurzgefasst 329
Teil Iv Css Fuer Layouts 331
Kapitel 14 Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen 333
Bilder und Bereiche umfliessen lassen 333
clear - Floaten aufheben 336
Gefloatete Elemente umschliessen 337
Inhalte nicht rechteckig umfliessen 338
In Position 341
position: absolute 343
position: relative 345
Vorhang auf fuer die Kombi: relative + absolute Positionierung 346
Halbtransparente Bildbeschriftung auf einem Bild 347
position: fixed - Footer unten festkleben 349
position: sticky - scrollen und dann feststehen 350
Praefixe - was sind sie und wenn ja, wie viele? 351
Multicolumn - Spaltensatz 352
Kurzgefasst 354
Kapitel 15 Flexbox - Navigationsleisten und einfache Layouts erstellen 355
Flexbox fuer Layouts und Navigationsleisten 355
Einstieg in Flexbox 356
Flexbox-Konzepte 357
Zwischenraeume definieren 358
display: inline-flex 359
Elemente mit Flexbox ausrichten 360
Leerraumverteilung auf der querenden Achse: align-items 360
Leerraumverteilung auf der Hauptachse: justify-content 362
Element horizontal und vertikal zentrieren 363
Anordnen mit verschachtelten Flexboxen 364
Navigation mit Flexbox realisieren 366
Horizontale Navigation definieren 366
Zweigeteilte Navigation - Elemente mit margin anordnen 369
Weitere Flexbox-Techniken 369
Geaenderte Reihenfolge dank order 370
Flexible Ausmasse 370
Mehrzeilig/-spaltig mit flex-wrap 371
Kurzgefasst 373
Kapitel 16 Gridlayout - Rasterlayouts zum Verlieben 375
Rasterlayouts leicht gemacht mit Gridlayout 375
Grundfunktion von Gridlayout 376
Richtiges Rasterlayout 379
Fortgeschrittene Techniken 383
UEberlappungen und Luecken 383
Gridlayout mit benannten Bereichen 384
Voll flexibles Raster 386
Ausrichten mit Gridlayout und Abstaende zwischen Rasterzellen 389
Kurzgefasst 391
Kapitel 17 Responsives Webdesign 393
Responsiv - das Wesentliche 393
So fing alles an 393
Alternativen zum responsiven Webdesign 394
Bestandteile des responsiven Webdesigns 396
Viewport-Meta- Angabe 396
Klassische Medienangaben 398
Media Queries fuer responsive Webseiten 400
Breakpoints - woher nehmen oder stehlen? 403
Mehr Abfragen 404
Responsive Layouts 405
Einfaches responsives Layoutbeispiel 405
Dreispaltiges responsives Layout mit Flexbox 406
Responsives Layout mit Gridlayout 408
Komponenten auf responsiv trimmen 410
Bilder im responsiven Webdesign 410
Responsives Formular 411
Navigation responsiv machen 416
Responsiv ohne Media Queries 421
Die dunkle Seite: Dark Mode 421
prefers-color- scheme 422
Dark Mode mit Custom Properties 422
Container Queries 424
Kurzgefasst 426
Kapitel 18 Responsive Bilder 427
Ansprueche an responsive Bilder 427
Hochaufloesende Displays 428
Unterschiedliche Bilder je nach Layout und Viewport 431
Art Direction: Nicht nur fuer Kuenstler 434
Verschiedene Bildformate 436
Alle zusammen 436
Und die Browser? 437
Kurzgefasst 437
Teil V Top-Ten- Teil 439
Kapitel 19 Wenn der Browser nicht das macht, was er soll 441
1 Willkommen im Club 441
2 HTML-Fehler aufspueren 441
3 CSS-Fehler aufspueren 441
4 Verknuepfungen ueberpruefen 442
5 Bilder zur Anzeige bewegen 442
6 Probleme mit einem Hintergrundbild beheben 443
7 Dokumentstruktur pruefen 443
8 Browserunterstuetzung pruefen 443
9 Fallbackloesungen fuer aeltere Browser 444
10 Sonderangaben fuer die modernen Browser 444
Kapitel 20 Die wichtigsten Tipps zur Suchmaschinenoptimierung 445
1 Seite fuer Leser erstellen und nicht fuer Suchmaschinen 445
2 Passende und eindeutige Seitentitel 445
3 Beschreibung bei meta 446
4 Seite mit UEberschriften strukturieren 446
5 Klare Navigation mit einfachen URLs 446
6 Aussagekraeftige Linktexte 446
7 Bilder mit aussagekraeftigen Dateinamen und alt-Texten 447
8 Auch fuer Smartphones und Co 447
9 Google-/ Bing-Tools etc nutzen 447
10 Noch mehr Tipps 447
Kapitel 21 Zehn Dinge, die Sie nicht gedacht haetten, dass sie mit CSS gehen 449
1 Mauszeiger aendern 449
2 Animationen definieren 449
3 Animationen anwenden 450
4 Wenn Sie Animationen definieren ... 450
5 Smooth Scrolling 450
6 Text mit Farbverlauf 451
7 UEberblendeffekte 451
8 Transformationen in 3D 451
9 Lustige Formen schnipseln mit clip-path 452
10 Karomuster definieren mit Farbverlaeufen 452
Kapitel 22 Die 10 besten Generatoren fuer faule Coder 455
1 Farbverlaeufe 455
2 Kleckse fuer alle 456
3 Ungewoehnliche Formen schnipseln 456
4 Coole mehrfache Schatten 457
5 Filtereffekte 459
6 Ungewoehnliche Ecken 459
7 Trennlinien aufgehuebscht 460
8 Voll schraeg 461
9 Farbschattierungen 461
10 Passende Schriftgroessen 462
Stichwortverzeichnis 463
