HTML & CSS für Dummies

UEber die Autorin 9

Einleitung 23

UEber dieses Buch 23

Konventionen in diesem Buch 23

Was Sie nicht lesen muessen 23

Toerichte Annahmen ueber die Leser 24

Wie dieses Buch aufgebaut ist (Achtung Spoiler!) 24

Teil I: Die absoluten Basics 24

Teil II: HTML - alles Wichtige 25

Teil III: Losstarten mit CSS 25

Teil IV: CSS fuer Layouts 25

Teil V: Der Top-Ten- Teil 26

Symbole, die in diesem Buch verwendet werden 26

Wie es weitergeht 26

Teil I Die Absoluten Basics 27

Kapitel 1 Ziemlich beste Freunde: HTML und CSS 29

Webseiten: vor dem Tunen ein Blick unter die Haube 29

Aufbrezeln mit CSS 31

Ausgezeichnet mit HTML 33

Browser: the two and only 34

Fundamental: HTML-Grundstruktur 35

HTML-Dokument erstellen mit einem Editor 36

Atom 38

HTML-Dokument mit VS Code erstellen 39

1 Dokument im Browser ansehen und 2 sich freuen 42

Alles klar mit Attributen 42

Leere Elemente: leer, aber nicht hohl 43

Kontrolle ist besser 44

CSS - auswaehlen, formatieren und los 46

Geschweifte Klammern, Doppelpunkte & Strichpunkte 47

Das erste Stylesheet 48

Kurzgefasst 50

Kapitel 2 Beispiel fuer das HTML/CSS-Team 51

Gestatten: die Beispielsite 51

Der HTML-Code

fuer die Beispielseite 54

HTML-Code der Startseite im UEberblick 54

head-Bereich 56

Grobe Struktur 57

header im Detail 59

Hauptinhalt 61

Das Grundprinzip von CSS ist folgendes: 63

Stylesheet gesamt 64

Formatierung von body 65

UEberschriften formatieren 67

Formatierung der Navigation 69

Zweispaltige Darstellung des Inhalts und Gestaltung des Footers 71

Flexible Bilder 72

Anpassungen fuer kleine Screens 73

HTML-Code der zweiten Seite 74

Nun zum CSS-Code

der zweiten Seite 77

Kurzgefasst 77

Kapitel 3 Fremden Code untersuchen, eigenen besser verstehen 79

Entwicklertools aufrufen 79

HTML-Code

ansehen 82

CSS-Code untersuchen 84

Verhalten bei unterschiedlichen Bildschirmgroessen 85

Kurzgefasst 87

Kapitel 4 Ab ins Internet 89

Domain und Webspace 89

Hosting - Begriffe und Fakten 90

Dateien mit einem FTP-Programm

uebertragen 94

Zugangsdaten fuer FTP 94

FTP-Programm

waehlen und installieren 94

Daten uebertragen mit FileZilla 95

Fehler beheben und Probleme loesen 98

Baustellenseite 98

403-Fehlermeldung - >>Zugriff verweigert<< 98

Dateien werden nicht angezeigt 98

Probleme mit Bildern 98

Nicht funktionierende Links 99

Kurzgefasst 99

Teil Ii Html - Alles Wichtige 101

Kapitel 5 Gut strukturiert ist halb gewonnen 103

Kopf und Rumpf 103

Sprachangabe 105

Zeichensatzangabe UTF-8 105

Seitentitel - aber richtig 106

Mehr meta 108

Grundlegende Techniken 109

Leerzeichen und Zeilenumbrueche 109

Kommentare 112

Entities fuer Sonderzeichen 113

Der Blick auf body 114

Texte unterteilen 115

Am Anfang war der Absatz 115

UEberschriften 116

Listen 118

hr fuer eine inhaltliche Unterteilung 124

Zitate mit blockquote und cite 124

pre - Leerzeichen und Zeilenumbrueche beibehalten 125

Ausklappbar: details und summary 126

Inline-Elemente 126

In der Zeile 126

Die wichtigsten Inline-Elemente 127

Struktur im Groben 130

Kurzgefasst 133

Kapitel 6 Bilder und Videos 135

Mehr als Worte: Bilder 135

Raster versus Vektor 135

Eine Frage des (Bild-) Formats 136

Das richtige Format fuer die richtige Situation 138

Bilder einbinden 139

Immer scharf: SVG-Bilder 144

Echte kleine Lieblinge: Favicons 146

Gut fuer die Performance 147

Bewegt: Videos 147

Codierung und Container 147

Video einbinden 148

Videos von YouTube und anderen Diensten einbinden 150

iframes: die guten Frames 151

Was auf die Ohren: Audio 152

Object, embed und canvas! 153

Kurzgefasst 153

Kapitel 7 Links und Pfade 155

Verlinkungen 155

Bilder verlinken 156

Links auf externe Webseiten 157

An bestimmte Stellen auf Seiten verlinken 159

Links auf andere Dateitypen 162

Auf Dateien zum Download verlinken 163

E-Mail- Links definieren 163

Ruf! mich! an! Telefonlinks 165

Pfade - von hier nach dort und wieder zurueck 165

Innerhalb eines Ordners auf derselben Ebene 167

In einen Unterordner verweisen 168

UEbergeordnete Ordner 169

In Parallelordner wechseln 169

Noch hoeher hinaus und tiefer hinunter 170

Absolute und relative Pfade 170

Kurzgefasst 172

Kapitel 8 Tabellen und Formulare 173

Von der Wiege bis zur Bahre - Formulare, Formulare, Formulare 173

Formulare - wichtige Basics 174

Funktionsweise von Formularen 174

Viele, viele Input-Typen 185

Formularueberpruefung 192

Informationen in Reih und Glied - Tabellen 194

Grundlegender Aufbau von Tabellen 195

Tabellen fehlerfrei erstellen 199

Weitere Strukturierungselemente bei Tabellen 199

Kurzgefasst 200

Teil Iii Losstarten Mit Css 203

Kapitel 9 HTML mit CSS zusammenbringen 205

HTML und CSS verknuepfen 205

Externe Datei 205

Eingebettete Stylesheets 206

Inline-Stile 209

Externe Stylesheets mit @import einbinden 210

Kommentare - in CSS (im Unterschied zu HTML) 212

Die Qual der Wahl - Elemente auswaehlen 212

Typselektor element 212

Klassenselektor klasse 213

id-Selektor #id 215

Selektoren gruppieren: el1, el2, el3 215

Universeller Selektor * 216

Attributselektoren 217

Kombinatoren 218

Voll pseudo: Pseudoklassen und Pseudoelemente 224

Die allerallerwichtigsten Selektoren in Kurzform 233

Das Recht des Staerkeren - Spezifitaet verstehen 234

Kurzgefasst 237

Kapitel 10 CSS: Farben, Laengeneinheiten und Vererbung 239

Farben in CSS 239

Farben am Bildschirm 240

rgb(), rgba() und hexadezimale Angaben 240

hsl() und hsla() 241

Mehr Farbpower 243

Farben waehlen 244

Farbkombinationen finden 245

Laengenangaben 246

UEberblick ueber die Laengenangaben 247

Pixelversteher 248

Prozent 250

em und rem 250

vw, vh, vwmin, vwmax 251

cm, pt, inch fuer Druck-Stylesheets zum Beispiel 252

Tipps fuer die Verwendung der Einheiten 252

Spezielle Angaben 253

Rechnen mit CSS ueber calc() 253

Custom Properties 254

Vererbung und Standardwert - oder was gilt? 254

Erb das! 254

Nicht vererbare und vererbare Eigenschaften 256

Vererbung in den Browser-Entwicklertools 257

Fehlersuche 258

Kurzgefasst 260

Kapitel 11 Schriften waehlen und Texte gestalten 261

Schrift formatieren 261

Standardschriften verwenden 261

Webfonts 264

Schriftgroesse bestimmen 273

fett, kursiv, Kapitaelchen 277

Zeilenhoehe 279

Kuerze mit Wuerze: die font-Eigenschaft 280

Textschatten 282

Abstaende zwischen Woertern oder Buchstaben 283

text-decoration zur Linkformatierung, aber nicht nur 284

Linkformatierungen 284

Mehr Optionen fuer text-decoration 285

Mit unterschiedlichen Browsern umgehen 285

Texte formatieren und ausrichten 286

Text ausrichten 286

Ausrichtung und Schreibrichtung 287

Erste Zeile einruecken 288

Listen formatieren 289

Kurzgefasst 290

Kapitel 12 Richtig vermessen: die Ausmasse von Elementen 291

Ausmasse von Elementen 291

Breite 292

Hoehe 294

Innenabstand 295

Verkuerzte Angaben mit mehreren Werten bei padding, margin etc 297

Rahmen 298

Logische Werte 299

UEberfliessen steuern mit overflow 300

Aussenabstand 301

Grundprinzip von margin 301

Zusammenfallende Aussenabstaende 302

box-sizing und die Gesamtgroesse 303

Formvollendet - abgerundete Ecken und Schatten 306

Abgerundet: border-radius 306

Schatten um Boxen zeichnen: box-shadow 307

Boxmodell bei Inline-Elementen ... und die Eigenschaft display 308

width, padding, border, margin bei einem Inline-Element 308

Verwandlungskuenstler: display 309

display bei der Erstellung von Buttons 310

Elemente drehen, verschieben und skalieren 312

Kurzgefasst 313

Kapitel 13 Bilder mit CSS einbinden und formatieren 315

Hintergrundfarben und -bilder 315

Hintergrundbild ergaenzen 315

Wiederholung steuern 316

Position des Hintergrundbilds bestimmen 317

Groesse des Hintergrundbilds veraendern: background-size 318

Fixiert beim Scrollen: background-attachment 319

Kuerzer mit background 320

Mehr Optionen bei Hintergrundbildern 321

Bildschirmfuellendes Hintergrundbild 322

Farbverlaeufe erstellen 323

Grundprinzip von Farbverlaeufen 323

Variationen fuer Farbverlaeufe 324

HTML-Bilder mit CSS bearbeiten 325

object-fit - Groessenanpassung von HTML-Bildern 325

Filter for the world 326

Schoener Hover-Effekt bei Bildern 327

Kurzgefasst 329

Teil Iv Css Fuer Layouts 331

Kapitel 14 Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen 333

Bilder und Bereiche umfliessen lassen 333

clear - Floaten aufheben 336

Gefloatete Elemente umschliessen 337

Inhalte nicht rechteckig umfliessen 338

In Position 341

position: absolute 343

position: relative 345

Vorhang auf fuer die Kombi: relative + absolute Positionierung 346

Halbtransparente Bildbeschriftung auf einem Bild 347

position: fixed - Footer unten festkleben 349

position: sticky - scrollen und dann feststehen 350

Praefixe - was sind sie und wenn ja, wie viele? 351

Multicolumn - Spaltensatz 352

Kurzgefasst 354

Kapitel 15 Flexbox - Navigationsleisten und einfache Layouts erstellen 355

Flexbox fuer Layouts und Navigationsleisten 355

Einstieg in Flexbox 356

Flexbox-Konzepte 357

Zwischenraeume definieren 358

display: inline-flex 359

Elemente mit Flexbox ausrichten 360

Leerraumverteilung auf der querenden Achse: align-items 360

Leerraumverteilung auf der Hauptachse: justify-content 362

Element horizontal und vertikal zentrieren 363

Anordnen mit verschachtelten Flexboxen 364

Navigation mit Flexbox realisieren 366

Horizontale Navigation definieren 366

Zweigeteilte Navigation - Elemente mit margin anordnen 369

Weitere Flexbox-Techniken 369

Geaenderte Reihenfolge dank order 370

Flexible Ausmasse 370

Mehrzeilig/-spaltig mit flex-wrap 371

Kurzgefasst 373

Kapitel 16 Gridlayout - Rasterlayouts zum Verlieben 375

Rasterlayouts leicht gemacht mit Gridlayout 375

Grundfunktion von Gridlayout 376

Richtiges Rasterlayout 379

Fortgeschrittene Techniken 383

UEberlappungen und Luecken 383

Gridlayout mit benannten Bereichen 384

Voll flexibles Raster 386

Ausrichten mit Gridlayout und Abstaende zwischen Rasterzellen 389

Kurzgefasst 391

Kapitel 17 Responsives Webdesign 393

Responsiv - das Wesentliche 393

So fing alles an 393

Alternativen zum responsiven Webdesign 394

Bestandteile des responsiven Webdesigns 396

Viewport-Meta- Angabe 396

Klassische Medienangaben 398

Media Queries fuer responsive Webseiten 400

Breakpoints - woher nehmen oder stehlen? 403

Mehr Abfragen 404

Responsive Layouts 405

Einfaches responsives Layoutbeispiel 405

Dreispaltiges responsives Layout mit Flexbox 406

Responsives Layout mit Gridlayout 408

Komponenten auf responsiv trimmen 410

Bilder im responsiven Webdesign 410

Responsives Formular 411

Navigation responsiv machen 416

Responsiv ohne Media Queries 421

Die dunkle Seite: Dark Mode 421

prefers-color- scheme 422

Dark Mode mit Custom Properties 422

Container Queries 424

Kurzgefasst 426

Kapitel 18 Responsive Bilder 427

Ansprueche an responsive Bilder 427

Hochaufloesende Displays 428

Unterschiedliche Bilder je nach Layout und Viewport 431

Art Direction: Nicht nur fuer Kuenstler 434

Verschiedene Bildformate 436

Alle zusammen 436

Und die Browser? 437

Kurzgefasst 437

Teil V Top-Ten- Teil 439

Kapitel 19 Wenn der Browser nicht das macht, was er soll 441

1 Willkommen im Club 441

2 HTML-Fehler aufspueren 441

3 CSS-Fehler aufspueren 441

4 Verknuepfungen ueberpruefen 442

5 Bilder zur Anzeige bewegen 442

6 Probleme mit einem Hintergrundbild beheben 443

7 Dokumentstruktur pruefen 443

8 Browserunterstuetzung pruefen 443

9 Fallbackloesungen fuer aeltere Browser 444

10 Sonderangaben fuer die modernen Browser 444

Kapitel 20 Die wichtigsten Tipps zur Suchmaschinenoptimierung 445

1 Seite fuer Leser erstellen und nicht fuer Suchmaschinen 445

2 Passende und eindeutige Seitentitel 445

3 Beschreibung bei meta 446

4 Seite mit UEberschriften strukturieren 446

5 Klare Navigation mit einfachen URLs 446

6 Aussagekraeftige Linktexte 446

7 Bilder mit aussagekraeftigen Dateinamen und alt-Texten 447

8 Auch fuer Smartphones und Co 447

9 Google-/ Bing-Tools etc nutzen 447

10 Noch mehr Tipps 447

Kapitel 21 Zehn Dinge, die Sie nicht gedacht haetten, dass sie mit CSS gehen 449

1 Mauszeiger aendern 449

2 Animationen definieren 449

3 Animationen anwenden 450

4 Wenn Sie Animationen definieren ... 450

5 Smooth Scrolling 450

6 Text mit Farbverlauf 451

7 UEberblendeffekte 451

8 Transformationen in 3D 451

9 Lustige Formen schnipseln mit clip-path 452

10 Karomuster definieren mit Farbverlaeufen 452

Kapitel 22 Die 10 besten Generatoren fuer faule Coder 455

1 Farbverlaeufe 455

2 Kleckse fuer alle 456

3 Ungewoehnliche Formen schnipseln 456

4 Coole mehrfache Schatten 457

5 Filtereffekte 459

6 Ungewoehnliche Ecken 459

7 Trennlinien aufgehuebscht 460

8 Voll schraeg 461

9 Farbschattierungen 461

10 Passende Schriftgroessen 462

Stichwortverzeichnis 463