Einstieg in HTML und CSS

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-SystemMit vielen Infos zu barrierefreiem Design Aus dem Inhalt:Schnellstart HTML und CSSSchriften, Farben, HyperlinksBarrierefreie GestaltungSelektoren und EinheitenStylesheets ordnenKontaktformulare und TabellenBox-Modelle im DetailSpezifität, Kaskade und VererbungPositionierungMedia Queries und MehrspaltigkeitMobile VersionLayouts mit Flexbox und CSS Grid

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

1. 1 . . . Webseiten sehen nicht überall gleich aus . . . 35
1. 2 . . . Webseiten bestehen aus Quelltext . . . 37
1. 3 . . . Quelltext besteht aus HTML, CSS und JavaScript . . . 38
1. 4 . . . Webseiten werden von einem Browser dargestellt . . . 41
1. 5 . . . Webseiten und Barrierefreiheit . . . 43
1. 6 . . . Editoren zum Schreiben und Bearbeiten von Quelltext . . . 44
1. 7 . . . Websites zum Nachschlagen von HTML und CSS . . . 45
1. 8 . . . Auf einen Blick . . . 48

2. HTML kennenlernen: die erste Webseite erstellen . . . 49

2. 1 . . . Webseiten bestehen aus rechteckigen Kästchen . . . 50
2. 2 . . . HT-M-L: die »HyperText Markup Language« . . . 51
2. 3 . . . Die erste Webseite erstellen: »index. html« . . . 52
2. 4 . . . Jede Webseite hat ein HTML-Grundgerüst . . . 54
2. 5 . . . Der < ! doctype> und das Stammelement < html> . . . 56
2. 6 . . . HTML-Elemente können im Anfangs-Tag Attribute enthalten . . . 57
2. 7 . . . < head> enthält wichtige Infos über die Webseite . . . 58
2. 8 . . . < body> enthält den im Browser sichtbaren Bereich der Webseite . . . 61
2. 9 . . . Der Kopfbereich < header> mit Überschrift und Slogan . . . 63
2. 10 . . . Entwicklerwerkzeuge: HTML im Browser untersuchen . . . 64
2. 11 . . . Auf einen Blick . . . 66

3. CSS kennenlernen: die erste Webseite gestalten . . . 67

3. 1 . . . Jeder Browser hat ein eingebautes Stylesheet . . . 67
3. 2 . . . HTML-Elemente als rechteckige Kästchen visualisieren . . . 69
3. 3 . . . Das erste eigene Stylesheet: »style. css« . . . 70
3. 4 . . . Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für < body> . . . 72
3. 5 . . . Den Kopfbereich < header> im CSS selektieren und gestalten . . . 74
3. 6 . . . Wichtige Vokabeln: der Aufbau einer CSS-Regel . . . 76
3. 7 . . . Entwicklerwerkzeuge: CSS im Browser untersuchen . . . 77
3. 8 . . . Auf einen Blick . . . 79

TEIL II. HTML (mit einer Prise CSS) . . . 81
4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen . . . 83

4. 1 . . . Überschriften strukturieren den Inhalt: < h1> bis < h6> . . . 84
4. 2 . . . Absätze und Hervorhebungen: < p> , < strong> , < em> . . . 86
4. 3 . . . Webseiten in unterschiedlichen Umgebungen testen . . . 88
4. 4 . . . Listen erstellen mit < ul> , < ol> und < li> . . . 89
4. 5 . . . Listen verschachteln: eine Liste in einer Liste . . . 93
4. 6 . . . Über Blockelemente, Inline-Elemente und »display« . . . 95
4. 7 . . . Auf einen Blick . . . 96

5. HTML und Hyperlinks -- das Besondere am Web . . . 97

5. 1 . . . Das Standardverhalten von Hyperlinks . . . 97
5. 2 . . . Anatomie eines Hyperlinks: < a href=" . . . " > Linktext< /a> . . . 98
5. 3 . . . Hyperlinks in neuem Tab oder Fenster öffnen . . . 100
5. 4 . . . Eine Navigation ist eine Liste mit Links . . . 101
5. 5 . . . Eine grundlegende Gestaltung für die Navigation . . . 103
5. 6 . . . Im Fußbereich einen Link »Nach oben« einfügen . . . 109
5. 7 . . . Links zu Dateien und E-Mail-Adressen . . . 112
5. 8 . . . Auf einen Blick . . . 114

6. HTML-Elemente für Bilder, Audio und Video . . . 115

6. 1 . . . Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co . . . 115
6. 2 . . . Ein Bild als Logo einbinden mit < img> . . . 117
6. 3 . . . Pixelbilder in Zeiten hochauflösender Bildschirme . . . 121
6. 4 . . . Bilder mit flexibler Breite: »max-width: 100%« . . . 125
6. 5 . . . Abbildungen beschriften: < figure> und < figcaption> . . . 128
6. 6 . . . »Lazy Loading«: Seiten mit vielen Bildern optimieren . . . 130
6. 7 . . . Audiodateien einbinden mit < audio> . . . 131
6. 8 . . . Videodateien einbinden mit < video> . . . 133
6. 9 . . . Auf einen Blick . . . 136

7. Semantische HTML-Elemente zur Strukturierung von Webseiten und Inhalten . . . 139

7. 1 . . . Warum semantische Strukturelemente eine sinnvolle Sache sind . . . 140
7. 2 . . . Kopfbereiche auszeichnen mit < header> . . . 140
7. 3 . . . Navigationsbereiche erstellen mit < nav> . . . 143
7. 4 . . . Der Hauptinhalt einer Webseite steht in < main> . . . 145
7. 5 . . . Fußbereiche auszeichnen mit < footer> . . . 146
7. 6 . . . Inhaltliche Abschnitte erstellen mit < section> . . . 147
7. 7 . . . In sich geschlossene, eigenständige Blöcke mit < article> . . . 149
7. 8 . . . Bereiche mit zusätzlichen Informationen: < aside> . . . 153
7. 9 . . . Elemente mit < div> semantisch neutral gruppieren . . . 155
7. 10 . . . Orientierungspunkte für Screenreader: »ARIA Landmark Roles« . . . 156
7. 11 . . . Auf einen Blick . . . 160

8. Weitere HTML-Elemente zur Auszeichnung von Text . . . 161

8. 1 . . . Zitate auszeichnen mit < blockquote> und < cite> . . . 161
8. 2 . . . Einen Zeilenumbruch erzwingen mit < br> . . . 165
8. 3 . . . Kontaktinformationen auszeichnen mit < address> . . . 165
8. 4 . . . Zeitangaben für Menschen und Maschinen: < time> . . . 167
8. 5 . . . Ausklappbare Inhalte: < details> und < summary> . . . 169
8. 6 . . . Änderungen am Text dokumentieren: < del> und < ins> . . . 172
8. 7 . . . Kurz vorgestellt: < span> , < hr> und < small> . . . 174
8. 8 . . . Weitere Inline-Elemente in der Übersicht . . . 175
8. 9 . . . Know-how: Zeichensätze und Sonderzeichen . . . 176
8. 10 . . . Auf einen Blick . . . 179

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

9. 1 . . . Im Web basieren alle Interaktionen mit Besuchern auf HTML-Formularen . . . 181
9. 2 . . . Das Element < form> definiert ein Formular . . . 182
9. 3 . . . Einzeilige Eingabefelder mit < input> und < label> . . . 183
9. 4 . . . Mehrzeilige Eingabefelder mit < textarea> und < label> . . . 188
9. 5 . . . Zum Anklicken: Kontrollkästchen, Optionsfelder und Auswahllisten . . . 189
9. 6 . . . Formularfelder gruppieren mit < fieldset> und < legend> . . . 193
9. 7 . . . Ein Button zum Abschicken der Formulardaten . . . 194
9. 8 . . . Ein Kontaktformular mit DSGVO-Checkbox erstellen . . . 195
9. 9 . . . Auf einen Blick . . . 201

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

10. 1 . . . Eine einfache HTML-Tabelle: < table> , < tr> und < td> . . . 203
10. 2 . . . Tabellenüberschriften stehen in < th> . . . 205
10. 3 . . . Tabellen strukturieren: < thead> , < tbody> und < tfoot> . . . 206
10. 4 . . . Zellen verbinden mit »colspan« und »rowspan« . . . 207
10. 5 . . . Übung: Tabelle für »Die 10 besten Alben aller Zeiten« . . . 208
10. 6 . . . Auf einen Blick . . . 213

11. Von der Webseite zur Website . . . 215

11. 1 . . . »Sie sind hier«: aktuellen Menüpunkt hervorheben . . . 215
11. 2 . . . Rechtliche Pflichtlinks im Footer einfügen . . . 219
11. 3 . . . Das HTML überprüfen mit dem HTML-Validator . . . 221
11. 4 . . . Die Seiten »News«, »Über uns« und »Kontakt« erstellen . . . 223
11. 5 . . . Inhalte für die Seite »News« hinzufügen . . . 226
11. 6 . . . Ein Bild auf der Seite »Über uns« einfügen . . . 230
11. 7 . . . Die Seite »Kontakt« mit Kontaktdaten und Formular . . . 232
11. 8 . . . Die Seiten »Datenschutz« und »Impressum« . . . 234
11. 9 . . . Auf einen Blick . . . 235

TEIL III. CSS -- Grundlagen . . . 237
12. Gestalten per CSS: Box-Modell, Farben und Einheiten . . . 239

12. 1 . . . CSS kann man an drei verschiedenen Stellen schreiben . . . 239
12. 2 . . . Das Box-Modell kennenlernen: »padding«, »border« und »margin« . . . 242
12. 3 . . . Farben in CSS: Farbnamen, hexadezimale Schreibweise und Transparenz . . . 248
12. 4 . . . Die wichtigsten Längeneinheiten: px, em, rem, % & Co . . . 253
12. 5 . . . Auf einen Blick . . . 257

13. Das Box-Modell in Aktion: »padding«, »border« und »margin« . . . 259

13. 1 . . . Das Box-Modell im Browser visualisieren . . . 259
13. 2 . . . Die Breite begrenzen: »min-width« und »max-width« . . . 261
13. 3 . . . Der Abstand zum Rand: »padding« . . . 262
13. 4 . . . Rahmenlinien gestalten mit »border« und »border-radius« . . . 266
13. 5 . . . Blockboxen horizontal zentrieren mit »margin« . . . 270
13. 6 . . . Abstände zwischen den Elementen mit »margin« . . . 272
13. 7 . . . Tipps zum Gestalten mit »padding« und »margin« . . . 273
13. 8 . . . Know-how: Collapsing Margins -- vertikale Außenabstände kollabieren . . . 276
13. 9 . . . Auf einen Blick . . . 280

14. Die wichtigsten Selektoren und ihre Spezifität . . . 283

14. 1 . . . Einfache Selektoren: Elemente, Gruppierung und * . . . 284
14. 2 . . . Klassen sind klasse: der Selektor mit dem Punkt . . . 285
14. 3 . . . IDs sind einmalig: der Selektor mit der Raute . . . 287
14. 4 . . . Attributselektoren haben eckige Klammern: [attribut] . . . 288
14. 5 . . . DOM: die Hierarchie der HTML-Elemente . . . 293
14. 6 . . . Nachfahren auswählen: der Selektor mit Leerzeichen . . . 294
14. 7 . . . Selektoren zum Auswählen von Kindelementen . . . 294
14. 8 . . . Nachbarn und Geschwister selektieren mit + und ~ . . . 298
14. 9 . . . Kurz vorgestellt: der praktische Elternselektor :has() . . . 300
14. 10 . . . Nützliche Quellen zum Nachschlagen von Selektoren . . . 301
14. 11 . . . Spezifität: Einige Selektoren sind wichtiger als andere . . . 302
14. 12 . . . Auf einen Blick . . . 304

15. Text gestalten: Schriften, Listen, Links und mehr . . . 305

15. 1 . . . Klassische Schriftarten mit und ohne Serifen im Web . . . 306
15. 2 . . . Die Schriftart definieren mit »font-family« . . . 307
15. 3 . . . Die Systemschrift des Geräts: gut lesbar und echt schnell . . . 310
15. 4 . . . Webfonts -- die Schriftart gleich mitliefern . . . 311
15. 5 . . . Schnell und einfach: Google Fonts selbst ausliefern . . . 312
15. 6 . . . Gut lesbarer Text mit »font-size« und »line-height« . . . 317
15. 7 . . . Listen: Aufzählungszeichen gestalten per CSS . . . 322
15. 8 . . . Hyperlinks: Unterstreichung gestalten mit »text-decoration« . . . 325
15. 9 . . . Hyperlinks: Linkzustände gestalten mit Pseudoklassen . . . 327
15. 10 . . . Links in neuem Tab kennzeichnen mit dem Pseudoelement »::after« . . . 330
15. 11 . . . Weitere Eigenschaften zur Gestaltung von Schrift und Text . . . 333
15. 12 . . . Auf einen Blick . . . 336

16. Der Browser und das CSS: Vererbung, Standardwert und Kaskade . . . 339

16. 1 . . . Überblick: Vererbung, Standardwert und Kaskade . . . 339
16. 2 . . . Nichts gefunden? Vererbung oder Standardwert . . . 340
16. 3 . . . Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge . . . 343
16. 4 . . . Auf einen Blick . . . 350

17. Boxen gestalten: Hintergrund, Schatten und am Bildschirm ausblenden . . . 351

17. 1 . . . Hintergrundgrafiken per CSS einbinden und gestalten . . . 352
17. 2 . . . Lineare Farbverläufe: »background-image« und »linear-gradient()« . . . 358
17. 3 . . . Schattenboxen mit »box-shadow« . . . 360
17. 4 . . . Zitate als Kundenstimmen gestalten . . . 362
17. 5 . . . »Call to Action«: Links in Buttons verwandeln . . . 365
17. 6 . . . Boxen am Bildschirm ausblenden: »visually-hidden« . . . 372
17. 7 . . . »Skip-Link«: per Tastatur direkt zum Inhalt springen . . . 375
17. 8 . . . Auf einen Blick . . . 378

18. Ordnung halten: Stylesheets aufräumen und organisieren . . . 379

18. 1 . . . Benutzerdefinierte Eigenschaften: Variablen in CSS . . . 380
18. 2 . . . Stylesheets mit Kommentaren strukturieren . . . 383
18. 3 . . . Verschiedene Schreibweisen für CSS-Regeln . . . 384
18. 4 . . . CSS überprüfen mit dem CSS-Validator . . . 387
18. 5 . . . Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung . . . 388
18. 6 . . . Die Modul-Stylesheets erstellen und importieren . . . 390
18. 7 . . . Das CSS auf die Modul-Stylesheets verteilen . . . 393
18. 8 . . . Ein neues Modul für ein modernes Layout . . . 398
18. 9 . . . Auf einen Blick . . . 405

TEIL IV. CSS -- Layout . . . 407
19. Der normale Flow, »position« und »float« . . . 409

19. 1 . . . Flow: Die Seite ist ein langer ruhiger Fluss . . . 410
19. 2 . . . Versetzt weiterfließen mit »position: relative« . . . 411
19. 3 . . . Raus aus dem Flow mit »position: absolute« . . . 412
19. 4 . . . Wie ein Fels in der Brandung mit »position: fixed« . . . 416
19. 5 . . . Scrollen und stehen bleiben mit »position: sticky« . . . 418
19. 6 . . . Positionierte Boxen und der »z-index« . . . 419
19. 7 . . . Text um eine Abbildung fließen lassen mit »float« . . . 421
19. 8 . . . Floats beenden mit »clear: both« . . . 424
19. 9 . . . Praktisch: Klassen zum Floaten und Clearen . . . 425
19. 10 . . . Floats umschließen mit »display: flow-root« . . . 426
19. 11 . . . Floats nicht rechteckig umfließen mit »shape-outside« . . . 429
19. 12 . . . Auf einen Blick . . . 430

20. Media Queries und responsives Webdesign . . . 433

20. 1 . . . Responsives Webdesign: Das Web wird flexibel . . . 433
20. 2 . . . Medientypen definieren das Ausgabemedium . . . 434
20. 3 . . . Media Queries = Medientypen + Medieneigenschaften . . . 437
20. 4 . . . Media Queries brauchen den »Meta-Viewport« . . . 441
20. 5 . . . Media Queries und die Suche nach dem Breakpoint . . . 443
20. 6 . . . Responsive Schriftgröße mit und ohne Media Queries . . . 444
20. 7 . . . Auf einen Blick . . . 448

21. Flexbox: Mehrspaltige Layouts mit »display: flex« . . . 449

21. 1 . . . Flexbox und Grid -- jenseits vom »Block Formatting Context« . . . 449
21. 2 . . . Flex-Container erstellen: »display: flex« . . . 450
21. 3 . . . Fließrichtung von Flex-Items kontrollieren: »flex-flow« . . . 454
21. 4 . . . Flex-Items an der Hauptachse ausrichten: »justify-content« . . . 458
21. 5 . . . Flex-Items an der Querachse ausrichten: »align-items« und »align-self« . . . 459
21. 6 . . . Automatische Abstände für Flex-Items mit »margin« . . . 462
21. 7 . . . Flexibilität für Flex-Items: die Zauberformel »flex: 1« . . . 464
21. 8 . . . Flexbox in Aktion: »Sticky Footer« am unteren Rand des Browserfensters . . . 466
21. 9 . . . Die Reihenfolge von Flex-Items ändern . . . 470
21. 10 . . . Auf einen Blick . . . 472

22. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« . . . 475

22. 1 . . . Ein »Grid« ist ein Raster und schafft Ordnung . . . 475
22. 2 . . . Mehr Platz für moderne Browser: »@supports« . . . 476
22. 3 . . . Ein Grid-Layout: Boxen neben- und untereinander . . . 477
22. 4 . . . Grid-Items manuell platzieren: 1. nummerierte Linien . . . 483
22. 5 . . . Grid-Items manuell platzieren: 2. benannte Bereiche . . . 488
22. 6 . . . Die Grid-Zauberformel: responsiv ohne Media Query . . . 492
22. 7 . . . Verschachtelte Grids mit »subgrid« . . . 498
22. 8 . . . Flexbox und Grid sind ein gutes Team . . . 499
22. 9 . . . Auf einen Blick . . . 502

23. Flexible Icons und responsive Bilder . . . 505

23. 1 . . . Flexible Icons: skalierbare Symbole mit SVG . . . 505
23. 2 . . . SVG-Icons mit < img> als Datei einfügen . . . 507
23. 3 . . . SVG-Icons inline direkt im HTML einfügen . . . 510
23. 4 . . . HTML und responsive Bilder . . . 511
23. 5 . . . Unterschiedliche Bilddateien je nach Viewportbreite . . . 512
23. 6 . . . Unterschiedliche Bildmotive und Dateiformate . . . 517
23. 7 . . . Auf einen Blick . . . 519

24. Eine responsive Navigation erstellen . . . 521

24. 1 . . . Die responsive Navigation im Überblick . . . 521
24. 2 . . . Schritt 1: Eine vertikale Navigation für schmale Viewports . . . 524
24. 3 . . . Schritt 2: Eine horizontale Navigation für breitere Viewports . . . 526
24. 4 . . . Schritt 3: Menübutton einfügen mit < template> und JavaScript . . . 528
24. 5 . . . Schritt 4: Menübutton per CSS gestalten . . . 532
24. 6 . . . Schritt 5: Navigation per CSS ein- und ausblenden . . . 536
24. 7 . . . Auf einen Blick . . . 540

Index . . . 541