Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
1 Vorwort
25
1 Einführung in das HTML5-Universum
29
1.1 Ist dieses Buch überhaupt etwas für mich?
29
1.2 Die verschiedenen Typen von Webseiten
30
1.2.1 Webpräsenz – die klassische Homepage
31
1.2.2 Ein Blog – das Tagebuch im Internet
31
1.2.3 Webshop – Geschäfte ohne Öffnungszeiten
33
1.2.4 Webplattform – sich ein eigenes soziales Netzwerk bauen
34
1.2.5 Rich Internet Application (RIA)
34
1.3 Dynamische und statische Webseiten
35
1.3.1 Statische Webseiten
35
1.3.2 Dynamische Webseiten
37
1.4 Sprachen für die Gestaltung und Entwicklung im Web
39
1.4.1 HTML5 – der »Überbegriff« für alles zusammen
39
1.4.2 HTML – die textbasierte Hypertext-Auszeichnungssprache
39
1.4.3 CSS – die Gestaltungssprache Cascading Style Sheets
41
1.4.4 JavaScript – die clientseitige Skriptsprache des Webbrowsers
42
1.4.5 Die serverseitigen Skriptsprachen und Datenbanken
43
1.5 Was brauche ich, um hier anzufangen?
43
1.5.1 (HTML-)Editor zum Schreiben von HTML-Dokumenten
43
1.5.2 Webbrowser für die Anzeige der Webseiten
44
1.5.3 Cross-Browser-Tests – wie sieht das bei den anderen aus?
45
1.5.4 Schritt für Schritt: Webseite erstellen und im Webbrowser betrachten
47
1.5.5 Geschriebenes HTML überprüfen
50
1.5.6 Gute Gründe, den HTML-Code zu validieren
53
1.6 Verwendete Konventionen im Buch
54
1.7 Zusammenfassung
54
2 Grundlegender Aufbau von HTML(-Dokumenten)
55
2.1 Syntax und Aufbau von HTML(-Dokumenten)
55
2.1.1 Wie wird in HTML ein Dokument strukturiert?
55
2.1.2 Baumstruktur mit dem DOM-Inspektor betrachten
58
2.1.3 Was sind HTML-Tags und was HTML-Elemente?
58
2.1.4 HTML-Elemente verschachteln und die hierarchische Struktur
59
2.1.5 Falsche Verschachtelung von HTML-Elementen vermeiden
60
2.1.6 Das Ende-Tag eines HTML-Elements weglassen?
62
2.1.7 Allein stehende HTML-Tags ohne Ende-Tag
63
2.1.8 Zusätzliche HTML-Attribute für HTML-Elemente
63
2.1.9 Kommentare in HTML-Dokumenten verwenden
65
2.2 Ein einfaches HTML-Dokument-Grundgerüst
65
2.2.1 Der HTML5-Dokumenttyp <!doctype>
66
2.2.2 Die alten <!doctype>-Deklarationen
67
2.2.3 Der Anfang und das Ende eines HTML-Dokuments mit <html>
67
2.2.4 <head> – der Kopf eines HTML-Dokuments
68
2.2.5 <body> – der sichtbare Bereich eines HTML-Dokuments
69
2.3 Zusammenfassung
69
3 Die Kopfdaten eines HTML-Dokuments
71
3.1 Die HTML-Elemente für den Kopf in der Übersicht
71
3.2 <title> – die Überschrift der HTML-Seite
72
3.3 Exkurs: Namenskonvention und Referenzierung
74
3.3.1 Gültige und gute Dateinamen für ein HTML-Dokument
74
3.3.2 Gültige Verzeichnisnamen und sinnvolle Verzeichnisstrukturen
75
3.3.3 Referenz auf eine Datenquelle notieren
76
3.4 Die Basis-URL einer Webseite mit <base> definieren
78
3.4.1 Die HTML-Attribute für das HTML-Element <base>
80
3.5 Beziehung zu einem externen Dokument mit <link>
81
3.5.1 Die HTML-Attribute für das allein stehende HTML-Element <link>
83
3.6 Dokumentglobale CSS-Stile mit <style> notieren
85
3.6.1 Die HTML-Attribute für das HTML-Element <style>
86
3.6.2 Das <style>-Element außerhalb des Kopfbereiches verwenden
86
3.7 Skripte in Webseiten einbinden mit <script>
88
3.7.1 Die HTML-Attribute für das HTML-Element <script>
90
3.8 Metainformationen für das Dokument mit <meta>
90
3.8.1 Die gebräuchlichsten Metaangaben
91
3.8.2 Nützliche Metadaten für einen Webcrawler angeben
93
3.8.3 Hilfreiche Metadaten für Suchmaschinen
94
3.8.4 Nützliche Metadaten für den Webbrowser
96
3.8.5 Allgemeine Metadaten verwenden
97
3.8.6 Die HTML-Attribute für das HTML-Element <meta>
98
3.9 Zusammenfassung
98
4 Der sichtbare Bereich eines HTML-Dokuments
101
4.1 HTML-Elemente für Seitenstrukturierung
101
4.1.1 <body> – der darstellbare Inhaltsbereich eines HTML-Dokuments
102
4.1.2 Die neuen Sektionselemente von HTML
103
4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen
103
4.1.4 Inhalt in einen für sich geschlossenen Block mit <article> einteilen
104
4.1.5 Inhalte mit zusätzlichen Informationen mit <aside> ergänzen
106
4.1.6 Einen Inhalt mit <nav> zu einer Seiten-Navigationsleiste erklären
108
4.1.7 Überschriften mit den HTML-Elementen von <h1> bis <h6>
111
4.1.8 Ein Kopfbereich mit <header> und ein Fußbereich mit <footer>
116
4.1.9 Kontaktinformationen mit <address> kennzeichnen
118
4.2 HTML-Elemente für Textstrukturierung
119
4.2.1 Textabsätze mit <p> hinzufügen
120
4.2.2 Zeilenumbruch erzwingen mit <br>
122
4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen
123
4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit »&nbsp;«
124
4.2.5 Thematische Trennung mit <hr> hinzufügen
124
4.2.6 Absätze bzw. Zitate mit <blockquote> hinzufügen
126
4.2.7 Einen allgemeinen Bereich mit <div> definieren
127
4.2.8 <main> – ein HTML-Element für den Hauptinhalt
129
4.2.9 Gesonderte Beschriftung von Inhalten mit <figure> und <figcaption>
130
4.2.10 Ungeordnete Listen mit <ul> und <li>
132
4.2.11 Geordnete Listen mit <ol> und <li>
133
4.2.12 Nummerierung einer geordneten Liste umdrehen
133
4.2.13 Nummerierung einer geordneten Liste ändern
134
4.2.14 Listen ineinander verschachteln
135
4.2.15 Eine Beschreibungsliste mit <dl>, <dt> und <dd> erstellen
137
4.3 Das semantische HTML verwenden
139
4.3.1 Strukturloses HTML
140
4.3.2 Generische Strukturierung mit <div>
141
4.3.3 Semantische Strukturierung mit den neuen Elementen in HTML5
145
4.3.4 Wem nützen diese semantischen HTML5-Elemente was?
147
4.4 HTML-Elemente für Textauszeichnungen
148
4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen
150
4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren
150
4.4.3 Darstellung von Computercode mit <code> und <pre> auszeichnen
151
4.4.4 Tastatureingabe mit <kdb> und Programmausgabe mit <samp>
154
4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen
155
4.4.6 Text als Variable mit <var> auszeichnen
155
4.4.7 Textrichtung mit <bdo> und <bdi> ändern
156
4.4.8 Text betonen bzw. hervorheben mit <em>, <strong>, <i> und <b>
157
4.4.9 Einen Text mit <mark> hervorheben
158
4.4.10 Text zwischen Anführungsstriche setzen mit <q>
160
4.4.11 Text unter- bzw. durchstreichen mit <u> und <s>
161
4.4.12 Änderungen von Text mit <ins> und <del> markieren
162
4.4.13 Einen Text hochstellen bzw. tiefstellen mit <sup> und <sub>
163
4.4.14 Datums- und Zeitangaben mit <time> kennzeichnen
164
4.4.15 Das Kleingedruckte mit <small> kennzeichnen
168
4.4.16 <ruby>, <rp> und <rt> für eine Anmerkung der Aussprache
168
4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen
170
4.5 Exkurs: Zeichencodierung
170
4.5.1 Von Bytes zur Zeichencodierung
171
4.5.2 Von ASCII zu ISO-8859
171
4.5.3 Über die Bytegrenze hinaus mit Unicode
172
4.6 Zeichenentitäten in HTML
173
4.7 Zusammenfassung
175
5 Tabellen und Hyperlinks
177
5.1 Daten in einer Tabelle strukturieren
177
5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th>
178
5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen
180
5.1.3 HTML-Attribute für die Tabellenelemente
183
5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren
184
5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col>
186
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
189
5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen
190
5.2.2 Tabellen beschriften mit <caption> bzw. <figcaption>
193
5.2.3 Links zu anderen Webseiten einfügen
196
5.2.4 Links mit dem »target«-Attribut in einem neuen Fenster öffnen
197
5.2.5 E-Mail-Links mit »href=mailto:...«
198
5.2.6 Links zu anderen Inhaltstypen setzen
200
5.2.7 Downloadlinks mit dem »download«-Attribut hinzufügen
203
5.2.8 Links zu bestimmten Teilen einer Webseite setzen
205
5.2.9 Die HTML-Attribute für das HTML-Element <a>
208
5.3 Zusammenfassung
210
6 Grafiken und Multimedia
211
6.1 Bilder mit <img> einbinden
212
6.1.1 Bilder einem HTML-Dokument hinzufügen
212
6.1.2 Höhe und Breite für die Grafik angeben
216
6.1.3 Bilder beschriften mit <figure> und <figcaption>
220
6.1.4 Die HTML-Attribute für das HTML-Element <img>
221
6.2 Verweissensitive Grafiken aka Image-Maps erstellen
222
6.3 Das passende Bild mit <picture> laden
228
6.3.1 HTML-Attribute von <source>
230
6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset«
231
6.3.3 Mehrere Bildquellen mit <img> und den HTML-Attributen »srcset« und »sizes«
233
6.4 Ein Icon für die Webseite hinzufügen (Favicon)
234
6.5 Vektorgrafiken in HTML-Dokumenten verwenden
235
6.5.1 SVG als Grafikreferenz hinzufügen mit <img>
236
6.5.2 SVG direkt in die Webseite einbetten mit <svg>
237
6.5.3 SVG-Tags für die Vektorgrafiken
238
6.5.4 Übersicht über die grafischen Elemente von SVG
238
6.5.5 Weitere Hinweise zur Verwendung von SVG
240
6.5.6 Mathematische Formeln mit MathML
241
6.6 Grafiken zeichnen mit <canvas>
242
6.7 Videos mit dem HTML-Element <video> abspielen
244
6.7.1 Die HTML-Attribute für das HTML-Element <video>
246
6.7.2 Dem Video Untertitel mit <track> hinzufügen
247
6.7.3 Videos über YouTube abspielen lassen
250
6.8 Audios mit dem HTML-Element <audio> abspielen
251
6.8.1 Die HTML-Attribute für das HTML-Element <audio>
253
6.9 Andere aktive Inhalte einbinden
254
6.9.1 Das HTML-Element <embed>
254
6.9.2 Das HTML-Element <object>
255
6.9.3 Das HTML-Element <iframe>
256
6.10 Zusammenfassung
258
7 HTML-Formulare und interaktive Elemente
261
7.1 Einen Bereich für Formulare definieren
263
7.2 Die HTML-Eingabefelder für Formulare
264
7.2.1 Ein einzeiliges Texteingabefeld mit <input type="text">
264
7.2.2 Ein Passworteingabefeld mit <input type="password">
265
7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea>
266
7.2.4 Eine Auswahlliste bzw. Dropdown-Liste mit <select>
267
7.2.5 Eine Gruppe von Radiobuttons mit <input type="radio"> erstellen
269
7.2.6 Ein Textlabel mit <label> hinzufügen
270
7.2.7 Checkboxen mit <input type="checkbox"> verwenden
270
7.2.8 Felder für Datei-Upload mit <input type="file"> verwenden
271
7.2.9 Verschiedene Schaltflächen im Überblick
272
7.2.10 Ein verstecktes Eingabefeld mit <input type="hidden"> verwenden
273
7.2.11 Formularfelder außerhalb von <form>...</form> notieren (HTML5)
274
7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen URLs (HTML5)
274
7.3 Die neuen HTML5-Eingabefelder mit <input>
276
7.3.1 Ein Eingabefeld für Farben mit <input type="color">
277
7.3.2 Ein Eingabefeld für ein Datum mit <input type="date">
277
7.3.3 Ein Eingabefeld für eine Uhrzeit mit <input type="time">
278
7.3.4 Eingabefelder für Datum und Uhrzeit
279
7.3.5 Eingabefelder für den Monat und die Woche
279
7.3.6 Ein Eingabefeld für die Suche mit <input type="search">
280
7.3.7 Ein Eingabefeld für E-Mail-Adressen mit <input type="email">
280
7.3.8 Ein Eingabefeld für eine URL-Adresse mit <input type="url">
281
7.3.9 Ein Eingabefeld für Telefonnummern mit <input type="tel">
281
7.3.10 Ein Eingabefeld für Zahlen mit <input type="number">
281
7.3.11 Ein Eingabefeld für Zahlen eines bestimmten Bereiches
282
7.3.12 Ausgabe von Werten und Berechnungen mit <output>
282
7.4 Die neuen HTML5-Attribute für Eingabefelder
283
7.4.1 Den Eingabefokus mit dem HTML-Attribut »autofocus« setzen
283
7.4.2 Autovervollständigung (de)aktivieren mit dem Attribut »autocomplete«
284
7.4.3 Eine Liste mit Vorschlägen mit dem HTML-Attribut »list« und <datalist>
284
7.4.4 Minimale und maximale Werte und die Schrittweite festlegen
285
7.4.5 Das Auswählen oder die Eingabe mehrerer Werte mit »multiple«
285
7.4.6 Reguläre Ausdrücke für Eingabefelder mit »pattern«
285
7.4.7 Ein Platzhalter für ein Eingabefeld mit »placeholder«
286
7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required«
286
7.4.9 Fehlermeldung von Eingabefeldern (steuern)
286
7.5 Weitere nützliche Helferlein für Eingabefelder
289
7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren
289
7.5.2 Bei Eingabefeldern mit dem Attribut »readonly« nur Lesen erlauben
290
7.5.3 Hilfreiche Tastenkürzel und Tabulator-Reihenfolge für Eingabefelder
290
7.5.4 Formularelemente gruppieren mit <fieldset> und <legend>
292
7.5.5 Fortschrittsanzeige mit <progress>
293
7.5.6 Werte visualisieren mit <meter>
293
7.6 Formulardaten mit PHP versenden
294
7.6.1 So kommen die Daten vom Webbrowser ...
295
7.6.2 Die POST-Methode
296
7.6.3 Die GET-Methode
297
7.6.4 ... zum Webserver mit einem PHP-Skript
298
7.7 Interaktive HTML-Elemente
301
7.7.1 Inhalte auf-/zuklappen mit <details> und <summary>
301
7.7.2 Eine Dialogbox mit <dialog>
302
7.7.3 Eine Menüleiste mit <menu> und <menuitem> erzeugen
303
7.8 Zusammenfassung
305
8 Einführung in Cascading Stylesheets (CSS)
307
8.1 Die Versionen von CSS
308
8.1.1 Die erste Version mit CSS Level 1 (CSS 1)
308
8.1.2 Die zweite Version mit CSS Level 2 (CSS 2)
309
8.1.3 Die neueste Version mit CSS Level 3 (CSS3)
309
8.2 Das grundlegende Anwendungsprinzip von CSS
309
8.2.1 Aufbau eines Selektors in CSS
312
8.2.2 Die Deklaration eines Selektors
313
8.2.3 Kommentare für CSS-Code verwenden
313
8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code
314
8.3 Einbindungsmöglichkeiten von CSS in HTML
315
8.3.1 Stilanweisungen direkt im HTML-Tag mit dem HTML-Attribut »style«
315
8.3.2 Stilanweisungen im Dokumentkopf mit dem HTML-Element <style>
316
8.3.3 Stilanweisungen aus einer externen CSS-Datei mit <link> einbinden
317
8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen CSS-Datei(en)
319
8.3.5 Alternative Stylesheets
320
8.3.6 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden
323
8.3.7 Medienspezifische Stylesheets für bestimmte Ausgabegeräte
324
8.3.8 Medienspezifische Stylesheets mit CSS3
326
8.4 Zusammenfassung
326
9 Die Selektoren von CSS
327
9.1 Die einfachen Selektoren von CSS
329
9.1.1 HTML-Elemente mit dem Typselektor ansprechen
329
9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen
332
9.1.3 Universalselektor – alle Elemente in einem Dokument ansprechen
339
9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen
342
9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert
344
9.1.6 Attributselektor für Attribute mit einem bestimmten Teilwert (CSS3)
348
9.1.7 CSS-Pseudoklassen, die Selektoren für bestimmte Eigenschaften
351
9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS
356
9.1.9 Sprach-Pseudoklasse »:lang()« und die Negations-Pseudoklasse »:not()«
362
9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente
363
9.2 Kombinatoren – die Selektoren verketten
366
9.2.1 Der Nachfahrenselektor (E1 E2)
368
9.2.2 Der Kindselektor (E1 > E2)
371
9.2.3 Der Nachbarselektor (E1 + E2)
372
9.2.4 Der Geschwisterselektor (E1 ~ E2)
374
9.3 Performance verschiedener Selektoren
376
9.4 Zusammenfassung
378
10 Die Vererbung und die Kaskade
381
10.1 Das Prinzip der Vererbung in CSS
381
10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften
386
10.1.2 Es wird nicht alles weitervererbt
386
10.1.3 Vererbung erzwingen mit »inherit«
386
10.1.4 Den Standardwert einer CSS-Eigenschaft wiederherstellen (»initial«)
388
10.2 Das Regelsystem der Kaskade verstehen
388
10.2.1 Die Herkunft eines Stylesheets
389
10.2.2 Die Priorität einer CSS-Eigenschaft mit »!important« erhöhen
390
10.2.3 Sortierung nach Wichtigkeit und Herkunft
390
10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität)
392
10.2.5 Zusammenfassung zum Regelsystem der Kaskade
396
10.3 Exkurs: Werte an CSS-Eigenschaften übergeben
397
10.3.1 Die verschiedenen Maßeinheiten in CSS
397
10.3.2 Zeichenketten und Schlüsselwörter als Wert für CSS-Eigenschaften
399
10.3.3 Die vielen Möglichkeiten, eine Farbe in CSS zu verwenden
400
10.3.4 CSS3-Wertetypen
405
10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben
406
10.4 Zusammenfassung
408
11 Das Box-Modell von CSS
409
11.1 Das klassische Box-Modell von CSS
410
11.1.1 Den Inhaltsbereich mit »width« und »height« vorgeben
411
11.1.2 Den Innenabstand mit »padding« angeben
412
11.1.3 Den Rahmen mit »border« erstellen
413
11.1.4 Den Außenabstand mit »margin« einrichten
414
11.1.5 Collapsing Margins (zusammenfallende vertikale Außenabstände)
416
11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln
419
11.2 Das neue alternative Box-Modell von CSS3
421
11.2.1 Das neue Box-Modell »box-sizing« verwenden
423
11.2.2 Ist das neue Box-Modell schon alltagstauglich?
423
11.2.3 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes)
427
11.3 Boxen gestalten
429
11.3.1 Einen Rahmen mit der Eigenschaft »border« hinzufügen und gestalten
429
11.3.2 Hintergrundfarbe mit »background-color« festlegen
433
11.3.3 Hintergrundgrafiken verwenden
434
11.3.4 Die Boxen durchsichtig gestalten (CSS3)
441
11.3.5 Einen Farbverlauf hinzufügen (CSS3)
443
11.3.6 Einen Schlagschatten mit der Eigenschaft »box-shadow« hinzufügen
446
11.3.7 Runde Ecken mit der CSS3-Eigenschaft »border-radius« hinzufügen
447
11.4 Zusammenfassung
449
12 CSS-Positionierung
451
12.1 Positionierung mit der CSS-Eigenschaft »position«
451
12.1.1 Die statische Positionierung (»position: static«)
452
12.1.2 Platzierung von Elementen mit »top«, »right«, »bottom« und »left«
454
12.1.3 Die relative Positionierung (»position: relative«)
454
12.1.4 Die absolute Positionierung (»position: absolute«)
457
12.1.5 Die fixe Positionierung (»position: fixed«)
459
12.2 Übereinanderstapeln regeln mit »z-index«
462
12.3 Schwebende Boxen für die Positionierung mit »float«
472
12.3.1 Elemente mit »float« nebeneinander anordnen
474
12.3.2 Umfließen der Elemente mit »clear« aufheben
477
12.3.3 Probleme beim Eltern-Element von gefloateten Elementen
481
12.3.4 Weitere essenzielle Informationen rund um »float«
484
12.4 Die neuen flexiblen Boxen von CSS3
486
12.4.1 Die Flexbox ausrichten
486
12.4.2 Flexibilität der Flexbox einstellen
489
12.4.3 Flexible Boxen mit fester Höhe
491
12.4.4 Die Reihenfolge der Boxen bestimmen
492
12.5 Zusammenfassung
493
13 Das Layout mit CSS gestalten
495
13.1 Exkurs: Was bedeutet feste und flexible Breite?
496
13.1.1 Ein Layout mit fester Breite
496
13.1.2 Ein Layout mit flexibler Breite
496
13.2 Ein zweispaltiges Layout erstellen
497
13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung
497
13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung
502
13.2.3 Den (Haupt)inhalt horizontal zentrieren
503
13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen
505
13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen
507
13.2.6 Zweispaltiges festes Layout mit »float« erstellen
509
13.2.7 Zweispaltiges Layout mit »display: table« erstellen
510
13.3 Ein dreispaltiges Layout erstellen
512
13.3.1 Dreispaltiges flexibles Layout mit »float« erstellen
513
13.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen
515
13.3.3 Ungleich lange Spalten einfärben
517
13.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen
527
13.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3)
528
13.4 Responsive Layouts mit Media Queries erstellen
531
13.4.1 Die Verwendung von Medientypen mit CSS 2
532
13.4.2 Mächtige Medienabfragen mit den Media Queries von CSS3
534
13.4.3 Einbinden und Anwenden von Media Queries
535
13.4.4 Der grundlegende Aufbau von einfachen Media Queries
536
13.4.5 Welche Medienmerkmale können abgefragt werden?
538
13.4.6 Anwendungsbeispiel
540
13.4.7 Die mobile Navigation anpassen
554
13.4.8 Bilder reaktionsfähig machen
555
13.4.9 Das passende Bild mit <picture> laden
565
13.4.10 Weitere Anpassungen
567
13.5 Das Layout mit einem Raster (Grid) erstellen
571
13.5.1 Das Grundprinzip von Rasterlayouts
572
13.5.2 Eigenes 960-Pixel-Rasterlayout auf 12 Spalten erstellen
576
13.5.3 Das erstellte Rasterlayout überprüfen
579
13.5.4 Layout erstellen einfach gemacht
579
13.5.5 Das Rasterlayout reaktionsfähig machen
590
13.5.6 Stabilisieren mit »border-box«
595
13.5.7 Ein flexibles Raster erstellen
597
13.5.8 Fertige Grid-Systeme
598
13.5.9 Fertiges Grid-System integrieren
599
13.6 Verhalten von HTML-Elementen mit »display« ändern
603
13.7 Zusammenfassung und »Da geht noch (viel) mehr ...«
605
14 Stylen mit CSS
607
14.1 Textgestaltung mit CSS
607
14.1.1 Schriftarten mit »font-family« auswählen
608
14.1.2 Schriftarten mit Webfonts liefern – »@font-face«
613
14.1.3 Symbole mit Iconfonts verwenden
619
14.1.4 Schriftgröße mit »font-size« festlegen
624
14.1.5 Kursive und fette Schriften mit »font-style« und »font-weight«
629
14.1.6 Kapitälchen mit »font-variant« erstellen
630
14.1.7 Zeilenabstand mit »line-height« definieren
631
14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font«
633
14.1.9 Buchstaben- und Wortabstände mit »letter-spacing« und »word-spacing« festlegen
634
14.1.10 Die Textausrichtung mit »text-align« festlegen
635
14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen
636
14.1.12 Den Text mit »text-indent« einrücken
638
14.1.13 Unter- und Durchstreichen von Text mit »text-decoration«
639
14.1.14 Groß- und Kleinschreibung von Text mit »text-transform«
640
14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen (CSS3)
641
14.2 Listen mit CSS gestalten
643
14.2.1 Aufzählungspunkte mit »list-style-type« anpassen
643
14.2.2 Bilder als Aufzählungszeichen mit »list-style-image« verwenden
644
14.2.3 Aufzählungsliste mit »list-style-position« positionieren
645
14.2.4 Die Kurzschreibweise »list-style« für die Listengestaltung
646
14.2.5 Navigation und Menüs mit Listen erstellen
647
14.3 Schönere Tabellen mit CSS gestalten
653
14.3.1 Tabellen mit fester Breite erstellen
654
14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten
655
14.3.3 Kollabierende Rahmen für Tabellenzellen mit »border-collapse«
656
14.3.4 Abstand zwischen den Zellen mit »border-spacing« einstellen
657
14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells«
658
14.3.6 Tabellenbeschriftung mit »caption-side« positionieren
660
14.4 Bilder und Grafiken mit CSS gestalten
660
14.4.1 Bilder und Grafiken mit »width« und »height« anpassen
660
14.4.2 Grafiken mit der CSS-Eigenschaft »clip« beschneiden
663
14.4.3 Sprites mit CSS verwenden
665
14.4.4 Eine einfache Bildergalerie mit CSS gestalten
667
14.5 Elemente transformieren mit CSS3
671
14.5.1 HTML-Elemente skalieren mit »transform: scale()«
672
14.5.2 HTML-Elemente drehen mit »transform: rotate()«
673
14.5.3 HTML-Elemente neigen mit »transform: skew()«
674
14.5.4 HTML-Elemente verschieben mit »transform: translate()«
674
14.5.5 Verschiedene Transformationen kombinieren
675
14.5.6 Es geht auch mit anderen HTML-Elementen
676
14.6 Übergänge mit CSS3 erstellen
677
14.7 HTML-Formulare mit CSS stylen
678
14.7.1 Ein HTML-Formular ordentlich strukturieren
679
14.7.2 Ausrichten der Formularelemente mit CSS
682
14.7.3 Gestalten der Formularelemente mit CSS
684
14.8 Zusammenfassung
687
15 Testen und Organisieren
689
15.1 CSS und die Webbrowser
690
15.1.1 Acid-Webbrowser-Test
690
15.1.2 CSS3-Webbrowser-Test
691
15.1.3 CSS3 in der Praxis
692
15.2 Webseiten mit CSS in verschiedenen Größen betrachten
692
15.3 Zentrales Stylesheet einrichten
695
15.4 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset
698
15.5 Normalisierung – die Alternative zum CSS-Reset
699
15.6 Die neuen HTML5-Elemente mit CSS stylen
700
15.7 Conditional Comments für den alten IE
703
15.7.1 Webbrowser-Sniffer
704
15.8 Modernizr – Fähigkeiten des Webbrowsers testen
705
15.9 caniuse.com – kann ich das verwenden?
707
15.10 Entwickler-Tools des Webbrowsers
708
15.11 Zusammenfassung
711
16 Eine kurze Einführung in JavaScript
713
16.1 Was ist JavaScript?
714
16.2 Laufzeitumgebungen für JavaScript
716
16.3 JavaScript-Programme schreiben und ausführen
716
16.3.1 JavaScript-Umgebung und Web-Konsole verwenden
716
16.3.2 Das »console«-Objekt
718
16.3.3 Den JavaScript-Code mit Anmerkungen kommentieren
719
16.4 Die Verwendung von Variablen in JavaScript
720
16.4.1 Konstanten
722
16.4.2 Strikter Modus mit "use strict"
723
16.5 Übersicht über die JavaScript-Datentypen
723
16.5.1 Number-Datentyp (Zahlen)
724
16.5.2 String-Datentyp (Zeichenketten)
725
16.5.3 Boolean-Datentyp
727
16.5.4 Undefined- und Null-Datentyp
727
16.5.5 Objekte
728
16.5.6 Datentypen konvertieren
728
16.6 Bedingte Anweisungen in JavaScript
730
16.6.1 true« oder »false«: boolescher Wahrheitswert
731
16.6.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden
732
16.6.3 Die »if«-Verzweigung verwenden
733
16.6.4 Logische Operatoren
734
16.6.5 Mehrfachverzweigung mit »switch«
736
16.7 Programmanweisungen mehrmals wiederholen mit Schleifen
737
16.7.1 Inkrement- und Dekrementoperator
737
16.7.2 Die kopfgesteuerte »for«-Schleife
738
16.7.3 Die kopfgesteuerte »while«-Schleife
740
16.7.4 Die fußgesteuerte »do-while«-Schleife
740
16.7.5 Den Anweisungsblock mit »break« beenden
741
16.7.6 Mit »continue« zum Schleifenanfang springen
741
16.8 Arrays
742
16.8.1 Zugriff auf die einzelnen Elemente in einem Array
742
16.8.2 Einem Array neue Elemente hinzufügen
743
16.8.3 Elemente durchlaufen mit der »for/in«- oder »for/of«-Schleife
744
16.9 Arithmetische Operatoren zum Rechnen in JavaScript
745
16.10 Eigene Funktionen in JavaScript erstellen
747
16.10.1 Die verschiedenen Möglichkeiten, eine Funktion in JavaScript zu definieren
747
16.10.2 Funktion aufrufen und Funktionsparameter
749
16.10.3 Rückgabewert einer Funktion
750
16.10.4 Der Gültigkeitsbereich von Variablen in einer Funktion
751
16.10.5 Arrow-Funktionen
752
16.10.6 Rest-Parameter – beliebige Anzahl von Funktionsparametern
754
16.11 Zusammenfassung
755
17 Objekte in JavaScript
757
17.1 Benutzerdefinierte Objekte in JavaScript
757
17.1.1 Was sind Objekte genau?
758
17.1.2 Die Objekt-Eigenschaften von JavaScript
760
17.1.3 Die Methoden von Objekten
761
17.1.4 Verschiedene Möglichkeiten, neue Objekte zu erzeugen
761
17.1.5 Das Schlüsselwort »this«
764
17.2 Vordefinierte Objekte von JavaScript
765
17.2.1 Das oberste Objekt »Object«
766
17.2.2 Objekte für die primitiven Datentypen Number, String und Boolean
766
17.2.3 Array-Objekt
768
17.2.4 Reguläre Ausdrücke (RegExp-Objekte)
769
17.2.5 »Function«-Objekt
770
17.2.6 »Date«-Objekt
770
17.2.7 »Math«-Objekt
770
17.3 Einbinden von JavaScript in HTML
771
17.3.1 »Hallo Web-Browser« – Ausgabe von JavaScripts
771
17.3.2 Das JavaScript im Kopfbereich <head> des HTML-Dokuments
775
17.3.3 Das JavaScript im Körper <body> des HTML-Dokuments
776
17.3.4 Ein externes JavaScript mit dem »script«-Element einbinden
777
17.3.5 Die Ausführung eines JavaScript-Codes
778
17.3.6 Das »noscript«-Element für JavaScript-Verweigerer
779
17.4 Browser-Objekte bzw. Host-Objekte der Laufzeitumgebung
780
17.4.1 Ganz oben ist das »window«-Objekt
781
17.4.2 Das »screen«-Objekt für die Angaben zum Bildschirm
787
17.4.3 Das »location«-Objekt für den Zugriff auf die URI
788
17.4.4 Das »history«-Objekt für den Browserverlauf
789
17.4.5 Das »navigator«-Objekt für verschiedene Informationen
790
17.5 Zusammenfassung
791
18 HTML DOM und DOM-Manipulation
793
18.1 Einführung in das DOM eines HTML-Dokuments
794
18.2 Das »document«-Objekt
795
18.3 Die Programmierschnittstelle von HTML DOM
796
18.4 Nach bestimmten HTML-Elementen suchen
797
18.4.1 Ein HTML-Element mit einem bestimmten »id«-Attribut suchen
797
18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen
799
18.4.3 HTML-Elemente mit einem bestimmten »class«-Attribut suchen
801
18.4.4 HTML-Elemente mit einem bestimmten »name«-Attribut suchen
801
18.4.5 »querySelector()« und »querySelectorAll()« verwenden
803
18.4.6 Weitere Objekt- und Eigenschaftensammlungen
805
18.5 HTML-Element, -Attribut oder den Style ändern
808
18.5.1 Fallstricke bei der Anwendung von »document.write()«
809
18.5.2 Den Inhalt von HTML-Elementen mit »innerHTML« ändern
809
18.5.3 Den Wert eines HTML-Attributs ändern
811
18.5.4 Den Style (CSS) eines HTML-Elements ändern
812
18.6 Auf JavaScript-Events reagieren
814
18.7 Mit dem Event-Handler die Events behandeln
815
18.7.1 Event-Handler als HTML-Attribut im HTML-Element einrichten
815
18.7.2 Event-Handler als Eigenschaft eines Objekts einrichten
816
18.7.3 Einen Event-Handler mit »addEventListener()« einrichten
817
18.8 Gängige JavaScript-Events in der Übersicht
819
18.8.1 Die JavaScript-Events der Benutzeroberfläche (Window-Events)
819
18.8.2 JavaScript-Events, die in Verbindung mit der Maus auftreten können
821
18.8.3 JavaScript-Events für Geräte mit einem Touchscreen
822
18.8.4 JavaScript-Events, die in Verbindung mit der Tastatur auftreten
823
18.8.5 JavaScript-Events für HTML-Formulare
824
18.8.6 JavaScript-Events für die neuen HTML5-APIs
824
18.9 Weitere Informationen zu Events mit dem »event«-Objekt
824
18.10 Standardaktion von Events unterdrücken
827
18.11 Der Event-Fluss (Event-Propagation)
829
18.11.1 Mehr zur Bubbling-Phase
829
18.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen
831
18.11.3 Eingreifen in den Event-Fluss während der Capturing-Phase
832
18.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase
833
18.12 HTML-Elemente hinzufügen, ändern, entfernen
834
18.12.1 Neues HTML-Element und Inhalt erzeugen und hinzufügen
835
18.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern
836
18.12.3 Ein neues HTML-Element gezielter dem DOM-Baum hinzufügen
841
18.12.4 Vorhandenes HTML-Element vom DOM-Baum löschen
842
18.12.5 Ein HTML-Element im DOM-Baum durch ein anderes ersetzen
843
18.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen
845
18.12.7 Verschiedene Methoden, um die HTML-Attribute zu manipulieren
846
18.13 HTML-Formulare und JavaScript
849
18.13.1 Texteingabefelder mit JavaScript einlesen
849
18.13.2 Auswahllisten mit JavaScript einlesen
851
18.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen
852
18.13.4 Schaltflächen mit JavaScript abfangen
854
18.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern
855
18.14 Zusammenfassung
857
19 Einführung in die HTML5-JavaScript-APIs
859
19.1 Video- und Audio-Media-API
860
19.1.1 Ein Video mit JavaScript und der Media-API steuern
861
19.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern
864
19.2 Zeichnen mit der Canvas-2D-API
866
19.2.1 Auf einem <canvas>-Element zeichnen
866
19.2.2 Methoden, mit denen auf das <canvas>-Element gezeichnet wird
868
19.2.3 Bilder mit <canvas> kopieren und manipulieren
870
19.2.4 Eigene (Wrapper-)Funktionen für <canvas> erstellen
872
19.2.5 Den »CanvasRenderingContext2D« erweitern
875
19.2.6 Fertige <canvas>-Bibliotheken im Überblick
876
19.2.7 <canvas> gegen <svg> oder <canvas> oder <svg>?
877
19.2.8 Weitere Hinweise zu <canvas>
878
19.3 Den Standort ermitteln mit der Geolocation-API
878
19.3.1 Die Geolocation-API in einem HTML-Dokument verwenden
880
19.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln
882
19.3.3 Feintuning mit weiteren Optionen der Geolocation-API
884
19.3.4 Die Position des Benutzers dauerhaft überwachen
886
19.3.5 Die Position des Benutzers auf einer Karte anzeigen
887
19.3.6 Eine einfache Navigation vom aktuellen Standort erstellen
891
19.4 Ziehen und Fallenlassen mit der Drag & Drop-API
892
19.4.1 Ein HTML-Element mit »draggable« ziehbar machen
892
19.4.2 Events, die beim Drag & Drop auftreten können
893
19.4.3 Mit dem Ziehen von Elementen starten
894
19.4.4 Die Daten zum Ziehen behandeln
894
19.4.5 Den Platz zum Fallenlassen festlegen
895
19.4.6 Die fallen gelassenen Daten verarbeiten
896
19.4.7 Andere Events während des Drag & Drop-Vorgangs behandeln
896
19.4.8 Das komplette Beispiel in der Übersicht
897
19.4.9 Weitere Hinweise zur Drag & Drop-API
900
19.5 Offlinedaten zur Verfügung stellen
901
19.5.1 Application Cache – das Cache Manifest
901
19.5.2 Web Storage – Datenbank für Offlineanwendungen
906
19.5.3 Weitere Offlinetechnologien im Überblick
910
19.5.4 Die Internetverbindung des Benutzers prüfen
911
19.6 Web Workers – die Helfer im Hintergrund
912
19.7 Aktualisieren ohne Anfrage mit Server Sent Events
921
19.8 Weitere interessante APIs im Schnelldurchlauf
924
19.8.1 Kommunikation in Echtzeit mit den WebSockets
925
19.8.2 Sprach- und Videotelefonie mit WebRTC
927
19.8.3 3D-Grafiken und Spiele mit WebGL
928
19.8.4 Den kompletten Bildschirm mit der Fullscreen API verwenden
928
19.8.5 Der Umgang mit lokalen Dateien mit der File API
932
19.9 Zusammenfassung
935
20 Eine Einführung in Ajax und jQuery
937
20.1 Eine Einführung in die Ajax-Programmierung
937
20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung
939
20.1.2 Das »XMLHttpRequest«-Objekt erzeugen
941
20.1.3 Eine Anfrage an den Server stellen
942
20.1.4 Daten mitsenden
943
20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln
944
20.1.6 Die Antwort vom Server weiterverarbeiten
946
20.1.7 Das Ajax-Beispiel bei der Ausführung
946
20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM
947
20.1.9 Das JSON-Datenformat mit Ajax
953
20.2 Einführung in die JavaScript-Bibliothek jQuery
958
20.2.1 jQuery in das HTML-Dokument einbinden
959
20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery
960
20.2.3 Die komfortablen jQuery-Selektoren
961
20.2.4 Die jQuery-Events
964
20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen
966
20.2.6 HTML-Elemente mit jQuery hinzufügen und löschen
970
20.2.7 CSS mit jQuery manipulieren
975
20.2.8 Verschiedene jQuery-Effekte und -Animationen
978
20.2.9 jQuery und Ajax zusammen verwenden
987
20.2.10 Weitere jQuery-Plug-ins verwenden
990
20.2.11 Letzte Hinweise zu jQuery
990
20.3 Zusammenfassung
991
21 Fertige CSS-Frameworks
993
21.1 Übersicht über beliebte CSS-Frameworks
994
21.2 Das Bootstrap-Framework
995
21.2.1 Twitter Bootstrap herunterladen und integrieren
995
21.2.2 Das Layout mit dem Bootstrap-Framework erstellen
998
21.2.3 Die Komponenten des Bootstrap-Frameworks verwenden
1011
21.2.4 JavaScript-Erweiterungen von Bootstrap einbauen
1019
21.2.5 Bootstrap an die eigenen Bedürfnisse anpassen
1024
21.3 YAML 4 – das CSS-Framework
1024
21.3.1 Das nackte HTML-Grundgerüst
1025
21.3.2 YAML dem Projekt hinzufügen
1027
21.3.3 Layoutmodul wählen
1029
21.3.4 Aufteilen des Inhalts mit Gridmodulen
1033
21.3.5 Elemente mit YAML untereinanderstellen
1037
21.3.6 Testen Sie YAML
1040
21.4 Exkurs zu CSS-Präprozessoren
1040
21.4.1 Die Stylesheet-Sprache Less
1041
21.4.2 Die Stylesheet-Sprache Sass
1045
21.5 Zusammenfassung
1046
Anhang
1049
A HTML-Referenz
1051
B CSS-Referenz
1149
C JavaScript- und Browser-Objekte
1217
D HTML-/WYSIWYG-/CSS-Editoren
1243
Index
1247