HTML 5 und CSS 3 by Wolf, Jürgen -- Read -- Imperial Library of Trantor

Index

Liebe Leser! Inhaltsverzeichnis Vorwort

Vorwort zur zweiten Auflage Zielgruppe Wie soll ich das Buch durchlesen? In eigener Sache Danksagung

1 Einführung in das HTML5-Universum

1.1 Ist dieses Buch überhaupt etwas für mich? 1.2 Die verschiedenen Typen von Webseiten

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 Webseiten

1.3.1 Statische Webseiten 1.3.2 Dynamische Webseiten

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 Webseiten 1.5.3 Cross-Browser-Tests – wie sieht das bei den anderen aus? 1.5.4 Schritt für Schritt: Webseite erstellen und im Webbrowser betrachten 1.5.5 Geschriebenes HTML überprüfen 1.5.6 Gute Gründe, den HTML-Code 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 Die alten <!doctype>-Deklarationen 2.2.3 Der Anfang und das Ende eines HTML-Dokuments mit <html> 2.2.4 <head> – der Kopf eines HTML-Dokuments 2.2.5 <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 4.1.2 Die neuen Sektionselemente von HTML 4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen 4.1.4 Inhalt in einen für sich geschlossenen Block mit <article> einteilen 4.1.5 Inhalte mit zusätzlichen Informationen mit <aside> ergänzen 4.1.6 Einen Inhalt mit <nav> zu einer Seiten-Navigationsleiste erklären 4.1.7 Überschriften mit den HTML-Elementen von <h1> bis <h6> 4.1.8 Ein Kopfbereich mit <header> und ein Fußbereich mit <footer> 4.1.9 Kontaktinformationen mit <address> kennzeichnen

4.2 HTML-Elemente für Textstrukturierung

4.2.1 Textabsätze mit <p> hinzufügen 4.2.2 Zeilenumbruch erzwingen mit <br> 4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen 4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit » « 4.2.5 Thematische Trennung mit <hr> hinzufügen 4.2.6 Absätze bzw. Zitate mit <blockquote> hinzufügen 4.2.7 Einen allgemeinen Bereich mit <div> definieren 4.2.8 <main> – ein HTML-Element für den Hauptinhalt 4.2.9 Gesonderte Beschriftung von Inhalten mit <figure> und <figcaption> 4.2.10 Ungeordnete Listen mit <ul> und <li> 4.2.11 Geordnete Listen mit <ol> und <li> 4.2.12 Nummerierung einer geordneten Liste umdrehen 4.2.13 Nummerierung einer geordneten Liste ändern 4.2.14 Listen ineinander verschachteln 4.2.15 Eine Beschreibungsliste mit <dl>, <dt> und <dd> erstellen

4.3 Das semantische HTML verwenden

4.3.1 Strukturloses HTML 4.3.2 Generische Strukturierung mit <div> 4.3.3 Semantische Strukturierung mit den neuen Elementen in HTML5 4.3.4 Wem nützen diese semantischen HTML5-Elemente was?

4.4 HTML-Elemente für Textauszeichnungen

4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen 4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren 4.4.3 Darstellung von Computercode mit <code> und <pre> auszeichnen 4.4.4 Tastatureingabe mit <kdb> und Programmausgabe mit <samp> 4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen 4.4.6 Text als Variable mit <var> auszeichnen 4.4.7 Textrichtung mit <bdo> und <bdi> ändern 4.4.8 Text betonen bzw. hervorheben mit <em>, <strong>, <i> und <b> 4.4.9 Einen Text mit <mark> hervorheben 4.4.10 Text zwischen Anführungsstriche setzen mit <q> 4.4.11 Text unter- bzw. durchstreichen mit <u> und <s> 4.4.12 Änderungen von Text mit <ins> und <del> markieren 4.4.13 Einen Text hochstellen bzw. tiefstellen mit <sup> und <sub> 4.4.14 Datums- und Zeitangaben mit <time> kennzeichnen 4.4.15 Das Kleingedruckte mit <small> kennzeichnen 4.4.16 <ruby>, <rp> und <rt> für eine Anmerkung der Aussprache 4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen

4.5 Exkurs: Zeichencodierung

4.5.1 Von Bytes zur Zeichencodierung 4.5.2 Von ASCII zu ISO-8859 4.5.3 Über die Bytegrenze hinaus mit Unicode

4.6 Zeichenentitäten in HTML 4.7 Zusammenfassung

5 Tabellen und Hyperlinks

5.1 Daten in einer Tabelle strukturieren

5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th> 5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen 5.1.3 HTML-Attribute für die Tabellenelemente 5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren 5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col>

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen 5.2.2 Tabellen beschriften mit <caption> bzw. <figcaption> 5.2.3 Links zu anderen Webseiten einfügen 5.2.4 Links mit dem »target«-Attribut in einem neuen Fenster öffnen 5.2.5 E-Mail-Links mit »href=mailto:…« 5.2.6 Links zu anderen Inhaltstypen setzen 5.2.7 Downloadlinks mit dem »download«-Attribut hinzufügen 5.2.8 Links zu bestimmten Teilen einer Webseite setzen 5.2.9 Die HTML-Attribute für das HTML-Element <a>

5.3 Zusammenfassung

6 Grafiken und Multimedia

6.1 Bilder mit <img> einbinden

6.1.1 Bilder einem HTML-Dokument hinzufügen 6.1.2 Höhe und Breite für die Grafik angeben 6.1.3 Bilder beschriften mit <figure> und <figcaption> 6.1.4 Die HTML-Attribute für das HTML-Element <img>

6.2 Verweissensitive Grafiken aka Image-Maps erstellen 6.3 Das passende Bild mit <picture> laden

6.3.1 HTML-Attribute von <source> 6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset« 6.3.3 Mehrere Bildquellen mit <img> und den HTML-Attributen »srcset« und »sizes«

6.4 Ein Icon für die Webseite hinzufügen (Favicon) 6.5 Vektorgrafiken in HTML-Dokumenten verwenden

6.5.1 SVG als Grafikreferenz hinzufügen mit <img> 6.5.2 SVG direkt in die Webseite einbetten mit <svg> 6.5.3 SVG-Tags für die Vektorgrafiken 6.5.4 Übersicht über die grafischen Elemente von SVG 6.5.5 Weitere Hinweise zur Verwendung von SVG 6.5.6 Mathematische Formeln mit MathML

6.6 Grafiken zeichnen mit <canvas> 6.7 Videos mit dem HTML-Element <video> abspielen

6.7.1 Die HTML-Attribute für das HTML-Element <video> 6.7.2 Dem Video Untertitel mit <track> hinzufügen 6.7.3 Videos über YouTube abspielen lassen

6.8 Audios mit dem HTML-Element <audio> abspielen

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

6.9 Andere aktive Inhalte einbinden

6.9.1 Das HTML-Element <embed> 6.9.2 Das HTML-Element <object> 6.9.3 Das HTML-Element <iframe>

6.10 Zusammenfassung

7 HTML-Formulare und interaktive Elemente

7.1 Einen Bereich für Formulare definieren 7.2 Die HTML-Eingabefelder für Formulare

7.2.1 Ein einzeiliges Texteingabefeld mit <input type="text"> 7.2.2 Ein Passworteingabefeld mit <input type="password"> 7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea> 7.2.4 Eine Auswahlliste bzw. Dropdown-Liste mit <select> 7.2.5 Eine Gruppe von Radiobuttons mit <input type="radio"> erstellen 7.2.6 Ein Textlabel mit <label> hinzufügen 7.2.7 Checkboxen mit <input type="checkbox"> verwenden 7.2.8 Felder für Datei-Upload mit <input type="file"> verwenden 7.2.9 Verschiedene Schaltflächen im Überblick 7.2.10 Ein verstecktes Eingabefeld mit <input type="hidden"> verwenden 7.2.11 Formularfelder außerhalb von <form>…</form> notieren (HTML5) 7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen URLs (HTML5)

7.3 Die neuen HTML5-Eingabefelder mit <input>

7.4 Die neuen HTML5-Attribute für Eingabefelder

7.4.1 Den Eingabefokus mit dem HTML-Attribut »autofocus« setzen 7.4.2 Autovervollständigung (de)aktivieren mit dem Attribut »autocomplete« 7.4.3 Eine Liste mit Vorschlägen mit dem HTML-Attribut »list« und <datalist> 7.4.4 Minimale und maximale Werte und die Schrittweite festlegen 7.4.5 Das Auswählen oder die Eingabe mehrerer Werte mit »multiple« 7.4.6 Reguläre Ausdrücke für Eingabefelder mit »pattern« 7.4.7 Ein Platzhalter für ein Eingabefeld mit »placeholder« 7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required« 7.4.9 Fehlermeldung von Eingabefeldern (steuern)

7.5 Weitere nützliche Helferlein für Eingabefelder

7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren 7.5.2 Bei Eingabefeldern mit dem Attribut »readonly« nur Lesen erlauben 7.5.3 Hilfreiche Tastenkürzel und Tabulator-Reihenfolge für Eingabefelder 7.5.4 Formularelemente gruppieren mit <fieldset> und <legend> 7.5.5 Fortschrittsanzeige mit <progress> 7.5.6 Werte visualisieren mit <meter>

7.6 Formulardaten mit PHP versenden

7.6.1 So kommen die Daten vom Webbrowser … 7.6.2 Die POST-Methode 7.6.3 Die GET-Methode 7.6.4 … zum Webserver mit einem PHP-Skript

7.7 Interaktive HTML-Elemente

7.7.1 Inhalte auf-/zuklappen mit <details> und <summary> 7.7.2 Eine Dialogbox mit <dialog> 7.7.3 Eine Menüleiste mit <menu> und <menuitem> erzeugen

7.8 Zusammenfassung

8 Einführung in Cascading Stylesheets (CSS)

8.1 Die Versionen von CSS

8.1.1 Die erste Version mit CSS Level 1 (CSS 1) 8.1.2 Die zweite Version mit CSS Level 2 (CSS 2) 8.1.3 Die neueste Version mit CSS Level 3 (CSS3)

8.2 Das grundlegende Anwendungsprinzip von CSS

8.2.1 Aufbau eines Selektors in CSS 8.2.2 Die Deklaration eines Selektors 8.2.3 Kommentare für CSS-Code verwenden 8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code

8.3 Einbindungsmöglichkeiten von CSS in HTML

8.3.1 Stilanweisungen direkt im HTML-Tag mit dem HTML-Attribut »style« 8.3.2 Stilanweisungen im Dokumentkopf mit dem HTML-Element <style> 8.3.3 Stilanweisungen aus einer externen CSS-Datei mit <link> einbinden 8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen CSS-Datei(en) 8.3.5 Alternative Stylesheets 8.3.6 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden 8.3.7 Medienspezifische Stylesheets für bestimmte Ausgabegeräte 8.3.8 Medienspezifische Stylesheets mit CSS3

8.4 Zusammenfassung

9 Die Selektoren von CSS

9.1 Die einfachen Selektoren von CSS

9.1.1 HTML-Elemente mit dem Typselektor ansprechen 9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen 9.1.3 Universalselektor – alle Elemente in einem Dokument ansprechen 9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen 9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert 9.1.6 Attributselektor für Attribute mit einem bestimmten Teilwert (CSS3) 9.1.7 CSS-Pseudoklassen, die Selektoren für bestimmte Eigenschaften 9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS 9.1.9 Sprach-Pseudoklasse »:lang()« und die Negations-Pseudoklasse »:not()« 9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente

9.2 Kombinatoren – die Selektoren verketten

9.2.1 Der Nachfahrenselektor (E1 E2) 9.2.2 Der Kindselektor (E1 > E2) 9.2.3 Der Nachbarselektor (E1 + E2) 9.2.4 Der Geschwisterselektor (E1 ~ E2)

9.3 Performance verschiedener Selektoren 9.4 Zusammenfassung

10 Die Vererbung und die Kaskade

10.1 Das Prinzip der Vererbung in CSS

10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften 10.1.2 Es wird nicht alles weitervererbt 10.1.3 Vererbung erzwingen mit »inherit« 10.1.4 Den Standardwert einer CSS-Eigenschaft wiederherstellen (»initial«)

10.2 Das Regelsystem der Kaskade verstehen

10.2.1 Die Herkunft eines Stylesheets 10.2.2 Die Priorität einer CSS-Eigenschaft mit »!important« erhöhen 10.2.3 Sortierung nach Wichtigkeit und Herkunft 10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität) 10.2.5 Zusammenfassung zum Regelsystem der Kaskade

10.3 Exkurs: Werte an CSS-Eigenschaften übergeben

10.3.1 Die verschiedenen Maßeinheiten in CSS 10.3.2 Zeichenketten und Schlüsselwörter als Wert für CSS-Eigenschaften 10.3.3 Die vielen Möglichkeiten, eine Farbe in CSS zu verwenden 10.3.4 CSS3-Wertetypen 10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben

10.4 Zusammenfassung

11 Das Box-Modell von CSS

11.1 Das klassische Box-Modell von CSS

11.1.1 Den Inhaltsbereich mit »width« und »height« vorgeben 11.1.2 Den Innenabstand mit »padding« angeben 11.1.3 Den Rahmen mit »border« erstellen 11.1.4 Den Außenabstand mit »margin« einrichten 11.1.5 Collapsing Margins (zusammenfallende vertikale Außenabstände) 11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln

11.2 Das neue alternative Box-Modell von CSS3

11.2.1 Das neue Box-Modell »box-sizing« verwenden 11.2.2 Ist das neue Box-Modell schon alltagstauglich? 11.2.3 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes)

11.3 Boxen gestalten

11.3.1 Einen Rahmen mit der Eigenschaft »border« hinzufügen und gestalten 11.3.2 Hintergrundfarbe mit »background-color« festlegen 11.3.3 Hintergrundgrafiken verwenden 11.3.4 Die Boxen durchsichtig gestalten (CSS3) 11.3.5 Einen Farbverlauf hinzufügen (CSS3) 11.3.6 Einen Schlagschatten mit der Eigenschaft »box-shadow« hinzufügen 11.3.7 Runde Ecken mit der CSS3-Eigenschaft »border-radius« hinzufügen

11.4 Zusammenfassung

12 CSS-Positionierung

12.1 Positionierung mit der CSS-Eigenschaft »position«

12.1.1 Die statische Positionierung (»position: static«) 12.1.2 Platzierung von Elementen mit »top«, »right«, »bottom« und »left« 12.1.3 Die relative Positionierung (»position: relative«) 12.1.4 Die absolute Positionierung (»position: absolute«) 12.1.5 Die fixe Positionierung (»position: fixed«)

12.2 Übereinanderstapeln regeln mit »z-index« 12.3 Schwebende Boxen für die Positionierung mit »float«

12.3.1 Elemente mit »float« nebeneinander anordnen 12.3.2 Umfließen der Elemente mit »clear« aufheben 12.3.3 Probleme beim Eltern-Element von gefloateten Elementen 12.3.4 Weitere essenzielle Informationen rund um »float«

12.4 Die neuen flexiblen Boxen von CSS3

12.4.1 Die Flexbox ausrichten 12.4.2 Flexibilität der Flexbox einstellen 12.4.3 Flexible Boxen mit fester Höhe 12.4.4 Die Reihenfolge der Boxen bestimmen

12.5 Zusammenfassung

13 Das Layout mit CSS gestalten

13.1 Exkurs: Was bedeutet feste und flexible Breite?

13.1.1 Ein Layout mit fester Breite 13.1.2 Ein Layout mit flexibler Breite

13.2 Ein zweispaltiges Layout erstellen

13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung 13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung 13.2.3 Den (Haupt)inhalt horizontal zentrieren 13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen 13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen 13.2.6 Zweispaltiges festes Layout mit »float« erstellen 13.2.7 Zweispaltiges Layout mit »display: table« erstellen

13.3 Ein dreispaltiges Layout erstellen

13.3.1 Dreispaltiges flexibles Layout mit »float« erstellen 13.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen 13.3.3 Ungleich lange Spalten einfärben 13.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen 13.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3)

13.4 Responsive Layouts mit Media Queries erstellen

13.4.1 Die Verwendung von Medientypen mit CSS 2 13.4.2 Mächtige Medienabfragen mit den Media Queries von CSS3 13.4.3 Einbinden und Anwenden von Media Queries 13.4.4 Der grundlegende Aufbau von einfachen Media Queries 13.4.5 Welche Medienmerkmale können abgefragt werden? 13.4.6 Anwendungsbeispiel 13.4.7 Die mobile Navigation anpassen 13.4.8 Bilder reaktionsfähig machen 13.4.9 Das passende Bild mit <picture> laden 13.4.10 Weitere Anpassungen

13.5 Das Layout mit einem Raster (Grid) erstellen

13.5.1 Das Grundprinzip von Rasterlayouts 13.5.2 Eigenes 960-Pixel-Rasterlayout auf 12 Spalten erstellen 13.5.3 Das erstellte Rasterlayout überprüfen 13.5.4 Layout erstellen einfach gemacht 13.5.5 Das Rasterlayout reaktionsfähig machen 13.5.6 Stabilisieren mit »border-box« 13.5.7 Ein flexibles Raster erstellen 13.5.8 Fertige Grid-Systeme 13.5.9 Fertiges Grid-System integrieren

13.6 Verhalten von HTML-Elementen mit »display« ändern 13.7 Zusammenfassung und »Da geht noch (viel) mehr …«

14 Stylen mit CSS

14.1 Textgestaltung mit CSS

14.1.1 Schriftarten mit »font-family« auswählen 14.1.2 Schriftarten mit Webfonts liefern – »@font-face« 14.1.3 Symbole mit Iconfonts verwenden 14.1.4 Schriftgröße mit »font-size« festlegen 14.1.5 Kursive und fette Schriften mit »font-style« und »font-weight« 14.1.6 Kapitälchen mit »font-variant« erstellen 14.1.7 Zeilenabstand mit »line-height« definieren 14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font« 14.1.9 Buchstaben- und Wortabstände mit »letter-spacing« und »word-spacing« festlegen 14.1.10 Die Textausrichtung mit »text-align« festlegen 14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen 14.1.12 Den Text mit »text-indent« einrücken 14.1.13 Unter- und Durchstreichen von Text mit »text-decoration« 14.1.14 Groß- und Kleinschreibung von Text mit »text-transform« 14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen (CSS3)

14.2 Listen mit CSS gestalten

14.2.1 Aufzählungspunkte mit »list-style-type« anpassen 14.2.2 Bilder als Aufzählungszeichen mit »list-style-image« verwenden 14.2.3 Aufzählungsliste mit »list-style-position« positionieren 14.2.4 Die Kurzschreibweise »list-style« für die Listengestaltung 14.2.5 Navigation und Menüs mit Listen erstellen

14.3 Schönere Tabellen mit CSS gestalten

14.3.1 Tabellen mit fester Breite erstellen 14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten 14.3.3 Kollabierende Rahmen für Tabellenzellen mit »border-collapse« 14.3.4 Abstand zwischen den Zellen mit »border-spacing« einstellen 14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells« 14.3.6 Tabellenbeschriftung mit »caption-side« positionieren

14.4 Bilder und Grafiken mit CSS gestalten

14.4.1 Bilder und Grafiken mit »width« und »height« anpassen 14.4.2 Grafiken mit der CSS-Eigenschaft »clip« beschneiden 14.4.3 Sprites mit CSS verwenden 14.4.4 Eine einfache Bildergalerie mit CSS gestalten

14.5 Elemente transformieren mit CSS3

14.5.1 HTML-Elemente skalieren mit »transform: scale()« 14.5.2 HTML-Elemente drehen mit »transform: rotate()« 14.5.3 HTML-Elemente neigen mit »transform: skew()« 14.5.4 HTML-Elemente verschieben mit »transform: translate()« 14.5.5 Verschiedene Transformationen kombinieren 14.5.6 Es geht auch mit anderen HTML-Elementen

14.6 Übergänge mit CSS3 erstellen 14.7 HTML-Formulare mit CSS stylen

14.7.1 Ein HTML-Formular ordentlich strukturieren 14.7.2 Ausrichten der Formularelemente mit CSS 14.7.3 Gestalten der Formularelemente mit CSS

14.8 Zusammenfassung

15 Testen und Organisieren

15.1 CSS und die Webbrowser

15.1.1 Acid-Webbrowser-Test 15.1.2 CSS3-Webbrowser-Test 15.1.3 CSS3 in der Praxis

15.2 Webseiten mit CSS in verschiedenen Größen betrachten 15.3 Zentrales Stylesheet einrichten 15.4 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset 15.5 Normalisierung – die Alternative zum CSS-Reset 15.6 Die neuen HTML5-Elemente mit CSS stylen 15.7 Conditional Comments für den alten IE

15.7.1 Webbrowser-Sniffer

15.8 Modernizr – Fähigkeiten des Webbrowsers testen 15.9 caniuse.com – kann ich das verwenden? 15.10 Entwickler-Tools des Webbrowsers 15.11 Zusammenfassung

16 Eine kurze Einführung in JavaScript

16.1 Was ist JavaScript? 16.2 Laufzeitumgebungen für JavaScript 16.3 JavaScript-Programme schreiben und ausführen

16.3.1 JavaScript-Umgebung und Web-Konsole verwenden 16.3.2 Das »console«-Objekt 16.3.3 Den JavaScript-Code mit Anmerkungen kommentieren

16.4 Die Verwendung von Variablen in JavaScript

16.4.1 Konstanten 16.4.2 Strikter Modus mit "use strict"

16.5 Übersicht über die JavaScript-Datentypen

16.5.1 Number-Datentyp (Zahlen) 16.5.2 String-Datentyp (Zeichenketten) 16.5.3 Boolean-Datentyp 16.5.4 Undefined- und Null-Datentyp 16.5.5 Objekte 16.5.6 Datentypen konvertieren

16.6 Bedingte Anweisungen in JavaScript

16.6.1 »true« oder »false«: boolescher Wahrheitswert 16.6.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden 16.6.3 Die »if«-Verzweigung verwenden 16.6.4 Logische Operatoren 16.6.5 Mehrfachverzweigung mit »switch«

16.7 Programmanweisungen mehrmals wiederholen mit Schleifen

16.7.1 Inkrement- und Dekrementoperator 16.7.2 Die kopfgesteuerte »for«-Schleife 16.7.3 Die kopfgesteuerte »while«-Schleife 16.7.4 Die fußgesteuerte »do-while«-Schleife 16.7.5 Den Anweisungsblock mit »break« beenden 16.7.6 Mit »continue« zum Schleifenanfang springen

16.8 Arrays

16.8.1 Zugriff auf die einzelnen Elemente in einem Array 16.8.2 Einem Array neue Elemente hinzufügen 16.8.3 Elemente durchlaufen mit der »for/in«- oder »for/of«-Schleife

16.9 Arithmetische Operatoren zum Rechnen in JavaScript 16.10 Eigene Funktionen in JavaScript erstellen

16.10.1 Die verschiedenen Möglichkeiten, eine Funktion in JavaScript zu definieren 16.10.2 Funktion aufrufen und Funktionsparameter 16.10.3 Rückgabewert einer Funktion 16.10.4 Der Gültigkeitsbereich von Variablen in einer Funktion 16.10.5 Arrow-Funktionen 16.10.6 Rest-Parameter – beliebige Anzahl von Funktionsparametern

16.11 Zusammenfassung

17 Objekte in JavaScript

17.1 Benutzerdefinierte Objekte in JavaScript

17.1.1 Was sind Objekte genau? 17.1.2 Die Objekt-Eigenschaften von JavaScript 17.1.3 Die Methoden von Objekten 17.1.4 Verschiedene Möglichkeiten, neue Objekte zu erzeugen 17.1.5 Das Schlüsselwort »this«

17.2 Vordefinierte Objekte von JavaScript

17.2.1 Das oberste Objekt »Object« 17.2.2 Objekte für die primitiven Datentypen Number, String und Boolean 17.2.3 Array-Objekt 17.2.4 Reguläre Ausdrücke (RegExp-Objekte) 17.2.5 »Function«-Objekt 17.2.6 »Date«-Objekt 17.2.7 »Math«-Objekt

17.3 Einbinden von JavaScript in HTML

17.3.1 »Hallo Web-Browser« – Ausgabe von JavaScripts 17.3.2 Das JavaScript im Kopfbereich <head> des HTML-Dokuments 17.3.3 Das JavaScript im Körper <body> des HTML-Dokuments 17.3.4 Ein externes JavaScript mit dem »script«-Element einbinden 17.3.5 Die Ausführung eines JavaScript-Codes 17.3.6 Das »noscript«-Element für JavaScript-Verweigerer

17.4 Browser-Objekte bzw. Host-Objekte der Laufzeitumgebung

17.4.1 Ganz oben ist das »window«-Objekt 17.4.2 Das »screen«-Objekt für die Angaben zum Bildschirm 17.4.3 Das »location«-Objekt für den Zugriff auf die URI 17.4.4 Das »history«-Objekt für den Browserverlauf 17.4.5 Das »navigator«-Objekt für verschiedene Informationen

17.5 Zusammenfassung

18 HTML DOM und DOM-Manipulation

18.1 Einführung in das DOM eines HTML-Dokuments 18.2 Das »document«-Objekt 18.3 Die Programmierschnittstelle von HTML DOM 18.4 Nach bestimmten HTML-Elementen suchen

18.4.1 Ein HTML-Element mit einem bestimmten »id«-Attribut suchen 18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen 18.4.3 HTML-Elemente mit einem bestimmten »class«-Attribut suchen 18.4.4 HTML-Elemente mit einem bestimmten »name«-Attribut suchen 18.4.5 »querySelector()« und »querySelectorAll()« verwenden 18.4.6 Weitere Objekt- und Eigenschaftensammlungen

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

18.5.1 Fallstricke bei der Anwendung von »document.write()« 18.5.2 Den Inhalt von HTML-Elementen mit »innerHTML« ändern 18.5.3 Den Wert eines HTML-Attributs ändern 18.5.4 Den Style (CSS) eines HTML-Elements ändern

18.6 Auf JavaScript-Events reagieren 18.7 Mit dem Event-Handler die Events behandeln

18.7.1 Event-Handler als HTML-Attribut im HTML-Element einrichten 18.7.2 Event-Handler als Eigenschaft eines Objekts einrichten 18.7.3 Einen Event-Handler mit »addEventListener()« einrichten

18.8 Gängige JavaScript-Events in der Übersicht

18.8.1 Die JavaScript-Events der Benutzeroberfläche (Window-Events) 18.8.2 JavaScript-Events, die in Verbindung mit der Maus auftreten können 18.8.3 JavaScript-Events für Geräte mit einem Touchscreen 18.8.4 JavaScript-Events, die in Verbindung mit der Tastatur auftreten 18.8.5 JavaScript-Events für HTML-Formulare 18.8.6 JavaScript-Events für die neuen HTML5-APIs

18.9 Weitere Informationen zu Events mit dem »event«-Objekt 18.10 Standardaktion von Events unterdrücken 18.11 Der Event-Fluss (Event-Propagation)

18.11.1 Mehr zur Bubbling-Phase 18.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen 18.11.3 Eingreifen in den Event-Fluss während der Capturing-Phase 18.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase

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

18.12.1 Neues HTML-Element und Inhalt erzeugen und hinzufügen 18.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern 18.12.3 Ein neues HTML-Element gezielter dem DOM-Baum hinzufügen 18.12.4 Vorhandenes HTML-Element vom DOM-Baum löschen 18.12.5 Ein HTML-Element im DOM-Baum durch ein anderes ersetzen 18.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen 18.12.7 Verschiedene Methoden, um die HTML-Attribute zu manipulieren

18.13 HTML-Formulare und JavaScript

18.13.1 Texteingabefelder mit JavaScript einlesen 18.13.2 Auswahllisten mit JavaScript einlesen 18.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen 18.13.4 Schaltflächen mit JavaScript abfangen 18.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern

18.14 Zusammenfassung

19 Einführung in die HTML5-JavaScript-APIs

19.1 Video- und Audio-Media-API

19.1.1 Ein Video mit JavaScript und der Media-API steuern 19.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern

19.2 Zeichnen mit der Canvas-2D-API

19.2.1 Auf einem <canvas>-Element zeichnen 19.2.2 Methoden, mit denen auf das <canvas>-Element gezeichnet wird 19.2.3 Bilder mit <canvas> kopieren und manipulieren 19.2.4 Eigene (Wrapper-)Funktionen für <canvas> erstellen 19.2.5 Den »CanvasRenderingContext2D« erweitern 19.2.6 Fertige <canvas>-Bibliotheken im Überblick 19.2.7 <canvas> gegen <svg> oder <canvas> oder <svg>? 19.2.8 Weitere Hinweise zu <canvas>

19.3 Den Standort ermitteln mit der Geolocation-API

19.3.1 Die Geolocation-API in einem HTML-Dokument verwenden 19.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln 19.3.3 Feintuning mit weiteren Optionen der Geolocation-API 19.3.4 Die Position des Benutzers dauerhaft überwachen 19.3.5 Die Position des Benutzers auf einer Karte anzeigen 19.3.6 Eine einfache Navigation vom aktuellen Standort erstellen

19.4 Ziehen und Fallenlassen mit der Drag & Drop-API

19.4.1 Ein HTML-Element mit »draggable« ziehbar machen 19.4.2 Events, die beim Drag & Drop auftreten können 19.4.3 Mit dem Ziehen von Elementen starten 19.4.4 Die Daten zum Ziehen behandeln 19.4.5 Den Platz zum Fallenlassen festlegen 19.4.6 Die fallen gelassenen Daten verarbeiten 19.4.7 Andere Events während des Drag & Drop-Vorgangs behandeln 19.4.8 Das komplette Beispiel in der Übersicht 19.4.9 Weitere Hinweise zur Drag & Drop-API

19.5 Offlinedaten zur Verfügung stellen

19.5.1 Application Cache – das Cache Manifest 19.5.2 Web Storage – Datenbank für Offlineanwendungen 19.5.3 Weitere Offlinetechnologien im Überblick 19.5.4 Die Internetverbindung des Benutzers prüfen

19.6 Web Workers – die Helfer im Hintergrund 19.7 Aktualisieren ohne Anfrage mit Server Sent Events 19.8 Weitere interessante APIs im Schnelldurchlauf

19.8.1 Kommunikation in Echtzeit mit den WebSockets 19.8.2 Sprach- und Videotelefonie mit WebRTC 19.8.3 3D-Grafiken und Spiele mit WebGL 19.8.4 Den kompletten Bildschirm mit der Fullscreen API verwenden 19.8.5 Der Umgang mit lokalen Dateien mit der File API

19.9 Zusammenfassung

20 Eine Einführung in Ajax und jQuery

20.1 Eine Einführung in die Ajax-Programmierung

20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung 20.1.2 Das »XMLHttpRequest«-Objekt erzeugen 20.1.3 Eine Anfrage an den Server stellen 20.1.4 Daten mitsenden 20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln 20.1.6 Die Antwort vom Server weiterverarbeiten 20.1.7 Das Ajax-Beispiel bei der Ausführung 20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM 20.1.9 Das JSON-Datenformat mit Ajax

20.2 Einführung in die JavaScript-Bibliothek jQuery

20.2.1 jQuery in das HTML-Dokument einbinden 20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery 20.2.3 Die komfortablen jQuery-Selektoren 20.2.4 Die jQuery-Events 20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen 20.2.6 HTML-Elemente mit jQuery hinzufügen und löschen 20.2.7 CSS mit jQuery manipulieren 20.2.8 Verschiedene jQuery-Effekte und -Animationen 20.2.9 jQuery und Ajax zusammen verwenden 20.2.10 Weitere jQuery-Plug-ins verwenden 20.2.11 Letzte Hinweise zu jQuery

20.3 Zusammenfassung

21 Fertige CSS-Frameworks

21.1 Übersicht über beliebte CSS-Frameworks 21.2 Das Bootstrap-Framework

21.2.1 Twitter Bootstrap herunterladen und integrieren 21.2.2 Das Layout mit dem Bootstrap-Framework erstellen 21.2.3 Die Komponenten des Bootstrap-Frameworks verwenden 21.2.4 JavaScript-Erweiterungen von Bootstrap einbauen 21.2.5 Bootstrap an die eigenen Bedürfnisse anpassen

21.3 YAML 4 – das CSS-Framework

21.3.1 Das nackte HTML-Grundgerüst 21.3.2 YAML dem Projekt hinzufügen 21.3.3 Layoutmodul wählen 21.3.4 Aufteilen des Inhalts mit Gridmodulen 21.3.5 Elemente mit YAML untereinanderstellen 21.3.6 Testen Sie YAML

21.4 Exkurs zu CSS-Präprozessoren

21.4.1 Die Stylesheet-Sprache Less 21.4.2 Die Stylesheet-Sprache Sass

21.5 Zusammenfassung

A HTML-Referenz

A.1 Globale HTML-Attribute A.2 HTML-Basic-Elemente

A.2.1 <!DOCTYPE> A.2.2 HTML-Attribut für <html>

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

A.3.1 HTML-Attribut für <details> A.3.2 HTML-Attribute für <style>

A.4 HTML-Elemente für Textauszeichnungen

A.4.1 HTML-Attribut für <bdo> A.4.2 HTML-Attribut für <blockquote> und <q> A.4.3 HTML-Attribute für <del> und <ins> A.4.4 HTML-Attribut für <time>

A.5 Formular- und Eingabeelemente

A.5.1 HTML-Attribute für <form> A.5.2 HTML-Attribute für <input> A.5.3 Typen von <input>-Elementen für das HTML-Attribut »type« A.5.4 HTML-Attribute für <textarea> A.5.5 HTML-Attribute für <button> A.5.6 HTML-Attribute für <select> A.5.7 HTML-Attribute für <meter> A.5.8 HTML-Attribute für <optgroup> A.5.9 HTML-Attribute für <option> A.5.10 HTML-Attribute für <label> A.5.11 HTML-Attribute für <fieldset> A.5.12 HTML-Attribute für <keygen> A.5.13 HTML-Attribute für <output> A.5.14 HTML-Attribute für <progress>

A.6 Frames

A.6.1 HTML-Attribute für <iframe>

A.7 HTML-Elemente Bilder und Grafiken

A.7.1 HTML-Attribute für <area> A.7.2 HTML-Attribute für <canvas> A.7.3 HTML-Attribute für <img> A.7.4 HTML-Attribut für <map> A.7.5 HTML-Attribut für <source> in Verbindung mit <picture>

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

A.8.1 HTML-Attribute für <audio> A.8.2 HTML-Attribute für <source> A.8.3 HTML-Attribute für <track> A.8.4 HTML-Attribute für <video>

A.9 HTML-Elemente für Links

A.9.1 HTML-Attribute für <a> A.9.2 HTML-Attribute für <link>

A.10 HTML-Elemente für Listen

A.10.1 HTML-Attribute für <ol> A.10.2 HTML-Attribut für <li> A.10.3 HTML-Attribute für <menu> A.10.4 HTML-Attribute für <menuitem>

A.11 HTML-Elemente für Tabellen

A.11.1 HTML-Attribut für <table> A.11.2 HTML-Attribut für <col> und <colgroup> A.11.3 HTML-Attribute für <td> A.11.4 HTML-Attribute für <th>

A.12 HTML-Elemente für Metainformationen

A.12.1 HTML-Attribute für <meta> A.12.2 HTML-Attribute für <base>

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

A.13.1 HTML-Attribute für <script> A.13.2 HTML-Attribute für <embed> A.13.3 HTML-Attribute für <object> A.13.4 HTML-Attribute für <param>

A.14 Veraltete HTML-Elemente A.15 Veraltete HTML-Attribute A.16 HTML-Elemente von Version HTML 1.0 bis HTML5 A.17 Globale Event-Attribute für HTML-Elemente

A.17.1 Event-Attribute nur für <body> A.17.2 Event-Attribute für HTML-Form-Elemente A.17.3 Event-Attribute für Tastatur-Aktionen A.17.4 Event-Attribute für Maus-Aktionen A.17.5 Event-Attribute für Aktionen mit der Zwischenablage A.17.6 Event-Attribute für Videos, Bilder und Audios

A.18 Unterschiede zu HTML5 und XHTML5

A.18.1 XHTML-Dokumente benötigen einen anderen MIME-Typ A.18.2 Zeichencodierung mit einer XML-Deklaration festlegen A.18.3 Dokumenttyp-Deklaration in XHTML5 A.18.4 Den Namenraum für XHTML im <html>-Element angeben A.18.5 Syntaxregeln von XHTML im Vergleich zu HTML A.18.6 Skript- und Style-Bereiche in einem CDATA-Abschnitt einschließen

A.19 MIME-Typen (Internet Media Type)

A.19.1 Internet Media Types (MIME-Typen) für Audioformate A.19.2 Internet Media Types (MIME-Typen) für Videoformate A.19.3 Internet Media Types (MIME-Typen) für Bildformate A.19.4 Internet Media Types (MIME-Typen) für Textformate A.19.5 Internet Media Types (MIME-Typen) für Nachrichtenformate A.19.6 Internet Media Types (MIME-Typen) für Multipart-Formate A.19.7 Internet Media Types (MIME-Typen) für Application-Formate

A.20 HTML-Zeichenreferenz gängiger benannter Zeichen

A.20.1 HTML-typische Zeichen A.20.2 Gängige Währungssymbole A.20.3 Gängige Pfeilsymbole A.20.4 Mathematische Symbole und Operatoren A.20.5 Griechisches Alphabet A.20.6 Zeichen aus Latin Extended A und B A.20.7 Gängige Sonderzeichen für Interpunktion A.20.8 Sonstige Sonderzeichen

A.21 Sprach- und Ländercodes

B CSS-Referenz

B.1 CSS-Eigenschaften

B.2 CSS-Selektoren

B.2.1 Kombinatoren zum Verketten von CSS-Selektoren B.2.2 CSS-Pseudoklassen B.2.3 CSS-Pseudoelemente

B.3 CSS/@-Regeln B.4 Gängige Farbnamen

B.4.1 Die VGA-Palette B.4.2 Namen von roten Farben B.4.3 Namen von pink Farben B.4.4 Namen von orange Farben B.4.5 Namen von gelben Farben B.4.6 Namen von violetten Farben B.4.7 Namen von grünen Farben B.4.8 Cyan-Farbnamen B.4.9 Namen von blauen Farben B.4.10 Namen von braunen Farben B.4.11 Namen von grauen Farben und Schwarz B.4.12 Namen von hellen Farben und Weiß

C JavaScript- und Browser-Objekte

C.1 JavaScript-Objekte

C.1.1 »String« C.1.2 »Number« C.1.3 »Math« C.1.4 »Date« C.1.5 »Array« C.1.6 »Boolean« C.1.7 »RegExp« C.1.8 Globale JavaScript-Funktionen

C.2 Browser-Objekte

C.2.1 »navigator« C.2.2 »screen« C.2.3 »window« C.2.4 »history« C.2.5 »location«

D HTML-/WYSIWYG-/CSS-Editoren

D.1 HTML-Editoren D.2 WYSIWYG-Editoren D.3 Webbrowser-basierende HTML-/WYSIWYG-Editoren D.4 CSS-Editoren

Stichwortverzeichnis Rechtliche Hinweise Über den Autor

← Prev
Back
Next →

← Prev
Back
Next →