HTML5 und CSS3 – Das umfassende Handbuch Tabellen, Hyperlinks und Bilder 182 sollten Sie zur Formatierung nur noch CSS verwenden. Für das table -Element unterstützt HTML5 im Augenblick

Leseprobe

In 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 vollständige Inhalts- und Stichwortverzeichnis des Buches.

Jürgen Wolf

HTML5 und CSS3 – Das umfassende Handbuch1.237 Seiten, gebunden, Mai 2015 39,90 Euro, ISBN 978-3-8362-2885-5

www.rheinwerk-verlag.de/3612

»Tabellen, Hyperlinks und Bilder« »Das Layout mit CSS gestalten« »Weitere interessante HTML5-Features«

Inhalt

Index

Der Autor

Leseprobe weiterempfehlen

Wissen, wie’s geht.

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/3612/leseprobe_rheinwerk_html5_css3_handbuch.pdf&subject=Leseprobe:%20%C2%BBHTML5%20und%20CSS3%20%E2%80%93%20Das%20umfassende%20Handbuch%C2%AB

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

175

5

Kapitel 5

Tabellen, Hyperlinks und Bilder

In diesem Kapitel lernen Sie weitere Elemente von HTML kennen.

Genauer gesagt, erfahren Sie hier, wie Sie Tabellen, Hyperlinks und

Bilder Ihrer Webseite hinzufügen und verwenden können.

Grundlegende und essenzielle HTML-Elemente, die bisher noch nicht beschrieben

wurden, werden in diesem Kapitel zusammengefasst. Sie erfahren mehr zu folgen-

den 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 auch 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.

� Bilder: Eine Webseite ohne Bilder, Grafiken oder Logos ist heutzutage kaum noch

vorstellbar, weshalb Sie hier auch erfahren werden, wie Sie einem HTML-Doku-

ment Bilder hinzufügen.

� Verweissensitive Grafiken: Hierbei erfahren Sie, wie Sie mehrere Hypertextlinks

innerhalb einer Grafik einbetten können.

� Favoriten-Icons: Jeder kennt diese kleinen Icons in der Adressleiste, dem Tab oder

den Bookmarks. Hier erfahren Sie, wie Sie ein solches Favicon einer Webseite hin-

zufügen.

5.1 Daten in einer Tabelle strukturieren

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

kurse, Finanzdaten, Reisepläne, Zugfahrpläne, Busfahrpläne, Reiseberichte oder

Sportergebnisse in einem Raster aus Zeilen und Spalten darstellen wollen. HTML bie-

tet hierbei sehr gute und viele Möglichkeiten an, eine solche Tabelle zu strukturieren.

Formatierung mit CSS

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

zeichnung verwendet wird, gilt dies auch für Tabellen in HTML. Tabellen in HTML bie-

2885.book Seite 175 Donnerstag, 30. April 2015 12:35 12

5 Tabellen, Hyperlinks und Bilder

176

ten keinerlei Formatierungsmö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, wie es in

Abschnitt 14.3, »Schönere Tabellen mit CSS gestalten«, beschrieben wird.

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 hingeschrie-

ben. 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 dann die einzelnen Zellen

(oder auch Spalten) mit <td> und </td> (td = table data, deutsch: Tabellendaten).

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über-

schrift). Das th-Element können Sie genauso verwenden wie das td-Element, nur dass

die Webbrowser dieses Element gewöhnlich durch eine in der Spalte zentrierte Fett-

schrift hervorheben. Wenn es sinnvoll ist, sollten Sie Tabellenüberschriften immer

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.

HTML-Element Bedeutung

<table> Tabelle

<tr> Tabellenzeile

<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

Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente



177

5

Abbildung 5.1 Eine grundlegende Tabellenstruktur in HTML

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

Webbrowser-Statistik von einer Webseite in einem Raster zusammengefasst und

übersichtlich dargestellt 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>

<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>



178

<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 Formatie-

rung dar. Die Höhe und Breite einer Tabelle wird gewöhnlich gemäß dem enthalte-

nen Inhalt ausgegeben.

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-Elemente verwenden. Theoretisch könnten Sie darin auch eine weitere kom-

plette 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 ganz

alten Webbrowsern können Sie zudem noch zur Sicherheit ein erzwungenes Leerzei-

chen 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 über-

spannen) 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 schon erahnen können, wird colspan für das Zusammen-

fassen von Spalten und rowspan für das Zusammenfassen von Zeilen verwendet.



179

5

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><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 der Rahmen der Tabelle mit CSS gestylt, damit

das Ergebnis von colspan deutlicher sichtbar ist.

Sie können sehr schön sehen, wie sich hier am Montag die Zelle Fotoshooting (out-

door) dank colspan="2" über 2 Spalten vom Vormittag und Mittag überspannt. Glei-

ches gilt auch am Dienstag für die Spalte Fotoshooting (Porträt), was hier von Mittag

bis Nachmittag zusammenfasst wurde.

Bei der Verwendung colspan müssen Sie auch 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.



180

Abbildung 5.3 Zusammenfassen von Spalten mit dem Attribut »colspan«

Es spricht übrigens nichts dagegen, Spalten in mehr als zwei Zellen zusammenzufas-

sen. Hierbei müssen Sie allerdings immer (logischerweise) auf die Anzahl der tatsäch-

lich vorhandenen Spalten achten. Folgendermaßen könnten Sie z. B. am Dienstag das

Fotoshooting (Porträt) über drei Spalten zusammenfassen:

…<tr><th scope="row">Dienstag</th><td colspan="3">Fotoshooting (Portrait)</td>

</tr><tr>

…

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

werden.

Das »scope«-Attribut von <th>

Im Beispiel wurde auch das scope-Attribut beim th-Element verwendet. Damit kön-

nen Sie angeben, 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, wo jetzt am Dienstag und

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

…<table><tr>



181

5

<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">Strassenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Portrait)</td>

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

</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 ausgedehnt haben, wodurch dieser Eintrag den Platz in der darunter lie-

genden 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 Forma-

tierung von Tabellen verwendet wurden, entfernt. Wie am Anfang bereits erwähnt,



182

sollten Sie zur Formatierung nur noch CSS verwenden. Für das table-Element

unterstützt HTML5 im Augenblick lediglich das border-Attribut, bei dem der Wert

allerdings nur "1" oder "" sein darf, um einen Rahmen anzuzeigen. Aber auch hier

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

brauchen Sie nur folgendes CSS-Konstrukt im Kopf des HTML-Dokuments hinzu-

fü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 unter-

stü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.

Webseiten-Layout mit Tabellen?

Sie sollten Tabellen nicht mehr verwenden, um das Layout einer Webseite zu erstel-

len. Dies wurde im vorherigen Jahrtausend gemacht. Ich erwähne es nur, weil Sie

sich vielleicht schon den einen oder anderen Quelltext einer älteren Webseite ange-

sehen haben und sich wohl noch ansehen werden und immer noch zahlreiche Web-

seiten aus dieser Zeit vorhanden sind, die eine Tabelle zum Layouten bzw. Ausrichten

des Dokumenteninhalts verwenden. Meistens handelt es sich einfach 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,

das umfassend ab Kapitel 8 behandelt wird.

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 einteilen.

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

head, deutsch: Tabellenkopf). Sinnvollerweise sollten Sie dafür auch 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). Wol-

len Sie einen Bereich als Tabellenfuß notieren, fassen Sie diesen zwischen <tfoot>

und </tfoot> (tfoot = table foot, deutsch: Tabellenfuß) zusammen.



183

5

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><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

betrachten, werden Sie feststellen, dass der Webbrowser in der Lage ist, die Reihen-

folge der Tabelle selbstständig richtig wiederzugeben. Obwohl im Quelltext der Fuß-

bereich ganz oben angegeben wurde, wird er vom Webbrowser passend unten

angezeigt.



184

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

<tfoot> im Einsatz

Die Aufteilung einer Tabelle in drei verschiedene Bereiche ist optional und beein-

flusst in der Regel auch nicht die Darstellung im Webbrowser. Es handelt sich um

eine rein semantische Darstellung. Allerdings werden diese Elemente häufig verwen-

det, um das Erscheinungsbild dieser 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.

<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>



185

5

Auch beim Ausdruck sehr langer Tabellen über mehrere Seiten könnte der Webbrow-

ser diese Aufteilung verwenden, um auf jeder Seite den Kopf- und Fußbereich der

Tabelle mitauszudrucken, 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 scrol-

len, während die Kopf- und Fußzeile fest stehen bleiben. Leider unterstützt noch kein

Webbrowser diese Funktionen, aber auch 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

aufteilen konnten, können Sie mit den Elementen <colgroup> und <col> auch die ein-

zelnen Spalten 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 Spal-

tengruppe öffnen Sie mit <colgroup> und schließen sie wieder mit </colgroup> (col-group = 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-Ele-

ment 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>




186

</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.

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

Sie eine Gruppe mit zwei Spalten und mit einer Spalte.

<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>



187

5

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

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 Auftei-

lung in drei Spalten finden Sie in Abbildung 5.9 dargestellt.

Abbildung 5.9 Semantische Aufteilung in drei Spalten

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

<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>



188

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

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

ment verwenden, das unmittelbar nach dem öffnenden <table>-Tag verwendet wer-

den 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 folgen. Außerdem kann nur eine Beschriftung pro Tabelle verwendet werden.

Hierzu ein einfaches Beispiel:

…<table><caption>Browserstatistik 08/2015</caption>

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


</tr>……

</table>…


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



189

5

<caption> mit CSS formatieren

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

Mit CSS ist es aber kein Aufwand, mithilfe der CSS-Eigenschaften text-align und

caption-side die Ausrichtung und die Position der Tabellenbeschriftung woanders

zu platzieren.

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

Sie die neuen HTML5-Elemente detail und summary zwischen <caption> und </cap-

tion> setzen.

Abbildung 5.11 Informationen zum Auf- und Zuklappen dank der neuen

HTML5-Elemente »detail« und »summary«. Das Beispiel dazu finden Sie unter

»/Beispiele/Kapitel005/5_1_6/index2.html«.

Beschriften einer Tabelle mit <figcaption>

Auf das figcaption- und figure-Element wurde bereits in Abschnitt 4.2.3, »Geson-

derte Beschriftung von Inhalten mit <figure> und <figcaption>«, eingegangen. Es

bietet sich auch für Tabellen an, diese zwischen <figure> und </figure> zu verpacken

und eine Beschriftung dieser 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 August 2015</h1><figure><table><tr>



190

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


</tr>…</table><figcaption>Tabelle 1: Browserstatistik 08/2015</figcaption></figure></article>

…


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

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

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. Hyper-

links, oft auch nur Links oder Verweise genannt, werden Sie benötigen, um Ihr Pro-

jekt zu strukturieren und zu verlinken. Ausgehend von Ihrer Hauptseite, benötigen

Sie oft Verweise zu weiteren Unterseiten und eventuell auch 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 aber auch Links zu anderen Webseiten oder anderen Dokumenten erstellen, die

sich ganz woanders im Internet befinden.



191

5

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 Ver-

weistext und kann aktiviert werden, wenn Sie im öffnenden <a>-Tag das href-Attri-

but verwenden. Als Linktext können Sie notieren, was Sie wollen, aber nicht immer

ist es hilfreich, einfach »Bitte hier klicken« hinzuschreiben. Mit einem sinnvollen

Linktext helfen Sie Ihren Besuchern, schneller dorthin zu gelangen, wo sie hinwollen,

und auch Personen mit Screenreadern. Zwischen <a> und </a> können auch andere

Elemente als ein Text stehen. Häufig finden Sie hier z. B. auch eine Grafik als Link

wieder.

Erlaubtes zwischen <a> und </a>

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

ken zwischen <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. ver-

wenden. Praktisch können Sie fast alles zwischen <a> und </a> einsetzen, abgesehen

von interaktiven Elementen wie Links, Formularelementen, audio, video. In HTML

4.01 waren nur sogenannte Inline-Elemente erlaubt (z. B. strong, em usw.), die zur

Textauszeichnung verwendet wurden. Trotzdem empfehle ich Ihnen nicht, zu viel

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

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

sie daran gewöhnt sind, einzelne Links im traditionellen Link-Stil zu aktivieren.

Natürlich hängt dies auch vom Inhalt der Webseite ab. Ich werde hier nicht mehr

näher darauf eingehen, aber Sie wissen jetzt, dass Ihnen in HTML5 »mehr« HTML-Ele-

mente 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 auch einfach validieren (siehe Abschnitt 1.5.5, »Geschriebenes HTML über-

prüfen«).

Das wichtigste Attribut, mit dem das a-Element fast immer 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.13 Der klassische Aufbau eines Hyperlinks

Ein Linktext wird gewöhnlich vom Webbrowser (meistens in Blau) unterstrichen.

Dies können Sie aber (wie immer) mit CSS jederzeit ändern.

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

Dies ist die Seite, wohin der Hyperlink führt



192

Zum Nachlesen

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

relative Pfadangaben wurde bereits in Abschnitt 3.3, »Exkurs: Namenskonvention

und Referenzierung«, 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 Webseite erstellen, dürften diese Verweise wohl die ersten Links sein,

die Sie verwenden, um die losen Sammlungen von HTML-Dokumenten zu einer

zusammenhängenden Webseite zu strukturieren – genauer: die Navigation der Web-

seite zu erstellen. Wenn Sie einen Link zu einer anderen Seite derselben Webseite

angeben wollen, müssen Sie in der Regel nicht den kompletten Domainnamen mitan-

geben, sondern verwenden gewöhnlich eine relative URL. Folgende in Abbildung 5.14

abgedruckte Verzeichnisstruktur sei als Beispiel gegeben.

Abbildung 5.14 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:

html

seiten

index.html

links.html

about.html

impres-sum.html



193

5

…<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>

…


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

Seiten derselben Webseite jede Seite besucht und betrachtet werden.

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

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

Angabe der relativen URL allerdings beachten (siehe Abbildung 5.14), dass sich die Sei-

ten (in diesem Beispiel) in einem Unterordner 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.9 /Beispiele/Kapitel005/5_2_1/seiten/links.html



194

Hier können Sie sehr schön 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.

Abbildung 5.16 Das HTML-Dokument »links.html«

5.2.2 Links zu anderen Webseiten einfügen

Links zu anderen Webseiten werden genauso notiert wie die Links zu den Seiten der-

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

Adresse, also die absolute URL, zu dieser Seite angeben müssen. Hierzu wieder 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/html/wg/drafts/html/master/">neuen Entwurf</a> für HTML vorgelegt, welche inVersion 5.1 weiterentwickelt wird ...

</p><aside><h3>Weiterführende Links</h3><nav><ul><li><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML 5.1 Nightly</a></li>



195

5

<li><a href="http://www.w3.org/">W3C</a></li><li><a href="http://www.whatwg.org/">WHATWG</a></li></ul></nav>

</aside></article>

…


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.



196

5.2.3 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 Ver-

weisziel in einem neuen Fenster oder Tab geöffnet wird. Hierbei müssen Sie target

nur den Attributwert _blank übergeben. Ein Beispiel hierzu:

<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: http://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 vorran-

gig, 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 gele-

sen hat.

Das target-Attribut war in HTML 4.01 in der Strict-Variante nicht mehr erlaubt und ist

aber mit HTML5 wieder voll einsatzfähig. Neben dem am meisten verwendeten Attri-

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

Fenster), _top (= oberste Fenster-Ebene) und Namen von Fenstern verwenden, die mit

einen 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 immer an die etwas unerfah-

reneren Besucher denken, die eben nicht so im World Wide Web unterwegs sind oder

eben nicht so unterwegs sein wollen. Setzen Sie das Attribut target="_blank" spar-

sam ein und, wenn möglich, weisen Sie den Besucher darauf hin, dass ein neues Fens-

ter oder Tab geöffnet wird, wenn er den Link aktiviert.

5.2.4 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.:



197

5

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

</footer>…


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.



198

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

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

Verknüpfung auch funktioniert. Dafür muss entweder der Webbrowser das Erstellen

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

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

Anwendung verwendet bzw. eingerichtet hat, sondern lediglich das klassische Web-

mail im Webbrowser nutzt, funktioniert der mailto-Verweis nur, wenn der Benutzer

den Webbrowser entsprechend konfiguriert hat. Außerdem gibt es aber auch noch

Webbrowser, die man dafür gar nicht konfigurieren kann. Es ist daher wohl immer

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 wieder diskriminierend 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 einfach durch (at) ausgetauscht wird (z. B. webmaster (at) dieter-

baer.de). Ebenso wird auch gerne noch der Punkt mit (dot) beschrieben (z. B.: web-

master (at) dieter-baer (dot) de). Natürlich bedeutet das dann auch, dass der Besu-

cher die E-Mail-Adresse von Hand eingeben muss.

Alternativ könnten Sie auch 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

jetzt nicht mehr im Quelltext so einfach erkennen. Ein richtiger Schutz ist das aller-

dings nicht. Auch die Softwareentwickler von Spam-Crawlern wissen, wie man sol-

che Informationen verwerten 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.



199

5

5.2.5 Links zu anderen Inhaltstypen setzen

Wenn Sie Links zu anderen, nicht im Web gebräuchlichen Dokumententypen wie

z. B. Word-, Excel-, PDF-Dokumenten setzen, hängt es vom Webbrowser ab, wie er die-

sen Dokumententypen weiterbehandelt. Darauf haben Sie als Webentwickler keinen

Einfluss. Hier lautet zunächst die allgemeine Empfehlung, weitverbreitete Formate

zu verwenden. So ist die Wahrscheinlichkeit höher, dass bei einem Link auf ein PDF-

Dokument der Webbrowser einen entsprechenden PDF-Reader aufruft und das

Dokument darin zum Lesen öffnet, als wenn der Link zum Inhaltstyp ein plattform-

abhä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 jetzt genau passiert, kann nicht

100%ig vorhergesagt werden und hängt vom Webbrowser ab. Beim PDF-Dokument

dürfte der Webbrowser wissen, 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, dass entsprechende

Plug-in herunterzuladen und zu installieren. Andere aber wiederum nicht.

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

bietet der Webbrowser häufig einen Dialog an, das Dokument mit Microsoft Word zu

öffnen, oder aber die Möglichkeit, eine entsprechende Anwendung auszuwählen, mit



200

der Sie dieses Dokument öffnen wollen. Häufig wird auch noch zusätzlich die Mög-

lichkeit zum Herunterladen des Dokuments angeboten.

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

mit dem Word-Dokument auf dem System. Die Anwendung zum Öffnen des Doku-

ments kann hier aber 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 wie-

derzugeben. 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 allerdings 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 auch 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 sol-

che Angabe des Dateiformats eigentlich 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)«.



201

5

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

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

cher 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 verwenden, aber es ist auch empfehlenswert, genauere

Angaben direkt beim Linktext zu erwähnen. 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 vielleicht verdutzt reagieren, wenn dieser Link ein PDF-Dokument ist, das viel-

leicht 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.6 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 anderer 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 Down-

load anzubieten, auch wenn er die Datei selbst anzeigen könnte oder das entspre-



202

chende 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 auch als allein stehendes Attribut verwenden, wie

im ersten Beispiel mit dem PDF-Dokument zu sehen ist. Der Name der Datei, die he-

runtergeladen wird, entspricht dann der Angabe in href (hier: dokument.pdf). Enthält

der Link in href keinen sinnvollen 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 Dokumentenname ganges.mov lautet, der Downloadname der Datei

dann aber einfach film.mov heißt. Bei XHTML müssen Sie bei download immer einen

Dateinamen verwenden, weshalb im dritten Beispiel mit dem Word-Dokument für

href und download derselbe Dokumentenname 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 angeboten werden.

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

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

darauf hinweisen, was er hier herunterlädt und womit er das Dokument betrachten

oder weiterverwenden kann. Wenn Sie z. B. Excel-Tabellen mit einem Jahresumsatz-

bericht zum Download anbieten, sollten Sie den Leser auch darüber informieren,

welche Software er benötigt, um diese Tabelle zu betrachten.

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

weis oder ein Link zu einer Software hinzugefügt werden, wie ein solches Archiv ent-

packt 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änd-

lich, bloß weil Sie täglich mit unzähligen Datenformaten zu tun haben, dass Ihre

Besucher dies auch tun. Auch empfiehlt es sich, beim Download die Dateigröße mit-

anzugeben. 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>…



203

5

Hier wurde neben dem title-Attribut auch noch das Dateiformat (hier: ZIP-Archiv)

und die Dateigröße erwähnt. Zusätzlich wurden noch ein paar klein gedruckte Infor-

mationen zwischen <small> und </small> notiert.

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

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

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

der Webbrowser nicht kennt, werden wie gehabt entweder zum lokalen Speichern

angeboten, oder Sie können aus einer Liste von Anwendungen auswählen, mit wel-

cher Sie dieses Dokument öffnen wollen. Eine beliebte und fast immer funktionie-

rende Methode ist, die Dateien in das ZIP-Format zu packen und anzubieten.

5.2.7 Links zu bestimmten Teilen einer Webseite setzen

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

Abhandlung eines speziellen Themas auf einer Webseite zu lesen und dabei sehr

lange hoch- und herunterscrollen 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 dann mit einem gewöhnlichen Link mit dem a-Element anspringen

können. Vorbildlich werden solche Zielanker z. B. bei Wikipedia für das Inhaltsver-

zeichnis 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 Beispiel:

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

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

Doppelkreuz-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

verwenden 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>



204

<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><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 Sprungmar-

ken schneller zum gewünschten Abschnitt gelangen.

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



205

5

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

den 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.

Abbildung 5.24 … schneller zum gewünschten Abschnitt gelangen

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

Bevor Sie also einen Link zu einem bestimmten Teil innerhalb einer Webseite erstel-

len können, müssen Sie die Sprungmarke (oder auch einen Anker) mit dem globalen

Attribut id innerhalb eines öffnenden HTML-Tags festlegen. Im Beispiel wurde dies

bei den Hauptüberschriften <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 zu verwenden, um nicht den Überblick zu

verlieren und um auch hier einen semantisch sinnvollen Namen für das HTML-

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

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

geachtet.

»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="tech-niken"> wurde neu mit HTML5 eingeführt. Mit HTML 4.01 wurde dies noch mit dem

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



206

Auf einen Anker verweisen mit »#ankername«

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

Attributwert zum Anker in href angeben. Lautet der Anker z. B. <h2 id="techniken">,

müssen Sie vor diesen Ankernamen (hier mit: »techniken«) noch das Doppelkreuz-Zei-

chen # 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 gesprun-

gen, wo der Wert des Attributs id gleich »techniken« lautet. In diesem Beispiel wäre es

zum <h2>-Element 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-Doku-

ments zu erstellen. Voraussetzung hierfür ist, dass das andere HTML-Dokument

auch einen entsprechenden 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 Ver-

zeichnis 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 komplette URL dorthin angeben:

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

Selbstverständlich ist es auch möglich, einen Link auf Bereiche von fremden Websei-

ten zu verwenden. Allerdings sollte klar sein, dass Sie hier keinen Anker setzen, son-

dern 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 #Ver-

sionen springen. Allerdings setzt dies 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 Verlin-

kung mit dem a-Element der Fall gewesen wäre.



207

5

5.2.8 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.1 finden Sie

eine Übersicht über alle vorhandenen Attribute für das a-Element. Einige davon

haben Sie ja bereits kennengelernt.

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 Doku-

ments angeben. Als Angaben sind die üblichen Spra-

chenkürzel erlaubt (z. B. de für Deutschland).

media Damit können Sie Angaben zu den Medien machen,

wofür das Verweisziel optimiert wurde. Sie können

entweder Medientypen, durch Kommata 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 Informatio-

nen benötigen. Hiermit bestimmen Sie den Typ der

Verlinkung. Speziell für das a-Element 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 Ver-

weisziel ein übergeordneter 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 technischen Dokumen-

ten 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.

Tabelle 5.2 Attribute für Links mit »a«-Element



208

Veraltete Attribute

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

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

� rel="external": Damit geben Sie an, dass der Link

zu einem externen Webangebot gehört. Häufig

wird dieser mit CSS noch gesondert formatiert.

� rel="nofollow": Damit weisen Sie die Webcraw-

ler an, dem Link nicht zu folgen.

� rel="noreferrer": Hiermit weisen Sie den Web-

browser des Besuchers an, beim Anklicken des

Links keine Referrer-Adresse zu verwenden,

wodurch vermieden werden sollte, dass der Web-

server der Zieladresse keine Informationen erhält,

von woher der Besucher gekommen ist.

Nicht verwenden hingegen können Sie die Attribut-

werte icon, pingback, prefetch und stylesheet für a-

Elemente.

target Hier tragen Sie ein, wo das Verweisziel geöffnet wer-

den soll. Mögliche Werte dafür sind:

� _blank: neues Fenster/Tab

� _parent: Eltern-Fenster

� _self: aktuelles Fenster

� _top: oberste Fensterebene

� 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 fin-

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

Media Type)«. Diese Angabe ist immer dann sinnvoll,

wenn das Ziel kein HTML-Dokument ist.

5

Attribut Beschreibung HTML

Tabelle 5.2 Attribute für Links mit »a«-Element (Forts.)


493

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 praxisnä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 an Informa-

tionen hierzu zunächst erschlagend wirken.

Wenn Sie sich im Internet bereits ein wenig nach Layouts mit CSS umgesehen haben,

dürften Sie schnell auf fertige CSS-Frameworks gestoßen sein, die einem das Leben

erheblich einfacher 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> ver-

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

Mehr Informationen zu <main> finden Sie in Abschnitt 4.3.8, »<main> – Ein HTML-

Element für den Hauptinhalt«.

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 eingegan-

gen, d. h., Sie lernen flexible Layouts zu erstellen, die die Eigenschaften des Endge-

räts des Besuchers berücksichtigen.

� Auch auf etwas fortgeschrittene Themen wie das Erstellen eines Layouts mit

einem Raster (englisch: Grid) wird eingegangen.


13 Das Layout mit CSS gestalten

494

13.1 Exkurs: Was bedeutet feste und flexible Breite?

In den nächsten Abschnitten werden Sie eine Menge verschiedene Layouts kennen-

lernen. 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 auch 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 Desktopbild-

schirme 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 ent-

steht zwischen dem Seitenrand und dem eigentlichen Inhalt eine große unan-

sehnliche 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-Fens-

ters, und das Layout dehnt sich über die Bildschirmfläche aus oder wird ge-

schrumpft.

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

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


13.2 Ein zweispaltiges Layout erstellen

495

13

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

ausdehnen kann.

Als Nachteile einer flexiblen Breite sind zu nennen:

� Eine flexible Breite ist etwas schwieriger zu kontrollieren und auch nicht so ein-

fach 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 wer-

den. Auch bei extrem kleinen Bildschirmen können die Textzeilen so weit zusam-

mengestaucht 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 kleinen Bildschirmgröße herausragen und so anderen Text überdecken. Aber

auch Bilder lassen sich flexibel gestalten.


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

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

Hauptinhalt der Webseite und ein kleinerer Teil entweder die Navigation oder ein-

fach eine weitere Seitenleiste mit marginalen Informationen und/oder weiteren

Links. Bei dem Beispiellayout, wie es in Abbildung 13.1 zu sehen ist, sei das Haupt-

augenmerk auf die beiden Spalten mit dem Hauptinhalt und (hier) der Seitenleiste

gerichtet.

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

Navigation – <nav>

Hauptinhalt

<main>

<div id=″main″>

oder

Seitenleiste

<aside>

Kopfleiste – <header>

Fußleiste – <footer>



496

13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung

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

absoluten Positionierung vorgestellt werden. Das Prinzip basiert darauf, einen Teil

der Spalte mit 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 prozentuale Angabe der Breite (width) ver-

wendet.

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

Die rechte Spalte wurde mit einer absoluten Positionierung aus dem Dokumenten-

fluss genommen 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 %) zugewiesen, und der Hauptinhalt selbst bekommt 75 %, also

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 demonst-

riert, dessen 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 {

Navigation – <nav>

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

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

Kopfleiste – <header>

Fußleiste – <footer>



497

13

position: absolute;right: 0;margin: 0;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><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul><p>Lorem ipsum dolor … </p>

</aside><main><article><h1>Artikel 1</h1><p>Lorem ipsum dolor sit … </p>

</article><article><h1>Artikel 2</h1><p>Lorem ipsum dolor … </p>

</article></main>

<footer>Fußzeile</footer>…




498

Abbildung 13.3 Das zweispaltige flexible Layout bei der Darstellung

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

leiste absolut auf der linken Seite positionieren und den Außenabstand des Haupt-

inhalts mit margin-left entsprechend einhalten. Hierzu müssten Sie den CSS-Code

dann 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%;

}…




499

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. Wol-

len Sie die maximale 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. Aus-

dehnung an.

Die Nachteile von diesem Layout

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

Angenommen, Sie entfernen im verwendeten Beispiel Artikel 2, wird die Fußzeile

zum Problem, weil Sie durch die absolute Positionierung der Seitenleiste das Ele-

ment aus dem Dokumentenfluss 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änger ist als der Inhalt der anderen Spalte daneben, können Sie diese Form des

Layouts mit der absoluten Positionierung verwenden.



500

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 prozentualen 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

dann ü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;



501

13

width: 450px;}

…


Beim festen Layout mit der Angabe von Pixeln ändert sich die Position der Seiten-

leiste und des Hauptinhalts nicht mehr, wenn Sie das Webbrowser-Fenster vergrö-

ßern oder verkleinern. 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 zwi-

schen dem rechten Webbrowser-Rand und dem Hauptinhalt eine größere Lücke

aufgrund der fixen Breitenangabe von der Seitenleiste und dem Hauptinhalt ent-

standen 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 quer-

scrollen.

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

zentrieren, 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 zu setzen.



502

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

zweispaltigen Layout, können Sie folgendermaßen den Hauptinhalt (<main>) hori-

zontal zentrieren:

…#wrapper {

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

}…

<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 natürlich neben der Breite des Hauptinhalts

auch die Seitenleiste berücksichtigt. 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 eingeschlossen. Jetzt »wandert« der Haupt-

inhalt immer horizontal mittig mit, wenn das Webbrowser-Fenster vergrößert oder

verkleinert wird. Das Verkleinern sollte natürlich nur bis zu einer gewissen Breite

erfolgen. Das Ergebnis sehen Sie in Abbildung 13.7.

Diese Art des horizontalen Zentrierens funktioniert natürlich auch in anderen Bei-

spielen und nicht nur wie hier beim Hauptinhalt von festen zweispaltigen Layouts.

In diesem Beispiel hätten Sie eine feste bzw. teilweise flexible horizontale Zentrie-

rung auch ohne das div-Element und den ID-Selektor wrapper mit dem Innenabstand

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



503

13

…main {

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

}…


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 Innenab-

stand verwenden.

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

zentriert.

13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen

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

Gegensatz 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.



504

Voraussetzung hierfür ist natürlich, dass Sie hinter den gefloateten Inhalten den

Bereich mit clear wieder aufheben, da Elemente ja mit float aus dem Dokumenten-

fluss herausgenommen werden.

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

HTML-Code können Sie sich wieder sparen, weil sich gegenüber den Beispielen zuvor

nichts geändert hat. Sie gestalten das ganze Layout lediglich immer mit CSS.

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

} /* Breite 22% + padding x 2 = 26% */main {float: right;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 immer 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 ja 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 bei-

den äußeren padding-Abständen rechts und links (2 × 2 %) ergibt. Insgesamt beträgt

die Breite des Zweispalters 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

Hauptinhalt mit float aus dem Dokumentenfluss genommen wurden, wird ein Klas-

senselektor 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.



505

13

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

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 auch schnell zum Nachteil werden,

wenn der Inhalt der Seite abhängig von der Breite des Bildschirms zu weit auseinan-

dergedehnt 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 optimal 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 Buchtypo-

grafie 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;



506

}…<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 also höchstens auf 720

Pixel schrumpfen. Wenn das Webbrowser-Fenster trotzdem kleiner als 720 Pixel ist,

wird ein horizontaler Scrollbalken 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 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.



507

13

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

sich das zweispaltige Layout nicht mehr weiter ausdehnt.

Höhe einschränken

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

Eigenschaften min-height und max-height, mit denen Sie die minimale und maxi-

male 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 auch möglich, ein zweispaltiges festes Layout mit float in Pixeln statt prozen-

tualer 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;



508

margin: 0;border: 0;width: 500px;

}.clear { clear: both; }

…


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

jetzt eine feste Breite von insgesamt 720 Pixeln haben. Damit außerdem der Haupt-

inhalt unter 720 Pixel nicht unterhalb der Seitenleiste rutscht, was ja durchaus gewollt

sein kann, wurde hier auch ein div-Element als Wrapper mit min-width und max-widtheingesetzt, wie es bereits im Beispiel /Beispiele/Kapitel013/13_2_5/index.html verwen-

det wurde, wo ausführlicher auf die minimale und maximale Breite eines Layouts ein-

gegangen wurde.

In der Praxis ist es aber 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 erstellen, und wird auch vom Internet Explorer ab Version 8 verstanden. Die ein-

zelnen Spalten können Sie ebenfalls mit der Eigenschaft display und dem 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

auch 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 eingegangen. 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 auch immer wieder diese CSS-Eigenschaft verwenden. Mit dieser Eigen-



509

13

schaft können Sie das Verhalten von HTML-Elementen beim Rendern im Webbrow-

ser verändern bzw. umdefinieren. So können praktisch Inline-Elemente einfach in

Block-Elemente oder Flow-Elemente umgewandelt werden. Im Beispiel mit dis-play:table wird das Element beim Rendern als Tabelle betrachtet und verhält sich

dann, grob gesagt, wie ein <table>-Element. Eine Übersicht über display und 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;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>

…




510

Hier wurde ein CSS-Tabellenlayout mit dem ID-Selektor wrapper mit display:tableerstellt. Im HTML-Code verwenden Sie einfach ein div-Element und stecken dazwi-

schen 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 ent-

sprechenden 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 Haupt-

inhalt keine. Bei der festen Größe haben Sie den Vorteil, dass die Seitenleiste immer

gleich breit bleibt, und der Hauptinhalt nimmt den Rest des Platzes in der Tabellen-

zeile daneben ein. Damit das Auseinanderdehnen oder Schrumpfen dieses Bereichs

auf ein gewisses Maß eingeschränkt wird, werden in der Tabelle im ID-Selektor

wrapper min-width und max-width gesetzt.

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 es in Abbil-

dung 13.12 sehen. Eine zusätzliche dritte Spalte kann verwendet werden, um dort

etwa die Hauptnavigation, weitere Informationen oder Sonstiges aufzunehmen. In

den nächsten Abschnitten werden Sie einige Techniken kennenlernen, mit denen Sie

solche dreispaltigen Layouts mit CSS umsetzen.


975

22

Kapitel 22

Weitere interessante HTML5-Features

Viele der Neuerungen von HTML5 sind nicht als HTML-Elemente,

sondern vielmehr als JavaScript-APIs hinzugekommen. Einige dieser

APIs sind relativ komplex, daher finden Sie in diesem Kapitel einen

Überblick und kurzen Einstieg in die HTML5-JavaScript-APIs.

Die einzelnen Abschnitte bestehen vorwiegend aus JavaScript-Code und sind daher

etwas komplexer als die Kapitel zuvor. Auf folgende APIs wird in diesem letzten Kapi-

tel etwas näher eingegangen:

� Geolocation-API: Hier erfahren Sie, wie Sie den Standort des Besuchers ermitteln

können.

� Drag&Drop-API: In diesem Abschnitt erfahren Sie, wie Sie HTML-Elemente inner-

halb des Webbrowsers per Drag & Drop verschieben können.

� Offlinedaten: Es gibt mehrere Arten von Offlinedaten. Mit Application Cache

erfahren Sie, wie Sie einzelne Dateien und Ressourcen offline verfügbar machen

können, wenn mal keine Internetverbindung besteht. Wie Sie außerdem Daten

lokal im Webbrowser speichern und wieder auslesen können, erfahren Sie mit

Web Storage.

� Web Workers: Dieses Hilfsmittel ist sehr gut für rechenintensive und länger lau-

fende JavaScripts geeignet, um diese nebenläufig im Hintergrund auszuführen,

ohne dass der Benutzer dies mitbekommt.

� Server Sent Events: Wie eine Webseite automatisch und regelmäßig ein Update

oder eine Nachricht vom Server bekommt, ohne eine gesonderte Anfrage dafür

gestellt zu haben, erfahren Sie mit den Server Sent Events.

� Weitere APIs: HTML5 ist ein ständig fortlaufender Standard, und es gibt noch eine

Menge weitere sehr nützlicher APIs, die am Ende im Schnelldurchlauf beschrieben

werden. Gesondert werden hier noch kurz WebSockets, WebRTC, Fullscreen API

und die File API beschrieben.


22 Weitere interessante HTML5-Features

976

Wichtige Anmerkung zu diesem Kapitel

An dieser Stelle muss unbedingt angemerkt werden, dass dies ein sehr schwieriges

Kapitel ist, weil hier extrem viele Informationen und Themen auf ganz wenig Platz

versammelt und auch die Codebeispiele zum Teil recht komplex sind. Betrachten Sie

dieses Kapitel einfach als eine grobe Übersicht über die vielen weiteren Themen und

APIs, die Ihnen in der Webentwicklung zur Verfügung stehen. Für eine umfassendere

Beschreibung der vielen Themen in diesem Kapitel bedarf es schon eines eigenen

Buches.

22.1 Den Standort ermitteln mit der Geolocation-API

Mit der Geolocation-API können Sie den Standort des Besuchers ermitteln, und das

Schöne ist, dass dies mit fast allen modernen Webbrowsern funktioniert. Der Web-

browser kann dabei mehrere Methoden nutzen, um den Standort des Nutzers zu

ermitteln. Da wären die IP-Adresse, Ihre WLAN-Verbindung, der Mobilfunkmast, mit

dem Ihr Smartphone verbunden ist, und natürlich die Position via GPS-Sender,

sofern dies vom Betriebssystem oder der Hardware unterstützt wird. Wenn ein Gerät

einen GPS-Sender enthält, wie dies in fast jedem handelsüblichen Smartphone mitt-

lerweile der Fall ist, funktioniert die Geolocation-API theoretisch auch offline ohne

Internetverbindung.

GPS

GPS steht für Global Positioning System und ist ein globales Navigationssatelliten-

system, mit dem die Position bestimmt werden kann.

Wie genau die Ermittlung der Position funktioniert, hängt somit auch vom verwen-

deten Gerät ab. Bei einem lokalen Desktoprechner, der nicht mit einem 3G-Modem

oder einem eigenen GPS-Modul ausgerüstet ist, kann die Genauigkeit der Position

nach IP-Adresse ziemlich variieren (was vom Provider abhängt). Ich lebe z. B. auf dem

Land, und bei meiner DSL-Infrastruktur wird die Position meines Serviceproviders

60 km von mir entfernt angezeigt. Verwende ich allerdings meine mobilen Geräte

wie ein Smartphone oder ein Tablet, in denen ein GPS-Modul integriert ist, ist die

Angabe häufig auf den Meter genau.

Datenschutz und Sicherheit

Es ist ziemlich beängstigend, wie einfach es heutzutage ist, den Standort des Benut-

zers zu ermitteln. Trotzdem können Sie jetzt nicht einfach hergehen und Ihre Besu-

cher auf der Webseite auf den Meter genau lokalisieren. Ohne ausdrückliche



977

22

Genehmigung vom Besucher bekommen Sie keine Positionsdaten. Bei den meisten

Webbrowsern erfolgt eine solche Abfrage am oberen Bildschirmrand in Form einer

Leiste (siehe Abbildung 22.1). Wie die Webbrowser diese Zustimmung oder Ableh-

nung speichern, ist häufig ziemlich unterschiedlich, kann aber auch jederzeit wieder

rückgängig gemacht werden.

Mehr zu den Sicherheitsbestimmungen und der Geolocation-API finden Sie in der

W3C-Spezifikation auf http://dev.w3.org/geo/api/spec-source.html.

Abbildung 22.1 Bevor Sie den Standort des Benutzers mit der Geolocation-API ermit-

teln können, benötigen Sie dessen Zustimmung.

Abbildung 22.2 Bei Google Chrome können Sie die Standortverfolgung über das ent-

sprechende Symbol in der URL-Leiste verwalten.

22.1.1 Die Geolocation-API in einem HTML-Dokument verwenden

Um die Geolocation-API verwenden zu können, müssen Sie zunächst überprüfen, ob

sie unterstützt wird. Hierzu ein grundlegendes Beispiel, das die minimalste Anwen-

dung der Geolocation-API demonstriert:

…<h1>Geolocation-API verwenden</h1><p>Klicken Sie, um Ihre Position zu ermitteln.</p><button onclick="getMyLocation()">Position bestimmen</button><p id="pos"></p>

<script>



978

var x = document.getElementById("pos");

function getMyLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);

}else {x.innerHTML = "Keine Geolocation-API verfügbar!";

}}

function showPosition(position) {var pos = "Breitengrad: " + position.coords.latitude;pos += "<br>Längengrad: " + position.coords.longitude;x.innerHTML = pos;

}</script>…

Listing 22.1 /Beispiele/Kapitel022/22_1/index.html

Wenn die Schaltfläche angeklickt wird, wird die Funktion getMyLocation() aufgeru-

fen, wo Sie zunächst überprüfen, ob navigator.geoloacation gleich true ist und somit

die Geolocation-API verwendet werden kann. Dann starten Sie die Methode getCur-

rentPosition() der Geolocation-API. Bei der ersten Verwendung sollte zunächst die

Zustimmung vom Benutzer gefordert werden. Wenn die Zustimmung gegeben

wurde und die Methode getCurrentPosition() erfolgreich ausgeführt werden

konnte, wird ein Koordinaten-Objekt zurückgegeben, das als Parameter an der hier

mit showPosition eingerichteten Callback-Funktion übergeben wird.

Dieses Koordinaten-Objekt wird in der Callback-Funktion showPosition verwendet,

um die ermittelten Daten, hier Breitengrad und Längengrad, auszugeben. Neben den

hier verwendeten coords.latitude und coords.longitude für die geografische Breite

bzw. Länge finden Sie in diesem Objekt noch weitere Eigenschaften für die Zeit- und

Positionsbestimmung vor, die alle in Tabelle 22.1 aufgelistet sind.

Eigenschaft Beschreibung

coords.latitude geografische Breite

coords.longitude geografische Länge

coords.accuracy Präzision in Meter von Breite und Länge

Tabelle 22.1 Daten, die von »getCurrentPosition()« bei Erfolg zurückgegeben werden



979

22

Bei den aufgelisteten Angaben in Tabelle 22.2 muss noch hinzugefügt werden, dass

hier nur wirklich sinnvolle Werte zurückgegeben werden können, wenn der Web-

browser oder das Gerät diese Informationen auch bereitstellt. Andernfalls wird null

zurückgegeben.

Das Beispiel sehen Sie in Abbildung 22.3 bei der Ausführung.

Abbildung 22.3 Ermittlung der geografischen Länge und Breite mit der Geolocation-API

Fallback-Lösung für alte Webbrowser

Alle modernen Webbrowser können mittlerweile die Geolocation-API verwenden

(siehe auch http://caniuse.com/#search=geolocation). Ältere Webbrowser wie der

Internet Explorer 8 unterstützen gar kein und einige andere betagte Webbrowser

können die Geolocation-API nur teilweise verwenden. Für ältere Webbrowser kann

eine Fallback-Lösung wie folgt eingerichtet werden:

if(navigator.geolocation){// Einsatz der HTML5-Geolocation-API ist möglich

}

coords.altitude Höhe in Meter

coords.altitudeAccuracy Präzision in Meter von der Höhe

coords.heading Richtung

coords.speed Geschwindigkeit

timestamp Zeitstempel der Anfrage


Tabelle 22.1 Daten, die von »getCurrentPosition()« bei Erfolg zurückgegeben werden



980

else{// Die Position benötigt eine Fallback-Lösung

}

Eine Fallback-Lösung könnte z. B. ein Polyfill wie Webshims (http://afarkas.github.io/

webshim/demos) oder gleich die Google AJAX API (https://developers.google.com/

loader/?csw=1) sein.

22.1.2 Fehler und Zugriffsrechte der Geolocation-API behandeln

Wenn Sie die Geolocation-API verwenden, sollten Sie auch eine Callback-Funktion

für Fehler einrichten, damit der Anwender auch weiß, warum die Positionsermitt-

lung nicht funktioniert hat. Zumindest lässt sich damit ermitteln, ob der Zugriff auf

die Geolocation-API blockiert wurde, die Abfrage zu lange gedauert hat oder ob die

Position einfach nicht ermittelt werden konnte. Die Callback-Funktion müssen Sie

lediglich als zweiten Parameter an die Methode getCurrentPositon() übergeben.

Hierzu das entsprechende Beispiel:

…<script>var x = document.getElementById("pos");

function getMyLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);

}…

}

function showPosition(position) { … }

function showError(error) {if(error.PERMISSION_DENIED) {x.innerHTML ="Der Zugriff auf Ihre Position wurde verweigert!?"

}else if(error.POSITION_UNAVAILABLE) {x.innerHTML ="Es sind keine Geopositionsdaten vorhanden."

}else if(error.TIMEOUT) {



981

22

x.innerHTML ="Timeout bei der Ortsanfrage wurde ausgelöst."

}else {x.innerHTML = "Ein unbekannter Fehler ist aufgetreten";

}}

</script>…

Listing 22.2 /Beispiele/Kapitel022/22_1/index2.html

Je nachdem, ob und welcher Fehler aufgetreten ist, wird das Ergebnis auf der Web-

seite ausgegeben. Die möglichen Fehler und deren Bedeutung finden Sie in Tabelle

22.2 aufgelistet.

22.1.3 Feintuning mit weiteren Optionen der Geolocation-API

Die Methode getCurrentPosition() kann noch einen dritten optionalen Parameter

mit einem Objekt vom Typ PositionOptions übernehmen. Hierzu ein Codeaus-

schnitt, der anschließend etwas genauer erläutert wird:

…function getMyLocation() {if (navigator.geolocation) {var geo_options = {enableHighAccuracy: true,maximumAge : 30000,timeout : 27000

};navigator.geolocation.getCurrentPosition(showPosition, showError, geo_options );

Fehler Bedeutung

PERMISSION_DENIED Zugriff verweigert. Vermutlich hat der Benutzer die Erlaub-

nis zur Positionsbestimmung verweigert oder eine Einstel-

lung auf dem Gerät blockiert diese Funktion.

POSITION_UNAVAILABLE Die Position konnte nicht ermittelt werden.

TIMEOUT Die Abfrage der Position dauerte zu lang und konnte nicht

innerhalb einer bestimmten Zeit bestimmt werden.

Tabelle 22.2 Codeeigenschaften zum Auswerten von Fehlern



982

}else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";

}}

…


Hier verwenden Sie mit enableHighAccuracy, maximumAge und timeout alle drei vorhan-

denen Eigenschaften des PositionOptions-Objekts. Alle drei Eigenschaften sind opti-

onal, und Sie können sie einzeln, zwei davon oder eben alle drei Eigenschaften

verwenden. Die Bedeutung der drei Eigenschaften entnehmen Sie Tabelle 22.3.

Sehen wir uns die folgenden Zeilen aus dem Beispiel näher an:

…var geo_options = {enableHighAccuracy: true,maximumAge : 30000,timeout : 27000

};…


enableHighAccuracy Mit true zwingen Sie die API, noch genauer die Position zu

ermitteln. Einige mobile Geräte (iPhone und Android) bieten

solche Optionen für eine genauere Positionsbestimmung an.

Allerdings kann diese Option auch dazu führen, dass ein Auf-

ruf der Methode getCurrentPosition() fehlschlägt, wenn

diese Option auf true gesetzt wurde, wohingegen ein Aufruf

mit false erfolgreich gewesen wäre.

maximumAge Damit geben Sie an, wie lange eine im Cache gespeicherte

Ortsangabe verwendet werden darf, wenn Sie das nächste

Mal getCurrentPosition() aufrufen. Geben Sie 0 an, werden

keine im Cache gehaltenen Daten verwendet, und es wird

immer die aktuelle Position benötigt.

timeout Hiermit geben Sie eine Zeit in Millisekunden an, ab wann ein

Fehler (TIMEOUT) ausgelöst werden soll, wenn bis dahin keine

Daten geholt werden konnten.

Tabelle 22.3 Optionale Geolocation-Optionen



983

22

Hier haben Sie mit enableHighAccuracy=true die höchstmögliche Standardortbestim-

mung aktiviert. Wurde die letzte Standortbestimmung mit getCurrentPosition()

innerhalb von 30 Sekunden durchgeführt, darf auch eine im Cache gespeicherte

Standardortbestimmung verwendet werden, was mit maximumAge:30000 angegeben

(30.000 Millisekunden = 30 Sekunden) wurde. Dauert die Standardortermittlung

länger als 27 Sekunden, wird ein Timeout wegen der Zeitüberschreitung als Fehler

zurückgegeben (timeout:27000).

22.1.4 Die Position des Benutzers dauerhaft überwachen

Für eine dauerhafte Überwachung der Position des Benutzers bietet die Geolocation-

API die Methode watchPosition() an, die dieselbe Struktur wie getCurrentPosition()

besitzt. Als ersten Parameter geben Sie eine Callback-Funktion an, die bei Erfolg auf-

gerufen werden soll, um die Daten des Standorts auszuwerten. Optional können Sie

auch als zweiten Parameter eine Callback-Funktion einrichten, die im Fall eines Feh-

lers aufgerufen wird. Auch optional können Sie als Parameter das PositionsObject-

Objekt verwenden. Im Prinzip können Sie praktisch die Beispiele vom Abschnitt

zuvor verwenden und einfach nur getCurrentPosition durch watchPosition ersetzen.

Im Gegensatz zur Methode getCurrentPosition() ruft die Methode watchPosition()

jedes Mal die Callback-Funktion auf, wenn sich die Position des Benutzers geändert

hat. Zusätzlich liefert diese Methode eine ID zurück, die Sie an die Methode clear-

Watch() als Parameter übergeben können, um die Methode watchPositon() wieder

anzuhalten.

Das folgende Beispiel zeigt die Verwendung von watchPosition() im Einsatz. Sie

benötigen ein Gerät mit einem GPS-Sender, um das Beispiel im Einsatz besser testen

zu können (z. B. ein Tablet oder Smartphone wie iPhone, Android oder ein Windows

Phone).

…<p>Klicken Sie, um Ihre Position zu überwachen.</p><button onclick="getMyLocation()">Position bestimmen</button><button onclick="endMyLocation()">Überwachung beenden</button><p id="pos"></p>

<script>var x = document.getElementById("pos");var id;function getMyLocation() {if (navigator.geolocation) {var geo_options = {enableHighAccuracy: true,



984

maximumAge : 30000,timeout : 27000

};id = navigator.geolocation.watchPosition(showPosition, showError, geo_options);

}else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";

}}

function showPosition(position) { … }

function showError(error) { … }

function endMyLocation() {if (navigator.geolocation) {navigator.geolocation.clearWatch(id);x.innerHTML = "Positionsüberwachung beendet";

}}

</script>…


22.1.5 Die Position des Benutzers auf einer Karte anzeigen

Mit den Angaben zur geografischen Länge und Breite mit Latitude und Longitude

haben Sie alle nötigen Daten, um den Standort auf einer Karte anzuzeigen. Hierzu

benötigen Sie aber eine API für einen Kartenanbieter und müssen diese etwas mit der

Geolocation-API vermischen.

Achtung, komplex!

Das gleich folgende Beispiel, in dem eine echte Karte wie Google Maps oder Bing

Maps verwendet wird, ist natürlich erheblich komplexer, als nur die Latitude und

Longitude anzuzeigen, weil hier auch Kenntnisse in den APIs der Kartenhersteller

nötig sind, hier speziell: Google Maps API und Bing Maps Ajax Control. Betrachten Sie

dieses Beispiel daher eher als eine Art Demonstration, was noch so möglich ist.

Zur Demonstration finden Sie hier ein Beispiel, das zunächst wie gehabt den Standard-

ort ermittelt und auch überwacht, aber zur Darstellung nicht mehr die Angabe in



985

22

Form von Latitude und Longitude verwendet, sondern eine geografische Karte.

Gegenüber den Versionen in den Beispielen zuvor müssen Sie somit die Callback-

Funktion showPosition() entsprechend anpassen, damit der ermittelte Standort in

einer Karte und nicht als geografische Längen- bzw. Breitenangabe angezeigt wird.

Im folgenden Beispiel wurde hierfür einmal eine Callback-Funktion showPosition-

Google() und showPositionBing() geschrieben, wodurch der Benutzer die Wahl hat,

seinen Standort entweder in der Karte von Google oder von Bing anzuzeigen. Hier

das Beispiel dazu, das anschließend etwas genauer erläutert wird:

…<script src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://ecn.dev.virtualearth.net/mapcontrol/

mapcontrol.ashx?v=7.0"></script>…<p>Klicken Sie, um Ihre Position auf einer Karte anzuzeigen</p><button onclick="getMyLocation('google')">Google-Map</button><button onclick="getMyLocation('bing')">Bing-Map</button><button onclick="endMyLocation()">Überwachung beenden</button><div id="pos"

style="position:absolute; width:500px; height: 350px;"></div>

<script>var x = document.getElementById("pos");var id = null;

…function getMyLocation(str) {if (navigator.geolocation) {if(id != null) {navigator.geolocation.clearWatch(id);

}if( str == "google") {id = navigator.geolocation.watchPosition(

showPositionGoogle, showError, geo_options);}else if( str == "bing") {id = navigator.geolocation.watchPosition(

showPositionBing, showError, geo_options);}

}



986

else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";

}}

// Position mit Google Maps anzeigenfunction showPositionGoogle(position) {var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

var myOptions = {zoom: 12,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP

};var map = new google.maps.Map(x, myOptions);var marker = new google.maps.Marker({

position: latlng, map: map,title: "Ihr Position"});

}

// Position mit Bing Maps anzeigenfunction showPositionBing(position) {var latlng =new Microsoft.Maps.Location(position.coords.latitude,position.coords.longitude);

var myOptions = {credentials: "Ihr Schlüssel für die Bing Map",center: latlng,mapTypeId: Microsoft.Maps.MapTypeId.road,zoom: 10

};var map = new Microsoft.Maps.Map(x, myOptions );

}

function showError(error) { … }function endMyLocation() { … }

</script>…




987

22

Zunächst betten Sie die Google Maps JavaScript-API und das Bing Maps AJAX Control

ein. Die Größe für die Karte legen Sie auch gleich im div-Element mit einem Inline-

Stylesheet fest.

Sensor-Parameter bei der Google Maps API auf »true« oder »false«?

Im Beispiel wurde beim Verweis zur Google Map API der Parameter sensor mit http://

maps.google.com/maps/api/js?sensor=true auf true gesetzt, weil die Positionsbe-

stimmung damit genauer ist, wenn das Gerät, auf dem dieses Beispiel ausgeführt

wird, einen GPS-Sensor enthält. Bei einem stationären Computer oder bei vielen

Notebooks könnten Sie hier auch sensor=false verwenden, wenn dort kein GPS vor-

handen ist.

Wenn Sie eine der Schaltflächen Google-Map oder Bing-Map angeklickt haben,

wird in der Funktion getMyLocation() nach einer Überprüfung, ob die Geolocation-

API verfügbar ist, ermittelt, welche Schaltfläche Sie angeklickt haben. Dies wurde hier

ganz einfach mit dem String google oder bing realisiert, der beim Anklicken an die

Funktion getMyLocation(str) mit übergeben wird. Abhängig davon, welche Karte Sie

verwenden wollen, wird der Methode watchPosition() als zweiter Parameter die Call-

back-Funktion showPositionGoogle() oder showPositionBing() übergeben.

Abgesehen von den mit der Geolocation-API ermittelten Latitude (position.coords.

latitude) und Longitude (position.coords.longitude) sind die in showPosition-

Google() und showPositionBing() enthaltenen Methoden, Objekte und Optionen

reine Google-Maps-API- bzw. Bing-Maps-AJAX-Control-Angaben, die nichts mehr mit

der Geolocation-API zu tun haben.

Das Beispiel bei der Ausführung sehen Sie in Abbildung 22.4.

Google Maps API & Bing Maps AJAX Control

Auf die Einzelheiten der Google Maps API und des Bing Maps AJAX Control einzu-

gehen würde hier den Rahmen des Buches sprengen. Sie finden für die Karten von

Google auf der Webseite https://developers.google.com/maps/?hl=de eine umfas-

sende Dokumentation mit Beispielen, um tiefer in die Materie einzusteigen. Dasselbe

gilt für die Karten von Bing, wo Sie auf der Webseite http://msdn.microsoft.com/

en-us/library/gg427610.aspx eine umfassende Dokumentation finden. Beachten Sie

außerdem beim Beispiel, dass Sie, wenn Sie die Bing-Karte verwenden wollen, einen

Schlüssel dafür benötigen und im Beispiel anstelle von Ihr Schlüssel für die Bing-

Map eintragen müssen. Einen Schlüssel können Sie z. B. bei Microsoft unter http://

www.microsoft.com/maps/create-a-bing-maps-key.aspx erstellen.



988

Abbildung 22.4 Die Geolocation-API wird mit der Google Maps API gemischt und zeigt den

Standort auf der Google-Karte an.

22.1.6 Eine einfache Navigation vom aktuellen Standardort erstellen

Der nächste Schritt oder Wunsch dürfte vielleicht sein, eine kleine Navigation auf der

Webseite anzubieten. So könnten Sie z. B. einem Besucher den Weg zu einem Ort

oder einer Veranstaltung aufzeigen. Allerdings müssen Sie hier noch tiefer in die ent-

sprechenden APIs von Google oder Bing eintauchen. Die Google Maps API bietet hier-

für z. B. einen Routendienst an, den Sie über DirectionService erreichen (https://

developers.google.com/maps/documentation/javascript/directions?hl=de) an. Aller-

dings will ich das im letzten Abschnitt ohnehin immer komplexer werdende Thema

nicht noch komplizierter machen, und Sie finden ein entsprechendes Beispiel zum

Ausprobieren oder als Demonstration unter /Beispiele/Kapitel022/22_1/index6.html.

Das Beispiel, das Sie in Abbildung 22.5 sehen, versucht, die aktuelle Position zu

ermitteln und zu überwachen, und bietet Ihnen einen Routendienst zum Rhein-

werk Verlag nach Bonn an. Am besten funktioniert das Beispiel natürlich wieder

mit einem mobilen Gerät wie einem Smartphone oder einem Tablet, bei denen GPS

vorhanden ist.


22.2 Ziehen und Fallenlassen mit der Drag&Drop-API

989

22

Abbildung 22.5 Hier wurde ein Routendienst mit der Google Maps API erstellt.

22.2 Ziehen und Fallenlassen mit der Drag&Drop-API

Drag & Drop wurde bereits über die Jahre hinweg mit Bibliotheken wie jQuery (http://

jquery.com), Dojo (http://dojotoolkit.org) oder MooTools (http://mootools.net) reali-

siert, um ein Objekt im Webbrowser mit gehaltener Maustaste von einer Position zu

einer anderen zu ziehen. Mit HTML5 können Sie Drag & Drop (kurz auch DnD) jetzt

auch nativ ohne weitere Bibliothek nutzen.

Allerdings muss hinzugefügt werden, dass die Verwendung der nativen Drag&Drop-

API von HTML5 im Vergleich zu Lösungen wie jQuery, Dojo oder MooTools erheblich

komplexer ist.

Fallback-Lösung für die Drag&Drop-API

Viele moderne Webbrowser können mittlerweile die Drag&Drop-API zumindest zum

(größten) Teil verwenden (siehe auch http://caniuse.com/#feat=dragndrop). Auf

jeden Fall sollten Sie zur Sicherheit erst einmal prüfen, ob ein Webbrowser mit der


Auf einen Blick

Auf einen Blick

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

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

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

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

5 Tabellen, Hyperlinks und Bilder ........................................................................ 175

6 Das neue semantische HTML verwenden ..................................................... 229

7 HTML-Formulare erstellen .................................................................................. 259

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

9 Die Selektoren von CSS ........................................................................................ 321

10 Die Vererbung und die Kaskade ....................................................................... 375

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

12 CSS-Positionierung ................................................................................................ 449

13 Das Layout mit CSS gestalten ............................................................................ 493

14 Stylen mit CSS ......................................................................................................... 605

15 Testen und Organisieren von CSS .................................................................... 687

16 Fertige CSS-Frameworks ..................................................................................... 711

17 Eine kurze Einführung in JavaScript ................................................................ 751

18 HTML DOM und DOM-Manipulation .............................................................. 797

19 Fertige JavaScript-Objekte ................................................................................. 857

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

21 Über Grafiken und multimediale Inhalte ...................................................... 927

22 Weitere interessante HTML5-Features .......................................................... 975


Inhalt

5

Inhalt

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

1 Einführung in das HTML5-Universum 29

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

1.2 Die verschiedenen Typen von Webseiten ................................................................ 31

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

1.2.2 Ein Blog – Das Tagebuch im Internet ............................................................ 32

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

1.2.4 Webplattform – Sich ein eigenes

soziales Netzwerk bauen ................................................................................... 35

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

1.3 Dynamische und statische Webseiten ...................................................................... 36

1.3.1 Statische Webseiten ........................................................................................... 36

1.3.2 Dynamische Webseiten ..................................................................................... 38

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

1.4.1 HTML5 – Der »Überbegriff« für alles zusammen ...................................... 40

1.4.2 HTML – Die textbasierte Hypertext-Auszeichnungssprache ................ 40

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

1.4.4 JavaScript – Die clientseitige Skriptsprache des Webbrowsers ........... 43

1.4.5 Die serverseitigen Skriptsprachen und Datenbanken ............................. 44

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

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

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

1.5.3 Cross-Browser-Tests – Wie sieht das bei den anderen aus? ................. 47

1.5.4 Schritt für Schritt: Webseite erstellen

und im Webbrowser betrachten .................................................................... 48

1.5.5 Geschriebenes HTML überprüfen ................................................................... 52

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

1.6 Verwendete Konventionen im Buch .......................................................................... 55

1.7 Zusammenfassung ............................................................................................................. 56


Inhalt

6

2 Grundlegender Aufbau von HTML(-Dokumenten) 57

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

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

2.1.2 Verschachtelungsstruktur mit dem DOM-Inspektor betrachten ........ 60

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

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

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

2.1.6 Das Ende-Tag eines HTML-Elements einfach weglassen? ..................... 63

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

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

2.1.9 Kommentare in HTML-Dokumenten verwenden ..................................... 66

2.2 Ein einfaches HTML-Dokument-Grundgerüst ........................................................ 67

2.2.1 Der HTML5-Dokumenttyp <!doctype> .......................................................... 68

2.2.2 Die alten <!doctype>-Deklarationen ............................................................. 68

2.2.3 Der Anfang und das Ende eines HTML-Dokuments mit <html> ......... 69

2.2.4 <head> – Der Kopf eines HTML-Dokuments .............................................. 70

2.2.5 <body> – Der sichtbare Bereich eines HTML-Dokuments ...................... 70


3 Die Kopfdaten eines HTML-Dokuments 73

3.1 Die HTML-Elemente für den Kopf in der Übersicht .............................................. 74

3.2 <title> – Die Überschrift der HTML-Seite ................................................................. 75

3.3 Exkurs: Namenskonvention und Referenzierung ................................................ 76

3.3.1 Gültige und gute Dateinamen für ein HTML-Dokument ....................... 77

3.3.2 Gültige Verzeichnisnamen und sinnvolle Verzeichnisstrukturen ....... 77

3.3.3 Referenz auf eine Datenquelle notieren ...................................................... 78

3.4 Die Basis-URL einer Webseite mit <base> definieren ......................................... 81

3.4.1 Die HTML-Attribute für das HTML-Element <base> ................................ 83

3.5 Beziehung zu einem externen Dokument mit <link> ........................................ 83

3.5.1 Die HTML-Attribute für das allein stehende HTML-Element <link> ... 85

3.6 Dokumentglobale CSS-Stile mit <style> notieren ................................................ 88

3.6.1 Die HTML-Attribute für das HTML-Element <style> ................................ 89

3.6.2 Das style-Element außerhalb des Kopfbereichs verwenden ................. 89

3.7 Skripte in Webseiten einbinden mit <script> ......................................................... 91

3.7.1 Die HTML-Attribute für das HTML-Element <script> .............................. 93


Inhalt

7

3.8 Metainformationen für das Dokument mit <meta> .......................................... 93

3.8.1 Die gebräuchlichsten Metaangaben ............................................................. 94

3.8.2 Nützliche Metadaten für einen Webcrawler angeben ........................... 96

3.8.3 Hilfreiche Metadaten für Suchmaschinen .................................................. 98

3.8.4 Nützliche Metadaten für den Webbrowser ................................................ 99

3.8.5 Allgemeine Metadaten verwenden ............................................................... 101

3.8.6 Die HTML-Attribute für das HTML-Element <meta> ............................... 101


4 Der sichtbare Bereich eines HTML-Dokuments 105

4.1 Ein HTML-Dokument in sinnvolle Bereiche aufteilen ......................................... 105

4.1.1 <body> – Der darstellbare Inhaltsbereich eines HTML-Dokuments ... 106

4.1.2 Die neuen Sektionselemente von HTML ...................................................... 107

4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen .......... 107

4.1.4 Inhalt in einen für sich geschlossenen Block

mit <article> einteilen ........................................................................................ 108

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

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

4.2 HTML-Elemente für Kopf- und Fußbereiche ........................................................... 115

4.2.1 Überschriften mit den HTML-Elementen von <h1> bis <h6> ................ 116

4.2.2 Ein Kopfbereich mit <header> und ein Fußbereich mit <footer> ........ 121

4.2.3 Gesonderte Beschriftung von Inhalten mit <figure> und

<figcaption> ........................................................................................................... 123

4.3 Gruppieren und Aufteilen von Inhalten ................................................................... 124

4.3.1 Textabsätze mit <p> hinzufügen ................................................................... 125

4.3.2 Zeilenumbruch erzwingen mit <br> .............................................................. 127

4.3.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen ..................... 128

4.3.4 Leerzeichen erzwingen und Umbruch verhindern mit » « ....... 129

4.3.5 Thematische Trennung mit <hr> hinzufügen ............................................ 130

4.3.6 Absätze bzw. Zitate mit <blockquote> hinzufügen ................................. 131

4.3.7 Einen allgemeinen Bereich mit <div> definieren ...................................... 132

4.3.8 <main> – Ein HTML-Element für den Hauptinhalt ................................... 134

4.4 HTML-Elemente für Textauszeichnungen ............................................................... 136

4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen ...................... 138

4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren ........................ 138

4.4.3 Darstellung von Computercode mit <code> und

<pre> auszeichnen .............................................................................................. 139

4.4.4 Tastatureingabe mit <kdb> und Programmausgabe mit <samp> ..... 142


Inhalt

8

4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen ........................... 143

4.4.6 Text als Variable mit <var> auszeichnen ..................................................... 143

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

4.4.8 Text betonen bzw. hervorheben mit <em>, <strong>, <i> und <b> ... 145

4.4.9 Einen Text mit <mark> hervorheben ............................................................ 146

4.4.10 Text zwischen Anführungsstriche setzen mit <q> ................................... 148

4.4.11 Text unter- bzw. durchstreichen mit <u> und <s> ................................... 149

4.4.12 Änderungen von Text mit <ins> und <del> markieren ........................... 151

4.4.13 Einen Text hochstellen bzw. tiefstellen mit <sup> und <sub> ............ 152

4.4.14 Datums- und Zeitangaben mit <time> kennzeichnen ............................ 152

4.4.15 Das Kleingedruckte mit <small> kennzeichnen ........................................ 156

4.4.16 Kontaktinformationen mit <address> kennzeichnen ............................. 157

4.4.17 <ruby>, <rp> und <rt> für eine Anmerkung der Aussprache ................ 158

4.4.18 Bereich von einzelnen Textpassagen mit <span>

zusammenfassen ................................................................................................. 159

4.5 Die HTML-Elemente zur Listendarstellung .............................................................. 160

4.5.1 Ungeordnete Listen mit <ul> und <li> .......................................................... 161

4.5.2 Geordnete Listen mit <ol> und <li> ............................................................... 162

4.5.3 Nummerierung einer geordneten Liste umdrehen .................................. 163

4.5.4 Nummerierung einer geordneten Liste ändern ......................................... 163

4.5.5 Listen ineinander verschachteln ..................................................................... 164

4.5.6 Eine Beschreibungsliste mit <dl>, <dt> und <dd> erstellen .................. 167

4.6 Exkurs: Zeichencodierung ............................................................................................... 169

4.6.1 Von Bytes zur Zeichencodierung .................................................................... 169

4.6.2 Von ASCII zu ISO-8859 ........................................................................................ 170

4.6.3 Über die Bytegrenze hinaus mit Unicode .................................................... 171

4.7 Zeichenentitäten in HTML ............................................................................................... 172


5 Tabellen, Hyperlinks und Bilder 175

5.1 Daten in einer Tabelle strukturieren .......................................................................... 175

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

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

zusammenfassen ................................................................................................. 178

5.1.3 HTML-Attribute für die Tabellenelemente .................................................. 181

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

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

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


Inhalt

9

5.2 »Elektronische« Verweise aka Hyperlinks mit <a> .............................................. 190

5.2.1 Links zu anderen HTML-Dokumenten der eigenen

Webseite einfügen .............................................................................................. 192

5.2.2 Links zu anderen Webseiten einfügen .......................................................... 194

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

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

5.2.5 Links zu anderen Inhaltstypen setzen ........................................................... 199

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

5.2.7 Links zu bestimmten Teilen einer Webseite setzen ................................. 203

5.2.8 Die HTML-Attribute für das HTML-Element <a> ....................................... 207

5.3 Bilder mit <img> einbinden ............................................................................................ 209

5.3.1 Bilder zum HTML-Dokument hinzufügen .................................................... 209

5.3.2 Höhe und Breite für die Grafik angeben ...................................................... 213

5.3.3 Bilder beschriften mit <figure> und <figcaption> .................................... 217

5.3.4 Die HTML-Attribute für das HTML-Element <img> .................................. 218

5.4 Verweissensitive Grafiken aka Image-Map erstellen ......................................... 219

5.5 Ein Icon für die Webseite hinzufügen (Favicon) .................................................... 226


6 Das neue semantische HTML verwenden 229

6.1 Altes Content-Modell von HTML 4.01 ........................................................................ 230

6.2 Neues Content-Modell von HTML5 ............................................................................. 231

6.2.1 Flow-Content ......................................................................................................... 232

6.2.2 Sectioning-Content ............................................................................................. 232

6.2.3 Heading-Content ................................................................................................. 232

6.2.4 Phrasing-Content ................................................................................................. 233

6.2.5 Embedded-Content ............................................................................................. 233

6.2.6 Interactive-Content ............................................................................................. 234

6.2.7 Metadata-Content ............................................................................................... 234

6.2.8 Übersicht über die Content-Modelle und deren HTML-Elemente ...... 234

6.3 Das neue semantische HTML verwenden ................................................................ 235

6.3.1 Strukturloses HTML ............................................................................................. 236

6.3.2 Generische Strukturierung mit <div> (HTML 4.01) ................................... 237

6.3.3 Semantische Strukturierung mit den neuen Elementen

in HTML5 ................................................................................................................. 241

6.3.4 Wem nützen diese semantischen HTML5-Elemente was? .................... 243


Inhalt

10

6.4 Zugänglichkeit von Webseiten mit ARIA ................................................................. 244

6.4.1 Orientierungspunkte aka ARIA Landmark Roles setzen .......................... 245

6.4.2 Gängige Werte für das »role«-Attribut ......................................................... 246

6.4.3 Landmark Roles und die neuen HTML5-Elemente .................................... 248

6.4.4 Eine zugängliche Webseite erstellen ............................................................ 249

6.4.5 Eindeutig kennzeichnen .................................................................................... 255

6.4.6 ARIA-Status und -Eigenschaften ..................................................................... 256


7 HTML-Formulare erstellen 259

7.1 Einen Bereich für Formulare definieren .................................................................... 260

7.2 Die HTML-Eingabefelder für Formulare .................................................................... 261

7.2.1 Ein einzeiliges Texteingabefeld mit <input type="text"> ...................... 261

7.2.2 Ein Passworteingabefeld mit <input type="password"> ........................ 262

7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea> ................................... 263

7.2.4 Eine Auswahlliste bzw. Drowdown-Liste mit <select> ........................... 265

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

erstellen ................................................................................................................... 266

7.2.6 Ein Textlabel mit <label> hinzufügen ........................................................... 267

7.2.7 Checkboxen mit <input type="checkbox"> verwenden .......................... 268

7.2.8 Felder für Datei-Upload mit <input type="file"> verwenden ................ 269

7.2.9 Verschiedene Schaltflächen im Überblick ................................................... 270

7.2.10 Ein verstecktes Eingabefeld mit <input type="hidden">

verwenden .............................................................................................................. 271

7.2.11 Formularfelder außerhalb von <form>…</form>

notieren (HTML5) ................................................................................................. 272

7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen

URLs (HTML5) ......................................................................................................... 272

7.3 Die neuen HTML5-Eingabefelder mit <input> ....................................................... 274

7.3.1 Ein Eingabefeld für Farben mit <input type="color"> .............................. 275

7.3.2 Ein Eingabefeld für ein Datum mit <input type="date"> ....................... 276

7.3.3 Ein Eingabefeld für eine Uhrzeit mit <input type="time"> .................... 276

7.3.4 Eingabefelder für Datum und Uhrzeit .......................................................... 277

7.3.5 Eingabefelder für den Monat und die Woche ............................................ 277

7.3.6 Ein Eingabefeld für die Suche mit <input type="search"> ..................... 278

7.3.7 Ein Eingabefeld für E-Mail-Adressen mit <input type="email"> .......... 278

7.3.8 Ein Eingabefeld für eine URL-Adresse mit <input type="url"> .............. 279

7.3.9 Ein Eingabefeld für Telefonnummern mit <input type="tel"> ............. 279


Inhalt

11

7.3.10 Ein Eingabefeld für Zahlen mit <input type="number"> ........................ 279

7.3.11 Ein Eingabefeld für Zahlen eines bestimmten Bereiches ....................... 280

7.4 Die neuen HTML5-Attribute für Eingabefelder ...................................................... 280

7.4.1 Den Eingabefokus mit dem HTML-Attribut »autofocus« setzen ......... 281

7.4.2 Autovervollständigung (de)aktivieren mit dem Attribut

»autocomplete« ................................................................................................... 281

7.4.3 Eine Liste mit Vorschlägen mit dem HTML-Attribut

»list« und »datalist« ............................................................................................ 282

7.4.4 Minimale und maximale Werte und die Schrittweite festlegen ......... 283

7.4.5 Das Auswählen oder die Eingabe mehrerer Werte mit »multiple« .... 283

7.4.6 Reguläre Ausdrücke für Eingabefelder mit »pattern« ............................. 283

7.4.7 Ein Platzhalter für ein Eingabefeld mit »placeholder« ............................ 284

7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required« ........ 284

7.4.9 Fehlermeldung von Eingabefeldern (steuern) ........................................... 284

7.5 Weitere nützliche Helferlein für Eingabefelder .................................................... 287

7.5.1 Formularelemente mit dem HTML-Attribut

»disabled« deaktivieren ..................................................................................... 287

7.5.2 Bei Eingabefeldern mit dem Attribut »readonly«

nur Lesen erlauben .............................................................................................. 288

7.5.3 Hilfreiche Tastenkürzel und Tabulator-Reihenfolge

für Eingabefelder .................................................................................................. 288

7.5.4 Formularelemente gruppieren mit <fieldset> ........................................... 289

7.6 Formulardaten mit PHP versenden ............................................................................. 290

7.6.1 So kommen die Daten vom Webbrowser … ................................................ 291

7.6.2 Die POST-Methode .............................................................................................. 293

7.6.3 Die GET-Methode ................................................................................................. 293

7.6.4 … zum Webserver mit einem PHP-Skript ..................................................... 294


8 Einführung in Cascading Stylesheets (CSS) 299

8.1 Die Versionen von CSS ...................................................................................................... 300

8.1.1 Die erste Version mit CSS Level 1 (CSS1) ........................................................ 300

8.1.2 Die zweite Version mit CSS Level 2 (CSS 2) .................................................. 301

8.1.3 Die neueste Version mit CSS Level 3 (CSS3) ................................................ 301

8.2 Das grundlegende Anwendungsprinzip von CSS .................................................. 301

8.2.1 Aufbau eines Selektors in CSS .......................................................................... 304

8.2.2 Die Deklaration eines Selektors ...................................................................... 305


Inhalt

12

8.2.3 Kommentare für CSS-Code verwenden ........................................................ 306

8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code ....................... 307

8.3 Einbindungsmöglichkeiten von CSS in HTML ......................................................... 308

8.3.1 Stilanweisungen direkt im HTML-Tag mit

dem HTML-Attribut »style« .............................................................................. 308

8.3.2 Stilanweisungen im Dokumentenkopf mit

dem HTML-Element <style> ............................................................................. 309

8.3.3 Stilanweisungen aus einer externen CSS-Datei mit <link>

einbinden ................................................................................................................ 310

8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und

externen CSS-Datei(en) ...................................................................................... 312

8.3.5 Alternative Stylesheets ...................................................................................... 314

8.3.6 Stilanweisungen aus einer externen CSS-Datei mit

»@import« einbinden ........................................................................................ 316

8.3.7 Medienspezifische Stylesheets für bestimmte Ausgabegeräte ........... 317

8.3.8 Medienspezifische Stylesheets mit CSS3 ..................................................... 319


9 Die Selektoren von CSS 321

9.1 Die einfachen Selektoren von CSS ............................................................................... 323

9.1.1 HTML-Elemente mit dem Typselektor ansprechen .................................. 323

9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID

ansprechen ............................................................................................................. 327

9.1.3 Universalselektor – Alle Elemente in

einem Dokument ansprechen ......................................................................... 333

9.1.4 Elemente anhand der Attribute mit

dem Attributselektor ansprechen .................................................................. 336

9.1.5 Attributselektor für Attribute mit einem

bestimmten Attributwert ................................................................................. 339

9.1.6 Attributselektor für Attribute mit einem

bestimmten Teilwert (CSS3) ............................................................................. 342

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

9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS ................................ 350

9.1.9 Sprach-Pseudoklasse »:lang()« und die Negations-

Pseudoklasse »:not()« ......................................................................................... 357

9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente ...... 358

9.2 Kombinatoren – Die Selektoren verketten ............................................................. 361

9.2.1 Der Nachfahrenselektor (E1 E2) ....................................................................... 363


Inhalt

13

9.2.2 Der Kindselektor (E1 > E2) .................................................................................. 365

9.2.3 Der Nachbarselektor (E1 + E2) .......................................................................... 367

9.2.4 Der Geschwisterselektor (E1 ~ E2) ................................................................... 368

9.3 Performance verschiedener Selektoren .................................................................... 370


10 Die Vererbung und die Kaskade 375

10.1 Das Prinzip der Vererbung in CSS ................................................................................. 375

10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften .................. 380

10.1.2 Es wird nicht alles weitervererbt .................................................................... 380

10.1.3 Vererbung erzwingen mit »inherit« .............................................................. 380

10.1.4 Den Standardwert einer CSS-Eigenschaft

wiederherstellen (»initial«) ............................................................................... 382

10.2 Das Regelsystem der Kaskade verstehen ................................................................. 382

10.2.1 Die Herkunft eines Stylesheets ....................................................................... 383

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

10.2.3 Sortierung nach Wichtigkeit und Herkunft ................................................ 384

10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität) ......................... 386

10.2.5 Zusammenfassung der Kaskade ..................................................................... 391

10.3 Exkurs: Werte an CSS-Eigenschaften übergeben ................................................. 391

10.3.1 Die verschiedenen Maßeinheiten in CSS ..................................................... 392

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

Eigenschaften ........................................................................................................ 394

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

10.3.4 Neuere CSS3-Wertetypen .................................................................................. 400

10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben .............. 401


11 Das Box-Modell von CSS 405

11.1 Das klassische Box-Modell von CSS ............................................................................ 406

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

11.1.2 Den Innenabstand mit »padding« angeben ............................................... 409

11.1.3 Den Rahmen mit »border« erstellen ............................................................. 409

11.1.4 Den Außenabstand mit »margin« einrichten ............................................ 410


Inhalt

14

11.1.5 Collapsing Margins (zusammenfallende vertikale

Außenabstände) ................................................................................................... 412

11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln .............................. 415

11.2 Das neue alternative Box-Modell von CSS3 ............................................................ 417

11.2.1 Das neue Box-Modell »box-sizing« verwenden ........................................ 419

11.2.2 Ist das neue Box-Modell schon alltagstauglich? ....................................... 420

11.2.3 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) ................................ 423

11.3 Boxen gestalten ................................................................................................................... 426

11.3.1 Einen Rahmen mit der Eigenschaft »border«

hinzufügen und gestalten ................................................................................ 426

11.3.2 Hintergrundfarbe mit »background-color« festlegen ............................. 430

11.3.3 Hintergrundgrafiken verwenden .................................................................... 431

11.3.4 Die Boxen durchsichtig gestalten (CSS3) ..................................................... 439

11.3.5 Einen Farbverlauf hinzufügen (CSS3) ............................................................ 440

11.3.6 Einen Schlagschatten mit der Eigenschaft

»box-shadow« hinzufügen ............................................................................... 444

11.3.7 Runde Ecken mit der CSS3-Eigenschaft

»border-radius« hinzufügen ............................................................................ 445


12 CSS-Positionierung 449

12.1 Positionierung mit der CSS-Eigenschaft »position« ............................................ 449

12.1.1 Die statische Positionierung (»position: static«) ....................................... 450

12.1.2 Platzierung von Elementen mit »top«, »right«,

»bottom« und »left« ........................................................................................... 452

12.1.3 Die relative Positionierung (»position: relative«) ...................................... 453

12.1.4 Die absolute Positionierung (»position: absolute«) ................................. 455

12.1.5 Die fixe Positionierung (»position: fixed«) .................................................. 457

12.2 Übereinanderstapeln regeln mit »z-index« ............................................................ 460

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

12.3.1 Elemente mit »float« nebeneinander anordnen ....................................... 472

12.3.2 Umfließen der Elemente mit »clear« aufheben ........................................ 476

12.3.3 Probleme beim Eltern-Element von gefloateten Elementen ................ 479

12.3.4 Weitere essenzielle Informationen rund um »float« ............................... 482

12.4 Die neuen flexiblen Boxen von CSS3 .......................................................................... 485

12.4.1 Die Flexbox ausrichten ....................................................................................... 485

12.4.2 Flexibilität der Flexbox einstellen .................................................................. 488


Inhalt

15

12.4.3 Flexible Boxen mit fester Höhe ....................................................................... 490

12.4.4 Die Reihenfolge der Boxen bestimmen ........................................................ 491


13 Das Layout mit CSS gestalten 493

13.1 Exkurs: Was bedeutet feste und flexible Breite? ................................................. 494

13.1.1 Ein Layout mit fester Breite .............................................................................. 494

13.1.2 Ein Layout mit flexibler Breite ......................................................................... 494

13.2 Ein zweispaltiges Layout erstellen .............................................................................. 495

13.2.1 Zweispaltiges Layout mit flexibler Breite und

absoluter Positionierung ................................................................................... 496

13.2.2 Zweispaltiges Layout mit fester Breite und

absoluter Positionierung ................................................................................... 500

13.2.3 Den (Haupt)inhalt horizontal zentrieren ..................................................... 501

13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen ............................... 503

13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen ........ 505

13.2.6 Zweispaltiges festes Layout mit »float« erstellen .................................... 507

13.2.7 Zweispaltiges Layout mit »display: table« erstellen ................................ 508

13.3 Ein dreispaltiges Layout erstellen ................................................................................ 510

13.3.1 Dreispaltiges flexibles Layout mit »float« erstellen ................................. 511

13.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen ................ 514

13.3.3 Ungleich lange Spalten einfärben .................................................................. 516

13.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen ......... 525

13.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3) ............................... 527

13.4 Responsive Layouts mit Media Queries erstellen ................................................. 529

13.4.1 Die Verwendung von Medientypen mit CSS 2 ........................................... 531

13.4.2 Mächtige Medienabfragen mit den Media Queries von CSS3 .............. 533

13.4.3 Einbinden und Anwenden von Media Queries .......................................... 534

13.4.4 Der grundlegende Aufbau von einfachen Media Queries ...................... 535

13.4.5 Welche Medienmerkmale können abgefragt werden? .......................... 537

13.4.6 Anwendungsbeispiel .......................................................................................... 539

13.4.7 Die mobile Navigation anpassen .................................................................... 552

13.4.8 Bilder reaktionsfähig machen .......................................................................... 553

13.4.9 Weitere Anpassungen ........................................................................................ 565

13.5 Das Layout mit einem Raster (Grid) erstellen ........................................................ 569

13.5.1 Das Grundprinzip von Rasterlayouts ............................................................. 569

13.5.2 Eigenes 960-Pixel-Rasterlayout auf 12 Spalten erstellen ....................... 573


Inhalt

16

13.5.3 Das erstellte Rasterlayout überprüfen ......................................................... 576

13.5.4 Layout erstellen einfach gemacht .................................................................. 577

13.5.5 Das Rasterlayout reaktionsfähig machen ................................................... 588

13.5.6 Stabilisieren mit »border-box« ........................................................................ 593

13.5.7 Ein flexibles Raster erstellen ............................................................................ 595

13.5.8 Übersicht über fertige Grid-Systeme ............................................................ 596

13.5.9 Fertiges Grid-System integrieren .................................................................... 597

13.6 Verhalten von HTML-Elementen mit »display« ändern .................................... 601

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

14 Stylen mit CSS 605

14.1 Textgestaltung mit CSS .................................................................................................... 606

14.1.1 Schriftarten mit »font-family« auswählen ................................................. 606

14.1.2 Schriftarten mit Webfonts liefern – »@font-face« .................................. 610

14.1.3 Symbole mit Iconfonts verwenden ................................................................ 617

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

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

14.1.6 Kapitälchen mit »font-variant« erstellen .................................................... 628

14.1.7 Zeilenabstand mit »line-height« definieren ............................................... 629

14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font« ................... 630

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

»word-spacing« festlegen ................................................................................. 632

14.1.10 Die Textausrichtung mit »text-align« festlegen ....................................... 633

14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen ...................... 634

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

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

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

14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen (CSS3) ..... 639

14.2 Listen mit CSS gestalten ................................................................................................... 640

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

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

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

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

14.2.5 Navigation und Menüs mit Listen erstellen ................................................ 645

14.3 Schönere Tabellen mit CSS gestalten ......................................................................... 651

14.3.1 Tabellen mit fester Breite erstellen ............................................................... 651

14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten ............................ 652


Inhalt

17

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

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

14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells« .................................... 655

14.3.6 Tabellenbeschriftung mit »caption-side« positionieren ........................ 656

14.4 Bilder und Grafiken mit CSS gestalten ...................................................................... 657

14.4.1 Bilder und Grafiken mit »width« und »height« anpassen ..................... 657

14.4.2 Grafiken mit der CSS-Eigenschaft »clip« beschneiden ............................ 660

14.4.3 Sprites mit CSS verwenden ............................................................................... 662

14.4.4 Eine einfache Bildergalerie mit CSS gestalten ........................................... 664

14.5 Elemente transformieren mit CSS3 ............................................................................. 668

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

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

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

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

14.5.5 Verschiedene Transformationen kombinieren .......................................... 672

14.5.6 Es geht auch mit anderen HTML-Elementen .............................................. 673

14.6 Übergänge mit CSS3 erstellen ....................................................................................... 674

14.7 HTML-Formulare mit CSS stylen ................................................................................... 676

14.7.1 Ein HTML-Formular ordentlich strukturieren ............................................. 676

14.7.2 Ausrichten der Formularelemente mit CSS ................................................. 679

14.7.3 Gestalten der Formularelemente mit CSS ................................................... 682


15 Testen und Organisieren von CSS 687

15.1 CSS und die Webbrowser ................................................................................................. 688

15.1.1 Acid-Webbrowsertest ......................................................................................... 688

15.1.2 CSS3-Webbrowsertest ........................................................................................ 689

15.1.3 CSS3 in der Praxis ................................................................................................. 690

15.2 Webseiten mit CSS in verschiedenen Größen betrachten ................................ 690

15.3 Zentrales Stylesheet einrichten .................................................................................... 693

15.4 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset ............................ 696

15.5 Normalisierung – Die Alternative zum CSS-Reset ................................................ 698

15.6 Die neuen HTML5-Elemente mit CSS stylen ............................................................ 699

15.7 Conditional Comments für den alten IE .................................................................... 701

15.7.1 Webbrowser-Sniffer ............................................................................................ 703


Inhalt

18

15.8 Modernizr – Fähigkeiten des Webbrowsers testen ............................................. 704

15.9 Entwickler-Tools des Webbrowsers ............................................................................ 706


16 Fertige CSS-Frameworks 711

16.1 Übersicht über beliebte CSS-Frameworks ................................................................ 712

16.2 Das Bootstrap-Framework .............................................................................................. 713

16.2.1 Twitter Bootstrap herunterladen und integrieren ................................... 714

16.2.2 Das Layout mit dem Bootstrap-Framework erstellen ............................. 716

16.2.3 Die Komponenten des Bootstrap-Frameworks verwenden .................. 730

16.2.4 JavaScript-Erweiterungen von Bootstrap einbauen ................................. 738

16.2.5 Bootstrap an die eigenen Bedürfnisse anpassen ...................................... 743

16.3 Exkurs zu CSS-Präprozessoren ...................................................................................... 743

16.3.1 Die Stylesheet-Sprache Less ............................................................................. 744

16.3.2 Die Stylesheet-Sprache Sass ............................................................................. 749


17 Eine kurze Einführung in JavaScript 751

17.1 Was ist JavaScript? ............................................................................................................. 751

17.2 Einbinden von JavaScript in HTML .............................................................................. 753

17.2.1 Das JavaScript im Kopfbereich <head> des HTML-Dokuments ........... 754

17.2.2 Das JavaScript im Körper <body> des HTML-Dokuments ...................... 756

17.2.3 Ein externes JavaScript mit dem »script«-Element einbinden ............. 756

17.2.4 Die Ausführung eines JavaScript-Codes ....................................................... 757

17.2.5 Das »noscript«-Element für JavaScript-Verweigerer ............................... 759

17.2.6 Den JavaScript-Code mit Anmerkungen kommentieren ........................ 759

17.3 Die Verwendung von Variablen in JavaScript ........................................................ 760

17.3.1 Variablen Werte zuweisen ................................................................................ 760

17.3.2 Eine JavaScript-Variable deklarieren ............................................................. 761

17.3.3 Übersicht über die JavaScript-Datentypen .................................................. 762

17.4 (K)eine Ausgabe mit JavaScript .................................................................................... 763

17.4.1 Inhalt von HTML-Elementen mit JavaScript manipulieren .................... 763

17.4.2 Direkt in das HTML-Dokument schreiben mit »document.write()« ... 765


Inhalt

19

17.4.3 Ausgabe auf die (JavaScript-)Konsole für Debugging-Zwecke ............. 766

17.4.4 Ausgabe von Informationen mit der »alert«-Dialogbox ........................ 767

17.5 Arithmetische Operatoren in JavaScript ................................................................... 768

17.6 Wiederkehrende Anweisungen in Funktionen packen ..................................... 770

17.6.1 Aufbau einer Funktion in JavaScript .............................................................. 771

17.6.2 Eine JavaScript-Funktion in der Praxis .......................................................... 771

17.6.3 Lokale und globale Variablen in JavaScript ................................................. 773

17.7 Die Verzweigungen in JavaScript ................................................................................. 776

17.7.1 »true« oder »false«: boolescher Wahrheitswert ....................................... 777

17.7.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden ... 778

17.7.3 Die »if«-Verzweigung verwenden .................................................................. 779

17.8 Ein Array für mehrere Daten verwenden ................................................................. 782

17.8.1 Zugriff auf die einzelnen Elemente in einem Array ................................. 782

17.8.2 Neue Elemente einem Array hinzufügen ..................................................... 783

17.8.3 Ein einfaches Beispiel in der Praxis mit einem Array ............................... 783

17.9 Anweisungen mit Schleifen mehrmals wiederholen .......................................... 784

17.9.1 Die kopfgesteuerte »for«-Schleife .................................................................. 784

17.9.2 Elemente durchlaufen mit der »for/in«- oder »for/of«-Schleife ......... 786

17.9.3 Die kopfgesteuerte »while«-Schleife ............................................................ 788

17.9.4 Die fußgesteuerte »do-while«-Schleife ........................................................ 788

17.9.5 Den Anweisungsblock mit »break« beenden ............................................. 789

17.10 Die Objekte in JavaScript ................................................................................................. 790

17.10.1 Was sind Objekte genau? .................................................................................. 790

17.10.2 Eigene Objekte in JavaScript erstellen .......................................................... 791

17.10.3 Die fertigen JavaScript-Objekte ...................................................................... 794

17.10.4 Die fertigen HTML-Objekte ............................................................................... 795

17.11 Strengeres, strikteres JavaScript .................................................................................. 795


18 HTML DOM und DOM-Manipulation 797

18.1 Einführung in das DOM eines HTML-Dokuments ................................................. 798

18.2 Das »document«-Objekt .................................................................................................. 799

18.3 Die Programmierschnittstelle von HTML DOM ..................................................... 800

18.4 Nach bestimmten HTML-Elementen suchen .......................................................... 801

18.4.1 Ein HTML-Element mit einem bestimmten »id«-Attribut suchen ...... 802


Inhalt

20

18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen ............. 803

18.4.3 HTML-Elemente mit einem bestimmten »class«-Attribut suchen ..... 806

18.4.4 HTML-Elemente mit einem bestimmten »name«-Attribut suchen ... 806

18.4.5 »querySelector()« und »querySelectorAll()« verwenden ........................ 807

18.4.6 Weitere DOM-Objektsammlungen und Eigenschaften ......................... 809

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

18.5.1 Die schlechteste Möglichkeit mit »document.write()« ........................... 814

18.5.2 Den Inhalt von HTML-Elementen mit »innerHTML« ändern ................ 814

18.5.3 Den Wert eines HTML-Attributs ändern ...................................................... 816

18.5.4 Den Style (CSS) eines HTML-Elements ändern ........................................... 817

18.6 Auf JavaScript Events reagieren ................................................................................... 819

18.7 Mit dem Event Handler die Ereignisse behandeln ............................................... 820

18.7.1 Event Handler als HTML-Attribut im HTML-Element einrichten ......... 820

18.7.2 Event Handler als Eigenschaft eines Objekts einrichten ........................ 821

18.7.3 Einen Event Handler mit »addEventListener()« einrichten .................... 822

18.8 Gängige JavaScript Events in der Übersicht ............................................................ 824

18.8.1 Die JavaScript Events der Benutzeroberfläche ........................................... 824

18.8.2 JavaScript Events, die in Verbindung mit

der Maus auftreten können ............................................................................. 826

18.8.3 JavaScript Events für Geräte mit einem Touchscreen ............................. 828

18.8.4 JavaScript Events, die in Verbindung mit der Tastatur auftreten ....... 828

18.8.5 JavaScript Events für HTML-Formulare ........................................................ 829

18.9 Weitere Informationen von den JavaScript Events ............................................. 829

18.10 Standardaktion von Events unterdrücken ............................................................... 832

18.11 HTML-Elemente hinzufügen, ändern, entfernen .................................................. 834

18.11.1 Neues HTML-Element und Inhalt erzeugen und hinzufügen ............... 835

18.11.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern ................... 836

18.11.3 Ein neues HTML-Element gezielter dem DOM-Baum hinzufügen ...... 841

18.11.4 Vorhandenes HTML-Element vom DOM-Baum löschen ........................ 842

18.11.5 Ein HTML-Element im DOM-Baum durch ein anderes ersetzen .......... 843

18.11.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen ......... 845

18.11.7 Verschiedene Methoden, um die HTML-Attribute zu manipulieren ..... 846

18.12 HTML-Formulare und JavaScript .................................................................................. 849

18.12.1 Texteingabefelder mit JavaScript einlesen ................................................. 849

18.12.2 Auswahllisten mit JavaScript einlesen ......................................................... 851

18.12.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen .............. 852

18.12.4 Schaltflächen mit JavaScript abfangen ........................................................ 853



Inhalt

21

19 Fertige JavaScript-Objekte 857

19.1 Ganz oben ist das »window«-Objekt ......................................................................... 858

19.1.1 Vorhandenen Platz innerhalb des Webbrowser-

Fensters ermitteln ............................................................................................... 858

19.1.2 Ein neues Webbrowser-Fenster öffnen und schließen ........................... 859

19.1.3 Die verschiedenen Dialogboxen im Überblick ........................................... 861

19.1.4 Funktionen in Zeitintervallen ausführen lassen ....................................... 863

19.2 Das »screen«-Objekt für die Angaben zum Bildschirm ..................................... 864

19.3 Das »location«-Objekt für den Zugriff auf die URI .............................................. 865

19.4 Das »history«-Objekt für den Browserverlauf ....................................................... 867

19.5 Das »navigator«-Objekt für verschiedene Informationen ............................... 867

19.6 Fertige Objekte, die von JavaScript angeboten werden .................................... 869


20 Eine Einführung in Ajax und in jQuery 873

20.1 Eine Einführung in die Ajax-Programmierung ....................................................... 873

20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung ........................................ 875

20.1.2 Das »XMLHttpRequest«-Objekt erzeugen ................................................... 877

20.1.3 Eine Anfrage an den Server stellen ................................................................ 878

20.1.4 Daten mitsenden ................................................................................................. 879

20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln .......................... 880

20.1.6 Die Antwort vom Server weiterverarbeiten ................................................ 882

20.1.7 Das Ajax-Beispiel bei der Ausführung ........................................................... 882

20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM ................................... 884

20.1.9 Das JSON-Datenformat mit Ajax .................................................................... 889

20.2 Einführung in die JavaScript-Bibliothek jQuery .................................................... 894

20.2.1 jQuery in das HTML-Dokument einbinden .................................................. 894

20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery ...... 895

20.2.3 Die komfortablen jQuery-Selektoren ............................................................ 897

20.2.4 Die jQuery-Events ................................................................................................ 900

20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen ............. 902

20.2.6 HTML-Elemente mit jQuery hinzufügen und löschen ............................. 906

20.2.7 CSS mit jQuery manipulieren ........................................................................... 911

20.2.8 Verschiedene jQuery-Effekte und -Animationen ...................................... 914

20.2.9 jQuery und Ajax zusammen verwenden ...................................................... 922


Inhalt

22

20.2.10 Weitere jQuery-Plug-ins verwenden ............................................................. 925

20.2.11 Letzte Hinweise zu jQuery ................................................................................ 926


21 Über Grafiken und multimediale Inhalte 927

21.1 Vektorgrafiken in HTML-Dokumenten verwenden ............................................. 928

21.1.1 SVG als Grafikreferenz hinzufügen mit <img> .......................................... 928

21.1.2 SVG direkt in die Webseite einbetten mit <svg> ...................................... 930

21.1.3 SVG-Tags für die Vektorgrafiken .................................................................... 931

21.1.4 Übersicht über die grafischen Elemente von SVG .................................... 931

21.1.5 Weitere Hinweise zur Verwendung von SVG ............................................. 933

21.1.6 Mathematische Formeln mit MathML ......................................................... 933

21.2 Malen mit JavaScript und <canvas> ........................................................................... 935

21.2.1 Das <canvas>-Element erzeugen ................................................................... 935

21.2.2 Auf einem <canvas>-Element zeichnen ....................................................... 937

21.2.3 Methoden, mit denen auf das <canvas>-Element gezeichnet wird ... 939

21.2.4 Bilder mit <canvas> kopieren und manipulieren ...................................... 941

21.2.5 Eigene (Wrapper-)Funktionen für <canvas> erstellen ............................. 943

21.2.6 Den »CanvasRenderingContext2D« erweitern .......................................... 946

21.2.7 Fertige <canvas>-Frameworks im Überblick .............................................. 947

21.2.8 <canvas> gegen <svg> oder <canvas> oder <svg>? ................................. 948

21.2.9 Weitere Hinweise zu <canvas> ....................................................................... 949

21.3 Videos mit dem HTML-Element <video> abspielen ............................................ 950

21.3.1 Die HTML-Attribute für das HTML-Element <video> ............................... 952

21.3.2 Das Video mit der Media-API von JavaScript steuern .............................. 953

21.3.3 Dem Video Untertitel mit <track> hinzufügen .......................................... 956

21.3.4 Videos über YouTube abspielen lassen ........................................................ 959

21.4 Audios mit dem HTML-Element <audio> abspielen ............................................ 961

21.4.1 Die HTML-Attribute für das HTML-Element <audio> .............................. 962

21.4.2 Audios mit der Media-API von JavaScript steuern .................................... 963

21.5 Andere aktive Inhalte einbinden ................................................................................. 965

21.5.1 Das HTML-Element <embed> .......................................................................... 966

21.5.2 Das HTML-Element <object> ........................................................................... 967

21.5.3 Das HTML-Element <iframe> ........................................................................... 968


Inhalt

23

21.6 Bildergalerie mit Lightbox verwenden ...................................................................... 970


22 Weitere interessante HTML5-Features 975

22.1 Den Standort ermitteln mit der Geolocation-API ................................................. 976

22.1.1 Die Geolocation-API in einem HTML-Dokument verwenden ............... 977

22.1.2 Fehler und Zugriffsrechte der Geolocation-API behandeln ................... 980

22.1.3 Feintuning mit weiteren Optionen der Geolocation-API ....................... 981

22.1.4 Die Position des Benutzers dauerhaft überwachen ................................. 983

22.1.5 Die Position des Benutzers auf einer Karte anzeigen .............................. 984

22.1.6 Eine einfache Navigation vom aktuellen Standardort erstellen .......... 988

22.2 Ziehen und Fallenlassen mit der Drag&Drop-API ................................................ 989

22.2.1 Ein HTML-Element mit »draggable« ziehbar machen ............................. 990

22.2.2 Events, die beim Drag & Drop auftreten können ...................................... 990

22.2.3 Mit dem Ziehen von Elementen starten ...................................................... 992

22.2.4 Die Daten zum Ziehen behandeln ................................................................. 992

22.2.5 Den Platz zum Fallenlassen festlegen .......................................................... 993

22.2.6 Die fallen gelassenen Daten verarbeiten ..................................................... 993

22.2.7 Andere Events während des Drag&Drop-Vorgangs behandeln .......... 994

22.2.8 Das komplette Beispiel in der Übersicht ...................................................... 995

22.2.9 Weitere Hinweise zur Drag&Drop-API ......................................................... 998

22.3 Offlinedaten zur Verfügung stellen ............................................................................ 999

22.3.1 Application Cache – Das Cache Manifest .................................................... 1000

22.3.2 Web Storage – Datenbank für Offlineanwendungen ............................. 1004

22.3.3 Weitere Offlinetechnologien im Überblick ................................................. 1009

22.3.4 Die Internetverbindung des Benutzers prüfen .......................................... 1010

22.4 Web Workers – Die Helfer im Hintergrund ............................................................. 1011

22.5 Aktualisieren ohne Anfrage mit Server Sent Events ........................................... 1020

22.6 Weitere interessante APIs im Schnelldurchlauf .................................................... 1024

22.6.1 Kommunikation in Echtzeit mit den WebSockets .................................... 1024

22.6.2 Sprach- und Videotelefonie mit WebRTC .................................................... 1026

22.6.3 3D-Grafiken und Spiele mit WebGL ............................................................... 1027

22.6.4 Den kompletten Bildschirm mit der Fullscreen API verwenden .......... 1027

22.6.5 Der Umgang mit lokalen Dateien mit der File API .................................... 1032



Inhalt

24

Anhang 1039

A HTML-Referenz ..................................................................................................................... 1039

B CSS-Referenz ......................................................................................................................... 1147

C HTML-/WYSIWYG-/CSS-Editoren ................................................................................. 1217

Index ........................................................................................................................................................ 1221


Index

1221

Index

@font-face .............................................................. 610

@import .......................................................... 535, 693

@media ............................................................. 533, 535

> .............................................................................. 173

< ............................................................................... 173

............................................................... 129, 178

" ......................................................................... 173

.......................................................................... 129

 .................................................................. 1042

960-Pixel-Rasterlayout ....................................... 573

A

Absatztext

<p> ........................................................................... 125

Acid-Webbrowsertest ......................................... 688

Ajax ............................................................................. 873

Callback-Funktion ........................................... 880

DOM ...................................................................... 884

HTTP-Request .................................................... 878

HTTP-Response ................................................ 882

jQuery .................................................................... 922

JSON ...................................................................... 889

onreadystatechange ............................ 880, 886

open() .................................................................... 878

readyState .......................................................... 880

responseText ..................................................... 882

responseXML ............................................ 882, 887

send() ..................................................................... 878

status .................................................................... 882

Status ermitteln ............................................... 880

XMLHttpRequest-Objekt ............................... 877

alert() .......................................................................... 767

Allein stehende Tags .............................................. 64

Animationen

jQuery .................................................................... 914

Anker ......................................................................... 203

#ankername ........................................................... 203

Application Cache ............................................. 1000

Cache Manifest .............................................. 1000

Applikationsserver ................................................. 39

ARIA ........................................................................... 244

ASCII-Codierung .................................................... 170

Attribute

required ............................................................... 286

Audio steuern ........................................................ 963

Audios abspielen ................................................... 961

Aufzählungspunkte .............................................. 161

Autorenstylesheet ................................................ 383

Autovervollständigung ....................................... 281

B

background-position .......................................... 663

background-size ................................................... 560

Barrierefreies Internet ........................................ 244

Benannte Farben ................................................... 395

Benutzerstylesheet .............................................. 383

Beschreibungsliste � Definitionsliste

Bilder

beschneiden ...................................................... 660

beschriften ........................................................... 217

einbinden ........................................................... 209

gestalten .............................................................. 657

responsiv .............................................................. 553

skalieren ............................................................... 215

Skalieren mit CSS ............................................. 657

Bildergalerie ........................................................... 970

Bildergalerie erstellen ........................................ 664

Block-Elemente ...................................................... 230

Blog ................................................................................ 32

Bootstrap ................................................................... 713

border-box .............................................................. 593

CSS3 ....................................................................... 418

Box-Modell ............................................................. 405

alternatives Box-Modell (CSS3) ................... 417

box-sizing: border-box ................................... 417

klassisches Box-Modell ................................. 406

� Kastenmodell

box-sizing

border-box .......................................................... 594

content-box ........................................................ 419

Breakpoints ............................................................. 567

Browserstylesheet ................................................ 383

Buchstabenabstand ............................................. 632

C

Cache Manifest .................................................. 1000

Camel Case .............................................................. 818

Canvas ....................................................................... 935

Bibliotheken ...................................................... 948

Bilder kopieren .................................................. 941


Index

1222

Bilder manipulieren ........................................ 941

getContext .......................................................... 937

Methoden ........................................................... 939

Rendering Context ........................................... 937

Cascading Style Sheets ................................. 41, 299

clear ........................................................................... 476

both ............................................................... 476, 581

left .......................................................................... 476

none ...................................................................... 476

right ...................................................................... 476

cm ................................................................................ 393

Collapsing Margins .............................................. 412

Conditional Comments ............................. 701, 716

Content-Modell

HTML 4.01 ........................................................... 230

HTML5 ................................................................... 231

CSS ........................................................................ 41, 299

alternatives Stylesheet ................................... 314

border-box .......................................................... 418

Code kommentieren ....................................... 306

Codeformatierung .......................................... 307

CSS Level 1 (CSS1) ............................................. 300

CSS Level 2 (CSS 2) ............................................. 301

CSS Level 3 (CSS3) .............................................. 301

Einbinden in HTML ......................................... 308

jQuery ..................................................................... 911

Kaskade ........................................................ 313, 382

Kombinatoren ................................................. 1201

manipulieren ...................................................... 817

Media Queries .................................................... 319

� Cascading Style Sheets

Selektoren ............................................................ 321

Selektoren (Übersicht) ................................. 1200

style-Attribut ..................................................... 308

Vererbung ............................................................ 375

CSS validieren ....................................................... 690

CSS3 .......................................................................... 690

CSS3-Webbrowsertest ........................................ 689

CSS-Attribute

media="handheld" ........................................... 533

CSSDoc ...................................................................... 306

CSS-Eigenschaften

!important .......................................................... 384

align-content .................................................... 1167

align-items ........................................................ 1168

align-self ............................................................ 1169

animation ......................................................... 1189

animation-delay ............................................. 1190

animation-direction ..................................... 1190

animation-duration ...................................... 1190

animation-iteration-count ......................... 1189

animation-name ............................................. 1189

animation-play-state .................................... 1191

animation-timing-function ....................... 1190

backface-visibility ........................................... 1187

background ..................................... 431, 436, 1148

background-attachment ............ 431, 435, 1148

background-clip .............................................. 1149

background-color ........................ 430–431, 1149

background-image ...................... 431, 560, 1150

background-origin ............................... 439, 1150

background-position ..................... 431, 435, 1151

background-repeat ....................... 431, 434, 1151

background-size ........................... 438, 560, 1152

background-size: contain ............................. 563

background-size: cover ................................. 563

benannte Farben .............................................. 395

border ............................................... 409, 426, 1153

border-bottom ....................................... 409, 1155

border-bottom-color ..................................... 1156

border-bottom-left-radius .................. 445, 1159

border-bottom-right-radius .............. 445, 1159

border-bottom-style ...................................... 1156

border-bottom-width .................................... 1156

border-collapse ....................................... 654, 1182

border-color ............................................. 426, 1154

border-image ........................................... 429, 1156

border-image-outset ..................................... 1157

border-image-repeat ............................ 429, 1158

border-image-slice ................................. 429, 1157

border-image-source ..................................... 1157

border-image-width .............................. 429, 1157

border-left ................................................ 409, 1155

border-left-color .............................................. 1156

border-left-style ............................................... 1156

border-left-width ............................................. 1156

border-radius ........................................... 445, 1158

border-right ............................................. 409, 1155

border-right-color ........................................... 1156

border-right-style ............................................ 1156

border-right-width ......................................... 1156

border-spacing ........................................ 654, 1183

border-style .............................................. 426, 1153

border-top ................................................ 409, 1155

border-top-color .............................................. 1156

border-top-left-radius .......................... 445, 1159

border-top-right-radius ....................... 445, 1159

border-top-style ............................................... 1156

border-top-width ............................................ 1156

border-width ............................................ 426, 1153


Index

1223

bottom ........................................................ 452, 1159

box-shadow ............................................. 444, 1159

box-sizing ................................................... 419, 593

box-sizing: border-box ................................... 419

caption-side ............................................. 656, 1183

clear .................................................. 476, 504, 1160

clip ............................................................. 660, 1160

clip-path ............................................................. 1160

color ...................................................................... 1147

column-count .................................................. 1196

column-fill .......................................................... 1197

column-gap ....................................................... 1197

column-rule ....................................................... 1197

column-rule-color ........................................... 1197

column-rule-style ........................................... 1198

column-rule-width ......................................... 1198

columns .............................................................. 1196

column-width .................................................. 1196

content ...................................................... 359, 1193

counter-increment ......................................... 1184

counter-reset .................................................... 1184

direction .............................................................. 1181

display .............................................. 508, 601, 1161

display: block .................................................... 679

display: flex ................................................ 485, 527

display: grid ....................................................... 601

display: inline .......................................... 544, 647

display: inline-block ....................................... 679

display: table ............................................. 508, 521

display: table-cell .................................... 508, 521

display:block ...................................................... 545

empty-cells ................................................ 655, 1183

Farbangaben ...................................................... 395

Farbverlauf hinzufügen ................................ 440

flex ............................................................... 488, 1169

flex-basis ................................................... 488, 1170

flex-direction ............................................ 485, 1171

flex-flow .............................................................. 1171

flex-grow ................................................... 488, 1170

flex-shrink ................................................ 488, 1170

float .................. 470, 503, 507, 511, 514, 647, 1161

font .............................................................. 630, 1178

font-family .............................................. 606, 1180

font-size ..................................................... 621, 1180

font-size-adjust ................................................ 1181

font-stretch ............................................... 633, 1181

font-style .................................................... 627, 1179

font-variant ............................................. 628, 1179

font-weight ............................................... 627, 1179

height ................................................ 407, 657, 1162

inherit .................................................................. 380

initial ..................................................................... 382

justify-content .................................................. 1167

Kurzschreibweise ............................................. 401

left ................................................................ 452, 1159

letter-spacing ........................................... 632, 1173

line-height ...................................... 629, 1173, 1180

list-style ...................................................... 644, 1185

list-style-image ...................................... 642, 1186

list-style-position .................................. 643, 1186

list-style-type ................................... 165, 641, 1185

margin ........................................................ 410, 1162

margin-bottom ....................................... 410, 1162

margin-left ................................................ 410, 1162

margin-right ............................................ 410, 1162

margin-top ............................................... 410, 1162

Maßeinheiten .................................................... 392

max-height ........................................................ 1162

max-width .............................. 505, 553, 555, 1166

min-height ......................................................... 1162

min-width ................................................ 505, 1166

name="viewport" ............................................. 548

opacity ...................................................... 439, 1148

order ............................................................ 491, 1172

orphans ............................................................... 1198

outline ................................................................. 1194

outline-color ..................................................... 1194

outline-offset .................................................... 1195

outline-style ...................................................... 1194

outline-width .................................................... 1195

overflow ............................................ 482, 514, 1163

overflow-x .......................................................... 1163

overflow-y .......................................................... 1163

padding ..................................................... 409, 1163

padding-bottom .................................... 409, 1164

padding-left ............................................. 409, 1164

padding-right ......................................... 409, 1164

padding-top ............................................ 409, 1164

page-break-after ............................................ 1199

page-break-before ......................................... 1199

page-break-inside .......................................... 1199

perspective ......................................................... 1187

perspective-origin ........................................... 1187

position ..................................................... 449, 1164

quotes .................................................................. 1173

resize .................................................................... 1195

right ............................................................. 452, 1159

Schlüsselwörter (Werte) ................................. 394

Standardwert wiederherstellen .................. 382

table-layout .............................................. 651, 1183


Index

1224

tab-size ................................................................ 1173

text-align ................................................... 633, 1174

text-decoration ....................................... 637, 1177

text-decoration-color .................................... 1177

text-decoration-line ....................................... 1177

text-decoration-style ..................................... 1177

text-indent ............................................... 636, 1174

text-overflow ..................................................... 1175

text-shadow .............................................. 639, 1177

text-transform ........................................ 638, 1174

top ................................................................ 452, 1159

transform ................................................. 668, 1187

transform-origin ............................................. 1188

transform-style ............................................... 1188

transition ................................................... 674, 1191

transition-delay .............................................. 1192

transition-duration ........................................ 1191

transition-property ........................................ 1191

transition-timing-function ......................... 1191

unicode-bidi ...................................................... 1182

Vererbung ............................................................ 375

Vererbung erzwingen .................................... 380

vertical-align ........................................... 634, 1165

visibility .............................................................. 1166

white-space ........................................................ 1175

widows ............................................................... 1200

width ................................................. 407, 657, 1166

Winkelmaße ..................................................... 400

word-break ......................................................... 1176

word-spacing .......................................... 632, 1176

word-wrap .......................................................... 1176

Zeichenketten (Werte) ................................... 394

z-index ...................................................... 460, 1166

CSS-Frameworks ..................................................... 711

CSS-Funktionen

hsl() ....................................................................... 400

hsla() ........................................................... 400, 439

linear-gradient() .............................................. 440

radial-gradient() .............................................. 442

rect() ..................................................................... 660

repeating-linear-gradient() ......................... 442

repeating-radial-gradient() ......................... 442

rgb() ....................................................................... 398

rgba() ........................................................... 398, 439

rotate() ................................................................. 670

scale() ................................................................... 669

skew() ................................................................... 670

translate() ............................................................ 671

CSS-Kompression ................................................. 695

CSS-Präprozessoren ............................................. 743

Less ......................................................................... 744

Sass ........................................................................ 749

CSS-Pseudoelemente ............................... 358, 1205

::after .................................................................... 359

::backdrop ......................................................... 1031

::before ................................................................. 359

::first-letter .......................................................... 358

::first-line ............................................................. 358

::selection ............................................................ 359

CSS-Pseudoklassen .................................... 345, 1202

:active ......................................................... 346, 683

:checked ............................................................... 347

:disabled .............................................................. 347

:empty ................................................................... 351

:enabled ............................................................... 347

:first-child ............................................................ 352

:first-of-type ....................................................... 354

:focus ..................................................................... 346

:fullscreen ......................................................... 1030

:hover ................................................. 346, 652, 683

:invalid ............................................... 278, 280, 285

:lang() ..................................................................... 357

:last-child ............................................................. 352

:last-of-type ........................................................ 354

:link ........................................................................ 345

:not() ....................................................................... 357

:nth-child() ................................................. 352–353

:nth-last-child() ........................................ 352–353

:nth-last-of-type() ............................................. 354

:nth-of-type() ...................................................... 354

:only-child .................................................. 352–353

:root ........................................................................ 351

:target ................................................................... 349

:valid ................................................... 278, 280, 285

:visited .................................................................. 345

CSS-Regeln ..................................................... 302, 304

@charset .......................................................... 1206

@document .................................................... 1206

@font-face ....................................................... 1206

@import ................................. 316, 535, 693, 1206

@keyframes .......................................... 1189, 1206

@media ................................... 318, 533, 535, 1206

@namespace ................................................... 1207

@page ................................................................ 1207

@supports ........................................................ 1207

CSS-Reset ................................................................. 696

Normalisierung ................................................ 698

CSS-Selektoren ...................................................... 304

CSS-Sprites ............................................................... 662


Index

1225

D

Dateinamen ............................................................... 77

Definitionsliste ...................................................... 167

deg .............................................................................. 401

Deprecated ................................................................. 42

Desktop First ........................................................... 567

display ...................................................................... 601

block ..................................................................... 602

flex ......................................................................... 602

inline ..................................................................... 602

inline-block ........................................................ 602

list-item ............................................................... 602

none .............................................................. 531, 602

run-in .................................................................... 602

table ...................................................................... 602

table-row ............................................................ 508

<div> .................................................................. 237, 587

<!doctype> ......................................... 68, 1042–1043

Document Object Model ............................ 60, 797

document.body ..................................................... 835

document.documentElement ......................... 835

document-Objekt ................................................. 799

Dokumenten-Outline ......................... 116, 118–119

DOM ......................................................... 60, 797–798

Ajax ....................................................................... 884

document-Objekt ............................................ 799

� HTML DOM

DOM-Baum ............................................................. 798

DOM-Eigenschaften ............................................ 801

childNodes .......................................................... 836

firstChild .................................................... 836, 887

hasChildNodes ................................................... 837

innerHTML .......................................................... 814

lastChild ............................................................... 837

nextSibling .......................................................... 837

nodeName ........................................................... 837

nodeType ............................................................. 837

nodeValue .................................................. 837, 887

parentNode ........................................................ 836

previousSibling .................................................. 837

style ........................................................................ 817

DOM-Funktionen ................................................. 801

appendChild() ........................................... 835, 841

cloneNode() ......................................................... 845

createElement() ................................................. 835

createTextNode() .............................................. 835

getAttribute() .................................................... 846

getElementById() ............................................. 802

getElementsByClassName() ........................ 806

getElementsByName() ................................... 806

getElementsByTagName() ........................... 803

hasAttribute() ................................................... 846

insertBefore() ..................................................... 841

querySelector() ................................................. 807

querySelectorAll() ............................................ 807

removeAttribute() ........................................... 846

removeChild() .................................................... 842

replaceChild() ..................................................... 843

setAttribute() .................................. 813, 845–846

write() .................................................................... 814

DOM-Inspektor .............................................. 60, 799

DOM-Manipulation .................................... 797, 834

DOM-Objektsammlung .................................... 809

anchors ................................................................. 812

baseURI ................................................................. 812

body ........................................................................ 812

cookie ..................................................................... 812

doctype .................................................................. 812

documentElement ............................................ 812

documentURI ..................................................... 812

domain .................................................................. 812

domConfig ........................................................... 812

embeds .................................................................. 812

forms ...................................................................... 812

head ........................................................................ 812

images ................................................................... 812

implementation ................................................ 812

inputEncoding .................................................... 812

lastModified ........................................................ 812

links ........................................................................ 813

readyState ............................................................ 813

referrer ................................................................... 813

scripts ..................................................................... 813

title .......................................................................... 813

URL .......................................................................... 813

Downloadlinks ....................................................... 201

Drag&Drop-API .................................................... 989

dataTransfer-Objekt ....................................... 992

drag ....................................................................... 991

dragend ................................................................ 991

dragenter ............................................................. 991

draggable ........................................................... 990

dragleave ............................................................. 991

dragover .............................................................. 991

dragstart .............................................................. 991

drop ....................................................................... 991

effectAllowed ..................................................... 993

getData() ............................................................ 994

setData() .............................................................. 992

setDragImage() ................................................. 993

dropshadow ........................................................... 640


Index

1226

Druckversion ........................................................... 531

Durchstreichen ...................................................... 637

Dynamische Webseiten ........................................ 38

E

Echtzeitkommunikation ................................. 1026

ECMAScript .............................................................. 753

em ................................................................................ 393

E-Mail-Adresse

mailto .................................................................... 196

prüfen .................................................................... 278

Embedded-Content .............................................. 233

Entitäten .................................................................... 172

Entwickler-Tools ................................................... 706

Event Handler ........................................................ 820

addEventListener() ........................................... 822

Event-Attribute

addEventListener() .......................................... 1101

für HTML-Elemente ...................................... 1100

onabort ............................................................... 1104

onafterprint ....................................................... 1101

onbeforeprint .................................................... 1101

onbeforeunload ............................................... 1101

onblur .................................................................. 1102

oncanplay .......................................................... 1105

oncanplaythrough ......................................... 1105

onchange ........................................................... 1102

onclick ................................................................. 1103

oncontextmenu .............................................. 1102

oncopy ................................................................ 1104

oncuechange .................................................... 1105

oncut ................................................................... 1104

ondblclick .......................................................... 1103

ondrag ................................................................ 1103

ondragend ......................................................... 1103

ondragenter ...................................................... 1103

ondragleave ...................................................... 1103

ondragover ....................................................... 1103

ondragstart ....................................................... 1103

ondrop ................................................................ 1104

ondurationchange ......................................... 1105

onemptied ......................................................... 1105

onended ............................................................. 1105

onerror ...................................................... 1101, 1105

onfocus ............................................................... 1102

onhashchange .................................................. 1101

oninput ............................................................... 1102

oninvalid ............................................................ 1102

onkeydown ....................................................... 1103

onkeypress ........................................................ 1103

onkeyup ............................................................. 1103

onload ................................................................. 1101

onloadeddata .................................................. 1105

onloadedmetadata ....................................... 1105

onloadstart ....................................................... 1105

onmessage ......................................................... 1101

onmousedown ................................................ 1104

onmousemove ................................................ 1104

onmouseout ..................................................... 1104

onmouseover ................................................... 1104

onmouseup ...................................................... 1104

onoffline ............................................................. 1101

ononline .............................................................. 1101

onpagehide ........................................................ 1101

onpageshow ..................................................... 1102

onpaste .............................................................. 1104

onpause ............................................................. 1105

onplay ................................................................. 1105

onplaying .......................................................... 1105

onpopstate ....................................................... 1102

onprogress ........................................................ 1105

onratechange .................................................. 1105

onreset ................................................................ 1103

onresize .............................................................. 1102

onscroll ............................................................... 1104

onsearch ............................................................ 1103

onselect .............................................................. 1103

onstalled ............................................................ 1106

onstorage .......................................................... 1102

onsubmit ........................................................... 1103

onsuspend ......................................................... 1106

ontimeupdate .................................................. 1106

onunload ........................................................... 1102

onvolumechange ........................................... 1106

onwaiting .......................................................... 1106

onwheel .............................................................. 1104

event-Objekt

altKey ..................................................................... 831

bubbles ................................................................. 832

button ................................................................... 832

cancelable ........................................................... 832

clientX ................................................................... 832

clientY ................................................................... 832

ctrlKey ................................................................... 831

currentTarget .................................................... 832

keyCode ................................................................ 832

metaKey ............................................................... 832

preventDefault() ............................................... 833

screenX ................................................................. 832

screenY ................................................................. 832

shiftKey ................................................................. 831


Index

1227

target ..................................................................... 832

type ........................................................................ 832

ex ................................................................................. 393

F

Farbangaben ........................................................... 395

benannte Farben .............................................. 395

hexadezimale Schreibweise ......................... 397

HSL-Mischung ................................................. 400

RGB-Mischung .................................................. 398

Transparenz ...................................................... 398

Farbauswahl-Dialog ............................................. 275

Farben auswählen ................................................. 275

Farbverlauf .............................................................. 440

Faux Column ........................................................... 517

Favicon ...................................................................... 226

favicon.ico ................................................................ 227

File API ........................................................ 1009, 1032

Flash abspielen ...................................................... 966

Flexbox ............................................................. 485, 527

display: flex ......................................................... 485

flex ......................................................................... 488

flex-direction ...................................................... 485

Layout ................................................................... 527

order ...................................................................... 491

flex-direction

column-reverse ................................................. 488

row-reverse ........................................................ 488

float ................................................... 470, 511, 514, 647

Aufheben mit clear ......................................... 476

Elemente nebeneinander .............................. 472

inherit .................................................................... 471

left ................................................................... 471, 473

none ....................................................................... 471

right ....................................................................... 471

zweispaltiges Layout ..................................... 503

Float drop ................................................................ 484

Flow-Content .......................................................... 232

Font Awesome ........................................................ 618

font-family

Webfonts ............................................................... 611

font-stack ............................................................... 606

<form> ...................................................................... 260

Form-Mailer ........................................................... 290

Formulare ................................................................. 259

Auswahlliste ....................................................... 265

Autovervollständigung .................................. 281

Bereich definieren ........................................... 260

Checkboxen ....................................................... 268

Datei-Upload ..................................................... 269

Datum und Uhrzeit eingeben ...................... 277

Datums-Eingabefeld ....................................... 276

Drowdown-Liste ............................................... 265

Eingabefokus setzen ........................................ 281

Elemente deaktivieren ................................... 287

Elemente gruppieren ...................................... 289

E-Mail-Eingabefeld .......................................... 278

Farbauswahl-Dialog ........................................ 275

Fehler bei der Eingabe .................................... 284

JavaScript ........................................................... 849

mehrere Submit-Schaltflächen ................... 272

mehrzeiliges Texteingabefeld ..................... 263

method="get" .................................................... 260

method="post" ................................................. 260

Monats-Eingabefeld ........................................ 277

neue Eingabefelder (HTML5) ....................... 274

nur lesbar ............................................................ 288

Passworteingabefeld ...................................... 262

PHP ....................................................................... 290

Platzhalter verwenden ................................... 284

Radiobuttons ..................................................... 266

reguläre Ausdrücke ......................................... 283

Schaltflächen ..................................................... 270

Schieberegler ..................................................... 280

Sucheingabefeld ............................................... 278

Tabulator-Reihenfolge ................................... 288

Tastenkürzel ....................................................... 288

Telefonnummern-Eingabefeld ................... 279

Texteingabefeld ................................................ 261

Textlabel .............................................................. 267

Uhrzeit-Eingabefeld ........................................ 276

URL-Eingabefeld ............................................... 279

verstecktes Eingabefeld .................................. 271

Wochen-Eingabefeld ........................................ 277

Zahlen-Eingabefeld ......................................... 279

Fullscreen API ....................................................... 1027

function ..................................................................... 771

G

Geolocation-API .................................................... 976

clearWatch() ....................................................... 983

coords.accuracy ................................................ 978

coords.altitude .................................................. 979

coords.altitudeAccuracy ............................... 979

coords.heading ................................................. 979

coords.latitude .................................................. 978

coords.longitude .............................................. 978

coords.speed ...................................................... 979

enableHighAccuracy ...................................... 982

Fehlerbehandlung ........................................... 980


Index

1228

getCurrentPosition() ...................................... 978

maximumAge ................................................... 982

Navigation erstellen ....................................... 988

PERMISSION_DENIED .................................... 981

POSITION_UNAVAILABLE ............................ 981

PositionOptions-Objekt ................................ 982

TIMEOUT ............................................................. 981

timeout ................................................................ 982

timestamp .......................................................... 979

watchPosition() ................................................ 983

GET-Methode .......................................................... 293

Geviertbreite ........................................................... 393

Gewichtung ............................................................ 386

grad ............................................................................ 401

Grafiken einbinden ............................................. 209

Grafiken gestalten ................................................ 657

Gridlayout ............................................................... 569

H

H.264-Codec ........................................................... 950

Hauptinhalt

<main> ................................................................. 134

Heading-Content .................................................. 232

Hintergrundfarbe ................................................ 430

Hintergrundgrafik ................................................ 431

fixieren .................................................................. 435

positionieren ...................................................... 435

reaktionsfähig machen ................................. 560

history-Objekt ....................................................... 867

back() .................................................................... 867

forward() ............................................................. 867

Hochformat

orientation .......................................................... 565

:hover

mobile Geräte ................................................... 348

HTML

Auszeichnungssprache ................................... 40

CSS hinzufügen ................................................ 308

validieren ............................................................... 52

HTML DOM .............................................................. 797

HTML5 ........................................................................ 40

HTML5-Elemente

CSS ......................................................................... 699

HTML5Shiv .............................................................. 701

HTML-Attribute ....................................................... 65

<source> ............................................................ 1074

<track> ................................................................ 1075

<video> ............................................................... 1075

abbr ..................................................................... 1086

accept .................................................................. 1057

accept-charset ......................................... 261, 1055

accesskey ................................................. 288, 1039

action ....................................... 260, 291, 293, 1055

alt ........................ 209, 219, 224, 1057, 1071, 1073

async ........................................................... 93, 1090

autocomplete .............................. 281, 1056–1057

autofocus ... 281, 1057, 1062–1063, 1065, 1068

autoplay ............................... 952, 963, 1075, 1077

border .................................................................... 182

challenge .......................................................... 1068

charset ............................ 93, 101, 171, 1088, 1090

charset="UTF-8" .................................................. 95

checked ........................................... 267, 1057, 1083

cite ............................................. 131, 148, 1051–1052

class .................................................. 327, 806, 1039

cols ............................................................. 264, 1062

colspan ...................................................... 178, 1086

content ........................................ 94–95, 101, 1088

contenteditable .............................................. 1039

contextmenu ................................................... 1039

controls ................................. 952, 963, 1075, 1077

coords ............................................... 222, 224, 1072

data-* ........................................................ 733, 1040

datalist ................................................................. 282

datetime .................................................... 152, 1052

default .................................................... 1076, 1084

defer ............................................................. 93, 1090

dir ..................................................... 144, 1040, 1051

disabled ................. 287, 1057, 1062, 1064–1065,

1067–1068, 1084

download .................... 201, 207, 225, 1072, 1079

draggable ............................................... 990, 1040

dropzone .......................................................... 1040

enctype ............................................. 261, 269, 1056

for .......................................... 267, 679, 1067, 1069

form .............. 272, 1057, 1062, 1064–1069, 1091

formaction .................................... 273, 1057, 1064

formenctype ......................................... 1058, 1064

formmethod ................................ 273, 1058, 1064

formnovalid ....................................................... 274

formnovalidate ................................... 1058, 1064

formtarget .................................... 273, 1058, 1065

headers .............................................................. 1086

height ................... 213, 215, 219, 929, 1058, 1070,

1073–1074, 1077, 1090–1091

hidden ................................................................ 1040

high ..................................................................... 1066

href ...... 82–83, 86, 191, 207, 223, 225, 311, 1072,

1079–1080, 1088


Index

1229

href="mailto: ... " ............................................... 196

hreflang ............ 86, 207, 225, 1072, 1079–1080

http-equiv ......................................... 95, 102, 1088

http-equiv="refresh" ......................................... 95

icon ...................................................................... 1084

id .................. 205, 272, 330, 764, 802, 936, 1040

ismap .......................................................... 219, 1074

keytype .............................................................. 1068

kind ............................................................ 957, 1076

label ............... 266, 958, 1067, 1077, 1083–1084

lang ............................................................... 69, 1041

list ............................................................... 282, 1059

loop ................................................. 963, 1075, 1077

low ....................................................................... 1066

manifest ................................................ 1002, 1044

manipulieren ............................................ 816, 846

max ......... 276–277, 280, 283, 1059, 1066, 1069

maxlength .......................... 262, 264, 1059, 1063

media ............. 86, 89, 207, 225, 317, 1046, 1072,

1076, 1079–1080

media="print" ..................................................... 531

media="screen" ................................................... 531

method .................................................... 260, 1056

method="get" .................................................... 260

method="post" ......................................... 260, 293

min ...................... 276–277, 280, 283, 1059, 1066

multiple ........... 266, 279, 283, 1032, 1059, 1065

muted .................................... 952, 963, 1075, 1077

name ............... 94, 102, 220, 262, 264, 266–267,

269, 272, 806, 852, 1056, 1059, 1063,

1066, 1068–1070, 1074, 1088, 1091

name="description" ........................................... 98

name="keywords" .............................................. 98

name="robots" ..................................................... 97

novalidate ............................................... 287, 1056

open .................................................................... 1046

optimum ........................................................... 1066

pattern ............................................. 279, 283, 1059

placeholder .................................. 284, 1059, 1063

poster ......................................................... 952, 1077

preload .................................. 952, 963, 1075, 1078

pubdate ................................................................. 155

readonly ....................................... 288, 1059, 1063

rel ................................. 86, 207, 1072, 1079–1080

rel="icon" ............................................................. 226

rel="stylesheet" ................................................... 311

required ................... 279, 284, 1060, 1063, 1066

reversed ..................................................... 163, 1082

role ......................................................................... 245

rows ........................................................... 264, 1063

rowspan ........................................ 178, 1086–1087

sandbox .................................................. 970, 1070

scope .............................................. 180, 1047, 1087

scoped ............................................................. 88–89

seamless .................................................. 970, 1070

selected ..................................................... 266, 1067

shape .......................................................... 222, 1073

size ............................... 87, 262, 1060, 1066, 1081

sortable .............................................................. 1085

sorted .................................................................. 1087

span .................................................................... 1086

spellcheck .......................................................... 1041

src ............ 93, 209, 219, 756, 928, 950, 952, 957,

963, 1060, 1070, 1074–1078, 1090

srcdoc ................................................................. 1070

srclang ....................................................... 958, 1077

start ............................................................ 163, 1083

step .................................................. 280, 283, 1060

style ........................................................... 308, 1041

tabindex .................................................... 288, 1041

target ....................... 82–83, 196, 208, 261, 1056,

1073, 1080, 1088

target="_blank" ................................................ 196

title .................... 138–139, 201, 211, 255, 314, 1041

translate ............................................................ 1041

type ........... 87, 89, 93, 200, 208, 950, 962, 966,

1047, 1060, 1065, 1073, 1076, 1080–1081,

1083–1084, 1090–1091

type="button" .................................................. 1061

type="checkbox" .................................... 268, 1061

type="checkboxen" .......................................... 852

type="color" .............................................. 275, 1061

type="date" .............................................. 276, 1061

type="datetime" ...................................... 277, 1061

type="datetime-local" .......................... 277, 1061

type="email" ............................................ 278, 1061

type="file" ..................................... 269, 1032, 1061

type="hidden" .......................................... 271, 1061

type="image" ................................................... 1061

type="month" .......................................... 277, 1061

type="number" ....................................... 279, 1061

type="password" ................................... 262, 1061

type="radio" .................................. 266, 852, 1062

type="range" .......................................... 280, 1062

type="reset" ............................................ 270, 1062

type="search" .......................................... 278, 1062

type="submit" ........................................ 270, 1062

type="tel" ................................................. 279, 1062

type="text" ..................................... 261, 849, 1062

type="text/css" ................................................... 312


Index

1230

type="text/javascript" .................................... 754

type="time" ............................................. 276, 1062

type="url" ................................................. 279, 1062

type="week" ............................................. 277, 1062

usemap ................................. 219–220, 1074, 1091

value ..... 163, 262, 266–267, 269, 272, 275–277,

849, 851, 1060, 1065–1067, 1069, 1083, 1091

width ........... 213, 215, 219, 929, 953, 1061, 1070,

1073–1074, 1078, 1090–1091

wrap ........................................................... 264, 1063

HTML-Elemente ...................................................... 60

<a> .................................................. 190, 1078–1079

<abbr> ........................................................ 138, 1047

<address> .......................................... 121, 157, 1047

<area> ........................................... 220, 1070–1071

<article> .......................................... 108, 241, 1044

<aside> ............................................. 110, 241, 1044

<audio> ......................................... 961, 1074–1075

<b> .............................................................. 146, 1048

<base> .............................................. 81, 1087–1088

<bdi> .......................................................... 144, 1048

<bdo> .............................................. 144, 1048, 1051

<blockquote> ................................ 131, 1048, 1051

<body> ............................................... 70, 106, 1042

<br> ............................................................. 127, 1042

<button> ....................................... 270, 1052, 1063

<canvas> ....................................... 935, 1070, 1073

<caption> ................................................ 188, 1084

<cite> .......................................................... 138, 1048

<code> ....................................................... 139, 1048

<col> ............................................... 185, 1084, 1086

<colgroup> ................................... 185, 1084, 1086

<datalist> .......................................................... 1052

<dd> ............................................................ 167, 1082

<del> ................................................ 151, 1049, 1052

<detail> ................................................................ 189

<details> ............................................... 1044, 1046

<dfn> .......................................................... 143, 1049

<dialog> ............................................................ 1044

<div> .................................................. 132, 678, 1045

<dl> ............................................................. 167, 1082

<dt> ............................................................. 167, 1082

<em> ........................................................... 145, 1049

<embed> .................................... 966, 1089–1090

<fieldset> ................... 289, 679, 683, 1053, 1068

<figcaption> ............................ 123, 189, 217, 1071

<figure> ..................................... 123, 189, 217, 1071

<footer> ............................................. 121, 241, 1045

<form> .......................... 260, 272, 291, 1053, 1055

<h1> ............................................................. 116, 1042

<h2> ............................................................ 116, 1042

<h3> ............................................................. 116, 1042

<h4> ............................................................. 116, 1042

<h5> ............................................................. 116, 1042

<h6> ............................................................. 116, 1042

<head> .................................................. 70, 73, 1087

<header> ............................................ 121, 241, 1045

<hgroup> .................................................. 120, 1045

<hr> ............................................................ 130, 1042

<html> ............................................. 69, 1042, 1044

<i> ............................................................... 146, 1049

<iframe> ................................................. 968, 1069

<img> .................................... 209, 928, 1071, 1073

<input type="checkbox"> ..................... 268, 852

<input type="color"> ....................................... 275

<input type="date"> ........................................ 276

<input type="datetime"> ............................... 277

<input type="datetime-local"> .................... 277

<input type="email"> ..................................... 278

<input type="file"> ........................................... 269

<input type="hidden"> .................................... 271

<input type="month"> .................................... 277

<input type="number"> ................................. 279

<input type="password"> ............................. 262

<input type="radio"> ............................. 266, 852

<input type="range"> .................................... 280

<input type="reset"> ....................................... 270

<input type="search"> ................................... 278

<input type="submit"> .................................. 270

<input type="tel"> ............................................ 279

<input type="text"> ................................ 261, 849

<input type="time"> ....................................... 276

<input type="url"> ........................................... 279

<input type="week"> ....................................... 277

<input> .................................................... 1053, 1057

<ins> ................................................. 151, 1049, 1052

<kbd> ......................................................... 142, 1049

<keygen> ............................................... 1053, 1068

<label> .................................. 267, 679, 1053, 1067

<legend> ......................................... 289, 683, 1053

<li> ........................................... 161–162, 1081, 1083

<link> ...................................... 83, 310, 1078, 1080

<main> ......................................................... 134, 241

<map> ............................................ 220, 1071, 1074

<mark> ...................................................... 146, 1049

<math> ................................................................. 934

<menu> .................................................. 1082–1083

<menuitem> ........................................ 1082–1083

<meta> ............................................ 93, 1087–1088

<meter> .................................................. 1053, 1066

<nav> .................................................. 113, 241, 1078

<noscript> ......................................... 92, 759, 1089


Index

1231

<object> ....................................... 967, 1089–1090

<ol> ................................................. 162, 1081–1082

<optgroup> ................................. 266, 1054, 1067

<option> ............................... 265, 851, 1054, 1067

<output> ............................................... 1054, 1069

<p> ............................................................... 125, 1042

<param> ....................................... 967, 1089, 1091

<picture> ............................................................. 564

<pre> .......................................................... 139, 1049

<progress> ............................................. 1055, 1069

<q> ................................................... 148, 1050–1051

<rp> ............................................................. 158, 1050

<rt> .............................................................. 158, 1050

<ruby> ........................................................ 158, 1050

<s> .............................................................. 149, 1050

<samp> ..................................................... 142, 1050

<script> ................ 91, 753–754, 756, 1089–1090

<section> ......................................... 107, 241, 1045

<select> .................................. 265, 851, 1055, 1065

<small> ..................................................... 156, 1050

<source> .......................................... 950, 961, 1076

<span> ....................................................... 159, 1045

<strong> .................................................... 145, 1050

<style> ................................... 88, 309, 1045–1046

<sub> .......................................................... 152, 1050

<summary> ............................................ 189, 1046

<sup> .......................................................... 152, 1050

<svg> .................................................................... 930

<table> ........................................... 176, 1084–1085

<tbody> ..................................................... 182, 1085

<td> ................................................. 176, 1085–1086

<textarea> ............................ 263, 851, 1055, 1062

<tfoot> ....................................................... 182, 1085

<th> ................................................. 176, 1085–1086

<thead> ..................................................... 182, 1085

<time> ............................................. 152, 1050, 1052

<title> ........................................................... 75, 1042

<tr> .............................................................. 176, 1085

<track> ...................................................... 956, 1076

<u> ............................................................. 149, 1050

<ul> .............................................................. 161, 1081

<var> ................................................................... 1051

<video> ..................................................... 950, 1077

<wbr> .......................................................... 128, 1051

Event-Attribute ............................................... 1100

verschachteln ....................................................... 61

HTML-Elemente (veraltet)

<acronym> ........................................................ 1091

<applet> ............................................................. 1091

<basefont> ....................................................... 1092

<big> ................................................................... 1092

<center> ............................................................ 1092

<dir> ................................................................... 1092

<font> ................................................................ 1092

<frame> ............................................................ 1092

<frameset> ....................................................... 1092

<noframes> ..................................................... 1092

<strike> ............................................................. 1092

<tt> ..................................................................... 1092

HTML-Formulare .................................................. 259

HTML-Kopfdaten .................................................... 70

HTML-Objekte ........................................................ 795

HTML-Tags ............................................................... 60

HTML-Zeichen maskieren .................................. 173

HTTP-Request ......................................................... 292

Hyperlinks ............................................................... 190

I

Icon ............................................................................. 226

Iconfonts ................................................................... 617

Image-Map .............................................................. 219

!important ............................................................... 384

in .................................................................................. 393

IndexedDB ............................................................ 1009

inherit ....................................................................... 380

Inline-Elemente ..................................................... 230

Inline-Styles ........................................................... 309

<input type="button"> ........................................ 271

Interactive-Content ............................................. 234

Internet Media Type ............................................ 1111

Internetadresse ....................................................... 79

Internetverbindung prüfen ........................... 1010

ISO-8859 ................................................................... 170

ISO-8859-1 ............................................................... 170

J

JavaScript ........................................................... 43, 751

<audio> ................................................................ 963

<canvas> ............................................................. 935

<noscript> ........................................................... 759

<script> ................................................................. 753

<video> ................................................................. 953

aktivieren ............................................................. 755

alert() ..................................................................... 767

Anweisungen .................................................... 760

Anweisungsblock .............................................. 777

appendChild() ................................................... 994

arithmetische Operatoren ............................ 768

Array ..................................................................... 782

Audio steuern .................................................... 963


Index

1232

Boolean() .............................................................. 779

boolescher Wahrheitswert ............................ 777

break ..................................................................... 789

clearInterval() ................................................... 863

clearTimeout() .................................................. 863

console.log() ...................................................... 766

deaktiviert ........................................................... 755

document.write() .............................................. 765

do-while-Schleife .............................................. 788

Drag&Drop-API ............................................... 989

Eigenschaften .................................................... 792

Event Handler ................................................... 820

Events .................................................................... 819

false ........................................................................ 777

Formulare ........................................................... 849

for-Schleife .......................................................... 784

function (Schlüsselwort) ................................. 771

Funktionen ......................................................... 770

Geolocation-API ............................................... 976

globale Variablen ............................................. 773

HTML-Objekte .................................................... 795

if-Verzweigung .................................................. 779

innerHTML ......................................................... 764

Internetverbindung prüfen ....................... 1010

JavaScript-Objekte .......................................... 794

Konsole ................................................................ 766

lokale Variablen ................................................ 773

Math ..................................................................... 770

mathematische Funktionen ....................... 770

Media-API ............................................................ 953

Methoden ............................................................ 793

Objekte ................................................................. 790

onmessage ........................................................ 1015

Schleifen ............................................................... 784

setInterval() ....................................................... 863

setTimeout() ...................................................... 863

switch-Fallunterscheidung ........................... 782

Timing Events ................................................... 863

true ......................................................................... 777

use strict ............................................................... 795

var ........................................................................... 773

Variablen ................................................... 760, 773

Vergleichsoperatoren ..................................... 778

Video steuern ..................................................... 953

while-Schleife ..................................................... 788

JavaScript Events ................................................... 819

abort ...................................................................... 825

blur ........................................................................ 829

change ................................................................. 829

click ....................................................................... 826

dblclick ................................................................. 826

dragend ................................................................ 991

dragenter ............................................................. 991

dragleave ............................................................. 991

dragover .............................................................. 991

dragstart .................................................... 991–992

drop ....................................................................... 991

Eigenschaften .................................................... 829

error ....................................................................... 825

Event Handler ................................................... 820

event-Objekt ....................................................... 829

focus ...................................................................... 829

keydown .............................................................. 829

keypress ............................................................... 829

keyup ..................................................................... 829

load ........................................................................ 825

mousedown ........................................................ 826

mousemove ........................................................ 826

mouseout ............................................................ 826

mouseover .......................................................... 826

mouseup .............................................................. 826

offline .................................................................. 1010

onblur .................................................................. 849

onchange .............................................................. 851

onclick .................................................................. 852

onkeyup ............................................................... 884

online .................................................................. 1010

onload ......................................................... 825, 877

onsubmit ............................................................. 853

onunload ............................................................. 825

preventDefault() ............................................... 833

reset ....................................................................... 829

resize ..................................................................... 825

scroll ...................................................................... 825

select ..................................................................... 829

Standardaktion ................................................ 832

Standardaktion verhindern ......................... 833

submit .......................................................... 829, 853

touchcancel ........................................................ 828

touchend ............................................................. 828

touchmove .......................................................... 828

touchstart ........................................................... 828

unload .................................................................. 825

JavaScript-Bibliothek

jQuery .................................................................. 894

JavaScript-Konsole ............................................... 766

JavaScript-Objekte ................................................ 794

des Webbrowsers .............................................. 857

von JavaScript .................................................. 869

jQuery ....................................................................... 894

$.get() .................................................................... 925

$.post() .................................................................. 925


Index

1233

addClass() ............................................................. 911

after() ................................................................... 906

Ajax ........................................................................ 922

animate() .................................................... 915, 919

append() .................................................... 897, 906

attr() ...................................................................... 903

before() ................................................................. 907

CSS ........................................................................... 911

css() .......................................................................... 911

document ready ............................................... 897

Effekte ................................................................... 914

empty() ................................................................ 907

Ereignisse ........................................................... 900

Events .................................................................. 900

fadeIn() ................................................................. 914

fadeOut() .............................................................. 914

fadeTo() ................................................................ 914

fadeToggle() ........................................................ 914

hide() ...................................................................... 914

html() .................................................................... 903

jquery() ................................................................ 898

load() ..................................................................... 923

Plug-ins ................................................................. 925

prepend() ............................................................ 906

remove() .............................................................. 907

removeClass() ..................................................... 911

Selektoren ........................................................... 897

show() .................................................................... 914

slideDown() ......................................................... 914

slideToggle() ....................................................... 914

slideUp() ............................................................... 914

stop() ...................................................................... 915

text() ..................................................................... 902

toggle() .................................................................. 914

toogleClass() ........................................................ 911

val() ....................................................................... 903

JScript ......................................................................... 753

JSON ........................................................................... 889

JSON.parse() ....................................................... 892

K

Kapitälchen ............................................................ 628

Kaskade ............................................................. 313, 382

Kastenmodell ........................................................ 405

Kombinatoren ............................................. 361, 1201

Kommentare ............................................................ 66

CSS ......................................................................... 306

Kurzschreibweise

CSS-Eigenschaften ........................................... 401

L

Landmark Roles ..................................................... 245

Layout ........................................................................ 493

dreispaltiges ....................................................... 510

Faux Column ...................................................... 517

feste Breite .......................................................... 494

Flexboxen ............................................................. 527

flexible Breite ..................................................... 494

Grid ........................................................................ 569

Inhalt horizontal zentrieren ........................ 501

Raster .................................................................... 569

Responsive .......................................................... 529

Tabellenlayout ................................................. 508

zweispaltiges ..................................................... 495

Leerzeichen

.................................................................. 129

Less ............................................................................. 744

Lightbox .................................................................... 971

Links ........................................................................... 190

Linktext ..................................................................... 191

Listen ......................................................................... 160

Bildergalerie ...................................................... 664

Grafiken als Aufzählungszeichen .............. 642

Listen gestalten .................................................... 640

Listendarstellung .................................................. 160

Beschreibungsliste ............................................ 167

geordnet .............................................................. 162

nummeriert ........................................................ 162

Nummerierung ändern .................................. 163

Nummerierung umdrehen ............................ 163

ungeordnet .......................................................... 161

verschachteln .................................................... 164

Listeneintrag

<li> .......................................................................... 161

Local Storage ........................................................ 1004

location-Objekt ...................................................... 865

assign() ................................................................ 866

hostname ........................................................... 866

href ........................................................................ 866

pathname ........................................................... 866

protocol ............................................................... 866

M

Maßeinheiten ......................................................... 392

MathML .................................................................... 933

max-height .............................................................. 507

media

handheld ............................................................. 533


Index

1234

Media Queries ....................................... 319, 529, 533

<media name="viewport"> .......................... 548

aspect-ratio ......................................................... 538

color ....................................................................... 539

device-aspect-ratio .......................................... 538

device-height ...................................................... 538

device-width ....................................................... 538

height .................................................................... 538

max-aspect-ratio .............................................. 538

max-color ............................................................ 539

max-device-aspect-ratio ............................... 538

max-device-height ........................................... 538

max-device-width ............................................ 538

max-height ......................................................... 538

max-resolution ................................................. 539

max-width ........................................................... 538

min-aspect-ratio ............................................... 538

min-color ............................................................. 539

min-device-aspect-ratio ................................ 538

min-device-height ............................................ 538

min-device-width ............................................. 538

min-height .......................................................... 538

min-resolution ................................................... 539

min-width ............................................................ 538

orientation .......................................................... 538

orientation: landscape ................................... 565

orientation: portrait ....................................... 565

Rasterlayout ....................................................... 588

resolution ............................................................ 539

width ..................................................................... 538

Media-API ....................................................... 953, 963

Menüleiste .............................................................. 645

<meta charset="UTF-8"> ..................................... 169

Metadata-Content ................................................ 234

Millimeter ................................................................ 393

MIME-Sniffing ....................................................... 1118

MIME-Typen .................................................. 200, 1111

min-height .............................................................. 507

Mixins ....................................................................... 746

mm .............................................................................. 393

Mobile First .............................................................. 567

Modernizr ............................................................... 704

Modulares CSS ....................................................... 696

MP3 abspielen ........................................................ 961

N

Namenskonvention ............................................... 76

Navigationsleiste ................................................. 645

navigator-Objekt .................................................. 867

Normalisierung

CSS ......................................................................... 698

normalize.css ......................................................... 698

<noscript> .................................................................. 92

O

Offlinedaten ........................................................... 999<ol>

list-style-type ..................................................... 641Onlineshop ................................................................ 34Orientierungspunkte .......................................... 245Outline ............................................................... 116, 119overflow

auto ....................................................................... 520

P

pc ................................................................................. 393PHP

Form-Mailer ...................................................... 290Phrasing-Content ................................................. 233Pica ............................................................................. 393Pixel ............................................................................ 392Polyglottes Markup ........................................... 1107position ..................................................................... 449Positionierung ....................................................... 449

absolute .................................. 455, 496, 500, 650fixe ......................................................................... 457float ...................................................................... 470relative ................................................................. 453statische .............................................................. 450

POST-Methode ....................................................... 293Progressive Verbesserung ................................. 765Protokoll ..................................................................... 79Prozent ...................................................................... 393pt .................................................................................. 393Punkt ......................................................................... 393px ................................................................................ 392

Q

Querformat

orientation ......................................................... 565

Query String ........................................................... 293

R

rad ............................................................................... 401

Rahmen .................................................................... 428

Schmuckrahmen .............................................. 429

Rahmen gestalten ................................................. 426


Index

1235

Rasterlayout ........................................................... 569

border-box .......................................................... 593

Media Queries .................................................... 588

� Gridlayout

Recommendation ................................................ 424

Referenzierung ........................................................ 78

Reguläre Ausdrücke ............................................. 283

rem .................................................................... 394, 624

Responsive Images .............................................. 564

Responsive Layouts ............................................. 529

Responsive Webdesign .............................. 530, 534

rgb() ............................................................................ 398

rgba() ......................................................................... 398

RGB-Mischung ...................................................... 398

Transparenz ...................................................... 398

Rich Internet Application .................................... 35

Ruby-Annotation .................................................. 158

Runde Ecken hinzufügen ................................... 445

S

Sass ............................................................................. 749

Schlagschatten ...................................................... 639

Schlagschatten hinzufügen ............................. 444

Schriftarten ............................................................ 606

Webfonts ............................................................. 610

Schriftformatierung ............................................ 630

Schriftgröße ................................................... 566, 621

em ........................................................................... 622

Pixel ...................................................................... 626

Punkt .................................................................... 626

relative (em) ....................................................... 622

rem ........................................................................ 624

Schlüsselwörter ................................................. 622

Schriftklassen ........................................................ 607

Schriftschnitt

fett .......................................................................... 627

kursiv ..................................................................... 627

screen-Objekt ......................................................... 864

availHeight ........................................................ 865

availWidth .......................................................... 865

colorDepth ......................................................... 865

height ................................................................... 864

pixelDepth .......................................................... 865

width .................................................................... 864

Sectioning-Content .............................................. 232

Sektionselemente ................................................. 107

Selektor

Muster ................................................................... 322

Verschachteln .................................................... 362

Selektoren ........................................... 304, 321, 1200

Attributselektor (Attributwert) .................. 339

Attributselektor (Präsenz) ............................ 336

Attributselektor (Teilwert) ............................ 342

Geschwisterselektor ........................................ 368

Gewichtung ........................................................ 386

gruppieren .......................................................... 326

ID-Selektor .......................................................... 330

jQuery ................................................................... 897

Kindselektor ....................................................... 365

Klassenselektor ................................................. 327

Kombinatoren .................................................... 361

Nachbarselektor ............................................... 367

Nachfahrenselektor ........................................ 363

Negations-Pseudoklasse ................................ 357

Performance ...................................................... 370

Pseudoklassen ................................................... 345

� CSS-Selektoren

Sprach-Pseudoklasse ....................................... 357

Struktur-Pseudoklassen ................................ 350

Typselektor ......................................................... 323

Universalselektor ............................................. 333

Userinterface-Pseudoklassen ...................... 347

Semantisches HTML ............................................ 235

Server Sent Events ............................................. 1020

event.data ......................................................... 1021

EventSource-Objekt ....................................... 1021

onmessage ........................................................ 1021

Session Storage ................................................... 1004

SGML ............................................................................. 41

Sniffer ........................................................................ 703

Spam .......................................................................... 198

Spezifität .................................................................. 386

Sprites ........................................................................ 662

Sprungmarke .......................................................... 203

SSE API .................................................................... 1020

Standalone Tags ...................................................... 64

Standort ermitteln ............................................... 976

Stapelung ................................................................ 460

Statische Webseiten .............................................. 36

SVG-Elemente

<circle .../> ........................................................... 932

<ellipse .../> ......................................................... 932

<line .../> .............................................................. 932

<path .../> ............................................................. 931

<polygon .../> ..................................................... 932

<polyline .../> ..................................................... 932

<rect .../> .............................................................. 932

<text>...</text> ................................................. 933


Index

1236

SVG-Format ............................................................ 928

<img> ................................................................... 928

<svg> .................................................................... 930

SVG-Tags ................................................................... 931

Symbole .................................................................... 617

T

Tabellen ............................................................. 175, 651

feste Breite ........................................................... 651

Tabellen beschriften ................................... 188, 656

Tabellenlayout ...................................................... 508

Text einrücken ...................................................... 636

Text hochstellen

<sup> ...................................................................... 152

Text tiefstellen

<sub> ...................................................................... 152

Textausrichtung .................................................... 633

vertikal ................................................................. 634

Textauszeichnungen ........................................... 136

textContent ............................................................ 810

text-decoration ...................................................... 637

Textgestaltung ..................................................... 606

text-transform ...................................................... 628

Textunterstrich ....................................................... 152

Timing Events ....................................................... 863

Transformieren ..................................................... 668

drehen .................................................................. 670

neigen .................................................................. 670

skalieren .............................................................. 669

verschieben ......................................................... 671

transition ................................................................. 674

transition-delay ................................................ 675

transition-duration ......................................... 675

transition-property ......................................... 675

transition-timing-function .......................... 675

Transparenz ............................................................ 439

Trennungsstrich

..................................................................... 129

turn ............................................................................ 401

typeof-Operator .................................................. 1005

U

Übergänge ............................................................... 674

Überschriften ........................................................... 116

Unicode ...................................................................... 171

Universalselektor

Gewichtung ........................................................ 387

Unterstreichen ....................................................... 637

Untertitel

Video, Audio ....................................................... 956

URL ............................................................................... 78

UTF-8 ............................................................ 95, 169, 171

V

Validieren

HTML ....................................................................... 52

var ................................................................................ 773

Vektorgrafiken ....................................................... 928

<img> .................................................................... 928

<svg> .................................................................... 930

Vererbung

CSS ........................................................................... 375

inherit .................................................................. 380

Versalien ................................................................... 628

Verweissensitive Grafiken ................................ 219

Verweistext .............................................................. 191

Verzeichnisnamen .................................................. 77

Verzeichnisstruktur ................................................ 77

vh ................................................................................. 394

Videos

abspielen ............................................................ 950

steuern .................................................................. 953

YouTube ............................................................... 959

Viewport .......................................................... 539, 548

Breite ..................................................................... 394

Höhe ...................................................................... 394

Resizer ................................................................... 691

vw ................................................................................ 394

W

Web SQL ................................................................. 1009

Web Storage ......................................................... 1004

clear() ................................................................. 1006

getItem() ........................................................... 1006

localStorage .................................................... 1005

removeItem() .................................................. 1006

sessionStorage ............................................... 1005

setItem() ............................................................ 1006

Web Workers ......................................................... 1011

onerror ............................................................... 1018

onmessage ........................................................ 1015

postMessage() ................................................. 1015

self.close() .......................................................... 1018

terminate() ........................................................ 1018

Worker-Objekt ................................................. 1014

Webbrowser .............................................................. 46

Standardstylesheet .......................................... 383


Index

1237

Webbrowser-Präfixe ............................................ 423

Webbrowser-Sniffer ............................................ 703

Webbrowser-Test

CSS ......................................................................... 688

Webbrowser-Weiche ........................................... 702

Webfonts ................................................................. 610

Webformulare ........................................................ 259

WebGL ..................................................................... 1027

Weblinks .................................................................. 190

Weblog ......................................................................... 32

WebM-Format ....................................................... 950

Webplattform ........................................................... 35

Webpräsenz ................................................................ 31

WebRTC .................................................................. 1026

Webserver .................................................................. 39

Webshop ..................................................................... 34

WebSockets ........................................................... 1024

WebVTT-Format ................................................... 958

window.close() ....................................................... 860

window-Objekt ....................................................... 858

alert() ..................................................................... 861

close() ................................................................... 860

confirm() .............................................................. 861

innerWidth .......................................................... 858

open() ................................................................... 859

outerWidth .......................................................... 858

prompt() ............................................................... 861

setInterval() ....................................................... 863

Winkelmaße .......................................................... 400

Working Draft ........................................................ 424

Wortabstand ........................................................... 632

Wurzel-Em ............................................................... 394

WYSIWYG-Editor ..................................................... 45

X

x-Höhe ...................................................................... 393

XHTML5 .................................................................. 1106

XML-Deklaration ................................................ 1107

XMLHttpRequest-Objekt ................................... 877

Y

YouTube abspielen ............................................... 959

Z

Zeichencodierung ......................................... 95, 169

Zeilenabstand ......................................................... 629

Zeilenumbruch

<br> ........................................................................ 127

<wbr> ..................................................................... 128

verhindern .......................................................... 129

Zeitangaben ............................................................ 401

Zentimeter ............................................................... 393

Zielanker ................................................................... 203

z-index ..................................................................... 460

Zoll .............................................................................. 393

Zugänglichkeit ....................................................... 244


Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne emp-fehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstellung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nutzungs- und Verwertungsrechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

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.

Jürgen Wolf

HTML5 und CSS3 – Das umfassende Handbuch1.237 Seiten, gebunden, Mai 2015 39,90 Euro, ISBN 978-3-8362-2885-5

www.rheinwerk-verlag.de/3612

Wissen, wie’s geht.

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

https://www.facebook.com/rheinwerkverlag

https://plus.google.com/118435207805510651040

http://twitter.com/rheinwerkverlag

Documents

HTML5 und CSS3 – Das umfassende Handbuch Tabellen, Hyperlinks und Bilder 182 sollten Sie zur Formatierung nur noch CSS verwenden. Für das table -Element unterstützt HTML5 im Augenblick