Inhaltsverzeichnis

Alle Kapitel aufklappen

Alle Kapitel zuklappen

Materialien zum Buch

Vorwort

1 Einführung in das HTML-Universum

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

1.2 Die verschiedenen Typen von Websites

1.2.1 Webpräsenz

1.2.2 Blog/Onlinemagazin/Portfolio

1.2.3 E-Commerce-Websites - Geschäfte ohne Öffnungszeiten

1.2.4 Landingpage/Microsite

1.2.5 Webplattform - sich ein eigenes soziales Netzwerk bauen

1.2.6 Web-Apps

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 HTML - die textbasierte Hypertext-Auszeichnungssprache

1.4.2 CSS - die Gestaltungssprache Cascading Style Sheets

1.4.3 JavaScript - die clientseitige Skriptsprache des Webbrowsers

1.4.4 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 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 HTML-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.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 Den Viewport einstellen

3.8.3 Nützliche Metadaten für einen Webcrawler angeben

3.8.4 Hilfreiche Metadaten für Suchmaschinen

3.8.5 Nützliche Metadaten für den Webbrowser

3.8.6 Allgemeine Metadaten verwenden

3.8.7 Meine Empfehlung: Diese Metadaten gehören in das HTML-Grundgerüst

100

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

100

3.9 Zusammenfassung

101

4 Der sichtbare Bereich eines HTML-Dokuments

103

4.1 HTML-Elemente für Seitenstrukturierung

103

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

104

4.1.2 Die Sektionselemente von HTML

105

4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen

105

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

106

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

107

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

110

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

113

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

117

4.1.9 Kontaktinformationen mit <address> kennzeichnen

119

4.2 HTML-Elemente für Textstrukturierung

120

4.2.1 Textabsätze mit <p> hinzufügen

121

4.2.2 Zeilenumbruch erzwingen mit <br>

123

4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen

124

4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit » «

125

4.2.5 Thematische Trennung mit <hr> hinzufügen

125

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>

131

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 umkehren

134

4.2.13 Nummerierung einer geordneten Liste ändern

135

4.2.14 Listen ineinander verschachteln

135

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

138

4.3 Das semantische HTML verwenden

140

4.3.1 HTML ohne eine genauere Strukturierung

141

4.3.2 Generische Strukturierung mit <div>

142

4.3.3 Semantische Strukturierung mit den Elementen in HTML

146

4.3.4 Wem nützen diese semantischen HTML-Elemente?

149

4.4 HTML-Elemente für Textauszeichnungen

149

4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen

151

4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren

152

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

152

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

154

4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen

154

4.4.6 Text als Variable mit <var> auszeichnen

155

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

155

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>

159

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

167

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

168

4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen

169

4.5 Exkurs: Zeichencodierung

170

4.5.1 Von Bytes zur Zeichencodierung

170

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

172

4.7 Zusammenfassung

174

5 Tabellen und Hyperlinks

175

5.1 Daten in einer Tabelle strukturieren

175

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

176

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

178

5.1.3 HTML-Attribute für die Tabellenelemente

181

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

182

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

184

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

187

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

190

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

191

5.2.2 Links zu anderen Websites einfügen

193

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

195

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

196

5.2.5 Links zu anderen Inhaltstypen setzen

198

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

200

5.2.7 Links zu bestimmten Teilen einer Webseite setzen

202

5.2.8 Links auf Telefonnummern erstellen

205

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

206

5.3 Zusammenfassung

208

6 Grafiken und Multimedia

209

6.1 Bilder mit <img> einbinden

210

6.1.1 Bilder einem HTML-Dokument hinzufügen

210

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

214

6.1.3 Bilder beschriften mit <figure> und <figcaption>

217

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

218

6.2 Verweissensitive Grafiken aka Image-Maps erstellen

218

6.3 Das passende Bild mit <picture> laden

224

6.3.1 HTML-Attribute von <source>

226

6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset«

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>

230

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

235

6.6 Grafiken zeichnen mit <canvas>

237

6.7 Videos mit dem HTML-Element <video> abspielen

238

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

240

6.7.2 Dem Video Untertitel mit <track> hinzufügen

241

6.7.3 Videos über YouTube abspielen lassen

244

6.8 Audiodateien mit dem HTML-Element <audio> abspielen

246

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

247

6.9 Andere aktive Inhalte einbinden

248

6.9.1 Das HTML-Element <embed>

249

6.9.2 Das HTML-Element <object>

249

6.9.3 Das HTML-Element <iframe>

250

6.10 Zusammenfassung

252

7 HTML-Formulare und interaktive Elemente

255

7.1 Einen Bereich für Formulare definieren

256

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>

259

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

261

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

262

7.2.6 Ein Textlabel mit <label> hinzufügen

263

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

267

7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen URLs

268

7.3 Spezielle Typen von Eingabefeldern

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

272

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

276

7.3.12 Ausgabe von Werten und Berechnungen mit <output>

276

7.4 Die HTML-Attribute für Eingabefelder

277

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«

280

7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required«

280

7.4.9 Fehlermeldungen für Eingabefelder steuern

280

7.5 Weitere nützliche Helferlein für Eingabefelder

283

7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren

284

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

285

7.5.4 Formularelemente gruppieren mit <fieldset> und <legend>

286

7.5.5 Fortschrittsanzeige mit <progress>

287

7.5.6 Werte visualisieren mit <meter>

288

7.6 Formulardaten mit PHP versenden

289

7.6.1 Die Daten vom Webbrowser zur Weiterverarbeitung übertragen

289

7.6.2 Die POST-Methode

291

7.6.3 Die GET-Methode

291

7.6.4 Die Daten mit einem PHP-Skript verarbeiten

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>

297

7.8 Zusammenfassung

298

8 Einführung in Cascading Stylesheets (CSS)

299

8.1 Die Geschichte von CSS

300

8.1.1 Die erste Version mit CSS Level 1

300

8.1.2 Die zweite Version mit CSS Level 2

301

8.1.3 CSS3

301

8.2 Das grundlegende Anwendungsprinzip von CSS

301

8.2.1 Aufbau einer CSS-Regel

303

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

306

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

309

8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen CSS-Dateien

310

8.3.5 Empfehlung: Trennen Sie HTML und CSS

312

8.3.6 Alternative Stylesheets testen während der Entwicklung

312

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

314

8.3.8 Medienspezifische Stylesheets für bestimmte Ausgabegeräte

314

8.3.9 Medienspezifische Stylesheets mit CSS

316

8.4 CSS im Webbrowser analysieren

317

8.5 Zusammenfassung

317

9 Die Selektoren von CSS

319

9.1 Die einfachen Selektoren von CSS

321

9.1.1 HTML-Elemente mit dem Typselektor ansprechen

321

9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen

324

9.1.3 Universalselektor - alle Elemente in einem Dokument ansprechen

330

9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen

333

9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert

335

9.1.6 Attributselektor für Attribute mit einem bestimmten Teilwert

338

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

341

9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS

346

9.1.9 Weitere nützliche Pseudoklassen

353

9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente

354

9.2 Kombinatoren - die Selektoren verketten

356

9.2.1 Der Nachfahrenselektor (E1 E2)

358

9.2.2 Der Kindselektor (E1 > E2)

360

9.2.3 Der Nachbarselektor (E1 + E2)

362

9.2.4 Der Geschwisterselektor (E1 ~ E2)

363

9.3 Empfehlung: So verwenden Sie effizientes und einfaches CSS

365

9.3.1 So schreiben Sie performantes CSS

365

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

367

9.4 Zusammenfassung

368

10 Die Vererbung und die Kaskade

371

10.1 Das Prinzip der Vererbung in CSS

371

10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften

376

10.1.2 Es wird nicht alles weitervererbt

376

10.1.3 Vererbung erzwingen mit »inherit«

377

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

379

10.1.5 Vererben erzwingen oder Wert wiederherstellen (»unset«)

379

10.1.6 Vererben erzwingen oder Werte wiederherstellen für alle Eigenschaften

379

10.2 Das Regelsystem der Kaskade verstehen

381

10.2.1 Die Herkunft eines Stylesheets

381

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

382

10.2.3 Sortierung nach Wichtigkeit und Herkunft

383

10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität)

385

10.2.5 Zusammenfassung zum Regelsystem der Kaskade

389

10.2.6 Die Kaskade im Browser analysieren

389

10.3 Exkurs: Werte an CSS-Eigenschaften übergeben

390

10.3.1 Die verschiedenen Maßeinheiten in CSS

390

10.3.2 Zeichenketten und Schlüsselwörter als Wert für CSS-Eigenschaften

393

10.3.3 Die vielen Möglichkeiten, eine Farbe in CSS zu verwenden

393

10.3.4 Winkelmaße in CSS

400

10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben

401

10.4 Zusammenfassung

403

11 Das Box-Modell von CSS

405

11.1 Das klassische Box-Modell von CSS

406

11.1.1 Den Inhaltsbereich mit »width« und »height« vorgeben

406

11.1.2 Den Innenabstand mit »padding« angeben

409

11.1.3 Den Rahmen mit »border« erstellen

409

11.1.4 Den Außenabstand mit »margin« einrichten

410

11.1.5 Collapsing Margins (zusammenfallende vertikale Außenabstände)

412

11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln

415

11.2 Das neuere alternative Box-Modell von CSS

417

11.2.1 Das Box-Modell »box-sizing« verwenden

419

11.2.2 Das alternative Box-Modell einsetzen

419

11.3 Das Box-Modell im Browser analysieren

423

11.4 Das Box-Modell für Inline-Elemente

423

11.5 Boxen gestalten

424

11.5.1 Einen Rahmen mit der Eigenschaft »border« hinzufügen und gestalten

424

11.5.2 Hintergrundfarbe mit »background-color« festlegen

428

11.5.3 Hintergrundgrafiken verwenden

429

11.5.4 Die Boxen durchsichtig gestalten

437

11.5.5 Einen Farbverlauf hinzufügen

438

11.5.6 Einen Schlagschatten mit der Eigenschaft »box-shadow« hinzufügen

441

11.5.7 Runde Ecken mit der CSS-Eigenschaft »border-radius« hinzufügen

443

11.6 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes)

446

11.7 Zusammenfassung

449

12 CSS-Positionierung

451

12.1 Positionierung mit der CSS-Eigenschaft »position«

451

12.1.1 Die normale 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«)

455

12.1.4 Die absolute Positionierung (»position: absolute«)

457

12.1.5 Die fixe Positionierung (»position: fixed«)

461

12.1.6 Die haftende Positionierung (»position: sticky«)

464

12.2 Übereinanderstapeln regeln mit »z-index«

466

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

470

12.3.1 Das Umfließen beenden

474

12.3.2 Floats zu einer Einheit zusammenfassen

476

12.4 Die flexiblen Boxen von CSS

479

12.4.1 Die Flexbox ausrichten

480

12.4.2 Flexibilität der Flexbox einstellen

488

12.4.3 Die Reihenfolge der Boxen bestimmen

492

12.5 Zusammenfassung

493

13 Responsive Layouts mit CSS erstellen

495

13.1 Theoretisches Grundlagenwissen zum responsiven Webdesign

495

13.1.1 Die Verwendung von bestimmten Medientypen

497

13.1.2 Die Medienabfragen für Medieneigenschaften

499

13.1.3 Einbinden und Anwenden von Medienabfragen für Medieneigenschaften

499

13.1.4 Der grundlegende Aufbau einer Abfrage von Medieneigenschaften

501

13.1.5 Welche Medieneigenschaften können abgefragt werden?

502

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

504

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

508

13.1.8 Layoutumbrüche (Breakpoints)

511

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

511

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

512

13.2 Wir erstellen ein einfaches responsives Layout

512

13.2.1 Wir erstellen das Grundgerüst mit HTML

512

13.2.2 Allgemeine CSS-Eigenschaften setzen

514

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

515

13.2.4 Den Layoutumbruch (Breakpoint) setzen

520

13.2.5 Weitere Layoutumbrüche hinzufügen

523

13.2.6 Den Hauptinhalt anpassen

528

13.3 Noch mehr flexible Elemente

530

13.3.1 Verwenden Sie relative Schriftgrößen anstelle von Pixeln

530

13.3.2 Bilder reaktionsfähig machen

531

13.3.3 Flexible Bilder in maximal möglicher Breite

535

13.3.4 Bilder ganz ausblenden

538

13.3.5 Das passende Bild zur Bildschirmbreite laden - <picture>

538

13.3.6 Flächendeckende Bilder verwenden

541

13.4 Das CSS-Grid-Layout

544

13.4.1 Ein Grid für den Inhalt erstellen

544

13.4.2 Elemente im Raster platzieren

547

13.4.3 Layoutänderung leichtgemacht

554

13.4.4 Abstände zwischen den Rasterzeilen

555

13.4.5 Raster im Webbrowser überprüfen

556

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

557

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

557

13.5.2 Elemente verstecken mit »display:none«

560

13.5.3 Weitere Werte für »display«

560

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

561

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

564

14 Stylen mit CSS

567

14.1 Textgestaltung mit CSS

567

14.1.1 Schriftarten mit »font-family« auswählen

568

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

573

14.1.3 Symbole mit Iconfonts verwenden

579

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

583

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

590

14.1.6 Kapitälchen mit »font-variant« erstellen

591

14.1.7 Zeilenabstand mit »line-height« definieren

592

14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font«

593

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

594

14.1.10 Die Textausrichtung mit »text-align« festlegen

596

14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen

597

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

599

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

600

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

601

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

602

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

603

14.2 Listen mit CSS gestalten

605

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

605

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

606

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

607

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

608

14.2.5 Navigation und Menüs mit Listen erstellen

609

14.3 Schönere Tabellen mit CSS gestalten

614

14.3.1 Tabellen mit fester Breite erstellen

614

14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten

615

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

617

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

617

14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells«

618

14.3.6 Tabellenbeschriftung mit »caption-side« positionieren

619

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

620

14.5 Elemente transformieren mit CSS

622

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

624

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

624

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

625

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

626

14.5.5 Verschiedene Transformationen kombinieren

627

14.5.6 Es geht auch mit anderen HTML-Elementen

627

14.6 Übergänge mit CSS erstellen

628

14.7 HTML-Formulare mit CSS stylen

630

14.7.1 Ein HTML-Formular ordentlich strukturieren

630

14.7.2 Ausrichten der Formularelemente mit CSS

633

14.7.3 Gestalten der Formularelemente mit CSS

637

14.8 Zusammenfassung

639

15 Testen und Organisieren

641

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

641

15.1.1 HTML und CSS validieren

642

15.1.2 Womit sind die Besucher heute so unterwegs?

642

15.1.3 CSS-Webbrowser-Test

644

15.1.4 HTML5-Webbrowser-Test

645

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

645

15.1.6 Funktionsabfrage mit der »@supports«-Regel

646

15.2 Websites in verschiedenen Größen betrachten

647

15.3 Zentrales Stylesheet einrichten

649

15.4 CSS-Reset oder -Normalisierung?

651

15.4.1 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset

651

15.4.2 Normalisierung - die Alternative zum CSS-Reset

653

15.5 Zusammenfassung

654

16 Der CSS-Präprozessor Sass und SCSS

655

16.1 Die Syntax Sass oder SCSS

656

16.2 Von Sass/SCSS zu CSS

656

16.3 Sass installieren und einrichten

657

16.3.1 Online-CSS-Präprozessor ganz ohne Installation

657

16.3.2 Sass mit Visual Studio Code einrichten

658

16.3.3 Sass für die Kommandozeile installieren

660

16.4 Variablen mit Sass verwenden

662

16.5 Verschachtelungen mit Sass

663

16.6 Mixins (@mixin, @inlcude)

665

16.7 Extend (@extend)

668

16.8 Media Queries und @content

671

16.9 Operatoren

673

16.10 Farben und Helligkeit anpassen

674

16.11 Kontrollstrukturen von Sass

677

16.12 Funktionen @function

681

16.13 @import

682

16.14 Kommentare

683

16.15 Zusammenfassung

684

17 Eine kurze Einführung in JavaScript

685

17.1 JavaScript in der Webentwicklung

686

17.2 JavaScript-Programme schreiben und ausführen

688

17.2.1 Eine JavaScript-Datei in eine HTML-Datei einbinden

689

17.2.2 JavaScript innerhalb von HTML schreiben

691

17.2.3 Position des JavaScripts und seine Ausführung im HTML-Dokument

693

17.2.4 Attribute, um das Ladeverhalten von JavaScript zu beeinflussen (async, defer)

694

17.2.5 Das <noscript>-Element für kein JavaScript

694

17.3 Ausgabe von JavaScript

695

17.3.1 Standarddialoge (und Eingabedialog)

695

17.3.2 Ausgabe auf die Konsole

696

17.3.3 Ausgabe auf die Webseite

698

17.3.4 JavaScript ohne Webbrowser ausführen

700

17.3.5 Den JavaScript-Code mit Anmerkungen kommentieren

701

17.4 Die Verwendung von Variablen in JavaScript

702

17.4.1 Konstanten definieren

705

17.4.2 Strikter Modus mit »use strict«

705

17.5 Übersicht über die JavaScript-Datentypen

706

17.5.1 Number-Datentyp (Zahlen)

707

17.5.2 String-Datentypen (Zeichenketten)

707

17.5.3 Template-Strings

710

17.5.4 Boolean-Datentyp

710

17.5.5 Undefined- und Null-Datentypen

711

17.5.6 Objekte

711

17.5.7 Datentypen konvertieren

712

17.6 Arithmetische Operatoren zum Rechnen in JavaScript

713

17.7 Bedingte Anweisungen in JavaScript

715

17.7.1 »true« oder »false«: boolescher Wahrheitswert

716

17.7.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden

717

17.7.3 Die »if«-Verzweigung verwenden

718

17.7.4 Den Auswahloperator verwenden

719

17.7.5 Logische Operatoren

720

17.7.6 Mehrfachverzweigung mit »switch«

721

17.8 Programmanweisungen mehrmals wiederholen mit Schleifen

722

17.8.1 Inkrement- und Dekrementoperator

722

17.8.2 Die kopfgesteuerte »for«-Schleife

723

17.8.3 Die kopfgesteuerte »while«-Schleife

725

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

725

17.8.5 Den Anweisungsblock mit »break« beenden

726

17.8.6 Mit »continue« zum Schleifenanfang springen

726

17.9 Zusammenfassung

727

18 Arrays, Funktionen und Objekte in JavaScript

729

18.1 Funktionen in JavaScript

729

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

730

18.1.2 Funktionen aufrufen und Funktionsparameter

732

18.1.3 Rückgabewert einer Funktion

735

18.1.4 Der Gültigkeitsbereich von Variablen in einer Funktion

736

18.1.5 Funktionen in der Kurzschreibweise definieren (Arrow Functions)

738

18.1.6 Funktion in einer Webseite verwenden

739

18.2 Arrays

741

18.2.1 Zugriff auf die einzelnen Elemente im Array

743

18.2.2 Mehrdimensionale Arrays

744

18.2.3 Einem Array neue Elemente hinzufügen bzw. entfernen

745

18.2.4 Arrays sortieren

750

18.2.5 Suchen in Arrays

752

18.2.6 Weitere Methoden für Arrays

753

18.3 Zeichenketten und reguläre Ausdrücke

753

18.3.1 Nützliche Funktionen für Zeichenketten

754

18.3.2 Reguläre Ausdrücke auf Zeichenketten anwenden

755

18.4 Objektorientierte Programmierung in JavaScript

755

18.4.1 Was sind Objekte genau?

755

18.4.2 Objekte über Konstruktorfunktionen erstellen

757

18.4.3 Objekte mit der Klassensyntax erzeugen

758

18.4.4 Zugriff auf die Objekt-Eigenschaften und -Methoden - Setter und Getter

759

18.4.5 Das Schlüsselwort »this«

762

18.5 Weitere globale Objekte

763

18.5.1 Das oberste Objekt »Object«

763

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

763

18.5.3 »Function«-Objekt

765

18.5.4 »Date«-Objekt

765

18.5.5 »Math«-Objekt

766

18.5.6 »Map«-Objekt

766

18.5.7 »Set«-Objekt

766

18.6 Zusammenfassung

767

19 Webseiten dynamisch ändern

769

19.1 Einführung in das DOM eines HTML-Dokuments

769

19.2 Das »document«-Objekt

771

19.3 Die Programmierschnittstelle von DOM

771

19.4 Auf Elemente im DOM zugreifen

773

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

773

19.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen

775

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

778

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

778

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

780

19.4.6 Weitere Objekt- und Eigenschaftensammlungen

782

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

785

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

785

19.5.2 Den Wert eines HTML-Attributs ändern

787

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

788

19.6 Auf JavaScript-Events reagieren

790

19.7 Mit dem Event-Handler die Events behandeln

792

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

792

19.7.2 Event-Handler als Eigenschaft eines Objekts einrichten

793

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

794

19.8 Gängige JavaScript-Events in der Übersicht

796

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

796

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

798

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

799

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

800

19.8.5 JavaScript-Events für HTML-Formulare

800

19.8.6 JavaScript-Events für die Web-APIs

801

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

801

19.10 Standardaktion von Events unterdrücken

804

19.11 Der Event-Fluss (Event-Propagation)

805

19.11.1 Mehr zur Bubbling-Phase

806

19.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen

807

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

809

19.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase

810

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

810

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

811

19.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern

813

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

817

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

819

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

820

19.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen

821

19.12.7 Verschiedene Methoden, die HTML-Attribute zu manipulieren

823

19.12.8 Das <template>-HTML-Tag

826

19.13 HTML-Formulare und JavaScript

828

19.13.1 Texteingabefelder mit JavaScript einlesen

829

19.13.2 Auswahllisten mit JavaScript einlesen

830

19.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen

831

19.13.4 Schaltflächen mit JavaScript abfangen

833

19.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern

835

19.14 Zusammenfassung

836

20 Einführung in die Web-APIs

837

20.1 Video- und Audio-Media-API

838

20.1.1 Ein Video mit JavaScript und der Media-API steuern

839

20.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern

842

20.2 Zeichnen mit der Canvas-2D-API

844

20.2.1 Auf einem <canvas>-Element zeichnen

845

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

847

20.2.3 Bilder mit <canvas> kopieren und manipulieren

849

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

851

20.2.5 Den »CanvasRenderingContext2D« erweitern

853

20.2.6 Fertige <canvas>-Bibliotheken im Überblick

855

20.2.7 <canvas> oder <svg>?

856

20.2.8 Weitere Hinweise zu <canvas>

856

20.3 Den Standort ermitteln mit der Geolocation-API

857

20.3.1 Die Geolocation-API in einem HTML-Dokument verwenden

858

20.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln

860

20.3.3 Feintuning mit weiteren Optionen der Geolocation-API

861

20.3.4 Die Position des Benutzers dauerhaft überwachen

863

20.3.5 Die Position des Benutzers auf einer Karte anzeigen

864

20.4 Ziehen und Fallenlassen mit der Drag & Drop-API

868

20.4.1 Ein HTML-Element mit »draggable« ziehbar machen

869

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

869

20.4.3 Mit dem Ziehen von Elementen starten

870

20.4.4 Die Daten zum Ziehen behandeln

871

20.4.5 Den Platz zum Fallenlassen festlegen

872

20.4.6 Die fallen gelassenen Daten verarbeiten

872

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

873

20.4.8 Das komplette Beispiel in der Übersicht

874

20.4.9 Weitere Hinweise zur Drag & Drop-API

877

20.5 Web Storage - Datenbank für Offlineanwendungen

878

20.5.1 Cookies mit JavaScript realisieren

881

20.5.2 Cookies vs. Web Storage

887

20.5.3 Weitere Offlinetechnologien im Überblick

887

20.5.4 Die Internetverbindung des Benutzers prüfen

888

20.6 Web Workers - die Helfer im Hintergrund

889

20.7 Aktualisieren ohne Anfrage mit Server-Sent Events

898

20.8 Weitere interessante Web-APIs im Schnelldurchlauf

901

20.8.1 Kommunikation in Echtzeit mit den WebSockets

901

20.8.2 Sprach- und Videotelefonie mit WebRTC

904

20.8.3 3D-Grafiken und Spiele mit WebGL

904

20.8.4 Der Umgang mit lokalen Dateien mit der File API

904

20.8.5 Übersicht aller Web-APIs

908

20.9 Zusammenfassung

908

21 Eine Einführung in Ajax und jQuery

909

21.1 Eine Einführung in die Ajax-Programmierung

909

21.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung

911

21.1.2 Das »XMLHttpRequest«-Objekt erzeugen

913

21.1.3 Eine Anfrage an den Server stellen

914

21.1.4 Daten mitsenden

915

21.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln

915

21.1.6 Die Antwort vom Server weiterverarbeiten

917

21.1.7 Das Ajax-Beispiel bei der Ausführung

918

21.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM

919

21.1.9 Das JSON-Datenformat mit Ajax

923

21.2 Einführung in die JavaScript-Bibliothek jQuery

927

21.2.1 jQuery in das HTML-Dokument einbinden

928

21.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery

929

21.2.3 Die komfortablen jQuery-Selektoren

930

21.2.4 Die jQuery-Events

933

21.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen

935

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

939

21.2.7 CSS mit jQuery manipulieren

944

21.2.8 Verschiedene jQuery-Effekte und -Animationen

948

21.2.9 jQuery und Ajax zusammen verwenden

956

21.2.10 Weitere jQuery-Plug-ins verwenden

959

21.2.11 Letzte Hinweise zu jQuery

959

21.3 Zusammenfassung

959

22 Das Bootstrap-Framework einsetzen

961

22.1 Bootstrap herunterladen und integrieren

962

22.2 Das Layout mit dem Bootstrap-Framework erstellen

964

22.3 Die Komponenten des Bootstrap-Frameworks verwenden

978

22.4 Übersicht über weitere beliebte CSS-Frameworks

988

22.5 Zusammenfassung

989

23 Einführung in die grundlegenden Konzepte von React

991

23.1 Was ist React?

991

23.2 Die Umgebung für React einrichten

993

23.3 Ein React-Projekt einrichten und starten

993

23.4 Hallo Welt in React

996

23.5 JSX (JavaScript XML)

998

23.5.1 JSX für die UI verwenden

999

23.5.2 JSX bei HTML-Attributen

1002

23.5.3 Allein stehende Elemente müssen geschlossen werden

1002

23.5.4 Fallunterscheidung

1003

23.5.5 Listen mit React

1004

23.6 Rendern von Elementen

1006

23.7 React-Komponenten und Props

1007

23.7.1 Funktionskomponente

1008

23.7.2 Klassenkomponenten

1012

23.7.3 Props

1013

23.8 Statusmanagement in React

1015

23.8.1 Das »state«-Objekt in der Klassenkomponente verwenden

1018

23.8.2 Das »state«-Objekt verändern

1018

23.8.3 Children-Props

1021

23.9 Ereignisse und deren Handler

1022

23.9.1 Argumente an Event-Handler übergeben

1023

23.10 Lifecycle von Komponenten

1024

23.10.1 Mounting

1025

23.10.2 Updating

1030

23.10.3 Unmounting

1032

23.10.4 React.Fragment

1035

23.11 Die React-Hooks-API

1036

23.11.1 Lokaler State in Funktionskomponenten mit useState

1037

23.11.2 Der Komponenten-Lifecycle mit »useEffect«

1039

23.11.3 Zugriff auf den Kontext mit »useContext«

1040

23.11.4 Custom Hooks

1042

23.12 CSS und React

1044

23.12.1 Inline-Styling mit dem »style«-Attribut

1046

23.12.2 CSS-Klassen in JSX verwenden

1048

23.12.3 CSS-Module in React

1051

23.12.4 CSS in JavaScript - Styled Components

1052

23.13 Formulare in React

1055

23.13.1 Controlled Components

1056

23.13.2 Uncontrolled Components

1058

23.13.3 Zugriff auf das native DOM über eine Referenz

1059

23.14 So geht es weiter

1061

24 Einführung in die grundlegenden Konzepte von Angular

1063

24.1 Die nötigen Werkzeuge

1064

24.2 Hallo Welt in Angular

1064

24.2.1 Übersicht der Projektdateien

1066

24.2.2 Übersicht der ng-Befehle

1067

24.3 Eine kleine Einführung in TypeScript

1068

24.3.1 Typisierung

1070

24.3.2 Interfaces

1073

24.3.3 Export und Import

1075

24.3.4 Klassen

1076

24.3.5 Weiteres

1081

24.4 Komponenten

1082

24.4.1 Komponenten erstellen

1082

24.4.2 Komponenten mit CLI erstellen

1088

24.5 Komponenten binden

1090

24.5.1 String-Interpolation

1090

24.5.2 Property-Binding

1093

24.5.3 Event-Binding

1095

24.5.4 Two-Way-Binding

1100

24.6 Pipes

1102

24.6.1 Vordefinierte Pipes

1103

24.6.2 Eigene Pipes

1107

24.7 Der Datenfluss zwischen den Komponenten

1111

24.7.1 Input-Property (Eingehende Daten)

1114

24.7.2 Output-Property (Ausgehende Daten)

1116

24.8 Styles für Komponenten

1118

24.8.1 Style als externe Datei mit styleUrls in @Component

1119

24.8.2 styles-Eigenschaft in @Component

1119

24.8.3 Inline-Style im HTML-Template

1120

24.8.4 Exkurs: Das Bootstrap-Framework in Angular verwenden

1120

24.9 Der Lebenszyklus einer Komponente

1121

24.9.1 Der Konstruktor

1122

24.9.2 Reagieren auf Änderungen - ngOnChanges

1123

24.9.3 Die Komponente initialisieren - ngOnInit

1124

24.9.4 In den ChangeDetection-Lauf eingreifen - ngDoCheck

1124

24.9.5 ViewChild und ContentChild

1125

24.9.6 Aufräumarbeiten mit ngOnDestroy

1125

24.10 Direktiven

1126

24.10.1 Strukturdirektiven

1126

24.10.2 Attributdirektiven »ngClass« und »ngStyle«

1135

24.10.3 Eigene Direktiven erstellen

1138

24.11 Wie geht es nun weiter?

1140

Index

1141