Peter Müller arbeitet seit vielen Jahren als IT-Dozent und versteht es, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Er ist als Autor des CSS-Bestsellers "Little Boxes" bekannt, dessen neueste Auflage unter dem Titel "Einstieg in CSS" erschienen ist.

Moderne Layouts mit Flexbox und Grid-System

enthält den sichtbaren Bereich der Webseite ... 57

2.8 ... Der Kopfbereich mit Überschrift und Slogan ... 59

2.9 ... Entwicklerwerkzeuge im Browser: HTML untersuchen ... 60

2.10 ... Auf einen Blick ... 63

3. CSS kennenlernen: Die erste Webseite gestalten ... 65

3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 65

3.2 ... Das HTML für als schematische Darstellung ... 67

3.3 ... Das erste eigene Stylesheet: »style.css« ... 68

3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 70

3.5 ... Den Kopfbereich selektieren und gestalten ... 72

3.6 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 74

3.7 ... Auf einen Blick ... 76

4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 77

4.1 ... Überschriften strukturieren den Inhalt:

bis
... 78

4.2 ... Absätze und Hervorhebungen: , , ... 80

4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82

4.4 ... Listen erstellen mit , und • ... 84

4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 87

4.6 ... Über Blockelemente, Inline-Elemente und die Eigenschaft »display« ... 89

4.7 ... Auf einen Blick ... 90

5. Hyperlinks -- das Besondere am Web ... 91

5.1 ... Das Standardverhalten von Hyperlinks ... 91

5.2 ... Anatomie eines Hyperlinks: Linktext ... 92

5.3 ... Hyperlinks und sinnvolle Linktexte: das »Klicken-Sie-hier«-Syndrom ... 94

5.4 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 95

5.5 ... Eine Navigation ist eine Liste mit Links ... 96

5.6 ... Eine grundlegende Gestaltung für die Navigation ... 97

5.7 ... Im Fußbereich einen Link »Nach oben« einfügen ... 102

5.8 ... Besondere Links: Dateien, E-Mail und Telefon ... 106

5.9 ... Auf einen Blick ... 108

6. HTML-Elemente für Bilder, Audio und Video ... 109

6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 109

6.2 ... Ein Bild als Logo einbinden mit ... 111

6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114

6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119

6.5 ... Abbildungen beschriften: und ... 122

6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124

6.7 ... Let there be sound: Audiodateien einbinden mit ... 125

6.8 ... Bewegte Bilder einbinden mit ... 127

6.9 ... Auf einen Blick ... 131

7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 133

7.1 ... Die semantischen Strukturelemente auf einen Blick ... 134

7.2 ... Kopfbereiche auszeichnen mit ... 134

7.3 ... Navigationsbereiche erstellen mit ... 137

7.4 ... Der Hauptinhalt einer Webseite steht in ... 140

7.5 ... Fußbereiche auszeichnen mit ... 141

7.6 ... Inhaltliche Abschnitte erstellen mit ... 142

7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 144

7.8 ... Bereiche mit zusätzlichen Informationen: ... 148

7.9 ... Elemente mit semantisch neutral gruppieren ... 150

7.10 ... Auf einen Blick ... 152

8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153

8.1 ... Zitate auszeichnen mit und ... 153

8.2 ... Einen Zeilenumbruch erzwingen mit
... 157

8.3 ... Kontaktinformationen auszeichnen mit ... 157

8.4 ... Zeitangaben für Menschen und Maschinen: ... 159

8.5 ... Ausklappbare Inhalte: und ... 161

8.6 ... Änderungen am Text dokumentieren: und ... 164

8.7 ... Kurz vorgestellt: , und ... 166

8.8 ... Weitere Inline-Elemente in der Übersicht ... 167

8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 169

8.10 ... Auf einen Blick ... 172

9. HTML-Elemente zum Erstellen von Formularen ... 173

9.1 ... Interaktion mit Besuchern basiert auf HTML-Formularen ... 174

9.2 ... Das Element definiert ein Formular ... 174

9.3 ... Einzeilige Eingabefelder erstellen und beschriften: und ... 176

9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: und ... 180

9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181

9.6 ... Formularfelder gruppieren mit und die Gruppe beschriften mit ... 185

9.7 ... Ein Button zum Abschicken der Formulardaten ... 186

9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187

9.9 ... Auf einen Blick ... 193

10. HTML-Elemente zum Erstellen von Tabellen ... 195

10.1 ... Eine einfache HTML-Tabelle: , und ... 195

10.2 ... Tabellenüberschriften stehen in ... 197

10.3 ... Tabellen strukturieren: , und ... 198

10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199

10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200

10.6 ... Auf einen Blick ... 204

11. Von der Webseite zur Website ... 205

11.1 ... Fine-Tuning für die Startseite ... 205

11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210

11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 212

11.4 ... Inhalte für die Seite »News« hinzufügen ... 216

11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 220

11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 222

11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 225

11.8 ... Auf einen Blick ... 226

12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227

12.1 ... Überblick: Webseiten gestalten per CSS ... 227

12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228

12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229

12.4 ... Das Box-Modell kennenlernen: »padding«, »border« und »margin« ... 231

12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236

12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238

12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240

12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242

12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245

12.10 ... Auf einen Blick ... 248

13. Die wichtigsten Selektoren und Spezifität ... 249

13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 250

13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251

13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253

13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254

13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256

13.6 ... Selektoren zum Auswählen von Kindelementen ... 256

13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260

13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261

13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265

13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266

13.11 ... Auf einen Blick ... 268

14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269

14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269

14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271

14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272

14.4 ... Ausnahme: »!important« gewinnt immer ... 274

14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275

14.6 ... Die Kaskade im Browser analysieren ... 277

14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278

14.8 ... Auf einen Blick ... 280

15. Schrift und Text gestalten per CSS ... 281

15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281

15.2 ... Die Schriftart definieren mit »font-family« ... 283

15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285

15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287

15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288

15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291

15.7 ... Gut lesbarer Text: »font-size« und »line-height« ... 295

15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299

15.9 ... Hyperlinks: Unterstreichung gestalten mit »text-decoration« ... 303

15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305

15.11 ... Externe Hyperlinks kennzeichnen mit »::after« ... 309

15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312

15.13 ... Auf einen Blick ... 315

16. Abstände gestalten mit dem Box-Modell ... 317

16.1 ... Das klassische Box-Modell für Blockboxen ... 317

16.2 ... Die Breite begrenzen: »min-width« und »max-width« ... 318

16.3 ... Der Abstand zum Rand: »padding« ... 320

16.4 ... Rahmenlinien gestalten mit »border« und »border-radius« ... 323

16.5 ... Blockboxen horizontal zentrieren mit »margin: auto« ... 327

16.6 ... Abstände zwischen den Elementen mit »margin« ... 328

16.7 ... »Collapsing Margins«: Vertikale Außenabstände kollabieren ... 329

16.8 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 335

16.9 ... Das Box-Modell für Inline-Boxen ... 337

16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338

16.11 ... Auf einen Blick ... 339

17. Boxen gestalten per CSS ... 341

17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341

17.2 ... Lineare Farbverläufe: »background-image« und »linear-gradient()« ... 348

17.3 ... Schattenboxen mit »box-shadow« ... 350

17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ......