HTML und CSS

Materialien zum Buch . . . 29
Vorwort . . . 31
1. Einführung in das HTML-Universum . . . 37

1. 1 . . . Ist dieses Buch überhaupt etwas für mich? . . . 37
1. 2 . . . Die verschiedenen Typen von Websites . . . 38
1. 3 . . . Dynamische und statische Websites . . . 42
1. 4 . . . Sprachen für die Gestaltung und Entwicklung im Web . . . 46
1. 5 . . . Was brauche ich, um hier anzufangen? . . . 50
1. 6 . . . Verwendete Konventionen im Buch . . . 59
1. 7 . . . Zusammenfassung . . . 59

2. Grundlegender Aufbau von HTML(-Dokumenten) . . . 61

2. 1 . . . Syntax und Aufbau von HTML(-Dokumenten) . . . 61
2. 2 . . . Ein einfaches HTML-Dokument-Grundgerüst . . . 72
2. 3 . . . Zusammenfassung . . . 75

3. Die Kopfdaten eines HTML-Dokuments . . . 77

3. 1 . . . Die HTML-Elemente für den Kopf in der Übersicht . . . 77
3. 2 . . . < title> - die Überschrift der HTML-Seite . . . 78
3. 3 . . . Exkurs: Namenskonvention und Referenzierung . . . 80
3. 4 . . . Die Basis-URL einer Webseite mit < base> definieren . . . 85
3. 5 . . . Beziehung zu einem externen Dokument mit < link> . . . 87
3. 6 . . . Dokumentglobale CSS-Stile mit < style> notieren . . . 91
3. 7 . . . Skripte in Webseiten einbinden mit < script> . . . 92
3. 8 . . . Metainformationen für das Dokument mit < meta> . . . 94
3. 9 . . . Zusammenfassung . . . 103

4. Der sichtbare Bereich eines HTML-Dokuments . . . 105

4. 1 . . . HTML-Elemente für Seitenstrukturierung . . . 106
4. 2 . . . HTML-Elemente für Textstrukturierung . . . 117
4. 3 . . . HTML-Elemente für Textauszeichnungen . . . 132
4. 4 . . . HTML und die Semantik . . . 152
4. 5 . . . Barrierearmes Webdesign mit WAI-ARIA . . . 154
4. 6 . . . Exkurs: Zeichencodierung . . . 158
4. 7 . . . Zeichenentitäten in HTML . . . 160
4. 8 . . . Zusammenfassung . . . 162

5. Tabellen und Hyperlinks . . . 163

5. 1 . . . Daten in einer Tabelle strukturieren . . . 163
5. 2 . . . »Elektronische« Verweise aka Hyperlinks mit < a> . . . 175
5. 3 . . . Zusammenfassung . . . 191

6. Grafiken und Multimedia . . . 193

6. 1 . . . Bilder für das Web . . . 194
6. 2 . . . Bilder mit < img> einbinden . . . 197
6. 3 . . . Das passende Bild mit < picture> laden . . . 212
6. 4 . . . Ein Icon für die Website hinzufügen (Favicon) . . . 216
6. 5 . . . Vektorgrafiken in HTML-Dokumenten verwenden . . . 218
6. 6 . . . Grafiken zeichnen mit < canvas> . . . 223
6. 7 . . . Videos mit dem HTML-Element < video> abspielen . . . 224
6. 8 . . . Audiodateien mit dem HTML-Element < audio> abspielen . . . 232
6. 9 . . . Andere aktive Inhalte einbinden . . . 234
6. 10 . . . Zusammenfassung . . . 238

7. HTML-Formulare und interaktive Elemente . . . 239

7. 1 . . . Einen Bereich für Formulare definieren . . . 240
7. 2 . . . Die HTML-Eingabefelder für Formulare . . . 242
7. 3 . . . Spezielle Typen von Eingabefeldern . . . 250
7. 4 . . . Die HTML-Attribute für Eingabefelder . . . 257
7. 5 . . . Weitere nützliche Helferlein für Eingabefelder . . . 263
7. 6 . . . Formulardaten mit PHP versenden . . . 267
7. 7 . . . Interaktive HTML-Elemente . . . 274
7. 8 . . . Zusammenfassung . . . 277

8. Einführung in Cascading Stylesheets (CSS) . . . 279

8. 1 . . . Das grundlegende Anwendungsprinzip von CSS . . . 280
8. 2 . . . Einbindungsmöglichkeiten von CSS in HTML . . . 286
8. 3 . . . CSS im Webbrowser analysieren . . . 293
8. 4 . . . Werte an CSS-Eigenschaften übergeben . . . 294
8. 5 . . . Zusammenfassung . . . 306

9. Die Selektoren von CSS . . . 307

9. 1 . . . Die einfachen Selektoren von CSS . . . 309
9. 2 . . . Kombinatoren - die Selektoren verketten . . . 337
9. 3 . . . Empfehlung: So verwenden Sie effizientes und einfaches CSS . . . 343
9. 4 . . . Zusammenfassung . . . 346

10. Die Vererbung und die Kaskade . . . 349

10. 1 . . . Das Prinzip der Vererbung in CSS . . . 349
10. 2 . . . Das Regelsystem der Kaskade verstehen . . . 358
10. 3 . . . Zusammenfassung . . . 367

11. Das Box-Modell von CSS . . . 369

11. 1 . . . Das klassische Box-Modell von CSS . . . 370
11. 2 . . . Das alternative Box-Modell von CSS . . . 382
11. 3 . . . Logische Eigenschaften . . . 386
11. 4 . . . Das Box-Modell für Inline-Elemente . . . 389
11. 5 . . . Boxen gestalten . . . 390
11. 6 . . . Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) . . . 409
11. 7 . . . Zusammenfassung . . . 411

12. CSS-Positionierung . . . 413

12. 1 . . . Der normale Elementfluss . . . 413
12. 2 . . . Positionierung mit der CSS-Eigenschaft »position« . . . 416
12. 3 . . . Übereinanderstapeln regeln mit »z-index« . . . 428
12. 4 . . . Schwebende Boxen für die Positionierung mit »float« . . . 432
12. 5 . . . Zusammenfassung . . . 447

13. Flexboxen . . . 449

13. 1 . . . Den Flexbox-Container erstellen . . . 450
13. 2 . . . Flex-Items anpassen . . . 455
13. 3 . . . Die Flex-Items im Flex-Container ausrichten . . . 460
13. 4 . . . Beispiel: Navigationsbar mit Flexboxen . . . 468
13. 5 . . . Zusammenfassung . . . 471

14. Responsives Webdesign und Media Queries . . . 473

14. 1 . . . Grundlagenwissen zum responsiven Webdesign . . . 473
14. 2 . . . Die Druckversion einer Website . . . 492
14. 3 . . . Auf Benutzereinstellungen reagieren . . . 496
14. 4 . . . Container Queries . . . 507
14. 5 . . . Berechnungen mit CSS und der »calc()«-Funktion . . . 512
14. 6 . . . Zusammenfassung . . . 513

15. CSS Grid . . . 515

15. 1 . . . Grid-Container und Rasterelemente verwenden . . . 516
15. 2 . . . Responsives Grid ohne Media Queries . . . 529
15. 3 . . . Ausrichten von Grid-Items . . . 535
15. 4 . . . Grid-Bereiche benennen . . . 539
15. 5 . . . Zusammenfassung . . . 542

16. Stylen mit CSS . . . 543

16. 1 . . . Schriftfamilien und -formatierung mit »font« . . . 543
16. 2 . . . »@font-face«, Webfonts und variable Fonts . . . 559
16. 3 . . . Weiterere Anpassungsmöglichkeiten von Text . . . 567
16. 4 . . . Listen mit CSS gestalten . . . 576
16. 5 . . . Schönere Tabellen mit CSS gestalten . . . 582
16. 6 . . . Bilder mit CSS gestalten . . . 588
16. 7 . . . Elemente transformieren mit CSS . . . 598
16. 8 . . . Übergänge und Animationen mit CSS erstellen . . . 601
16. 9 . . . HTML-Formulare mit CSS stylen . . . 605
16. 10 . . . Zusammenfassung . . . 614

17. Der CSS-Präprozessor Sass und SCSS . . . 615

17. 1 . . . Sass oder SCSS . . . 616
17. 2 . . . Von Sass/SCSS zu CSS . . . 617
17. 3 . . . Einführung in Sass . . . 617
17. 4 . . . Custom Properties mit reinem CSS . . . 644
17. 5 . . . Verschachteltes CSS . . . 651
17. 6 . . . Zusammenfassung . . . 659

18. Eine kurze Einführung in JavaScript . . . 661

18. 1 . . . JavaScript in der Webentwicklung . . . 662
18. 2 . . . JavaScript-Programme schreiben und ausführen . . . 664
18. 3 . . . Ausgabe von JavaScript . . . 670
18. 4 . . . Die Verwendung von Variablen in JavaScript . . . 677
18. 5 . . . Übersicht über die JavaScript-Datentypen . . . 681
18. 6 . . . Arithmetische Operatoren zum Rechnen in JavaScript . . . 688
18. 7 . . . Bedingte Anweisungen in JavaScript . . . 690
18. 8 . . . Programmanweisungen mehrmals wiederholen mit Schleifen . . . 698
18. 9 . . . Zusammenfassung . . . 702

19. Arrays, Funktionen und Objekte in JavaScript . . . 703

19. 1 . . . Funktionen in JavaScript . . . 703
19. 2 . . . Arrays . . . 715
19. 3 . . . Zeichenketten und reguläre Ausdrücke . . . 727
19. 4 . . . Objektorientierte Programmierung in JavaScript . . . 729
19. 5 . . . Weitere globale Objekte . . . 736
19. 6 . . . Zusammenfassung . . . 741

20. Webseiten dynamisch ändern . . . 743

20. 1 . . . Einführung in das DOM eines HTML-Dokuments . . . 743
20. 2 . . . Das »document«-Objekt . . . 745
20. 3 . . . Die Programmierschnittstelle von DOM . . . 745
20. 4 . . . Auf Elemente im DOM zugreifen . . . 747
20. 5 . . . Auf JavaScript-Events reagieren . . . 759
20. 6 . . . Mit dem Event-Handler die Events behandeln . . . 761
20. 7 . . . Gängige JavaScript-Events in der Übersicht . . . 765
20. 8 . . . Standardaktion von Events unterdrücken . . . 770
20. 9 . . . Der Event-Fluss (Event-Propagation) . . . 771
20. 10 . . . Weitere Informationen zu Events mit dem »event«-Objekt . . . 776
20. 11 . . . HTML-Attribut oder den Textknoten ändern . . . 779
20. 12 . . . HTML-Elemente hinzufügen, ändern, entfernen . . . 783
20. 13 . . . CSS und JavaScript . . . 801
20. 14 . . . HTML-Formulare und JavaScript . . . 804
20. 15 . . . Zusammenfassung . . . 811

21. Einführung in die Web-APIs (Browser-APIs) . . . 813

21. 1 . . . Video- und Audio-Media-API . . . 814
21. 2 . . . Den Standort ermitteln mit der Geolocation-API . . . 821
21. 3 . . . Web Storage - Datenbank für Offlineanwendungen . . . 833
21. 4 . . . Web Workers - die Helfer im Hintergrund . . . 845
21. 5 . . . Aktualisieren ohne Anfrage mit Server-Sent Events . . . 853
21. 6 . . . Weitere interessante Web-APIs im Schnelldurchlauf . . . 857
21. 7 . . . Zusammenfassung . . . 864

22. Eine Einführung in Ajax und die Fetch-API . . . 865

22. 1 . . . Eine Einführung in die Ajax-Programmierung . . . 865
22. 2 . . . Die Fetch-API . . . 883
22. 3 . . . Zusammenfassung . . . 887

23. Das Bootstrap-Framework einsetzen . . . 889

23. 1 . . . Bootstrap herunterladen und integrieren . . . 890
23. 2 . . . Das Layout mit dem Bootstrap-Framework erstellen . . . 893
23. 3 . . . Die Komponenten des Bootstrap-Frameworks verwenden . . . 905
23. 4 . . . Übersicht über weitere beliebte CSS-Frameworks . . . 915
23. 5 . . . Zusammenfassung . . . 916

24. Einführung in die grundlegenden Konzepte von React . . . 917

24. 1 . . . Was ist React? . . . 917
24. 2 . . . Die Umgebung für React einrichten . . . 918
24. 3 . . . Ein React-Projekt einrichten und starten . . . 919
24. 4 . . . Hallo Welt in React . . . 922
24. 5 . . . JSX (JavaScript XML) . . . 924
24. 6 . . . Rendern von Elementen . . . 932
24. 7 . . . React-Komponenten und Props . . . 932
24. 8 . . . Statusmanagement in React . . . 941
24. 9 . . . Ereignisse und deren Handler . . . 948
24. 10 . . . Lifecycle von Komponenten . . . 949
24. 11 . . . Die React-Hooks-API . . . 960
24. 12 . . . CSS und React . . . 968
24. 13 . . . Formulare in React . . . 979
24. 14 . . . So geht es weiter . . . 984

25. Einführung in die grundlegenden Konzepte von Angular . . . 987

25. 1 . . . Die nötigen Werkzeuge . . . 987
25. 2 . . . Hallo Welt in Angular . . . 988
25. 3 . . . Eine kleine Einführung in TypeScript . . . 992
25. 4 . . . Komponenten . . . 1005
25. 5 . . . Komponenten binden . . . 1013
25. 6 . . . Pipes . . . 1025
25. 7 . . . Der Datenfluss zwischen den Komponenten . . . 1034
25. 8 . . . Styles für Komponenten . . . 1041
25. 9 . . . Der Lebenszyklus einer Komponente . . . 1044
25. 10 . . . Direktiven . . . 1048
25. 11 . . . Wie geht es nun weiter? . . . 1063

26. Beispielprojekt erstellen, testen und optimieren . . . 1065

26. 1 . . . Projektplanung . . . 1066
26. 2 . . . Grundgerüst mit Inhalt erstellen . . . 1068
26. 3 . . . Das Layout der Website festlegen und erstellen . . . 1070
26. 4 . . . Typografie - Auswahl der Schriften . . . 1077
26. 5 . . . Navigation . . . 1080
26. 6 . . . Farben für das Projekt festlegen . . . 1082
26. 7 . . . Grafiken und Bilder . . . 1083
26. 8 . . . Website auf Funktionalität testen . . . 1087
26. 9 . . . Website auf Barrierefreiheit hin testen . . . 1091
26. 10 . . . Performance der Website testen und verbessern . . . 1092
26. 11 . . . Nachhaltige Webentwicklung . . . 1097
26. 12 . . . Zusammenfassung . . . 1106

Index . . . 1107