Materialien zum Buch ... 26 Geleitwort ... 27 Vorwort ... 29 1. Wissenswertes über Webseiten ... 33 1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 33
1.2 ... Webseiten bestehen aus Quelltext ... 34
1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 36
1.4 ... Webseiten werden von einem Browser dargestellt ... 39
1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 41
1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 42
1.7 ... Auf einen Blick ... 44
2. HTML kennenlernen: Die erste Webseite erstellen ... 45 2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 45
2.2 ... HT-M-L: die »HyperText Markup Language« ... 46
2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 48
2.4 ... Der und das Stammelement ... 51
2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52
2.6 ... enthält wichtige Infos über die Webseite ... 53
2.7 ... enthält den sichtbaren Bereich der Webseite ... 57
2.8 ... Der Kopfbereich mit Überschrift und Slogan ... 59
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 als schematische Darstellung ... 67
3.3 ... Das erste eigene Stylesheet: »style.css« ... 68
3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 70
3.5 ... Den Kopfbereich selektieren und gestalten ... 72
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: bis ... 78
4.2 ... Absätze und Hervorhebungen:
,
, ... 80 4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82 4.4 ... Listen erstellen mit , und ... 84 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 Fußbereich 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 ... 111 6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114 6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119 6.5 ... Abbildungen beschriften: und ... 122 6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124 6.7 ... Let there be sound: Audiodateien einbinden mit ... 125 6.8 ... Bewegte Bilder einbinden mit ... 127 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 ... 134 7.3 ... Navigationsbereiche erstellen mit ... 137 7.4 ... Der Hauptinhalt einer Webseite steht in ... 140 7.5 ... Fußbereiche auszeichnen mit ... 141 7.6 ... Inhaltliche Abschnitte erstellen mit ... 142 7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 144 7.8 ... Bereiche mit zusätzlichen Informationen: ... 148 7.9 ... Elemente mit semantisch neutral gruppieren ... 150 7.10 ... Auf einen Blick ... 152 8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153 8.1 ... Zitate auszeichnen mit und ... 153 8.2 ... Einen Zeilenumbruch erzwingen mit ... 157 8.3 ... Kontaktinformationen auszeichnen mit ... 157 8.4 ... Zeitangaben für Menschen und Maschinen: ... 159 8.5 ... Ausklappbare Inhalte: und ... 161 8.6 ... Änderungen am Text dokumentieren: und ... 164 8.7 ... Kurz vorgestellt: , und ... 166 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 definiert ein Formular ... 174 9.3 ... Einzeilige Eingabefelder erstellen und beschriften: und ... 176 9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: und ... 180 9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181 9.6 ... Formularfelder gruppieren mit und die Gruppe beschriften mit ... 185 9.7 ... Ein Button zum Abschicken der Formulardaten ... 186 9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187 9.9 ... Auf einen Blick ... 19310. HTML-Elemente zum Erstellen von Tabellen ... 195 10.1 ... Eine einfache HTML-Tabelle: , und ... 195 10.2 ... Tabellenüberschriften stehen in ... 197 10.3 ... Tabellen strukturieren: , und ... 198 10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199 10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200 10.6 ... Auf einen Blick ... 20411. Von der Webseite zur Website ... 205 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 ... 22612. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227 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 ... 24813. Die wichtigsten Selektoren und Spezifität ... 249 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 ... 26814. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269 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 ... 28015. Schrift und Text gestalten per CSS ... 281 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 ... 31516. Abstände gestalten mit dem Box-Modell ... 317 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 Außenabstä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 ... 33917. Boxen gestalten per CSS ... 341 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 ... 36318. Ordnung halten: Stylesheets organisieren ... 365 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 ... 39119. Media Queries und responsives Webdesign ... 393 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 ... 40420. Der Flow und die Eigenschaft »position« ... 405 20.1 ... Blockboxen, der Flow und »position: static« ... 405 20.2 ... Versetzt weiterfließen 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 ... 41721. Schweben und schweben lassen: »float« ... 419 21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419 21.2 ... Floats beenden mit »clear: both« ... 423 21.3 ... Floats umschließen mit »display: flow-root« ... 424 21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425 21.5 ... Das Umschließen von Floats mit »@supports« ... 427 21.6 ... Auf einen Blick ... 42822. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429 22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429 22.2 ... Flex-Container erstellen mit »display: flex« ... 431 22.3 ... Die Fließrichtung 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 ... 45123. Eine responsive Navigation erstellen ... 453 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 Fußbereich gestalten ... 473 23.10 ... Auf einen Blick ... 47424. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477 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 ... 50425. Flexible Icons und responsive Bilder ... 505 25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505 25.2 ... SVG-Icons mit als Datei einbinden ... 507 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 Index ... 519
Materialien zum Buch ... 26 Geleitwort ... 27 Vorwort ... 29 1. Wissenswertes über Webseiten ... 33 1.1 ... Webseiten sehen bei jedem Benutzer anders aus ... 33
1.2 ... Webseiten bestehen aus Quelltext ... 34
1.3 ... Quelltext besteht aus HTML, CSS und JavaScript ... 36
1.4 ... Webseiten werden von einem Browser dargestellt ... 39
1.5 ... Editoren zum Schreiben und Bearbeiten von Quelltext ... 41
1.6 ... Referenzen und Nachschlagewerke zu HTML und CSS ... 42
1.7 ... Auf einen Blick ... 44
2. HTML kennenlernen: Die erste Webseite erstellen ... 45 2.1 ... Webseiten bestehen aus rechteckigen Kästchen ... 45
2.2 ... HT-M-L: die »HyperText Markup Language« ... 46
2.3 ... Jede Webseite hat ein HTML-Grundgerüst ... 48
2.4 ... Der und das Stammelement ... 51
2.5 ... HTML-Elemente können im Anfangs-Tag Attribute enthalten ... 52
2.6 ... enthält wichtige Infos über die Webseite ... 53
2.7 ... enthält den sichtbaren Bereich der Webseite ... 57
2.8 ... Der Kopfbereich mit Überschrift und Slogan ... 59
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 als schematische Darstellung ... 67
3.3 ... Das erste eigene Stylesheet: »style.css« ... 68
3.4 ... Die erste eigene CSS-Regel: Hintergrund- und Schriftfarbe für ... 70
3.5 ... Den Kopfbereich selektieren und gestalten ... 72
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: bis ... 78
4.2 ... Absätze und Hervorhebungen:
,
, ... 80 4.3 ... Webseiten von Anfang an in unterschiedlichen Viewports testen ... 82 4.4 ... Listen erstellen mit , und ... 84 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 Fußbereich 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 ... 111 6.3 ... Pixelbilder und hochauflösende Bildschirme ... 114 6.4 ... Bilder mit flexibler Breite: »max-width: 100%« ... 119 6.5 ... Abbildungen beschriften: und ... 122 6.6 ... »Lazy Loading«: Seiten mit vielen Bildern optimieren ... 124 6.7 ... Let there be sound: Audiodateien einbinden mit ... 125 6.8 ... Bewegte Bilder einbinden mit ... 127 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 ... 134 7.3 ... Navigationsbereiche erstellen mit ... 137 7.4 ... Der Hauptinhalt einer Webseite steht in ... 140 7.5 ... Fußbereiche auszeichnen mit ... 141 7.6 ... Inhaltliche Abschnitte erstellen mit ... 142 7.7 ... In sich geschlossene, eigenständige Blöcke mit ... 144 7.8 ... Bereiche mit zusätzlichen Informationen: ... 148 7.9 ... Elemente mit semantisch neutral gruppieren ... 150 7.10 ... Auf einen Blick ... 152 8. Weitere HTML-Elemente zur Auszeichnung von Text ... 153 8.1 ... Zitate auszeichnen mit und ... 153 8.2 ... Einen Zeilenumbruch erzwingen mit ... 157 8.3 ... Kontaktinformationen auszeichnen mit ... 157 8.4 ... Zeitangaben für Menschen und Maschinen: ... 159 8.5 ... Ausklappbare Inhalte: und ... 161 8.6 ... Änderungen am Text dokumentieren: und ... 164 8.7 ... Kurz vorgestellt: , und ... 166 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 definiert ein Formular ... 174 9.3 ... Einzeilige Eingabefelder erstellen und beschriften: und ... 176 9.4 ... Mehrzeilige Eingabefelder erstellen und beschriften: und ... 180 9.5 ... Zum Anklicken: eckige Kontrollkästchen, runde Optionsfelder und ausklappbare Auswahllisten ... 181 9.6 ... Formularfelder gruppieren mit und die Gruppe beschriften mit ... 185 9.7 ... Ein Button zum Abschicken der Formulardaten ... 186 9.8 ... Ein DSGVO-kompatibles Kontaktformular erstellen ... 187 9.9 ... Auf einen Blick ... 19310. HTML-Elemente zum Erstellen von Tabellen ... 195 10.1 ... Eine einfache HTML-Tabelle: , und ... 195 10.2 ... Tabellenüberschriften stehen in ... 197 10.3 ... Tabellen strukturieren: , und ... 198 10.4 ... Zellen verbinden mit »colspan« und »rowspan« ... 199 10.5 ... HTML-Tabellen erstellen und gestalten -- ein Beispiel ... 200 10.6 ... Auf einen Blick ... 20411. Von der Webseite zur Website ... 205 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 ... 22612. CSS kennenlernen: Syntax, Box-Modell, Farbwerte und Einheiten ... 227 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 ... 24813. Die wichtigsten Selektoren und Spezifität ... 249 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 ... 26814. Der Browser und das CSS: Kaskade, Vererbung oder Standardwert ... 269 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 ... 28015. Schrift und Text gestalten per CSS ... 281 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 ... 31516. Abstände gestalten mit dem Box-Modell ... 317 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 Außenabstä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 ... 33917. Boxen gestalten per CSS ... 341 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 ... 36318. Ordnung halten: Stylesheets organisieren ... 365 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 ... 39119. Media Queries und responsives Webdesign ... 393 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 ... 40420. Der Flow und die Eigenschaft »position« ... 405 20.1 ... Blockboxen, der Flow und »position: static« ... 405 20.2 ... Versetzt weiterfließen 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 ... 41721. Schweben und schweben lassen: »float« ... 419 21.1 ... Text um eine Abbildung fließen lassen mit »float« ... 419 21.2 ... Floats beenden mit »clear: both« ... 423 21.3 ... Floats umschließen mit »display: flow-root« ... 424 21.4 ... Praktisch: Klassen zum Floaten und Clearen ... 425 21.5 ... Das Umschließen von Floats mit »@supports« ... 427 21.6 ... Auf einen Blick ... 42822. Flexbox: Mehrspaltige Layouts mit »display: flex« ... 429 22.1 ... Flexbox und Grid -- das moderne CSS-Layout ... 429 22.2 ... Flex-Container erstellen mit »display: flex« ... 431 22.3 ... Die Fließrichtung 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 ... 45123. Eine responsive Navigation erstellen ... 453 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 Fußbereich gestalten ... 473 23.10 ... Auf einen Blick ... 47424. CSS-Grid: Mehrspaltige Layouts erstellen mit »display: grid« ... 477 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 ... 50425. Flexible Icons und responsive Bilder ... 505 25.1 ... Flexible Icons: Skalierbare Symbole mit SVG ... 505 25.2 ... SVG-Icons mit als Datei einbinden ... 507 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 Index ... 519
»Wer seine Webseiten selber erstellen und aufmotzen möchte, findet hier ein ideales Begleitbuch.« Mac Life 202212
Schreiben Sie eine Kundenbewertung zu diesem Produkt und gewinnen Sie mit etwas Glück einen
15,- EUR bücher.de–Gutschein!
Ein Marktplatz-Angebot für "Einstieg in HTML und CSS" für 19,90 €
Zustand Preis Porto Zahlung Verkäufer Rating leichte Gebrauchsspuren 19,90
19,90 €
2,90
2,90 €
Banküberweisung annekri 100,0% Zum Angebot
Es gelten unsere Allgemeinen Geschäftsbedingungen: www.buecher.de/agb
Impressum
www.buecher.de ist ein Shop der buecher.de GmbH & Co. KG Bürgermeister-Wegele-Str. 12, 86167 Augsburg Amtsgericht Augsburg HRA 13309
Persönlich haftender Gesellschafter: buecher.de Verwaltungs GmbH Amtsgericht Augsburg HRB 16890 Vertretungsberechtigte: Günter Hilger, Geschäftsführer Christian Sailer, Geschäftsführer Sitz der Gesellschaft:Augsburg Ust-IdNr. DE 204210010
Bitte wählen Sie Ihr Anliegen aus.