HTML und CSS - Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Responsive Webdesign, React und Angular u. v. m.

Moderne Web-Technologien für moderne Websites! In diesem Standardwerk gibt Ihnen Jürgen Wolf alle Werkzeuge an die Hand, die sie für einen starken Auftritt im Web benötigen. Lernen Sie alle Grundlagen von HTML, CSS und JavaScript kennen und erweitern Sie Ihr Wissen mit diesem umfassenden Lern- und Nachschlagewerk: vom Aufbau eines HTML-Dokuments über die Gestaltung mit CSS bis hin zur Web-Programmierung mit JavaScript. Inkl. einer Einführung in die wichtigen JavaScript-Frameworks React und Angular.
Aus dem Inhalt:

• Syntax und Aufbau von HTML-Dokumenten
• Tabellen und Hyperlinks
• Bilder, Videos und Audio
• HTML-Formulare und interaktive Elemente
• Die Selektoren von CSS
• Vererbung und Kaskade
• Flexboxen und Grid Layouts
• Responsive Layouts erstellen
• Einführung in die JavaScript-APIs
• Einführung in React und Angular

List of contents

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

3.5 ... Beziehung zu einem externen Dokument mit ... 87

3.6 ... Dokumentglobale CSS-Stile mit notieren ... 91

3.7 ... Skripte in Webseiten einbinden mit ... 92

3.8 ... Metainformationen für das Dokument mit ... 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 ... 175

5.3 ... Zusammenfassung ... 191

6. Grafiken und Multimedia ... 193

6.1 ... Bilder für das Web ... 194

6.2 ... Bilder mit einbinden ... 197

6.3 ... Das passende Bild mit 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 ... 223

6.7 ... Videos mit dem HTML-Element abspielen ... 224

6.8 ... Audiodateien mit dem HTML-Element 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

About the author

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.

Summary

Moderne Web-Technologien für moderne Websites! In diesem Standardwerk gibt Ihnen Jürgen Wolf alle Werkzeuge an die Hand, die sie für einen starken Auftritt im Web benötigen. Lernen Sie alle Grundlagen von HTML, CSS und JavaScript kennen und erweitern Sie Ihr Wissen mit diesem umfassenden Lern- und Nachschlagewerk: vom Aufbau eines HTML-Dokuments über die Gestaltung mit CSS bis hin zur Web-Programmierung mit JavaScript. Inkl. einer Einführung in die wichtigen JavaScript-Frameworks React und Angular.

Aus dem Inhalt:

Syntax und Aufbau von HTML-Dokumenten
Tabellen und Hyperlinks
Bilder, Videos und Audio
HTML-Formulare und interaktive Elemente
Die Selektoren von CSS
Vererbung und Kaskade
Flexboxen und Grid Layouts
Responsive Layouts erstellen
Einführung in die JavaScript-APIs
Einführung in React und Angular

Additional text

»Ein wertvolles Ressourcenwerk für Einsteiger und Fortgeschrittene, die ihre Kenntnisse in Webentwicklung erweitern möchten.«

Report

»Ein konkurrenzloses Lern- und Nachschlagewerk, jetzt aktualisiert und auch nochmals leicht erweitert. Hilfreich und wertvoll auch schon für Homepage-Neueinsteiger.« NaturFoto 202309

Product details

• Authors: Jürgen Wolf
• Publisher: Rheinwerk Verlag
• Languages: German
• Product format: Hardback
• Released: 04.08.2023
• EAN: 9783836297288
• ISBN: 978-3-8362-9728-8
• No. of pages: 1124
• Dimensions: 196 mm x 67 mm x 241 mm
• Weight: 2433 g
• Subjects: Natural sciences, medicine, IT, technology > IT, data processing > Internet; JavaScript, Programmierung, Ajax, Usability, ux, css3, html5, Responsive Web-Design, Web 2.0, Webentwicklung, Canvas, Webseite erstellen, User Experience UX-Design, HTML-API, Style Sheet, HTML und CSS lernen, HTML-Grundlagen, Websites entwickeln