HTML und CSS

Materialien zum Buch ... 27
Vorwort ... 29
1. Einführung in das HTML-Universum ... 35

1.1 ... Ist dieses Buch überhaupt etwas für mich? ... 35
1.2 ... Die verschiedenen Typen von Websites ... 36
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? ... 49
1.6 ... Verwendete Konventionen im Buch ... 58
1.7 ... Zusammenfassung ... 58

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

2.1 ... Syntax und Aufbau von HTML(-Dokumenten) ... 59
2.2 ... Ein einfaches HTML-Dokument-Grundgerüst ... 70
2.3 ... Zusammenfassung ... 73

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

3.1 ... Die HTML-Elemente für den Kopf in der Übersicht ... 75
3.2 ... <title> - die Überschrift der HTML-Seite ... 76
3.3 ... Exkurs: Namenskonvention und Referenzierung ... 78
3.4 ... Die Basis-URL einer Webseite mit <base> definieren ... 82
3.5 ... Beziehung zu einem externen Dokument mit <link> ... 85
3.6 ... Dokumentglobale CSS-Stile mit <style> notieren ... 89
3.7 ... Skripte in Webseiten einbinden mit <script> ... 90
3.8 ... Metainformationen für das Dokument mit <meta> ... 93
3.9 ... Zusammenfassung ... 101

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

4.1 ... HTML-Elemente für Seitenstrukturierung ... 103
4.2 ... HTML-Elemente für Textstrukturierung ... 120
4.3 ... Das semantische HTML verwenden ... 140
4.4 ... HTML-Elemente für Textauszeichnungen ... 149
4.5 ... Exkurs: Zeichencodierung ... 170
4.6 ... Zeichenentitäten in HTML ... 172
4.7 ... Zusammenfassung ... 174

5. Tabellen und Hyperlinks ... 175

5.1 ... Daten in einer Tabelle strukturieren ... 175
5.2 ... »Elektronische« Verweise aka Hyperlinks mit <a> ... 190
5.3 ... Zusammenfassung ... 208

6. Grafiken und Multimedia ... 209

6.1 ... Bilder mit <img> einbinden ... 210
6.2 ... Verweissensitive Grafiken aka Image-Maps erstellen ... 218
6.3 ... Das passende Bild mit <picture> laden ... 224
6.4 ... Ein Icon für die Website hinzufügen (Favicon) ... 228
6.5 ... Vektorgrafiken in HTML-Dokumenten verwenden ... 230
6.6 ... Grafiken zeichnen mit <canvas> ... 237
6.7 ... Videos mit dem HTML-Element <video> abspielen ... 238
6.8 ... Audiodateien mit dem HTML-Element <audio> abspielen ... 246
6.9 ... Andere aktive Inhalte einbinden ... 248
6.10 ... Zusammenfassung ... 252

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

7.1 ... Einen Bereich für Formulare definieren ... 256
7.2 ... Die HTML-Eingabefelder für Formulare ... 258
7.3 ... Spezielle Typen von Eingabefeldern ... 269
7.4 ... Die HTML-Attribute für Eingabefelder ... 277
7.5 ... Weitere nützliche Helferlein für Eingabefelder ... 283
7.6 ... Formulardaten mit PHP versenden ... 289
7.7 ... Interaktive HTML-Elemente ... 295
7.8 ... Zusammenfassung ... 298

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

8.1 ... Die Geschichte von CSS ... 300
8.2 ... Das grundlegende Anwendungsprinzip von CSS ... 301
8.3 ... Einbindungsmöglichkeiten von CSS in HTML ... 306
8.4 ... CSS im Webbrowser analysieren ... 317
8.5 ... Zusammenfassung ... 317

9. Die Selektoren von CSS ... 319

9.1 ... Die einfachen Selektoren von CSS ... 321
9.2 ... Kombinatoren - die Selektoren verketten ... 356
9.3 ... Empfehlung: So verwenden Sie effizientes und einfaches CSS ... 365
9.4 ... Zusammenfassung ... 368

10. Die Vererbung und die Kaskade ... 371

10.1 ... Das Prinzip der Vererbung in CSS ... 371
10.2 ... Das Regelsystem der Kaskade verstehen ... 381
10.3 ... Exkurs: Werte an CSS-Eigenschaften übergeben ... 390
10.4 ... Zusammenfassung ... 403

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

11.1 ... Das klassische Box-Modell von CSS ... 406
11.2 ... Das neuere alternative Box-Modell von CSS ... 417
11.3 ... Das Box-Modell im Browser analysieren ... 423
11.4 ... Das Box-Modell für Inline-Elemente ... 423
11.5 ... Boxen gestalten ... 424
11.6 ... Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) ... 446
11.7 ... Zusammenfassung ... 449

12. CSS-Positionierung ... 451

12.1 ... Positionierung mit der CSS-Eigenschaft »position« ... 451
12.2 ... Übereinanderstapeln regeln mit »z-index« ... 466
12.3 ... Schwebende Boxen für die Positionierung mit »float« ... 470
12.4 ... Die flexiblen Boxen von CSS ... 479
12.5 ... Zusammenfassung ... 493

13. Responsive Layouts mit CSS erstellen ... 495

13.1 ... Theoretisches Grundlagenwissen zum responsiven Webdesign ... 495
13.2 ... Wir erstellen ein einfaches responsives Layout ... 512
13.3 ... Noch mehr flexible Elemente ... 530
13.4 ... Das CSS-Grid-Layout ... 544
13.5 ... Verhalten von HTML-Elementen mit »display« ändern ... 557
13.6 ... Berechnungen mit CSS und der »calc()«-Funktion ... 561
13.7 ... Zusammenfassung und »Da geht noch (viel) mehr ...« ... 564

14. Stylen mit CSS ... 567

14.1 ... Textgestaltung mit CSS ... 567
14.2 ... Listen mit CSS gestalten ... 605
14.3 ... Schönere Tabellen mit CSS gestalten ... 614
14.4 ... Bilder und Grafiken mit »width« und »height« anpassen ... 620
14.5 ... Elemente transformieren mit CSS ... 622
14.6 ... Übergänge mit CSS erstellen ... 628
14.7 ... HTML-Formulare mit CSS stylen ... 630
14.8 ... Zusammenfassung ... 639

15. Testen und Organisieren ... 641

15.1 ... Webbrowser-Tests - und: Was geht denn so alles? ... 641
15.2 ... Websites in verschiedenen Größen betrachten ... 647
15.3 ... Zentrales Stylesheet einrichten ... 649
15.4 ... CSS-Reset oder -Normalisierung? ... 651
15.5 ... Zusammenfassung ... 654

16. Der CSS-Präprozessor Sass und SCSS ... 655

16.1 ... Die Syntax Sass oder SCSS ... 656
16.2 ... Von Sass/SCSS zu CSS ... 656
16.3 ... Sass installieren und einrichten ... 657
16.4 ... Variablen mit Sass verwenden ... 662
16.5 ... Verschachtelungen mit Sass ... 663
16.6 ... Mixins (@mixin, @inlcude) ... 665
16.7 ... Extend (@extend) ... 668
16.8 ... Media Queries und @content ... 671
16.9 ... Operatoren ... 673
16.10 ... Farben und Helligkeit anpassen ... 674
16.11 ... Kontrollstrukturen von Sass ... 677
16.12 ... Funktionen @function ... 681
16.13 ... @import ... 682
16.14 ... Kommentare ... 683
16.15 ... Zusammenfassung ... 684

17. Eine kurze Einführung in JavaScript ... 685

17.1 ... JavaScript in der Webentwicklung ... 686
17.2 ... JavaScript-Programme schreiben und ausführen ... 688
17.3 ... Ausgabe von JavaScript ... 695
17.4 ... Die Verwendung von Variablen in JavaScript ... 702
17.5 ... Übersicht über die JavaScript-Datentypen ... 706
17.6 ... Arithmetische Operatoren zum Rechnen in JavaScript ... 713
17.7 ... Bedingte Anweisungen in JavaScript ... 715
17.8 ... Programmanweisungen mehrmals wiederholen mit Schleifen ... 722
17.9 ... Zusammenfassung ... 727

18. Arrays, Funktionen und Objekte in JavaScript ... 729

18.1 ... Funktionen in JavaScript ... 729
18.2 ... Arrays ... 741
18.3 ... Zeichenketten und reguläre Ausdrücke ... 753
18.4 ... Objektorientierte Programmierung in JavaScript ... 755
18.5 ... Weitere globale Objekte ... 763
18.6 ... Zusammenfassung ... 767

19. Webseiten dynamisch ändern ... 769

19.1 ... Einführung in das DOM eines HTML-Dokuments ... 769
19.2 ... Das »document«-Objekt ... 771
19.3 ... Die Programmierschnittstelle von DOM ... 771
19.4 ... Auf Elemente im DOM zugreifen ... 773
19.5 ... HTML-Element, -Attribut oder den Style ändern ... 785
19.6 ... Auf JavaScript-Events reagieren ... 790
19.7 ... Mit dem Event-Handler die Events behandeln ... 792
19.8 ... Gängige JavaScript-Events in der Übersicht ... 796
19.9 ... Weitere Informationen zu Events mit dem »event«-Objekt ... 801
19.10 ... Standardaktion von Events unterdrücken ... 804
19.11 ... Der Event-Fluss (Event-Propagation) ... 805
19.12 ... HTML-Elemente hinzufügen, ändern, entfernen ... 810
19.13 ... HTML-Formulare und JavaScript ... 828
19.14 ... Zusammenfassung ... 836

20. Einführung in die Web-APIs ... 837

20.1 ... Video- und Audio-Media-API ... 838
20.2 ... Zeichnen mit der Canvas-2D-API ... 844
20.3 ... Den Standort ermitteln mit der Geolocation-API ... 857
20.4 ... Ziehen und Fallenlassen mit der Drag & Drop-API ... 868
20.5 ... Web Storage - Datenbank für Offlineanwendungen ... 878
20.6 ... Web Workers - die Helfer im Hintergrund ... 889
20.7 ... Aktualisieren ohne Anfrage mit Server-Sent Events ... 898
20.8 ... Weitere interessante Web-APIs im Schnelldurchlauf ... 901
20.9 ... Zusammenfassung ... 908

21. Eine Einführung in Ajax und jQuery ... 909

21.1 ... Eine Einführung in die Ajax-Programmierung ... 909
21.2 ... Einführung in die JavaScript-Bibliothek jQuery ... 927
21.3 ... Zusammenfassung ... 959

22. Das Bootstrap-Framework einsetzen ... 961

22.1 ... Bootstrap herunterladen und integrieren ... 962
22.2 ... Das Layout mit dem Bootstrap-Framework erstellen ... 964
22.3 ... Die Komponenten des Bootstrap-Frameworks verwenden ... 978
22.4 ... Übersicht über weitere beliebte CSS-Frameworks ... 988
22.5 ... Zusammenfassung ... 989

23. Einführung in die grundlegenden Konzepte von React ... 991

23.1 ... Was ist React? ... 991
23.2 ... Die Umgebung für React einrichten ... 993
23.3 ... Ein React-Projekt einrichten und starten ... 993
23.4 ... Hallo Welt in React ... 996
23.5 ... JSX (JavaScript XML) ... 998
23.6 ... Rendern von Elementen ... 1006
23.7 ... React-Komponenten und Props ... 1007
23.8 ... Statusmanagement in React ... 1015
23.9 ... Ereignisse und deren Handler ... 1022
23.10 ... Lifecycle von Komponenten ... 1024
23.11 ... Die React-Hooks-API ... 1036
23.12 ... CSS und React ... 1044
23.13 ... Formulare in React ... 1055
23.14 ... So geht es weiter ... 1061

24. Einführung in die grundlegenden Konzepte von Angular ... 1063

24.1 ... Die nötigen Werkzeuge ... 1064
24.2 ... Hallo Welt in Angular ... 1064
24.3 ... Eine kleine Einführung in TypeScript ... 1068
24.4 ... Komponenten ... 1082
24.5 ... Komponenten binden ... 1090
24.6 ... Pipes ... 1102
24.7 ... Der Datenfluss zwischen den Komponenten ... 1111
24.8 ... Styles für Komponenten ... 1118
24.9 ... Der Lebenszyklus einer Komponente ... 1121
24.10 ... Direktiven ... 1126
24.11 ... Wie geht es nun weiter? ... 1140

Index ... 1141