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