Peter Müller

Einstieg in HTML und CSS

Webseiten programmieren und gestalten mit HTML und CSS - ganz ohne Vorwissen. Alle Beispielprojekte zum Download

• Broschiertes Buch

Produktbeschreibung

HTML und CSS lernen mit dem beliebten Erklärprofi Peter Müller!Sie suchen eine gute Einführung in die Gestaltung von Webseiten mit HTML und CSS? Dann liegen Sie mit diesem Buch genau richtig! Peter Müller erklärt Ihnen einprägsam und mit der richtigen Prise Humor, was Sie bei der modernen Webgestaltung mit HTML und CSS beachten müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich. Die anschaulichen Beispiele aus der Praxis können Sie leicht auf eigene Projekte anwenden. Mit vielen Abbildungen, die Ihnen das Verständnis der wichtigsten Webkonzepte erleichtern. Und der komplette Beispielcode steht Ihnen zum Lernen und Üben bereit. Perfekt für Webseiten-Selbermacher!

Grundlagen, Konzepte und GestaltungSpezifität, Kaskade und Positionierung verständlich erklärtResponsive Webseiten und responsive BilderModerne Layouts mit Flexbox und Grid-System

Aus dem Inhalt:

Schnellstart HTML und CSSSchriften, Farben, HyperlinksSelektoren und EinheitenStylesheets ordnenKontaktformular und TabellenBox-ModellSpezifität, Kaskade und VererbungPositionierungMedia Queries und MehrspaltigkeitMobile VersionLayouts mit Flexbox und CSS Grid

Produktdetails

• Rheinwerk Computing
• Verlag: Rheinwerk Verlag
• Artikelnr. des Verlages: 459/07646
• Seitenzahl: 507
• Erscheinungstermin: 25. Juni 2020
• Deutsch
• Abmessung: 231mm x 171mm x 30mm
• Gewicht: 924g
• ISBN-13: 9783836276467
• Artikelnr.: 58694696

Inhaltsangabe

Materialien zum Buch ... 26
Geleitwort ... 27
Vorwort ... 29
Teil I. Webseiten, HTML und CSS ... 33
1. Wissenswertes über Webseiten ... 35

1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 35
1.2 ... Webseiten bestehen aus Quelltext ... 36
1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 37
1.4 ... Webseiten werden von einem Browser dargestellt ... 40
1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 42
1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 43
1.7 ... Auf einen Blick ... 46

2. HTML kennenlernen: Die erste Webseite erstellen ... 47

2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 48
2.2 ... HT-M-L: die »HyperText Markup Language« ... 49
2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 50
2.4 ... Der und das Stammelement ... 54
2.5 ... HTML-Elemente können Attribute haben ... 55
2.6 ... Der enthält wichtige Infos über die Webseite ... 56
2.7 ... Bitte nicht verkleinern: ... 59
2.8 ... Der sichtbare Bereich der Webseite steht in ... 61
2.9 ... Der Kopfbereich der Webseiten: ... 63
2.10 ... Entwicklerwerkzeuge im Browser: HTML analysieren ... 64
2.11 ... Eine sehr kurze Geschichte von HTML ... 65
2.12 ... Auf einen Blick ... 67

3. CSS kennenlernen: Die erste Webseite gestalten ... 69

3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 69
3.2 ... Das HTML für als schematische Darstellung ... 70
3.3 ... Das erste eigene Stylesheet: »style.css« ... 72
3.4 ... Die erste CSS-Regel: Hintergrundfarbe für ... 73
3.5 ... Den Kopfbereich selektieren und gestalten ... 76
3.6 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 78
3.7 ... Entwicklerwerkzeuge im Browser: CSS analysieren ... 79
3.8 ... Eine sehr kurze Geschichte von CSS ... 80
3.9 ... Auf einen Blick ... 81

Teil II. HTML (mit einer Prise CSS) ... 83
4. HTML-Elemente für Überschriften, Text und Listen ... 85

4.1 ... Überschriften strukturieren den Inhalt: bis ... 85
4.2 ... Absätze und Hervorhebungen:

, , ... 88
4.3 ... Webseiten in unterschiedlich großen Viewports testen ... 90
4.4 ... Listen erstellen mit

,
und
1. ... 92
   4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 94
   4.6 ... Beschreibungslisten mit , und ... 96
   4.7 ... Ein kurzer Blick auf das Browser-Stylesheet ... 98
   4.8 ... Über Blockelemente, Inline-Elemente und »display« ... 100
   4.9 ... Auf einen Blick ... 102
   
   5. Hyperlinks -- das Besondere am Web ... 103
   
   5.1 ... Das Standardverhalten von Hyperlinks ... 103
   5.2 ... Anatomie eines Hyperlinks: Linktext ... 104
   5.3 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 106
   5.4 ... Eine Navigation ist eine Liste mit Links ... 107
   5.5 ... Eine grundlegende Gestaltung für die Navigation ... 109
   5.6 ... Im Fußbereich einen Link »Nach oben« einfügen ... 114
   5.7 ... Besondere Links: Dateien, E-Mail und Telefon ... 117
   5.8 ... Auf einen Blick ... 119
   
   6. HTML-Elemente für Bilder, Audio und Video ... 121
   
   6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG und SVG ... 121
   6.2 ... Ein Bild als Logo einbinden mit ... 123
   6.3 ... Bilder mit flexibler Breite: »max-width: 100%« ... 127
   6.4 ... Abbildungen beschriften: und ... 130
   6.5 ... Audiodateien einbinden mit ... 133
   6.6 ... Bewegte Bilder einbinden mit ... 135
   6.7 ... Auf einen Blick ... 138
   
   7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 139
   
   7.1 ... Die semantischen Strukturelemente auf einen Blick ... 140
   7.2 ... Kopfbereiche auszeichnen: ... 140
   7.3 ... Navigationsbereiche erstellen mit ... 143
   7.4 ... Der Hauptinhalt einer Webseite steht in ... 146
   7.5 ... Fußbereiche auszeichnen: ... 147
   7.6 ... Inhaltliche Abschnitte erstellen: ... 148
   7.7 ... In sich geschlossene, eigenständige Blöcke: ... 151
   7.8 ... Bereiche mit zusätzlichen Informationen: ... 154
   7.9 ... Elemente semantisch neutral gruppieren: ... 156
   7.10 ... Auf einen Blick ... 158
   
   8. Weitere HTML-Elemente zur Auszeichnung von Inhalten ... 159
   
   8.1 ... Zitate auszeichnen mit

und ... 159
8.2 ... Einen Zeilenumbruch erzwingen mit
... 163
8.3 ... Kontaktinformationen auszeichnen mit ... 163
8.4 ... Änderungen am Text dokumentieren: und ... 165
8.5 ... Zeitangaben für Menschen und Maschinen: ... 167
8.6 ... Kurz vorgestellt: , und ... 169
8.7 ... Ausklappbare Inhalte: und ... 171
8.8 ... Weitere Inline-Elemente in der Übersicht ... 174
8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 175
8.10 ... Auf einen Blick ... 178

9. HTML-Elemente zum Erstellen von Formularen ... 179

9.1 ... Formulare dienen zur Interaktion mit den Besuchern ... 179
9.2 ... Das Element definiert ein Formular ... 180
9.3 ... Einzeilige Eingabefelder mit und ... 181
9.4 ... Mehrzeilige Eingabefelder mit und ... 186
9.5 ... Kontrollkästchen und Optionsfelder ... 187
9.6 ... Formularfelder gruppieren:

und

... 189
9.7 ... Ein Button zum Abschicken der Formulardaten ... 190
9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 192
9.9 ... Auf einen Blick ... 198

10. HTML-Elemente zum Erstellen von Tabellen ... 201

10.1 ... Eine einfache HTML-Tabelle: , und , und ... 204
10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 205
10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 206
10.6 ... Auf einen Blick ... 211

11. Von der Webseite zur Website ... 213

11.1 ... Fine-Tuning für die Startseite ... 213
11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 218
11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 220
11.4 ... Die Seite »News« mit Inhalt füllen ... 224
11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 228
11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 229
11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 233
11.8 ... Auf einen Blick ... 234

Teil III. CSS -- Grundlagen ... 235
12. Gestalten per CSS: Farben und Einheiten ... 237

12.1 ... Überblick: Webseiten gestalten per CSS ... 237
12.2 ... CSS kann an drei Stellen definiert werden ... 238
12.3 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 240
12.4 ... Hexadezimale Farbangaben: #rrggbb ... 241
12.5 ... Farben definieren mit rgb() und rgba() ... 244
12.6 ... Werkzeuge und Websites zur Arbeit mit Farben ... 246
12.7 ... Wichtige Einheiten: »px«, »em«, »rem«, »%« & Co. ... 248
12.8 ... Auf einen Blick ... 252

13. Die wichtigsten Selektoren und Spezifität ... 253

13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 253
13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 255
13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 257
13.4 ... Selektoren für Nachfahren und Kinder ... 258
13.5 ... Attributselektoren haben eckige Klammern ... 264
13.6 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 267
13.7 ... Auf einen Blick ... 269

14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 271

14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 271
14.2 ... Die Kaskade im Browser analysieren ... 277
14.3 ... Nichts gefunden? Vererbung oder Standardwert ... 279
14.4 ... Überblick: Kaskade, Vererbung oder Standardwert ... 281
14.5 ... Auf einen Blick ... 283

15. Schrift und Text gestalten per CSS ... 285

15.1 ... Klassische Schriftarten im Web ... 285
15.2 ... Die Schriftart definieren mit »font-family« ... 287
15.3 ... Webfonts -- die Schriftart gleich mitliefern ... 291
15.4 ... Gut lesbarer Fließtext: »font-size« und »line-height« ... 295
15.5 ... Hyperlinks gestalten mit Pseudoklassen ... 299
15.6 ... Weitere Eigenschaften zur Schrift- und Textgestaltung ... 303
15.7 ... Auf einen Blick ... 306

16. Das Box-Modell für Block- und Inline-Boxen ... 307

16.1 ... Das klassische Box-Modell für Blockboxen ... 307
16.2 ... Das Box-Modell im Browser visualisieren ... 312
16.3 ... Die Breite von Blockboxen begrenzen: »max-width« ... 313
16.4 ... Blockboxen zentrieren mit »margin: auto« ... 314
16.5 ... Der Abstand zum Rand: »padding« ... 315
16.6 ... Vertikale Außenabstände und Collapsing Margins ... 319
16.7 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 324
16.8 ... Das Box-Modell für Inline-Boxen ... 326
16.9 ... Inline-Block: Blockboxen, aber nebeneinander ... 327
16.10 ... Auf einen Blick ... 328

17. Boxen gestalten per CSS ... 329

17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 329
17.2 ... Schattenboxen mit »box-shadow« ... 336
17.3 ... Abgerundete Ecken mit »border-radius« ... 338
17.4 ... Lineare Farbverläufe mit »linear-gradient()« ... 339
17.5 ... Gestalten mit dem Box-Modell: Zitate ... 341
17.6 ... Links de luxe: Hyperlinks als Button gestalten ... 344
17.7 ... Externe Hyperlinks kennzeichnen mit »::after« ... 349
17.8 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 352
17.9 ... Auf einen Blick ... 355

18. Ordnung halten: Stylesheets organisieren ... 357

18.1 ... Kommentare zum Strukturieren von Stylesheets ... 358
18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 359
18.3 ... Ein zentrales Stylesheet erleichtert die Entwicklung ... 362
18.4 ... Die einzelnen Stylesheets erstellen und einbinden ... 364
18.5 ... Aufräumen: Das CSS auf die Stylesheets verteilen ... 366
18.6 ... CSS überprüfen mit dem CSS-Validator ... 373
18.7 ... Ein neues Modul für ein modernes Layout ... 374
18.8 ... Auf einen Blick ... 380

Teil IV. CSS -- Layout ... 381
19. Media Queries und responsives Webdesign ... 383

19.1 ... »Getting responsive«: Das Web wird flexibel ... 383
19.2 ... Medientypen definieren das Ausgabemedium ... 384
19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 387
19.4 ... Media Queries und der »Meta-Viewport« ... 391
19.5 ... Media Queries und der richtige Breakpoint ... 393
19.6 ... Mehrspaltiger Text mit dem »Multi-column Layout« ... 394
19.7 ... Auf einen Blick ... 396

20. Der Flow und die Eigenschaft »position« ... 399

20.1 ... Der normale Flow mit »position: static« ... 399
20.2 ... Versetzt weiterfließen mit »position: relative« ... 401
20.3 ... Raus aus dem Flow mit »position: absolute« ... 402
20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 403
20.5 ... Wie ein Fels in der Brandung: »position: fixed« ... 405
20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 408
20.7 ... Positionierte Boxen und der »z-index« ... 409
20.8 ... Auf einen Blick ... 412

21. Schweben und schweben lassen: »float« ... 413

21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 413
21.2 ... Floats beenden mit »clear: both« ... 417
21.3 ... Floats umschließen mit »display: flow-root« ... 417
21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 419
21.5 ... Das Umschließen von Floats mit »@supports« ... 420
21.6 ... Auf einen Blick ... 422

22. Gestalten per Flexbox: Das »CSS Flexible Box Layout« ... 423

22.1 ... Flexbox und Grid -- das neue CSS-Layout ... 423
22.2 ... Los geht's: Flex-Container erstellen mit »display: flex« ... 425
22.3 ... Fließrichtung: Die Richtung ändern mit »flex-flow« ... 428
22.4 ... Ausrichtung: Leerraum verteilen mit »justify-content« ... 431
22.5 ... Ausrichtung: Automatische Abstände mit »margin« ... 432
22.6 ... Flexibilität: Die Zauberformel »flex: 1« ... 434
22.7 ... Flexbox in Aktion: Den Footer platzieren ... 437
22.8 ... Die Reihenfolge der Flex-Items ändern ... 440
22.9 ... Auf einen Blick ... 441

23. Eine responsive Navigation erstellen ... 443

23.1 ... Die responsive Navigation im Überblick ... 443
23.2 ... Schritt 1: Grundlegende Formatierung der Navigation ... 445
23.3 ... Schritt 2: Den Menübutton im Quelltext erstellen ... 447
23.4 ... Schritt 3: Den Menübutton per CSS gestalten ... 449
23.5 ... Schritt 4: Die Navigationsliste per CSS ausblenden ... 452
23.6 ... Schritt 5: Die Navigationsliste per CSS einblenden ... 453
23.7 ... Schritt 6: Media Query und horizontale Navigation ... 455
23.8 ... Die Meta-Navigation im Fußbereich gestalten ... 456
23.9 ... Auf einen Blick ... 458

24. Gestalten mit Raster: Das »CSS Grid Layout« ... 459

24.1 ... Ein Grid ist ein Raster und schafft Ordnung ... 459
24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 460
24.3 ... »Let's grid«: Drei Infoboxen nebeneinander ... 461
24.4 ... Grid-Items mit nummerierten Linien platzieren ... 467
24.5 ... Praktisch: Ein Grid mit benannten Bereichen ... 471
24.6 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 474
24.7 ... Auf einen Blick ... 480

25. Flexible Icons und responsive Bilder ... 483

25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 483
25.2 ... Pixelbilder und hochauflösende Bildschirme ... 490
25.3 ... Unterschiedliche Bilder je nach Pixeldichte ... 491
25.4 ... Unterschiedliche Bilder je nach Viewportbreite ... 493
25.5 ... Auf einen Blick ... 497

Index ... 499

... 201 10.2 ... Tabellenüberschriften stehen in	... 203 10.3 ... Tabellen strukturieren:

, und , und ... 204
10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 205
10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 206
10.6 ... Auf einen Blick ... 211

11. Von der Webseite zur Website ... 213

11.1 ... Fine-Tuning für die Startseite ... 213
11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 218
11.3 ... Die Seiten »News«, »Über uns« und »Kontakt« erstellen ... 220
11.4 ... Die Seite »News« mit Inhalt füllen ... 224
11.5 ... Ein Bild auf der Seite »Über uns« einfügen ... 228
11.6 ... Kontaktdaten und Formular für die Seite »Kontakt« ... 229
11.7 ... Die Seiten »Impressum« und »Datenschutz« ... 233
11.8 ... Auf einen Blick ... 234

Teil III. CSS -- Grundlagen ... 235
12. Gestalten per CSS: Farben und Einheiten ... 237

12.1 ... Überblick: Webseiten gestalten per CSS ... 237
12.2 ... CSS kann an drei Stellen definiert werden ... 238
12.3 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 240
12.4 ... Hexadezimale Farbangaben: #rrggbb ... 241
12.5 ... Farben definieren mit rgb() und rgba() ... 244
12.6 ... Werkzeuge und Websites zur Arbeit mit Farben ... 246
12.7 ... Wichtige Einheiten: »px«, »em«, »rem«, »%« & Co. ... 248
12.8 ... Auf einen Blick ... 252

13. Die wichtigsten Selektoren und Spezifität ... 253

13.1 ... Einfache Selektoren: Elemente, Gruppierung und »*« ... 253
13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 255
13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 257
13.4 ... Selektoren für Nachfahren und Kinder ... 258
13.5 ... Attributselektoren haben eckige Klammern ... 264
13.6 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 267
13.7 ... Auf einen Blick ... 269

14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 271

14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 271
14.2 ... Die Kaskade im Browser analysieren ... 277
14.3 ... Nichts gefunden? Vererbung oder Standardwert ... 279
14.4 ... Überblick: Kaskade, Vererbung oder Standardwert ... 281
14.5 ... Auf einen Blick ... 283

15. Schrift und Text gestalten per CSS ... 285

15.1 ... Klassische Schriftarten im Web ... 285
15.2 ... Die Schriftart definieren mit »font-family« ... 287
15.3 ... Webfonts -- die Schriftart gleich mitliefern ... 291
15.4 ... Gut lesbarer Fließtext: »font-size« und »line-height« ... 295
15.5 ... Hyperlinks gestalten mit Pseudoklassen ... 299
15.6 ... Weitere Eigenschaften zur Schrift- und Textgestaltung ... 303
15.7 ... Auf einen Blick ... 306

16. Das Box-Modell für Block- und Inline-Boxen ... 307

16.1 ... Das klassische Box-Modell für Blockboxen ... 307
16.2 ... Das Box-Modell im Browser visualisieren ... 312
16.3 ... Die Breite von Blockboxen begrenzen: »max-width« ... 313
16.4 ... Blockboxen zentrieren mit »margin: auto« ... 314
16.5 ... Der Abstand zum Rand: »padding« ... 315
16.6 ... Vertikale Außenabstände und Collapsing Margins ... 319
16.7 ... Das intuitivere Box-Modell: »box-sizing: border-box« ... 324
16.8 ... Das Box-Modell für Inline-Boxen ... 326
16.9 ... Inline-Block: Blockboxen, aber nebeneinander ... 327
16.10 ... Auf einen Blick ... 328

17. Boxen gestalten per CSS ... 329

17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 329
17.2 ... Schattenboxen mit »box-shadow« ... 336
17.3 ... Abgerundete Ecken mit »border-radius« ... 338
17.4 ... Lineare Farbverläufe mit »linear-gradient()« ... 339
17.5 ... Gestalten mit dem Box-Modell: Zitate ... 341
17.6 ... Links de luxe: Hyperlinks als Button gestalten ... 344
17.7 ... Externe Hyperlinks kennzeichnen mit »::after« ... 349
17.8 ... Boxen am Bildschirm ausblenden: »visually-hidden« ... 352
17.9 ... Auf einen Blick ... 355

18. Ordnung halten: Stylesheets organisieren ... 357

18.1 ... Kommentare zum Strukturieren von Stylesheets ... 358
18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 359
18.3 ... Ein zentrales Stylesheet erleichtert die Entwicklung ... 362
18.4 ... Die einzelnen Stylesheets erstellen und einbinden ... 364
18.5 ... Aufräumen: Das CSS auf die Stylesheets verteilen ... 366
18.6 ... CSS überprüfen mit dem CSS-Validator ... 373
18.7 ... Ein neues Modul für ein modernes Layout ... 374
18.8 ... Auf einen Blick ... 380

Teil IV. CSS -- Layout ... 381
19. Media Queries und responsives Webdesign ... 383

19.1 ... »Getting responsive«: Das Web wird flexibel ... 383
19.2 ... Medientypen definieren das Ausgabemedium ... 384
19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 387
19.4 ... Media Queries und der »Meta-Viewport« ... 391
19.5 ... Media Queries und der richtige Breakpoint ... 393
19.6 ... Mehrspaltiger Text mit dem »Multi-column Layout« ... 394
19.7 ... Auf einen Blick ... 396

20. Der Flow und die Eigenschaft »position« ... 399

20.1 ... Der normale Flow mit »position: static« ... 399
20.2 ... Versetzt weiterfließen mit »position: relative« ... 401
20.3 ... Raus aus dem Flow mit »position: absolute« ... 402
20.4 ... Der Trick: »absolute« und »relative« kombinieren ... 403
20.5 ... Wie ein Fels in der Brandung: »position: fixed« ... 405
20.6 ... Scrollen und dann stehen bleiben: »position: sticky« ... 408
20.7 ... Positionierte Boxen und der »z-index« ... 409
20.8 ... Auf einen Blick ... 412

21. Schweben und schweben lassen: »float« ... 413

21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 413
21.2 ... Floats beenden mit »clear: both« ... 417
21.3 ... Floats umschließen mit »display: flow-root« ... 417
21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 419
21.5 ... Das Umschließen von Floats mit »@supports« ... 420
21.6 ... Auf einen Blick ... 422

22. Gestalten per Flexbox: Das »CSS Flexible Box Layout« ... 423

22.1 ... Flexbox und Grid -- das neue CSS-Layout ... 423
22.2 ... Los geht's: Flex-Container erstellen mit »display: flex« ... 425
22.3 ... Fließrichtung: Die Richtung ändern mit »flex-flow« ... 428
22.4 ... Ausrichtung: Leerraum verteilen mit »justify-content« ... 431
22.5 ... Ausrichtung: Automatische Abstände mit »margin« ... 432
22.6 ... Flexibilität: Die Zauberformel »flex: 1« ... 434
22.7 ... Flexbox in Aktion: Den Footer platzieren ... 437
22.8 ... Die Reihenfolge der Flex-Items ändern ... 440
22.9 ... Auf einen Blick ... 441

23. Eine responsive Navigation erstellen ... 443

23.1 ... Die responsive Navigation im Überblick ... 443
23.2 ... Schritt 1: Grundlegende Formatierung der Navigation ... 445
23.3 ... Schritt 2: Den Menübutton im Quelltext erstellen ... 447
23.4 ... Schritt 3: Den Menübutton per CSS gestalten ... 449
23.5 ... Schritt 4: Die Navigationsliste per CSS ausblenden ... 452
23.6 ... Schritt 5: Die Navigationsliste per CSS einblenden ... 453
23.7 ... Schritt 6: Media Query und horizontale Navigation ... 455
23.8 ... Die Meta-Navigation im Fußbereich gestalten ... 456
23.9 ... Auf einen Blick ... 458

24. Gestalten mit Raster: Das »CSS Grid Layout« ... 459

24.1 ... Ein Grid ist ein Raster und schafft Ordnung ... 459
24.2 ... Mehrspaltiges Layout nur für moderne Browser: »@supports« ... 460
24.3 ... »Let's grid«: Drei Infoboxen nebeneinander ... 461
24.4 ... Grid-Items mit nummerierten Linien platzieren ... 467
24.5 ... Praktisch: Ein Grid mit benannten Bereichen ... 471
24.6 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 474
24.7 ... Auf einen Blick ... 480

25. Flexible Icons und responsive Bilder ... 483

25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 483
25.2 ... Pixelbilder und hochauflösende Bildschirme ... 490
25.3 ... Unterschiedliche Bilder je nach Pixeldichte ... 491
25.4 ... Unterschiedliche Bilder je nach Viewportbreite ... 493
25.5 ... Auf einen Blick ... 497

Index ... 499

Rezensionen

»Wer eigene Webseiten responsiv gestalten möchte, sollte sich dieses pfiffige Lehrbuch für Theorie und Praxis unbedingt ansehen.« Mac Life 202103

Kundenbewertungen

Schreiben Sie eine Kundenbewertung zu diesem Produkt und gewinnen Sie mit etwas Glück einen 15,- EUR bücher.de–Gutschein!

Bewertung schreiben Bewertung schreiben

Bewertung schreiben Bewertung schreiben

 

2 Marktplatz-Angebote für "Einstieg in HTML und CSS" ab 12,04 €

... 201 10.2 ... Tabellenüberschriften stehen in	... 203 10.3 ... Tabellen strukturieren:

Zustand	Preis	Porto	Zahlung	Verkäufer	Rating
gebraucht; sehr gut	12,04 12,04 €	3,00 3,00 €	Banküberweisung, Kreditkarte, PayPal Zum Angebot	Buchpark GmbH	98,7%	Zum Angebot
leichte Gebrauchsspuren	22,25 22,25 €	2,99 2,99 €	Banküberweisung, PayPal Zum Angebot	Berg-Berg Bücherwelt Inh.Aksoy	98,7%	Zum Angebot