>
2.8 ... Der Kopfbereich >
2.9 ... Entwicklerwerkzeuge im Browser: HTML untersuchen ... 60
2.10 ... Auf einen Blick ... 63
3. CSS kennenlernen: Die erste Webseite gestalten ... 65
3.1 ... Jeder Browser hat ein fest eingebautes Stylesheet ... 65
3.2 ... Das HTML für >
3.3 ... Das erste eigene Stylesheet: 'style.css' ... 68
3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für >
3.5 ... Den Kopfbereich >
3.6 ... Entwicklerwerkzeuge: CSS im Browser untersuchen ... 74
3.7 ... Auf einen Blick ... 76
4. HTML-Elemente für Text: Überschriften, Absätze, Hervorhebungen und Listen ... 77
4.1 ... Überschriften strukturieren den Inhalt: > 4.2 ... Absätze und Hervorhebungen:
, , >
4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82
4.4 ... Listen erstellen mit
,
und
- >
4.5 ... Listen verschachteln: Eine Liste in einer Liste ... 87
4.6 ... Über Blockelemente, Inline-Elemente und die Eigenschaft 'display' ... 89
4.7 ... Auf einen Blick ... 90
5. Hyperlinks -- das Besondere am Web ... 91
5.1 ... Das Standardverhalten von Hyperlinks ... 91
5.2 ... Anatomie eines Hyperlinks: Linktext ... 92
5.3 ... Hyperlinks und sinnvolle Linktexte: das 'Klicken-Sie-hier'-Syndrom ... 94
5.4 ... Hyperlinks in neuem Tab oder Fenster öffnen ... 95
5.5 ... Eine Navigation ist eine Liste mit Links ... 96
5.6 ... Eine grundlegende Gestaltung für die Navigation ... 97
5.7 ... Im Fussbereich einen Link 'Nach oben' einfügen ... 102
5.8 ... Besondere Links: Dateien, E-Mail und Telefon ... 106
5.9 ... Auf einen Blick ... 108
6. HTML-Elemente für Bilder, Audio und Video ... 109
6.1 ... Über Grafikformate im Web: JPEG, GIF, PNG, SVG & Co ... 109
6.2 ... Ein Bild als Logo einbinden mit
6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114
6.4 ... Bilder mit flexibler Breite: 'max-width: 100%' ... 119
6.5 ... Abbildungen beschriften: 6.6 ... 'Lazy Loading': Seiten mit vielen Bildern optimieren ... 124
6.7 ... Let there be sound: Audiodateien einbinden mit
6.8 ... Bewegte Bilder einbinden mit
6.9 ... Auf einen Blick ... 131
7. HTML-Elemente zur Strukturierung von Webseiten und Inhalten ... 133
7.1 ... Die semantischen Strukturelemente auf einen Blick ... 134
7.2 ... Kopfbereiche auszeichnen mit >
7.3 ... Navigationsbereiche erstellen mit
7.4 ... Der Hauptinhalt einer Webseite steht in >
7.5 ... Fussbereiche auszeichnen mit >
7.6 ... Inhaltliche Abschnitte erstellen mit
7.7 ... In sich geschlossene, eigenständige Blöcke mit
7.8 ... Bereiche mit zusätzlichen Informationen:
7.9 ... Elemente mit >
7.10 ... Auf einen Blick ... 152
8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153
8.1 ... Zitate auszeichnen mit
und
>
8.2 ... Einen Zeilenumbruch erzwingen mit
>
8.3 ... Kontaktinformationen auszeichnen mit
8.4 ... Zeitangaben für Menschen und Maschinen: ... 159 8.5 ... Ausklappbare Inhalte: 8.6 ... Änderungen am Text dokumentieren: 8.7 ... Kurz vorgestellt: , und >
8.8 ... Weitere Inline-Elemente in der Übersicht ... 167
8.9 ... Know-how: Zeichensätze und Sonderzeichen ... 169
8.10 ... Auf einen Blick ... 172
9. HTML-Elemente zum Erstellen von Formularen ... 173
9.1 ... Interaktion mit Besuchern basiert auf HTML-Formularen ... 174
9.2 ... Das Element
9.3 ... Einzeilige Eingabefelder erstellen und beschriften: 9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: 9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181
9.6 ... Formularfelder gruppieren mit 9.7 ... Ein Button zum Abschicken der Formulardaten ... 186
9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187
9.9 ... Auf einen Blick ... 193
10. HTML-Elemente zum Erstellen von Tabellen ... 195
10.1 ... Eine einfache HTML-Tabelle:
11. Von der Webseite zur Website ... 205
12. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227
13. Die wichtigsten Selektoren und Spezifität ... 249
14. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269
15. Schrift und Text gestalten per CSS ... 281
16. Abstände gestalten mit dem Box-Modell ... 317
17. Boxen gestalten per CSS ... 341
18. Ordnung halten: Stylesheets organisieren ... 365
19. Media Queries und responsives Webdesign ... 393
20. Der Flow und die Eigenschaft 'position' ... 405
21. Schweben und schweben lassen: 'float' ... 419
22. Flexbox: Mehrspaltige Layouts mit 'display: flex' ... 429
23. Eine responsive Navigation erstellen ... 453
24. CSS-Grid: Mehrspaltige Layouts erstellen mit 'display: grid' ... 477
25. Flexible Icons und responsive Bilder ... 505
Index ... 519
25. Flexible Icons und responsive Bilder ... 505
Index ... 519
, und >
10.2 ... Tabellenüberschriften stehen in >
10.3 ... Tabellen strukturieren: , und > 10.4 ... Zellen verbinden mit 'colspan' und 'rowspan' ... 199 10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200 10.6 ... Auf einen Blick ... 204 11.1 ... Fine-Tuning für die Startseite ... 205 11.2 ... Das HTML überprüfen mit dem HTML-Validator ... 210 11.3 ... Die Seiten 'News', 'Über uns' und 'Kontakt' erstellen ... 212 11.4 ... Inhalte für die Seite 'News' hinzufügen ... 216 11.5 ... Ein Bild auf der Seite 'Über uns' einfügen ... 220 11.6 ... Kontaktdaten und Formular für die Seite 'Kontakt' ... 222 11.7 ... Die Seiten 'Impressum' und 'Datenschutz' ... 225 11.8 ... Auf einen Blick ... 226 12.1 ... Überblick: Webseiten gestalten per CSS ... 227 12.2 ... Wichtige Vokabeln: Der Aufbau einer CSS-Regel ... 228 12.3 ... Es gibt drei verschiedene Möglichkeiten, CSS zu speichern ... 229 12.4 ... Das Box-Modell kennenlernen: 'padding', 'border' und 'margin' ... 231 12.5 ... Farbnamen in CSS: Einfach, aber nicht sehr flexibel ... 236 12.6 ... Weit verbreitet: Hexadezimale Farbangaben mit #rrggbb ... 238 12.7 ... Die Alternative: Farben mit rgb() -- auch mit Transparenz ... 240 12.8 ... Nützliche Werkzeuge und Websites zur Arbeit mit Farben ... 242 12.9 ... Wichtige Einheiten: px, em, rem, % & Co ... 245 12.10 ... Auf einen Blick ... 248 13.1 ... Einfache Selektoren: Elemente, Gruppierung und '*' ... 250 13.2 ... Klassen sind klasse: Der Selektor mit dem Punkt ... 251 13.3 ... IDs sind einmalig: Der Selektor mit der Raute ... 253 13.4 ... Überblick: Die HTML-Elemente im DOM-Baum ... 254 13.5 ... Nachfahren auswählen: Der Selektor mit dem Leerzeichen ... 256 13.6 ... Selektoren zum Auswählen von Kindelementen ... 256 13.7 ... Nachbar- und Geschwisterselektoren mit + und ~ ... 260 13.8 ... Attributselektoren haben eckige Klammern: [attribut] ... 261 13.9 ... Quellen zum Nachschlagen von weiteren Selektoren ... 265 13.10 ... Spezifität: Einige Selektoren sind wichtiger als andere ... 266 13.11 ... Auf einen Blick ... 268 14.1 ... Die Kaskade: Wichtigkeit, Spezifität und Reihenfolge ... 269 14.2 ... Intuitiv: Die Reihenfolge im CSS entscheidet ... 271 14.3 ... Ungewohnt: Spezifität ist wichtiger als Reihenfolge ... 272 14.4 ... Ausnahme: '!important' gewinnt immer ... 274 14.5 ... Nichts gefunden? Vererbung oder Standardwert ... 275 14.6 ... Die Kaskade im Browser analysieren ... 277 14.7 ... Übersicht: Kaskade, Vererbung oder Standardwert ... 278 14.8 ... Auf einen Blick ... 280 15.1 ... Klassische Schriftarten mit und ohne Serifen im Web ... 281 15.2 ... Die Schriftart definieren mit 'font-family' ... 283 15.3 ... Die Systemschrift des Geräts: Gut lesbar und echt schnell ... 285 15.4 ... Webfonts -- die Schriftart gleich mitliefern ... 287 15.5 ... Schnell und einfach: Google Fonts direkt von Google ... 288 15.6 ... Auf der sicheren Seite: Google Fonts selbst ausliefern ... 291 15.7 ... Gut lesbarer Text: 'font-size' und 'line-height' ... 295 15.8 ... Listen: Aufzählungszeichen gestalten per CSS ... 299 15.9 ... Hyperlinks: Unterstreichung gestalten mit 'text-decoration' ... 303 15.10 ... Hyperlinks: Linkzustände gestalten mit Pseudoklassen ... 305 15.11 ... Externe Hyperlinks kennzeichnen mit '::after' ... 309 15.12 ... Weitere Eigenschaften zur Gestaltung von Schrift und Text ... 312 15.13 ... Auf einen Blick ... 315 16.1 ... Das klassische Box-Modell für Blockboxen ... 317 16.2 ... Die Breite begrenzen: 'min-width' und 'max-width' ... 318 16.3 ... Der Abstand zum Rand: 'padding' ... 320 16.4 ... Rahmenlinien gestalten mit 'border' und 'border-radius' ... 323 16.5 ... Blockboxen horizontal zentrieren mit 'margin: auto' ... 327 16.6 ... Abstände zwischen den Elementen mit 'margin' ... 328 16.7 ... 'Collapsing Margins': Vertikale Aussenabstände kollabieren ... 329 16.8 ... Das intuitivere Box-Modell: 'box-sizing: border-box' ... 335 16.9 ... Das Box-Modell für Inline-Boxen ... 337 16.10 ... Inline-Block: Blockboxen, aber nebeneinander ... 338 16.11 ... Auf einen Blick ... 339 17.1 ... Hintergrundgrafiken per CSS einbinden und gestalten ... 341 17.2 ... Lineare Farbverläufe: 'background-image' und 'linear-gradient()' ... 348 17.3 ... Schattenboxen mit 'box-shadow' ... 350 17.4 ... Gestalten mit dem Box-Modell: Zitate als Kundenstimmen ... 352 17.5 ... 'Call to Action': Hyperlinks in Buttons verwandeln ... 355 17.6 ... Boxen am Bildschirm ausblenden: 'visually-hidden' ... 360 17.7 ... Auf einen Blick ... 363 18.1 ... Stylesheets strukturieren mit Kommentaren ... 366 18.2 ... Verschiedene Schreibweisen für CSS-Regeln ... 367 18.3 ... CSS überprüfen mit dem CSS-Validator ... 371 18.4 ... Modulbauweise: Ein zentrales Stylesheet erleichtert die Entwicklung ... 372 18.5 ... Die Stylesheets für die einzelnen Module erstellen ... 374 18.6 ... Das Modul 'basis.css' ist das Fundament ... 376 18.7 ... Das Modul 'layout.css' für Seitenlayout und Layoutbereiche ... 379 18.8 ... Das Modul 'navi-inline.css' für die Navigation ... 381 18.9 ... Das Modul 'content.css' zur Gestaltung der Inhalte ... 382 18.10 ... Das Modul 'forms.css' für Kontaktdaten und Formulare ... 383 18.11 ... Ein neues Modul für ein modernes Layout ... 384 18.12 ... Auf einen Blick ... 391 19.1 ... 'Responsives Webdesign': Das Web wird flexibel ... 393 19.2 ... Medientypen definieren das Ausgabemedium ... 394 19.3 ... Media Queries = Medientypen + Medieneigenschaften ... 397 19.4 ... Media Queries brauchen den 'Meta-Viewport' ... 401 19.5 ... Media Queries und die Suche nach dem Breakpoint ... 403 19.6 ... Auf einen Blick ... 404 20.1 ... Blockboxen, der Flow und 'position: static' ... 405 20.2 ... Versetzt weiterfliessen mit 'position: relative' ... 407 20.3 ... Raus aus dem Flow mit 'position: absolute' ... 408 20.4 ... Der Trick: 'absolute' und 'relative' kombinieren ... 409 20.5 ... Wie ein Fels in der Brandung -- 'position: fixed' ... 412 20.6 ... Scrollen und dann stehen bleiben: 'position: sticky' ... 413 20.7 ... Positionierte Boxen und der 'z-index' ... 414 20.8 ... Auf einen Blick ... 417 21.1 ... Text um eine Abbildung fliessen lassen mit 'float' ... 419 21.2 ... Floats beenden mit 'clear: both' ... 423 21.3 ... Floats umschliessen mit 'display: flow-root' ... 424 21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425 21.5 ... Das Umschliessen von Floats mit '@supports' ... 427 21.6 ... Auf einen Blick ... 428 22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429 22.2 ... Flex-Container erstellen mit 'display: flex' ... 431 22.3 ... Die Fliessrichtung von Flex-Items kontrollieren mit 'flex-flow' ... 434 22.4 ... Flex-Items an der Hauptachse ausrichten mit 'justify-content' ... 438 22.5 ... Flex-Items an der Querachse ausrichten mit 'align-items' und 'align-self' ... 439 22.6 ... Automatische Abstände für Flex-Items mit 'margin' ... 442 22.7 ... Flexibilität für Flex-Items: Die Zauberformel 'flex: 1' ... 444 22.8 ... Flexbox in Aktion: Den Footer am unteren Rand des Browserfensters platzieren ... 447 22.9 ... Die Reihenfolge von Flex-Items ändern ... 450 22.10 ... Auf einen Blick ... 451 23.1 ... Die responsive Navigation im Überblick ... 453 23.2 ... Schritt 1: Prüfen, ob JavaScript im Browser aktiv ist ... 457 23.3 ... Schritt 2: Die mobile Navigation gestalten ... 459 23.4 ... Schritt 3: Den Menübutton im HTML einfügen ... 461 23.5 ... Schritt 4: Den Menübutton per CSS gestalten ... 464 23.6 ... Schritt 5: Die Navigation per CSS ausblenden ... 468 23.7 ... Schritt 6: Die Navigation mit dem Menübutton einblenden ... 470 23.8 ... Schritt 7: Eine horizontale Navigation für breitere Viewports ... 471 23.9 ... Die Navigation im Fussbereich gestalten ... 473 23.10 ... Auf einen Blick ... 474 24.1 ... Ein 'Grid' ist ein Raster und schafft Ordnung ... 477 24.2 ... Mehrspaltiges Layout nur für moderne Browser: '@supports' ... 478 24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479 24.4 ... Flexbox und Grid sind ein gutes Team ... 485 24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488 24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493 24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497 24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502 24.9 ... Auf einen Blick ... 504 25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505 25.2 ... SVG-Icons mit 25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509 25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510 25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512 25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513 25.7 ... Auf einen Blick ... 518 nbsp;24.3 ... Das erste Grid-Layout: Drei Boxen nebeneinander ... 479 24.4 ... Flexbox und Grid sind ein gutes Team ... 485 24.5 ... Grid-Items manuell platzieren mit nummerierten Grid-Linien ... 488 24.6 ... Grid-Items manuell platzieren mit benannten Grid-Bereichen ... 493 24.7 ... Die Grid-Zauberformel: Responsiv ohne Media Query ... 497 24.8 ... Die wichtigsten Grid-Eigenschaften in der Übersicht ... 502 24.9 ... Auf einen Blick ... 504 25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505 25.2 ... SVG-Icons mit 25.3 ... SVG-Icons kann man im Editor bearbeiten ... 509 25.4 ... SVG-Icons inline direkt im HTML einfügen ... 510 25.5 ... Unterschiedliche Bilder je nach Pixeldichte des Bildschirms ... 512 25.6 ... Unterschiedliche Bilder je nach Viewportbreite ... 513 25.7 ... Auf einen Blick ... 518
