Jürgen Wolf ist seit über 16 Jahren Autor und seit mehr als 10 Jahren passionierter Digitalfotograf. Seine Buchthemen sind Bildbearbeitung, Fotografie, Webentwicklung, Betriebssysteme und Programmierung. Und egal welches Thema: Bei jedem Buch ist es sein Ziel, auch komplexe Zusammenhänge klar und verständlich zu erklären.

Video, Audio, lokaler Speicher, CSS-Präprozessoren, Flexboxen, Grid Layouts, Geolocation, Responsive Webdeign

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.3 ... Exkurs: Namenskonvention und Referenzierung ... 80

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 -...