Einstieg in HTML und CSS

Materialien zum Buch . . . 26
Geleitwort . . . 27
Vorwort . . . 29
TEIL I. Webseiten, HTML und CSS . . . 33
1. Wissenswertes über Webseiten . . . 35

1. 1 . . . Webseiten sehen nicht überall gleich aus . . . 35
1. 2 . . . Webseiten bestehen aus Quelltext . . . 37
1. 3 . . . Quelltext besteht aus HTML, CSS und JavaScript . . . 38
1. 4 . . . Webseiten werden von einem Browser dargestellt . . . 41
1. 5 . . . Webseiten und Barrierefreiheit . . . 43
1. 6 . . . Editoren zum Schreiben und Bearbeiten von Quelltext . . . 44
1. 7 . . . Websites zum Nachschlagen von HTML und CSS . . . 45
1. 8 . . . Auf einen Blick . . . 48

2. HTML kennenlernen: die erste Webseite erstellen . . . 49

2. 1 . . . Webseiten bestehen aus rechteckigen Kästchen . . . 50
2. 2 . . . HT-M-L: die »HyperText Markup Language« . . . 51
2. 3 . . . Die erste Webseite erstellen: »index. html« . . . 52
2. 4 . . . Jede Webseite hat ein HTML-Grundgerüst . . . 54
2. 5 . . . Der < ! doctype> und das Stammelement < html> . . . 56
2. 6 . . . HTML-Elemente können im Anfangs-Tag Attribute enthalten . . . 57
2. 7 . . . < head> enthält wichtige Infos über die Webseite . . . 58
2. 8 . . . < body> enthält den im Browser sichtbaren Bereich der Webseite . . . 61
2. 9 . . . Der Kopfbereich < header> mit Überschrift und Slogan . . . 63
2. 10 . . . Entwicklerwerkzeuge: HTML im Browser untersuchen . . . 64
2. 11 . . . Auf einen Blick . . . 66

3. CSS kennenlernen: die erste Webseite gestalten . . . 67

3. 1 . . . Jeder Browser hat ein eingebautes Stylesheet . . . 67
3. 2 . . . HTML-Elemente als rechteckige Kästchen visualisieren . . . 69
3. 3 . . . Das erste eigene Stylesheet: »style. css« . . . 70
3. 4 . . . Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für < body> . . . 72
3. 5 . . . Den Kopfbereich < header> im CSS selektieren und gestalten . . . 74
3. 6 . . . Wichtige Vokabeln: der Aufbau einer CSS-Regel . . . 76
3. 7 . . . Entwicklerwerkzeuge: CSS im Browser untersuchen . . . 77
3. 8 . . . Auf einen Blick . . . 79

TEIL II. HTML (mit einer Prise CSS) . . . 81
4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen . . . 83

4. 1 . . . Überschriften strukturieren den Inhalt: < h1> bis < h6> . . . 84
4. 2 . . . Absätze und Hervorhebungen: < p> , < strong> , < em> . . . 86
4. 3 . . . Webseiten in unterschiedlichen Umgebungen testen . . . 88
4. 4 . . . Listen erstellen mit < ul> , < ol> und < li> . . . 89
4. 5 . . . Listen verschachteln: eine Liste in einer Liste . . . 93
4. 6 . . . Über Blockelemente, Inline-Elemente und »display« . . . 95
4. 7 . . . Auf einen Blick . . . 96

5. HTML und Hyperlinks -- das Besondere am Web . . . 97

5. 1 . . . Das Standardverhalten von Hyperlinks . . . 97
5. 2 . . . Anatomie eines Hyperlinks: < a href=" . . . " > Linktext< /a> . . . 98
5. 3 . . . Hyperlinks in neuem Tab oder Fenster öffnen . . . 100
5. 4 . . . Eine Navigation ist eine Liste mit Links . . . 101
5. 5 . . . Eine grundlegende Gestaltung für die Navigation . . . 103
5. 6 . . . Im Fußbereich einen Link »Nach oben« einfügen . . . 109
5. 7 . . . Links zu Dateien und E-Mail-Adressen . . . 112
5. 8 . . . Auf einen Blick . . . 114

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

6. 1 . . . Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co . . . 115
6. 2 . . . Ein Bild als Logo einbinden mit < img> . . . 117
6. 3 . . . Pixelbilder in Zeiten hochauflösender Bildschirme . . . 121
6. 4 . . . Bilder mit flexibler Breite: »max-width: 100%« . . . 125
6. 5 . . . Abbildungen beschriften: < figure> und < figcaption> . . . 128
6. 6 . . . »Lazy Loading«: Seiten mit vielen Bildern optimieren . . . 130
6. 7 . . . Audiodateien einbinden mit < audio> . . . 131
6. 8 . . . Videodateien einbinden mit < video> . . . 133
6. 9 . . . Auf einen Blick . . . 136

7. Semantische HTML-Elemente zur Strukturierung von Webseiten und Inhalten . . . 139

7. 1 . . . Warum semantische Strukturelemente eine sinnvolle Sache sind . . . 140
7. 2 . . . Kopfbereiche auszeichnen mit < header> . . . 140
7. 3 . . . Navigationsbereiche erstellen mit < nav> . . . 143
7. 4 . . . Der Hauptinhalt einer Webseite steht in < main> . . . 145
7. 5 . . . Fußbereiche auszeichnen mit < footer> . . . 146
7. 6 . . . Inhaltliche Abschnitte erstellen mit < section> . . . 147
7. 7 . . . In sich geschlossene, eigenständige Blöcke mit < article> . . . 149
7. 8 . . . Bereiche mit zusätzlichen Informationen: < aside> . . . 153
7. 9 . . . Elemente mit < div> semantisch neutral gruppieren . . . 155
7. 10 . . . Orientierungspunkte für Screenreader: »ARIA Landmark Roles« . . . 156
7. 11 . . . Auf einen Blick . . . 160

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

8. 1 . . . Zitate auszeichnen mit < blockquote> und < cite> . . . 161
8. 2 . . . Einen Zeilenumbruch erzwingen mit < br> . . . 165
8. 3 . . . Kontaktinformationen auszeichnen mit < address> . . . 165
8. 4 . . . Zeitangaben für Menschen und Maschinen: < time> . . . 167
8. 5 . . . Ausklappbare Inhalte: < details> und < summary> . . . 169
8. 6 . . . Änderungen am Text dokumentieren: < del> und < ins> . . . 172
8. 7 . . . Kurz vorgestellt: < span> , < hr> und < small> . . . 174
8. 8 . . . Weitere Inline-Elemente in der Übersicht . . . 175
8. 9 . . . Know-how: Zeichensätze und Sonderzeichen . . . 176
8. 10 . . . Auf einen Blick . . . 179

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

9. 1 . . . Im Web basieren alle Interaktionen mit Besuchern auf HTML-Formularen . . . 181
9. 2 . . . Das Element < form> definiert ein Formular . . . 182
9. 3 . . . Einzeilige Eingabefelder mit < input> und < label> . . . 183
9. 4 . . . Mehrzeilige Eingabefelder mit < textarea> und < label> . . . 188
9. 5 . . . Zum Anklicken: Kontrollkästchen, Optionsfelder und Auswahllisten . . . 189
9. 6 . . . Formularfelder gruppieren mit < fieldset> und < legend> . . . 193
9. 7 . . . Ein Button zum Abschicken der Formulardaten . . . 194
9. 8 . . . Ein Kontaktformular mit DSGVO-Checkbox erstellen . . . 195
9. 9 . . . Auf einen Blick . . . 201

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

10. 1 . . . Eine einfache HTML-Tabelle: < table> , < tr> und < td> . . . 203
10. 2 . . . Tabellenüberschriften stehen in < th> . . . 205
10. 3 . . . Tabellen strukturieren: < thead> , < tbody> und < tfoot> . . . 206
10. 4 . . . Zellen verbinden mit »colspan« und »rowspan« . . . 207
10. 5 . . . Übung: Tabelle für »Die 10 besten Alben aller Zeiten« . . . 208
10. 6 . . . Auf einen Blick . . . 213

11. Von der Webseite zur Website . . . 215

11. 1 . . . »Sie sind hier«: aktuellen Menüpunkt hervorheben . . . 215
11. 2 . . . Rechtliche Pflichtlinks im Footer einfügen . . . 219
11. 3 . . . Das HTML überprüfen mit dem HTML-Validator . . . 221
11. 4 . . . Die Seiten »News«, »Über uns« und »Kontakt« erstellen . . . 223
11. 5 . . . Inhalte für die Seite »News« hinzufügen . . . 226
11. 6 . . . Ein Bild auf der Seite »Über uns« einfügen . . . 230
11. 7 . . . Die Seite »Kontakt« mit Kontaktdaten und Formular . . . 232
11. 8 . . . Die Seiten »Datenschutz« und »Impressum« . . . 234
11. 9 . . . Auf einen Blick . . . 235

TEIL III. CSS -- Grundlagen . . . 237
12. Gestalten per CSS: Box-Modell, Farben und Einheiten . . . 239

12. 1 . . . CSS kann man an drei verschiedenen Stellen schreiben . . . 239
12. 2 . . . Das Box-Modell kennenlernen: »padding«, »border« und »margin« . . . 242
12. 3 . . . Farben in CSS: Farbnamen, hexadezimale Schreibweise und Transparenz . . . 248
12. 4 . . . Die wichtigsten Längeneinheiten: px, em, rem, % & Co . . . 253
12. 5 . . . Auf einen Blick . . . 257

13. Das Box-Modell in Aktion: »padding«, »border« und »margin« . . . 259

13. 1 . . . Das Box-Modell im Browser visualisieren . . . 259
13. 2 . . . Die Breite begrenzen: »min-width« und »max-width« . . . 261
13. 3 . . . Der Abstand zum Rand: »padding« . . . 262
13. 4 . . . Rahmenlinien gestalten mit »border« und »border-radius« . . . 266
13. 5 . . . Blockboxen horizontal zentrieren mit »margin« . . . 270
13. 6 . . . Abstände zwischen den Elementen mit »margin« . . . 272
13. 7 . . . Tipps zum Gestalten mit »padding« und »margin« . . . 273
13. 8 . . . Know-how: Collapsing Margins -- vertikale Außenabstände kollabieren . . . 276
13. 9 . . . Auf einen Blick . . . 280

14. Die wichtigsten Selektoren und ihre Spezifität . . . 283

14. 1 . . . Einfache Selektoren: Elemente, Gruppierung und * . . . 284
14. 2 . . . Klassen sind klasse: der Selektor mit dem Punkt . . . 285
14. 3 . . . IDs sind einmalig: der Selektor mit der Raute . . . 287
14. 4 . . . Attributselektoren haben eckige Klammern: [attribut] . . . 288
14. 5 . . . DOM: die Hierarchie der HTML-Elemente . . . 293
14. 6 . . . Nachfahren auswählen: der Selektor mit Leerzeichen . . . 294
14. 7 . . . Selektoren zum Auswählen von Kindelementen . . . 294
14. 8 . . . Nachbarn und Geschwister selektieren mit + und ~ . . . 298
14. 9 . . . Kurz vorgestellt: der praktische Elternselektor :has() . . . 300
14. 10 . . . Nützliche Quellen zum Nachschlagen von Selektoren . . . 301
14. 11 . . . Spezifität: Einige Selektoren sind wichtiger als andere . . . 302
14. 12 . . . Auf einen Blick . . . 304

15. Text gestalten: Schriften, Listen, Links und mehr . . . 305

15. 1 . . . Klassische Schriftarten mit und ohne Serifen im Web . . . 306
15. 2 . . . Die Schriftart definieren mit »font-family« . . . 307
15. 3 . . . Die Systemschrift des Geräts: gut lesbar und echt schnell . . . 310
15. 4 . . . Webfonts -- die Schriftart gleich mitliefern . . . 311
15. 5 . . . Schnell und einfach: Google Fonts selbst ausliefern . . . 312
15. 6 . . . Gut lesbarer Text mit »font-size« und »line-height« . . . 317
15. 7 . . . Listen: Aufzählungszeichen gestalten per CSS . . . 322
15. 8 . . . Hyperlinks: Unterstreichung gestalten mit »text-decoration« . . . 325
15. 9 . . . Hyperlinks: Linkzustände gestalten mit Pseudoklassen . . . 327
15. 10 . . . Links in neuem Tab kennzeichnen mit dem Pseudoelement »::after« . . . 330
15. 11 . . . Weitere Eigenschaften zur Gestaltung von Schrift und Text . . . 333
15. 12 . . . Auf einen Blick . . . 336

16. Der Browser und das CSS: Vererbung, Standardwert und Kaskade . . . 339

16. 1 . . . Überblick: Vererbung, Standardwert und Kaskade . . . 339
16. 2 . . . Nichts gefunden? Vererbung oder Standardwert . . . 340
16. 3 . . . Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge . . . 343
16. 4 . . . Auf einen Blick . . . 350

17. Boxen gestalten: Hintergrund, Schatten und am Bildschirm ausblenden . . . 351

17. 1 . . . Hintergrundgrafiken per CSS einbinden und gestalten . . . 352
17. 2 . . . Lineare Farbverläufe: »background-image« und »linear-gradient()« . . . 358
17. 3 . . . Schattenboxen mit »box-shadow« . . . 360
17. 4 . . . Zitate als Kundenstimmen gestalten . . . 362
17. 5 . . . »Call to Action«: Links in Buttons verwandeln . . . 365
17. 6 . . . Boxen am Bildschirm ausblenden: »visually-hidden« . . . 372
17. 7 . . . »Skip-Link«: per Tastatur direkt zum Inhalt springen . . . 375
17. 8 . . . Auf einen Blick . . . 378

18. Ordnung halten: Stylesheets aufräumen und organisieren . . . 379

18. 1 . . . Benutzerdefinierte Eigenschaften: Variablen in CSS . . . 380
18. 2 . . . Stylesheets mit Kommentaren strukturieren . . . 383
18. 3 . . . Verschiedene Schreibweisen für CSS-Regeln . . . 384
18. 4 . . . CSS überprüfen mit dem CSS-Validator . . . 387
18. 5 . . . Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung . . . 388
18. 6 . . . Die Modul-Stylesheets erstellen und importieren . . . 390
18. 7 . . . Das CSS auf die Modul-Stylesheets verteilen . . . 393
18. 8 . . . Ein neues Modul für ein modernes Layout . . . 398
18. 9 . . . Auf einen Blick . . . 405

TEIL IV. CSS -- Layout . . . 407
19. Der normale Flow, »position« und »float« . . . 409

19. 1 . . . Flow: Die Seite ist ein langer ruhiger Fluss . . . 410
19. 2 . . . Versetzt weiterfließen mit »position: relative« . . . 411
19. 3 . . . Raus aus dem Flow mit »position: absolute« . . . 412
19. 4 . . . Wie ein Fels in der Brandung mit »position: fixed« . . . 416
19. 5 . . . Scrollen und stehen bleiben mit »position: sticky« . . . 418
19. 6 . . . Positionierte Boxen und der »z-index« . . . 419
19. 7 . . . Text um eine Abbildung fließen lassen mit »float« . . . 421
19. 8 . . . Floats beenden mit »clear: both« . . . 424
19. 9 . . . Praktisch: Klassen zum Floaten und Clearen . . . 425
19. 10 . . . Floats umschließen mit »display: flow-root« . . . 426
19. 11 . . . Floats nicht rechteckig umfließen mit »shape-outside« . . . 429
19. 12 . . . Auf einen Blick . . . 430

20. Media Queries und responsives Webdesign . . . 433

20. 1 . . . Responsives Webdesign: Das Web wird flexibel . . . 433
20. 2 . . . Medientypen definieren das Ausgabemedium . . . 434
20. 3 . . . Media Queries = Medientypen + Medieneigenschaften . . . 437
20. 4 . . . Media Queries brauchen den »Meta-Viewport« . . . 441
20. 5 . . . Media Queries und die Suche nach dem Breakpoint . . . 443
20. 6 . . . Responsive Schriftgröße mit und ohne Media Queries . . . 444
20. 7 . . . Auf einen Blick . . . 448

21. Flexbox: Mehrspaltige Layouts mit »display: flex« . . . 449

21. 1 . . . Flexbox und Grid -- jenseits vom »Block Formatting Context« . . . 449
21. 2 . . . Flex-Container erstellen: »display: flex« . . . 450
21. 3 . . . Fließrichtung von Flex-Items kontrollieren: »flex-flow« . . . 454
21. 4 . . . Flex-Items an der Hauptachse ausrichten: »justify-content« . . . 458
21. 5 . . . Flex-Items an der Querachse ausrichten: »align-items« und »align-self« . . . 459
21. 6 . . . Automatische Abstände für Flex-Items mit »margin« . . . 462
21. 7 . . . Flexibilität für Flex-Items: die Zauberformel »flex: 1« . . . 464
21. 8 . . . Flexbox in Aktion: »Sticky Footer« am unteren Rand des Browserfensters . . . 466
21. 9 . . . Die Reihenfolge von Flex-Items ändern . . . 470
21. 10 . . . Auf einen Blick . . . 472

22. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« . . . 475

22. 1 . . . Ein »Grid« ist ein Raster und schafft Ordnung . . . 475
22. 2 . . . Mehr Platz für moderne Browser: »@supports« . . . 476
22. 3 . . . Ein Grid-Layout: Boxen neben- und untereinander . . . 477
22. 4 . . . Grid-Items manuell platzieren: 1. nummerierte Linien . . . 483
22. 5 . . . Grid-Items manuell platzieren: 2. benannte Bereiche . . . 488
22. 6 . . . Die Grid-Zauberformel: responsiv ohne Media Query . . . 492
22. 7 . . . Verschachtelte Grids mit »subgrid« . . . 498
22. 8 . . . Flexbox und Grid sind ein gutes Team . . . 499
22. 9 . . . Auf einen Blick . . . 502

23. Flexible Icons und responsive Bilder . . . 505

23. 1 . . . Flexible Icons: skalierbare Symbole mit SVG . . . 505
23. 2 . . . SVG-Icons mit < img> als Datei einfügen . . . 507
23. 3 . . . SVG-Icons inline direkt im HTML einfügen . . . 510
23. 4 . . . HTML und responsive Bilder . . . 511
23. 5 . . . Unterschiedliche Bilddateien je nach Viewportbreite . . . 512
23. 6 . . . Unterschiedliche Bildmotive und Dateiformate . . . 517
23. 7 . . . Auf einen Blick . . . 519

24. Eine responsive Navigation erstellen . . . 521

24. 1 . . . Die responsive Navigation im Überblick . . . 521
24. 2 . . . Schritt 1: Eine vertikale Navigation für schmale Viewports . . . 524
24. 3 . . . Schritt 2: Eine horizontale Navigation für breitere Viewports . . . 526
24. 4 . . . Schritt 3: Menübutton einfügen mit < template> und JavaScript . . . 528
24. 5 . . . Schritt 4: Menübutton per CSS gestalten . . . 532
24. 6 . . . Schritt 5: Navigation per CSS ein- und ausblenden . . . 536
24. 7 . . . Auf einen Blick . . . 540

Index . . . 541