HTML5 und CSS3 – Das umfassende Handbuch · Mit HTML5 wurden alle Attribute des einleitenden table -Elements, die zur Formatierung von Tabellen verwendet wurden, entfernt. Wie am

LeseprobeIn dieser Leseprobe erklärt Ihnen Jürgen Wolf, wie Sie Tabellen und Hyperlinks in Ihrer Website verwenden. Darüber hinaus erfahren Sie, wie Sie Layouts mit CSS gestalten und mit der Geolocation-API den Standort eines Benutzers ermitteln. Außerdem erhalten Sie das voll-ständige Inhalts- und Stichwortverzeichnis des Buches.

Jürgen Wolf

HTML5 und CSS3 – Das umfassende Handbuch1.264 Seiten, gebunden, 2. Auflage 2016 44,90 Euro, ISBN 978-3-8362-4158-8

www.rheinwerk-verlag.de/4129

»Tabellen und Hyperlinks« »Das Layout mit CSS gestalten« (Auszug)

Inhaltsverzeichnis

Index

Der Autor

Leseprobe weiterempfehlen

Wissen, wie’s geht.Wissen, wie’s geht.

https://www.rheinwerk-verlag.de/html5-und-css3_4129/?GPP=lpn

mailto:?body=Leseproben-Empfehlung:%20%C2%BBHTML5%20und%20CSS3%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB%20von%20Rheinwerk,%20http://gxmedia.galileo-press.de/leseproben/4129/leseprobe_rheinwerk_html5_und_css3_handbuch.pdf&subject=Leseprobe:%20%C2%BBHTML5%20und%20CSS3%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB

177

5

Kapitel 5

Tabellen und Hyperlinks

In diesem Kapitel lernen Sie weitere Elemente von HTML kennen. Genauer

gesagt, erfahren Sie hier, wie Sie Tabellen und Hyperlinks Ihrer Webseite

hinzufügen und verwenden können.

Weitere essenzielle HTML-Elemente, die bisher noch nicht beschrieben wurden, werden in

diesem Kapitel erläutert. Sie erfahren mehr zu folgenden Themen:

� Tabellen: Sie erfahren, wie Sie Tabellen zur Darstellung von Informationen oder Daten in

einem Raster verwenden können.

� Hyperlinks: Jeder, der das Internet kennt, kennt Hyperlinks, mit denen Sie sich von einer

Webseite zur anderen bewegen können. Hier erfahren Sie, wie Sie ein HTML-Dokument

mit anderen (HTML-)Dokumenten verlinken.

5.1 Daten in einer Tabelle strukturieren

Tabellen sind hilfreich, wenn Sie zusammenhängende Daten wie z. B. Börsenkurse, Finanz-

daten, Reisepläne, Zugfahrpläne, Busfahrpläne, Reiseberichte oder Sportergebnisse in einem

Raster aus Zeilen und Spalten darstellen wollen. HTML bietet hierbei gute Möglichkeiten an,

eine solche Tabelle zu strukturieren.

Formatierung mit CSS

Da HTML seit HTML5 nur noch für eine semantische und strukturelle logische Auszeichnung

verwendet wird, gilt dies auch für Tabellen in HTML. Tabellen in HTML bieten keinerlei For-

matierungsmöglichkeiten an. Alle Attribute zur Formatierung aus altem HTML, abgesehen

von einem Rahmen mit border, werden in HTML5 nicht mehr unterstützt. Daher gilt auch

hier: Tabellen werden mit CSS formatiert.

HTML-Element Bedeutung

<table> Tabelle

<tr> Tabellenzeile

Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente

4158-8.book Seite 177 Dienstag, 30. August 2016 1:58 13

5 Tabellen und Hyperlinks

178

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

Jede Tabelle in HTML wird zwischen den Elementen <table> und </table> erstellt (table,

deutsch: Tabelle). Die Inhalte der Tabelle werden Zeile für Zeile hingeschrieben. Den Beginn

einer Zeile notieren Sie mit einem öffnenden <tr> und das Ende der Zeile mit einem schlie-

ßenden </tr> (tr = table row, deutsch: Tabellenzeile). Innerhalb einer Tabellenzeile zwischen

<tr> und </tr> notieren Sie die einzelnen Zellen (oder auch Spalten) mit <td> und </td> (td =

table data, deutsch: Tabellendaten).

Abbildung 5.1 Eine grundlegende Tabellenstruktur in HTML

<td> Tabellenzelle

<th> Tabellenkopfzelle für Überschrift

<thead> Tabellenkopfbereich

<tbody> Tabellenkörper

<tfoot> Tabellenfußbereich

<colgroup> Gruppe von Tabellenspalten

<col> Tabellenspalte

<caption> Tabellenüberschrift/-legende

HTML-Element Bedeutung

Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente (Forts.)

<table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</table>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<th>...</th> <th>...</th>



179

5

Wollen Sie Zellen bzw. Spalten als Überschrift einer Tabelle verwenden, können Sie die Daten

zwischen <th> und </th> stellen (th = table heading, deutsch: Tabellenüberschrift). Das th-Ele-

ment können Sie genauso verwenden wie das td-Element, nur dass die Webbrowser dieses

Element gewöhnlich durch eine in der Spalte zentrierte Fettschrift hervorheben. Wenn es

sinnvoll ist, sollten Sie Tabellenüberschriften verwenden, da dies zum einen für die Besucher

mit Screenreadern hilfreich ist und zum anderen gegebenenfalls für die Suchmaschinen, die

Ihre Webseite damit besser indizieren können.

Hierzu soll ein einfaches Beispiel einer Tabelle erstellt werden, in der Daten einer Webbrow-

ser-Statistik von einer Webseite in einem Raster zusammengefasst und übersichtlich darge-

stellt werden:

…<table><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>

</tr><tr><td>Chrome</td><td>14478</td><td>59,6 %</td>

</tr><tr><td>Firefox</td><td>3499</td><td>14,4 %</td>

</tr><tr><td>Safari</td><td>1619</td><td>6,6 %</td>

</tr></table>

…

Listing 5.1 /Beispiele/Kapitel005/5_1_1/index.html

Wie Sie in Abbildung 5.2 sehen, stellen Webbrowser die Tabelle ohne jede Formatierung dar.

Die Höhe und Breite einer Tabelle werden gewöhnlich gemäß dem enthaltenen Inhalt ausge-

geben.



180

Abbildung 5.2 Die strukturierte Darstellung einer grundlegenden Tabelle in HTML

Was darf in eine Tabellenzelle alles rein?

Zwischen einer Zelle in <td> und </td> können Sie neben einem Text auch weitere HTML-Ele-

mente verwenden. Theoretisch könnten Sie darin eine weitere komplette Tabelle einfügen.

Wenn Sie eine leere Zelle ohne Inhalt verwenden wollen, müssen Sie trotzdem ein leeres

<td></td> bzw. <th></th> angeben, um eine leere Zelle zu notieren, da die Tabelle ansonsten

nicht richtig dargestellt wird. Bei alten Webbrowsern können Sie zudem noch zur Sicherheit

ein erzwungenes Leerzeichen mit der HTML-Entität in die Zelle schreiben, weil es dort

bei leeren Zellen ohne Inhalt zu Problemen kommen könnte.

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

Wenn Sie Tabelleneinträge über mehrere Zellen zusammenfassen (oder auch überspannen)

wollen, können Sie dies mit dem HTML-Attribut colspan und rowspan machen. Anhand des

Zahlenwerts, den Sie diesen Attributen übergeben, wird die Anzahl der Zellen angegeben, die

Sie zusammenfassen wollen. Wie Sie anhand des Attributnamens vielleicht erahnen können,

wird colspan für das Zusammenfassen von Spalten und rowspan für das Zusammenfassen

von Zeilen verwendet.

Hierzu ein einfaches Beispiel, in dem der Tagesplan eines Fotografieseminars in einer

Tabelle zusammengefasst wurde:

…<table><tr>

<th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>

</tr>



181

5

<tr><th scope="row">Montag</th><td colspan="2">Fotoshooting (outdoor)</td><td>Workshop Bildbearbeitung</td>

</tr><tr><th scope="row">Dienstag</th><td>Straßenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Porträt)</td>

</tr><tr><th scope="row">Mittwoch</th><td>Aktfotografie</td><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>

</tr></table>

…


Wie Sie in Abbildung 5.3 sehen, wurde beim Rahmen der Tabelle mit CSS nachgeholfen,

damit das Ergebnis von colspan deutlicher sichtbar ist.

Sie können hierbei sehen, wie sich am Montag die Zelle Fotoshooting (outdoor) dank colspan=

"2" über 2 Spalten vom Vormittag und Mittag überspannt. Gleiches gilt am Dienstag für die

Spalte Fotoshooting (Porträt), in der von Mittag bis Nachmittag zusammenfasst wurde.

Bei der Verwendung von colspan müssen Sie beachten, dass die Anzahl der Zellen reduziert

werden muss, wenn z. B. ein colspan über zwei Zellen zusammengefasst wird. Im Beispiel von

Montag haben Sie somit nur zwei td-Elemente notieren müssen anstelle von drei, da sich das

erste td-Element bereits über zwei Spalten erstreckt.

Abbildung 5.3 Zusammenfassen von Spalten mit dem Attribut »colspan«



182

Es spricht übrigens nichts dagegen, Spalten in mehr als zwei Zellen zusammenzufassen.

Hierbei müssen Sie auf die Anzahl der tatsächlich vorhandenen Spalten achten. Folgender-

maßen könnten Sie z. B. am Dienstag das Fotoshooting (Porträt) über drei Spalten zusam-

menfassen:

…<tr>

<th scope="row">Dienstag</th><td colspan="3">Fotoshooting (Porträt)</td>

</tr><tr>

…

Die Zelle Straßenfotografie (Stadt) müsste dann allerdings ebenfalls entfernt werden.

Das »scope«-Attribut von <th>

Im Beispiel wurde das scope-Attribut beim th-Element verwendet. Damit können Sie ange-

ben, ob die Tabellenüberschrift für eine Spalte (scope="col") oder eine Zeile (scope="row")

gelten soll.

Alles, was eben beschrieben wurde, gilt auch, wenn Sie Tabelleneinträge mit rowspan über

mehrere Zeilen zusammenfassen wollen. Hierzu nochmals das Beispiel, in dem der Tagesplan

für das Fotoseminar etwas geändert wurde, denn jetzt wird am Dienstag und Mittwoch die

Straßenfotografie (Stadt) am Vormittag durchführt:

…<table><tr>

<th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>

</tr>…

<th scope="row">Dienstag</th><td rowspan="2">Straßenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Porträt)</td>

</tr><tr>

<th scope="row">Mittwoch</th><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>



183

5

</tr></table>

…

Listing 5.3 /Beispiele/Kapitel005/5_1_2/index2.html

Im letzten tr-Element musste das td-Element mit Aktfotografie entfernt werden, weil Sie

den Eintrag Straßenfotografie (Stadt) darüber mit dem Attribut rowspan nach unten ausge-

dehnt haben, wodurch dieser Eintrag den Platz in der darunter liegenden Zelle einnimmt,

wie Sie in Abbildung 5.4 sehen.

Abbildung 5.4 Zusammenfassen von Zeilen mit dem Attribut »rowspan«

5.1.3 HTML-Attribute für die Tabellenelemente

Mit HTML5 wurden alle Attribute des einleitenden table-Elements, die zur Formatierung

von Tabellen verwendet wurden, entfernt. Wie am Anfang bereits erwähnt, sollten Sie zur

Formatierung nur noch CSS verwenden. Für das table-Element unterstützt HTML5 lediglich

das border-Attribut, bei dem der Wert "1" oder "" sein darf, um einen Rahmen anzuzeigen.

Hier wird CSS als bessere Alternative empfohlen. Um z. B. border="1" nachzubilden, brau-

chen Sie nur folgendes CSS-Konstrukt im Kopf des HTML-Dokuments hinzuzufügen:

…<style>table, td, th { border: 1px solid gray }

</style>…

Für die Tabellenzeile mit <tr> gibt es gar keine Attribute mehr, die von HTML5 unterstützt

werden. Die Attribute von <td> und <th> mit colspan, rowspan und scope haben Sie bereits

kennengelernt. Die restlichen Attribute der beiden Elemente wurden ebenfalls von HTML5

als missbilligt erklärt bzw. gestrichen.



184

Webseiten-Layout mit Tabellen?

Sie sollten Tabellen nicht mehr verwenden, um das Layout einer Webseite zu erstellen. Dies

wurde im vorherigen Jahrtausend gemacht. Ich erwähne es nur, weil Sie sich vielleicht schon

den einen oder anderen Quelltext einer älteren Webseite angesehen haben und sich wohl

noch ansehen werden und noch zahlreiche Webseiten aus dieser Zeit vorhanden sind, die eine

Tabelle zum Layouten bzw. Ausrichten des Dokumentinhalts verwenden. Meistens handelt es

sich um Seiten, die nicht weitergepflegt werden, oder sie stammen von Entwicklern, die nicht

mehr auf dem Laufenden sind. Heute greifen Sie für das Layout einer Webseite auf CSS zurück.

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

Optional zu den grundlegenden Tabellenelementen von HTML können Sie noch eine Tabelle

mit den Elementen <thead>, <tbody> und <tfoot> in einen Kopf-, Daten- und Fußbereich ein-

teilen.

Den Tabellenkopf schließen Sie zwischen <thead> und </thead> ein (thead = table head,

deutsch: Tabellenkopf). Sinnvollerweise sollten Sie dafür das th-Element für die einzelnen

Zellen verwenden. Die eigentlichen Daten für die Tabelle markieren Sie zwischen <tbody>

und </tbody> (tbody = table body, deutsch: Tabellenkörper). Wollen Sie einen Bereich als

Tabellenfuß notieren, fassen Sie diesen zwischen <tfoot> und </tfoot> (tfoot = table foot,

deutsch: Tabellenfuß) zusammen.

Hierzu ein Beispiel, das diese drei Elemente in einer Tabelle verwendet:

…<table><thead><tr>

<th>Monat</th><th>Besucher</th><th>Bytes</th>

</tr></thead><tfoot><tr>

<th>Gesamt</th><th>23423</th><th>3234 MB</th>

</tr></tfoot><tbody><tr>



185

5

<td>Januar</td><td>3234</td><td>132 MB</td>

</tr>……

<tr><td>Dezember</td><td>7193</td><td>894 MB</td>

</tr></tbody></table>

…


Wenn Sie den HTML-Quelltext und die dazugehörende Darstellung in Abbildung 5.5 betrach-

ten, werden Sie feststellen, dass der Webbrowser in der Lage ist, die Reihenfolge der Tabelle

selbstständig richtig wiederzugeben. Obwohl im Quelltext der Fußbereich oben angegeben

wurde, wird er vom Webbrowser passend unten angezeigt.

Abbildung 5.5 Eine längere Tabelle mit den Elementen <thead>, <tbody> und <tfoot> im Einsatz



186

Die Aufteilung einer Tabelle in drei verschiedene Bereiche ist optional und beeinflusst in der

Regel nicht die Darstellung im Webbrowser. Es handelt sich um eine rein semantische Dar-

stellung. Allerdings werden diese Elemente häufig verwendet, um das Erscheinungsbild die-

ser Bereiche mit CSS zu formatieren.

Abbildung 5.6 Die Aufteilung einer Tabelle in drei Bereiche ist zunächst rein semantischer Natur.

Erst mit CSS können Sie diese Bereiche gesondert visualisieren.

Auch beim Ausdruck langer Tabellen über mehrere Seiten könnte der Webbrowser diese

Aufteilung verwenden, um auf jeder Seite den Kopf- und Fußbereich der Tabelle mit auszu-

drucken, womit besser erkannt werden kann, in welcher Spalte die einzelnen Daten stehen

bzw. was die Daten bedeuten. Eine weitere Möglichkeit wäre, bei langen Tabellen nur den

Körperbereich zwischen <tbody> und </tbody> zu scrollen, während die Kopf- und Fußzeile

fest stehen bleiben. Leider unterstützt noch kein Webbrowser diese Funktionen, aber das

können Sie u. U. selbst mit CSS und gegebenenfalls JavaScript realisieren.

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

So, wie Sie eben die Tabellenzeilen mit <thead>, <tbody> und <tfoot> in drei Bereiche auftei-

len konnten, können Sie mit den Elementen <colgroup> und <col> auch die einzelnen Spal-

ten in semantische und logische Bereiche aufteilen, sofern dies sinnvoll erscheint. Eine

Gruppierung von Spalten ist z. B. sinnvoll, um eine bestimmte Spalte oder eine bestimmte

Gruppe von Spalten mit einer bestimmten CSS-Formatierung zu versehen, anstatt den Style

für jede Zelle der Spalte zu wiederholen.

Die Elemente <colgroup> und <col> müssen Sie hinter dem öffnenden table-Element und

vor allen anderen Elementen wie tr, thead, tfoot oder tbody notieren. Eine Spaltengruppe

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

<td>...</td> <td>...</td> <td>...</td>

<th>...</th> <th>...</th><thead>

<tbody>

<tfoot> </tfoot>

</tbody>

</thead>



187

5

öffnen Sie mit <colgroup> und schließen sie wieder mit </colgroup> (colgroup = column

group, deutsch: Spaltengruppe). Um eine Spalte zu gruppieren, müssen Sie für jede Spalte

(die sich über die komplette Spalte erstrecken soll) das allein stehende Tag <col> verwenden.

Wollen Sie mehrere Spalten in einem col-Element zusammenfassen, können Sie dies mit

dem Attribut span und der Anzahl der Spalten als Attributwert machen.

Hierzu ein einfaches Beispiel, das das eben Beschriebene in der Praxis erläutert:

…<table><colgroup><col span="2" style="background-color:lightgrey;"><col style="background-color:snow;">

</colgroup><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>


</tr>……

</table>…


Abbildung 5.7 Hier wurden die ersten zwei Spalten zu einer Gruppe mit

»span="2"« zusammengefasst und zur Demonstration farblich mit CSS

hervorgehoben. Die letzte Spalte ist eine eigene Spaltengruppe.



188

Abbildung 5.8 Die semantische Aufteilung von Spalten in Gruppen. In der Abbildung sehen Sie eine

Gruppe mit zwei Spalten und mit einer Spalte.

Wollen Sie hingegen für jede Spalte eine eigene Gruppe verwenden, können Sie dies wie folgt

realisieren:

<table><colgroup><col style="background-color: lightgrey;"><col style="background-color: snow;"><col style="background-color: lightgrey;">

</colgroup><tr>

<th>Browser</th><th>Zugriffe</th><th>Prozent</th>

</tr>…</table>

…

Jetzt wurde jede Spalte in einer eigenen col-Gruppe zusammengefasst. Der Vorteil wird erst

ersichtlich, wenn Sie Spalten mit CSS stylen wollen. Die semantische Aufteilung in drei Spal-

ten finden Sie in Abbildung 5.9 dargestellt.

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

<td>...</td> <td>...</td> <td>...</td>

<th>...</th> <th>...</th>

<colgroup> </colgroup><col span="2"> <col>


5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

189

5

Abbildung 5.9 Semantische Aufteilung in drei Spalten

Wollen Sie <col> XHTML-konform verwenden, müssen Sie es mit <col /> schreiben.


Die Hyperlinks dürften wohl zu den wichtigsten Elementen von HTML gehören, weil es damit

erst möglich wird, sich von einer Webseite zur anderen zu bewegen. Hyperlinks, oft nur Links

oder Verweise genannt, werden Sie benötigen, um Ihr Projekt zu strukturieren und zu verlin-

ken. Ausgehend von Ihrer Hauptseite, benötigen Sie oft Verweise zu weiteren Unterseiten

und eventuell wieder Verweise zurück zur Hauptseite. Erst durch die Verlinkung mehrerer

Dateien wird eine Webseite zu einer sinnvoll bedienbaren Webseite. Neben der Verlinkung

eigener Inhalte können Sie auch Links zu anderen Webseiten oder anderen Dokumenten

erstellen, die sich woanders im Internet befinden.

Einen Link können Sie in HTML mit dem a-Element (a = anchor, deutsch: Anker) erstellen.

Der Text, den Sie zwischen <a> und </a> schreiben, heißt Linktext oder Verweistext und kann

aktiviert werden, wenn Sie im öffnenden <a>-Tag das href-Attribut verwenden. Als Linktext

können Sie notieren, was Sie wollen, aber nicht immer ist es hilfreich, einfach Bitte hier kli-

cken hinzuschreiben. Mit einem sinnvollen Linktext helfen Sie Ihren Besuchern, schneller

dorthin zu gelangen, wo sie hinwollen, und auch Besuchern mit Screenreadern. Zwischen <a>

und </a> können auch andere Elemente als ein Text stehen. Häufig finden Sie hier z. B. eine

Grafik als Link wieder.

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

<td>...</td> <td>...</td> <td>...</td>

<th>...</th> <th>...</th>

<colgroup> </colgroup><col><col><col>



190

Erlaubtes zwischen <a> und </a>

Wie bereits erwähnt, können Sie neben Text auch andere HTML-Elemente wie Grafiken zwi-

schen <a> und </a> verwenden. Mit HTML5 dürfen Sie sogar, im Gegensatz zu HTML 4.01,

gruppierende Elemente wie Absätze, Listen, Artikel, Blocksätze usw. verwenden. Praktisch

können Sie fast alles zwischen <a> und </a> einsetzen, abgesehen von interaktiven Elemen-

ten wie Links, Formularelementen, audio, video. Trotzdem empfehle ich Ihnen nicht, zu viel

Inhalt in einen einzelnen Link zwischen <a> und </a> zu stecken. Screenreader würden den

Text mehrmals vorlesen, und Besucher könnten damit überfordert sein, da sie daran

gewöhnt sind, einzelne Links im traditionellen Linkstil zu aktivieren. Natürlich hängt dies

vom Inhalt der Webseite ab. Ich werde hier nicht mehr näher darauf eingehen, aber Sie wis-

sen jetzt, dass Ihnen in HTML5 »mehr« HTML-Elemente für Links zur Verfügung stehen.

Wenn Sie extrem viel zwischen <a> und </a> gesteckt haben und sich nicht mehr sicher sind,

ob es noch gültig ist, können Sie den Quelltext validieren.

Das wichtigste Attribut, mit dem das a-Element verwendet wird, ist das href-Attribut. Mit

dem href-Attribut geben Sie den Verweis an, wohin der Benutzer gelangt, wenn er auf den

Linktext klickt.

Abbildung 5.10 Der klassische Aufbau eines Hyperlinks

Ein Linktext wird gewöhnlich vom Webbrowser (meistens in Blau) unterstrichen. Dies kön-

nen Sie mit CSS jederzeit ändern.

Zum Nachlesen

Auf die Begriffe Verzeichnisnamen, Verzeichnisstrukturen, vollständige, absolute und rela-

tive Pfadangaben wurde bereits in Abschnitt 3.3, »Exkurs: Namenskonvention und Referen-

zierung«, eingegangen. Lesen Sie gegebenenfalls dort nach, wenn Sie in den folgenden

Abschnitten Probleme mit den dort verwendeten Begriffen haben.

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

Wenn Sie Ihre Website erstellen, dürften diese Verweise wohl die ersten Links sein, die Sie

verwenden, um die losen Sammlungen von HTML-Dokumenten zu einer zusammenhän-

genden Website zu strukturieren – genauer: die Navigation der Website zu erstellen. Wenn

<a href ="http://rheinwerk-verlag.de/">Verlagsseite</a> Der Text, den der Benutzer anklicken kann

Dies ist die Seite, wohin der Hyperlink führt



191

5

Sie einen Link zu einer anderen Seite derselben Website angeben wollen, müssen Sie in der

Regel nicht den kompletten Domain-Namen mitangeben, sondern verwenden gewöhnlich

eine relative URL. Folgende in Abbildung 5.11 abgedruckte Verzeichnisstruktur sei als Beispiel

gegeben.

Abbildung 5.11 Verzeichnisstruktur für ein Beispiel von Links zu anderen Seiten derselben Webseite

Die Verlinkung für die Startseite, hier index.html, zu den anderen Seiten links.html, about.html

und impressum.html sieht demnach in der Praxis wie folgt aus:

…<nav>Blog |<a href="seiten/links.html">Links</a> |<a href="seiten/about.html">Über mich</a> |<a href="seiten/impressum.html">Impressum</a>

</nav><h1>Mein Blog</h1><p>Neueste Berichte zu HTML</p>

…


html

seiten

index.html

links.html

about.html

impres-sum.html



192

Abbildung 5.12 Dank der Verlinkung über eine relative URL kann innerhalb

der Seiten derselben Website jede Seite besucht und betrachtet werden.

Natürlich müssen Sie auch die Links zu den anderen Seiten, wie hier im Beispiel links.html,

about.html und impressum.html, anpassen. Hierbei müssen Sie bei der Angabe der relativen

URL beachten (siehe Abbildung 5.11), dass sich die Seiten (in diesem Beispiel) in einem Unter-

ordner Namens seiten befinden. Bezogen auf die Seite links.html, würden die Angaben für

das Attribut href wie folgt aussehen:

…<nav><a href="../index.html">Blog</a> |Links |<a href="about.html">Über mich</a> |<a href="impressum.html">Impressum</a>

</nav>…

Listing 5.7 /Beispiele/Kapitel005/5_2_1/seiten/links.html

Hier können Sie sehen, wie Sie aus dem Unterordner seiten mit ../ (hier ../index.html) zum

übergeordneten Ordner navigieren, wo sich index.html befindet. Die anderen beiden Dateien

about.html und impressum.html befinden sich im selben Ordner wie links.html, daher reicht

es aus, nur den Dateinamen anzugeben. Ähnlich müssen Sie auch die Dateien about.html und

impressum.html verlinken.



193

5

Abbildung 5.13 Das HTML-Dokument »links.html«

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

Zur Beschriftung einer Tabelle mit einem Titel können Sie entweder das caption-Element

verwenden, das unmittelbar nach dem öffnenden <table>-Tag verwendet werden muss,

oder Sie verwenden die neuen figure- und figcaption-Elemente.

Tabelle beschriften mit <caption>

Wie bereits erwähnt, muss das caption-Element gleich nach dem öffnenden <table>-Tag fol-

gen. Außerdem kann nur eine Beschriftung pro Tabelle verwendet werden. Hierzu ein einfa-

ches Beispiel:

…<table><caption>Browserstatistik 11/2016</caption>

<tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>


</tr>……

</table>…




194

Abbildung 5.14 Die Überschrift wird standardmäßig zentriert über der Tabelle angezeigt.

<caption> mit CSS formatieren

Die Webbrowser stellen die Beschriftung gewöhnlich zentriert über der Tabelle dar. Mit CSS

ist es kein Aufwand, mithilfe der CSS-Eigenschaften text-align und caption-side die Aus-

richtung und die Position der Tabellenbeschriftung woanders zu platzieren.

Wollen Sie einer Tabellenbeschriftung noch weitere Hinweise hinzufügen, können Sie die

neuen HTML5-Elemente details und summary zwischen <caption> und </caption> setzen. Zur

Drucklegung konnten die meisten Browser mit den neuen Elementen umgehen. Für andere

Webbrowser müssen Sie hier ein Workaround wie html5shiv.js verwenden.

Abbildung 5.15 Informationen zum Auf- und Zuklappen dank der neuen HTML5-Elemente <details>

und <summary>. Das Beispiel dazu finden Sie unter »/Beispiele/Kapitel005/5_2_2/index2.html«.



195

5

Beschriften einer Tabelle mit <figcaption>

Auf das figcaption- und figure-Element wurde bereits in Abschnitt 4.2.9, »Gesonderte

Beschriftung von Inhalten mit <figure> und <figcaption>«, eingegangen. Es bietet sich für

Tabellen an, diese zwischen <figure> und </figure> zu verpacken und eine Beschriftung die-

ser Tabelle am Anfang nach dem öffnenden <figure> oder am Ende vor dem schließenden

</figure> einzufügen. Hierzu ein Beispiel, wie Sie eine Tabelle mit den neuen figure- und

figcaption-Elementen beschriften können:

…<article><h1>Browserstatistik November 2016</h1><figure><table><tr>

<th>Browser</th><th>Zugriffe</th><th>Prozent</th>


</tr>…</table><figcaption>Tabelle 1: Browserstatistik 11/2016</figcaption></figure></article>

…


Abbildung 5.16 Tabellen beschriften mit <figure> und <figcaption>



196

5.2.3 Links zu anderen Webseiten einfügen

Links zu anderen Webseiten werden genauso notiert wie die Links zu den Seiten derselben

Webseite. Nur mit dem Unterschied, dass Sie im Attribut href die komplette Adresse, also die

absolute URL, zu dieser Seite angeben müssen. Hierzu ein einfaches Beispiel, in dem Links

auf externe Seiten enthalten sind:

…

<article>

<header>

<h2>Entwurf zu HTML5.1</h2>

</header>

<p>Wie bereits berichtet, hat das

<a href="http://www.w3.org/">World Wide Web Consortium

</a> einen

<a href=" http://www.w3.org/TR/html51/">neuen Entwurf</a> für HTML vorgelegt, welcher in

Version 5.1 weiterentwickelt wird ...

</p>

<aside>

<h3>Weiterführende Links</h3>

<nav>

<ul>

<li>

<a href=" http://www.w3.org/TR/html51/">HTML 5.1 Working Draft</a></li><li><a href="http://www.w3.org/">W3C</a></li><li><a href="http://www.whatwg.org/">WHATWG</a></li></ul>

</nav>

</aside>

</article>

…




197

5

Abbildung 5.17 Viele Webbrowser zeigen die Zieladresse des Links unten in der

Statusleiste an, wenn Sie mit der Maus darüber stehen. Aktivieren Sie den Link …

Abbildung 5.18 … wird die Zieladresse in den Webbrowser geladen und dargestellt.

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

Mit dem HTML-Attribut target vom a-Element können Sie dafür sorgen, dass ein Verweisziel

in einem neuen Fenster oder Tab geöffnet wird. Hierbei müssen Sie target nur den Attribut-

wert _blank übergeben. Ein Beispiel hierzu:



198

<p>Wie bereits berichtet, hat das<a target="_blank" href="http://www.w3.org/">W3C</a> einenneuen Entwurf für HTML vorgelegt, welcher in Version 5.1weiterentwickelt wird ...

</p>

Würden Sie in diesem Beispiel den Linktext W3C aktivieren, würde die Zieladresse (hier:

www.w3.org) hier tatsächlich in einem neuen Fenster oder Tab geöffnet und geladen werden.

Ziel der Verwendung von target="_blank" ist natürlich vorrangig, den Besucher der Seite

nicht zu »verlieren«, sondern die Seite offen zu lassen, damit er dort zurückkehrt, wenn er

die Seite im neu geöffneten Fenster oder Tab gelesen hat.

Das target-Attribut war in HTML 4.01 in der Strict-Variante nicht mehr erlaubt, ist aber mit

HTML5 wieder voll einsatzfähig. Neben dem am meisten verwendeten Attributwert _blank

können Sie hier noch _self (= aktuelles Fenster), _parent (= Eltern-Fenster), _top (= oberste

Fenster-Ebene) und Namen von Fenstern verwenden, die mit JavaScript verarbeitet werden

können.

Das Attribut »target="_blank"« verwenden oder nicht?

Auch wenn viele Webseiten dieses Attribut recht häufig und gerne verwenden, sollten Sie

nicht auf Teufel komm raus für jeden Link ein neues Fenster öffnen. In der Praxis sollten Sie es

dem Nutzer überlassen, ob dieser für einen Link eine neue Seite öffnen will oder nicht. Auch

wenn Sie es vielleicht gewohnt sind, unzählige Tabs und mehrere Webseiten auf einmal

geöffnet zu haben, so sollten Sie an die etwas unerfahreneren Besucher denken, die eben

nicht so im World Wide Web unterwegs sind oder eben nicht so unterwegs sein wollen. Set-

zen Sie das Attribut target="_blank" sparsam ein, und weisen Sie, wenn möglich, den Besu-

cher darauf hin, dass ein neues Fenster oder Tab geöffnet wird, wenn er den Link aktiviert.

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

Sicherlich kennen Sie auch die Sorte von Links, die Sie aktivieren, worauf sich die E-Mail-

Anwendung mit einer bestimmten E-Mail-Adresse öffnet. Auch diese Links werden mit dem

a-Element und dem href-Attribut erzeugt. Solche E-Mail-Verweise beginnen bei href mit

mailto:, gefolgt von der gewünschten E-Mail-Adresse, z. B.:

…<footer><a href="mailto:[email protected]">E-Mail senden</a>

</footer>…




199

5

Abbildung 5.19 Wenn Sie mit der Maus über dem Link stehen bleiben, können Sie gewöhnlich in der

Statusleiste die E-Mail-Adresse sehen, die mit diesem Link verknüpft ist. Aktivieren Sie den Link …

Abbildung 5.20 … wird häufig die E-Mail-Anwendung mit der E-Mail-Adresse geöffnet.

Die Funktionalität eines »mailto«-Verweises ist nicht zuverlässig

Hierzu muss angemerkt werden, dass es keine Garantie gibt, dass eine solche mailto-Ver-

knüpfung funktioniert. Dafür muss entweder der Webbrowser das Erstellen und Versenden



200

von E-Mail unterstützen, oder es muss bei einem mailto-Verweis eine lokale E-Mail-Anwen-

dung gestartet werden. Wenn der Besucher keine lokale E-Mail-Anwendung verwendet bzw.

eingerichtet hat, sondern lediglich die klassische Webmail im Webbrowser nutzt, funktio-

niert der mailto-Verweis nur, wenn der Benutzer den Webbrowser entsprechend konfigu-

riert hat. Außerdem gibt es Webbrowser, die man dafür gar nicht konfigurieren kann. Es ist

daher sinnvoll und empfehlenswert, wenn Sie die E-Mail-Adresse zusätzlich in lesbarer Form

angeben, sodass Besucher, die den E-Mail-Verweis nicht ausführen können, Ihnen trotzdem

eine E-Mail senden können.

Achtung vor Spam!

Leider müssen Sie aufgrund solcher E-Mail-Adressen auf der Webseite früher oder später mit

unerwünschten Werbe-E-Mails (Spam) rechnen, weil es Webcrawler gibt, die Webseiten nach

E-Mail-Adressen durchsuchen. Sie haben sogar die Pflicht, die E-Mail-Adresse im Impressum

zu nennen (§ 5 Allgemeine Informationspflicht; http://www.gesetze-im-internet.de/tmg/__

5.html). Der einzige Schutz wäre, die E-Mail-Adresse nicht im Quelltext zu nennen. Die erste

Möglichkeit, dies zu vermeiden, wäre die Einbindung als Grafik. Allerdings wäre dies diskri-

minierend gegenüber Personen, die auf Screenreader angewiesen sind, und auch so ist eine

»Grafik-E-Mail-Adresse« rechtlich bedenklich. Häufig sind noch Versionen im Einsatz, in

denen das @-Zeichen durch (at) ausgetauscht wird (z. B. webmaster (at) dieter-baer.de).

Ebenso wird gerne noch der Punkt mit (dot) beschrieben (z. B. webmaster (at) dieter-baer

(dot) de). Natürlich bedeutet das dann, dass der Besucher die E-Mail-Adresse von Hand einge-

ben muss.

Alternativ könnten Sie die E-Mail-Adresse im Unicode-Format mit numerischen Entitäten

angeben. Bezogen auf [email protected], sähe diese mit einer numerischen Entität

wie folgt aus:

#109;ailto:webmaster@dieter-baer.de

Hiermit würde nach wie vor die E-Mail-Adresse korrekt angezeigt, nur lässt sich diese nicht

mehr im Quelltext so einfach erkennen. Ein richtiger Schutz ist das trotzdem nicht. Auch

die Softwareentwickler von Spam-Crawlern wissen, wie man solche Informationen ver-

werten kann. Eine interessante Webseite, wie Sie es besser machen können, Ihre E-Mail-

Adresse z. B. mit JavaScript zu verstecken, finden Sie hier: http://alistapart.com/article/

gracefulemailobfuscation.

5.2.6 Links zu anderen Inhaltstypen setzen

Wenn Sie Links zu anderen, nicht im Web gebräuchlichen Dokumenttypen wie z. B. Word-,

Excel-, PDF-Dokumenten setzen, hängt es vom Webbrowser ab, wie er diesen Dokumenttyp



201

5

weiterbehandelt. Darauf haben Sie als Webentwickler keinen Einfluss. Hier lautet zunächst

die allgemeine Empfehlung, weitverbreitete Formate zu verwenden. So ist die Wahrschein-

lichkeit höher, dass bei einem Link auf ein PDF-Dokument der Webbrowser einen entspre-

chenden PDF-Reader aufruft und das Dokument darin zum Lesen öffnet, als wenn der Link

zum Inhaltstyp ein plattformabhängiges oder herstellerspezifisches Dokument ist (wie z. B.

ein Word-Dokument). Hierzu ein einfaches Beispiel:

…<h1>Verweis auf andere Inhaltstypen</h1><p>Ein PDF-Dokument öffnen: <a href="dokument.pdf">PDF</a></p><p>Einen MOV-Film öffnen: <a href="ganges.mov">MOV</a></p><p>Ein Word-Dokument öffnen: <a href="worddokument.doc"

type="application/msword">DOC</a></p>…


Abbildung 5.21 Hier haben Sie drei Links auf verschiedene Inhaltstypen.

Was bei diesen drei im Beispiel verwendeten Links passiert, kann nicht 100%ig vorhergesagt

werden und hängt vom Webbrowser ab. Beim PDF-Dokument dürfte der Webbrowser wis-

sen, wie er damit umzugehen hat. Schwieriger dürfte es mit dem Film im MOV-Format sein,

weil dafür gewöhnlich ein QuickTime-Plug-in von Apple benötigt wird. Einige Webbrowser

bieten dazu an, das entsprechende Plug-in herunterzuladen und zu installieren. Andere wie-

derum nicht.

Selbiges gilt für das Word-Dokument. Ist Word auf Ihrem Rechner installiert, bietet der Web-

browser häufig einen Dialog an, das Dokument mit Microsoft Word zu öffnen, oder zumindest

die Möglichkeit, eine entsprechende Anwendung auszuwählen, mit der Sie dieses Dokument

öffnen wollen. Häufig wird noch zusätzlich die Möglichkeit zum Herunterladen des Doku-

ments angeboten.



202

In Abbildung 5.22 kennt der Webbrowser die Standardverknüpfung der Anwendung mit dem

Word-Dokument auf dem System. Die Anwendung zum Öffnen des Dokuments kann hier

auch geändert werden. Auch ein Herunterladen mit Datei speichern wird angeboten.

Abbildung 5.22 Öffnen eines Word-Dokuments im Webbrowser

Plug-ins nachrüsten

Bei vielen Webbrowsern gibt es die Möglichkeit, verschiedene Dateiformate über Plug-ins

oder Add-ons nachzurüsten, um eine bestimmte Datei anzuzeigen oder wiederzugeben.

Wenn Sie wirklich einen solchen Inhaltstyp auf Ihrer Webseite anbieten, der ein bestimmtes

Plug-in oder Add-on benötigt, sollten Sie den Besucher vorher darauf hinweisen. Ob dieser

das Plug-in oder Add-on installiert, nur um den einen Inhalt betrachten zu können, bleibt

fraglich und hängt wohl auch vom Inhalt ab (ob sich der Aufwand lohnt). Mit HTML haben

Sie keinen Einfluss darauf.

Inhaltstyp mitangeben

Bei besonderen Inhaltstypen können Sie dem Webbrowser den Internet-MIME-Typ mit dem

type-Attribut im öffnenden <a>-Tag mitteilen, wie dies im Beispiel mit application/msword

für ein Word-Dokument gemacht wurde. Die Informationen sind für den Webbrowser und

auch andere Webclients sehr nützlich. Sinnvoll ist eine solche Angabe des Dateiformats fast

immer, wenn das Linkziel kein HTML-Dokument ist. Eine Liste mit bekannten MIME-Typen

finden Sie in Abschnitt A.19, »MIME-Typen (Internet Media Type)«.

Informieren Sie den Besucher darüber, was sich hinter einem Link verbirgt

Wenn Sie Nicht-HTML-Dokumente auf Ihrer Webseite anbieten, sollten Sie den Besucher auf

jeden Fall darüber informieren, was sich hinter dem Link versteckt und, eventuell auch, wie

groß diese Datei ist. Sie können hierzu das globale title-Attribut im öffnenden <a>-Element



203

5

verwenden, aber es ist empfehlenswert, genauere Angaben direkt beim Linktext zu erwäh-

nen. Ein Negativbeispiel, wie es nicht gemacht werden sollte, sieht so aus:

<a href="jahresumsatz.pdf">Jahresumsatz 2014</a>

Der Besucher wird hier nur den Linktext Jahresumsatz 2014 zu sehen bekommen und viel-

leicht verdutzt reagieren, wenn dieser Link ein PDF-Dokument ist, das vielleicht etwas länger

zum Laden benötigt. Besser ist daher, Folgendes zu schreiben:

<a title="Öffnet die PDF-Datei mit dem Jahresumsatz von 2014"href="jahresumsatz.pdf">Jahresumsatz 2014 (PDF, 3,9 MB)

</a>

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

Neu mit HTML5 ist die Möglichkeit, Links als Downloadverweis hinzuzufügen – und dies

unabhängig vom Inhaltstyp (= MIME-Typ) des Linkziels. Für diesen Zweck wird das Attribut

download im öffnenden <a>-Tag verwendet. Hier nochmals derselbe HTML-Code vom Beispiel

/Beispiele/Kapitel005/5_2_5/index.html zuvor, nur werden jetzt alle drei Dateien mit dem

download-Attribut zum Download angeboten:

…<h1>Verweis auf andere Inhaltstypen</h1><p>Ein PDF-Dokument herunterladen:

<a href="dokument.pdf" download>PDF</a></p><p>Einen MOV-Film herunterladen:

<a href="ganges.mov" download="film.mov">MOV</a></p><p>Ein Word-Dokument herunterladen: <a href="worddokument.doc"

download="worddokument.doc">DOC</a></p><p>Ein HTML-Dokument herunterladen: <a href="website.html"

download="website.html">HTML</a></p>…


Mit dem Attribut download weisen Sie einen Webbrowser an, diese Datei zum Download

anzubieten, auch wenn er die Datei selbst anzeigen könnte oder das entsprechende Plug-in

bzw. Add-on dazu kennt, das er für gewöhnlich für einen solchen Inhaltstyp verwenden

würde.

Das Attribut download können Sie als allein stehendes Attribut verwenden, wie im ersten Bei-

spiel mit dem PDF-Dokument zu sehen ist. Der Name der Datei, die heruntergeladen wird,

entspricht der Angabe in href (hier: dokument.pdf ). Enthält der Link in href keinen sinnvol-



204

len Namen, können Sie dem download-Attribut auch einen anderen Namen zuweisen, wie es

im Beispiel mit dem MOV-Film der Fall ist, wo der eigentliche Dokumentname ganges.mov

lautet, der Downloadname der Datei aber film.mov heißt. Bei XHTML müssen Sie bei down-

load einen Dateinamen verwenden, weshalb im dritten Beispiel mit dem Word-Dokument

für href und download derselbe Dokumentname verwendet wird. Das letzte Beispiel mit dem

HTML-Dokument soll nur demonstrieren, dass selbst webbrowsertypische Inhaltstypen wie

hier ein HTML-Dokument mit dem Attribut download wirklich nur noch als Download ange-

boten werden.

Den Besucher darüber informieren, was hier heruntergeladen wird?

Wie schon beim Verlinken von Nicht-HTML-Dokumenten sollten Sie den Leser darauf hin-

weisen, was er hier herunterlädt und womit er das Dokument betrachten oder weiterver-

wenden kann. Wenn Sie z. B. Excel-Tabellen mit einem Jahresumsatzbericht zum Download

anbieten, sollten Sie den Leser darüber informieren, welche Software er benötigt, um diese

Tabelle zu betrachten.

Dasselbe gilt für ZIP-verpackte Archive. Auch hier sollte ein zusätzlicher Hinweis oder ein

Link zu einer Software hinzugefügt werden, wie ein solches Archiv entpackt werden kann.

Bedenken Sie, dass viele Besucher nichts mit Dateiendungen wie *.odt, *.xls, *.zip, *.tar.bz usw.

anfangen können. Halten Sie es nicht für selbstverständlich, bloß weil Sie täglich mit unzäh-

ligen Datenformaten zu tun haben, dass Ihre Besucher dies auch tun. Es empfiehlt sich, beim

Download die Dateigröße mitanzugeben. Der Download eines umfangreichen ZIP-Archivs

könnte somit wie folgt notiert werden:

…<a title="Jahresumsatz im Excel-Format als ZIP-Archiv verpackt"

href="archiv.zip" download="jahresumsatz2014.zip">Jahresumsatz 2014 (ZIP-Archiv; 2,5 MB)</a>

<small>(Um das ZIP-Archiv zu entpacken, benötigen Sie einPackprogramm wie z. B. 7-Zip. Die Jahresumsätze sindim Excel-Format gehalten und benötigen somit eineSoftware, die Excel-Tabellen betrachten kann.)

</small>…

Hier wurden neben dem title-Attribut noch das Dateiformat (hier: ZIP-Archiv) und die

Dateigröße erwähnt. Zusätzlich wurden noch ein paar klein gedruckte Informationen zwi-

schen <small> und </small> notiert.

Alte Webbrowser, die das »download«-Attribut nicht kennen?!

Bei alten Webbrowsern, die das neue download-Attribut nicht kennen, wird vorgegangen

wie bisher, als wäre das download-Attribut nicht vorhanden. Inhaltstypen, die der Webbrow-



205

5

ser nicht kennt, werden wie gehabt entweder zum lokalen Speichern angeboten, oder Sie

können aus einer Liste von Anwendungen auswählen, mit welcher Sie dieses Dokument öff-

nen wollen. Eine beliebte Methode ist, die Dateien in das ZIP-Format zu packen und anzu-

bieten.

5.2.8 Links zu bestimmten Teilen einer Webseite setzen

Nichts kann für den Besucher lästiger sein, als eine lange wissenschaftliche Abhandlung

eines speziellen Themas auf einer Webseite zu lesen und dabei lange hoch- und herunter-

scrollen zu müssen, um zu einem speziellen Abschnitt zu gelangen. Für solche Fälle können

Sie sogenannte Anker mit dem globalen Attribut id setzen, den Sie mit einem gewöhnlichen

Link mit dem a-Element anspringen können. Vorbildlich werden solche Zielanker z. B. bei

Wikipedia für das Inhaltsverzeichnis eines Themas verwendet. Für eine Verlinkung zu einem

bestimmten Bereich einer Webseite benötigen Sie nur:

� einen Anker (Sprungmarke), den Sie mit dem Attribut id="ankername" erstellen. Zum Bei-

spiel:

<h1 id="ankername">Überschrift xyz</h1>

� einen Link, der auf den Anker mit href="#ankername" verweist. Hierzu wird das Doppel-

kreuz-Zeichen # vor den Ankernamen geschrieben. Zum Beispiel:

<a href="#ankername">Zur Überschrift xyz springen</a>

Hierzu ein einfaches Beispiel, wie Sie solche Sprungmarken in der Praxis setzen und verwen-

den können:

…<h1 id="top">Inhaltsverzeichnis</h1><ul><li><a href="#intro">Einführung in HTML</a></li><li><a href="#syntax">Die Syntax von HTML</a></li><li><a href="#versionen">Versionen von HTML</a></li><li><a href="#techniken">Techniken rund um HTML</a></li><li><a href="#praxis">Einstieg in die Praxis</a></li>

</ul><h1 id="intro">Einführung in HTML</h1><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="syntax">Die Syntax von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p>



206

<h2 id="versionen">Versionen von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="techniken">Techniken rund um HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="praxis">Einstieg in die Praxis</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p>

…


In Abbildung 5.23 sehen Sie das Beispiel bei der Ausführung, wo Sie dank Sprungmarken

schneller zum gewünschten Abschnitt gelangen.

Abbildung 5.23 Ein etwas längeres Dokument, in dem Sie dank Sprungmarken …

Aktivieren Sie z. B. den Link Techniken rund um HTML, wird direkt zum entsprechenden

Abschnitt mit der Sprungmarke gesprungen, wie Sie in Abbildung 5.24 sehen. Unterhalb von

jedem Abschnitt wurde außerdem ein weiterer Link zur Sprungmarke zurück nach oben

zum Inhaltsverzeichnis eingefügt.



207

5

Abbildung 5.24 … schneller zum gewünschten Abschnitt gelangen

Anker setzen mit dem »id«-Attribut (id="ankername")

Bevor Sie einen Link zu einem bestimmten Teil innerhalb einer Webseite erstellen können,

müssen Sie die Sprungmarke (oder auch einen Anker) mit dem globalen Attribut id inner-

halb eines öffnenden HTML-Tags festlegen. Im Beispiel wurde dies bei den Hauptüberschrif-

ten <h1> und <h2> gemacht (z. B. <h2 id="techniken">). Der Attributwert von id muss mit

einem Buchstaben oder einem Unterstrich anfangen (auf keinen Fall mit einer Zahl) und darf

keine Leerzeichen enthalten. Es ist außerdem ratsam, einen aussagekräftigen Namen, um

nicht den Überblick zu verlieren, und einen semantisch sinnvollen Namen für das HTML-

Dokument zu verwenden. Auf nichtssagende Bezeichnungen wie anker1, anker2 usw. sollten

Sie verzichten. Außerdem wird zwischen Groß- und Kleinschreibung unterschieden.

»name«-Attribut aus HTML 4.01 oder »id«-Attribut aus HTML5

Die Verwendung des id-Attributs für das Setzen eines Ankers mit z. B. <h2 id="techniken">wurde neu mit HTML5 eingeführt. Mit HTML 4.01 wurde dies noch mit dem Attribut name rea-

lisiert (z. B.: <h2 name="techniken">).

Auf einen Anker verweisen mit »#ankername«

Um einen Link zu den Ankern zu verwenden, müssen Sie im öffnenden <a>-Tag den Attribut-

wert zum Anker in href angeben. Lautet der Anker z. B. <h2 id="techniken">, müssen Sie vor



208

diesen Ankernamen (hier mit: "techniken") noch das Doppelkreuz-Zeichen # schreiben.

Bezogen auf unser Beispiel, müssten Sie dies wie folgt notieren:

<li><a href="#techniken">Techniken rund um HTML</a></li>

Wenn Sie diesen Link aktivieren, wird im HTML-Dokument zum Element gesprungen, wo

der Wert des Attributs id gleich "techniken" lautet. In diesem Beispiel wäre es zum <h2>-Ele-

ment mit der Überschrift Techniken rund um HTML gesprungen.

Links zu einem bestimmten Bereich einer anderen Webseite erstellen

Genauso ist es möglich, einen Link zu einem Bereich eines anderen HTML-Dokuments zu

erstellen. Voraussetzung hierfür ist, dass das andere HTML-Dokument einen entsprechen-

den Anker enthält. Wenn sich der Anker in einem anderen Dokument befindet, können Sie

wie folgt einen Verweis dorthin erstellen:

<a href="tech.html#techniken">Techniken rund um HTML</a>

Hiermit würden Sie in einem anderen HTML-Dokument, das sich im selben Verzeichnis

befindet und dessen Dateiname tech.html lautet, zum Bereich mit dem Anker #techniken

springen.

Befindet sich die Datei mit dem Anker gar auf einer anderen Webseite, müssen Sie die kom-

plette URL dorthin angeben:

<a href="http://www.domain.de/pfad/tech.html#techniken">…</a>

Selbstverständlich ist es möglich, einen Link auf Bereiche von fremden Webseiten zu ver-

wenden. Allerdings sollte klar sein, dass Sie hier keinen Anker setzen, sondern nur bereits

vorhandene Anker verlinken können. Hier z. B. ein Link zu einem verankerten Bereich einer

Wikipedia-Seite:

<a href="http://de.wikipedia.org/wiki/Html#Versionen">…</a>

Hier würden Sie direkt zur Wikipedia-Seite mit dem Eintrag HTML zum Anker #Versionen

springen. Dies setzt voraus, dass der Anker existiert – was zur Drucklegung des Buches zwar

noch der Fall war, sich aber jederzeit ändern könnte. Wenn der Anker nicht mehr existiert

oder falsch ist, wird die Webseite aufgerufen und der Anker ignoriert, wie dies ohne eine

Angabe von #ankername bei der Verlinkung mit dem a-Element der Fall gewesen wäre.

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

Zum Schluss sollen hier noch die HTML-Attribute für die Links erläutert werden, die u. a.

auch für die Suchmaschinen recht nützlich sein können. In Tabelle 5.2 finden Sie eine Über-

sicht über alle vorhandenen Attribute für das a-Element. Einige davon haben Sie bereits ken-

nengelernt.



209

5

Attribut Beschreibung HTML

download Damit geben Sie an, dass Sie das Verweisziel zum Download anbieten,

auch wenn der Webbrowser den Inhaltstyp des Ziels selbst darstellen

könnte.

5

href Damit geben Sie die URL der Seite an, wo der Link hinführt, wenn dieser

aktiviert wird.

hreflang Hier können Sie die Sprache des verlinkten Dokuments angeben. Als

Angaben sind die üblichen Sprachenkürzel erlaubt (z. B. de für Deutsch-

land).

media Damit können Sie Angaben zu den Medien machen, wofür das Verweis-

ziel optimiert wurde. Sie können entweder Medientypen, durch Kom-

mata getrennt, aufzählen oder all für alle Medientypen angeben.

5

rel Das Attribut kennen Sie bereits vom link-Element aus Abschnitt 3.5.1,

»Die HTML-Attribute für das allein stehende HTML-Element <link>«, wo

Sie zurückblättern können, wenn Sie mehr Informationen benötigen.

Hiermit bestimmen Sie den Typ der Verlinkung. Speziell für das a-Ele-

ment sind hier noch die rel-Attributwerte bookmark, external, nofollow

und noreferrer von besonderer Bedeutung, da diese nur im a-Element

verwendet werden können.

� rel="bookmark": Hier legen Sie fest, dass das Verweisziel ein über-

geordneter Abschnitt (bzw. Dokument) des aktuellen Dokuments ist.

Dies stellt praktisch eine Verlinkung zurück zu einem umfangreichen

HTML-Dokument dar, wie es bei wissenschaftlichen oder techni-

schen Dokumenten der Fall ist. In der Praxis wird dieser Linktyp auch

für Permalinks verwendet, um eine ältere Version des aktuellen

Dokuments ansehen zu können.

� rel="external": Damit geben Sie an, dass der Link zu einem exter-

nen Webangebot gehört. Häufig wird dieser mit CSS noch gesondert

formatiert.

� rel="nofollow": Damit weisen Sie die Webcrawler an, dem Link nicht

zu folgen.

� rel="noreferrer": Hiermit weisen Sie den Webbrowser des Besu-

chers an, beim Anklicken des Links keine Referrer-Adresse zu verwen-

den, wodurch vermieden werden sollte, dass der Webserver der

Zieladresse Informationen erhält, von woher der Besucher gekom-

men ist.

� Nicht verwenden hingegen können Sie die Attributwerte icon,

pingback, prefetch und stylesheet für a-Elemente.

Tabelle 5.2 Attribute für Links mit <a>-Element



210

Veraltete Attribute

Die ehemaligen Attribute charset, coord, name, rev und shape werden nicht mehr von HTML5

unterstützt und sind daher nicht in dieser Tabelle aufgelistet.

5.3 Zusammenfassung

In diesem Kapitel haben Sie einige essenzielle HTML-Elemente kennengelernt. Die wichtigs-

ten Elemente, die Sie vermutlich auf fast jeder Webseite vorfinden und verwenden werden,

sind:

� a-Element, um Hyperlinks zu erzeugen

� Tabellen, um zusammenhängende Daten und Informationen in einem Raster aus Zeilen

und Spalten zu präsentieren

target Hier tragen Sie ein, wo das Verweisziel geöffnet werden soll. Mögliche

Werte dafür sind:

� _blank: neues Fenster/Tab

� _parent: Eltern-Fenster

� _self: aktuelles Fenster

� _top: oberste Fenster-Ebene

� framename: Name des Fensters, das mit JavaScript geöffnet und auch

darin vergeben wurde

type Damit können Sie dem Webbrowser den MIME-Typ (Dateiformat)

nennen, zu welchem die verlinkte Datei gehört. Eine Liste bekannter

MIME-Typen finden Sie in Abschnitt A.19, »MIME-Typen (Internet Media

Type)«. Diese Angabe ist sinnvoll, wenn das Ziel kein HTML-Dokument ist.

5

Attribut Beschreibung HTML

Tabelle 5.2 Attribute für Links mit <a>-Element (Forts.)


495

13

Kapitel 13

Das Layout mit CSS gestalten

Wenn Sie das Buch bis hierher gelesen haben und mit dem Box-Modell und

der Positionierung von CSS vertraut sind, können Sie sich endlich an praxis-

nähere Beispiele heranwagen. In diesem Kapitel wird konkret das Erstellen

von Layouts mit CSS behandelt.

In diesem Kapitel werden Sie einige gängige Techniken zum Layouten von Webseiten mit

CSS kennenlernen. Es gibt sehr viele Ansätze, ein Layout mit CSS zu erstellen, und falls Sie

sich zum ersten Mal mit diesem Thema befassen, könnte die Flut von Informationen dazu

zunächst erschlagend wirken.

Wenn Sie sich im Internet bereits ein wenig nach Layouts mit CSS umgesehen haben, dürf-

ten Sie schnell auf fertige CSS-Frameworks gestoßen sein, die einem das Leben erheblich ein-

facher machen können. Auf solche CSS-Frameworks wird in diesem Buch noch an anderer

Stelle eingegangen. In diesem Kapitel werden Sie zunächst die Grundlagen zur Erstellung

eines Layouts mit CSS kennenlernen.

<main> oder <div id="main">

Ich habe in den Beispielen für den Hauptinhalt das neue HTML5-Element <main> verwendet.

Ob Sie hier <main> verwenden oder <div>, müssen Sie selbst entscheiden. Mehr Informa-

tionen zu <main> finden Sie in Abschnitt 5.2.8, »Links zu bestimmten Teilen einer Webseite

setzen«.

Zuvor noch eine kurze Übersicht, was Sie in diesem Kapitel alles erwartet:

� Sie lernen verschiedene Techniken kennen, mit denen Sie zweispaltige Layouts erstellen

können.

� Ebenso werden Sie verschiedene Techniken für dreispaltige Layouts kennenlernen.

� In diesem Kapitel wird umfassender auf das Thema Responsive Layouts eingegangen,

d. h., Sie lernen, flexible Layouts zu erstellen, die die Eigenschaften des Endgeräts des

Besuchers berücksichtigen.

� Auch auf etwas fortgeschrittenere Themen wie das Erstellen eines Layouts mit einem Ras-

ter (englisch: Grid) wird eingegangen.


13 Das Layout mit CSS gestalten

496

13.1 Exkurs: Was bedeutet feste und flexible Breite?

In den nächsten Abschnitten werden Sie eine Menge verschiedene Layouts kennenlernen.

Dabei werden Sie Methoden mit einer festen und andere Methoden mit einer flexiblen

Breite verwenden. An dieser Stelle werde ich Ihnen kurz den Unterschied und die Vor- und

Nachteile von festen und flexiblen Layouts erläutern.

13.1.1 Ein Layout mit fester Breite

Layouts mit fester Breite werden gewöhnlich in Pixel angegeben und ändern sich auch nicht,

wenn das Webbrowser-Fenster vergrößert oder verkleinert wird.

Die Vorteile von Layouts mit fester Breite sind:

� Größe und Position von Elementen können pixelgenau festgelegt werden.

� Das relative Verhältnis bei verwendeten Bildern bleibt im gleichen Verhältnis zum Rest

der Seite.

� Sie haben weitaus mehr Kontrolle über die einzelnen Elemente als beim flexiblen Layout,

und die Umsetzung ist hierbei häufig wesentlich einfacher.

Zu den Nachteilen von Layouts mit fester Breite gehören allerdings:

� Das Layout ist unflexibel und passt sich sehr schlecht an sehr kleinen oder sehr großen

Bildschirmen an. In der Praxis funktionieren solche Layouts am besten in der Auflösung,

für die sie erstellt worden sind, was in der Regel Desktopbildschirme sind.

� Wird die Schriftgröße im Webbrowser geändert (gezoomt), kann es passieren, dass der

Text nicht mehr im dafür vorgesehenen Platz bleibt.

� Bei Bildschirmen mit hoher Auflösung wirkt alles sehr klein und verloren. Oft entsteht

zwischen dem Seitenrand und dem eigentlichen Inhalt eine große unansehnliche Lücke.

13.1.2 Ein Layout mit flexibler Breite

Bei Layouts mit flexibler Breite erfolgt die Maßangabe gewöhnlich in Prozent. Dadurch passt

sich bei einer Änderung des Webbrowser-Fensters auch das Layout mit an.

Die Vorteile einer flexiblen Breite sind:

� Die Webseite reagiert flexibel auf die Änderung der Größe des Webbrowser-Fensters, und

das Layout dehnt sich über die Bildschirmfläche aus oder wird geschrumpft.

� Das komplette Webbrowser-Fenster kann ausgefüllt werden, und es entstehen keine

unschönen Lücken bei extrem hoher Bildschirmauflösung.

� Auch bei einer Vergrößerung der Schrift wächst das Layout mit, weil sich die Seite ausdeh-

nen kann.


13.2 Ein zweispaltiges Layout erstellen

497

13

Als Nachteile einer flexiblen Breite sind zu nennen:

� Eine flexible Breite ist etwas schwieriger zu kontrollieren und nicht so einfach zu realisieren.

� Das Layout kann sich u. U. durch die Flexibilität deutlich negativ auswirken, wenn z. B. der

Bildschirm extrem breit ist und die Textzeilen unendlich lang werden. Auch bei extrem

kleinen Bildschirmen können die Textzeilen so weit zusammengestaucht werden, dass

nur noch einzelne Wörter pro Zeile vorhanden sind. In diesem Fall können Sie eventuell

Abhilfe schaffen mit den CSS-Eigenschaften min-width bzw. max-width.

� Fixe Elemente wie Bilder können aus einem dafür vorgesehenen Bereich bei einer zu klei-

nen Bildschirmgröße herausragen und so anderen Text überdecken. Auch Bilder lassen

sich flexibel gestalten.


Als Erstes werden Sie einige Techniken zu den klassischen zweispaltigen Layouts kennenler-

nen. Bei einem zweispaltigen Layout enthält meistens eine größere Spalte den Hauptinhalt

der Webseite und ein kleinerer Teil entweder die Navigation oder eine weitere Seitenleiste

mit marginalen Informationen und/oder weiteren Links. Bei dem Beispiellayout, wie es in

Abbildung 13.1 zu sehen ist, sei das Hauptaugenmerk auf die beiden Spalten mit dem Haupt-

inhalt und (hier) der Seitenleiste gerichtet.

Abbildung 13.1 Eine von vielen Möglichkeiten für ein klassisches zweispaltiges Layout

13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung

Als erstes Beispiel soll ein zweispaltiges Layout mit einer flexiblen Breite und einer absolu-

ten Positionierung vorgestellt werden. Das Prinzip basiert darauf, einen Teil der Spalte mit

Navigation – <nav>

Hauptinhalt

<main>

<div id=″main″>

oder

Seitenleiste

<aside>

Kopfleiste – <header>

Fußleiste – <footer>



498

position: absolute ganz links (left: 0;) oder rechts (right: 0;) mit einer bestimmen Breite zu

platzieren und in der anderen Spalte einen entsprechend großen Außenabstand mit margin

(margin-left oder margin-right) zu diesem absolut positionierten Element zu verwenden.

Damit sich das Layout an die Fenstergröße flexibel anpassen kann, wird jeweils eine prozen-

tuale Angabe der Breite (width) verwendet.

In Abbildung 13.2 sehen Sie das hier beschriebene Prinzip mit theoretischen Werten. Die

rechte Spalte wurde mit einer absoluten Positionierung aus dem Dokumentenfluss genom-

men und ganz nach rechts (right: 0) mit 25 % Breite platziert. Auf der anderen Seite wurde

dem Hauptinhalt ein Außenabstand (margin-right) nach rechts von dieser Breite (25 %) zuge-

wiesen, und der Hauptinhalt selbst bekommt 75 %, die Differenz von der kompletten Breite

des Fensters (100 %) minus der Seitenleiste (25 %).

Abbildung 13.2 Eine flexible Breite mit absoluter Positionierung

Hierzu ein Beispiel, das Ihnen diese Art der Positionierung in der Praxis demonstriert, des-

sen Endergebnis Sie in Abbildung 13.3 sehen. Im Beispiel wurden außerdem nicht exakt 25 %

und 75 % wie in der Abbildung verwendet, weil noch etwas Raum für das padding bleiben

sollte, damit nicht alles so eng zusammengeklebt wirkt.

<style>…

#sidebar {

position: absolute;

right: 0;

margin: 0;

Navigation – <nav>

margin-right: 25%;width: 75%;

position: absolute;right: 0;width: 25%;





499

13

padding: 2% 2%;

border: 0;

width: 22%;

}

main {

margin: 0;

padding: 2% 2%;

margin-right: 24%;

border: 0;

width: 72%;

}

</style>

…

<header>Zweispalter mit absoluter Positionierung</header>

<nav id="mainnav"><a href="#">Home</a> | … </nav>

<aside id="sidebar">

<h3>Seitenleiste</h3>

<p>Lorem ipsum dolor … </p>

<ul>

<li><a href="#">Link 1</a></li>



</ul>


</aside>

<main>

<article>

<h1>Artikel 1</h1>

<p>Lorem ipsum dolor sit … </p>

</article>

<article>

<h1>Artikel 2</h1>


</article>

</main>

<footer>Fußzeile</footer>

…




500

Abbildung 13.3 Das zweispaltige flexible Layout bei der Darstellung

Das Prinzip funktioniert selbstverständlich auch andersherum, indem Sie die Seitenleiste

absolut auf der linken Seite positionieren und den Außenabstand des Hauptinhalts mit mar-

gin-left entsprechend einhalten. Hierzu müssten Sie den CSS-Code nur an zwei Stellen wie

folgt ändern, um das Ergebnis in Abbildung 13.4 zu erhalten:

…#sidebar {position: absolute;left: 0;margin: 0;padding: 2% 2%;border: 0;width: 22%;

}main {

margin: 0;padding: 2% 2%;margin-left: 24%;border: 0;width: 72%;

}…




501

13

Abbildung 13.4 Mit kleinen Änderungen lässt sich die Anordnung der Spalten auch wechseln.

Ausdehnung festlegen

Bei diesem Beispiel handelt es sich um ein flexibles Layout, d. h., das Layout wird bei einer

Größenänderung des Webbrowser-Fensters gedehnt oder geschrumpft. Wollen Sie die maxi-

male oder minimale Ausdehnung der Spalten festlegen, können Sie hierzu zusätzlich die

CSS-Eigenschaft min-width und/oder max-width verwenden. Mit min-width geben Sie die

minimale und mit max-width die maximale Breite bzw. Ausdehnung an.

Die Nachteile von diesem Layout

Der Nachteil von diesem Layout ist die absolute Positionierung der Seitenleiste. Angenom-

men, Sie entfernen im verwendeten Beispiel Artikel 2, wird die Fußzeile zum Problem, weil

Sie durch die absolute Positionierung der Seitenleiste das Element aus dem Dokumenten-

fluss genommen haben, und daher wird keine Rücksicht mehr auf die Fußleiste genommen,

wie Sie in Abbildung 13.5 sehen.

Wenn Sie sicher sein können, dass der Inhalt des absolut positionierten Elements nicht län-

ger ist als der Inhalt der anderen Spalte daneben, können Sie diese Form des Layouts mit der

absoluten Positionierung verwenden.



502

Abbildung 13.5 Problematisch ist die Form eines Layouts mit absoluter Positionierung, wenn der

Inhalt des absolut positionierten Elements länger ist als der Hauptinhalt.

13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung

Dasselbe Beispiel, wie es eben mit absoluter Positionierung und flexibler Breite erstellt

wurde, können Sie auch mit einer festen Breite realisieren, indem Sie anstelle einer prozen-

tualen Angabe eine pixelgenaue Angabe verwenden. Ansonsten bleibt das Prinzip dasselbe

wie in Abschnitt 13.2.1 vorgestellt – und somit bleibt auch hier das Problem bestehen, wenn

die Seitenleiste länger ist als der Hauptinhalt, dass diese über die Fußleiste hinausragt. Hier

die CSS-Anweisung:

…#sidebar {position: absolute;left: 0;margin: 0;padding: 15px;border: 0;width: 180px;

}main {margin: 0;padding: 15px;margin-left: 190px;border: 0;width: 450px;

}…




503

13

Beim festen Layout mit der Angabe von Pixeln ändert sich die Position der Seitenleiste und

des Hauptinhalts nicht mehr, wenn Sie das Webbrowser-Fenster vergrößern oder verklei-

nern. Die Kopf- und Fußleiste und die Navigation sind in diesem Beispiel noch flexibel. In

Abbildung 13.6 können Sie sehr schön erkennen, wie zwischen dem rechten Webbrowser-

Rand und dem Hauptinhalt eine größere Lücke aufgrund der fixen Breitenangabe von der

Seitenleiste und dem Hauptinhalt entstanden ist. Verkleinern Sie das Webbrowser-Fenster

in der Breite, also kleiner als die Breite von Hauptinhalt plus Seitenleiste, müssen Sie auf der

Webseite gar querscrollen.

Abbildung 13.6 Bei der Verwendung einer festen Breite in Pixeln verändert sich die Breite des

Inhalts nicht mehr, wenn das Webbrowser-Fenster vergrößert bzw. verkleinert wird.

13.2.3 Den (Haupt)inhalt horizontal zentrieren

Wollen Sie einen Inhalt (nicht den Text) in einem Layout mittig in der Horizontalen zentrie-

ren, so funktioniert dies, indem Sie die Breite angeben, u. U. auch in Prozent oder em, und die

äußeren Abstände links und rechts von margin auf auto setzen.

Bezogen auf das Beispiel /Beispiele/Kapitel013/13_2_2/index.html mit dem fixierten zwei-

spaltigen Layout, können Sie folgendermaßen den Hauptinhalt (<main>) horizontal zen-

trieren:

…#wrapper {

width: 660px; /* Gesamtbreite */margin: 0 auto;

}…



504

<div id="wrapper"><main>

<article><h1>Artikel 1</h1><p> … </p>

</article><article><h1>Artikel 2</h1><p> … </p>

</article></main></div>

…


Hier haben Sie im ID-Selektor wrapper die Größe der verfügbaren Breite für den Hauptinhalt

angegeben. Hierbei wurde neben der Breite des Hauptinhalts auch die Seitenleiste berück-

sichtigt. Dann wurden mit der margin-Kurzschreibweise die linke und rechte Seite auf auto

und die obere und untere Seite auf 0 gesetzt. Zu guter Letzt haben Sie den ID-Selektor noch in

einem div-Element verwendet und den Hauptinhalt (hier: <main>…</main>) darin einge-

schlossen. Jetzt »wandert« der Hauptinhalt horizontal mittig mit, wenn das Webbrowser-

Fenster vergrößert oder verkleinert wird. Das Verkleinern sollte nur bis zu einer gewissen

Breite erfolgen. Das Ergebnis sehen Sie in Abbildung 13.7.

Diese Art des horizontalen Zentrierens funktioniert auch in anderen Beispielen und nicht

nur wie hier beim Hauptinhalt von festen zweispaltigen Layouts.

In diesem Beispiel hätten Sie eine feste bzw. teilweise flexible horizontale Zentrierung auch

ohne das div-Element und den ID-Selektor wrapper mit dem Innenabstand padding realisie-

ren können. Diese Möglichkeit werde ich Ihnen nicht vorenthalten:

…main {

margin: 0;padding: 1% 10%;margin-left: 190px;border: 0;width: 450px;

}…




505

13

Abbildung 13.7 Hier wurde der Hauptinhalt zwischen <main> und </main> horizontal zentriert.

Damit haben Sie einen flexiblen Innenabstand rechts und links vom Hauptinhalt auf 10 %

gestellt. Mit einer Angabe von Pixeln könnten Sie auch einen fixen Innenabstand verwenden.

13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen

Auch mit einem float der beiden Spalten lässt sich ein flexibles Layout erstellen. Im Gegen-

satz zum absolut positionierten flexiblen Layout haben Sie das Problem mit der Fußzeile

nicht mehr, wenn z. B. die Seitenleiste länger ist als der Hauptinhalt. Voraussetzung hierfür

ist, dass Sie hinter den gefloateten Inhalten den Bereich mit clear wieder aufheben, da Ele-

mente mit float aus dem Dokumentenfluss herausgenommen werden.

Hierzu die CSS-Anweisungen für ein zweispaltiges flexibles Layout mit float. Den HTML-

Code können Sie sich sparen, weil sich gegenüber den Beispielen zuvor nichts geändert hat.

Sie gestalten das ganze Layout lediglich mit CSS.

…#sidebar {float: right;margin: 0;padding: 2% 2%;border: 0;width: 22%;

} /* Breite 22% + padding x 2 = 26% */main {float: right;



506

padding: 2% 2%;margin: 0;border: 0;width: 70%;

} /* Breite 70% + padding x 2 = 74% */.clear { clear: both; }

…


Zuerst richten Sie die Seitenleiste mit float: right ein, damit diese rechts bleibt. Die Breite

beträgt insgesamt 26 %, was sich aus den 22 % von width und den 2 × 2 % Außenabständen in

padding rechts und links ergibt. Sie wissen noch, dass Sie bei einer Box mit float eine Breite

angeben müssen.

Auch den Hauptinhalt ordnen Sie so weit rechts wie möglich an und verwenden float:right. Die Breite beträgt insgesamt 74 %, was sich aus width (70 %) und den beiden äußeren

padding-Abständen rechts und links (2 × 2 %) ergibt. Insgesamt beträgt die Breite des Zwei-

spalters mit float somit 100 %. Bei einer Breite von mehr als 74 % würde der Hauptinhalt

nach unten wegrutschen.

Damit die Fußzeile nicht zur Navigation hochrutscht, weil die Seitenleiste und der Haupt-

inhalt mit float aus dem Dokumentenfluss genommen wurden, wird ein Klassenselektor

erstellt, den Sie in der Fußzeile mit class="clear" verwenden können:

<footer class="clear">Fußzeile</footer>

Das Endergebnis des Zweispalters mit float sehen Sie in Abbildung 13.8.

Abbildung 13.8 Ein vollständig flexibler Zweispalter mit »float«



507

13

Wollen Sie die Ausrichtung ändern, sodass sich die Seitenleiste auf der linken Seite befindet

und der Hauptinhalt rechts, müssen Sie lediglich die float-Ausrichtung von right auf left

setzen.

13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen

Gerade bei flexiblen Layouts kann der Vorteil schnell zum Nachteil werden, wenn der Inhalt

der Seite abhängig von der Breite des Bildschirms zu weit auseinandergedehnt oder

geschrumpft wird. Ist eine Textzeile in einem Absatztext zu kurz oder zu lang, leidet der

Lesefluss darunter. Daher sollten die Textzeilen weder zu lang noch zu kurz sein. Was opti-

mal ist, hängt auch von der Schriftgröße ab. Ein guter Richtwert sind 50 bis 70 Zeichen pro

Zeile oder, wie es in der klassischen Buchtypografie gerne verwendet wird, acht bis zwölf

Wörter.

CSS bietet die Eigenschaften min-width und max-width an, um die Ausdehnung oder das

Schrumpfen einzuschränken. Bezogen auf das Beispiel /Beispiele/Kapitel013/13_2_4/index

.html, könnten Sie z. B. folgendermaßen eine sinnvolle Begrenzung über den Inhalt ziehen:

…#wrapper {width: 100%;min-width: 720px;max-width: 60em;

}…<body><div id="wrapper"><header>Zweispalter mit float</header><nav id="mainnav"> … <nav><aside id="sidebar"> … </aside><main> … </main><footer class="clear">Fußzeile</footer>

</div></body>

…


Hier haben Sie einen Wrapper auf 100 % eingerichtet. Mit min-width haben Sie die minimale

Breite auf 720 Pixel festgelegt. Das Layout wird höchstens auf 720 Pixel schrumpfen. Wenn

das Webbrowser-Fenster trotzdem kleiner als 720 Pixel ist, wird ein horizontaler Scrollbal-

ken sichtbar, wie Sie es in Abbildung 13.9 sehen. Die maximale Breite mit max-width haben Sie

mit der Einheit em an die Schriftgröße gekoppelt und auf 60em gestellt. Somit wird der Inhalt

nicht breiter als 60em, und Sie verhindern damit, dass der Text schlechter lesbar wird. 60em



508

sind meistens 960 Pixel, wenn die Basisschriftgröße des Webbrowsers 16 Pixel ist (60 × 16 =

960). Eine Umrechnungstabelle dazu finden Sie auf http://pxtoem.com.

Abbildung 13.9 Dank »min-width« gibt es eine Grenze, ab der das zweispaltige Layout nicht mehr

schrumpft.

Abbildung 13.10 Auch mit »max-width« lässt sich eine gewisse Grenze einhalten, ab der sich das

zweispaltige Layout nicht mehr weiter ausdehnt.



509

13

Höhe einschränken

Auch wenn es in der Praxis nicht so häufig verwendet wird, es gibt noch die CSS-Eigenschaf-

ten min-height und max-height, mit denen Sie die minimale und maximale Höhe von Boxen

angeben können.

Auch hier gilt wieder, dass diese Einschränkung der minimalen und maximalen Breite und

Höhe nicht nur auf das ganze Layout beschränkt ist. Sie können diese CSS-Eigenschaften

auch auf einzelne HTML-Elemente anwenden.

13.2.6 Zweispaltiges festes Layout mit »float« erstellen

Es ist möglich, ein zweispaltiges festes Layout mit float in Pixeln statt prozentualer Werte zu

realisieren. In der Praxis können Sie dies wie folgt notieren:

…

#sidebar {

float: left;

margin: 0;

padding: 5px 5px;border: 0;

width: 200px;}

main {

float: left;

padding: 5px 5px;margin: 0;

border: 0;

width: 500px;}

.clear { clear: both; }

…


Hier wurden die Angaben von Prozent in Pixel geändert, sodass die beiden Spalten eine feste

Breite von insgesamt 720 Pixeln haben. Damit außerdem der Hauptinhalt unter 720 Pixel

nicht unterhalb der Seitenleiste rutscht, was durchaus gewollt sein kann, wurde hier ein div-

Element als Wrapper mit min-width und max-width eingesetzt, wie es bereits im Beispiel /Bei-

spiele/Kapitel013/13_2_5/index.html verwendet wurde, wo ausführlicher auf die minimale

und maximale Breite eines Layouts eingegangen wurde.



510

In der Praxis ist es einfacher und empfehlenswerter, die Angaben in Prozent zu machen und

die Einschränkungen mit min-width und max-width (siehe Abschnitt 13.2.5, »Minimale und

maximale Breite bei flexiblen Layouts einstellen«) zu regeln.

13.2.7 Zweispaltiges Layout mit »display: table« erstellen

Eine weitere interessante Lösung, ein zweispaltiges Layout zu erstellen, ist mit der CSS-

Eigenschaft display und dem Wert table. Dies ist eine CSS-Variante, um Tabellen zu erstel-

len, und wird vom Internet Explorer ab Version 8 verstanden. Den einzelnen Spalten können

Sie ebenfalls die Eigenschaft display und den Wert table-cell zuweisen. Der Wert table-cell

stellt so viel wie das HTML-Element <td> dar.

Tabellen zum Layouten sind doch veraltet?

Es wurde bereits erwähnt, dass Sie das HTML-Tag <table> nicht mehr für das Layout von

Webseiten verwenden sollten. Und um es gleich richtigzustellen, Sie tun es hier nicht mit

dem HTML-Tag <table>, sondern Sie erstellen eine Tabelle mit der CSS-Eigenschaft display.

Es gibt noch weitere Werte, die Sie display im Zusammenhang mit CSS-Tabellen zuweisen

und verwenden können. So könnten Sie z. B. mit table-row das Element als Tabellenzeile (wie

<tr>) umdefinieren. Auf die einzelnen Eigenschaften von display wird hier nicht näher ein-

gegangen. In diesem Beispiel reicht table-cell aus.

Was macht »display«?

Im Buch sind Sie schon des Öfteren über display gestolpert und werden das ein oder andere

Mal wieder diese CSS-Eigenschaft verwenden. Mit dieser Eigenschaft können Sie das Verhal-

ten von HTML-Elementen beim Rendern im Webbrowser verändern bzw. umdefinieren. So

können praktisch Inline-Elemente in Block-Elemente oder Flow-Elemente umgewandelt wer-

den. Im Beispiel mit display: table wird das Element beim Rendern als Tabelle betrachtet

und verhält sich dann, grob gesagt, wie ein <table>-Element. Eine Übersicht über displayund die verschiedenen Werte finden Sie in Abschnitt 13.6, »Verhalten von HTML-Elementen

mit »display« ändern«.

Hierzu das zweispaltige Layout, das mit dem CSS-Tabellenlayout erstellt wurde:

…

#sidebar {

margin: 0;

padding: 5px 5px;

border: 0;

width: 180px;



511

13

display: table-cell;}

main {

padding: 5px 5px;

margin: 0;

border: 0;

display: table-cell;}

#wrapper {

display: table;min-width: 720px;

max-width: 60em;

}

…

<header>Zweispalter mit display: table</header>

<nav id="mainnav"><a href="#">Home</a> … </nav>

<div id="wrapper"><aside id="sidebar"> … </aside>

<main>

<article> … </article>

<article> … </article>

</main>

</div><footer>Fußzeile</footer>

…


Hier wurde ein CSS-Tabellenlayout mit dem ID-Selektor wrapper mit display: table erstellt.

Im HTML-Code verwenden Sie ein div-Element und stecken dazwischen die Elemente, die Sie

als Tabelle behandeln wollen. Hier sind es die Elemente <aside> mit dem Klassenselektor

sidebar und das main-Element, das Sie mit dem entsprechenden Typselektor ausgewählt

haben. Als Funktion im Tabellenlayout setzen Sie für beide Elemente über deren Selektoren

die CSS-Eigenschaft display auf table-cell, sodass die beiden Elemente jetzt die Daten in der

Tabelle sind. Die Tabellenzeile müssen Sie nicht angeben.

Im Beispiel wurde für die Seitenleiste eine feste Größe verwendet und für den Hauptinhalt

keine. Bei der festen Größe haben Sie den Vorteil, dass die Seitenleiste gleich breit bleibt, und

der Hauptinhalt nimmt den Rest des Platzes in der Tabellenzeile daneben ein. Damit das

Auseinanderdehnen oder Schrumpfen dieses Bereiches auf ein gewisses Maß eingeschränkt

wird, werden in der Tabelle im ID-Selektor wrapper min-width und max-width gesetzt.



512

Abbildung 13.11 Das Layout mit CSS-Tabellen im Einsatz

13.3 Ein dreispaltiges Layout erstellen

Ebenfalls im Web häufiger anzutreffen sind dreispaltige Layouts, wie Sie in Abbildung 13.12

sehen. Eine zusätzliche dritte Spalte kann verwendet werden, um dort etwa die Hauptnaviga-

tion, weitere Informationen oder Sonstiges aufzunehmen. In den nächsten Abschnitten wer-

den Sie einige Techniken kennenlernen, mit denen Sie solche dreispaltigen Layouts mit CSS

umsetzen.

Abbildung 13.12 Eine mögliche und sinnvolle Anordnung eines dreispaltigen Layouts

Navigation<nav>

Seitenleiste<aside>

Hauptbereich<main>




Auf einen Blick

Auf einen Blick

1 Einführung in das HTML5-Universum .......................................................................... 29

2 Grundlegender Aufbau von HTML(-Dokumenten) .................................................. 55

3 Die Kopfdaten eines HTML-Dokuments ...................................................................... 71

4 Der sichtbare Bereich eines HTML-Dokuments ........................................................ 101

5 Tabellen und Hyperlinks ................................................................................................... 177

6 Grafiken und Multimedia ................................................................................................. 211

7 HTML-Formulare und interaktive Elemente .............................................................. 261

8 Einführung in Cascading Stylesheets (CSS) ................................................................ 307

9 Die Selektoren von CSS ..................................................................................................... 327

10 Die Vererbung und die Kaskade ..................................................................................... 381

11 Das Box-Modell von CSS ................................................................................................... 409

12 CSS-Positionierung ............................................................................................................. 451

13 Das Layout mit CSS gestalten ......................................................................................... 495

14 Stylen mit CSS ...................................................................................................................... 607

15 Testen und Organisieren .................................................................................................. 689

16 Eine kurze Einführung in JavaScript ............................................................................. 713

17 Objekte in JavaScript ......................................................................................................... 757

18 HTML DOM und DOM-Manipulation ........................................................................... 793

19 Einführung in die HTML5-JavaScript-APIs .................................................................. 859

20 Eine Einführung in Ajax und jQuery ............................................................................. 937

21 Fertige CSS-Frameworks ................................................................................................... 993


Inhalt

5

Inhalt

Vorwort .................................................................................................................................................................. 25

1 Einführung in das HTML5-Universum 29

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

1.2 Die verschiedenen Typen von Webseiten ................................................................................ 30

1.2.1 Webpräsenz – die klassische Homepage ..................................................................... 31

1.2.2 Ein Blog – das Tagebuch im Internet ............................................................................ 31

1.2.3 Webshop – Geschäfte ohne Öffnungszeiten ............................................................. 33

1.2.4 Webplattform – sich ein eigenes soziales Netzwerk bauen ................................. 34

1.2.5 Rich Internet Application (RIA) ........................................................................................ 34

1.3 Dynamische und statische Webseiten ...................................................................................... 35

1.3.1 Statische Webseiten ........................................................................................................... 35

1.3.2 Dynamische Webseiten ..................................................................................................... 37

1.4 Sprachen für die Gestaltung und Entwicklung im Web .................................................... 39

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

1.4.2 HTML – die textbasierte Hypertext-Auszeichnungssprache ................................ 39

1.4.3 CSS – die Gestaltungssprache Cascading Style Sheets ........................................... 41

1.4.4 JavaScript – die clientseitige Skriptsprache des Webbrowsers ............................ 42

1.4.5 Die serverseitigen Skriptsprachen und Datenbanken ............................................. 43

1.5 Was brauche ich, um hier anzufangen? ................................................................................... 43

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

1.5.2 Webbrowser für die Anzeige der Webseiten .............................................................. 44

1.5.3 Cross-Browser-Tests – wie sieht das bei den anderen aus? .................................. 45

1.5.4 Schritt für Schritt: Webseite erstellen und im Webbrowser betrachten .......... 47

1.5.5 Geschriebenes HTML überprüfen .................................................................................. 50

1.5.6 Gute Gründe, den HTML-Code zu validieren .............................................................. 53

1.6 Verwendete Konventionen im Buch .......................................................................................... 54

1.7 Zusammenfassung ............................................................................................................................. 54


Inhalt

6

2 Grundlegender Aufbau von HTML(-Dokumenten) 55

2.1 Syntax und Aufbau von HTML(-Dokumenten) ...................................................................... 55

2.1.1 Wie wird in HTML ein Dokument strukturiert? ......................................................... 55

2.1.2 Baumstruktur mit dem DOM-Inspektor betrachten ................................................ 58

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

2.1.4 HTML-Elemente verschachteln und die hierarchische Struktur .......................... 59

2.1.5 Falsche Verschachtelung von HTML-Elementen vermeiden ................................. 60

2.1.6 Das Ende-Tag eines HTML-Elements weglassen? ..................................................... 62

2.1.7 Allein stehende HTML-Tags ohne Ende-Tag ............................................................... 63

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

2.1.9 Kommentare in HTML-Dokumenten verwenden ..................................................... 65

2.2 Ein einfaches HTML-Dokument-Grundgerüst ........................................................................ 65

2.2.1 Der HTML5-Dokumenttyp <!doctype> ......................................................................... 66

2.2.2 Die alten <!doctype>-Deklarationen ............................................................................. 67

2.2.3 Der Anfang und das Ende eines HTML-Dokuments mit <html> ......................... 67

2.2.4 <head> – der Kopf eines HTML-Dokuments ............................................................... 68

2.2.5 <body> – der sichtbare Bereich eines HTML-Dokuments ...................................... 69


3 Die Kopfdaten eines HTML-Dokuments 71

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

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

3.3 Exkurs: Namenskonvention und Referenzierung ................................................................ 74

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

3.3.2 Gültige Verzeichnisnamen und sinnvolle Verzeichnisstrukturen ....................... 75

3.3.3 Referenz auf eine Datenquelle notieren ...................................................................... 76

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

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

3.5 Beziehung zu einem externen Dokument mit <link> ........................................................ 81

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

3.6 Dokumentglobale CSS-Stile mit <style> notieren ................................................................ 85

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

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

3.7 Skripte in Webseiten einbinden mit <script> ......................................................................... 88

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


Inhalt

7

3.8 Metainformationen für das Dokument mit <meta> .......................................................... 90

3.8.1 Die gebräuchlichsten Metaangaben ............................................................................. 91

3.8.2 Nützliche Metadaten für einen Webcrawler angeben ........................................... 93

3.8.3 Hilfreiche Metadaten für Suchmaschinen .................................................................. 94

3.8.4 Nützliche Metadaten für den Webbrowser ................................................................ 96

3.8.5 Allgemeine Metadaten verwenden ............................................................................... 97

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


4 Der sichtbare Bereich eines HTML-Dokuments 101

4.1 HTML-Elemente für Seitenstrukturierung ............................................................................... 101

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

4.1.2 Die neuen Sektionselemente von HTML ...................................................................... 103

4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen .......................... 103

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

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

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

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

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

4.1.9 Kontaktinformationen mit <address> kennzeichnen ............................................. 118

4.2 HTML-Elemente für Textstrukturierung ................................................................................... 119

4.2.1 Textabsätze mit <p> hinzufügen ................................................................................... 120

4.2.2 Zeilenumbruch erzwingen mit <br> ............................................................................. 122

4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen ..................................... 123

4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit » « ....................... 124

4.2.5 Thematische Trennung mit <hr> hinzufügen ........................................................... 124

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> ........... 130

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 umdrehen .................................................. 133

4.2.13 Nummerierung einer geordneten Liste ändern ........................................................ 134

4.2.14 Listen ineinander verschachteln ..................................................................................... 135

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

4.3 Das semantische HTML verwenden ........................................................................................... 139

4.3.1 Strukturloses HTML ............................................................................................................ 140


Inhalt

8

4.3.2 Generische Strukturierung mit <div> ............................................................................ 141

4.3.3 Semantische Strukturierung mit den neuen Elementen in HTML5 .................... 145

4.3.4 Wem nützen diese semantischen HTML5-Elemente was? .................................... 147

4.4 HTML-Elemente für Textauszeichnungen ................................................................................ 148

4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen ...................................... 150

4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren ........................................ 150

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

4.4.4 Tastatureingabe mit <kdb> und Programmausgabe mit <samp> ..................... 154

4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen ........................................... 155

4.4.6 Text als Variable mit <var> auszeichnen ..................................................................... 155

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

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> ................................................... 160

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 ........................................................ 168

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

4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen ................. 170

4.5 Exkurs: Zeichencodierung ............................................................................................................... 170

4.5.1 Von Bytes zur Zeichencodierung .................................................................................... 171

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 ............................................................................................................... 173


5 Tabellen und Hyperlinks 177

5.1 Daten in einer Tabelle strukturieren .......................................................................................... 177

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

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

5.1.3 HTML-Attribute für die Tabellenelemente .................................................................. 183

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

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

5.2 »Elektronische« Verweise aka Hyperlinks mit <a> .............................................................. 189

5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen ............ 190


Inhalt

9

5.2.2 Tabellen beschriften mit <caption> bzw. <figcaption> .......................................... 193

5.2.3 Links zu anderen Webseiten einfügen ......................................................................... 196

5.2.4 Links mit dem »target«-Attribut in einem neuen Fenster öffnen ....................... 197

5.2.5 E-Mail-Links mit »href=mailto:…« .................................................................................. 198

5.2.6 Links zu anderen Inhaltstypen setzen .......................................................................... 200

5.2.7 Downloadlinks mit dem »download«-Attribut hinzufügen ................................. 203

5.2.8 Links zu bestimmten Teilen einer Webseite setzen ................................................. 205

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


6 Grafiken und Multimedia 211

6.1 Bilder mit <img> einbinden ........................................................................................................... 212

6.1.1 Bilder einem HTML-Dokument hinzufügen ............................................................... 212

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

6.1.3 Bilder beschriften mit <figure> und <figcaption> .................................................... 220

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

6.2 Verweissensitive Grafiken aka Image-Maps erstellen ...................................................... 222

6.3 Das passende Bild mit <picture> laden ..................................................................................... 228

6.3.1 HTML-Attribute von <source> ......................................................................................... 230

6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset« .......................................... 231

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

und »sizes« ............................................................................................................................. 233

6.4 Ein Icon für die Webseite hinzufügen (Favicon) ................................................................... 234

6.5 Vektorgrafiken in HTML-Dokumenten verwenden ............................................................ 235

6.5.1 SVG als Grafikreferenz hinzufügen mit <img> .......................................................... 236

6.5.2 SVG direkt in die Webseite einbetten mit <svg> ...................................................... 237

6.5.3 SVG-Tags für die Vektorgrafiken .................................................................................... 238

6.5.4 Übersicht über die grafischen Elemente von SVG .................................................... 238

6.5.5 Weitere Hinweise zur Verwendung von SVG ............................................................. 240

6.5.6 Mathematische Formeln mit MathML ......................................................................... 241

6.6 Grafiken zeichnen mit <canvas> ................................................................................................. 242

6.7 Videos mit dem HTML-Element <video> abspielen ............................................................ 244

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

6.7.2 Dem Video Untertitel mit <track> hinzufügen ......................................................... 247

6.7.3 Videos über YouTube abspielen lassen ........................................................................ 250


Inhalt

10

6.8 Audios mit dem HTML-Element <audio> abspielen ............................................................ 251

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

6.9 Andere aktive Inhalte einbinden ................................................................................................. 254

6.9.1 Das HTML-Element <embed> .......................................................................................... 254

6.9.2 Das HTML-Element <object> ........................................................................................... 255

6.9.3 Das HTML-Element <iframe> ........................................................................................... 256


7 HTML-Formulare und interaktive Elemente 261

7.1 Einen Bereich für Formulare definieren .................................................................................... 263

7.2 Die HTML-Eingabefelder für Formulare .................................................................................... 264

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

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

7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea> ................................................... 266

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

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

7.2.6 Ein Textlabel mit <label> hinzufügen ........................................................................... 270

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

7.2.8 Felder für Datei-Upload mit <input type="file"> verwenden ................................ 271

7.2.9 Verschiedene Schaltflächen im Überblick ................................................................... 272

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

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

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

7.3 Die neuen HTML5-Eingabefelder mit <input> ....................................................................... 276

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

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

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

7.3.4 Eingabefelder für Datum und Uhrzeit .......................................................................... 279

7.3.5 Eingabefelder für den Monat und die Woche ............................................................ 279

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

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

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

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

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

7.3.11 Ein Eingabefeld für Zahlen eines bestimmten Bereiches ....................................... 282

7.3.12 Ausgabe von Werten und Berechnungen mit <output> ........................................ 282


Inhalt

11

7.4 Die neuen HTML5-Attribute für Eingabefelder ..................................................................... 283

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

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

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

7.4.4 Minimale und maximale Werte und die Schrittweite festlegen ......................... 285

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

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

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

7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required« ........................ 286

7.4.9 Fehlermeldung von Eingabefeldern (steuern) ........................................................... 286

7.5 Weitere nützliche Helferlein für Eingabefelder .................................................................... 289

7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren ............... 289

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

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

7.5.4 Formularelemente gruppieren mit <fieldset> und <legend> .............................. 292

7.5.5 Fortschrittsanzeige mit <progress> .............................................................................. 293

7.5.6 Werte visualisieren mit <meter> ................................................................................... 293

7.6 Formulardaten mit PHP versenden ............................................................................................ 294

7.6.1 So kommen die Daten vom Webbrowser … ................................................................ 295

7.6.2 Die POST-Methode .............................................................................................................. 296

7.6.3 Die GET-Methode ................................................................................................................ 297

7.6.4 … zum Webserver mit einem PHP-Skript ..................................................................... 298

7.7 Interaktive HTML-Elemente ........................................................................................................... 301

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

7.7.2 Eine Dialogbox mit <dialog> ............................................................................................ 302

7.7.3 Eine Menüleiste mit <menu> und <menuitem> erzeugen ................................... 303


8 Einführung in Cascading Stylesheets (CSS) 307

8.1 Die Versionen von CSS ...................................................................................................................... 308

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

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

8.1.3 Die neueste Version mit CSS Level 3 (CSS3) ................................................................ 309

8.2 Das grundlegende Anwendungsprinzip von CSS ................................................................. 309

8.2.1 Aufbau eines Selektors in CSS ......................................................................................... 312

8.2.2 Die Deklaration eines Selektors ...................................................................................... 313


Inhalt

12

8.2.3 Kommentare für CSS-Code verwenden ........................................................................ 313

8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code ....................................... 314

8.3 Einbindungsmöglichkeiten von CSS in HTML ......................................................................... 315

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

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

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

8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen

CSS-Datei(en) ......................................................................................................................... 319

8.3.5 Alternative Stylesheets ...................................................................................................... 320

8.3.6 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden .... 323

8.3.7 Medienspezifische Stylesheets für bestimmte Ausgabegeräte ........................... 324

8.3.8 Medienspezifische Stylesheets mit CSS3 ..................................................................... 326


9 Die Selektoren von CSS 327

9.1 Die einfachen Selektoren von CSS ............................................................................................... 329

9.1.1 HTML-Elemente mit dem Typselektor ansprechen .................................................. 329

9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen ................... 332

9.1.3 Universalselektor – alle Elemente in einem Dokument ansprechen ................. 339

9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen ........... 342

9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert ................. 344

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

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

9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS ................................................ 356

9.1.9 Sprach-Pseudoklasse »:lang()« und die Negations-Pseudoklasse »:not()« ....... 362

9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente ...................... 363

9.2 Kombinatoren – die Selektoren verketten .............................................................................. 366

9.2.1 Der Nachfahrenselektor (E1 E2) ...................................................................................... 368

9.2.2 Der Kindselektor (E1 > E2) ................................................................................................. 371

9.2.3 Der Nachbarselektor (E1 + E2) ......................................................................................... 372

9.2.4 Der Geschwisterselektor (E1 ~ E2) .................................................................................. 374

9.3 Performance verschiedener Selektoren .................................................................................... 376



Inhalt

13

10 Die Vererbung und die Kaskade 381

10.1 Das Prinzip der Vererbung in CSS ................................................................................................ 381

10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften .................................. 386

10.1.2 Es wird nicht alles weitervererbt .................................................................................... 386

10.1.3 Vererbung erzwingen mit »inherit« .............................................................................. 386

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

10.2 Das Regelsystem der Kaskade verstehen ................................................................................ 388

10.2.1 Die Herkunft eines Stylesheets ....................................................................................... 389

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

10.2.3 Sortierung nach Wichtigkeit und Herkunft ................................................................ 390

10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität) ......................................... 392

10.2.5 Zusammenfassung zum Regelsystem der Kaskade ................................................. 396

10.3 Exkurs: Werte an CSS-Eigenschaften übergeben ................................................................. 397

10.3.1 Die verschiedenen Maßeinheiten in CSS ..................................................................... 397

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

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

10.3.4 CSS3-Wertetypen ................................................................................................................ 405

10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben .............................. 406


11 Das Box-Modell von CSS 409

11.1 Das klassische Box-Modell von CSS ............................................................................................ 410

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

11.1.2 Den Innenabstand mit »padding« angeben ............................................................... 412

11.1.3 Den Rahmen mit »border« erstellen ............................................................................. 413

11.1.4 Den Außenabstand mit »margin« einrichten ............................................................ 414

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

11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln .............................................. 419

11.2 Das neue alternative Box-Modell von CSS3 ........................................................................... 421

11.2.1 Das neue Box-Modell »box-sizing« verwenden ........................................................ 423

11.2.2 Ist das neue Box-Modell schon alltagstauglich? ....................................................... 423

11.2.3 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) ................................................ 427

11.3 Boxen gestalten .................................................................................................................................. 429

11.3.1 Einen Rahmen mit der Eigenschaft »border« hinzufügen und gestalten ........ 429

11.3.2 Hintergrundfarbe mit »background-color« festlegen ............................................ 433

11.3.3 Hintergrundgrafiken verwenden ................................................................................... 434


Inhalt

14

11.3.4 Die Boxen durchsichtig gestalten (CSS3) ..................................................................... 441

11.3.5 Einen Farbverlauf hinzufügen (CSS3) ............................................................................ 443

11.3.6 Einen Schlagschatten mit der Eigenschaft »box-shadow« hinzufügen ............ 446

11.3.7 Runde Ecken mit der CSS3-Eigenschaft »border-radius« hinzufügen ............... 447


12 CSS-Positionierung 451

12.1 Positionierung mit der CSS-Eigenschaft »position« ............................................................ 451

12.1.1 Die statische 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«) ...................................................... 454

12.1.4 Die absolute Positionierung (»position: absolute«) ................................................. 457

12.1.5 Die fixe Positionierung (»position: fixed«) .................................................................. 459

12.2 Übereinanderstapeln regeln mit »z-index« ............................................................................ 462

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

12.3.1 Elemente mit »float« nebeneinander anordnen ....................................................... 474

12.3.2 Umfließen der Elemente mit »clear« aufheben ........................................................ 477

12.3.3 Probleme beim Eltern-Element von gefloateten Elementen ................................ 481

12.3.4 Weitere essenzielle Informationen rund um »float« ............................................... 484

12.4 Die neuen flexiblen Boxen von CSS3 .......................................................................................... 486

12.4.1 Die Flexbox ausrichten ....................................................................................................... 486

12.4.2 Flexibilität der Flexbox einstellen .................................................................................. 489

12.4.3 Flexible Boxen mit fester Höhe ....................................................................................... 491

12.4.4 Die Reihenfolge der Boxen bestimmen ........................................................................ 492


13 Das Layout mit CSS gestalten 495

13.1 Exkurs: Was bedeutet feste und flexible Breite? .................................................................. 496

13.1.1 Ein Layout mit fester Breite .............................................................................................. 496

13.1.2 Ein Layout mit flexibler Breite ......................................................................................... 496

13.2 Ein zweispaltiges Layout erstellen .............................................................................................. 497

13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung .......... 497

13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung .............. 502

13.2.3 Den (Haupt)inhalt horizontal zentrieren ..................................................................... 503


Inhalt

15

13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen ............................................... 505

13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen ........................ 507

13.2.6 Zweispaltiges festes Layout mit »float« erstellen .................................................... 509

13.2.7 Zweispaltiges Layout mit »display: table« erstellen ................................................ 510

13.3 Ein dreispaltiges Layout erstellen ............................................................................................... 512

13.3.1 Dreispaltiges flexibles Layout mit »float« erstellen ................................................ 513

13.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen ............................... 515

13.3.3 Ungleich lange Spalten einfärben ................................................................................. 517

13.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen ......................... 527

13.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3) .............................................. 528

13.4 Responsive Layouts mit Media Queries erstellen ................................................................ 531

13.4.1 Die Verwendung von Medientypen mit CSS 2 ........................................................... 532

13.4.2 Mächtige Medienabfragen mit den Media Queries von CSS3 ............................. 534

13.4.3 Einbinden und Anwenden von Media Queries .......................................................... 535

13.4.4 Der grundlegende Aufbau von einfachen Media Queries ..................................... 536

13.4.5 Welche Medienmerkmale können abgefragt werden? .......................................... 538

13.4.6 Anwendungsbeispiel .......................................................................................................... 540

13.4.7 Die mobile Navigation anpassen ................................................................................... 554

13.4.8 Bilder reaktionsfähig machen ......................................................................................... 555

13.4.9 Das passende Bild mit <picture> laden ........................................................................ 565

13.4.10 Weitere Anpassungen ........................................................................................................ 567

13.5 Das Layout mit einem Raster (Grid) erstellen ........................................................................ 571

13.5.1 Das Grundprinzip von Rasterlayouts ............................................................................ 572

13.5.2 Eigenes 960-Pixel-Rasterlayout auf 12 Spalten erstellen ...................................... 576

13.5.3 Das erstellte Rasterlayout überprüfen ......................................................................... 579

13.5.4 Layout erstellen einfach gemacht .................................................................................. 579

13.5.5 Das Rasterlayout reaktionsfähig machen ................................................................... 590

13.5.6 Stabilisieren mit »border-box« ....................................................................................... 595

13.5.7 Ein flexibles Raster erstellen ............................................................................................ 597

13.5.8 Fertige Grid-Systeme .......................................................................................................... 598

13.5.9 Fertiges Grid-System integrieren ................................................................................... 599

13.6 Verhalten von HTML-Elementen mit »display« ändern .................................................... 603

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

14 Stylen mit CSS 607

14.1 Textgestaltung mit CSS .................................................................................................................... 607

14.1.1 Schriftarten mit »font-family« auswählen ................................................................. 608


Inhalt

16

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

14.1.3 Symbole mit Iconfonts verwenden ................................................................................ 619

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

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

14.1.6 Kapitälchen mit »font-variant« erstellen .................................................................... 630

14.1.7 Zeilenabstand mit »line-height« definieren ............................................................... 631

14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font« ................................... 633

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

festlegen ................................................................................................................................. 634

14.1.10 Die Textausrichtung mit »text-align« festlegen ....................................................... 635

14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen ...................................... 636

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

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

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

14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen (CSS3) ..................... 641

14.2 Listen mit CSS gestalten ................................................................................................................... 643

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

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

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

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

14.2.5 Navigation und Menüs mit Listen erstellen ................................................................ 647

14.3 Schönere Tabellen mit CSS gestalten ......................................................................................... 653

14.3.1 Tabellen mit fester Breite erstellen ................................................................................ 654

14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten ............................................ 655

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

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

14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells« .................................................... 658

14.3.6 Tabellenbeschriftung mit »caption-side« positionieren ........................................ 660

14.4 Bilder und Grafiken mit CSS gestalten ...................................................................................... 660

14.4.1 Bilder und Grafiken mit »width« und »height« anpassen ..................................... 660

14.4.2 Grafiken mit der CSS-Eigenschaft »clip« beschneiden ............................................ 663

14.4.3 Sprites mit CSS verwenden ............................................................................................... 665

14.4.4 Eine einfache Bildergalerie mit CSS gestalten ........................................................... 667

14.5 Elemente transformieren mit CSS3 ............................................................................................. 671

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

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

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

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

14.5.5 Verschiedene Transformationen kombinieren .......................................................... 675

14.5.6 Es geht auch mit anderen HTML-Elementen .............................................................. 676


Inhalt

17

14.6 Übergänge mit CSS3 erstellen ...................................................................................................... 677

14.7 HTML-Formulare mit CSS stylen .................................................................................................. 678

14.7.1 Ein HTML-Formular ordentlich strukturieren ............................................................. 679

14.7.2 Ausrichten der Formularelemente mit CSS ................................................................ 682

14.7.3 Gestalten der Formularelemente mit CSS .................................................................. 684


15 Testen und Organisieren 689

15.1 CSS und die Webbrowser ................................................................................................................ 690

15.1.1 Acid-Webbrowser-Test ...................................................................................................... 690

15.1.2 CSS3-Webbrowser-Test ..................................................................................................... 691

15.1.3 CSS3 in der Praxis ................................................................................................................ 692

15.2 Webseiten mit CSS in verschiedenen Größen betrachten ............................................... 692

15.3 Zentrales Stylesheet einrichten ................................................................................................... 695

15.4 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset ............................................ 698

15.5 Normalisierung – die Alternative zum CSS-Reset ................................................................ 699

15.6 Die neuen HTML5-Elemente mit CSS stylen ........................................................................... 700

15.7 Conditional Comments für den alten IE ................................................................................... 703

15.7.1 Webbrowser-Sniffer ........................................................................................................... 704

15.8 Modernizr – Fähigkeiten des Webbrowsers testen ............................................................ 705

15.9 caniuse.com – kann ich das verwenden? ................................................................................. 707

15.10 Entwickler-Tools des Webbrowsers ........................................................................................... 708


16 Eine kurze Einführung in JavaScript 713

16.1 Was ist JavaScript? ............................................................................................................................. 714

16.2 Laufzeitumgebungen für JavaScript .......................................................................................... 716

16.3 JavaScript-Programme schreiben und ausführen ................................................................ 716

16.3.1 JavaScript-Umgebung und Web-Konsole verwenden ............................................ 716

16.3.2 Das »console«-Objekt ......................................................................................................... 718

16.3.3 Den JavaScript-Code mit Anmerkungen kommentieren ....................................... 719


Inhalt

18

16.4 Die Verwendung von Variablen in JavaScript ........................................................................ 720

16.4.1 Konstanten ............................................................................................................................. 722

16.4.2 Strikter Modus mit "use strict" ........................................................................................ 723

16.5 Übersicht über die JavaScript-Datentypen .............................................................................. 723

16.5.1 Number-Datentyp (Zahlen) .............................................................................................. 724

16.5.2 String-Datentyp (Zeichenketten) .................................................................................... 725

16.5.3 Boolean-Datentyp ................................................................................................................ 727

16.5.4 Undefined- und Null-Datentyp ....................................................................................... 727

16.5.5 Objekte .................................................................................................................................... 728

16.5.6 Datentypen konvertieren .................................................................................................. 728

16.6 Bedingte Anweisungen in JavaScript ......................................................................................... 730

16.6.1 true« oder »false«: boolescher Wahrheitswert ......................................................... 731

16.6.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden ................... 732

16.6.3 Die »if«-Verzweigung verwenden .................................................................................. 733

16.6.4 Logische Operatoren ........................................................................................................... 734

16.6.5 Mehrfachverzweigung mit »switch« ............................................................................ 736

16.7 Programmanweisungen mehrmals wiederholen mit Schleifen .................................... 737

16.7.1 Inkrement- und Dekrementoperator ............................................................................ 737

16.7.2 Die kopfgesteuerte »for«-Schleife .................................................................................. 738

16.7.3 Die kopfgesteuerte »while«-Schleife ............................................................................ 740

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

16.7.5 Den Anweisungsblock mit »break« beenden ............................................................. 741

16.7.6 Mit »continue« zum Schleifenanfang springen ........................................................ 741

16.8 Arrays ........................................................................................................................................................ 742

16.8.1 Zugriff auf die einzelnen Elemente in einem Array .................................................. 742

16.8.2 Einem Array neue Elemente hinzufügen ..................................................................... 743

16.8.3 Elemente durchlaufen mit der »for/in«- oder »for/of«-Schleife ......................... 744

16.9 Arithmetische Operatoren zum Rechnen in JavaScript ..................................................... 745

16.10 Eigene Funktionen in JavaScript erstellen ............................................................................... 747

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

definieren ................................................................................................................................ 747

16.10.2 Funktion aufrufen und Funktionsparameter ............................................................. 749

16.10.3 Rückgabewert einer Funktion .......................................................................................... 750

16.10.4 Der Gültigkeitsbereich von Variablen in einer Funktion ......................................... 751

16.10.5 Arrow-Funktionen ................................................................................................................ 752

16.10.6 Rest-Parameter – beliebige Anzahl von Funktionsparametern ........................... 754



Inhalt

19

17 Objekte in JavaScript 757

17.1 Benutzerdefinierte Objekte in JavaScript ................................................................................ 757

17.1.1 Was sind Objekte genau? ................................................................................................. 758

17.1.2 Die Objekt-Eigenschaften von JavaScript .................................................................... 760

17.1.3 Die Methoden von Objekten ............................................................................................ 761

17.1.4 Verschiedene Möglichkeiten, neue Objekte zu erzeugen ...................................... 761

17.1.5 Das Schlüsselwort »this« .................................................................................................. 764

17.2 Vordefinierte Objekte von JavaScript ........................................................................................ 765

17.2.1 Das oberste Objekt »Object« ........................................................................................... 766

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

17.2.3 Array-Objekt .......................................................................................................................... 768

17.2.4 Reguläre Ausdrücke (RegExp-Objekte) ......................................................................... 769

17.2.5 »Function«-Objekt ............................................................................................................... 770

17.2.6 »Date«-Objekt ....................................................................................................................... 770

17.2.7 »Math«-Objekt ..................................................................................................................... 770

17.3 Einbinden von JavaScript in HTML .............................................................................................. 771

17.3.1 »Hallo Web-Browser« – Ausgabe von JavaScripts .................................................... 771

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

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

17.3.4 Ein externes JavaScript mit dem »script«-Element einbinden ............................. 777

17.3.5 Die Ausführung eines JavaScript-Codes ...................................................................... 778

17.3.6 Das »noscript«-Element für JavaScript-Verweigerer ............................................... 779

17.4 Browser-Objekte bzw. Host-Objekte der Laufzeitumgebung ........................................ 780

17.4.1 Ganz oben ist das »window«-Objekt ............................................................................ 781

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

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

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

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


18 HTML DOM und DOM-Manipulation 793

18.1 Einführung in das DOM eines HTML-Dokuments ................................................................ 794

18.2 Das »document«-Objekt ................................................................................................................. 795

18.3 Die Programmierschnittstelle von HTML DOM ..................................................................... 796


Inhalt

20

18.4 Nach bestimmten HTML-Elementen suchen .......................................................................... 797

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

18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen ............................. 799

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

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

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

18.4.6 Weitere Objekt- und Eigenschaftensammlungen .................................................... 805

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

18.5.1 Fallstricke bei der Anwendung von »document.write()« ........................................ 809

18.5.2 Den Inhalt von HTML-Elementen mit »innerHTML« ändern ................................ 809

18.5.3 Den Wert eines HTML-Attributs ändern ...................................................................... 811

18.5.4 Den Style (CSS) eines HTML-Elements ändern ........................................................... 812

18.6 Auf JavaScript-Events reagieren ................................................................................................... 814

18.7 Mit dem Event-Handler die Events behandeln ...................................................................... 815

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

18.7.2 Event-Handler als Eigenschaft eines Objekts einrichten ........................................ 816

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

18.8 Gängige JavaScript-Events in der Übersicht ........................................................................... 819

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

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

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

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

18.8.5 JavaScript-Events für HTML-Formulare ........................................................................ 824

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

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

18.10 Standardaktion von Events unterdrücken ............................................................................... 827

18.11 Der Event-Fluss (Event-Propagation) ......................................................................................... 829

18.11.1 Mehr zur Bubbling-Phase .................................................................................................. 829

18.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen ................................ 831

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

18.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase ........................... 833

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

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

18.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern ................................... 836

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

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

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

18.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen ......................... 845


Inhalt

21

18.12.7 Verschiedene Methoden, um die HTML-Attribute zu manipulieren .................. 846

18.13 HTML-Formulare und JavaScript .................................................................................................. 849

18.13.1 Texteingabefelder mit JavaScript einlesen ................................................................. 849

18.13.2 Auswahllisten mit JavaScript einlesen ......................................................................... 851

18.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen ............................. 852

18.13.4 Schaltflächen mit JavaScript abfangen ........................................................................ 854

18.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern .................................. 855


19 Einführung in die HTML5-JavaScript-APIs 859

19.1 Video- und Audio-Media-API ......................................................................................................... 860

19.1.1 Ein Video mit JavaScript und der Media-API steuern .............................................. 861

19.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern ................................. 864

19.2 Zeichnen mit der Canvas-2D-API ................................................................................................. 866

19.2.1 Auf einem <canvas>-Element zeichnen ...................................................................... 866

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

19.2.3 Bilder mit <canvas> kopieren und manipulieren ...................................................... 870

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

19.2.5 Den »CanvasRenderingContext2D« erweitern ......................................................... 875

19.2.6 Fertige <canvas>-Bibliotheken im Überblick ............................................................. 876

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

19.2.8 Weitere Hinweise zu <canvas> ....................................................................................... 878

19.3 Den Standort ermitteln mit der Geolocation-API ................................................................ 878

19.3.1 Die Geolocation-API in einem HTML-Dokument verwenden ............................... 880

19.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln ................................... 882

19.3.3 Feintuning mit weiteren Optionen der Geolocation-API ....................................... 884

19.3.4 Die Position des Benutzers dauerhaft überwachen ................................................. 886

19.3.5 Die Position des Benutzers auf einer Karte anzeigen .............................................. 887

19.3.6 Eine einfache Navigation vom aktuellen Standort erstellen ................................ 891

19.4 Ziehen und Fallenlassen mit der Drag & Drop-API .............................................................. 892

19.4.1 Ein HTML-Element mit »draggable« ziehbar machen ............................................ 892

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

19.4.3 Mit dem Ziehen von Elementen starten ...................................................................... 894

19.4.4 Die Daten zum Ziehen behandeln ................................................................................. 894

19.4.5 Den Platz zum Fallenlassen festlegen .......................................................................... 895

19.4.6 Die fallen gelassenen Daten verarbeiten .................................................................... 896

19.4.7 Andere Events während des Drag & Drop-Vorgangs behandeln ........................ 896


Inhalt

22

19.4.8 Das komplette Beispiel in der Übersicht ...................................................................... 897

19.4.9 Weitere Hinweise zur Drag & Drop-API ....................................................................... 900

19.5 Offlinedaten zur Verfügung stellen ............................................................................................ 901

19.5.1 Application Cache – das Cache Manifest ..................................................................... 901

19.5.2 Web Storage – Datenbank für Offlineanwendungen ............................................. 906

19.5.3 Weitere Offlinetechnologien im Überblick ................................................................. 910

19.5.4 Die Internetverbindung des Benutzers prüfen .......................................................... 911

19.6 Web Workers – die Helfer im Hintergrund .............................................................................. 912

19.7 Aktualisieren ohne Anfrage mit Server Sent Events ........................................................... 921

19.8 Weitere interessante APIs im Schnelldurchlauf .................................................................... 924

19.8.1 Kommunikation in Echtzeit mit den WebSockets .................................................... 925

19.8.2 Sprach- und Videotelefonie mit WebRTC .................................................................... 927

19.8.3 3D-Grafiken und Spiele mit WebGL ............................................................................... 928

19.8.4 Den kompletten Bildschirm mit der Fullscreen API verwenden ........................... 928

19.8.5 Der Umgang mit lokalen Dateien mit der File API .................................................... 932


20 Eine Einführung in Ajax und jQuery 937

20.1 Eine Einführung in die Ajax-Programmierung ....................................................................... 937

20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung ........................................................ 939

20.1.2 Das »XMLHttpRequest«-Objekt erzeugen ................................................................... 941

20.1.3 Eine Anfrage an den Server stellen ................................................................................ 942

20.1.4 Daten mitsenden ................................................................................................................. 943

20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln .......................................... 944

20.1.6 Die Antwort vom Server weiterverarbeiten ................................................................ 946

20.1.7 Das Ajax-Beispiel bei der Ausführung ........................................................................... 946

20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM ................................................... 947

20.1.9 Das JSON-Datenformat mit Ajax .................................................................................... 953

20.2 Einführung in die JavaScript-Bibliothek jQuery .................................................................... 958

20.2.1 jQuery in das HTML-Dokument einbinden .................................................................. 959

20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery ...................... 960

20.2.3 Die komfortablen jQuery-Selektoren ............................................................................ 961

20.2.4 Die jQuery-Events ................................................................................................................ 964

20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen ............................. 966

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

20.2.7 CSS mit jQuery manipulieren ........................................................................................... 975

20.2.8 Verschiedene jQuery-Effekte und -Animationen ...................................................... 978


Inhalt

23

20.2.9 jQuery und Ajax zusammen verwenden ..................................................................... 987

20.2.10 Weitere jQuery-Plug-ins verwenden ............................................................................. 990

20.2.11 Letzte Hinweise zu jQuery ................................................................................................ 990


21 Fertige CSS-Frameworks 993

21.1 Übersicht über beliebte CSS-Frameworks ............................................................................... 994

21.2 Das Bootstrap-Framework .............................................................................................................. 995

21.2.1 Twitter Bootstrap herunterladen und integrieren ................................................... 995

21.2.2 Das Layout mit dem Bootstrap-Framework erstellen ............................................. 998

21.2.3 Die Komponenten des Bootstrap-Frameworks verwenden .................................. 1011

21.2.4 JavaScript-Erweiterungen von Bootstrap einbauen ................................................ 1019

21.2.5 Bootstrap an die eigenen Bedürfnisse anpassen ...................................................... 1024

21.3 YAML 4 – das CSS-Framework ....................................................................................................... 1024

21.3.1 Das nackte HTML-Grundgerüst ...................................................................................... 1025

21.3.2 YAML dem Projekt hinzufügen ........................................................................................ 1027

21.3.3 Layoutmodul wählen ......................................................................................................... 1029

21.3.4 Aufteilen des Inhalts mit Gridmodulen ....................................................................... 1033

21.3.5 Elemente mit YAML untereinanderstellen .................................................................. 1037

21.3.6 Testen Sie YAML ................................................................................................................... 1040

21.4 Exkurs zu CSS-Präprozessoren ...................................................................................................... 1040

21.4.1 Die Stylesheet-Sprache Less ............................................................................................. 1041

21.4.2 Die Stylesheet-Sprache Sass ............................................................................................ 1045


Anhang 1049

A HTML-Referenz .................................................................................................................................... 1051

B CSS-Referenz ......................................................................................................................................... 1149

C JavaScript- und Browser-Objekte ................................................................................................ 1217

D HTML-/WYSIWYG-/CSS-Editoren ................................................................................................ 1243

Index ....................................................................................................................................................................... 1247


Index

1247

Index

-- -Operator;++-Operator ............................................ 737

:hover

mobile Geräte ............................................................ 353

! (logisches NICHT) ........................................................ 735

&& (logisches UND) ..................................................... 734

> ..................................................................................... 174

< ....................................................................................... 174

..................................................................... 124, 180

" ................................................................................ 174

.................................................................................. 123

++-Operator ..................................................................... 737

 .......................................................................... 1053

|| (logisches ODER) ........................................................ 734

960-Pixel-Rasterlayout ............................................... 576

A

Absatztext <p> ............................................................... 120

Acid-Webbrowser-Test ................................................ 690

Ajax ..................................................................................... 937

Callback-Funktion .................................................... 944

DOM ............................................................................... 947

HTTP-Request ............................................................. 942

HTTP-Response .......................................................... 946

jQuery ............................................................................ 987

JSON ............................................................................... 953

onreadystatechange ..................................... 944, 950

open() ............................................................................ 942

readyState ................................................................... 944

responseText .............................................................. 946

responseXML .................................................... 946, 951

send() ............................................................................. 942

status ............................................................................. 946

Status ermitteln ........................................................ 944

XMLHttpRequest-Objekt ....................................... 941

alert() .................................................................................. 773

Allein stehende Tags ...................................................... 63

Animationen

jQuery ............................................................................ 978

Anker .................................................................................. 205

#ankername .................................................................... 205

Application Cache ......................................................... 901

Cache Manifest .......................................................... 902

Applikationsserver ......................................................... 38

Array-Objekt ................................................................. 1228

ASCII-Codierung ............................................................ 171

Attribute

required ........................................................................ 288

Audios

abspielen ...................................................................... 251

Aufzählungspunkte ..................................................... 132

Autorenstylesheet ........................................................ 389

Autovervollständigung .............................................. 284

B

background-position ................................................... 666

background-size ............................................................ 561

Benannte Farben ........................................................... 400

Benutzerstylesheet ...................................................... 389

Beschreibungsliste � Definitionsliste

Bilder

beschneiden ................................................................ 663

beschriften .................................................................. 220

einbinden ..................................................................... 212

gestalten ...................................................................... 660

mit CSS skalieren ...................................................... 660

responsiv ...................................................................... 555

skalieren ....................................................................... 218

Bildergalerie erstellen ................................................. 667

Blog ........................................................................................ 31

BOM .................................................................................... 780

history ........................................................................... 789

location ........................................................................ 788

navigator ..................................................................... 790

screen ............................................................................ 787

window ......................................................................... 781

Boolean-Objekt ............................................................ 1233

Bootstrap .......................................................................... 995

JavaScript-Erweiterungen ................................... 1019

Komponenten .......................................................... 1011

Layout ........................................................................... 998

border-box ....................................................................... 595

CSS3 ................................................................................ 421

Box-Modell ...................................................................... 409

alternatives Box-Modell (CSS3) .......................... 421

box-sizing: border-box ........................................... 421

klassisches Box-Modell .......................................... 410

Box-Modell � Kastenmodell

box-sizing

border-box .................................................................. 596

content-box ................................................................ 423


Index

1248

Breakpoints ..................................................................... 570

Browser-Objekte .......................................................... 1235

history ......................................................................... 1240

location ...................................................................... 1241

navigator ................................................................... 1235

screen .......................................................................... 1236

window ....................................................................... 1237

Browserstylesheet ........................................................ 389

Buchstabenabstand ..................................................... 634

C

Cache Manifest .............................................................. 901

Camel Case ....................................................................... 813

caniuse.com .................................................................... 707

Canvas ...................................................................... 242, 866

Bibliotheken ............................................................... 877

Bilder kopieren .......................................................... 870

Bilder manipulieren ................................................ 870

getContext .................................................................. 866

Methoden .................................................................... 868

Rendering Context ................................................... 866

clear .................................................................................... 477

both ....................................................................... 478, 584

left .................................................................................. 478

none ............................................................................... 478

right ............................................................................... 478

cm ........................................................................................ 398

Collapsing Margins ...................................................... 416

Conditional Comments ..................................... 703, 997

CSS (Cascading Style Sheets) ............................. 41, 307

alternatives Stylesheet ........................................... 320

border-box .................................................................. 421

Code kommentieren ............................................... 313

Codeformatierung ................................................... 314

CSS Level 1 (CSS 1) ...................................................... 308

CSS Level 2 (CSS 2) .................................................... 309

CSS Level 3 (CSS3) ...................................................... 309

Einbinden in HTML .................................................. 315

jQuery ........................................................................... 975

Kaskade ............................................................... 320, 388

Kombinatoren ......................................................... 1202

manipulieren ............................................................. 812

Media Queries ............................................................ 326

Selektoren .................................................................... 327

Selektoren (Übersicht) .......................................... 1201

style-Attribut .............................................................. 315

validieren ..................................................................... 692

Vererbung ................................................................... 381

CSS3 .................................................................................... 692

CSS3-Webbrowser-Test ............................................... 691

CSS-Eigenschaften

!important ................................................................... 390

align-content ............................................... 1168, 1169

align-items ............................................................... 1169

align-self .................................................................... 1170

animation ................................................................. 1191

animation-delay .................................................... 1192

animation-direction ............................................. 1192

animation-duration ............................................. 1191

animation-iteration-count ................................ 1191

animation-name .................................................... 1191

animation-play-state ........................................... 1192

animation-timing-function ............................... 1192

backface-visibility .................................................. 1188

background ........................................... 434, 438, 1150

background-attachment ................. 434, 438, 1150

background-clip ......................................... 1150, 1151

background-color ............................... 433, 434, 1151

background-image ............................. 434, 561, 1151

background-origin ...................................... 441, 1152

background-position ............. 434, 438, 1152, 1153

background-repeat ............................ 434, 436, 1153

background-size ...................... 440, 561, 1153, 1154

background-size: contain ...................................... 563

background-size: cover .......................................... 563

benannte Farben ....................................................... 400

border ...................................................... 413, 429, 1154

border-bottom .............................................. 413, 1156

border-bottom-color ............................................ 1157

border-bottom-left-radius ....................... 448, 1159

border-bottom-right-radius .................... 448, 1159

border-bottom-style ............................................. 1157

border-bottom-width ........................................... 1157

border-collapse ............................................. 656, 1184

border-color ................................................... 430, 1156

border-image ................................................. 432, 1158

border-image-outset ............................................ 1158

border-image-repeat .................................. 433, 1159

border-image-slice ...................................... 433, 1158

border-image-source ............................................ 1158

border-image-width ................................... 433, 1158

border-left ....................................................... 413, 1156

border-left-color ..................................................... 1157

border-left-style ...................................................... 1157

border-left-width .................................................... 1157

border-radius ................................................. 447, 1159

border-right .................................................... 413, 1157

border-right-color .................................................. 1157

border-right-style ................................................... 1157

border-right-width ................................................ 1157

border-spacing .............................................. 657, 1184


Index

1249

border-style ..................................................... 430, 1155

border-top ....................................................... 413, 1157

border-top-color .................................................... 1157

border-top-left-radius ................................. 448, 1159

border-top-right-radius ............................. 448, 1159

border-top-style ..................................................... 1157

border-top-width ................................................... 1157

border-width ................................................... 430, 1155

bottom .............................................................. 454, 1160

box-shadow .................................................... 446, 1160

box-sizing .......................................................... 423, 595

box-sizing: border-box ........................................... 423

caption-side .................................................... 660, 1184

clear .......................................................... 477, 505, 1161

clip ...................................................................... 663, 1161

clip-path .................................................................... 1161

color ............................................................................ 1149

column-count ......................................................... 1198

column-fill ................................................................ 1198

column-gap .............................................................. 1198

column-rule ............................................................. 1199

column-rule-color ................................................. 1199

column-rule-style ...................................... 1199, 1200

column-rule-width ................................................ 1200

columns ..................................................................... 1197

column-width .......................................................... 1198

content .............................................................. 364, 1194

counter-increment .................................... 1185, 1186

counter-reset ........................................................... 1186

direction .................................................................... 1183

display ..................................................... 510, 603, 1162

display: block ................................................... 546, 682

display: flex ....................................................... 486, 528

display: grid ................................................................ 603

display: inline ................................................... 546, 649

display: inline-block ................................................ 682

display: table .................................................... 510, 522

display: table-cell ............................................ 510, 522

empty-cells ...................................................... 658, 1185

Farbangaben .............................................................. 400

Farbverlauf hinzufügen ......................................... 443

flex ...................................................................... 489, 1170

flex-basis .......................................................... 489, 1171

flex-direction .................................................. 486, 1172

flex-flow ..................................................................... 1171

flex-grow .......................................................... 489, 1170

flex-shrink ........................................................ 489, 1171

float .................... 472, 505, 509, 513, 515, 649, 1162

font ......................................................... 633, 1179, 1180

font-family .......................................... 608, 1181, 1182

font-size ............................................................ 624, 1181

font-size-adjust ....................................................... 1182

font-stretch ..................................................... 635, 1182

font-style .......................................................... 629, 1180

font-variant .................................................... 630, 1180

font-weight ..................................................... 629, 1180

height ...................................................... 411, 660, 1162

inherit ........................................................................... 386

initial ............................................................................. 388

justify-content ............................................. 1168, 1169

Kurzschreibweise ...................................................... 406

left ...................................................................... 454, 1160

letter-spacing ................................................. 634, 1173

line-height ........................................... 631, 1173, 1181

list-style ............................................................ 646, 1186

list-style-image ............................................. 644, 1188

list-style-position ......................................... 645, 1188

list-style-type ................................................. 643, 1187

margin .............................................................. 414, 1163

margin-bottom ............................................. 414, 1163

margin-left ...................................................... 414, 1163

margin-right .................................................. 414, 1163

margin-top ...................................................... 414, 1163

Maßeinheiten ............................................................ 397

max-height ............................................................... 1162

max-width ................................... 507, 555, 557, 1167

min-height ................................................................ 1162

min-width ........................................................ 507, 1167

name="viewport" ..................................................... 550

opacity .............................................................. 441, 1149

order .................................................................. 492, 1173

orphans ...................................................................... 1200

outline ......................................................................... 1195

outline-color ............................................................. 1196

outline-offset ........................................................... 1196

outline-style ............................................................. 1196

outline-width ........................................................... 1196

overflow ..................................... 483, 515, 1163, 1164

overflow-x ..................................................... 1163, 1164

overflow-y ..................................................... 1163, 1164

padding ............................................................ 412, 1164

padding-bottom ........................................... 413, 1165

padding-left .................................................... 413, 1165

padding-right ................................................ 413, 1165

padding-top .................................................... 413, 1165

page-break-after ......................................... 1200, 1201

page-break-before ...................................... 1200, 1201

page-break-inside .................................................. 1201

perspective ................................................................ 1189

perspective-origin .................................................. 1189

position ............................................................ 451, 1165

quotes ......................................................................... 1174


Index

1250

resize ........................................................................... 1197

right ................................................................... 454, 1160

Schlüsselwörter (Werte) ......................................... 399

Standardwert wiederherstellen .......................... 388

table-layout .................................................... 654, 1185

tab-size ....................................................................... 1174

text-align ......................................................... 635, 1174

text-decoration ............................................. 639, 1178

text-decoration-color ........................................... 1178

text-decoration-line .............................................. 1178

text-decoration-style ............................................ 1178

text-indent ...................................................... 638, 1175

text-overflow ............................................... 1175, 1176

text-shadow ....................................... 641, 1178, 1179

text-transform ............................................... 640, 1175

top ...................................................................... 454, 1160

transform ............................................ 671, 1189, 1190

transform-origin .................................................... 1190

transform-style ....................................................... 1190

transition ......................................................... 677, 1192

transition-delay ...................................................... 1193

transition-duration ............................................... 1193

transition-property ............................................... 1193

transition-timing-function ................................ 1193

unicode-bidi ............................................................. 1183

Vererbung ................................................................... 381

Vererbung erzwingen ............................................. 386

vertical-align .................................................. 636, 1166

visibility .......................................................... 1166, 1167

white-space ............................................................... 1176

widows ........................................................................ 1201

width ....................................................... 411, 660, 1167

Winkelmaße ............................................................... 405

word-break ............................................................... 1177

word-spacing ................................................. 634, 1177

word-wrap ................................................................. 1177

Zeichenketten (Werte) ............................................ 399

z-index .................................................. 462, 1167, 1168

CSS-Frameworks ............................................................ 993

CSS-Funktionen

hsl() ................................................................................ 405

hsla() ..................................................................... 405, 441

linear-gradient() ....................................................... 443

radial-gradient() ....................................................... 445

rect() ............................................................................... 664

repeating-linear-gradient() .................................. 444

repeating-radial-gradient() .................................. 445

rgb() ............................................................................... 403

rgba() .................................................................... 403, 441

rotate() .......................................................................... 673

scale() ............................................................................ 672

skew() ............................................................................. 674

translate() .................................................................... 674

CSS-Kompression .......................................................... 697

CSS-Präprozessoren ................................................... 1040

Less .............................................................................. 1041

Sass .............................................................................. 1045

CSS-Pseudoelemente ...................................... 363, 1206

::after ............................................................................. 364

::backdrop .................................................................... 932

::before .......................................................................... 364

::first-letter .................................................................. 364

::first-line ...................................................................... 364

::selection ..................................................................... 364

CSS-Pseudoklassen .......................................... 351, 1203

:active .................................................................. 352, 686

:checked ........................................................................ 353

:disabled ....................................................................... 353

:empty ........................................................................... 356

:enabled ........................................................................ 353

:first-child ..................................................................... 357

:first-of-type ................................................................ 359

:focus .............................................................................. 352

:fullscreen ..................................................................... 931

:hover ......................................................... 352, 655, 686

:invalid ...................................................... 280, 281, 287

:lang() ............................................................................ 362

:last-child ..................................................................... 357

:last-of-type ................................................................. 359

:link ................................................................................. 351

:not() ............................................................................... 362

:nth-child() ......................................................... 357, 358

:nth-last-child() ................................................ 357, 358

:nth-last-of-type() ..................................................... 359

:nth-of-type() .............................................................. 359

:only-child .......................................................... 357, 359

:root ................................................................................ 356

:target ............................................................................ 354

:valid .......................................................... 280, 281, 287

:visited ........................................................................... 351

CSS-Regeln .............................................................. 310, 312

@charset ................................................................... 1207

@document ............................................................. 1207

@font-face ................................................................ 1207

@import ....................................... 323, 536, 695, 1207

@keyframes ..................................... 1190, 1191, 1207

@media ........................................ 325, 534, 536, 1207

@namespace ........................................................... 1207

@page ........................................................................ 1207

@supports ................................................................ 1207

CSS-Reset ........................................................................... 698

Normalisierung ......................................................... 699


Index

1251

CSS-Selektoren ............................................................... 312

CSS-Sprites ....................................................................... 665

D

Dateinamen ....................................................................... 74

Date-Objekt ................................................................... 1225

Definitionsliste .............................................................. 137

deg ....................................................................................... 406

Deprecated ......................................................................... 41

Desktop First ................................................................... 569

display ................................................................................ 603

block ............................................................................... 604

flex .................................................................................. 604

inline .............................................................................. 604

inline-block ................................................................. 604

list-item ........................................................................ 604

none ..................................................................... 532, 604

run-in ............................................................................. 604

table ............................................................................... 604

table-row ...................................................................... 510

<div> ......................................................................... 141, 590

<!doctype> ................................................. 66, 1053, 1054

Document Object Model ............................................ 793

document.body .............................................................. 835

document.documentElement ................................. 835

document-Objekt .......................................................... 795

Dokumenten-Outline ............................... 112, 113, 114

DOM .......................................................................... 793, 794

Ajax ................................................................................ 947

document-Objekt ...................................................... 795

DOM-Baum ...................................................................... 794

DOM-Eigenschaften ..................................................... 796

childNodes ................................................................... 836

firstChild ............................................................. 836, 951

hasChildNodes ........................................................... 837

innerHTML .................................................................. 809

lastChild ....................................................................... 836

nextSibling .................................................................. 837

nodeName ................................................................... 837

nodeType ..................................................................... 837

nodeValue ......................................................... 837, 951

parentNode ................................................................. 836

previousSibling .......................................................... 837

style ................................................................................ 812

DOM-Funktionen

appendChild() ................................................... 835, 841

cloneNode() ................................................................. 845

createElement() ......................................................... 835

createTextNode() ...................................................... 835

getAttribute() ............................................................. 846

getElementById() ...................................................... 797

getElementsByClassName() ................................. 801

getElementsByName() ............................................ 801

getElementsByTagName() .................................... 799

hasAttribute() ............................................................ 846

insertBefore() ............................................................. 841

querySelector() .......................................................... 803

querySelectorAll() ..................................................... 803

removeAttribute() .................................................... 846

removeChild() ............................................................ 842

replaceChild() ............................................................. 843

setAttribute() ........................................... 809, 845, 846

write() ............................................................................ 809

DOM-Inspektor ....................................................... 58, 795

DOM-Manipulation ............................................ 793, 834

DOM-Methoden ............................................................ 796

DOM-Objektsammlung .............................................. 805

anchors ......................................................................... 807

baseURI ........................................................................ 807

body ............................................................................... 807

cookie ............................................................................ 807

doctype ......................................................................... 807

documentElement ................................................... 807

documentURI ............................................................. 807

domain ......................................................................... 807

domConfig .................................................................. 807

embeds ......................................................................... 807

forms ............................................................................. 807

head ............................................................................... 808

images .......................................................................... 808

implementation ........................................................ 808

inputEncoding ........................................................... 808

lastModified ............................................................... 808

links ................................................................................ 808

readyState ................................................................... 808

referrer .......................................................................... 808

scripts ............................................................................ 808

title ................................................................................. 808

URL ................................................................................. 808

DOM� HTML DOM

Downloadlinks ............................................................... 203

Drag & Drop-API ........................................................... 892

dataTransfer-Objekt ............................................... 894

drag ................................................................................ 893

dragend ........................................................................ 894

dragenter ..................................................................... 893

draggable .................................................................... 892

dragleave ..................................................................... 893

dragover ...................................................................... 893

dragstart ...................................................................... 893

drop ............................................................................... 894


Index

1252

effectAllowed ............................................................. 895

getData() ...................................................................... 896

setData() ...................................................................... 895

setDragImage() ......................................................... 895

dropshadow .................................................................... 642

Druckversion .................................................................. 532

Durchstreichen .............................................................. 639

Dynamische Webseiten ................................................ 37

E

Echtzeitkommunikation ........................................... 927

ECMAScript ...................................................................... 715

em ....................................................................................... 398

E-Mail-Adresse

mailto ........................................................................... 198

prüfen ............................................................................ 280

Entitäten ........................................................................... 173

Entwickler-Tools ............................................................ 708

Event Handler ................................................................ 815

addEventListener() ................................................... 817

Event-Attribute

addEventListener() ................................................. 1111

für HTML-Elemente ............................................... 1111

onabort ...................................................................... 1114

onafterprint .............................................................. 1111

onbeforeprint ........................................................... 1111

onbeforeunload ...................................................... 1111

onblur ......................................................................... 1112

oncanplay ................................................................. 1114

oncanplaythrough ................................................. 1115

onchange ................................................................... 1112

onclick ......................................................................... 1113

oncontextmenu ...................................................... 1112

oncopy ........................................................................ 1114

oncuechange ............................................................ 1115

oncut ........................................................................... 1114

ondblclick .................................................................. 1113

ondrag ........................................................................ 1113

ondragend ................................................................. 1113

ondragenter ............................................................. 1113

ondragleave ............................................................. 1113

ondragover ............................................................... 1113

ondragstart .............................................................. 1113

ondrop ........................................................................ 1114

ondurationchange ................................................. 1115

onemptied ................................................................. 1115

onended ..................................................................... 1115

onerror ............................................................ 1111, 1115

onfocus ....................................................................... 1112

onhashchange ......................................................... 1111

oninput ...................................................................... 1112

oninvalid ................................................................... 1112

onkeydown ............................................................... 1113

onkeypress ................................................................ 1113

onkeyup ..................................................................... 1113

onload ........................................................................ 1111

onloadeddata .......................................................... 1115

onloadedmetadata ............................................... 1115

onloadstart .............................................................. 1115

onmessage ................................................................ 1111

onmousedown ........................................................ 1114

onmousemove ........................................................ 1114

onmouseout ............................................................. 1114

onmouseover ........................................................... 1114

onmouseup .............................................................. 1114

onoffline .................................................................... 1111

ononline .................................................................... 1111

onpagehide .............................................................. 1112

onpageshow ............................................................. 1112

onpaste ...................................................................... 1114

onpause ..................................................................... 1115

onplay ........................................................................ 1115

onplaying .................................................................. 1115

onpopstate ............................................................... 1112

onprogress ................................................................ 1115

onratechange .......................................................... 1115

onreset ........................................................................ 1113

onresize ...................................................................... 1112

onscroll ...................................................................... 1114

onsearch .................................................................... 1113

onselect ...................................................................... 1113

onstalled .................................................................... 1115

onstorage .................................................................. 1112

onsubmit ................................................................... 1113

onsuspend ................................................................. 1115

ontimeupdate ......................................................... 1116

onunload ................................................................... 1112

onvolumechange ................................................... 1116

onwaiting .................................................................. 1116

onwheel ..................................................................... 1114

event-Objekt

altKey ............................................................................. 826

bubbles .......................................................................... 827

button ............................................................................ 827

cancelable .................................................................... 827

clientX ........................................................................... 827

clientY ............................................................................ 827

ctrlKey ........................................................................... 826

currentTarget ............................................................. 827

keyCode ........................................................................ 827

metaKey ....................................................................... 827


Index

1253

preventDefault() ........................................................ 828

screenX ......................................................................... 827

screenY .......................................................................... 827

shiftKey ......................................................................... 826

target ............................................................................. 827

type ................................................................................. 827

Event-Propagation ........................................................ 829

ex ......................................................................................... 399

F

falsy ..................................................................................... 731

Farbangaben .................................................................... 400

benannte Farben ....................................................... 400

hexadezimale Schreibweise ................................. 402

HSL-Mischung ............................................................ 405

RGB-Mischung ........................................................... 403

Transparenz ................................................................ 403

Farbauswahl-Dialog ..................................................... 277

Farben auswählen ......................................................... 277

Farbverlauf ....................................................................... 443

Faux Column ................................................................... 518

Favicon .............................................................................. 234

favicon.ico ........................................................................ 235

File API ..................................................................... 910, 932

Flash abspielen ............................................................... 254

Flexbox .................................................................... 486, 528

display: flex ................................................................. 486

flex .................................................................................. 489

flex-direction .............................................................. 486

Layout ........................................................................... 528

order .............................................................................. 492

flex-direction

column-reverse .......................................................... 489

row-reverse ................................................................. 489

float ........................... 472, 513, 515, 532, 540, 544, 650

Aufheben mit clear .................................................. 477

Elemente nebeneinander ....................................... 474

inherit ............................................................................ 473

left ......................................................................... 472, 474

none ............................................................................... 473

right ............................................................................... 472

zweispaltiges Layout ............................................... 505

Float drop ......................................................................... 485

Font Awesome ................................................................ 620

@font-face ....................................................................... 613

font-family

Webfonts ...................................................................... 613

font-stack .......................................................................... 608

<form> ............................................................................... 263

Form-Mailer .................................................................... 294

Formulare ........................................................................ 261

Auswahlliste ............................................................... 267

Autovervollständigung ......................................... 284

Bereich definieren .................................................... 263

Checkboxen ................................................................ 270

Datei-Upload ............................................................. 271

Datum und Uhrzeit eingeben ............................. 279

Datums-Eingabefeld ............................................... 277

Drowdown-Liste ....................................................... 267

Eingabefokus setzen ............................................... 283

Elemente deaktivieren ........................................... 289

Elemente gruppieren .............................................. 292

E-Mail-Eingabefeld .................................................. 280

Farbauswahl-Dialog ............................................... 277

Fehler bei der Eingabe ............................................ 286

JavaScript .................................................................... 849

mehrere Submit-Schaltflächen ........................... 274

mehrzeiliges Texteingabefeld ............................. 266

method="get" ............................................................. 263

method="post" .......................................................... 263

Monats-Eingabefeld ................................................ 279

neue Eingabefelder (HTML5) ............................... 276

nur lesbar .................................................................... 290

Passworteingabefeld .............................................. 265

PHP ................................................................................ 294

Platzhalter verwenden ........................................... 286

Radiobuttons ............................................................. 269

reguläre Ausdrücke ................................................. 285

Schaltflächen ............................................................. 272

Schieberegler .............................................................. 282

Sucheingabefeld ....................................................... 280

Tabulator-Reihenfolge ........................................... 291

Tastenkürzel ............................................................... 291

Telefonnummern-Eingabefeld ............................ 281

Texteingabefeld ........................................................ 264

Textlabel ...................................................................... 270

Uhrzeit-Eingabefeld ................................................ 278

URL-Eingabefeld ....................................................... 281

verstecktes Eingabefeld ......................................... 273

Wochen-Eingabefeld ............................................... 279

Zahlen-Eingabefeld ................................................. 281

Framework

Bootstrap ..................................................................... 995

YAML 4 ....................................................................... 1024

Frameworks

CSS .................................................................................. 993

Fullscreen API ................................................................. 928

function ............................................................................ 747


Index

1254

G

Geolocation-API ............................................................ 878

clearWatch() ............................................................... 886

coords.accuracy ........................................................ 881

coords.altitude .......................................................... 881

coords.altitudeAccuracy ....................................... 881

coords.heading .......................................................... 881

coords.latitude .......................................................... 881

coords.longitude ....................................................... 881

coords.speed ............................................................... 881

enableHighAccuracy .............................................. 885

Fehlerbehandlung .................................................... 882

getCurrentPosition() ............................................... 881

maximumAge ............................................................ 885

Navigation erstellen ............................................... 891

PERMISSION_DENIED ............................................ 884

POSITION_UNAVAILABLE .................................... 884

PositionOptions-Objekt ......................................... 885

TIMEOUT ..................................................................... 884

timeout ......................................................................... 885

timestamp ................................................................... 881

watchPosition() ......................................................... 886

GET-Methode .................................................................. 297

Geviertbreite ................................................................... 398

Gewichtung ..................................................................... 392

grad ..................................................................................... 406

Grafiken

einbinden ..................................................................... 212

gestalten ...................................................................... 660

Gridlayout ........................................................................ 572

H

Hauptinhalt <main> .................................................... 129

Hintergrundfarbe ......................................................... 433

Hintergrundgrafik ........................................................ 434

fixieren ......................................................................... 438

positionieren .............................................................. 438

reaktionsfähig machen ......................................... 561

history ............................................................................. 1240

history-Objekt ................................................................ 789

back() ............................................................................. 790

forward() ...................................................................... 790

Hochformat

orientation .................................................................. 567

HTML

Auszeichnungssprache ............................................. 39

CSS hinzufügen ......................................................... 315

validieren ........................................................................ 50

HTML 5.1 ............................................................................. 40

HTML DOM ...................................................................... 793

HTML5 .................................................................................. 39

HTML5-Elemente

CSS .................................................................................. 700

HTML5Shiv ....................................................................... 702

HTML-Attribute ................................................................ 63

<source> .................................................................... 1085

<track> ....................................................................... 1085

<video> ...................................................................... 1085

abbr ............................................................................. 1097

accept ......................................................................... 1068

accept-charset ............................................... 264, 1067

accesskey ......................................................... 291, 1051

action ............................................. 263, 295, 297, 1067

alt .................. 212, 213, 221, 227, 1068, 1082, 1084

async .................................................................... 90, 1100

autocomplete .................................... 284, 1067, 1068

autofocus ........ 283, 1068, 1073, 1074, 1076, 1078

autoplay ..................................... 246, 253, 1086, 1088

border ............................................................................ 183

challenge ................................................................... 1078

charset .................................... 90, 98, 172, 1098, 1100

charset="UTF-8" ........................................................... 92

checked ................................................ 269, 1068, 1094

cite ............................................................ 126, 160, 1063

class .......................................................... 333, 801, 1051

cols ..................................................................... 266, 1073

colspan ............................................................. 180, 1097

content ......................................................... 91, 98, 1098

contenteditable ...................................................... 1051

contextmenu ........................................................... 1051

controls ....................................... 246, 253, 1086, 1088

coords ...................................................... 225, 227, 1082

data-* .............................................................. 1015, 1052

datetime .......................................................... 164, 1063

default ............................................................ 1087, 1094

defer ..................................................................... 90, 1100

dir ........................................................... 156, 1052, 1062

disabled 289, 1068, 1073, 1074, 1076, 1077, 1078,

1079, 1094

download ......................... 203, 209, 227, 1082, 1089

draggable ........................................................ 892, 1052

dropzone ................................................................... 1052

enctype .................................................... 263, 271, 1067

for .................................................. 270, 681, 1078, 1079

form .................. 274, 1068, 1073, 1074, 1076, 1078,

1079, 1101

formaction .......................................... 275, 1069, 1074

formenctype ................................................. 1069, 1075

formmethod ....................................... 275, 1069, 1075

formnovalid ................................................................ 275


Index

1255

formnovalidate .......................................... 1069, 1075

formtarget ........................................... 275, 1069, 1075

headers ...................................................................... 1097

height .......... 216, 218, 221, 236, 1070, 1080, 1084,

1088, 1101

hidden ........................................................................ 1052

high ............................................................................. 1076

href ........ 79, 80, 83, 190, 209, 226, 227, 318, 1082,

1089, 1091, 1099

href="mailto: … " ....................................................... 198

hreflang ................... 83, 209, 227, 1082, 1090, 1091

http-equiv ................................................... 91, 98, 1098

http-equiv="refresh" .................................................. 92

icon .............................................................................. 1094

id .......................... 207, 242, 274, 336, 774, 797, 1052

ismap ................................................................. 221, 1084

keytype ...................................................................... 1079

kind .................................................................... 248, 1087

label .................................. 248, 268, 1077, 1088, 1094

lang ...................................................................... 68, 1052

list ....................................................................... 284, 1070

loop ........................................................ 253, 1086, 1088

low ............................................................................... 1076

manifest ........................................................... 904, 1055

manipulieren .................................................... 811, 846

max ..... 278, 279, 281, 282, 285, 1070, 1077, 1080

maxlength ................................. 264, 266, 1070, 1073

media ......... 83, 86, 209, 227, 231, 324, 1058, 1082,

1085, 1086, 1090, 1091

media="print" ............................................................. 532

media="screen" .......................................................... 532

method ............................................................. 263, 1067

method="get" ............................................................. 263

method="post" ................................................. 263, 296

min .................. 278, 279, 281, 282, 285, 1070, 1077

multiple ................... 269, 280, 285, 932, 1070, 1076

muted .......................................... 246, 253, 1086, 1088

name ..... 91, 98, 222, 264, 266, 268, 269, 271, 274,

801, 852, 1067, 1070, 1073, 1076, 1078,

1079, 1080, 1084, 1099, 1101, 1102

name="description" ................................................... 95

name="keywords" ...................................................... 95

name="robots" ............................................................. 93

novalidate ....................................................... 289, 1067

open ................................................................... 302, 1058

optimum ................................................................... 1077

pattern .................................................... 281, 285, 1070

placeholder ......................................... 286, 1070, 1073

poster ................................................................. 246, 1088

preload ........................................ 246, 253, 1086, 1088

pubdate ........................................................................ 167

readonly ............................................... 290, 1070, 1073

rel .................................. 83, 84, 209, 1082, 1090, 1091

rel="icon" ..................................................................... 234

rel="stylesheet" .......................................................... 318

required .......................... 280, 286, 1071, 1074, 1076

reversed ............................................................ 133, 1093

rows ................................................................... 266, 1074

rowspan ........................................................... 180, 1097

sandbox ........................................................... 258, 1080

scope ...................................................... 182, 1058, 1097

scoped ....................................................................... 85, 86

seamless ........................................................... 258, 1080

selected ............................................................. 268, 1077

shape ................................................................. 224, 1083

size ....................................... 84, 264, 1071, 1076, 1092

sizes ................................................................................ 231

sortable ...................................................................... 1096

sorted .......................................................................... 1097

span ............................................................................. 1096

spellcheck .................................................................. 1052

src ........ 90, 212, 222, 236, 245, 246, 248, 253, 777,

1071, 1080, 1084, 1086, 1088, 1089, 1100, 1101

srcdoc .......................................................................... 1080

srclang .............................................................. 248, 1088

srcset ....................................................... 230, 231, 1085

start ................................................................... 134, 1093

step .................................................. 281, 282, 285, 1071

style .................................................................... 315, 1053

tabindex ........................................................... 291, 1053

target .. 80, 197, 210, 264, 1068, 1083, 1090, 1099

target="_blank" ......................................................... 198

title ........................................ 150, 202, 215, 320, 1053

translate ..................................................................... 1053

type ....... 84, 86, 90, 202, 210, 245, 252, 255, 1058,

1071, 1075, 1083, 1085, 1087, 1091,

1092, 1093, 1094, 1095, 1101

type="button" .......................................................... 1072

type="checkbox" ........................................... 270, 1072

type="checkboxen" .................................................. 852

type="color" .................................................... 277, 1072

type="date" ..................................................... 277, 1072

type="datetime" ............................................ 279, 1072

type="datetime-local" ................................ 279, 1072

type="email" ................................................... 280, 1072

type="file" .............................................. 271, 932, 1072

type="hidden" ................................................ 273, 1072

type="image" ............................................................ 1072

type="month" ................................................. 279, 1072

type="number" .............................................. 281, 1072

type="password" ........................................... 265, 1072

type="radio" ......................................... 269, 852, 1072


Index

1256

type="range" .................................................. 282, 1072

type="reset" ..................................................... 272, 1072

type="search" ................................................. 280, 1072

type="submit" ................................................ 272, 1072

type="tel" ......................................................... 281, 1072

type="text" ...................................................... 264, 1072

type="text/css" .......................................................... 318

type="text/javascript" ............................................ 771

type="time" ..................................................... 278, 1073

type="url" ......................................................... 281, 1073

type="week" .................................................... 279, 1073

usemap ................................................. 222, 1084, 1101

value 134, 264, 269, 271, 274, 277, 278, 279, 849,

851, 1071, 1075, 1077, 1080, 1094, 1102

width 216, 218, 222, 236, 246, 1072, 1080, 1084,

1089, 1101

wrap ................................................................... 266, 1074

HTML-Elemente ............................................................... 58

<a> ..................................................................... 189, 1089

<abbr> .............................................................. 150, 1059

<address> ........................................................ 118, 1059

<area> ................................................... 222, 1081, 1082

<article> ................................................. 104, 145, 1055

<aside> ................................................... 106, 145, 1056

<audio> ................................................ 251, 1085, 1086

<b> ..................................................................... 158, 1059

<base> ..................................................... 78, 1098, 1099

<bdi> ................................................................. 156, 1059

<bdo> .................................................... 156, 1059, 1062

<blockquote> ..................................... 126, 1060, 1063

<body> ....................................................... 69, 102, 1054

<br> .................................................................... 122, 1054

<button> .............................................. 272, 1064, 1074

<canvas> .................................... 242, 866, 1081, 1084

<caption> ........................................................ 193, 1095

<cite> ................................................................. 150, 1060

<code> .............................................................. 151, 1060

<col> ...................................................... 186, 1095, 1096

<colgroup> .......................................... 186, 1095, 1096

<command> ............................................................... 305

<datalist> .................................................................. 1064

<dd> ................................................................... 138, 1093

<del> ...................................................... 162, 1060, 1063

<details> .................................... 194, 301, 1056, 1058

<dfn> ................................................................. 155, 1060

<dialog> ........................................................... 302, 1056

<div> ........................................................ 127, 680, 1056

<dl> .................................................................... 137, 1092

<dt> .................................................................... 137, 1093

<em> .................................................................. 157, 1060

<embed> .............................................. 254, 1099, 1101

<fieldset> .......................... 292, 681, 685, 1064, 1078

<figcaption> ............................... 130, 195, 220, 1081

<figure> ........................................ 130, 195, 220, 1081

<footer> .................................................. 116, 145, 1056

<form> ............................... 263, 274, 295, 1064, 1067

<h1> ................................................................... 111, 1054

<h2> ................................................................... 111, 1054

<h3> ................................................................... 111, 1054

<h4> ................................................................... 111, 1054

<h5> ................................................................... 111, 1054

<h6> .................................................................. 111, 1054

<head> ......................................................... 68, 71, 1098

<header> ................................................ 116, 145, 1057

<hgroup> ................................................................... 1057

<hr> ................................................................... 124, 1054

<html> ..................................................... 67, 1054, 1055

<i> ...................................................................... 158, 1060

<iframe> .......................................................... 256, 1080

<img> ........................................... 212, 236, 1081, 1084

<input type="checkbox"> ............................ 270, 852

<input type="color"> ............................................... 277

<input type="date"> ................................................. 277

<input type="datetime"> ....................................... 279

<input type="datetime-local"> ............................ 279

<input type="email"> .............................................. 280

<input type="file"> ................................................... 271

<input type="hidden"> ........................................... 273

<input type="month"> ............................................ 279

<input type="number"> ......................................... 281

<input type="password"> ...................................... 265

<input type="radio"> ..................................... 269, 852

<input type="range"> .............................................. 282

<input type="reset"> ................................................ 272

<input type="search"> ............................................ 280

<input type="submit"> ........................................... 272

<input type="tel"> ..................................................... 281

<input type="text"> .................................................. 264

<input type="time"> ................................................ 278

<input type="url"> .................................................... 281

<input type="week"> ............................................... 279

<input> ........................................................... 1064, 1068

<ins> ...................................................... 162, 1060, 1063

<kbd> ................................................................ 154, 1061

<keygen> ....................................................... 1064, 1078

<label> ......................................... 270, 681, 1065, 1078

<legend> ................................................. 292, 685, 1065

<li> ................................................ 132, 133, 1092, 1094

<link> ............................................. 81, 317, 1089, 1091

<main> .......................................................................... 129

<map> .................................................. 222, 1081, 1084

<mark> ............................................................. 158, 1061


Index

1257

<math> ......................................................................... 241

<menu> ................................................ 303, 1093, 1094

<menuitem> ....................................... 303, 1093, 1094

<meta> ................................................................ 90, 1098

<meter> ................................................ 293, 1065, 1076

<nav> ....................................................... 108, 145, 1089

<noscript> ................................................ 88, 779, 1099

<object> ................................................ 255, 1100, 1101

<ol> ........................................................ 133, 1092, 1093

<optgroup> ......................................... 268, 1065, 1077

<option> ..................................... 267, 851, 1065, 1077

<output> .............................................. 282, 1066, 1079

<p> ...................................................................... 120, 1054

<param> ............................................... 255, 1100, 1102

<picture> .................................... 228, 565, 1081, 1085

<pre> .................................................................. 151, 1061

<progress> ................................. 293, 855, 1066, 1080

<q> .......................................................... 160, 1061, 1063

<rp> .................................................................... 168, 1061

<rt> ..................................................................... 168, 1061

<ruby> ............................................................... 168, 1061

<s> ...................................................................... 161, 1061

<samp> ............................................................. 154, 1061

<script> ............. 88, 771, 775, 776, 777, 1099, 1100

<section> ................................................ 103, 145, 1057

<select> ....................................... 267, 851, 1066, 1076

<small> ............................................................. 168, 1061

<source> ....................................... 228, 245, 252, 1086

<span> .............................................................. 170, 1057

<strong> ........................................................... 157, 1061

<style> ........................................... 85, 316, 1057, 1058

<sub> ................................................................. 163, 1061

<summary> ........................................... 194, 301, 1057

<sup> ................................................................. 163, 1062

<svg> ............................................................................. 237

<table> .................................................. 178, 1095, 1096

<tbody> ............................................................ 184, 1095

<td> ........................................................ 178, 1095, 1097

<textarea> ................................. 266, 851, 1066, 1073

<tfoot> .............................................................. 184, 1096

<th> ........................................................ 179, 1095, 1097

<thead> ............................................................ 184, 1096

<time> ................................................... 164, 1062, 1063

<title> .................................................................. 72, 1054

<tr> ..................................................................... 178, 1096

<track> .............................................................. 247, 1087

<u> ...................................................................... 161, 1062

<ul> .................................................................... 132, 1092

<var> ........................................................................... 1062

<video> ............................................................. 244, 1088

<wbr> ................................................................ 123, 1062

datalist ......................................................................... 284

Event-Attribute ....................................................... 1111

verschachteln ................................................................ 59

HTML-Elemente (veraltet)

<acronym> ................................................................ 1102

<applet> ..................................................................... 1102

<basefont> ................................................................ 1102

<big> ............................................................................ 1102

<center> ..................................................................... 1102

<dir> ............................................................................ 1102

<font> ......................................................................... 1102

<frame> ...................................................................... 1102

<frameset> ................................................................ 1103

<noframes> .............................................................. 1103

<strike> ....................................................................... 1103

<tt> ............................................................................... 1103

HTML-Formulare .......................................................... 261

HTML-Kopfdaten ............................................................. 68

HTML-Tags .......................................................................... 58

HTML-Zeichen maskieren ......................................... 174

HTTP-Request ................................................................. 296

Hyperlinks ....................................................................... 189

I

Icon ..................................................................................... 234

Iconfonts .......................................................................... 619

Image-Map ....................................................................... 222

@import .................................................................. 536, 695

!important ....................................................................... 390

in .......................................................................................... 398

IndexedDB ....................................................................... 910

inherit ................................................................................ 386

Inline-Styles .................................................................... 316

<input type="button"> ............................................... 273

Internet Media Type .................................................. 1121

Internetverbindung prüfen ...................................... 911

ISO-8859 ........................................................................... 171

ISO-8859-1 ....................................................................... 172

J

JavaScript ................................................................... 42, 713

"use strict"; .................................................................. 723

<canvas> ............................................................. 242, 866

<noscript> ................................................................... 779

<script> ......................................................................... 771

<video> ......................................................................... 860

===-Operator ............................................................. 767

aktivieren .................................................................... 776

alert() ............................................................................. 773


Index

1258

Anweisungen ............................................................. 720

Anweisungsblock ..................................................... 731

appendChild() ............................................................ 896

arithmetische Operatoren .................................... 745

Array ..................................................................... 742, 768

Array-Objekt ............................................................. 1228

Arrow-Funktionen ................................................... 752

bedingte Anweisung ............................................... 730

Boolean ............................................................... 727, 766

Boolean-Objekt ....................................................... 1233

boolescher Wahrheitswert .................................... 731

break ..................................................................... 736, 741

Browser-Objekte ....................................................... 780

clearInterval() ............................................................ 786

clearTimeout() ........................................................... 786

console .......................................................................... 718

console.log() ............................................................... 772

const .............................................................................. 722

continue ....................................................................... 741

Date ............................................................................... 770

Datentypen ................................................................. 723

Datentypen konvertieren ...................................... 728

Date-Objekt .............................................................. 1225

deaktiviert ................................................................... 776

Dekrementoperator ................................................ 737

do-while-Schleife ...................................................... 740

Drag & Drop-API ...................................................... 892

Eigenschaften ............................................................ 760

Escape-Sequenzen .................................................... 725

Event Handler ............................................................ 815

Events ............................................................................ 814

false ................................................................................ 731

Formulare .................................................................... 849

for-Schleife .................................................................. 738

Function ....................................................................... 770

function (Schlüsselwort) ........................................ 747

Funktionen .................................................................. 747

Geolocation-API ....................................................... 878

globale Funktionen ............................................... 1234

history ........................................................................... 789

if-Verzweigung .......................................................... 733

Inkrementoperator .................................................. 737

innerHTML .................................................................. 774

Internetverbindung prüfen .................................. 911

isNaN() .......................................................................... 730

Kommentare .............................................................. 719

Konsole ......................................................................... 772

Konstanten ................................................................. 722

Konstruktorfunktion .............................................. 762

Laufzeitumgebung .................................................. 716

let .................................................................................... 720

Literal ............................................................................. 726

location ......................................................................... 788

logische Operatoren ................................................ 734

Math ..................................................................... 746, 770

mathematische Funktionen ................................. 746

Math-Objekt ............................................................. 1223

Media-API .................................................................... 860

navigator ..................................................................... 790

new ................................................................................. 762

null .................................................................................. 727

Number ......................................................................... 766

number .......................................................................... 724

Number-Objekt ....................................................... 1221

Object ............................................................................. 766

Objekte .......................................................................... 757

Objekt-Literal .............................................................. 761

onmessage ................................................................... 916

parseFloat() ................................................................. 729

parseInt() ...................................................................... 729

Rest-Parameter .......................................................... 754

Schleifen ....................................................................... 737

screen ............................................................................. 787

setInterval() ................................................................. 786

setTimeout() ................................................................ 786

Steuerzeichen ............................................................. 725

Strikter Modus ........................................................... 723

String ............................................................................. 766

String-Objekt ........................................................... 1217

Strings ........................................................................... 725

switch-Verzweigung ................................................ 736

this .................................................................................. 764

Timing Events ............................................................. 786

true ................................................................................. 731

typeof ............................................................................. 724

undefined ..................................................................... 727

var ................................................................................... 720

Variablen ...................................................................... 720

Vergleichsoperatoren .............................................. 732

Video steuern .............................................................. 860

while-Schleife .............................................................. 740

window ......................................................................... 781

Zahlen ............................................................................ 724

JavaScript Events ........................................................... 814

blur ................................................................................. 824

Bubbling-Phase .......................................................... 829

Capturing-Phase ....................................................... 829

change ........................................................................... 824

click ................................................................................. 821

dblclick .......................................................................... 821

Eigenschaften ............................................................. 824

error ................................................................................ 820


Index

1259

Event Handler ............................................................ 815

event-Objekt ............................................................... 824

Event-Propagation ................................................... 829

focus ............................................................................... 824

keydown ....................................................................... 823

keypress ........................................................................ 823

keyup ............................................................................. 823

load ................................................................................ 820

mousedown ................................................................ 821

mousemove ................................................................ 821

mouseout ..................................................................... 821

mouseover ................................................................... 821

mouseup ...................................................................... 821

onblur ............................................................................ 849

onchange ..................................................................... 851

onclick ........................................................................... 852

onload ........................................................................... 820

onsubmit ...................................................................... 854

onunload ..................................................................... 820

preventDefault() ........................................................ 828

reset ................................................................................ 824

resize .............................................................................. 820

scroll ............................................................................... 820

select .............................................................................. 824

Standardaktion ......................................................... 827

Standardaktion verhindern ................................. 828

stopPropation() ......................................................... 831

submit ................................................................. 824, 854

touchcancel ................................................................. 823

touchend ...................................................................... 823

touchmove .................................................................. 823

touchstart .................................................................... 823

unload ........................................................................... 820

JavaScript-Bibliothek

jQuery ............................................................................ 958

JavaScript-Events

dragend ........................................................................ 894

dragenter ..................................................................... 893

dragleave ..................................................................... 893

dragover ....................................................................... 893

dragstart ............................................................ 893, 894

drop ................................................................................ 894

offline ............................................................................ 911

onkeyup ........................................................................ 948

online ............................................................................. 911

onload ........................................................................... 941

JavaScript-Konsole ........................................................ 772

JavaScript-Objekte ..................................................... 1217

Array .................................................................. 768, 1228

Boolean ............................................................. 766, 1233

Date .................................................................... 770, 1225

Function ....................................................................... 770

Math .................................................................. 770, 1223

Number ............................................................ 766, 1221

Object ............................................................................ 766

RegExp ........................................................................ 1233

String ................................................................. 766, 1217

jQuery ................................................................................ 958

$.get() ............................................................................. 990

$.post() .......................................................................... 990

addClass() .................................................................... 975

after() ............................................................................ 971

Ajax ................................................................................ 987

animate() ............................................................ 979, 984

append() .............................................................. 961, 971

attr() ............................................................................... 967

before() ......................................................................... 971

CSS .................................................................................. 975

css() ................................................................................ 975

document ready ....................................................... 961

Effekte ........................................................................... 978

empty() ......................................................................... 971

Ereignisse ..................................................................... 964

Events ............................................................................ 964

fadeIn() ......................................................................... 979

fadeOut() ...................................................................... 979

fadeTo() ........................................................................ 979

fadeToggle() ............................................................... 979

hide() ............................................................................. 979

html() ............................................................................. 967

jquery() ......................................................................... 962

load() ............................................................................. 988

Plug-ins ........................................................................ 990

prepend() ..................................................................... 971

remove() ....................................................................... 971

removeClass() ............................................................ 975

Selektoren .................................................................... 961

show() ............................................................................ 979

slideDown() ................................................................. 979

slideToggle() ............................................................... 979

slideUp() ....................................................................... 979

stop() ............................................................................. 979

text() .............................................................................. 967

toggle() ......................................................................... 979

toogleClass() ............................................................... 975

val() ................................................................................ 967

JScript ................................................................................. 715

JSON .................................................................................... 953

JSON.parse() ................................................................ 956


Index

1260

K

Kapitälchen ............................................................ 630, 641

Kaskade .................................................................... 320, 388

Kastenmodell ................................................................. 409

Kombinatoren .................................................... 366, 1202

Kommentare ..................................................................... 65

CSS .................................................................................. 313

Kurzschreibweise

CSS-Eigenschaften ................................................... 406

L

Layout ................................................................................ 495

dreispaltiges ............................................................... 512

Faux Column .............................................................. 518

feste Breite .................................................................. 496

Flexboxen .................................................................... 528

flexible Breite ............................................................. 496

Grid ................................................................................ 571

Inhalt horizontal zentrieren ................................ 503

Raster ............................................................................ 571

Responsive .................................................................. 531

Tabellenlayout .......................................................... 510

zweispaltiges .............................................................. 497

Leerzeichen

.......................................................................... 124

Less ................................................................................... 1041

Links ................................................................................... 189

Linktext ............................................................................. 189

Listen

Bildergalerie ............................................................... 667

Grafiken als Aufzählungszeichen ...................... 644

Listen gestalten .............................................................. 643

Listendarstellung

Beschreibungsliste ................................................... 137

geordnet ....................................................................... 133

nummeriert ................................................................ 133

Nummerierung ändern .......................................... 134

Nummerierung umdrehen ................................... 133

ungeordnet ................................................................. 132

verschachteln ............................................................. 135

Listeneintrag <li> .......................................................... 132

Literale ............................................................................... 726

Local Storage ................................................................... 906

location ........................................................................... 1241

location-Objekt .............................................................. 788

hostname .................................................................... 789

href ................................................................................. 789

pathname .................................................................... 789

protocol ........................................................................ 789

M

Maßeinheiten ................................................................. 397MathML ............................................................................. 241Math-Objekt .................................................................. 1223max-height ...................................................................... 509@media ................................................................... 534, 536media

handheld ...................................................................... 534Media Queries ............................................. 326, 531, 534

<meta name="viewport"> ..................................... 550aspect-ratio ................................................................. 539color ............................................................................... 539device-aspect-ratio ................................................... 539device-height .............................................................. 539device-width ................................................................ 539height ............................................................................. 539max-aspect-ratio ...................................................... 539max-color ..................................................................... 539max-device-aspect-ratio ........................................ 539max-device-height ................................................... 539max-device-width ..................................................... 539max-height .................................................................. 539max-resolution .......................................................... 539max-width ................................................................... 539min-aspect-ratio ....................................................... 539min-color ...................................................................... 539min-device-aspect-ratio ......................................... 539min-device-height .................................................... 539min-device-width ...................................................... 539min-height ................................................................... 539min-resolution ........................................................... 539min-width .................................................................... 539orientation .................................................................. 539orientation: landscape ........................................... 567orientation: portrait ................................................ 567Rasterlayout ............................................................... 590resolution ..................................................................... 539width .............................................................................. 539

Media-API ......................................................................... 860Menüleiste ........................................................................ 647<meta charset="UTF-8"> ............................................. 171Millimeter ......................................................................... 398MIME-Sniffing .............................................................. 1127MIME-Typen ....................................................... 202, 1121min-height ....................................................................... 509Mixins ............................................................................. 1042mm ...................................................................................... 398Mobile First ...................................................................... 569Modernizr ......................................................................... 705Modulares CSS ................................................................ 697MP3 abspielen ................................................................. 251


Index

1261

N

Namenskonvention ....................................................... 74

Navigationsleiste ........................................................... 647

navigator ....................................................................... 1235

navigator-Objekt ........................................................... 790

Normalisierung CSS ..................................................... 699

normalize.css .................................................................. 700

<noscript> .......................................................................... 88

Number-Objekt ........................................................... 1221

O

Objekte JavaScript ......................................................... 757

Offlinedaten .................................................................... 901

<ol>

list-style-type .............................................................. 643

Onlineshop ........................................................................ 33

Outline ..................................................................... 112, 114

overflow

auto ................................................................................ 521

P

pc .......................................................................................... 398

PHP

Form-Mailer ................................................................ 294

Pica ...................................................................................... 398

Pixel .................................................................................... 398

Polyglottes Markup ................................................... 1117

position ............................................................................. 451

Positionierung ................................................................ 451

absolute ........................................... 457, 497, 502, 652

fixe .................................................................................. 459

float ................................................................................ 472

relative .......................................................................... 454

statische ....................................................................... 452

POST-Methode ............................................................... 296

Protokoll ............................................................................. 76

Prozent .............................................................................. 399

pt .......................................................................................... 398

Punkt .................................................................................. 398

px ......................................................................................... 398

Q

Querformat

orientation .................................................................. 567

Query String .................................................................... 297

R

rad ....................................................................................... 406

Rahmen ............................................................................. 431

Schmuckrahmen ...................................................... 432

Rahmen gestalten ......................................................... 429

Rasterlayout .................................................................... 572

border-box .................................................................. 595

Media Queries ............................................................ 590

Rasterlayout � Gridlayout

Recommendation ......................................................... 427

Referenzierung ................................................................. 76

RegExp-Objekt .............................................................. 1233

Reguläre Ausdrücke ..................................................... 285

rem ............................................................................. 399, 626

Responsive Layouts ..................................................... 531

Responsive Webdesign ...................................... 531, 534

rgb() .................................................................................... 403

rgba() .................................................................................. 403

RGB-Mischung ............................................................... 403

Transparenz ............................................................... 403

Rich Internet Application ............................................. 34

Ruby-Annotation .......................................................... 168

Runde Ecken hinzufügen .......................................... 447

S

Sass ................................................................................... 1045

Schlagschatten ............................................................... 641

Schlagschatten hinzufügen ...................................... 446

Schriftarten ..................................................................... 608

Webfonts ...................................................................... 613

Schriftformatierung .................................................... 633

Schriftgröße ........................................................... 569, 624

em ................................................................................... 624

Pixel ............................................................................... 628

Punkt ............................................................................. 628

relative (em) ............................................................... 624

rem ................................................................................. 626

Schlüsselwörter ......................................................... 624

Schriftklassen ................................................................. 608

Schriftschnitt

fett .................................................................................. 629

kursiv ............................................................................. 629

Scratchpad ....................................................................... 716

screen ............................................................................... 1236

screen-Objekt ................................................................. 787

availHeight ................................................................. 788

availWidth .................................................................. 788

colorDepth .................................................................. 788

height ............................................................................ 787


Index

1262

pixelDepth ................................................................... 788

width ............................................................................. 787

Sektionselemente ......................................................... 103

Selektoren .................................................. 312, 327, 1201

Attributselektor (Attributwert) ........................... 344

Attributselektor (Präsenz) .................................... 342

Attributselektor (Teilwert) .................................... 348

Geschwisterselektor ................................................ 374

Gewichtung ................................................................ 392

gruppieren .................................................................. 332

ID-Selektor .................................................................. 336

jQuery ........................................................................... 961

Kindselektor ............................................................... 371

Klassenselektor ......................................................... 333

Kombinatoren ........................................................... 366

Muster ........................................................................... 328

Nachbarselektor ....................................................... 372

Nachfahrenselektor ................................................. 368

Negations-Pseudoklasse ....................................... 363

Performance ............................................................... 376

Pseudoklassen ........................................................... 351

Sprach-Pseudoklasse .............................................. 362

Struktur-Pseudoklassen ......................................... 356

Typselektor ................................................................. 329

Universalselektor ..................................................... 339

Userinterface-Pseudoklassen .............................. 353

verschachteln ............................................................. 367

Selektoren � CSS-Selektoren

Semantisches HTML .................................................... 139

Server Sent Events ........................................................ 921

event.data ................................................................... 921

EventSource-Objekt ................................................. 921

onmessage .................................................................. 921

Session Storage .............................................................. 906

Sniffer ................................................................................ 704

Spam .................................................................................. 200

Spezifität ........................................................................... 392

Sprites ................................................................................ 665

Sprungmarke .................................................................. 205

SSE API ............................................................................... 921

Standalone tags ................................................................ 63

Standort ermitteln ....................................................... 878

Stapelung ......................................................................... 462

Statische Webseiten ........................................................ 35

String-Objekt ................................................................ 1217

SVG-Elemente

<circle …/> ................................................................... 239

<ellipse …/> ................................................................. 239

<line …/> ...................................................................... 239

<path …/> .................................................................... 239

<polygon …/> .............................................................. 239

<polyline …/> .............................................................. 240

<rect …/> ....................................................................... 239

<text>…</text> .......................................................... 240

SVG-Format ..................................................................... 235

<img> ............................................................................. 236

<svg> .............................................................................. 237

SVG-Tags ........................................................................... 238

Symbole ............................................................................. 619

T

Tabellen ................................................................... 177, 653

beschriften ......................................................... 193, 660

feste Breite ................................................................... 654

Tabellenlayout ................................................................ 510

Text einrücken ................................................................ 638

Text hochstellen <sup> ............................................... 163

Text tiefstellen <sub> .................................................. 163

Textausrichtung ............................................................ 635

vertikal .......................................................................... 636

Textauszeichnungen ................................................... 148

textContent ..................................................................... 806

text-decoration .............................................................. 639

Textgestaltung ................................................................ 607

text-transform ................................................................ 631

Textunterstrich .............................................................. 163

Timing Events ................................................................. 786

Transformieren .............................................................. 671

drehen ........................................................................... 673

neigen ............................................................................ 674

skalieren ....................................................................... 672

verschieben .................................................................. 674

transition .......................................................................... 677

transition-delay ......................................................... 678

transition-duration .................................................. 678

transition-property .................................................. 678

transition-timing-function ................................... 678

Transparenz ..................................................................... 441

Trennungsstrich ............................................... 123

truthy ................................................................................. 731

turn ...................................................................................... 406

typeof-Operator ............................................................. 907

U

Übergänge ........................................................................ 677

Überschriften .................................................................. 111

Unicode ............................................................................. 172

Universalselektor, Gewichtung ............................... 393

Unterstreichen ............................................................... 639


Index

1263

Untertitel

Video, Audio ............................................................... 247

URL ........................................................................................ 76

UTF-8 ................................................................. 92, 171, 172

V

Validieren

HTML ............................................................................... 50

Vektorgrafiken ............................................................... 235

<img> ............................................................................ 236

<svg> ............................................................................. 237

Vererbung

CSS .................................................................................. 381

inherit ............................................................................ 386

Versalien ........................................................................... 631

Verweissensitive Grafiken ......................................... 222

Verweistext ...................................................................... 189

Verzeichnisnamen .......................................................... 75

Verzeichnisstruktur ....................................................... 75

vh ......................................................................................... 399

Videos

abspielen ...................................................................... 244

steuern .......................................................................... 860

YouTube ....................................................................... 250

Viewport ................................................................. 540, 550

Breite .............................................................................. 399

Höhe .............................................................................. 399

Resizer ........................................................................... 693

vw ........................................................................................ 399

W

Web SQL ............................................................................ 910

Web Storage ..................................................................... 906

clear() ............................................................................. 907

getItem() ....................................................................... 907

localStorage ................................................................ 906

removeItem() .............................................................. 907

sessionStorage ........................................................... 906

setItem() ....................................................................... 907

Web Workers ................................................................... 912

onerror .......................................................................... 918

onmessage .................................................................. 916

postMessage() ............................................................ 915

self.close() .................................................................... 919

terminate() .................................................................. 919

Worker-Objekt ........................................................... 915

Webbrowser ....................................................................... 44

Standardstylesheet .................................................. 389

Webbrowser-Präfixe .................................................... 427

Webbrowser-Sniffer ..................................................... 704

Webbrowser-Test

CSS .................................................................................. 690

Webbrowser-Weiche .................................................... 703

Webfonts .......................................................................... 613

Webformulare ................................................................ 261

WebGL ............................................................................... 928

Web-Konsole ................................................................... 716

Weblinks ........................................................................... 189

Weblog .................................................................................. 31

Webplattform .................................................................... 34

Webpräsenz ........................................................................ 31

WebRTC ............................................................................. 927

Webserver ........................................................................... 38

Webshop .............................................................................. 33

WebSockets ..................................................................... 925

WebVTT-Format ............................................................ 248

window.close() ............................................................... 783

window-Objekt .................................................. 781, 1237

alert() ............................................................................. 784

close() ............................................................................ 783

confirm() ...................................................................... 784

innerWidth .................................................................. 781

open() ............................................................................ 782

outerWidth .................................................................. 781

prompt() ....................................................................... 784

setInterval() ................................................................ 786

Winkelmaße .................................................................... 405

Working Draft ................................................................. 427

Wortabstand ................................................................... 634

Wurzel-Em ....................................................................... 399

WYSIWYG-Editor .............................................................. 44

X

x-Höhe ............................................................................... 399

XHTML5 .......................................................................... 1116

XML-Deklaration ......................................................... 1117

XMLHttpRequest-Objekt ........................................... 941

Y

YAML 4 ............................................................................ 1024

Layout ......................................................................... 1029

YouTube

abspielen über ........................................................... 250

Z

Zeichencodierung .................................................. 92, 170

Zeilenabstand ................................................................. 631


Index

1264

Zeilenumbruch

<br> ................................................................................ 122

<wbr> ............................................................................ 123

verhindern ................................................................... 124

Zeitangaben .................................................................... 406

Zentimeter ....................................................................... 398

Zielanker ........................................................................... 205

z-index ............................................................................... 462

Zoll ....................................................................................... 398


Wissen, wie’s geht.

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Jürgen Wolf

HTML5 und CSS3 – Das umfassende Handbuch1.264 Seiten, gebunden, 2. Auflage 2016 44,90 Euro, ISBN 978-3-8362-4158-8

www.rheinwerk-verlag.de/4129

Jürgen Wolf ist Web- und Softwareentwickler sowie Autor mehrerer Standardwerke zu Programmierung und Fotografie. Ihm gelingt es auf hervorragende Weise, Theorie verständlich zu machen und mit Beispielen aus der Programmierpraxis zu verbinden.

Wissen, wie’s geht.Wissen, wie’s geht.

https://www.rheinwerk-verlag.de/html5-und-css3_4129/?GPP=lpn

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

Documents

HTML5 und CSS3 – Das umfassende Handbuch · Mit HTML5 wurden alle Attribute des einleitenden table -Elements, die zur Formatierung von Tabellen verwendet wurden, entfernt. Wie am