Auch heute noch sind HTML und CSS die Basis aller Webseiten. Wer mehr möchte, als nur einen unflexiblen Website-Baukasten zu nutzen, kommt an beidem schwer vorbei. Egal, ob Sie eine Website komplett neu aufbauen oder ob Sie beim Einsatz eines Content-Management-Systems individuelle Anpassungen vornehmen möchten: Dieses Buch hilft Ihnen weiter. Florence Maurice erklärt Ihnen mit vielen Beispielen und Schritt für Schritt alle wichtigen Grundlagen, wie HTML funktioniert, wofür Sie CSS benötigen und wie Sie am Ende all dieses Wissen anwenden.
Table of Contents:
Über die Autorin 9
Einleitung 23
Über dieses Buch 23
Konventionen in diesem Buch 23
Was Sie nicht lesen müssen 23
Törichte Annahmen über 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 für 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 – auswählen, formatieren und los 46
Geschweifte Klammern, Doppelpunkte & Strichpunkte 47
Das erste Stylesheet 48
Kurzgefasst 50
Kapitel 2 Beispiel für das HTML/CSS-Team 51
Gestatten: die Beispielsite 51
Der HTML-Code
für die Beispielseite 54
HTML-Code der Startseite im Überblick 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
Überschriften formatieren 67
Formatierung der Navigation 69
Zweispaltige Darstellung des Inhalts und Gestaltung des Footers 71
Flexible Bilder 72
Anpassungen für 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 Bildschirmgrößen 85
Kurzgefasst 87
Kapitel 4 Ab ins Internet 89
Domain und Webspace 89
Hosting – Begriffe und Fakten 90
Dateien mit einem FTP-Programm
übertragen 94
Zugangsdaten für FTP 94
FTP-Programm
wählen und installieren 94
Daten übertragen mit FileZilla 95
Fehler beheben und Probleme lösen 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 Zeilenumbrüche 109
Kommentare 112
Entities für Sonderzeichen 113
Der Blick auf body 114
Texte unterteilen 115
Am Anfang war der Absatz 115
Überschriften 116
Listen 118
hr für eine inhaltliche Unterteilung 124
Zitate mit blockquote und cite 124
pre – Leerzeichen und Zeilenumbrüche 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 für die richtige Situation 138
Bilder einbinden 139
Immer scharf: SVG-Bilder 144
Echte kleine Lieblinge: Favicons 146
Gut für 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 zurück 165
Innerhalb eines Ordners auf derselben Ebene 167
In einen Unterordner verweisen 168
Übergeordnete Ordner 169
In Parallelordner wechseln 169
Noch höher 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
Formularüberprüfung 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 verknüpfen 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 auswählen 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 Stärkeren – Spezifität verstehen 234
Kurzgefasst 237
Kapitel 10 CSS: Farben, Längeneinheiten 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 wählen 244
Farbkombinationen finden 245
Längenangaben 246
Überblick über die Längenangaben 247
Pixelversteher 248
Prozent 250
em und rem 250
vw, vh, vwmin, vwmax 251
cm, pt, inch für Druck-Stylesheets zum Beispiel 252
Tipps für die Verwendung der Einheiten 252
Spezielle Angaben 253
Rechnen mit CSS über 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 wählen und Texte gestalten 261
Schrift formatieren 261
Standardschriften verwenden 261
Webfonts 264
Schriftgröße bestimmen 273
fett, kursiv, Kapitälchen 277
Zeilenhöhe 279
Kürze mit Würze: die font-Eigenschaft 280
Textschatten 282
Abstände zwischen Wörtern oder Buchstaben 283
text-decoration zur Linkformatierung, aber nicht nur 284
Linkformatierungen 284
Mehr Optionen für text-decoration 285
Mit unterschiedlichen Browsern umgehen 285
Texte formatieren und ausrichten 286
Text ausrichten 286
Ausrichtung und Schreibrichtung 287
Erste Zeile einrücken 288
Listen formatieren 289
Kurzgefasst 290
Kapitel 12 Richtig vermessen: die Ausmaße von Elementen 291
Ausmaße von Elementen 291
Breite 292
Höhe 294
Innenabstand 295
Verkürzte Angaben mit mehreren Werten bei padding, margin etc 297
Rahmen 298
Logische Werte 299
Überfließen steuern mit overflow 300
Außenabstand 301
Grundprinzip von margin 301
Zusammenfallende Außenabstände 302
box-sizing und die Gesamtgröße 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
Verwandlungskünstler: 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 ergänzen 315
Wiederholung steuern 316
Position des Hintergrundbilds bestimmen 317
Größe des Hintergrundbilds verändern: background-size 318
Fixiert beim Scrollen: background-attachment 319
Kürzer mit background 320
Mehr Optionen bei Hintergrundbildern 321
Bildschirmfüllendes Hintergrundbild 322
Farbverläufe erstellen 323
Grundprinzip von Farbverläufen 323
Variationen für Farbverläufe 324
HTML-Bilder mit CSS bearbeiten 325
object-fit – Größenanpassung von HTML-Bildern 325
Filter for the world 326
Schöner Hover-Effekt bei Bildern 327
Kurzgefasst 329
Teil Iv Css Für Layouts 331
Kapitel 14 Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen 333
Bilder und Bereiche umfließen lassen 333
clear – Floaten aufheben 336
Gefloatete Elemente umschließen 337
Inhalte nicht rechteckig umfließen 338
In Position 341
position: absolute 343
position: relative 345
Vorhang auf für 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
Präfixe – was sind sie und wenn ja, wie viele? 351
Multicolumn – Spaltensatz 352
Kurzgefasst 354
Kapitel 15 Flexbox – Navigationsleisten und einfache Layouts erstellen 355
Flexbox für Layouts und Navigationsleisten 355
Einstieg in Flexbox 356
Flexbox-Konzepte 357
Zwischenräume 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
Geänderte Reihenfolge dank order 370
Flexible Ausmaße 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
Überlappungen und Lücken 383
Gridlayout mit benannten Bereichen 384
Voll flexibles Raster 386
Ausrichten mit Gridlayout und Abstände 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 für 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
Ansprüche an responsive Bilder 427
Hochauflösende Displays 428
Unterschiedliche Bilder je nach Layout und Viewport 431
Art Direction: Nicht nur für Künstler 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 aufspüren 441
3 CSS-Fehler aufspüren 441
4 Verknüpfungen überprüfen 442
5 Bilder zur Anzeige bewegen 442
6 Probleme mit einem Hintergrundbild beheben 443
7 Dokumentstruktur prüfen 443
8 Browserunterstützung prüfen 443
9 Fallbacklösungen für ältere Browser 444
10 Sonderangaben für die modernen Browser 444
Kapitel 20 Die wichtigsten Tipps zur Suchmaschinenoptimierung 445
1 Seite für Leser erstellen und nicht für Suchmaschinen 445
2 Passende und eindeutige Seitentitel 445
3 Beschreibung bei meta 446
4 Seite mit Überschriften strukturieren 446
5 Klare Navigation mit einfachen URLs 446
6 Aussagekräftige Linktexte 446
7 Bilder mit aussagekräftigen Dateinamen und alt-Texten 447
8 Auch für Smartphones und Co 447
9 Google-/ Bing-Tools etc nutzen 447
10 Noch mehr Tipps 447
Kapitel 21 Zehn Dinge, die Sie nicht gedacht hätten, dass sie mit CSS gehen 449
1 Mauszeiger ändern 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 Überblendeffekte 451
8 Transformationen in 3D 451
9 Lustige Formen schnipseln mit clip-path 452
10 Karomuster definieren mit Farbverläufen 452
Kapitel 22 Die 10 besten Generatoren für faule Coder 455
1 Farbverläufe 455
2 Kleckse für alle 456
3 Ungewöhnliche Formen schnipseln 456
4 Coole mehrfache Schatten 457
5 Filtereffekte 459
6 Ungewöhnliche Ecken 459
7 Trennlinien aufgehübscht 460
8 Voll schräg 461
9 Farbschattierungen 461
10 Passende Schriftgrößen 462
Stichwortverzeichnis 463
