Inhaltsverzeichnis

1      Intro

1.1        Zum vorliegenden Buch

1.1.1     Zielgruppen und Ziele

1.1.2     Aufbau und Vorgehensweise

1.1.3     Verwendete Symbole

1.2        Website-Erstellung heute

1.2.1     Website-Typologie

1.3        Web-Technologien

1.3.1     HTML / XHTML

1.3.2     CSS

1.3.3     Clientseitiges Scripting

1.3.4     Serverseitiges Scripting und Datenbankanbindung

1.3.5     Flash

1.3.6     XML

1.4        Software zum Erstellen von Websites

1.4.1     Code-Editoren

1.4.2     Web-Browser

1.4.3     Desktop-Tools

1.4.4     Content-Management-Systeme

1.5        Backgrounds

1.5.1     Die Arbeit des W3-Konsortiums

1.5.2     Quellen, Dokumentation und Hilfe im Web

2      HTML-Dokumente

2.1        HTML editieren

2.1.1     Grundsätzliche Grammatik von HTML

2.1.2     Whitespace und interpretierte Bereiche in HTML

2.1.3     Kommentare in HTML

2.1.4     Dateikonventionen

2.1.5     Referenzierung

2.2        Zeichenkodierung in HTML

2.2.1     Nummerische und benannte Entities

2.3        Dokument-Grundgerüst

2.3.1     HTML-Dokumenttypen

2.3.2     XHTML-Dokumenttypen

2.4        Backgrounds

2.4.1     Computer und Zeichenkodierung

2.4.2     Quirks-, Standards- und Kompatibilitätsmodus

3      Dokument-Kopfdaten

3.1        Elemente für Kopfdaten

3.1.1     Titel eines HTML-Dokuments

3.1.2     Meta-Angaben

3.1.3     Logische Verlinkung

3.1.4     Style- und Script-Einbindung

3.1.5     Basis-URLs

3.2        Backgrounds

3.2.1     RDF (Resource Description Framework)

3.2.2     Das Dublin-Core-Metadaten-Set

3.2.3     RDF, Dublin-Core und HTML

4      Textstrukturierung

4.1        Webseiten-Bereiche (Sectioning)

4.1.1     Dokumentkörper

4.1.2     Abschnitte

4.1.3     Header und Footer

4.1.4     Navigation und Seitenleisten

4.1.5     Überschriften

4.1.6     Artikel

4.1.7     Autorenangaben

4.2        Gruppierende Elemente (Grouping)

4.2.1     Der Inhaltsbereich

4.2.2     Textabsätze

4.2.3     Zeilenumbrüche

4.2.4     Geordnete und ungeordnete Listen

4.2.5     Beschreibungslisten

4.2.6     Blockzitate

4.2.7     Abbildungen

4.2.8     Präformatierte Bereiche (mit Leerraum)

4.2.9     Trennlinien

4.2.10   Allgemeine Bereiche

4.3        Textauszeichnungen (Textlevel-Semantics)

4.3.1     Elemente für die Textauszeichnung

4.4        Elemente für Änderungsmarkierungen

4.5        Mathematische Formeln

4.6        Backgrounds

4.6.1     Content-Modelle

4.6.2     Arbeiten mit unbekannten Elementen

5      Tabellen

5.1        Aufbau von Tabellen

5.1.1     Einfache Tabelle

5.1.2     Tabelle mit Bereichen für Kopf, Körper und Fuß

5.1.3     Spalten und Spaltengruppen

5.1.4     Tabellenbeschriftung

5.1.5     Tabellenzellen verbinden

5.2        Zusätzliche Auszeichnungen für Tabellen

5.2.1     Zusammenfassung einer Tabelle

5.2.2     Expliziter Kopfzellenbezug

5.3        Backgrounds

5.3.1     Tabellenlayouts

6      Hyperlinks

6.1        Aufbau von Hyperlinks

6.1.1     Links zu beliebigen Zielen

6.1.2     Download-Verweise

6.1.3     Links zu beliebigen Ressourcen

6.1.4     E-Mail-Links

6.1.5     Links und Anker

6.2        Zusatzinformationen in Hyperlinks

6.2.1     Angaben zum Linkziel

6.2.2     Typisierte Links

6.2.3     Links mit Ping-Funktion

6.3        Backgrounds

6.3.1     Hyperlinks und Navigation

6.3.2     Rechtliche Aspekte von Hyperlinks

7      Grafik und Multimedia

7.1        Pixelgrafik

7.1.1     Pixelgrafik-Referenzen

7.1.2     Image-Maps (verweissensitive Grafiken)

7.2        Vektorgrafik

7.2.1     SVG-Grafikreferenzen

7.2.2     SVG-Grafiken (direkt eingebettet)

7.2.3     Basisfunktionen von SVG

7.2.4     Generierte Vektorgrafik mit dem canvas-Element

7.2.5     Funktions-Set für Canvas-2D-Rendering-Context

7.3        Audio- und Video-Ressourcen

7.3.1     Eingebettete Audio-Ressourcen

7.3.2     Eingebettete Video-Ressourcen

7.3.3     Zusätzliche Spuren (Tracks)

7.4        Aktive Inhalte (Flash, Java und andere)

7.4.1     Aktive Inhalte mit dem embed-Element

7.4.2     Aktive Inhalte mit dem object-Element

7.5        Eingebettete Frames

7.5.1     Script-Zugriffe auf Ressourcen von fremden Domains

7.6        Backgrounds

7.6.1     Pixelgrafik-Formate

7.6.2     Audio- und Video-Codecs

8      Formulare und Interaktion

8.1        Aufbau von Formularen

8.1.1     Formularbereiche und Formularversand

8.1.2     Strukturierung von Formularen

8.2        Formular-Feldtypen

8.2.1     Einzeilige Eingabefelder

8.2.2     Mehrzeilige Eingabefelder

8.2.3     Auswahllisten

8.2.4     Eingabefelder mit Datenlisten (Comboboxen)

8.2.5     Radiobuttons und Checkboxen

8.2.6     Felder für Datei-Uploads

8.2.7     Versteckte Formularfelder

8.2.8     Schaltflächen (Buttons)

8.2.9     Schlüsselgenerierung für sichere Datenübertragung

8.3        Eingabekontrolle und Eingabehilfe

8.3.1     Feldtypen für kontrollierte Eingaben

8.3.2     Zusätzliche Angaben für die Feldinterpretation

8.3.3     Deaktivieren und Nurlesen von Formularfeldern

8.3.4     Eingabehilfen bei Formularfeldern

8.3.5     Verwendete Schreibrichtung mitsenden

8.4        Formularkontrolle

8.4.1     Felder außerhalb von Formularen

8.4.2     Formulare mit mehreren Submit-Buttons

8.5        Informationskontrolle

8.5.1     Ausgabefelder für Kalkulationen

8.5.2     Fortschrittsanzeige

8.5.3     Metrische Werte

8.6        Interaktive Elemente

8.6.1     Menüs

8.6.2     Aufklappbare Details

8.6.3     Dialogelemente

8.7        Formularverarbeitung

8.7.1     Einfacher Form-Mailer in PHP

8.7.2     Formulare in Datenbank speichern (PHP/MySQL)

8.8        Backgrounds: Formulare

8.8.1     Richtext-Eingaben

9      Mikrodaten und globale Attribute

9.1        Mikrodaten

9.1.1     Aufbau von Mikrodaten

9.1.2     Referenzen zwischen Mikrodaten

9.1.3     Typisierte Mikrodaten

9.2        Anwendung von Mikrodaten

9.2.1     vCard-Anwendung (Kontaktdaten)

9.2.2     vEvent-Anwendung (Terminkalenderdaten)

9.2.3     Works-Anwendung (Lizensierung von Werken)

9.3        Globale Attribute

9.3.1     Übersicht der globalen Attribute

9.3.2     Beispiele für globale Attribute

9.4        Backgrounds

9.4.1     Mikrodaten und Mikroformate

9.4.2     Mikrodaten und RDFa

9.4.3     Unbekannte Attribute

10    HTML und XHTML

10.1      Unterschiede zwischen HTML und XHTML

10.1.1   Unterschied: MIME-Typen

10.1.2   Unterschied: Dateinamen

10.1.3   Unterschied: Die XML-Deklaration und die Zeichenkodierung

10.1.4   Unterschied: Dokumenttyp-Deklaration

10.1.5   Unterschied: HTML-Wurzelelement mit Namensraumangabe

10.1.6   Unterschied: Kleinschreibung

10.1.7   Unterschied: Leere Elemente

10.1.8   Unterschied: Elemente mit optionalem Abschluss-Tag

10.1.9   Unterschied: Attributwerte in Anführungszeichen

10.1.10 Unterschied: Alleinstehende (leere) Attribute

10.1.11 Unterschied: Leerraum in Attribut-Wertzuweisungen

10.1.12 Unterschied: Verweise zu Ankern

10.1.13 Unterschied: Das lang-Attribut

10.1.14 Unterschied: Inhalt von Script- und Style-Bereichen

10.1.15 Unterschied: Ausnahmen von Verschachtelungsregeln

10.2      Backgrounds: XML-Grundlagen

10.2.1   Semantische Auszeichnung beliebiger Daten

10.2.2   XML, DTDs und Validierung

10.2.3   Baumstruktur und Knoten eines XML-Dokuments

10.2.4   XSL oder CSS – Formatierung für XML-Elemente

10.2.5   Transformation mit XSLT

10.2.6   XML-Namensräume

11    Veraltetes HTML

11.1      Obsoletes HTML

11.1.1   Obsolete Elemente

11.1.2   Obsolete Attribute

11.2      Proprietäres HTML

11.2.1   Proprietäre Elemente

11.2.2   Proprietäre Attribute

12    CSS (Cascading Stylesheets)

12.1      CSS in HTML einbinden

12.1.1   Style-Definitionen in separaten CSS-Dateien

12.1.2   Kodierung von externen Stylesheets mittels @charset

12.1.3   Style-Bereiche im HTML-Dokumentkopf

12.1.4   Inline-Styles in HTML-Elementen

12.2      Grundsätzliche Grammatik von CSS

12.2.1   CSS-Regeln (Rules)

12.2.2   @import: CSS-Dateien einbinden

12.2.3   @charset: Zeichenkodierung für externe Stylesheets

12.2.4   @media: Formate für bestimmte Ausgabegeräte (Media Queries)

12.2.5   @page: Formate für Print-Layouts

12.2.6   @font-face: Formatbereich für Web-Schriftarten

12.2.7   Selektoren

12.2.8   Formate für HTML-Elemente

12.2.9   Formate für verschachtelte HTML-Elemente

12.2.10 Formate für Elemente mit bestimmten Attributen

12.2.11 Formate für Elemente mit class-Attribut

12.2.12 Formate für Elemente mit id-Attribut

12.2.13 Formate für »Pseudo-Elemente und Pseudo-Klassen«

12.2.14 Formate

12.2.15 Kaskadierung und Vererbung

12.2.16 Spezifität – Gewichtung der Selektoren

12.3      Das Boxmodell von CSS

12.3.1   Das Verhalten von Block-Elementen

12.3.2   Das Verhalten von Inline-Elementen

12.3.3   Container für Elemente

12.4      Wertangaben in CSS

12.4.1   Maßeinheiten für nummerische Werte

12.4.2   Farbwerte und Farbnamen

12.4.3   Farbnamen

12.4.4   Netscape-Farbpalette

12.5      CSS3

12.5.1   CSS3-Profile

13    CSS-Eigenschaften

13.1      Schriftformatierung

13.1.1   Schriftart

13.1.2   Schriftvariante, Schriftgewicht, Schriftstil und Schriftgröße

13.1.3   Die zusammenfassende font-Eigenschaft

13.1.4   Zeichenabstand, Wortabstand und Schriftlaufweite

13.1.5   Schriftfarbe und Schrift mit Schatteneffekt

13.1.6   Schriftattribute und automatische Text-Transformationen

13.2      Schriftformatierung mit Schriftartendatei

13.3      Ausrichtung und Absatzkontrolle

13.3.1   Horizontale und vertikale Ausrichtung

13.3.2   Texteinrückung

13.3.3   Zeilenhöhe

13.3.4   Textumbruchkontrolle

13.4      Außenrand und Abstand

13.5      Innenabstand

13.6      Rahmen, Ecken und Konturen

13.6.1   Schmuckrahmen (border)

13.6.2   Abgerundete Ecken (border-radius)

13.6.3   Grafische Rahmen (border-image)

13.6.4   Funktionsrahmen (outline)

13.7      Hintergrundfarben und Hintergrundbilder

13.7.1   Hintergrundfarben

13.7.2   Hintergrundgrafiken

13.7.3   Zusätzliche Eigenschaften für die Hintergrundgestaltung in CSS3

13.8      Listenformatierung

13.8.1   Gestaltungsmöglichkeiten für ungeordnete Listen

13.8.2   Gestaltungsmöglichkeiten für geordnete Listen

13.8.3   Abstand zu Aufzählungszeichen/Nummerierung

13.9      Tabellenformatierung

13.9.1   Typische CSS-Formatierungen für Tabellen

13.9.2   Rahmenoptionen

13.9.3   Anzeige leerer Tabellenzellen

13.9.4   Ausrichtung der Tabellenbeschriftung

13.10    Breite und Höhe von Elementen

13.11    Positionierte Elemente

13.12    Floatende Elemente

13.13    Anzeigesteuerung von Elementen

13.13.1 Sichtbarkeit von Inhalten

13.13.2 Content-Modelle von Elementen umdefinieren

13.14    Layer-Technik und Transparenz

13.14.1 Schichtposition von Elementen

13.14.2 Transparenz von Elementen

13.15    Pseudo-Klassen für Hyperlinks

13.16    Pseudoklassen und -elemente für Textabsätze

13.17    Automatische Inhalte und Nummerierung

13.17.1 Automatische Inhalte vor und nach einem Element

13.17.2 Automatische Anführungszeichen

13.17.3 Automatische Nummerierung

13.18    Cursor-Anzeige

13.19    Media-Queries für mobile Devices

13.19.1 Media-Types in CSS2

13.19.2 Media-Queries in CSS3

14    HTML und Scripting

14.1      Event-Handler

14.1.1   Event-Handler für Mausereignisse

14.1.2   Event-Handler für Tastaturereignisse

14.1.3   Interaktive Elementereignisse

14.1.4   Event-Handler für Fenster- und Dokumentereignisse

14.2      Script- und Noscript-Bereiche

14.2.1   Externe Scripts einbinden

14.3      ECMA/JavaScript-Grundlagen

14.3.1   Sprachbestandteile von ECMAScript/JavaScript

14.3.2   DOM-Scripting – Zugriff auf Webseiteninhalte

14.3.3   Markupstruktur und Knoten

14.3.4   Auf Elemente des HTML-Dokuments zugreifen

14.3.5   HTML-Elementobjekte und HTML-Attribute als Objekteigenschaften

14.3.6   CSS-Eigenschaften von HTML-Elementen als Objekteigenschaften

14.3.7   Elemente, Attribute und Text im DOM erzeugen

14.4      JavaScript: Backgrounds

14.4.1   JavaScript-Objekte

14.4.2   Das document-Objekt

14.4.3   Die verschiedenen DOM-Modelle

14.5      JavaScript: Unobtrusive Programming

14.5.1   Elemente mit speziellen Eigenschaften ermitteln

14.5.2   Event-Handler im Skript anmelden

15    Scripting mit jQuery

15.1      Der Siegeszug eines Frameworks

15.1.1   JavaScript-Frameworks

15.1.2   jQuery-Plug-ins

15.2      jQuery einbinden

15.2.1   jQuery downloaden und lokal einbinden

15.2.2   jQuery über Hochverfügbarkeitsserver einbinden

15.3      Grundsätzliche Funktionsweise von jQuery

15.3.1   Das jQuery- bzw. $-Objekt

15.3.2   $(document) und $(document).ready()

15.3.3   Verkettung von Objekten und Objektfunktionen

15.3.4   CSS-kompatible Selektoren

15.3.5   Aus Literalen und Variablen zusammengesetzte Selektoren

15.3.6   Traversion und this-Selektor

15.4      DOM-Manipulationen

15.4.1   Elementinhalte ermitteln und ändern

15.4.2   Attribute ermitteln, ändern und entfernen

15.4.3   Optik von Elementen auf CSS-Ebene ermitteln und ändern

15.4.4   Elemente ein- und ausblenden

15.4.5   Elemente hinein- und herausblenden

15.4.6   HTML-Inhalte einfügen und entfernen

15.4.7   DOM-Strukturen errichten

15.5      Event-Handling

15.5.1   Handler-Funktionen

15.5.2   Zweck der Funktionen on() und bind()

15.5.3   Event-Informationen

15.6      Formularmanagement

15.6.1   Feldwerte lesen und ändern

15.6.2   Ajax-unterstützende Funktionen

15.7      Ajax mit jQuery

15.7.1   GET-Requests

15.7.2   POST-Requests

15.8      Plug-ins

A    HTML-Elementreferenz

A.1       Liste der HTML5-Elemente

B    HTML-Attributreferenz

B.1       Liste der HTML5-Attribute

C    HTML-Eventreferenz

C.1       Allgemeines zu Eventhandlern und Events

C.2       Auflistung der HTML5-Events und -Eventhandler

D    CSS-Referenz

E    HTML-Zeichenreferenz

E.1       Benannte Zeichen aus dem ASCII-Zeichensatz

E.2       Benannte Zeichen aus Latin-1

E.3       Benannte Zeichen aus Latin Extended A/B

E.3.1    Latin Extended A

E.3.2    Latin Extended B

E.4       Benannte Zeichen für diakritische Zeichen

E.5       Benannte Zeichen für griechische Buchstaben

E.6       Benannte Zeichen für kyrillische Buchstaben

E.7       Benannte Zeichen für Interpunktion

E.8       Benannte Zeichen für Zahlen

E.9       Benannte Zeichen für Pfeilsymbole

E.10     Benannte Zeichen für mathematische Symbole

E.11     Benannte Zeichen für technische Symbole

E.12     ASCII-Zeichensatz

F    MIME-Typenreferenz

F.1       Übersicht der MIME-Typen

G    Referenz: Sprachenkürzel

Stichwortverzeichnis

1        Intro

•     Was Sie von diesem Buch erwarten können

•     Wie HTML mit dem Gesamtkomplex »Erstellung von Websites« zusammenhängt

1.1        Zum vorliegenden Buch

Das vorliegende Buch vermittelt Ihnen HTML, die Basissprache zum Erstellen von Websites. Der Schwerpunkt liegt dabei auf Anwendern, die bereits früher einmal HTML gelernt haben, aber die neuen Möglichkeiten von HTML5 noch nicht kennen. Selbstverständlich ist das Buch aber auch für Neueinsteiger geeignet.

Dieses Buch behandelt in erster Linie HTML. Es ist daher nicht geeignet, Webdesign zu lernen, denn zum Erstellen von Webseiten-Layouts benötigen Sie heute Cascading Style Sheets (CSS). HTML hat ausschließlich die Aufgabe, Inhalte von Webseiten zu strukturieren. In manchen Beispielen des Buches kommt etwas CSS-Code vor. Dieser ist jedoch nicht der zentrale Gegenstand der Erläuterungen.

Auch Web-Programmiersprachen wie JavaScript/ECMAScript, PHP oder Java werden in diesem Buch nicht behandelt. Nur am Rande kommen einige Programmiersprachenbeispiele vor, da einige HTML5-Elemente nur im Zusammenhang mit Programmierung erklärbar sind.

1.1.1       Zielgruppen und Ziele

Das HTML-Handbuch richtet sich an folgende Zielgruppen:

•     Anwender, die eine eigene Homepage oder einen eigenen Webauftritt von Grund auf und »in Handarbeit« erstellen wollen.

•     Webautoren, die ein zeitgemäßes HTML-Arbeitsbuch für ihre alltägliche Arbeit benötigen.

•     Entwickler und Programmierer, die Anwendungen im Web-Umfeld erstellen und HTML für dynamische Browser-Ausgaben oder zur Template-Entwicklung benötigen.

•     Blogger, Verkäufer und andere, die HTML auf webbasierter Ebene benötigen, um Inhalte zu strukturieren.

1.1.2       Aufbau und Vorgehensweise

Das vorliegende Buch ist keine reine Faktenreferenz, sondern legt viel Wert darauf, auch Hintergründe und Zusammenhänge zwischen den beschriebenen Inhalten zu vermitteln. Das Buch folgt jedoch bewusst nicht der aus der amerikanischen Medienwelt stammenden Tutorial-Philosophie. Stattdessen kommt es eher solchen Lesern entgegen, die eine am Inhalt orientierte Systematik bevorzugen.

Das Buch lässt sich durchaus von vorne bis hinten durchlesen. Doch es ermuntert seine Leser an vielen Stellen auch, Teile erst einmal zu überspringen und an anderen Stellen (weiter vorne oder weiter hinten) weiterzulesen. Denn viele Leser möchten die Reihenfolge, in der sie sich Wissen aneignen, nicht vorgeschrieben bekommen. Eigentlich ist der Autor dieses Buches ja auch ein bekannter Verfechter von Hypertext. Und Hypertext bedeutet: Der Anwender bahnt sich seinen Weg selbst, wobei es durchaus erlaubt ist, ihm vorgegebene Wege anzubieten.

1.1.3       Verwendete Symbole

Mit den folgenden Symbolen werden Befehle, Elemente oder Attribute gekennzeichnet, welche ab der angeführten Version zur Verfügung stehen oder eingeführt wurden.

HTML

Version | 2.0 | 3.2 | 4.0 | 5
Symbol |  |  |  |

XHTML

Version | 1.0 | 1.1 | 5
Symbol |  |  |

CSS

Version | 1.0 | 2.0 | 2.1 | 3.0
Symbol |  |  |  |

Browser

Mit den folgenden Symbolen werden Befehle, Elemente oder Attribute gekennzeichnet, die von bestimmten Browsern unterstützt werden. Zusätzlich wird die Versionsnummer angeführt, ab welcher die Unterstützung vorhanden ist.

Es werden aber nur die Versionen dargestellt, die noch häufig bei den Benutzern anzutreffen sind.

MS Internet Explorer

Version | alle | 7.0 |
Symbol |  |  | usw. für weitere Versionen

Mozilla Firefox

Version | alle | 3.0 |
Symbol |  |  | usw. für weitere Versionen

Google Chrome

Version | alle | 8 |
Symbol |  |  | usw. für weitere Versionen

Apple Safari

Version | alle | 3.0 |
Symbol |  |  | usw. für weitere Versionen

Opera

Version | alle | 9.0 |
Symbol |  |  | usw. für weitere Versionen

Hinweise

Diese Symbole verwenden wir für spezielle Hinweise, welche für Sie wichtig sind.

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!

Lesen Sie weiter in der vollständigen Ausgabe!