Über die Autorin 9

Einleitung 23

Über dieses Buch 23

Konventionen in diesem Buch 23

Was Sie nicht lesen müssen 23

Törichte Annahmen über 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 für 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 - auswählen, formatieren und los 46

Geschweifte Klammern, Doppelpunkte & Strichpunkte 47

Das erste Stylesheet 48

Kurzgefasst 50

Kapitel 2 Beispiel für das HTML/CSS-Team 51

Gestatten: die Beispielsite 51

Der HTML-Code

für die Beispielseite 54

HTML-Code der Startseite im Überblick 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

Überschriften formatieren 67

Formatierung der Navigation 69

Zweispaltige Darstellung des Inhalts und Gestaltung des Footers 71

Flexible Bilder 72

Anpassungen für 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 Bildschirmgrößen 85

Kurzgefasst 87

Kapitel 4 Ab ins Internet 89

Domain und Webspace 89

Hosting - Begriffe und Fakten 90

Dateien mit einem FTP-Programm

übertragen 94

Zugangsdaten für FTP 94

FTP-Programm

wählen und installieren 94

Daten übertragen mit FileZilla 95

Fehler beheben und Probleme lösen 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 Zeilenumbrüche 109

Kommentare 112

Entities für Sonderzeichen 113

Der Blick auf body 114

Texte unterteilen 115

Am Anfang war der Absatz 115

Überschriften 116

Listen 118

hr für eine inhaltliche Unterteilung 124

Zitate mit blockquote und cite 124

pre - Leerzeichen und Zeilenumbrüche 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 für die richtige Situation 138

Bilder einbinden 139

Immer scharf: SVG-Bilder 144

Echte kleine Lieblinge: Favicons 146

Gut für 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 zurück 165

Innerhalb eines Ordners auf derselben Ebene 167

In einen Unterordner verweisen 168

Übergeordnete Ordner 169

In Parallelordner wechseln 169

Noch höher 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

Formularüberprüfung 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 verknüpfen 205

Externe Datei 205

Eingebettete Stylesheets 206

Inline-Stile 209

Externe Stylesheets mit [...] einbinden 210

Kommentare - in CSS (im Unterschied zu HTML) 212

Die Qual der Wahl - Elemente auswählen 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 Stärkeren - Spezifität verstehen 234

Kurzgefasst 237

Kapitel 10 CSS: Farben, Längeneinheiten 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 wählen 244

Farbkombinationen finden 245

Längenangaben 246

Überblick über die Längenangaben 247

Pixelversteher 248

Prozent 250

em und rem 250

vw, vh, vwmin, vwmax 251

cm, pt, inch für Druck-Stylesheets zum Beispiel 252

Tipps für die Verwendung der Einheiten 252

Spezielle Angaben 253

Rechnen mit CSS über 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 wählen und Texte gestalten 261

Schrift formatieren 261

Standardschriften verwenden 261

Webfonts 264

Schriftgröße bestimmen 273

fett, kursiv, Kapitälchen 277

Zeilenhöhe 279

Kürze mit Würze: die font-Eigenschaft 280

Textschatten 282

Abstände zwischen Wörtern oder Buchstaben 283

text-decoration zur Linkformatierung, aber nicht nur 284

Linkformatierungen 284

Mehr Optionen für text-decoration 285

Mit unterschiedlichen Browsern umgehen 285

Texte formatieren und ausrichten 286

Text ausrichten 286

Ausrichtung und Schreibrichtung 287

Erste Zeile einrücken 288

Listen formatieren 289

Kurzgefasst 290

Kapitel 12 Richtig vermessen: die Ausmaße von Elementen 291

Ausmaße von Elementen 291

Breite 292

Höhe 294

Innenabstand 295

Verkürzte Angaben mit mehreren Werten bei padding, margin etc 297

Rahmen 298

Logische Werte 299

Überfließen steuern mit overflow 300

Außenabstand 301

Grundprinzip von margin 301

Zusammenfallende Außenabstände 302

box-sizing und die Gesamtgröße 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

Verwandlungskünstler: 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 ergänzen 315

Wiederholung steuern 316

Position des Hintergrundbilds bestimmen 317

Größe des Hintergrundbilds verändern: background-size 318

Fixiert beim Scrollen: background-attachment 319

Kürzer mit background 320

Mehr Optionen bei Hintergrundbildern 321

Bildschirmfüllendes Hintergrundbild 322

Farbverläufe erstellen 323

Grundprinzip von Farbverläufen 323

Variationen für Farbverläufe 324

HTML-Bilder mit CSS bearbeiten 325

object-fit - Größenanpassung von HTML-Bildern 325

Filter for the world 326

Schöner Hover-Effekt bei Bildern 327

Kurzgefasst 329

Teil Iv Css Für Layouts 331

Kapitel 14 Bilder floaten, Elemente positionieren und Mehrspaltensatz nutzen 333

Bilder und Bereiche umfließen lassen 333

clear - Floaten aufheben...