Inhaltsverzeichnis

Alle Kapitel aufklappen

Alle Kapitel zuklappen

Vorwort

Materialien zum Buch

1 Einführung in das HTML5-Universum

1.1 Ist dieses Buch überhaupt etwas für mich?

1.2 Die verschiedenen Typen von Websites

1.2.1 Webpräsenz – die klassische Homepage

1.2.2 Ein Blog – das Tagebuch im Internet

1.2.3 Webshop – Geschäfte ohne Öffnungszeiten

1.2.4 Webplattform – sich ein eigenes soziales Netzwerk bauen

1.2.5 Rich Internet Application (RIA)

1.3 Dynamische und statische Websites

1.3.1 Statische Websites

1.3.2 Dynamische Websites

1.4 Sprachen für die Gestaltung und Entwicklung im Web

1.4.1 HTML5 – der »Überbegriff« für alles zusammen

1.4.2 HTML – die textbasierte Hypertext-Auszeichnungssprache

1.4.3 CSS – die Gestaltungssprache Cascading Style Sheets

1.4.4 JavaScript – die clientseitige Skriptsprache des Webbrowsers

1.4.5 Die serverseitigen Skriptsprachen und Datenbanken

1.5 Was brauche ich, um hier anzufangen?

1.5.1 (HTML-)Editor zum Schreiben von HTML-Dokumenten

1.5.2 Webbrowser für die Anzeige der Website

1.5.3 Schritt für Schritt: eine Webseite erstellen und im Webbrowser betrachten

1.5.4 Geschriebenes HTML überprüfen

1.5.5 Gute Gründe, den HTML-Code (trotzdem) zu validieren

1.6 Verwendete Konventionen im Buch

1.7 Zusammenfassung

2 Grundlegender Aufbau von HTML(-Dokumenten)

2.1 Syntax und Aufbau von HTML(-Dokumenten)

2.1.1 Wie wird in HTML ein Dokument strukturiert?

2.1.2 Baumstruktur mit dem DOM-Inspektor betrachten

2.1.3 Was sind HTML-Tags und was HTML-Elemente?

2.1.4 HTML-Elemente verschachteln und die hierarchische Struktur

2.1.5 Falsche Verschachtelung von HTML-Elementen vermeiden

2.1.6 Das Ende-Tag eines HTML-Elements weglassen?

2.1.7 Allein stehende HTML-Tags ohne Ende-Tag

2.1.8 Zusätzliche HTML-Attribute für HTML-Elemente

2.1.9 Kommentare in HTML-Dokumenten verwenden

2.2 Ein einfaches HTML-Dokument-Grundgerüst

2.2.1 Der HTML5-Dokumenttyp <!doctype>

2.2.2 Der Anfang und das Ende eines HTML-Dokuments mit <html>

2.2.3 <head> – der Kopf eines HTML-Dokuments

2.2.4 <body> – der sichtbare Bereich eines HTML-Dokuments

2.3 Zusammenfassung

3 Die Kopfdaten eines HTML-Dokuments

3.1 Die HTML-Elemente für den Kopf in der Übersicht

3.2 <title> – die Überschrift der HTML-Seite

3.3 Exkurs: Namenskonvention und Referenzierung

3.3.1 Gültige und gute Dateinamen für ein HTML-Dokument

3.3.2 Gültige Verzeichnisnamen und sinnvolle Verzeichnisstrukturen

3.3.3 Referenz auf eine Datenquelle notieren

3.4 Die Basis-URL einer Webseite mit <base> definieren

3.4.1 Die HTML-Attribute für das HTML-Element <base>

3.5 Beziehung zu einem externen Dokument mit <link>

3.5.1 Die HTML-Attribute für das allein stehende HTML-Element <link>

3.6 Dokumentglobale CSS-Stile mit <style> notieren

3.6.1 Die HTML-Attribute für das HTML-Element <style>

3.6.2 Das <style>-Element außerhalb des Kopfbereiches verwenden

3.7 Skripte in Webseiten einbinden mit <script>

3.7.1 Die HTML-Attribute für das HTML-Element <script>

3.8 Metainformationen für das Dokument mit <meta>

3.8.1 Die gebräuchlichsten Metaangaben

3.8.2 Nützliche Metadaten für einen Webcrawler angeben

3.8.3 Hilfreiche Metadaten für Suchmaschinen

3.8.4 Nützliche Metadaten für den Webbrowser

3.8.5 Allgemeine Metadaten verwenden

3.8.6 Die HTML-Attribute für das HTML-Element <meta>

3.9 Zusammenfassung

4 Der sichtbare Bereich eines HTML-Dokuments

4.1 HTML-Elemente für Seitenstrukturierung

4.1.1 <body> – der darstellbare Inhaltsbereich eines HTML-Dokuments

100

4.1.2 Die Sektionselemente von HTML

101

4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen

101

4.1.4 Inhalt in einen für sich geschlossenen Block mit <article> einteilen

102

4.1.5 Inhalte mit zusätzlichen Informationen mit <aside> ergänzen

104

4.1.6 Einen Inhalt mit <nav> zu einer Seiten-Navigationsleiste erklären

106

4.1.7 Überschriften mit den HTML-Elementen von <h1> bis <h6>

109

4.1.8 Ein Kopfbereich mit <header> und ein Fußbereich mit <footer>

114

4.1.9 Kontaktinformationen mit <address> kennzeichnen

116

4.2 HTML-Elemente für Textstrukturierung

117

4.2.1 Textabsätze mit <p> hinzufügen

118

4.2.2 Zeilenumbruch erzwingen mit <br>

120

4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen

121

4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit » «

122

4.2.5 Thematische Trennung mit <hr> hinzufügen

122

4.2.6 Absätze bzw. Zitate mit <blockquote> hinzufügen

124

4.2.7 Einen allgemeinen Bereich mit <div> definieren

125

4.2.8 <main> – ein HTML-Element für den Hauptinhalt

127

4.2.9 Gesonderte Beschriftung von Inhalten mit <figure> und <figcaption>

128

4.2.10 Ungeordnete Listen mit <ul> und <li>

130

4.2.11 Geordnete Listen mit <ol> und <li>

131

4.2.12 Nummerierung einer geordneten Liste umkehren

131

4.2.13 Nummerierung einer geordneten Liste ändern

132

4.2.14 Listen ineinander verschachteln

133

4.2.15 Eine Beschreibungsliste mit <dl>, <dt> und <dd> erstellen

135

4.3 Das semantische HTML verwenden

138

4.3.1 HTML ohne eine genauere Strukturierung

138

4.3.2 Generische Strukturierung mit <div>

139

4.3.3 Semantische Strukturierung mit den Elementen in HTML5

143

4.3.4 Wem nützen diese semantischen HTML5-Elemente?

145

4.4 HTML-Elemente für Textauszeichnungen

146

4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen

148

4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren

148

4.4.3 Darstellung von Computercode mit <code> und <pre> auszeichnen

149

4.4.4 Tastatureingabe mit <kbd> und Programmausgabe mit <samp>

151

4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen

151

4.4.6 Text als Variable mit <var> auszeichnen

152

4.4.7 Textrichtung mit <bdo> und <bdi> ändern

152

4.4.8 Text betonen bzw. hervorheben mit <em>, <strong>, <i> und <b>

154

4.4.9 Einen Text mit <mark> hervorheben

155

4.4.10 Text zwischen Anführungsstriche setzen mit <q>

156

4.4.11 Text unter- bzw. durchstreichen mit <u> und <s>

158

4.4.12 Änderungen von Text mit <ins> und <del> markieren

159

4.4.13 Einen Text hochstellen bzw. tiefstellen mit <sup> und <sub>

160

4.4.14 Datums- und Zeitangaben mit <time> kennzeichnen

161

4.4.15 Das Kleingedruckte mit <small> kennzeichnen

164

4.4.16 <ruby>, <rp> und <rt> für eine Anmerkung der Aussprache

165

4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen

166

4.5 Exkurs: Zeichencodierung

167

4.5.1 Von Bytes zur Zeichencodierung

167

4.5.2 Von ASCII zu ISO-8859

168

4.5.3 Über die Bytegrenze hinaus mit Unicode

168

4.6 Zeichenentitäten in HTML

169

4.7 Zusammenfassung

171

5 Tabellen und Hyperlinks

173

5.1 Daten in einer Tabelle strukturieren

173

5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th>

174

5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen

176

5.1.3 HTML-Attribute für die Tabellenelemente

179

5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren

180

5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col>

182

5.1.6 Tabellen beschriften mit <caption> bzw. <figcaption>

185

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

188

5.2.1 Links zu anderen HTML-Dokumenten der eigenen Website einfügen

189

5.2.2 Links zu anderen Websites einfügen

192

5.2.3 Links mit dem »target«-Attribut in einem neuen Fenster öffnen

193

5.2.4 E-Mail-Links mit »href=mailto:…«

194

5.2.5 Links zu anderen Inhaltstypen setzen

196

5.2.6 Downloadlinks mit dem »download«-Attribut hinzufügen

199

5.2.7 Links zu bestimmten Teilen einer Webseite setzen

201

5.2.8 Die HTML-Attribute für das HTML-Element <a>

204

5.3 Zusammenfassung

206

6 Grafiken und Multimedia

207

6.1 Bilder mit <img> einbinden

208

6.1.1 Bilder einem HTML-Dokument hinzufügen

208

6.1.2 Höhe und Breite für die Grafik angeben

212

6.1.3 Bilder beschriften mit <figure> und <figcaption>

215

6.1.4 Die HTML-Attribute für das HTML-Element <img>

216

6.2 Verweissensitive Grafiken aka Image-Maps erstellen

217

6.3 Das passende Bild mit <picture> laden

223

6.3.1 HTML-Attribute von <source>

225

6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset«

226

6.3.3 Mehrere Bildquellen mit <img> und den HTML-Attributen »srcset« und »sizes«

227

6.4 Ein Icon für die Website hinzufügen (Favicon)

228

6.5 Vektorgrafiken in HTML-Dokumenten verwenden

230

6.5.1 SVG als Grafikreferenz hinzufügen mit <img>

231

6.5.2 SVG direkt in die Webseite einbetten mit <svg>

232

6.5.3 SVG-Tags für die Vektorgrafiken

233

6.5.4 Übersicht über die grafischen Elemente von SVG

233

6.5.5 Weitere Hinweise zur Verwendung von SVG

235

6.5.6 Mathematische Formeln mit MathML

236

6.6 Grafiken zeichnen mit <canvas>

237

6.7 Videos mit dem HTML-Element <video> abspielen

239

6.7.1 Die HTML-Attribute für das HTML-Element <video>

241

6.7.2 Dem Video Untertitel mit <track> hinzufügen

242

6.7.3 Videos über YouTube abspielen lassen

245

6.8 Audiodateien mit dem HTML-Element <audio> abspielen

246

6.8.1 Die HTML-Attribute für das HTML-Element <audio>

248

6.9 Andere aktive Inhalte einbinden

249

6.9.1 Das HTML-Element <embed>

249

6.9.2 Das HTML-Element <object>

251

6.9.3 Das HTML-Element <iframe>

252

6.10 Zusammenfassung

254

7 HTML-Formulare und interaktive Elemente

255

7.1 Einen Bereich für Formulare definieren

257

7.2 Die HTML-Eingabefelder für Formulare

258

7.2.1 Ein einzeiliges Texteingabefeld mit <input type="text">

258

7.2.2 Ein Passworteingabefeld mit <input type="password">

259

7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea>

260

7.2.4 Eine Auswahlliste bzw. Dropdown-Liste mit <select>

261

7.2.5 Eine Gruppe von Radiobuttons mit <input type="radio"> erstellen

263

7.2.6 Ein Textlabel mit <label> hinzufügen

264

7.2.7 Checkboxen mit <input type="checkbox"> verwenden

264

7.2.8 Felder für Dateiupload mit <input type="file"> verwenden

265

7.2.9 Verschiedene Schaltflächen im Überblick

266

7.2.10 Ein verstecktes Eingabefeld mit <input type="hidden"> verwenden

267

7.2.11 Formularfelder außerhalb von <form>…</form> notieren (HTML5)

268

7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen URLs (HTML5)

268

7.3 Die neuen HTML5-Eingabefelder mit <input>

269

7.3.1 Ein Eingabefeld für Farben mit <input type="color">

270

7.3.2 Ein Eingabefeld für ein Datum mit <input type="date">

271

7.3.3 Ein Eingabefeld für eine Uhrzeit mit <input type="time">

272

7.3.4 Eingabefelder für Datum und Uhrzeit

273

7.3.5 Eingabefelder für den Monat und die Woche

273

7.3.6 Ein Eingabefeld für die Suche mit <input type="search">

273

7.3.7 Ein Eingabefeld für E-Mail-Adressen mit <input type="email">

274

7.3.8 Ein Eingabefeld für eine URL mit <input type="url">

275

7.3.9 Ein Eingabefeld für Telefonnummern mit <input type="tel">

275

7.3.10 Ein Eingabefeld für Zahlen mit <input type="number">

275

7.3.11 Ein Eingabefeld für Zahlen eines bestimmten Bereiches

275

7.3.12 Ausgabe von Werten und Berechnungen mit <output>

276

7.4 Die neuen HTML5-Attribute für Eingabefelder

276

7.4.1 Den Eingabefokus mit dem HTML-Attribut »autofocus« setzen

277

7.4.2 Autovervollständigung (de)aktivieren mit dem Attribut »autocomplete«

278

7.4.3 Eine Liste mit Vorschlägen mit dem HTML-Attribut »list« und <datalist>

278

7.4.4 Minimale und maximale Werte und die Schrittweite festlegen

279

7.4.5 Das Auswählen oder die Eingabe mehrerer Werte mit »multiple«

279

7.4.6 Reguläre Ausdrücke für Eingabefelder mit »pattern«

279

7.4.7 Ein Platzhalter für ein Eingabefeld mit »placeholder«

279

7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required«

280

7.4.9 Fehlermeldung von Eingabefeldern (steuern)

280

7.5 Weitere nützliche Helferlein für Eingabefelder

283

7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren

283

7.5.2 Bei Eingabefeldern mit dem Attribut »readonly« nur Lesen erlauben

284

7.5.3 Hilfreiche Tastenkürzel und Tabulator-Reihenfolge für Eingabefelder

284

7.5.4 Formularelemente gruppieren mit <fieldset> und <legend>

285

7.5.5 Fortschrittsanzeige mit <progress>

287

7.5.6 Werte visualisieren mit <meter>

287

7.6 Formulardaten mit PHP versenden

288

7.6.1 So kommen die Daten vom Webbrowser …

289

7.6.2 Die POST-Methode

290

7.6.3 Die GET-Methode

291

7.6.4 … zum Webserver mit einem PHP-Skript

292

7.7 Interaktive HTML-Elemente

295

7.7.1 Inhalte auf-/zuklappen mit <details> und <summary>

295

7.7.2 Eine Dialogbox mit <dialog>

296

7.8 Zusammenfassung

297

8 Einführung in Cascading Stylesheets (CSS)

299

8.1 Die Versionen von CSS

300

8.1.1 Die erste Version mit CSS Level 1 (CSS 1)

300

8.1.2 Die zweite Version mit CSS Level 2 (CSS 2)

301

8.1.3 Die neueste Version mit CSS Level 3 (CSS3)

301

8.2 Das grundlegende Anwendungsprinzip von CSS

301

8.2.1 Aufbau eines Selektors in CSS

304

8.2.2 Die Deklaration eines Selektors

304

8.2.3 Kommentare für CSS-Code verwenden

305

8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code

306

8.3 Einbindungsmöglichkeiten von CSS in HTML

307

8.3.1 Stilanweisungen direkt im HTML-Tag mit dem HTML-Attribut »style«

307

8.3.2 Stilanweisungen im Dokumentkopf mit dem HTML-Element <style>

308

8.3.3 Stilanweisungen aus einer externen CSS-Datei mit <link> einbinden

310

8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen CSS-Datei(en)

312

8.3.5 Empfehlung: Trennen Sie HTML und CSS

313

8.3.6 Alternative Stylesheets

314

8.3.7 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden

316

8.3.8 Medienspezifische Stylesheets für bestimmte Ausgabegeräte

317

8.3.9 Medienspezifische Stylesheets mit CSS3

319

8.4 Zusammenfassung

320

9 Die Selektoren von CSS

321

9.1 Die einfachen Selektoren von CSS

323

9.1.1 HTML-Elemente mit dem Typselektor ansprechen

323

9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen

326

9.1.3 Universalselektor – alle Elemente in einem Dokument ansprechen

333

9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen

336

9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert

338

9.1.6 Attributselektor für Attribute mit einem bestimmten Teilwert (CSS3)

342

9.1.7 CSS-Pseudoklassen, die Selektoren für bestimmte Eigenschaften

345

9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS

350

9.1.9 Weitere nützliche Pseudoklassen

357

9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente

359

9.2 Kombinatoren – die Selektoren verketten

361

9.2.1 Der Nachfahrenselektor (E1 E2)

364

9.2.2 Der Kindselektor (E1 > E2)

366

9.2.3 Der Nachbarselektor (E1 + E2)

367

9.2.4 Der Geschwisterselektor (E1 ~ E2)

369

9.3 Empfehlung: So verwenden Sie effizientes und einfaches CSS

371

9.3.1 So schreiben Sie performantes CSS

371

9.3.2 Empfehlung: Halten Sie den CSS-Code so einfach wie möglich

374

9.4 Zusammenfassung

374

10 Die Vererbung und die Kaskade

377

10.1 Das Prinzip der Vererbung in CSS

377

10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften

382

10.1.2 Es wird nicht alles weitervererbt

383

10.1.3 Vererbung erzwingen mit »inherit«

383

10.1.4 Den Standardwert einer CSS-Eigenschaft wiederherstellen (»initial«)

385

10.1.5 Vererben erzwingen oder Wert wiederherstellen (»unset«)

386

10.1.6 Vererben erzwingen oder Werte wiederherstellen für alle Eigenschaften

386

10.2 Das Regelsystem der Kaskade verstehen

388

10.2.1 Die Herkunft eines Stylesheets

388

10.2.2 Die Priorität einer CSS-Eigenschaft mit »!important« erhöhen

389

10.2.3 Sortierung nach Wichtigkeit und Herkunft

390

10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität)

391

10.2.5 Zusammenfassung zum Regelsystem der Kaskade

395

10.3 Exkurs: Werte an CSS-Eigenschaften übergeben

396

10.3.1 Die verschiedenen Maßeinheiten in CSS

396

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

399

10.3.4 CSS3-Wertetypen

404

10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben

405

10.4 Zusammenfassung

407

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

410

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)

442

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

448

11.4 Zusammenfassung

451

12 CSS-Positionierung

453

12.1 Positionierung mit der CSS-Eigenschaft »position«

453

12.1.1 Die statische Positionierung (»position: static«)

454

12.1.2 Platzierung von Elementen mit »top«, »right«, »bottom« und »left«

456

12.1.3 Die relative Positionierung (»position: relative«)

457

12.1.4 Die absolute Positionierung (»position: absolute«)

459

12.1.5 Die fixe Positionierung (»position: fixed«)

461

12.1.6 Die haftende Positionierung (»position: sticky«)

465

12.2 Übereinanderstapeln regeln mit »z-index«

467

12.3 Schwebende Boxen für die Positionierung mit »float«

476

12.3.1 Elemente mit »float« nebeneinander anordnen

478

12.3.2 Umfließen der Elemente mit »clear« aufheben

482

12.3.3 Probleme beim Eltern-Element von gefloateten Elementen

485

12.3.4 Weitere essenzielle Informationen rund um »float«

489

12.4 Die neuen flexiblen Boxen von CSS3

491

12.4.1 Die Flexbox ausrichten

491

12.4.2 Flexibilität der Flexbox einstellen

500

12.4.3 Flexible Boxen mit fester Höhe

502

12.4.4 Die Reihenfolge der Boxen bestimmen

503

12.5 Zusammenfassung

504

13 Responsive Layouts mit CSS erstellen

505

13.1 Theoretisches Grundlagenwissen zum responsiven Webdesign

505

13.1.1 Die Verwendung von Medientypen mit CSS 2

506

13.1.2 Die mächtigen Medienabfragen für Medieneigenschaften

509

13.1.3 Einbinden und Anwenden von Medienabfragen für Medieneigenschaften

509

13.1.4 Der grundlegende Aufbau einer Abfrage von Medieneigenschaften

511

13.1.5 Welche Medieneigenschaften können abgefragt werden?

513

13.1.6 Von enormer Bedeutung: der Viewport für mobile Geräte

515

13.1.7 Verwenden Sie »em« anstatt Pixel für einen Layoutumbruch in Media Queries

519

13.1.8 Layoutumbrüche (Breakpoints)

522

13.1.9 Keine Rechenspiele mehr dank »box-sizing: border-box;«

522

13.1.10 Und was passiert mit Webbrowsern, die Media Queries nicht verstehen?

523

13.2 Wir erstellen ein einfaches responsives Layout

523

13.2.1 Wir erstellen das Grundgerüst mit HTML

523

13.2.2 Allgemeine CSS-Eigenschaften setzen

525

13.2.3 Was nehme ich als Basisversion ohne Media Queries: Mobile First!?

526

13.2.4 Den Layoutumbruch (Breakpoint) setzen

531

13.2.5 Weitere Layoutumbrüche hinzufügen

534

13.2.6 Den Hauptinhalt anpassen

539

13.3 Noch mehr flexible Elemente

542

13.3.1 Verwenden Sie relative Schriftgrößen anstelle von Pixeln

543

13.3.2 Bilder reaktionsfähig machen

544

13.3.3 Flexible Bilder in maximal möglicher Breite

547

13.3.4 Bilder ganz ausblenden

550

13.3.5 Das passende Bild zur Bildschirmbreite laden – <picture>

551

13.3.6 Flächendeckende Bilder verwenden

553

13.4 Das neue Grid-Layout von CSS3

557

13.4.1 Ein Grid für den Inhalt erstellen

557

13.4.2 Elemente im Raster platzieren

560

13.4.3 Layoutänderung leichtgemacht

567

13.4.4 Abstände zwischen den Rasterzeilen

568

13.4.5 Browsersupport

569

13.5 Verhalten von HTML-Elementen mit »display« ändern

569

13.5.1 »display: block«, »display: inline« und »display: inline-block«

569

13.5.2 HTML-Elemente als Tabelle mit »display: table«

572

13.5.3 Elemente verstecken mit »display:none«

575

13.5.4 Weitere Werte für »display«

575

13.6 Berechnungen mit CSS und der »calc()«-Funktion

575

13.7 Zusammenfassung und »Da geht noch (viel) mehr …«

578

14 Stylen mit CSS

579

14.1 Textgestaltung mit CSS

579

14.1.1 Schriftarten mit »font-family« auswählen

580

14.1.2 Schriftarten mit Webfonts liefern – »@font-face«

584

14.1.3 Symbole mit Iconfonts verwenden

590

14.1.4 Schriftgröße mit »font-size« festlegen

595

14.1.5 Kursive und fette Schriften mit »font-style« und »font-weight«

602

14.1.6 Kapitälchen mit »font-variant« erstellen

603

14.1.7 Zeilenabstand mit »line-height« definieren

604

14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font«

605

14.1.9 Buchstaben- und Wortabstände mit »letter-spacing« und »word-spacing« festlegen

607

14.1.10 Die Textausrichtung mit »text-align« festlegen

608

14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen

609

14.1.12 Den Text mit »text-indent« einrücken

611

14.1.13 Unter- und Durchstreichen von Text mit »text-decoration«

612

14.1.14 Groß- und Kleinschreibung von Text mit »text-transform«

613

14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen

614

14.1.16 Text mit »column-count« in mehrere Spalten aufteilen

615

14.2 Listen mit CSS gestalten

617

14.2.1 Aufzählungspunkte mit »list-style-type« anpassen

618

14.2.2 Bilder als Aufzählungszeichen mit »list-style-image« verwenden

619

14.2.3 Aufzählungsliste mit »list-style-position« positionieren

620

14.2.4 Die Kurzschreibweise »list-style« für die Listengestaltung

621

14.2.5 Navigation und Menüs mit Listen erstellen

621

14.3 Schönere Tabellen mit CSS gestalten

626

14.3.1 Tabellen mit fester Breite erstellen

626

14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten

627

14.3.3 Kollabierende Rahmen für Tabellenzellen mit »border-collapse«

629

14.3.4 Abstand zwischen den Zellen mit »border-spacing« einstellen

630

14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells«

630

14.3.6 Tabellenbeschriftung mit »caption-side« positionieren

632

14.4 Bilder und Grafiken mit »width« und »height« anpassen

632

14.5 Elemente transformieren mit CSS3

635

14.5.1 HTML-Elemente skalieren mit »transform: scale()«

636

14.5.2 HTML-Elemente drehen mit »transform: rotate()«

636

14.5.3 HTML-Elemente neigen mit »transform: skew()«

637

14.5.4 HTML-Elemente verschieben mit »transform: translate()«

638

14.5.5 Verschiedene Transformationen kombinieren

639

14.5.6 Es geht auch mit anderen HTML-Elementen

639

14.6 Übergänge mit CSS3 erstellen

640

14.7 HTML-Formulare mit CSS stylen

642

14.7.1 Ein HTML-Formular ordentlich strukturieren

642

14.7.2 Ausrichten der Formularelemente mit CSS

645

14.7.3 Gestalten der Formularelemente mit CSS

649

14.8 Zusammenfassung

652

15 Testen und Organisieren

653

15.1 Webbrowser-Tests – und: Was geht denn so alles?

653

15.1.1 HTML und CSS validieren

654

15.1.2 Womit sind die Besucher heute so unterwegs?

654

15.1.3 CSS3-Webbrowser-Test

655

15.1.4 HTML5-Webbrowser-Test

656

15.1.5 »caniuse.com« – kann ich das verwenden?

657

15.1.6 Cross-Browser-Tests – wie sieht das bei den anderen aus?

658

15.1.7 Testen auf echten Geräten

659

15.2 Websites in verschiedenen Größen betrachten

660

15.3 Zentrales Stylesheet einrichten

662

15.4 CSS-Reset oder -Normalisieren?

665

15.4.1 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset

665

15.4.2 Normalisierung – die Alternative zum CSS-Reset

667

15.5 Was tun, wenn der Webbrowser nicht kann?

668

15.5.1 Conditional Comments für den alten IE

668

15.5.2 Modernizr – Fähigkeiten des Webbrowsers testen

670

15.5.3 Funktionsabfrage mit der »@supports«-Regel

672

15.6 Zusammenfassung

673

16 Eine kurze Einführung in JavaScript

675

16.1 Was ist JavaScript?

676

16.2 Laufzeitumgebungen für JavaScript

678

16.3 JavaScript-Programme schreiben und ausführen

678

16.3.1 JavaScript-Umgebung und Webkonsole verwenden

678

16.3.2 Das »console«-Objekt für Kontroll- und Fehlerausgabe

680

16.3.3 Den JavaScript-Code mit Anmerkungen kommentieren

681

16.4 Die Verwendung von Variablen in JavaScript

682

16.4.1 Konstanten

684

16.4.2 Strikter Modus mit »use strict«

685

16.5 Übersicht über die JavaScript-Datentypen

686

16.5.1 Number-Datentyp (Zahlen)

686

16.5.2 String-Datentyp (Zeichenketten)

687

16.5.3 Boolean-Datentyp

689

16.5.4 Undefined- und Null-Datentyp

690

16.5.5 Objekte

690

16.5.6 Datentypen konvertieren

690

16.6 Bedingte Anweisungen in JavaScript

692

16.6.1 »true« oder »false«: boolescher Wahrheitswert

693

16.6.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden

694

16.6.3 Die »if«-Verzweigung verwenden

695

16.6.4 Logische Operatoren

696

16.6.5 Mehrfachverzweigung mit »switch«

697

16.7 Programmanweisungen mehrmals wiederholen mit Schleifen

699

16.7.1 Inkrement- und Dekrementoperator

699

16.7.2 Die kopfgesteuerte »for«-Schleife

700

16.7.3 Die kopfgesteuerte »while«-Schleife

702

16.7.4 Die fußgesteuerte »do-while«-Schleife

702

16.7.5 Den Anweisungsblock mit »break« beenden

703

16.7.6 Mit »continue« zum Schleifenanfang springen

703

16.8 Arrays

704

16.8.1 Zugriff auf die einzelnen Elemente in einem Array

704

16.8.2 Einem Array neue Elemente hinzufügen

705

16.8.3 Elemente durchlaufen mit der »for … in«- oder »for … of«-Schleife

706

16.9 Arithmetische Operatoren zum Rechnen in JavaScript

707

16.10 Eigene Funktionen in JavaScript erstellen

709

16.10.1 Die verschiedenen Möglichkeiten, eine Funktion in JavaScript zu definieren

709

16.10.2 Funktion aufrufen und Funktionsparameter

711

16.10.3 Rückgabewert einer Funktion

712

16.10.4 Der Gültigkeitsbereich von Variablen in einer Funktion

713

16.10.5 Arrow-Funktionen

715

16.10.6 Rest-Parameter – beliebige Anzahl von Funktionsparametern

716

16.11 Zusammenfassung

717

17 Objekte in JavaScript

719

17.1 Eigene Objekte in JavaScript

719

17.1.1 Was sind Objekte genau?

720

17.1.2 Die Objekt-Eigenschaften von JavaScript

722

17.1.3 Die Methoden von Objekten

723

17.1.4 Verschiedene Möglichkeiten, neue Objekte zu erzeugen

723

17.1.5 Das Schlüsselwort »this«

726

17.2 Vordefinierte Objekte von JavaScript

728

17.2.1 Das oberste Objekt »Object«

728

17.2.2 Objekte für die primitiven Datentypen Number, String und Boolean

728

17.2.3 Array-Objekt

730

17.2.4 Reguläre Ausdrücke (»RegExp«-Objekte)

731

17.2.5 »Function«-Objekt

732

17.2.6 »Date«-Objekt

732

17.2.7 »Math«-Objekt

732

17.3 Einbinden von JavaScript in HTML

733

17.3.1 »Hallo Webkonsole« – Ausgabe von JavaScripts

734

17.3.2 Das JavaScript im Kopfbereich <head> des HTML-Dokuments

737

17.3.3 Das JavaScript im Körper <body> des HTML-Dokuments

739

17.3.4 Ein externes JavaScript mit dem <script>-Element einbinden

740

17.3.5 Die Ausführung eines JavaScript-Codes

741

17.3.6 Das <noscript>-Element für JavaScript-Verweigerer

742

17.4 Browserobjekte bzw. Host-Objekte der Laufzeitumgebung

742

17.4.1 Ganz oben ist das »window«-Objekt

743

17.4.2 Das »screen«-Objekt für die Angaben zum Bildschirm

748

17.4.3 Das »location«-Objekt für den Zugriff auf die URI

749

17.4.4 Das »history«-Objekt für den Browserverlauf

750

17.4.5 Das »navigator«-Objekt für verschiedene Informationen

750

17.5 Zusammenfassung

752

18 HTML DOM und DOM-Manipulation

753

18.1 Einführung in das DOM eines HTML-Dokuments

754

18.2 Das »document«-Objekt

755

18.3 Die Programmierschnittstelle von HTML DOM

756

18.4 Auf Elemente im DOM zugreifen

757

18.4.1 Ein HTML-Element mit einem bestimmten »id«-Attribut suchen

758

18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen

759

18.4.3 HTML-Elemente mit einem bestimmten »class«-Attribut suchen

762

18.4.4 HTML-Elemente mit einem bestimmten »name«-Attribut suchen

762

18.4.5 »querySelector()« und »querySelectorAll()« verwenden

764

18.4.6 Weitere Objekt- und Eigenschaftensammlungen

766

18.5 HTML-Element, -Attribut oder den Style ändern

769

18.5.1 Den Inhalt von HTML-Elementen mit »innerHTML« ändern

769

18.5.2 Den Wert eines HTML-Attributs ändern

771

18.5.3 Den Style (CSS) eines HTML-Elements ändern

773

18.6 Auf JavaScript-Events reagieren

774

18.7 Mit dem Event-Handler die Events behandeln

775

18.7.1 Event-Handler als HTML-Attribut im HTML-Element einrichten

776

18.7.2 Event-Handler als Eigenschaft eines Objekts einrichten

776

18.7.3 Einen Event-Handler mit »addEventListener()« einrichten

777

18.8 Gängige JavaScript-Events in der Übersicht

779

18.8.1 Die JavaScript-Events der Benutzeroberfläche (Window-Events)

779

18.8.2 JavaScript-Events, die in Verbindung mit der Maus auftreten können

781

18.8.3 JavaScript-Events für Geräte mit einem Touchscreen

782

18.8.4 JavaScript-Events, die in Verbindung mit der Tastatur auftreten

783

18.8.5 JavaScript-Events für HTML-Formulare

783

18.8.6 JavaScript-Events für die neuen HTML5-APIs

784

18.9 Weitere Informationen zu Events mit dem »event«-Objekt

784

18.10 Standardaktion von Events unterdrücken

787

18.11 Der Event-Fluss (Event-Propagation)

788

18.11.1 Mehr zur Bubbling-Phase

789

18.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen

790

18.11.3 Eingreifen in den Event-Fluss während der Capturing-Phase

792

18.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase

793

18.12 HTML-Elemente hinzufügen, ändern, entfernen

793

18.12.1 Neues HTML-Element und Inhalt erzeugen und hinzufügen

794

18.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern

796

18.12.3 Ein neues HTML-Element gezielter dem DOM-Baum hinzufügen

800

18.12.4 Vorhandenes HTML-Element vom DOM-Baum löschen

801

18.12.5 Ein HTML-Element im DOM-Baum durch ein anderes ersetzen

803

18.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen

804

18.12.7 Verschiedene Methoden, die HTML-Attribute zu manipulieren

805

18.12.8 Das <template>-HTML-Tag

808

18.13 HTML-Formulare und JavaScript

811

18.13.1 Texteingabefelder mit JavaScript einlesen

812

18.13.2 Auswahllisten mit JavaScript einlesen

813

18.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen

814

18.13.4 Schaltflächen mit JavaScript abfangen

815

18.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern

817

18.14 Zusammenfassung

818

19 Einführung in die HTML5-JavaScript-APIs

821

19.1 Video- und Audio-Media-API

822

19.1.1 Ein Video mit JavaScript und der Media-API steuern

823

19.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern

826

19.2 Zeichnen mit der Canvas-2D-API

828

19.2.1 Auf einem <canvas>-Element zeichnen

828

19.2.2 Methoden, mit denen auf das <canvas>-Element gezeichnet wird

830

19.2.3 Bilder mit <canvas> kopieren und manipulieren

832

19.2.4 Eigene (Wrapper-)Funktionen für <canvas> erstellen

834

19.2.5 Den »CanvasRenderingContext2D« erweitern

837

19.2.6 Fertige <canvas>-Bibliotheken im Überblick

838

19.2.7 <canvas> gegen <svg> bzw. <canvas> oder <svg>?

839

19.2.8 Weitere Hinweise zu <canvas>

840

19.3 Den Standort ermitteln mit der Geolocation-API

840

19.3.1 Die Geolocation-API in einem HTML-Dokument verwenden

841

19.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln

843

19.3.3 Feintuning mit weiteren Optionen der Geolocation-API

845

19.3.4 Die Position des Benutzers dauerhaft überwachen

847

19.3.5 Die Position des Benutzers auf einer Karte anzeigen

848

19.4 Ziehen und Fallenlassen mit der Drag & Drop-API

852

19.4.1 Ein HTML-Element mit »draggable« ziehbar machen

852

19.4.2 Events, die beim Drag & Drop auftreten können

853

19.4.3 Mit dem Ziehen von Elementen starten

854

19.4.4 Die Daten zum Ziehen behandeln

854

19.4.5 Den Platz zum Fallenlassen festlegen

855

19.4.6 Die fallen gelassenen Daten verarbeiten

856

19.4.7 Andere Events während des Drag-and-Drop-Vorgangs behandeln

857

19.4.8 Das komplette Beispiel in der Übersicht

857

19.4.9 Weitere Hinweise zur Drag & Drop-API

860

19.5 Web Storage – Datenbank für Offlineanwendungen

861

19.5.1 Weitere Offlinetechnologien im Überblick

865

19.5.2 Die Internetverbindung des Benutzers prüfen

866

19.6 Web Workers – die Helfer im Hintergrund

867

19.7 Aktualisieren ohne Anfrage mit Server-Sent Events

876

19.8 Weitere interessante APIs im Schnelldurchlauf

880

19.8.1 Kommunikation in Echtzeit mit den WebSockets

880

19.8.2 Sprach- und Videotelefonie mit WebRTC

882

19.8.3 3D-Grafiken und Spiele mit WebGL

883

19.8.4 Der Umgang mit lokalen Dateien mit der File API

883

19.9 Zusammenfassung

887

20 Eine Einführung in Ajax und jQuery

889

20.1 Eine Einführung in die Ajax-Programmierung

889

20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung

891

20.1.2 Das »XMLHttpRequest«-Objekt erzeugen

893

20.1.3 Eine Anfrage an den Server stellen

894

20.1.4 Daten mitsenden

895

20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln

896

20.1.6 Die Antwort vom Server weiterverarbeiten

898

20.1.7 Das Ajax-Beispiel bei der Ausführung

898

20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM

899

20.1.9 Das JSON-Datenformat mit Ajax

905

20.2 Einführung in die JavaScript-Bibliothek jQuery

910

20.2.1 jQuery in das HTML-Dokument einbinden

910

20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery

911

20.2.3 Die komfortablen jQuery-Selektoren

913

20.2.4 Die jQuery-Events

915

20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen

918

20.2.6 HTML-Elemente mit jQuery hinzufügen und löschen

922

20.2.7 CSS mit jQuery manipulieren

926

20.2.8 Verschiedene jQuery-Effekte und -Animationen

930

20.2.9 jQuery und Ajax zusammen verwenden

939

20.2.10 Weitere jQuery-Plug-ins verwenden

942

20.2.11 Letzte Hinweise zu jQuery

942

20.3 Zusammenfassung

942

21 Fertige CSS-Frameworks

943

21.1 Übersicht über beliebte CSS-Frameworks

944

21.2 Das Bootstrap-Framework

945

21.2.1 Bootstrap herunterladen und integrieren

945

21.2.2 Das Layout mit dem Bootstrap-Framework erstellen

947

21.2.3 Die Komponenten des Bootstrap-Frameworks verwenden

961

21.2.4 JavaScript-Erweiterungen von Bootstrap einbauen

968

21.2.5 Bootstrap für Webprojekte verwenden

972

22 Ein einfaches Beispielprojekt

973

22.1 Projekt planen

973

22.1.1 Kenne deine Zielgruppe

974

22.1.2 Den Inhalt planen

974

22.2 Grundgerüst mit Inhalt erstellen

977

22.3 Layout der Website erstellen

978

22.3.1 Das Layout planen

979

22.3.2 Grundlegende Angaben für CSS

981

22.3.3 Das grundlegende Layout erstellen

982

22.3.4 Klassen zum HTML-Dokument hinzufügen

985

22.4 Typografie – Auswahl der Schriften

987

22.5 Farben

990

22.6 Navigation und Interaktion

991

22.7 Grafiken, Bilder und Multimedia

996

22.8 Website testen und optimieren

1001

Anhang

1005

A HTML-Referenz

1007

A.1 Globale HTML-Attribute

1007

A.2 HTML-Basic-Elemente

1009

A.3 HTML-Elemente für Styles und Semantik

1010

A.4 HTML-Elemente für Textauszeichnungen

1013

A.5 Formular- und Eingabeelemente

1018

A.6 Frames

1033

A.7 HTML-Elemente Bilder und Grafiken

1034

A.8 HTML-Element für Audio und Video

1038

A.9 HTML-Elemente für Links

1041

A.10 HTML-Elemente für Listen

1044

A.11 HTML-Elemente für Tabellen

1046

A.12 HTML-Elemente für Metainformationen

1049

A.13 HTML-Elemente zum Hinzufügen von anderen Inhalten

1050

A.14 Veraltete HTML-Elemente

1053

A.15 Veraltete HTML-Attribute

1054

A.16 HTML-Elemente von Version HTML 1.0 bis HTML5

1056

A.17 Globale Event-Attribute für HTML-Elemente

1062

A.18 MIME-Typen (Internet Media Type)

1067

A.19 HTML-Zeichenreferenz gängiger benannter Zeichen

1074

A.20 Sprach- und Ländercodes

1086

B CSS-Referenz

1095

B.1 CSS-Eigenschaften

1095

B.2 CSS-Selektoren

1144

B.3 CSS/@-Regeln

1149

B.4 Gängige Farbnamen

1150

C JavaScript- und Browserobjekte

1159

C.1 JavaScript-Objekte

1159

C.2 Browserobjekte

1177

D HTML-/WYSIWYG-/CSS-Editoren

1185

D.1 HTML-Editoren

1185

D.2 WYSIWYG-Editoren

1186

D.3 Webbrowser-basierende HTML-/WYSIWYG-Editoren

1186

D.4 CSS-Editoren

1187

E Das Layout mit dem Positionierungs- und Float-Modell gestalten

1189

E.1 Exkurs: Was bedeutet feste und flexible Breite?

1189

E.2 Ein zweispaltiges Layout erstellen

1190

E.3 Ein dreispaltiges Layout erstellen

1206

Index

1225