Skip to main content

HTML5 und CSS3 für Dummies

HTML5 und CSS3 für Dummies

David Karlins, Judith Muhr

ISBN: 978-3-527-68143-3

Jun 2014

320 pages

Select type: E-Book

$14.99

Inhaltsverzeichnis

Über den Autor 7

Einführung 19

Über dieses Buch 19

Törichte Annahmen über den Leser 19

Symbole in diesem Buch 20

Wie es weitergeht 20

Teil I

Seitenaufbau und Design mit HTML5 und CSS3 21

Kapitel 1

Struktur und Design mit HTML5 und CSS3 23

Zauberei mit HTML5 und CSS3 24

Nicht ganz neu . . . aber anders! 25

HTML5: Aufbau auf HTML-Techniken 28

HTML-Grundlagen verstehen 30

Fünf Dinge, die Sie über HTML wissen müssen 31

Die ersten Schritte bei der Verwendung einer grundlegenden HTML-Vorlage 32

Die HTML-Dokumentstruktur 34

Die grundlegende Element-Syntax 35

Mit dem <head>-Element arbeiten 36

Das <body>-Element und <div>-Tags verwenden 36

Überschriften, Listen und Links 38

Klassenstile verwenden 40

CSS-Grundlagen 41

Ein CSS-Dokument erstellen 43

CSS-Stildefinitionen genauer betrachtet 44

Stildefinitionen kombinieren 46

Weiter mit HTML5 und CSS3 47

Kapitel 2

HTML5 einsetzen 49

Die Vorteile von HTML5 erkennen 49

Der Preis für den Einsatz von HTML5 51

Die vereinfachte doctype-Deklaration – Einführung 52

Die neuen standardisierten Strukturelemente von HTML5 verstehen 54

Neuer Prozess und Ablauf 55

Eine kurze Einführung in semantische Elemente 56

Die <div>-Tags sind tot – es leben die <div>-Tags! 57

Eine neue Rolle für grundlegende Tags 58

Mit HTML5 etwas Eigenes schaffen 59

HTML5-Elemente für Skripting mit JavaScript 64

Das <data>-Element 65

Das <canvas>-Element verwenden 65

Kapitel 3

CSS3 für Design, Interaktivität und Animation 71

Mit CSS3-Design aus dem rechteckigen Käfig ausbrechen 73

Wie es bisher war 73

Ein neues Design-Paradigma 74

Mit CSS3 Bilder ersetzen 75

Der Ausbruch aus den Kästen 75

Hintergrundverläufe 76

CSS3 und Mobilgeräte – ein perfektes Paar 77

Animation mit CSS3 79

CSS mit JavaScript kombinieren 80

Design mit Web Fonts 81

Web Fonts leicht gemacht 82

Link auf einen Web Font 82

Kapitel 4

Kompatibilitätsprobleme und Lösungen 87

HTML5 und CSS3 in alten Browsern verwenden 88

Was Sie schon immer über IE8 (und älter) wissen wollten,

aber bisher nicht zu fragen wagten 89

Hacking-Lösungen 91

Sites in IE8 (und älter) testen 95

Graceful Degradation (Allmähliche Funktionsminderung) für die

Abwärtskompatibilität 95

Browser-Kriege wegen HTML5 und CSS3 98

Anbieterspezifische CSS-Präfixe verwenden 98

Konkurrierende Video-Formate 99

Video für IE8 erstellen 100

Mobile Kompatibilität 102

Ein Wort zu Flash 102

Teil II

Seiten mit HTML5 erstellen 103

Kapitel 5

Semantische Tags in HTML5 105

Die verschiedenen Arten semantischer Elemente verstehen 105

Semantische Tags in HTML5 für die Seitenstrukturierung 106

Nicht-strukturierende semantische Tags 108

Weitere semantische Tags von HTML5 109

Mit fünf Elementen Inhalt strukturieren 112

Wissen, wann was zu verwenden ist 112

Vorlage für eine grundlegende HTML5-Seite 115

Stile für strukturierende Tags 116

HTML5 für spezifischen Inhalt 118

Verwendung der <details>- und <summary>-Elemente 119

Definition von <figure>- und <figcaption>-Tags 120

Markieren mit dem <mark>-Tag 121

<time> und <datetime> verwenden 122

Adressen definieren 123

Styling für Inhalts-Tags 124

Vorteile der semantischen Tags von HTML5 124

Kapitel 6

HTML5-Formulare 127

HTML5-Formulare – Eine unterschätzte Ressource 128

Überblick über die neuen Parameter für die HTML5-Formularfelder 129

HTML5 im Vergleich zu JavaScript oder serverseitigen Skripts 131

Kompatibilitätsprobleme 133

HTML5-Formulare erstellen 133

Formularaktionen 134

Definition von Eingabe- und Beschriftungs-Tags 137

Platzhaltertext definieren 137

HTML5-Eingabetypen implementieren 138

Einen Eingabetyp definieren 139

Eingabetypen zur Unterstützung der Barrierefreiheit 139

Eine Datenliste definieren 141

Formularausgabeelemente erstellen 143

HTML-Formularvalidierung 143

Pflichteingaben 143

E-Mail-Adressen validieren 144

Zahlen validieren 144

Ein letztes Wort zu HTML5-Formularen 145

Kapitel 7

Natives Video und Audio 147

Natives Video und Audio – ein Überblick 148

Natives Video und Audio – genauer betrachtet 149

Proprietäre Plug-ins identifizieren 149

Den Aufstieg von nativen Medien verstehen 150

Design für eine komplexe Video-Landschaft 152

Komprimierte Video-Formate 152

Video aus Ihrer Kamera: Nicht Primetime-fähig 153

Konkurrierende native Video-Formate 153

Unterschiedliche Player in unterschiedlichen Browsern 154

Umwandlung von Video in native Formate 159

Ihre Optionen für das Hosting nativer Videos 161

Natives Video optimieren 163

Grundlegende Syntax für HTML5-Video 163

Bereitstellung von Optionen für andere als HTML5-Browser 165

Ein Poster hinzufügen 166

Ein Video vorab laden 166

Natives Audio einbetten 167

MP3-Audio in OGG umwandeln 168

Ein HTML5-Audio-Element einbetten 168

Alternative Audio-Optionen 170

Kapitel 8

Mobile Geräte: Responsives Design und jQuery Mobile 171

Die Natur und die Rolle von responsivem Design verstehen 171

Ein Tag im Leben eines Multigeräte-Benutzers 172

Drei Ansätze für responsives Design 177

Die Evolution und die Rolle des Fluid-Designs 179

Responsives Design mit Medien-Abfragen implementieren 180

Zwei Techniken für Medien-Abfragen 180

Unterschiedliche Ansätze für unterschiedliche Benutzer (-Displays) 182

Definition von Medien-Abfragen mit mehreren CSS-Dateien 182

Geräte zwingen, ihre Breite zu melden 183

CSS-Dateien für unterschiedlich große Displays erstellen 183

Responsives Design in einer einzigen CSS-Datei bereitstellen 187

Web-Apps mit jQuery Mobile erstellen 190

Wie jQuery Mobile funktioniert 191

Eine grundlegende jQuery Mobile-Vorlage erstellen 191

jQuery Mobile und data–role-Elemente 194

jQuery Mobile-Inhalt anpassen 195

Themen zuweisen 196

Themen mit ThemeRoller anpassen 198

Teil III

CSS3-Effekte und Transformationen 203

Kapitel 9

Styling mit CSS3-Eigenschaften 205

Die Evolution von CSS 206

Phase 1: Styling mit HTML 206

Phase 2: Styling mit CSS 207

Phase 3: Rechteckige Bereiche und Bilddateien gehören der

Vergangenheit an 208

Übergänge in CSS3 208

Eigenschaften von CSS3-Übergängen 210

transition–timing–function verwenden 211

Kompatibilitätsprobleme bei Übergängen 213

Verzögerungen in CSS3 realisieren 213

Syntaxbeispiele für CSS3-Übergänge 214

Geht noch mehr? 216

Farben mit CSS3 neu definieren 217

Reibungsloserer Arbeitsablauf mit RGB und HSL 218

A steht für Alpha 220

Alpha oder Opazität? 220

Unterstützung von RGB- und HSL-Farbe 222

Kapitel 10

Anwendung von CSS3-Effekten 223

CSS3-Effekte optimal nutzen 224

Mit Rahmenradien aus dem Box-Modell ausbrechen! 224

CSS3-Rahmenbilder anwenden 227

Schlagschatten in CSS3 anwenden 228

Effekte und Präfixe für ihre Kompatibilität 229

Effekte animieren 231

CSS3-Effekte definieren 232

Einen Rahmenradius definieren und anwenden 232

Rahmenbilder definieren 235

Feldschatten definieren 238

Textschatten erstellen 239

Textumrisse erstellen 240

Effekte animieren 241

Kapitel 11

CSS3-Transformationen anwenden und animieren 245

Wissen, wie Transformationen angewendet werden 246

Vorteile des Designs mit Transformationen 248

Die Transformationssyntax verstehen 250

Transformationen kombinieren 251

Überlappende Ebenen verwalten 253

Kompatibilität von Transformationen 254

Transformationen mit Übergängen animieren 254

Übergänge für Transformationen 255

Eine animierte Bildgalerie erstellen 256

Animation mit @keyframes 260

Verstehen, wie @keyframes funktionieren 260

Bewegung für @keyframes 263

@keyframes-Eigenschaften 265

Kompatibilität von @keyframes und Präfixe 266

Mit @keyframes ein bewegliches Banner-Element definieren 266

Kapitel 12

Verläufe mit CSS3 erstellen 269

Die Entwicklung der CSS3-Verläufe 270

Gedreht und strahlenförmig 271

Verläufe und mobile Geräte: Ein perfektes Paar 273

Lösungen für Kompatibilitätsprobleme 274

Syntax für CSS3-Verläufe in den verschiedenen Browsern 275

Verläufe mit kostenlosen Online-Generatoren definieren 277

Ultimate CSS Gradient Generator 279

Verwendung voreingestellter Verläufe und die Vorschaufunktion 279

Definition von Farbtabulatoren in Verläufen 281

Hintergrundverläufe speichern und anwenden 281

Teil IV

Der Top-Ten-Teil 285

Kapitel 13

Die zehn besten HTML5-DesignRessourcen 287

Notepad++ 287

TextWrangler 289

Komodo Edit 289

Adobe Dreamweaver 291

FileZilla 292

W3Schools 293

W3C Markup Validation Service 293

AMP Express 294

Hipster Ipsum – Blindtextgenerator 295

jQuery Widget Factory 296

Kapitel 14

Die zehn besten CSS3-Design-Tools 297

Ultimate CSS Gradient Generator 297

Adobe Kuler 298

Color Scheme Designer 299

CSS3 Generator 300

CSS3 Box Shadow Generator 301

CSS 3.0 Maker 301

Animate.css 302

Web Designer Wall 303

CSS Menu Maker 304

Notepad RT 305

Kapitel 15

Die zehn besten FormulardatenRessourcen 307

MailChimp 307

FreeFind 308

Google Docs 309

Benutzerdefinierte Google-Suchmaschine 310

TheSiteWizard 311

FormTools 312

jQuery Menu Widget 312

Freedback 313

EmailMeForm 314

Zoho Creator 315

Stichwortverzeichnis 317