HTML & CSS für Dummies

Einleitung 19

UEber dieses Buch 19

Konventionen in diesem Buch 19

Was Sie nicht lesen muessen 19

Toerichte Annahmen ueber den Leser 20

Wie dieses Buch aufgebaut ist (Achtung Spoiler!) 20

Teil I Die absoluten Basics 20

Teil II HTML - alles Wichtige 21

Teil III Losstarten mit CSS 21

Teil IV CSS fuer Layouts 21

Teil V Der Top-Ten-Teil 21

Symbole, die in diesem Buch verwendet werden 21

Wie es weitergeht 22

Teil I: Die absoluten Basics 23

Kapitel 1 Ziemlich beste Freunde: HTML und CSS 25

Webseiten: vor dem Tunen ein Blick unter die Haube 25

Aufgebrezelt mit CSS 27

Ausgezeichnet mit HTML 28

Browser: the two and only 29

Fundamental: HTML-Grundstruktur 30

HTML-Dokument erstellen 32

Alles klar mit Attributen 35

Leere Elemente: leer, aber nicht hohl 36

Kontrolle ist besser 36

CSS - auswaehlen, formatieren und los 39

Geschweifte Klammern, Doppelpunkt & Strichpunkt 39

Das erste Stylesheet 40

Kurzgefasst 42

Kapitel 2 Beispiel fuer das HTML/CSS-Team 43

Gestatten: die Beispielsite 43

Der HTML-Code fuer die Beispielseite 45

HTML-Code der Startseite im UEberblick 46

head-Bereich 48

Grobe Struktur 49

header im Detail 51

Hauptinhalt 53

Einmal Gestaltung bitte - CSS-Code erklaert 55

Stylesheet gesamt 55

Formatierung von body 56

UEberschriften formatieren 58

Formatierung der Navigation 60

Zweispaltige Darstellung des Inhalts und Footer 62

Flexible Bilder 63

Anpassungen fuer kleine Screens 64

HTML-Code der zweiten Seite 65

CSS-Code der zweiten Seite 68

Kurzgefasst 69

Kapitel 3 Fremden Code untersuchen, eigenen besser verstehen 71

Entwicklertools aufrufen 71

HTML-Code ansehen 73

CSS-Code untersuchen 76

Verhalten bei unterschiedlichen Bildschirmgroessen 77

Kurzgefasst 78

Kapitel 4 Ab ins Internet 79

Grundprinzip verstehen 79

Hosting - Begriffe und Fakten 80

Dateien mit einem FTP-Programm uebertragen 83

Zugangsdaten fuer FTP 84

FTP-Programm waehlen und installieren 84

Daten uebertragen mit FileZilla 84

Fehler beheben und Probleme loesen 88

Baustellenseite 88

403 Fehlermeldung - >>Zugriff verweigert<< 88

Dateien werden nicht angezeigt 89

Probleme mit Bildern 89

Nicht funktionierende Links 89

Kurzgefasst 89

Teil II: HTML - alles Wichtige 91

Kapitel 5 Gut strukturiert ist halb gewonnen 93

Kopf und Rumpf 93

Sprachangabe 95

Zeichensatzangabe UTF-8 95

Seitentitel - aber richtig 97

Mehr meta 98

Grundlegende Techniken 99

Leerzeichen und Zeilenumbrueche 99

Kommentare 101

Entities fuer Sonderzeichen 103

Der Blick auf body 104

Texte unterteilen 105

Am Anfang war der Absatz 105

UEberschriften 106

Listen 108

hr fuer eine inhaltliche Unterteilung 115

Zitate mit blockquote und cite 116

pre - Leerzeichen und Zeilenumbrueche beibehalten 117

Ausklappbar: details und summary 117

Inline-Elemente 118

In der Zeile 118

Die wichtigsten Inline-Elemente 119

Struktur im Groben 122

Kurzgefasst 125

Kapitel 6 Bilder und Videos 127

Mehr als Worte: Bilder 127

Raster versus Vektor 127

Eine Frage des (Bild-)Formats 128

Das richtige Format fuer die richtige Situation 131

Bilder einbinden 131

Immer scharf: SVG-Bilder 136

Echte kleine Lieblinge: Favicons 138

Bewegt: Videos 139

Kodierung und Container 139

Video einbinden 140

Videos von Youtube und anderen Diensten einbinden 142

iframes: die guten Frames 143

Was auf die Ohren: Audio 144

Mehr Objekte 145

Kurzgefasst 145

Kapitel 7 Links und Pfade 147

Verlinkungen 147

Bilder verlinken 148

Links auf externe Webseiten 149

An bestimmte Stellen auf Seiten verlinken 151

Links auf andere Dateitypen 154

Auf Dateien zum Download verlinken 155

E-Mail-Links definieren 155

Ruf! mich! an! - Telefonlinks 157

Pfade - von hier nach dort und wieder zurueck 157

Innerhalb eines Ordners auf derselben Ebene 159

In einen Unterordner verweisen 160

UEbergeordnete Ordner 160

In Parallelordner wechseln 161

Noch hoeher hinaus und tiefer hinunter 162

Absolute und relative Pfade 162

Kurzgefasst 164

Kapitel 8 Tabellen und Formulare 165

Von der Wiege bis zur Bahre - Formulare, Formulare 165

Grundsaetzliches zu Formularen 166

Viele, viele Input-Typen 176

Formularueberpruefung 183

Informationen in Reih und Glied - Tabellen 186

Grundlegender Aufbau von Tabellen 186

Tabellen fehlerfrei erstellen 190

Weitere Strukturierungselemente bei Tabellen 191

Kurzgefasst 192

Teil III: Losstarten mit CSS 193

Kapitel 9 HTML mit CSS zusammenbringen 195

HTML und CSS verknuepfen 195

Externe Datei 195

Eingebettete Stylesheets 196

Inline-Stile 199

Externe Stylesheets mit @import einbinden 200

Kommentare - in CSS (im Unterschied zu HTML) 201

Die Qual der Wahl - Elemente auswaehlen 202

Typselektor element 202

Klassenselektor .klasse 203

id-Selektor #id 204

Selektoren gruppieren: el1, el2, el3 205

Universeller Selektor * 205

Attributselektoren 206

Kombinatoren 208

Voll pseudo: Pseudoklassen und Pseudoelemente 214

Die allerallerwichtigsten Selektoren in Kurzform 223

Das Recht des Staerken - Spezifitaet verstehen 224

Kurzgefasst 227

Kapitel 10 CSS: Farben, Masseinheiten und Vererbung 229

Farben in CSS 229

Farben am Bildschirm 230

rgb(), rgba() und hexadezimale Angaben 230

hsl() und hsla() 232

Farben waehlen 233

Farbkombinationen finden 234

Masseinheiten 236

UEberblick ueber die Masseinheiten 236

Pixel verstehen 237

Prozent 239

em und rem 239

vw, vh, vwmin, vwmax 240

cm, pt, inch fuer Druck-Stylesheets 241

Tipp fuer die Verwendung der Einheiten 241

Rechnen mit CSS ueber calc() 241

Vererbung und Standardwert - oder was gilt? 242

Erb das! 242

Nicht vererbbare und vererbbare Eigenschaften 244

Vererbung in den Browserentwicklertools 244

Fehlersuche 245

Kurzgefasst 246

Kapitel 11 Schriften, Absaetze und Listen formatieren 247

Schrift formatieren 247

Standardschriften verwenden 247

Webfonts 250

Schriftgroesse bestimmen 256

Fett, kursiv, Kapitaelchen 260

Zeilenhoehe 261

Kuerze mit Wuerze: die font-Eigenschaft 263

Textschatten 264

Abstaende zwischen Woertern oder Buchstaben 265

text-decoration zur Linkformatierung, aber nicht nur 266

Linkformatierungen 266

Mehr Optionen fuer text-decoration 267

Mit unterschiedlichen Browsern umgehen 267

Texte formatieren und ausrichten 268

Text ausrichten 268

Erste Zeile einruecken 269

Listen formatieren 270

Kurzgefasst 271

Kapitel 12 Kaestchen messen 273

Ausmasse von Elementen 273

Breite 274

Hoehe 276

Innenabstand 277

Verkuerzte Angaben mit mehreren Werten bei padding, margin etc 279

Rahmen 280

UEberfliessen steuern mit overflow 281

Aussenabstand 281

Grundprinzip von margin 282

Zusammenfallende Aussenabstaende 282

box-sizing und die Gesamtgroesse 284

Effektvoll - abgerundete Ecken und Schatten 286

Abgerundet: border-radius 286

Schatten um Boxen zeichnen: box-shadow 287

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

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

Verwandlungskuenstler: display 289

display bei der Erstellung von Buttons 290

Elemente drehen, verschieben und skalieren 292

Kurzgefasst 293

Kapitel 13 Hintergrundbilder und Farbverlaeufe 295

Hintergrundfarben und -bilder 295

Hintergrundbild ergaenzen 295

Wiederholung steuern 296

Position des Hintergrundbilds bestimmen 297

Groesse des Hintergrundbilds veraendern: background-size 299

Fixiert beim Scrollen: background-attachment 300

Kuerzer mit background 301

Mehr Optionen bei Hintergrundbildern 302

Bildschirmfuellendes Hintergrundbild 303

Farbverlaeufe erstellen 304

Grundprinzip von Farbverlaeufen 304

Code fuer aeltere Browser 305

Variationen fuer Farbverlaeufe 306

Kurzgefasst 307

Teil IV: CSS fuer Layouts 309

Kapitel 14 Bilder floaten, Elemente positionieren 311

Bilder und anderes umfliessen lassen 311

clear - Floaten aufheben 315

Mehrere Elemente floaten 316

Gefloatete Elemente umschliessen 318

Inhalte nicht rechteckig umfliessen 321

In Position 324

position: absolute 325

position: relative 327

Vorhang auf fuer die Kombi: relative + absolute Positionierung 328

Halbtransparente Bildbeschriftung auf einem Bild 329

position: fixed - Footer unten festkleben 331

position: sticky - scrollen und dann feststehen 332

Multicolumn - Spaltensatz 334

Kurzgefasst 336

Kapitel 15 Flexbox und Gridlayout 337

Flexbox fuer Layouts und Navigationsleisten 337

Einstieg in Flexbox 338

Flexbox-Konzepte 339

Elemente mit Flexbox ausrichten 341

Navigation mit Flexbox realisieren 345

Autoprefixer: Flexbox fuer so viele Browser wie moeglich 351

Rasterlayouts leicht gemacht mit Gridlayout 352

Erstes Raster 352

Gridlayout mit benannten Bereichen 356

Voll flexibles Raster 358

Ausrichten mit Gridlayout und Abstaende zwischen Rasterzellen 361

Kurzgefasst 362

Kapitel 16 Responsives Webdesign 365

Responsiv - das Wesentliche 365

So fing alles an 365

Alternativen zum responsiven Webdesign 366

Bestandteile des responsiven Webdesigns 368

Viewport-Meta-Angabe 368

Klassische Medienangaben 370

Media Queries fuer responsive Webseiten 372

Breakpoints - woher nehmen oder stehlen? 374

Mehr Abfragen 375

Responsive Layouts 376

Einfaches responsives Layoutbeispiel 376

Dreispaltiges responsives Layout mit Flexbox 377

Responsives Layout mit Gridlayout 379

Komponenten auf responsiv trimmen 381

Bilder im responsiven Webdesign 382

Responsives Formular 383

Navigation responsiv machen 388

Responsiv ohne Media Queries 393

Kurzgefasst 393

Kapitel 17 Responsive Bilder 395

Ansprueche an responsive Bilder 395

Hochaufloesende Displays 396

Unterschiedliche Bilder je nach Layout und Viewport 399

Art Direction: nicht nur fuer Kuenstler 403

Verschiedene Bildformate 405

Alle zusammen 405

Und die Browser? 406

Kurzgefasst 406

Teil V: Top-Ten-Teil 407

Kapitel 18 Wenn der Browser nicht das macht, was er soll 409

Willkommen im Club 409

HTML-Fehler aufspueren 409

CSS-Fehler aufspueren 410

Verknuepfungen ueberpruefen 410

Bilder zur Anzeige bewegen 410

Probleme mit einem Hintergrundbild beheben 410

Dokumentstruktur pruefen 411

Browserunterstuetzung pruefen 411

Fallbackloesungen fuer aeltere Browser 412

Sonderangaben fuer die modernen Browser 412

Kapitel 19 Die wichtigsten Tipps zur Suchmaschinenoptimierung 413

Seite fuer Leser erstellen und nicht fuer Suchmaschinen 413

Passende und eindeutige Seitentitel 414

Beschreibung bei meta name="description" 414

Seite mit UEberschriften strukturieren 414

Klare Navigation mit einfachen URLs 414

Aussagekraeftige Linktexte 414

Bilder mit aussagekraeftige Dateinamen und alt-Texten 415

Auch fuer Smartphones und Co 415

Google-/Bing-Tools etc nutzen 415

Noch mehr Tipps 415

Kapitel 20 10 Dinge, von denen Sie nicht gedacht haetten, dass sie mit CSS gehen 417

Mauszeiger aendern 417

Animationen definieren 417

Animationen anwenden 418

CSS-Variablen (Custom Properties) definieren 418

CSS-Variablen anwenden 418

UEberblendeffekte 418

Filter 419

Transformationen in 3D 419

Lustige Formen schnipseln mit clip-path 420

Karomuster definieren mit Farbverlaeufen 420

Stichwortverzeichnis 423