HTML5 und CSS3 für Dummies
Published on 16. April 2014
Book
Paperback/Softback
320 pages
978-3-527-71041-6 (ISBN)
Description
Mit diesem Buch lernen Sie als Webdesigner die Vorteile von HTML5 und CSS3 kennen und gezielt einzusetzen, um einzigartige Webseiten zu gestalten, die sowohl funktional sind als auch optisch etwas zu bieten haben. Finden Sie heraus, welche Neuerungen HTML5 und CSS3 mit sich bringen und welche Designmöglichkeiten sie Ihnen bieten. Nutzen Sie HTML5, um Inhalte zu organisieren und strukturieren, und spielen Sie Video- und Audiodateien ab. Mit CSS3 verpassen Sie dem Layout dann den letzten Schliff: Animieren Sie Übergänge und Effekte, fügen Sie Schatten und Farbverläufe hinzu und nutzen Sie Responsive Webdesign, um Ihre Seiten auch auf Smartphones und Tablets optimal darzustellen. Zusätzlich hat der Autor zahlreiche Tipps zu praktischen Online-Tools für Sie, beispielsweise zum Erstellen von Grafiken oder Animationen, die Ihnen beim Webdesign sehr hilfreich sein können.
More details
Persons
David Karlins ist professioneller Webdesigner und erfahrener Fachbuchautor, der auch "Building Websites All-in-One For Dummies" geschrieben hat.
Content
Inhaltsverzeichnis
UEber den Autor 7
Einfuehrung 19
UEber dieses Buch 19
Toerichte Annahmen ueber 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
Fuenf Dinge, die Sie ueber HTML wissen muessen 31
Die ersten Schritte bei der Verwendung einer grundlegenden HTML-Vorlage 32
Die HTML-Dokumentstruktur 34
Die grundlegende Element-Syntax 35
Mit dem
-Element arbeiten 36 Das
-Element und -Tags verwenden 36 UEberschriften, 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 fuer den Einsatz von HTML5 51
Die vereinfachte doctype-Deklaration - Einfuehrung 52
Die neuen standardisierten Strukturelemente von HTML5 verstehen 54
Neuer Prozess und Ablauf 55
Eine kurze Einfuehrung in semantische Elemente 56
Die
-Tags sind tot - es leben die -Tags! 57 Eine neue Rolle fuer grundlegende Tags 58
Mit HTML5 etwas Eigenes schaffen 59
HTML5-Elemente fuer Skripting mit JavaScript 64
Das -Element 65
Das -Element verwenden 65
Kapitel 3
CSS3 fuer Design, Interaktivitaet und Animation 71
Mit CSS3-Design aus dem rechteckigen Kaefig ausbrechen 73
Wie es bisher war 73
Ein neues Design-Paradigma 74
Mit CSS3 Bilder ersetzen 75
Der Ausbruch aus den Kaesten 75
Hintergrundverlaeufe 76
CSS3 und Mobilgeraete - 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
Kompatibilitaetsprobleme und Loesungen 87
HTML5 und CSS3 in alten Browsern verwenden 88
Was Sie schon immer ueber IE8 (und aelter) wissen wollten,
aber bisher nicht zu fragen wagten 89
Hacking-Loesungen 91
Sites in IE8 (und aelter) testen 95
Graceful Degradation (Allmaehliche Funktionsminderung) fuer die
Abwaertskompatibilitaet 95
Browser-Kriege wegen HTML5 und CSS3 98
Anbieterspezifische CSS-Praefixe verwenden 98
Konkurrierende Video-Formate 99
Video fuer IE8 erstellen 100
Mobile Kompatibilitaet 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 fuer die Seitenstrukturierung 106
Nicht-strukturierende semantische Tags 108
Weitere semantische Tags von HTML5 109
Mit fuenf Elementen Inhalt strukturieren 112
Wissen, wann was zu verwenden ist 112
Vorlage fuer eine grundlegende HTML5-Seite 115
Stile fuer strukturierende Tags 116
HTML5 fuer spezifischen Inhalt 118
Verwendung der - und -Elemente 119
Definition von - und -Tags 120
Markieren mit dem -Tag 121
und verwenden 122
Adressen definieren 123
Styling fuer Inhalts-Tags 124
Vorteile der semantischen Tags von HTML5 124
Kapitel 6
HTML5-Formulare 127
HTML5-Formulare - Eine unterschaetzte Ressource 128
UEberblick ueber die neuen Parameter fuer die HTML5-Formularfelder 129
HTML5 im Vergleich zu JavaScript oder serverseitigen Skripts 131
Kompatibilitaetsprobleme 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 Unterstuetzung 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 UEberblick 148
Natives Video und Audio - genauer betrachtet 149
Proprietaere Plug-ins identifizieren 149
Den Aufstieg von nativen Medien verstehen 150
Design fuer eine komplexe Video-Landschaft 152
Komprimierte Video-Formate 152
Video aus Ihrer Kamera: Nicht Primetime-faehig 153
Konkurrierende native Video-Formate 153
Unterschiedliche Player in unterschiedlichen Browsern 154
Umwandlung von Video in native Formate 159
Ihre Optionen fuer das Hosting nativer Videos 161
Natives Video optimieren 163
Grundlegende Syntax fuer HTML5-Video 163
Bereitstellung von Optionen fuer andere als HTML5-Browser 165
Ein Poster hinzufuegen 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 Geraete: Responsives Design und jQuery Mobile 171
Die Natur und die Rolle von responsivem Design verstehen 171
Ein Tag im Leben eines Multigeraete-Benutzers 172
Drei Ansaetze fuer responsives Design 177
Die Evolution und die Rolle des Fluid-Designs 179
Responsives Design mit Medien-Abfragen implementieren 180
Zwei Techniken fuer Medien-Abfragen 180
Unterschiedliche Ansaetze fuer unterschiedliche Benutzer (-Displays) 182
Definition von Medien-Abfragen mit mehreren CSS-Dateien 182
Geraete zwingen, ihre Breite zu melden 183
CSS-Dateien fuer unterschiedlich grosse 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 gehoeren der
Vergangenheit an 208
UEbergaenge in CSS3 208
Eigenschaften von CSS3-UEbergaengen 210
transition-timing-function verwenden 211
Kompatibilitaetsprobleme bei UEbergaengen 213
Verzoegerungen in CSS3 realisieren 213
Syntaxbeispiele fuer CSS3-UEbergaenge 214
Geht noch mehr? 216
Farben mit CSS3 neu definieren 217
Reibungsloserer Arbeitsablauf mit RGB und HSL 218
A steht fuer Alpha 220
Alpha oder Opazitaet? 220
Unterstuetzung 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 Praefixe fuer ihre Kompatibilitaet 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
UEberlappende Ebenen verwalten 253
Kompatibilitaet von Transformationen 254
Transformationen mit UEbergaengen animieren 254
UEbergaenge fuer Transformationen 255
Eine animierte Bildgalerie erstellen 256
Animation mit @keyframes 260
Verstehen, wie @keyframes funktionieren 260
Bewegung fuer @keyframes 263
@keyframes-Eigenschaften 265
Kompatibilitaet von @keyframes und Praefixe 266
Mit @keyframes ein bewegliches Banner-Element definieren 266
Kapitel 12
Verlaeufe mit CSS3 erstellen 269
Die Entwicklung der CSS3-Verlaeufe 270
Gedreht und strahlenfoermig 271
Verlaeufe und mobile Geraete: Ein perfektes Paar 273
Loesungen fuer Kompatibilitaetsprobleme 274
Syntax fuer CSS3-Verlaeufe in den verschiedenen Browsern 275
Verlaeufe mit kostenlosen Online-Generatoren definieren 277
Ultimate CSS Gradient Generator 279
Verwendung voreingestellter Verlaeufe und die Vorschaufunktion 279
Definition von Farbtabulatoren in Verlaeufen 281
Hintergrundverlaeufe 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
UEber den Autor 7
Einfuehrung 19
UEber dieses Buch 19
Toerichte Annahmen ueber 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
Fuenf Dinge, die Sie ueber HTML wissen muessen 31
Die ersten Schritte bei der Verwendung einer grundlegenden HTML-Vorlage 32
Die HTML-Dokumentstruktur 34
Die grundlegende Element-Syntax 35
Mit dem
-Element arbeiten 36 Das
-Element und -Tags verwenden 36 UEberschriften, 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 fuer den Einsatz von HTML5 51
Die vereinfachte doctype-Deklaration - Einfuehrung 52
Die neuen standardisierten Strukturelemente von HTML5 verstehen 54
Neuer Prozess und Ablauf 55
Eine kurze Einfuehrung in semantische Elemente 56
Die
-Tags sind tot - es leben die -Tags! 57 Eine neue Rolle fuer grundlegende Tags 58
Mit HTML5 etwas Eigenes schaffen 59
HTML5-Elemente fuer Skripting mit JavaScript 64
Das -Element 65
Das -Element verwenden 65
Kapitel 3
CSS3 fuer Design, Interaktivitaet und Animation 71
Mit CSS3-Design aus dem rechteckigen Kaefig ausbrechen 73
Wie es bisher war 73
Ein neues Design-Paradigma 74
Mit CSS3 Bilder ersetzen 75
Der Ausbruch aus den Kaesten 75
Hintergrundverlaeufe 76
CSS3 und Mobilgeraete - 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
Kompatibilitaetsprobleme und Loesungen 87
HTML5 und CSS3 in alten Browsern verwenden 88
Was Sie schon immer ueber IE8 (und aelter) wissen wollten,
aber bisher nicht zu fragen wagten 89
Hacking-Loesungen 91
Sites in IE8 (und aelter) testen 95
Graceful Degradation (Allmaehliche Funktionsminderung) fuer die
Abwaertskompatibilitaet 95
Browser-Kriege wegen HTML5 und CSS3 98
Anbieterspezifische CSS-Praefixe verwenden 98
Konkurrierende Video-Formate 99
Video fuer IE8 erstellen 100
Mobile Kompatibilitaet 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 fuer die Seitenstrukturierung 106
Nicht-strukturierende semantische Tags 108
Weitere semantische Tags von HTML5 109
Mit fuenf Elementen Inhalt strukturieren 112
Wissen, wann was zu verwenden ist 112
Vorlage fuer eine grundlegende HTML5-Seite 115
Stile fuer strukturierende Tags 116
HTML5 fuer spezifischen Inhalt 118
Verwendung der - und -Elemente 119
Definition von - und -Tags 120
Markieren mit dem -Tag 121
und verwenden 122
Adressen definieren 123
Styling fuer Inhalts-Tags 124
Vorteile der semantischen Tags von HTML5 124
Kapitel 6
HTML5-Formulare 127
HTML5-Formulare - Eine unterschaetzte Ressource 128
UEberblick ueber die neuen Parameter fuer die HTML5-Formularfelder 129
HTML5 im Vergleich zu JavaScript oder serverseitigen Skripts 131
Kompatibilitaetsprobleme 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 Unterstuetzung 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 UEberblick 148
Natives Video und Audio - genauer betrachtet 149
Proprietaere Plug-ins identifizieren 149
Den Aufstieg von nativen Medien verstehen 150
Design fuer eine komplexe Video-Landschaft 152
Komprimierte Video-Formate 152
Video aus Ihrer Kamera: Nicht Primetime-faehig 153
Konkurrierende native Video-Formate 153
Unterschiedliche Player in unterschiedlichen Browsern 154
Umwandlung von Video in native Formate 159
Ihre Optionen fuer das Hosting nativer Videos 161
Natives Video optimieren 163
Grundlegende Syntax fuer HTML5-Video 163
Bereitstellung von Optionen fuer andere als HTML5-Browser 165
Ein Poster hinzufuegen 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 Geraete: Responsives Design und jQuery Mobile 171
Die Natur und die Rolle von responsivem Design verstehen 171
Ein Tag im Leben eines Multigeraete-Benutzers 172
Drei Ansaetze fuer responsives Design 177
Die Evolution und die Rolle des Fluid-Designs 179
Responsives Design mit Medien-Abfragen implementieren 180
Zwei Techniken fuer Medien-Abfragen 180
Unterschiedliche Ansaetze fuer unterschiedliche Benutzer (-Displays) 182
Definition von Medien-Abfragen mit mehreren CSS-Dateien 182
Geraete zwingen, ihre Breite zu melden 183
CSS-Dateien fuer unterschiedlich grosse 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 gehoeren der
Vergangenheit an 208
UEbergaenge in CSS3 208
Eigenschaften von CSS3-UEbergaengen 210
transition-timing-function verwenden 211
Kompatibilitaetsprobleme bei UEbergaengen 213
Verzoegerungen in CSS3 realisieren 213
Syntaxbeispiele fuer CSS3-UEbergaenge 214
Geht noch mehr? 216
Farben mit CSS3 neu definieren 217
Reibungsloserer Arbeitsablauf mit RGB und HSL 218
A steht fuer Alpha 220
Alpha oder Opazitaet? 220
Unterstuetzung 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 Praefixe fuer ihre Kompatibilitaet 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
UEberlappende Ebenen verwalten 253
Kompatibilitaet von Transformationen 254
Transformationen mit UEbergaengen animieren 254
UEbergaenge fuer Transformationen 255
Eine animierte Bildgalerie erstellen 256
Animation mit @keyframes 260
Verstehen, wie @keyframes funktionieren 260
Bewegung fuer @keyframes 263
@keyframes-Eigenschaften 265
Kompatibilitaet von @keyframes und Praefixe 266
Mit @keyframes ein bewegliches Banner-Element definieren 266
Kapitel 12
Verlaeufe mit CSS3 erstellen 269
Die Entwicklung der CSS3-Verlaeufe 270
Gedreht und strahlenfoermig 271
Verlaeufe und mobile Geraete: Ein perfektes Paar 273
Loesungen fuer Kompatibilitaetsprobleme 274
Syntax fuer CSS3-Verlaeufe in den verschiedenen Browsern 275
Verlaeufe mit kostenlosen Online-Generatoren definieren 277
Ultimate CSS Gradient Generator 279
Verwendung voreingestellter Verlaeufe und die Vorschaufunktion 279
Definition von Farbtabulatoren in Verlaeufen 281
Hintergrundverlaeufe 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