HTML und CSS: Rheinwerk Computing

  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 ...
       3.4 ... Die Basis-URL einer Webseite mit        3.5 ... Beziehung zu einem externen Dokument mit        3.6 ... Dokumentglobale CSS-Stile mit        3.7 ... Skripte in Webseiten einbinden mit        3.8 ... Metainformationen für das Dokument mit        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        5.3 ... Zusammenfassung ... 191

  6.  Grafiken und Multimedia ... 193

       6.1 ... Bilder für das Web ... 194
       6.2 ... Bilder mit        6.3 ... Das passende Bild mit        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        6.7 ... Videos mit dem HTML-Element        6.8 ... Audiodateien mit dem HTML-Element        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