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

Index

Liebe Leser! Inhaltsverzeichnis Vorwort

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

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 4.1.2 Die 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 umkehren 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 HTML ohne eine genauere Strukturierung 4.3.2 Generische Strukturierung mit <div> 4.3.3 Semantische Strukturierung mit den Elementen in HTML5 4.3.4 Wem nützen diese semantischen HTML5-Elemente?

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 <kbd> 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.1.6 Tabellen beschriften mit <caption> bzw. <figcaption>

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

5.2.1 Links zu anderen HTML-Dokumenten der eigenen Website einfügen 5.2.2 Links zu anderen Websites einfügen 5.2.3 Links mit dem »target«-Attribut in einem neuen Fenster öffnen 5.2.4 E-Mail-Links mit »href=mailto:...« 5.2.5 Links zu anderen Inhaltstypen setzen 5.2.6 Downloadlinks mit dem »download«-Attribut hinzufügen 5.2.7 Links zu bestimmten Teilen einer Webseite setzen 5.2.8 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 Website 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 Audiodateien 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 Dateiupload 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.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 Empfehlung: Trennen Sie HTML und CSS 8.3.6 Alternative Stylesheets 8.3.7 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden 8.3.8 Medienspezifische Stylesheets für bestimmte Ausgabegeräte 8.3.9 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 Weitere nützliche Pseudoklassen 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 Empfehlung: So verwenden Sie effizientes und einfaches CSS

9.3.1 So schreiben Sie performantes CSS 9.3.2 Empfehlung: Halten Sie den CSS-Code so einfach wie möglich

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.1.5 Vererben erzwingen oder Wert wiederherstellen (»unset«) 10.1.6 Vererben erzwingen oder Werte wiederherstellen für alle Eigenschaften

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.1.6 Die haftende Positionierung (»position: sticky«)

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 Responsive Layouts mit CSS erstellen

13.1 Theoretisches Grundlagenwissen zum responsiven Webdesign

13.1.1 Die Verwendung von Medientypen mit CSS 2 13.1.2 Die mächtigen Medienabfragen für Medieneigenschaften 13.1.3 Einbinden und Anwenden von Medienabfragen für Medieneigenschaften 13.1.4 Der grundlegende Aufbau einer Abfrage von Medieneigenschaften 13.1.5 Welche Medieneigenschaften können abgefragt werden? 13.1.6 Von enormer Bedeutung: der Viewport für mobile Geräte 13.1.7 Verwenden Sie »em« anstatt Pixel für einen Layoutumbruch in Media Queries 13.1.8 Layoutumbrüche (Breakpoints) 13.1.9 Keine Rechenspiele mehr dank »box-sizing: border-box;« 13.1.10 Und was passiert mit Webbrowsern, die Media Queries nicht verstehen?

13.2 Wir erstellen ein einfaches responsives Layout

13.2.1 Wir erstellen das Grundgerüst mit HTML 13.2.2 Allgemeine CSS-Eigenschaften setzen 13.2.3 Was nehme ich als Basisversion ohne Media Queries: Mobile First!? 13.2.4 Den Layoutumbruch (Breakpoint) setzen 13.2.5 Weitere Layoutumbrüche hinzufügen 13.2.6 Den Hauptinhalt anpassen

13.3 Noch mehr flexible Elemente

13.3.1 Verwenden Sie relative Schriftgrößen anstelle von Pixeln 13.3.2 Bilder reaktionsfähig machen 13.3.3 Flexible Bilder in maximal möglicher Breite 13.3.4 Bilder ganz ausblenden 13.3.5 Das passende Bild zur Bildschirmbreite laden – <picture> 13.3.6 Flächendeckende Bilder verwenden

13.4 Das neue Grid-Layout von CSS3

13.4.1 Ein Grid für den Inhalt erstellen 13.4.2 Elemente im Raster platzieren 13.4.3 Layoutänderung leichtgemacht 13.4.4 Abstände zwischen den Rasterzeilen 13.4.5 Browsersupport

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

13.5.1 »display: block«, »display: inline« und »display: inline-block« 13.5.2 HTML-Elemente als Tabelle mit »display: table« 13.5.3 Elemente verstecken mit »display:none« 13.5.4 Weitere Werte für »display«

13.6 Berechnungen mit CSS und der »calc()«-Funktion 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 14.1.16 Text mit »column-count« in mehrere Spalten aufteilen

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 »width« und »height« anpassen 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 Webbrowser-Tests – und: Was geht denn so alles?

15.1.1 HTML und CSS validieren 15.1.2 Womit sind die Besucher heute so unterwegs? 15.1.3 CSS3-Webbrowser-Test 15.1.4 HTML5-Webbrowser-Test 15.1.5 »caniuse.com« – kann ich das verwenden? 15.1.6 Cross-Browser-Tests – wie sieht das bei den anderen aus? 15.1.7 Testen auf echten Geräten

15.2 Websites in verschiedenen Größen betrachten 15.3 Zentrales Stylesheet einrichten 15.4 CSS-Reset oder -Normalisieren?

15.4.1 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset 15.4.2 Normalisierung – die Alternative zum CSS-Reset

15.5 Was tun, wenn der Webbrowser nicht kann?

15.5.1 Conditional Comments für den alten IE 15.5.2 Modernizr – Fähigkeiten des Webbrowsers testen 15.5.3 Funktionsabfrage mit der »@supports«-Regel

15.6 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 Webkonsole verwenden 16.3.2 Das »console«-Objekt für Kontroll- und Fehlerausgabe 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 Eigene 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 Webkonsole« – 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 Browserobjekte 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 Auf Elemente im DOM zugreifen

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 Den Inhalt von HTML-Elementen mit »innerHTML« ändern 18.5.2 Den Wert eines HTML-Attributs ändern 18.5.3 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, die HTML-Attribute zu manipulieren 18.12.8 Das <template>-HTML-Tag

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> bzw. <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.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-and-Drop-Vorgangs behandeln 19.4.8 Das komplette Beispiel in der Übersicht 19.4.9 Weitere Hinweise zur Drag & Drop-API

19.5 Web Storage – Datenbank für Offlineanwendungen

19.5.1 Weitere Offlinetechnologien im Überblick 19.5.2 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 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 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 für Webprojekte verwenden

22 Ein einfaches Beispielprojekt

22.1 Projekt planen

22.1.1 Kenne deine Zielgruppe 22.1.2 Den Inhalt planen

22.2 Grundgerüst mit Inhalt erstellen 22.3 Layout der Website erstellen

22.3.1 Das Layout planen 22.3.2 Grundlegende Angaben für CSS 22.3.3 Das grundlegende Layout erstellen 22.3.4 Klassen zum HTML-Dokument hinzufügen

22.4 Typografie – Auswahl der Schriften 22.5 Farben 22.6 Navigation und Interaktion 22.7 Grafiken, Bilder und Multimedia 22.8 Website testen und optimieren

A HTML-Referenz

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

A.2.1 <!DOCTYPE>

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 <output> A.5.13 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.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 Tastaturaktionen A.17.4 Event-Attribute für Mausaktionen A.17.5 Event-Attribute für Aktionen mit der Zwischenablage A.17.6 Event-Attribute für Videos, Bilder und Audios

A.18 MIME-Typen (Internet Media Type)

A.18.1 Internet Media Types für Audioformate A.18.2 Internet Media Types für Videoformate A.18.3 Internet Media Types für Bildformate A.18.4 Internet Media Types für Textformate A.18.5 Internet Media Types für Nachrichtenformate A.18.6 Internet Media Types für Multipart-Formate A.18.7 Internet Media Types für Application-Formate

A.19 HTML-Zeichenreferenz gängiger benannter Zeichen

A.19.1 HTML-typische Zeichen A.19.2 Gängige Währungssymbole A.19.3 Gängige Pfeilsymbole A.19.4 Mathematische Symbole und Operatoren A.19.5 Griechisches Alphabet A.19.6 Zeichen aus Latin Extended A und B A.19.7 Gängige Sonderzeichen für Interpunktion A.19.8 Sonstige Sonderzeichen

A.20 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 Rottönen B.4.3 Namen von Pinktönen B.4.4 Namen von Orangetönen B.4.5 Namen von Gelbtönen B.4.6 Namen von Violetttönen B.4.7 Namen von Grüntönen B.4.8 Cyantönen B.4.9 Namen von Blautönen B.4.10 Namen von Brauntönen B.4.11 Namen von Grautönen und Schwarz B.4.12 Namen von hellen Farben und Weiß

C JavaScript- und Browserobjekte

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 Browserobjekte

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

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

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

E.1.1 Ein Layout mit fester Breite E.1.2 Ein Layout mit flexibler Breite

E.2 Ein zweispaltiges Layout erstellen

E.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung E.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung E.2.3 Den (Haupt-)Inhalt horizontal zentrieren E.2.4 Zweispaltiges flexibles Layout mit »float« erstellen E.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen E.2.6 Zweispaltiges festes Layout mit »float« erstellen E.2.7 Zweispaltiges Layout mit »display: table« erstellen

E.3 Ein dreispaltiges Layout erstellen

E.3.1 Dreispaltiges flexibles Layout mit »float« erstellen E.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen E.3.3 Ungleich lange Spalten einfärben E.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen E.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3)

Stichwortverzeichnis Rechtliche Hinweise Über den Autor

← Prev
Back
Next →

← Prev
Back
Next →