Upload
hoangque
View
222
Download
1
Embed Size (px)
Citation preview
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.
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
2885.book Seite 176 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
2885.book Seite 177 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.
2885.book Seite 178 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
…
Listing 5.2 /Beispiele/Kapitel005/5_1_2/index.html
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.
2885.book Seite 179 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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>
2885.book Seite 180 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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,
2885.book Seite 181 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.
2885.book Seite 182 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
…
Listing 5.4 /Beispiele/Kapitel005/5_1_4/index.html
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.
2885.book Seite 183 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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>
2885.book Seite 184 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
2885.book Seite 185 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
186
</tr>……
</table>…
Listing 5.5 /Beispiele/Kapitel005/5_1_5/index.html
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>
2885.book Seite 186 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
2885.book Seite 187 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
</tr>……
</table>…
Listing 5.6 /Beispiele/Kapitel005/5_1_6/index.html
Abbildung 5.10 Die Überschrift wird standardmäßig zentriert über der Tabelle angezeigt.
2885.book Seite 188 Donnerstag, 30. April 2015 12:35 12
5.1 Daten in einer Tabelle strukturieren
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>
2885.book Seite 189 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
190
<th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
</tr>…</table><figcaption>Tabelle 1: Browserstatistik 08/2015</figcaption></figure></article>
…
Listing 5.7 /Beispiele/Kapitel005/5_1_6/index3.html
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.
2885.book Seite 190 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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
2885.book Seite 191 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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
2885.book Seite 192 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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>
…
Listing 5.8 /Beispiele/Kapitel005/5_2_1/index.html
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
2885.book Seite 193 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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>
2885.book Seite 194 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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>
…
Listing 5.10 /Beispiele/Kapitel005/5_2_2/index.html
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.
2885.book Seite 195 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.:
2885.book Seite 196 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
197
5
…<footer><a href="mailto:[email protected]">E-Mail senden</a>
</footer>…
Listing 5.11 /Beispiele/Kapitel005/5_2_4/index.html
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.
2885.book Seite 197 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.
2885.book Seite 198 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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>…
Listing 5.12 /Beispiele/Kapitel005/5_2_5/index.html
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
2885.book Seite 199 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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)«.
2885.book Seite 200 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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>…
Listing 5.13 /Beispiele/Kapitel005/5_2_6/index.html
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-
2885.book Seite 201 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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>…
2885.book Seite 202 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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>
2885.book Seite 203 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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>
…
Listing 5.14 /Beispiele/Kapitel005/5_2_7/index.html
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 …
2885.book Seite 204 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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">).
2885.book Seite 205 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.
2885.book Seite 206 Donnerstag, 30. April 2015 12:35 12
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
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
2885.book Seite 207 Donnerstag, 30. April 2015 12:35 12
5 Tabellen, Hyperlinks und Bilder
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.)
2885.book Seite 208 Donnerstag, 30. April 2015 12:35 12
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.
2885.book Seite 493 Donnerstag, 30. April 2015 12:35 12
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.
2885.book Seite 494 Donnerstag, 30. April 2015 12:35 12
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.
13.2 Ein zweispaltiges Layout erstellen
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>
2885.book Seite 495 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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>
2885.book Seite 496 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
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>…
Listing 13.1 /Beispiele/Kapitel013/13_2_1/index.html
2885.book Seite 497 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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%;
}…
Listing 13.2 /Beispiele/Kapitel013/13_2_1/index2.html
2885.book Seite 498 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
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.
2885.book Seite 499 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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;
2885.book Seite 500 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
501
13
width: 450px;}
…
Listing 13.3 /Beispiele/Kapitel013/13_2_2/index.html
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.
2885.book Seite 501 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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>…
Listing 13.4 /Beispiele/Kapitel013/13_2_3/index.html
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:
2885.book Seite 502 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
503
13
…main {
margin: 0;padding: 1% 10%;margin-left: 190px;border: 0;width: 450px;
}…
Listing 13.5 /Beispiele/Kapitel013/13_2_3/index2.html
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.
2885.book Seite 503 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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; }
…
Listing 13.6 /Beispiele/Kapitel013/13_2_4/index.html
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.
2885.book Seite 504 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
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;
2885.book Seite 505 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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>
…
Listing 13.7 /Beispiele/Kapitel013/13_2_5/index.html
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.
2885.book Seite 506 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
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;
2885.book Seite 507 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
508
margin: 0;border: 0;width: 500px;
}.clear { clear: both; }
…
Listing 13.8 /Beispiele/Kapitel013/13_2_6/index.html
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-
2885.book Seite 508 Donnerstag, 30. April 2015 12:35 12
13.2 Ein zweispaltiges Layout erstellen
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>
…
Listing 13.9 /Beispiele/Kapitel013/13_2_7/index.html
2885.book Seite 509 Donnerstag, 30. April 2015 12:35 12
13 Das Layout mit CSS gestalten
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.
2885.book Seite 510 Donnerstag, 30. April 2015 12:35 12
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.
2885.book Seite 975 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 976 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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>
2885.book Seite 977 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
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
2885.book Seite 978 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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
Eigenschaft Beschreibung
Tabelle 22.1 Daten, die von »getCurrentPosition()« bei Erfolg zurückgegeben werden
2885.book Seite 979 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
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) {
2885.book Seite 980 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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
2885.book Seite 981 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
982
}else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";
}}
…
Listing 22.3 /Beispiele/Kapitel022/22_1/index3.html
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
};…
Eigenschaft Beschreibung
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
2885.book Seite 982 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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,
2885.book Seite 983 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
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>…
Listing 22.4 /Beispiele/Kapitel022/22_1/index4.html
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
2885.book Seite 984 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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:
…<!-- Für Google Maps --><script src="http://maps.google.com/maps/api/js?sensor=true"></script><!-- Für Bing Maps --><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);}
}
2885.book Seite 985 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
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>…
Listing 22.5 /Beispiele/Kapitel022/22_1/index5.html
2885.book Seite 986 Donnerstag, 30. April 2015 12:35 12
22.1 Den Standort ermitteln mit der Geolocation-API
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.
2885.book Seite 987 Donnerstag, 30. April 2015 12:35 12
22 Weitere interessante HTML5-Features
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.
2885.book Seite 988 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 989 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 3 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 5 Donnerstag, 30. April 2015 12:35 12
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
2.3 Zusammenfassung ............................................................................................................. 71
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
2885.book Seite 6 Donnerstag, 30. April 2015 12:35 12
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
3.9 Zusammenfassung ............................................................................................................. 102
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
2885.book Seite 7 Donnerstag, 30. April 2015 12:35 12
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
4.8 Zusammenfassung ............................................................................................................. 173
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
2885.book Seite 8 Donnerstag, 30. April 2015 12:35 12
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
5.6 Zusammenfassung ............................................................................................................. 228
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
2885.book Seite 9 Donnerstag, 30. April 2015 12:35 12
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
6.5 Zusammenfassung ............................................................................................................. 257
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
2885.book Seite 10 Donnerstag, 30. April 2015 12:35 12
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
7.7 Zusammenfassung ............................................................................................................. 297
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
2885.book Seite 11 Donnerstag, 30. April 2015 12:35 12
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
8.4 Zusammenfassung ............................................................................................................. 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
2885.book Seite 12 Donnerstag, 30. April 2015 12:35 12
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
9.4 Zusammenfassung ............................................................................................................. 371
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
10.4 Zusammenfassung ............................................................................................................. 403
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
2885.book Seite 13 Donnerstag, 30. April 2015 12:35 12
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
11.4 Zusammenfassung ............................................................................................................. 447
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
2885.book Seite 14 Donnerstag, 30. April 2015 12:35 12
Inhalt
15
12.4.3 Flexible Boxen mit fester Höhe ....................................................................... 490
12.4.4 Die Reihenfolge der Boxen bestimmen ........................................................ 491
12.5 Zusammenfassung ............................................................................................................. 492
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
2885.book Seite 15 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 16 Donnerstag, 30. April 2015 12:35 12
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
14.8 Zusammenfassung ............................................................................................................. 685
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
2885.book Seite 17 Donnerstag, 30. April 2015 12:35 12
Inhalt
18
15.8 Modernizr – Fähigkeiten des Webbrowsers testen ............................................. 704
15.9 Entwickler-Tools des Webbrowsers ............................................................................ 706
15.10 Zusammenfassung ............................................................................................................. 709
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
16.4 Zusammenfassung ............................................................................................................. 750
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
2885.book Seite 18 Donnerstag, 30. April 2015 12:35 12
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
17.12 Zusammenfassung ............................................................................................................. 796
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
2885.book Seite 19 Donnerstag, 30. April 2015 12:35 12
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
18.13 Zusammenfassung ............................................................................................................. 855
2885.book Seite 20 Donnerstag, 30. April 2015 12:35 12
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
19.7 Zusammenfassung ............................................................................................................. 870
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
2885.book Seite 21 Donnerstag, 30. April 2015 12:35 12
Inhalt
22
20.2.10 Weitere jQuery-Plug-ins verwenden ............................................................. 925
20.2.11 Letzte Hinweise zu jQuery ................................................................................ 926
20.3 Zusammenfassung ............................................................................................................. 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
2885.book Seite 22 Donnerstag, 30. April 2015 12:35 12
Inhalt
23
21.6 Bildergalerie mit Lightbox verwenden ...................................................................... 970
21.7 Zusammenfassung ............................................................................................................. 973
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
22.7 Zusammenfassung ............................................................................................................. 1035
2885.book Seite 23 Donnerstag, 30. April 2015 12:35 12
Inhalt
24
Anhang 1039
A HTML-Referenz ..................................................................................................................... 1039
B CSS-Referenz ......................................................................................................................... 1147
C HTML-/WYSIWYG-/CSS-Editoren ................................................................................. 1217
Index ........................................................................................................................................................ 1221
2885.book Seite 24 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1221 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1222 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1223 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1224 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1225 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1226 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1227 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1228 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1229 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1230 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1231 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1232 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1233 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1234 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1235 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1236 Donnerstag, 30. April 2015 12:35 12
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
2885.book Seite 1237 Donnerstag, 30. April 2015 12:35 12
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.