html5 und css3 – das umfassende handbuch · mit html5 wurden alle attribute des einleitenden...
Post on 29-Jun-2018
248 Views
Preview:
TRANSCRIPT
LeseprobeIn dieser Leseprobe erklärt Ihnen Jürgen Wolf, wie Sie Tabellen und Hyperlinks in Ihrer Website verwenden. Darüber hinaus erfahren Sie, wie Sie Layouts mit CSS gestalten und mit der Geolocation-API den Standort eines Benutzers ermitteln. Außerdem erhalten Sie das voll-ständige Inhalts- und Stichwortverzeichnis des Buches.
Jürgen Wolf
HTML5 und CSS3 – Das umfassende Handbuch1.264 Seiten, gebunden, 2. Auflage 2016 44,90 Euro, ISBN 978-3-8362-4158-8
www.rheinwerk-verlag.de/4129
»Tabellen und Hyperlinks« »Das Layout mit CSS gestalten« (Auszug)
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Wissen, wie’s geht.Wissen, wie’s geht.
177
5
Kapitel 5
Tabellen und Hyperlinks
In diesem Kapitel lernen Sie weitere Elemente von HTML kennen. Genauer
gesagt, erfahren Sie hier, wie Sie Tabellen und Hyperlinks Ihrer Webseite
hinzufügen und verwenden können.
Weitere essenzielle HTML-Elemente, die bisher noch nicht beschrieben wurden, werden in
diesem Kapitel erläutert. Sie erfahren mehr zu folgenden Themen:
� Tabellen: Sie erfahren, wie Sie Tabellen zur Darstellung von Informationen oder Daten in
einem Raster verwenden können.
� Hyperlinks: Jeder, der das Internet kennt, kennt Hyperlinks, mit denen Sie sich von einer
Webseite zur anderen bewegen können. Hier erfahren Sie, wie Sie ein HTML-Dokument
mit anderen (HTML-)Dokumenten verlinken.
5.1 Daten in einer Tabelle strukturieren
Tabellen sind hilfreich, wenn Sie zusammenhängende Daten wie z. B. Börsenkurse, Finanz-
daten, Reisepläne, Zugfahrpläne, Busfahrpläne, Reiseberichte oder Sportergebnisse in einem
Raster aus Zeilen und Spalten darstellen wollen. HTML bietet hierbei gute Möglichkeiten an,
eine solche Tabelle zu strukturieren.
Formatierung mit CSS
Da HTML seit HTML5 nur noch für eine semantische und strukturelle logische Auszeichnung
verwendet wird, gilt dies auch für Tabellen in HTML. Tabellen in HTML bieten keinerlei For-
matierungsmöglichkeiten an. Alle Attribute zur Formatierung aus altem HTML, abgesehen
von einem Rahmen mit border, werden in HTML5 nicht mehr unterstützt. Daher gilt auch
hier: Tabellen werden mit CSS formatiert.
HTML-Element Bedeutung
<table> Tabelle
<tr> Tabellenzeile
Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente
4158-8.book Seite 177 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
178
5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th>
Jede Tabelle in HTML wird zwischen den Elementen <table> und </table> erstellt (table,
deutsch: Tabelle). Die Inhalte der Tabelle werden Zeile für Zeile hingeschrieben. Den Beginn
einer Zeile notieren Sie mit einem öffnenden <tr> und das Ende der Zeile mit einem schlie-
ßenden </tr> (tr = table row, deutsch: Tabellenzeile). Innerhalb einer Tabellenzeile zwischen
<tr> und </tr> notieren Sie die einzelnen Zellen (oder auch Spalten) mit <td> und </td> (td =
table data, deutsch: Tabellendaten).
Abbildung 5.1 Eine grundlegende Tabellenstruktur in HTML
<td> Tabellenzelle
<th> Tabellenkopfzelle für Überschrift
<thead> Tabellenkopfbereich
<tbody> Tabellenkörper
<tfoot> Tabellenfußbereich
<colgroup> Gruppe von Tabellenspalten
<col> Tabellenspalte
<caption> Tabellenüberschrift/-legende
HTML-Element Bedeutung
Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente (Forts.)
<table>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</table>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<th>...</th> <th>...</th>
4158-8.book Seite 178 Dienstag, 30. August 2016 1:58 13
5.1 Daten in einer Tabelle strukturieren
179
5
Wollen Sie Zellen bzw. Spalten als Überschrift einer Tabelle verwenden, können Sie die Daten
zwischen <th> und </th> stellen (th = table heading, deutsch: Tabellenüberschrift). Das th-Ele-
ment können Sie genauso verwenden wie das td-Element, nur dass die Webbrowser dieses
Element gewöhnlich durch eine in der Spalte zentrierte Fettschrift hervorheben. Wenn es
sinnvoll ist, sollten Sie Tabellenüberschriften verwenden, da dies zum einen für die Besucher
mit Screenreadern hilfreich ist und zum anderen gegebenenfalls für die Suchmaschinen, die
Ihre Webseite damit besser indizieren können.
Hierzu soll ein einfaches Beispiel einer Tabelle erstellt werden, in der Daten einer Webbrow-
ser-Statistik von einer Webseite in einem Raster zusammengefasst und übersichtlich darge-
stellt werden:
…<table><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59,6 %</td>
</tr><tr><td>Firefox</td><td>3499</td><td>14,4 %</td>
</tr><tr><td>Safari</td><td>1619</td><td>6,6 %</td>
</tr></table>
…
Listing 5.1 /Beispiele/Kapitel005/5_1_1/index.html
Wie Sie in Abbildung 5.2 sehen, stellen Webbrowser die Tabelle ohne jede Formatierung dar.
Die Höhe und Breite einer Tabelle werden gewöhnlich gemäß dem enthaltenen Inhalt ausge-
geben.
4158-8.book Seite 179 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
180
Abbildung 5.2 Die strukturierte Darstellung einer grundlegenden Tabelle in HTML
Was darf in eine Tabellenzelle alles rein?
Zwischen einer Zelle in <td> und </td> können Sie neben einem Text auch weitere HTML-Ele-
mente verwenden. Theoretisch könnten Sie darin eine weitere komplette Tabelle einfügen.
Wenn Sie eine leere Zelle ohne Inhalt verwenden wollen, müssen Sie trotzdem ein leeres
<td></td> bzw. <th></th> angeben, um eine leere Zelle zu notieren, da die Tabelle ansonsten
nicht richtig dargestellt wird. Bei alten Webbrowsern können Sie zudem noch zur Sicherheit
ein erzwungenes Leerzeichen mit der HTML-Entität in die Zelle schreiben, weil es dort
bei leeren Zellen ohne Inhalt zu Problemen kommen könnte.
5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen
Wenn Sie Tabelleneinträge über mehrere Zellen zusammenfassen (oder auch überspannen)
wollen, können Sie dies mit dem HTML-Attribut colspan und rowspan machen. Anhand des
Zahlenwerts, den Sie diesen Attributen übergeben, wird die Anzahl der Zellen angegeben, die
Sie zusammenfassen wollen. Wie Sie anhand des Attributnamens vielleicht erahnen können,
wird colspan für das Zusammenfassen von Spalten und rowspan für das Zusammenfassen
von Zeilen verwendet.
Hierzu ein einfaches Beispiel, in dem der Tagesplan eines Fotografieseminars in einer
Tabelle zusammengefasst wurde:
…<table><tr>
<th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>
</tr>
4158-8.book Seite 180 Dienstag, 30. August 2016 1:58 13
5.1 Daten in einer Tabelle strukturieren
181
5
<tr><th scope="row">Montag</th><td colspan="2">Fotoshooting (outdoor)</td><td>Workshop Bildbearbeitung</td>
</tr><tr><th scope="row">Dienstag</th><td>Straßenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Porträt)</td>
</tr><tr><th scope="row">Mittwoch</th><td>Aktfotografie</td><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>
</tr></table>
…
Listing 5.2 /Beispiele/Kapitel005/5_1_2/index.html
Wie Sie in Abbildung 5.3 sehen, wurde beim Rahmen der Tabelle mit CSS nachgeholfen,
damit das Ergebnis von colspan deutlicher sichtbar ist.
Sie können hierbei sehen, wie sich am Montag die Zelle Fotoshooting (outdoor) dank colspan=
"2" über 2 Spalten vom Vormittag und Mittag überspannt. Gleiches gilt am Dienstag für die
Spalte Fotoshooting (Porträt), in der von Mittag bis Nachmittag zusammenfasst wurde.
Bei der Verwendung von colspan müssen Sie beachten, dass die Anzahl der Zellen reduziert
werden muss, wenn z. B. ein colspan über zwei Zellen zusammengefasst wird. Im Beispiel von
Montag haben Sie somit nur zwei td-Elemente notieren müssen anstelle von drei, da sich das
erste td-Element bereits über zwei Spalten erstreckt.
Abbildung 5.3 Zusammenfassen von Spalten mit dem Attribut »colspan«
4158-8.book Seite 181 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
182
Es spricht übrigens nichts dagegen, Spalten in mehr als zwei Zellen zusammenzufassen.
Hierbei müssen Sie auf die Anzahl der tatsächlich vorhandenen Spalten achten. Folgender-
maßen könnten Sie z. B. am Dienstag das Fotoshooting (Porträt) über drei Spalten zusam-
menfassen:
…<tr>
<th scope="row">Dienstag</th><td colspan="3">Fotoshooting (Porträt)</td>
</tr><tr>
…
Die Zelle Straßenfotografie (Stadt) müsste dann allerdings ebenfalls entfernt werden.
Das »scope«-Attribut von <th>
Im Beispiel wurde das scope-Attribut beim th-Element verwendet. Damit können Sie ange-
ben, ob die Tabellenüberschrift für eine Spalte (scope="col") oder eine Zeile (scope="row")
gelten soll.
Alles, was eben beschrieben wurde, gilt auch, wenn Sie Tabelleneinträge mit rowspan über
mehrere Zeilen zusammenfassen wollen. Hierzu nochmals das Beispiel, in dem der Tagesplan
für das Fotoseminar etwas geändert wurde, denn jetzt wird am Dienstag und Mittwoch die
Straßenfotografie (Stadt) am Vormittag durchführt:
…<table><tr>
<th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>
</tr>…
<th scope="row">Dienstag</th><td rowspan="2">Straßenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Porträt)</td>
</tr><tr>
<th scope="row">Mittwoch</th><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>
4158-8.book Seite 182 Dienstag, 30. August 2016 1:58 13
5.1 Daten in einer Tabelle strukturieren
183
5
</tr></table>
…
Listing 5.3 /Beispiele/Kapitel005/5_1_2/index2.html
Im letzten tr-Element musste das td-Element mit Aktfotografie entfernt werden, weil Sie
den Eintrag Straßenfotografie (Stadt) darüber mit dem Attribut rowspan nach unten ausge-
dehnt haben, wodurch dieser Eintrag den Platz in der darunter liegenden Zelle einnimmt,
wie Sie in Abbildung 5.4 sehen.
Abbildung 5.4 Zusammenfassen von Zeilen mit dem Attribut »rowspan«
5.1.3 HTML-Attribute für die Tabellenelemente
Mit HTML5 wurden alle Attribute des einleitenden table-Elements, die zur Formatierung
von Tabellen verwendet wurden, entfernt. Wie am Anfang bereits erwähnt, sollten Sie zur
Formatierung nur noch CSS verwenden. Für das table-Element unterstützt HTML5 lediglich
das border-Attribut, bei dem der Wert "1" oder "" sein darf, um einen Rahmen anzuzeigen.
Hier wird CSS als bessere Alternative empfohlen. Um z. B. border="1" nachzubilden, brau-
chen Sie nur folgendes CSS-Konstrukt im Kopf des HTML-Dokuments hinzuzufügen:
…<style>table, td, th { border: 1px solid gray }
</style>…
Für die Tabellenzeile mit <tr> gibt es gar keine Attribute mehr, die von HTML5 unterstützt
werden. Die Attribute von <td> und <th> mit colspan, rowspan und scope haben Sie bereits
kennengelernt. Die restlichen Attribute der beiden Elemente wurden ebenfalls von HTML5
als missbilligt erklärt bzw. gestrichen.
4158-8.book Seite 183 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
184
Webseiten-Layout mit Tabellen?
Sie sollten Tabellen nicht mehr verwenden, um das Layout einer Webseite zu erstellen. Dies
wurde im vorherigen Jahrtausend gemacht. Ich erwähne es nur, weil Sie sich vielleicht schon
den einen oder anderen Quelltext einer älteren Webseite angesehen haben und sich wohl
noch ansehen werden und noch zahlreiche Webseiten aus dieser Zeit vorhanden sind, die eine
Tabelle zum Layouten bzw. Ausrichten des Dokumentinhalts verwenden. Meistens handelt es
sich um Seiten, die nicht weitergepflegt werden, oder sie stammen von Entwicklern, die nicht
mehr auf dem Laufenden sind. Heute greifen Sie für das Layout einer Webseite auf CSS zurück.
5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren
Optional zu den grundlegenden Tabellenelementen von HTML können Sie noch eine Tabelle
mit den Elementen <thead>, <tbody> und <tfoot> in einen Kopf-, Daten- und Fußbereich ein-
teilen.
Den Tabellenkopf schließen Sie zwischen <thead> und </thead> ein (thead = table head,
deutsch: Tabellenkopf). Sinnvollerweise sollten Sie dafür das th-Element für die einzelnen
Zellen verwenden. Die eigentlichen Daten für die Tabelle markieren Sie zwischen <tbody>
und </tbody> (tbody = table body, deutsch: Tabellenkörper). Wollen Sie einen Bereich als
Tabellenfuß notieren, fassen Sie diesen zwischen <tfoot> und </tfoot> (tfoot = table foot,
deutsch: Tabellenfuß) zusammen.
Hierzu ein Beispiel, das diese drei Elemente in einer Tabelle verwendet:
…<table><thead><tr>
<th>Monat</th><th>Besucher</th><th>Bytes</th>
</tr></thead><tfoot><tr>
<th>Gesamt</th><th>23423</th><th>3234 MB</th>
</tr></tfoot><tbody><tr>
4158-8.book Seite 184 Dienstag, 30. August 2016 1:58 13
5.1 Daten in einer Tabelle strukturieren
185
5
<td>Januar</td><td>3234</td><td>132 MB</td>
</tr>……
<tr><td>Dezember</td><td>7193</td><td>894 MB</td>
</tr></tbody></table>
…
Listing 5.4 /Beispiele/Kapitel005/5_1_4/index.html
Wenn Sie den HTML-Quelltext und die dazugehörende Darstellung in Abbildung 5.5 betrach-
ten, werden Sie feststellen, dass der Webbrowser in der Lage ist, die Reihenfolge der Tabelle
selbstständig richtig wiederzugeben. Obwohl im Quelltext der Fußbereich oben angegeben
wurde, wird er vom Webbrowser passend unten angezeigt.
Abbildung 5.5 Eine längere Tabelle mit den Elementen <thead>, <tbody> und <tfoot> im Einsatz
4158-8.book Seite 185 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
186
Die Aufteilung einer Tabelle in drei verschiedene Bereiche ist optional und beeinflusst in der
Regel nicht die Darstellung im Webbrowser. Es handelt sich um eine rein semantische Dar-
stellung. Allerdings werden diese Elemente häufig verwendet, um das Erscheinungsbild die-
ser Bereiche mit CSS zu formatieren.
Abbildung 5.6 Die Aufteilung einer Tabelle in drei Bereiche ist zunächst rein semantischer Natur.
Erst mit CSS können Sie diese Bereiche gesondert visualisieren.
Auch beim Ausdruck langer Tabellen über mehrere Seiten könnte der Webbrowser diese
Aufteilung verwenden, um auf jeder Seite den Kopf- und Fußbereich der Tabelle mit auszu-
drucken, womit besser erkannt werden kann, in welcher Spalte die einzelnen Daten stehen
bzw. was die Daten bedeuten. Eine weitere Möglichkeit wäre, bei langen Tabellen nur den
Körperbereich zwischen <tbody> und </tbody> zu scrollen, während die Kopf- und Fußzeile
fest stehen bleiben. Leider unterstützt noch kein Webbrowser diese Funktionen, aber das
können Sie u. U. selbst mit CSS und gegebenenfalls JavaScript realisieren.
5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col>
So, wie Sie eben die Tabellenzeilen mit <thead>, <tbody> und <tfoot> in drei Bereiche auftei-
len konnten, können Sie mit den Elementen <colgroup> und <col> auch die einzelnen Spal-
ten in semantische und logische Bereiche aufteilen, sofern dies sinnvoll erscheint. Eine
Gruppierung von Spalten ist z. B. sinnvoll, um eine bestimmte Spalte oder eine bestimmte
Gruppe von Spalten mit einer bestimmten CSS-Formatierung zu versehen, anstatt den Style
für jede Zelle der Spalte zu wiederholen.
Die Elemente <colgroup> und <col> müssen Sie hinter dem öffnenden table-Element und
vor allen anderen Elementen wie tr, thead, tfoot oder tbody notieren. Eine Spaltengruppe
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th><thead>
<tbody>
<tfoot> </tfoot>
</tbody>
</thead>
4158-8.book Seite 186 Dienstag, 30. August 2016 1:58 13
5.1 Daten in einer Tabelle strukturieren
187
5
öffnen Sie mit <colgroup> und schließen sie wieder mit </colgroup> (colgroup = column
group, deutsch: Spaltengruppe). Um eine Spalte zu gruppieren, müssen Sie für jede Spalte
(die sich über die komplette Spalte erstrecken soll) das allein stehende Tag <col> verwenden.
Wollen Sie mehrere Spalten in einem col-Element zusammenfassen, können Sie dies mit
dem Attribut span und der Anzahl der Spalten als Attributwert machen.
Hierzu ein einfaches Beispiel, das das eben Beschriebene in der Praxis erläutert:
…<table><colgroup><col span="2" style="background-color:lightgrey;"><col style="background-color:snow;">
</colgroup><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59,6 %</td>
</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.
4158-8.book Seite 187 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
188
Abbildung 5.8 Die semantische Aufteilung von Spalten in Gruppen. In der Abbildung sehen Sie eine
Gruppe mit zwei Spalten und mit einer Spalte.
Wollen Sie hingegen für jede Spalte eine eigene Gruppe verwenden, können Sie dies wie folgt
realisieren:
<table><colgroup><col style="background-color: lightgrey;"><col style="background-color: snow;"><col style="background-color: lightgrey;">
</colgroup><tr>
<th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr>…</table>
…
Jetzt wurde jede Spalte in einer eigenen col-Gruppe zusammengefasst. Der Vorteil wird erst
ersichtlich, wenn Sie Spalten mit CSS stylen wollen. Die semantische Aufteilung in drei Spal-
ten finden Sie in Abbildung 5.9 dargestellt.
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th>
<colgroup> </colgroup><col span="2"> <col>
4158-8.book Seite 188 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
189
5
Abbildung 5.9 Semantische Aufteilung in drei Spalten
Wollen Sie <col> XHTML-konform verwenden, müssen Sie es mit <col /> schreiben.
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. Hyperlinks, oft nur Links
oder Verweise genannt, werden Sie benötigen, um Ihr Projekt zu strukturieren und zu verlin-
ken. Ausgehend von Ihrer Hauptseite, benötigen Sie oft Verweise zu weiteren Unterseiten
und eventuell wieder Verweise zurück zur Hauptseite. Erst durch die Verlinkung mehrerer
Dateien wird eine Webseite zu einer sinnvoll bedienbaren Webseite. Neben der Verlinkung
eigener Inhalte können Sie auch Links zu anderen Webseiten oder anderen Dokumenten
erstellen, die sich woanders im Internet befinden.
Einen Link können Sie in HTML mit dem a-Element (a = anchor, deutsch: Anker) erstellen.
Der Text, den Sie zwischen <a> und </a> schreiben, heißt Linktext oder Verweistext und kann
aktiviert werden, wenn Sie im öffnenden <a>-Tag das href-Attribut verwenden. Als Linktext
können Sie notieren, was Sie wollen, aber nicht immer ist es hilfreich, einfach Bitte hier kli-
cken hinzuschreiben. Mit einem sinnvollen Linktext helfen Sie Ihren Besuchern, schneller
dorthin zu gelangen, wo sie hinwollen, und auch Besuchern mit Screenreadern. Zwischen <a>
und </a> können auch andere Elemente als ein Text stehen. Häufig finden Sie hier z. B. eine
Grafik als Link wieder.
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th>
<colgroup> </colgroup><col><col><col>
4158-8.book Seite 189 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
190
Erlaubtes zwischen <a> und </a>
Wie bereits erwähnt, können Sie neben Text auch andere HTML-Elemente wie Grafiken zwi-
schen <a> und </a> verwenden. Mit HTML5 dürfen Sie sogar, im Gegensatz zu HTML 4.01,
gruppierende Elemente wie Absätze, Listen, Artikel, Blocksätze usw. verwenden. Praktisch
können Sie fast alles zwischen <a> und </a> einsetzen, abgesehen von interaktiven Elemen-
ten wie Links, Formularelementen, audio, video. Trotzdem empfehle ich Ihnen nicht, zu viel
Inhalt in einen einzelnen Link zwischen <a> und </a> zu stecken. Screenreader würden den
Text mehrmals vorlesen, und Besucher könnten damit überfordert sein, da sie daran
gewöhnt sind, einzelne Links im traditionellen Linkstil zu aktivieren. Natürlich hängt dies
vom Inhalt der Webseite ab. Ich werde hier nicht mehr näher darauf eingehen, aber Sie wis-
sen jetzt, dass Ihnen in HTML5 »mehr« HTML-Elemente für Links zur Verfügung stehen.
Wenn Sie extrem viel zwischen <a> und </a> gesteckt haben und sich nicht mehr sicher sind,
ob es noch gültig ist, können Sie den Quelltext validieren.
Das wichtigste Attribut, mit dem das a-Element verwendet wird, ist das href-Attribut. Mit
dem href-Attribut geben Sie den Verweis an, wohin der Benutzer gelangt, wenn er auf den
Linktext klickt.
Abbildung 5.10 Der klassische Aufbau eines Hyperlinks
Ein Linktext wird gewöhnlich vom Webbrowser (meistens in Blau) unterstrichen. Dies kön-
nen Sie mit CSS jederzeit ändern.
Zum Nachlesen
Auf die Begriffe Verzeichnisnamen, Verzeichnisstrukturen, vollständige, absolute und rela-
tive Pfadangaben wurde bereits in Abschnitt 3.3, »Exkurs: Namenskonvention und Referen-
zierung«, eingegangen. Lesen Sie gegebenenfalls dort nach, wenn Sie in den folgenden
Abschnitten Probleme mit den dort verwendeten Begriffen haben.
5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen
Wenn Sie Ihre Website erstellen, dürften diese Verweise wohl die ersten Links sein, die Sie
verwenden, um die losen Sammlungen von HTML-Dokumenten zu einer zusammenhän-
genden Website zu strukturieren – genauer: die Navigation der Website zu erstellen. Wenn
<a href ="http://rheinwerk-verlag.de/">Verlagsseite</a> Der Text, den der Benutzer anklicken kann
Dies ist die Seite, wohin der Hyperlink führt
4158-8.book Seite 190 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
191
5
Sie einen Link zu einer anderen Seite derselben Website angeben wollen, müssen Sie in der
Regel nicht den kompletten Domain-Namen mitangeben, sondern verwenden gewöhnlich
eine relative URL. Folgende in Abbildung 5.11 abgedruckte Verzeichnisstruktur sei als Beispiel
gegeben.
Abbildung 5.11 Verzeichnisstruktur für ein Beispiel von Links zu anderen Seiten derselben Webseite
Die Verlinkung für die Startseite, hier index.html, zu den anderen Seiten links.html, about.html
und impressum.html sieht demnach in der Praxis wie folgt aus:
…<nav>Blog |<a href="seiten/links.html">Links</a> |<a href="seiten/about.html">Über mich</a> |<a href="seiten/impressum.html">Impressum</a>
</nav><h1>Mein Blog</h1><p>Neueste Berichte zu HTML</p>
…
Listing 5.6 /Beispiele/Kapitel005/5_2_1/index.html
html
seiten
index.html
links.html
about.html
impres-sum.html
4158-8.book Seite 191 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
192
Abbildung 5.12 Dank der Verlinkung über eine relative URL kann innerhalb
der Seiten derselben Website jede Seite besucht und betrachtet werden.
Natürlich müssen Sie auch die Links zu den anderen Seiten, wie hier im Beispiel links.html,
about.html und impressum.html, anpassen. Hierbei müssen Sie bei der Angabe der relativen
URL beachten (siehe Abbildung 5.11), dass sich die Seiten (in diesem Beispiel) in einem Unter-
ordner Namens seiten befinden. Bezogen auf die Seite links.html, würden die Angaben für
das Attribut href wie folgt aussehen:
…<nav><a href="../index.html">Blog</a> |Links |<a href="about.html">Über mich</a> |<a href="impressum.html">Impressum</a>
</nav>…
Listing 5.7 /Beispiele/Kapitel005/5_2_1/seiten/links.html
Hier können Sie sehen, wie Sie aus dem Unterordner seiten mit ../ (hier ../index.html) zum
übergeordneten Ordner navigieren, wo sich index.html befindet. Die anderen beiden Dateien
about.html und impressum.html befinden sich im selben Ordner wie links.html, daher reicht
es aus, nur den Dateinamen anzugeben. Ähnlich müssen Sie auch die Dateien about.html und
impressum.html verlinken.
4158-8.book Seite 192 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
193
5
Abbildung 5.13 Das HTML-Dokument »links.html«
5.2.2 Tabellen beschriften mit <caption> bzw. <figcaption>
Zur Beschriftung einer Tabelle mit einem Titel können Sie entweder das caption-Element
verwenden, das unmittelbar nach dem öffnenden <table>-Tag verwendet werden muss,
oder Sie verwenden die neuen figure- und figcaption-Elemente.
Tabelle beschriften mit <caption>
Wie bereits erwähnt, muss das caption-Element gleich nach dem öffnenden <table>-Tag fol-
gen. Außerdem kann nur eine Beschriftung pro Tabelle verwendet werden. Hierzu ein einfa-
ches Beispiel:
…<table><caption>Browserstatistik 11/2016</caption>
<tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59,6 %</td>
</tr>……
</table>…
Listing 5.8 /Beispiele/Kapitel005/5_2_2/index.html
4158-8.book Seite 193 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
194
Abbildung 5.14 Die Überschrift wird standardmäßig zentriert über der Tabelle angezeigt.
<caption> mit CSS formatieren
Die Webbrowser stellen die Beschriftung gewöhnlich zentriert über der Tabelle dar. Mit CSS
ist es kein Aufwand, mithilfe der CSS-Eigenschaften text-align und caption-side die Aus-
richtung und die Position der Tabellenbeschriftung woanders zu platzieren.
Wollen Sie einer Tabellenbeschriftung noch weitere Hinweise hinzufügen, können Sie die
neuen HTML5-Elemente details und summary zwischen <caption> und </caption> setzen. Zur
Drucklegung konnten die meisten Browser mit den neuen Elementen umgehen. Für andere
Webbrowser müssen Sie hier ein Workaround wie html5shiv.js verwenden.
Abbildung 5.15 Informationen zum Auf- und Zuklappen dank der neuen HTML5-Elemente <details>
und <summary>. Das Beispiel dazu finden Sie unter »/Beispiele/Kapitel005/5_2_2/index2.html«.
4158-8.book Seite 194 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
195
5
Beschriften einer Tabelle mit <figcaption>
Auf das figcaption- und figure-Element wurde bereits in Abschnitt 4.2.9, »Gesonderte
Beschriftung von Inhalten mit <figure> und <figcaption>«, eingegangen. Es bietet sich für
Tabellen an, diese zwischen <figure> und </figure> zu verpacken und eine Beschriftung die-
ser Tabelle am Anfang nach dem öffnenden <figure> oder am Ende vor dem schließenden
</figure> einzufügen. Hierzu ein Beispiel, wie Sie eine Tabelle mit den neuen figure- und
figcaption-Elementen beschriften können:
…<article><h1>Browserstatistik November 2016</h1><figure><table><tr>
<th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59,6 %</td>
</tr>…</table><figcaption>Tabelle 1: Browserstatistik 11/2016</figcaption></figure></article>
…
Listing 5.9 /Beispiele/Kapitel005/5_2_2/index3.html
Abbildung 5.16 Tabellen beschriften mit <figure> und <figcaption>
4158-8.book Seite 195 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
196
5.2.3 Links zu anderen Webseiten einfügen
Links zu anderen Webseiten werden genauso notiert wie die Links zu den Seiten derselben
Webseite. Nur mit dem Unterschied, dass Sie im Attribut href die komplette Adresse, also die
absolute URL, zu dieser Seite angeben müssen. Hierzu ein einfaches Beispiel, in dem Links
auf externe Seiten enthalten sind:
…
<article>
<header>
<h2>Entwurf zu HTML5.1</h2>
</header>
<p>Wie bereits berichtet, hat das
<a href="http://www.w3.org/">World Wide Web Consortium
</a> einen
<a href=" http://www.w3.org/TR/html51/">neuen Entwurf</a> für HTML vorgelegt, welcher in
Version 5.1 weiterentwickelt wird ...
</p>
<aside>
<h3>Weiterführende Links</h3>
<nav>
<ul>
<li>
<a href=" http://www.w3.org/TR/html51/">HTML 5.1 Working Draft</a></li><li><a href="http://www.w3.org/">W3C</a></li><li><a href="http://www.whatwg.org/">WHATWG</a></li></ul>
</nav>
</aside>
</article>
…
Listing 5.10 /Beispiele/Kapitel005/5_2_3/index.html
4158-8.book Seite 196 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
197
5
Abbildung 5.17 Viele Webbrowser zeigen die Zieladresse des Links unten in der
Statusleiste an, wenn Sie mit der Maus darüber stehen. Aktivieren Sie den Link …
Abbildung 5.18 … wird die Zieladresse in den Webbrowser geladen und dargestellt.
5.2.4 Links mit dem »target«-Attribut in einem neuen Fenster öffnen
Mit dem HTML-Attribut target vom a-Element können Sie dafür sorgen, dass ein Verweisziel
in einem neuen Fenster oder Tab geöffnet wird. Hierbei müssen Sie target nur den Attribut-
wert _blank übergeben. Ein Beispiel hierzu:
4158-8.book Seite 197 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
198
<p>Wie bereits berichtet, hat das<a target="_blank" href="http://www.w3.org/">W3C</a> einenneuen Entwurf für HTML vorgelegt, welcher in Version 5.1weiterentwickelt wird ...
</p>
Würden Sie in diesem Beispiel den Linktext W3C aktivieren, würde die Zieladresse (hier:
www.w3.org) hier tatsächlich in einem neuen Fenster oder Tab geöffnet und geladen werden.
Ziel der Verwendung von target="_blank" ist natürlich vorrangig, den Besucher der Seite
nicht zu »verlieren«, sondern die Seite offen zu lassen, damit er dort zurückkehrt, wenn er
die Seite im neu geöffneten Fenster oder Tab gelesen hat.
Das target-Attribut war in HTML 4.01 in der Strict-Variante nicht mehr erlaubt, ist aber mit
HTML5 wieder voll einsatzfähig. Neben dem am meisten verwendeten Attributwert _blank
können Sie hier noch _self (= aktuelles Fenster), _parent (= Eltern-Fenster), _top (= oberste
Fenster-Ebene) und Namen von Fenstern verwenden, die mit JavaScript verarbeitet werden
können.
Das Attribut »target="_blank"« verwenden oder nicht?
Auch wenn viele Webseiten dieses Attribut recht häufig und gerne verwenden, sollten Sie
nicht auf Teufel komm raus für jeden Link ein neues Fenster öffnen. In der Praxis sollten Sie es
dem Nutzer überlassen, ob dieser für einen Link eine neue Seite öffnen will oder nicht. Auch
wenn Sie es vielleicht gewohnt sind, unzählige Tabs und mehrere Webseiten auf einmal
geöffnet zu haben, so sollten Sie an die etwas unerfahreneren Besucher denken, die eben
nicht so im World Wide Web unterwegs sind oder eben nicht so unterwegs sein wollen. Set-
zen Sie das Attribut target="_blank" sparsam ein, und weisen Sie, wenn möglich, den Besu-
cher darauf hin, dass ein neues Fenster oder Tab geöffnet wird, wenn er den Link aktiviert.
5.2.5 E-Mail-Links mit »href=mailto:…«
Sicherlich kennen Sie auch die Sorte von Links, die Sie aktivieren, worauf sich die E-Mail-
Anwendung mit einer bestimmten E-Mail-Adresse öffnet. Auch diese Links werden mit dem
a-Element und dem href-Attribut erzeugt. Solche E-Mail-Verweise beginnen bei href mit
mailto:, gefolgt von der gewünschten E-Mail-Adresse, z. B.:
…<footer><a href="mailto:webmaster@dieter-baer.de">E-Mail senden</a>
</footer>…
Listing 5.11 /Beispiele/Kapitel005/5_2_5/index.html
4158-8.book Seite 198 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
199
5
Abbildung 5.19 Wenn Sie mit der Maus über dem Link stehen bleiben, können Sie gewöhnlich in der
Statusleiste die E-Mail-Adresse sehen, die mit diesem Link verknüpft ist. Aktivieren Sie den Link …
Abbildung 5.20 … wird häufig die E-Mail-Anwendung mit der E-Mail-Adresse geöffnet.
Die Funktionalität eines »mailto«-Verweises ist nicht zuverlässig
Hierzu muss angemerkt werden, dass es keine Garantie gibt, dass eine solche mailto-Ver-
knüpfung funktioniert. Dafür muss entweder der Webbrowser das Erstellen und Versenden
4158-8.book Seite 199 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
200
von E-Mail unterstützen, oder es muss bei einem mailto-Verweis eine lokale E-Mail-Anwen-
dung gestartet werden. Wenn der Besucher keine lokale E-Mail-Anwendung verwendet bzw.
eingerichtet hat, sondern lediglich die klassische Webmail im Webbrowser nutzt, funktio-
niert der mailto-Verweis nur, wenn der Benutzer den Webbrowser entsprechend konfigu-
riert hat. Außerdem gibt es Webbrowser, die man dafür gar nicht konfigurieren kann. Es ist
daher sinnvoll und empfehlenswert, wenn Sie die E-Mail-Adresse zusätzlich in lesbarer Form
angeben, sodass Besucher, die den E-Mail-Verweis nicht ausführen können, Ihnen trotzdem
eine E-Mail senden können.
Achtung vor Spam!
Leider müssen Sie aufgrund solcher E-Mail-Adressen auf der Webseite früher oder später mit
unerwünschten Werbe-E-Mails (Spam) rechnen, weil es Webcrawler gibt, die Webseiten nach
E-Mail-Adressen durchsuchen. Sie haben sogar die Pflicht, die E-Mail-Adresse im Impressum
zu nennen (§ 5 Allgemeine Informationspflicht; http://www.gesetze-im-internet.de/tmg/__
5.html). Der einzige Schutz wäre, die E-Mail-Adresse nicht im Quelltext zu nennen. Die erste
Möglichkeit, dies zu vermeiden, wäre die Einbindung als Grafik. Allerdings wäre dies diskri-
minierend gegenüber Personen, die auf Screenreader angewiesen sind, und auch so ist eine
»Grafik-E-Mail-Adresse« rechtlich bedenklich. Häufig sind noch Versionen im Einsatz, in
denen das @-Zeichen durch (at) ausgetauscht wird (z. B. webmaster (at) dieter-baer.de).
Ebenso wird gerne noch der Punkt mit (dot) beschrieben (z. B. webmaster (at) dieter-baer
(dot) de). Natürlich bedeutet das dann, dass der Besucher die E-Mail-Adresse von Hand einge-
ben muss.
Alternativ könnten Sie die E-Mail-Adresse im Unicode-Format mit numerischen Entitäten
angeben. Bezogen auf webmaster@dieter-baer.de, sähe diese mit einer numerischen Entität
wie folgt aus:
#109;ailto:webmaster@dieter-baer.de
Hiermit würde nach wie vor die E-Mail-Adresse korrekt angezeigt, nur lässt sich diese nicht
mehr im Quelltext so einfach erkennen. Ein richtiger Schutz ist das trotzdem nicht. Auch
die Softwareentwickler von Spam-Crawlern wissen, wie man solche Informationen ver-
werten kann. Eine interessante Webseite, wie Sie es besser machen können, Ihre E-Mail-
Adresse z. B. mit JavaScript zu verstecken, finden Sie hier: http://alistapart.com/article/
gracefulemailobfuscation.
5.2.6 Links zu anderen Inhaltstypen setzen
Wenn Sie Links zu anderen, nicht im Web gebräuchlichen Dokumenttypen wie z. B. Word-,
Excel-, PDF-Dokumenten setzen, hängt es vom Webbrowser ab, wie er diesen Dokumenttyp
4158-8.book Seite 200 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
201
5
weiterbehandelt. Darauf haben Sie als Webentwickler keinen Einfluss. Hier lautet zunächst
die allgemeine Empfehlung, weitverbreitete Formate zu verwenden. So ist die Wahrschein-
lichkeit höher, dass bei einem Link auf ein PDF-Dokument der Webbrowser einen entspre-
chenden PDF-Reader aufruft und das Dokument darin zum Lesen öffnet, als wenn der Link
zum Inhaltstyp ein plattformabhängiges oder herstellerspezifisches Dokument ist (wie z. B.
ein Word-Dokument). Hierzu ein einfaches Beispiel:
…<h1>Verweis auf andere Inhaltstypen</h1><p>Ein PDF-Dokument öffnen: <a href="dokument.pdf">PDF</a></p><p>Einen MOV-Film öffnen: <a href="ganges.mov">MOV</a></p><p>Ein Word-Dokument öffnen: <a href="worddokument.doc"
type="application/msword">DOC</a></p>…
Listing 5.12 /Beispiele/Kapitel005/5_2_6/index.html
Abbildung 5.21 Hier haben Sie drei Links auf verschiedene Inhaltstypen.
Was bei diesen drei im Beispiel verwendeten Links passiert, kann nicht 100%ig vorhergesagt
werden und hängt vom Webbrowser ab. Beim PDF-Dokument dürfte der Webbrowser wis-
sen, wie er damit umzugehen hat. Schwieriger dürfte es mit dem Film im MOV-Format sein,
weil dafür gewöhnlich ein QuickTime-Plug-in von Apple benötigt wird. Einige Webbrowser
bieten dazu an, das entsprechende Plug-in herunterzuladen und zu installieren. Andere wie-
derum nicht.
Selbiges gilt für das Word-Dokument. Ist Word auf Ihrem Rechner installiert, bietet der Web-
browser häufig einen Dialog an, das Dokument mit Microsoft Word zu öffnen, oder zumindest
die Möglichkeit, eine entsprechende Anwendung auszuwählen, mit der Sie dieses Dokument
öffnen wollen. Häufig wird noch zusätzlich die Möglichkeit zum Herunterladen des Doku-
ments angeboten.
4158-8.book Seite 201 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
202
In Abbildung 5.22 kennt der Webbrowser die Standardverknüpfung der Anwendung mit dem
Word-Dokument auf dem System. Die Anwendung zum Öffnen des Dokuments kann hier
auch geändert werden. Auch ein Herunterladen mit Datei speichern wird angeboten.
Abbildung 5.22 Öffnen eines Word-Dokuments im Webbrowser
Plug-ins nachrüsten
Bei vielen Webbrowsern gibt es die Möglichkeit, verschiedene Dateiformate über Plug-ins
oder Add-ons nachzurüsten, um eine bestimmte Datei anzuzeigen oder wiederzugeben.
Wenn Sie wirklich einen solchen Inhaltstyp auf Ihrer Webseite anbieten, der ein bestimmtes
Plug-in oder Add-on benötigt, sollten Sie den Besucher vorher darauf hinweisen. Ob dieser
das Plug-in oder Add-on installiert, nur um den einen Inhalt betrachten zu können, bleibt
fraglich und hängt wohl auch vom Inhalt ab (ob sich der Aufwand lohnt). Mit HTML haben
Sie keinen Einfluss darauf.
Inhaltstyp mitangeben
Bei besonderen Inhaltstypen können Sie dem Webbrowser den Internet-MIME-Typ mit dem
type-Attribut im öffnenden <a>-Tag mitteilen, wie dies im Beispiel mit application/msword
für ein Word-Dokument gemacht wurde. Die Informationen sind für den Webbrowser und
auch andere Webclients sehr nützlich. Sinnvoll ist eine solche Angabe des Dateiformats fast
immer, wenn das Linkziel kein HTML-Dokument ist. Eine Liste mit bekannten MIME-Typen
finden Sie in Abschnitt A.19, »MIME-Typen (Internet Media Type)«.
Informieren Sie den Besucher darüber, was sich hinter einem Link verbirgt
Wenn Sie Nicht-HTML-Dokumente auf Ihrer Webseite anbieten, sollten Sie den Besucher auf
jeden Fall darüber informieren, was sich hinter dem Link versteckt und, eventuell auch, wie
groß diese Datei ist. Sie können hierzu das globale title-Attribut im öffnenden <a>-Element
4158-8.book Seite 202 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
203
5
verwenden, aber es ist empfehlenswert, genauere Angaben direkt beim Linktext zu erwäh-
nen. Ein Negativbeispiel, wie es nicht gemacht werden sollte, sieht so aus:
<a href="jahresumsatz.pdf">Jahresumsatz 2014</a>
Der Besucher wird hier nur den Linktext Jahresumsatz 2014 zu sehen bekommen und viel-
leicht verdutzt reagieren, wenn dieser Link ein PDF-Dokument ist, das vielleicht etwas länger
zum Laden benötigt. Besser ist daher, Folgendes zu schreiben:
<a title="Öffnet die PDF-Datei mit dem Jahresumsatz von 2014"href="jahresumsatz.pdf">Jahresumsatz 2014 (PDF, 3,9 MB)
</a>
5.2.7 Downloadlinks mit dem »download«-Attribut hinzufügen
Neu mit HTML5 ist die Möglichkeit, Links als Downloadverweis hinzuzufügen – und dies
unabhängig vom Inhaltstyp (= MIME-Typ) des Linkziels. Für diesen Zweck wird das Attribut
download im öffnenden <a>-Tag verwendet. Hier nochmals derselbe HTML-Code vom Beispiel
/Beispiele/Kapitel005/5_2_5/index.html zuvor, nur werden jetzt alle drei Dateien mit dem
download-Attribut zum Download angeboten:
…<h1>Verweis auf andere Inhaltstypen</h1><p>Ein PDF-Dokument herunterladen:
<a href="dokument.pdf" download>PDF</a></p><p>Einen MOV-Film herunterladen:
<a href="ganges.mov" download="film.mov">MOV</a></p><p>Ein Word-Dokument herunterladen: <a href="worddokument.doc"
download="worddokument.doc">DOC</a></p><p>Ein HTML-Dokument herunterladen: <a href="website.html"
download="website.html">HTML</a></p>…
Listing 5.13 /Beispiele/Kapitel005/5_2_7/index.html
Mit dem Attribut download weisen Sie einen Webbrowser an, diese Datei zum Download
anzubieten, auch wenn er die Datei selbst anzeigen könnte oder das entsprechende Plug-in
bzw. Add-on dazu kennt, das er für gewöhnlich für einen solchen Inhaltstyp verwenden
würde.
Das Attribut download können Sie als allein stehendes Attribut verwenden, wie im ersten Bei-
spiel mit dem PDF-Dokument zu sehen ist. Der Name der Datei, die heruntergeladen wird,
entspricht der Angabe in href (hier: dokument.pdf ). Enthält der Link in href keinen sinnvol-
4158-8.book Seite 203 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
204
len Namen, können Sie dem download-Attribut auch einen anderen Namen zuweisen, wie es
im Beispiel mit dem MOV-Film der Fall ist, wo der eigentliche Dokumentname ganges.mov
lautet, der Downloadname der Datei aber film.mov heißt. Bei XHTML müssen Sie bei down-
load einen Dateinamen verwenden, weshalb im dritten Beispiel mit dem Word-Dokument
für href und download derselbe Dokumentname verwendet wird. Das letzte Beispiel mit dem
HTML-Dokument soll nur demonstrieren, dass selbst webbrowsertypische Inhaltstypen wie
hier ein HTML-Dokument mit dem Attribut download wirklich nur noch als Download ange-
boten werden.
Den Besucher darüber informieren, was hier heruntergeladen wird?
Wie schon beim Verlinken von Nicht-HTML-Dokumenten sollten Sie den Leser darauf hin-
weisen, was er hier herunterlädt und womit er das Dokument betrachten oder weiterver-
wenden kann. Wenn Sie z. B. Excel-Tabellen mit einem Jahresumsatzbericht zum Download
anbieten, sollten Sie den Leser darüber informieren, welche Software er benötigt, um diese
Tabelle zu betrachten.
Dasselbe gilt für ZIP-verpackte Archive. Auch hier sollte ein zusätzlicher Hinweis oder ein
Link zu einer Software hinzugefügt werden, wie ein solches Archiv entpackt werden kann.
Bedenken Sie, dass viele Besucher nichts mit Dateiendungen wie *.odt, *.xls, *.zip, *.tar.bz usw.
anfangen können. Halten Sie es nicht für selbstverständlich, bloß weil Sie täglich mit unzäh-
ligen Datenformaten zu tun haben, dass Ihre Besucher dies auch tun. Es empfiehlt sich, beim
Download die Dateigröße mitanzugeben. Der Download eines umfangreichen ZIP-Archivs
könnte somit wie folgt notiert werden:
…<a title="Jahresumsatz im Excel-Format als ZIP-Archiv verpackt"
href="archiv.zip" download="jahresumsatz2014.zip">Jahresumsatz 2014 (ZIP-Archiv; 2,5 MB)</a>
<small>(Um das ZIP-Archiv zu entpacken, benötigen Sie einPackprogramm wie z. B. 7-Zip. Die Jahresumsätze sindim Excel-Format gehalten und benötigen somit eineSoftware, die Excel-Tabellen betrachten kann.)
</small>…
Hier wurden neben dem title-Attribut noch das Dateiformat (hier: ZIP-Archiv) und die
Dateigröße erwähnt. Zusätzlich wurden noch ein paar klein gedruckte Informationen zwi-
schen <small> und </small> notiert.
Alte Webbrowser, die das »download«-Attribut nicht kennen?!
Bei alten Webbrowsern, die das neue download-Attribut nicht kennen, wird vorgegangen
wie bisher, als wäre das download-Attribut nicht vorhanden. Inhaltstypen, die der Webbrow-
4158-8.book Seite 204 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
205
5
ser nicht kennt, werden wie gehabt entweder zum lokalen Speichern angeboten, oder Sie
können aus einer Liste von Anwendungen auswählen, mit welcher Sie dieses Dokument öff-
nen wollen. Eine beliebte Methode ist, die Dateien in das ZIP-Format zu packen und anzu-
bieten.
5.2.8 Links zu bestimmten Teilen einer Webseite setzen
Nichts kann für den Besucher lästiger sein, als eine lange wissenschaftliche Abhandlung
eines speziellen Themas auf einer Webseite zu lesen und dabei lange hoch- und herunter-
scrollen zu müssen, um zu einem speziellen Abschnitt zu gelangen. Für solche Fälle können
Sie sogenannte Anker mit dem globalen Attribut id setzen, den Sie mit einem gewöhnlichen
Link mit dem a-Element anspringen können. Vorbildlich werden solche Zielanker z. B. bei
Wikipedia für das Inhaltsverzeichnis eines Themas verwendet. Für eine Verlinkung zu einem
bestimmten Bereich einer Webseite benötigen Sie nur:
� einen Anker (Sprungmarke), den Sie mit dem Attribut id="ankername" erstellen. Zum Bei-
spiel:
<h1 id="ankername">Überschrift xyz</h1>
� einen Link, der auf den Anker mit href="#ankername" verweist. Hierzu wird das Doppel-
kreuz-Zeichen # vor den Ankernamen geschrieben. Zum Beispiel:
<a href="#ankername">Zur Überschrift xyz springen</a>
Hierzu ein einfaches Beispiel, wie Sie solche Sprungmarken in der Praxis setzen und verwen-
den können:
…<h1 id="top">Inhaltsverzeichnis</h1><ul><li><a href="#intro">Einführung in HTML</a></li><li><a href="#syntax">Die Syntax von HTML</a></li><li><a href="#versionen">Versionen von HTML</a></li><li><a href="#techniken">Techniken rund um HTML</a></li><li><a href="#praxis">Einstieg in die Praxis</a></li>
</ul><h1 id="intro">Einführung in HTML</h1><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="syntax">Die Syntax von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p>
4158-8.book Seite 205 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
206
<h2 id="versionen">Versionen von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="techniken">Techniken rund um HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="praxis">Einstieg in die Praxis</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p>
…
Listing 5.14 /Beispiele/Kapitel005/5_2_8/index.html
In Abbildung 5.23 sehen Sie das Beispiel bei der Ausführung, wo Sie dank Sprungmarken
schneller zum gewünschten Abschnitt gelangen.
Abbildung 5.23 Ein etwas längeres Dokument, in dem Sie dank Sprungmarken …
Aktivieren Sie z. B. den Link Techniken rund um HTML, wird direkt zum entsprechenden
Abschnitt mit der Sprungmarke gesprungen, wie Sie in Abbildung 5.24 sehen. Unterhalb von
jedem Abschnitt wurde außerdem ein weiterer Link zur Sprungmarke zurück nach oben
zum Inhaltsverzeichnis eingefügt.
4158-8.book Seite 206 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
207
5
Abbildung 5.24 … schneller zum gewünschten Abschnitt gelangen
Anker setzen mit dem »id«-Attribut (id="ankername")
Bevor Sie einen Link zu einem bestimmten Teil innerhalb einer Webseite erstellen können,
müssen Sie die Sprungmarke (oder auch einen Anker) mit dem globalen Attribut id inner-
halb eines öffnenden HTML-Tags festlegen. Im Beispiel wurde dies bei den Hauptüberschrif-
ten <h1> und <h2> gemacht (z. B. <h2 id="techniken">). Der Attributwert von id muss mit
einem Buchstaben oder einem Unterstrich anfangen (auf keinen Fall mit einer Zahl) und darf
keine Leerzeichen enthalten. Es ist außerdem ratsam, einen aussagekräftigen Namen, um
nicht den Überblick zu verlieren, und einen semantisch sinnvollen Namen für das HTML-
Dokument zu verwenden. Auf nichtssagende Bezeichnungen wie anker1, anker2 usw. sollten
Sie verzichten. Außerdem wird zwischen Groß- und Kleinschreibung unterschieden.
»name«-Attribut aus HTML 4.01 oder »id«-Attribut aus HTML5
Die Verwendung des id-Attributs für das Setzen eines Ankers mit z. B. <h2 id="techniken">wurde neu mit HTML5 eingeführt. Mit HTML 4.01 wurde dies noch mit dem Attribut name rea-
lisiert (z. B.: <h2 name="techniken">).
Auf einen Anker verweisen mit »#ankername«
Um einen Link zu den Ankern zu verwenden, müssen Sie im öffnenden <a>-Tag den Attribut-
wert zum Anker in href angeben. Lautet der Anker z. B. <h2 id="techniken">, müssen Sie vor
4158-8.book Seite 207 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
208
diesen Ankernamen (hier mit: "techniken") noch das Doppelkreuz-Zeichen # schreiben.
Bezogen auf unser Beispiel, müssten Sie dies wie folgt notieren:
<li><a href="#techniken">Techniken rund um HTML</a></li>
Wenn Sie diesen Link aktivieren, wird im HTML-Dokument zum Element gesprungen, wo
der Wert des Attributs id gleich "techniken" lautet. In diesem Beispiel wäre es zum <h2>-Ele-
ment mit der Überschrift Techniken rund um HTML gesprungen.
Links zu einem bestimmten Bereich einer anderen Webseite erstellen
Genauso ist es möglich, einen Link zu einem Bereich eines anderen HTML-Dokuments zu
erstellen. Voraussetzung hierfür ist, dass das andere HTML-Dokument einen entsprechen-
den Anker enthält. Wenn sich der Anker in einem anderen Dokument befindet, können Sie
wie folgt einen Verweis dorthin erstellen:
<a href="tech.html#techniken">Techniken rund um HTML</a>
Hiermit würden Sie in einem anderen HTML-Dokument, das sich im selben Verzeichnis
befindet und dessen Dateiname tech.html lautet, zum Bereich mit dem Anker #techniken
springen.
Befindet sich die Datei mit dem Anker gar auf einer anderen Webseite, müssen Sie die kom-
plette URL dorthin angeben:
<a href="http://www.domain.de/pfad/tech.html#techniken">…</a>
Selbstverständlich ist es möglich, einen Link auf Bereiche von fremden Webseiten zu ver-
wenden. Allerdings sollte klar sein, dass Sie hier keinen Anker setzen, sondern nur bereits
vorhandene Anker verlinken können. Hier z. B. ein Link zu einem verankerten Bereich einer
Wikipedia-Seite:
<a href="http://de.wikipedia.org/wiki/Html#Versionen">…</a>
Hier würden Sie direkt zur Wikipedia-Seite mit dem Eintrag HTML zum Anker #Versionen
springen. Dies setzt voraus, dass der Anker existiert – was zur Drucklegung des Buches zwar
noch der Fall war, sich aber jederzeit ändern könnte. Wenn der Anker nicht mehr existiert
oder falsch ist, wird die Webseite aufgerufen und der Anker ignoriert, wie dies ohne eine
Angabe von #ankername bei der Verlinkung mit dem a-Element der Fall gewesen wäre.
5.2.9 Die HTML-Attribute für das HTML-Element <a>
Zum Schluss sollen hier noch die HTML-Attribute für die Links erläutert werden, die u. a.
auch für die Suchmaschinen recht nützlich sein können. In Tabelle 5.2 finden Sie eine Über-
sicht über alle vorhandenen Attribute für das a-Element. Einige davon haben Sie bereits ken-
nengelernt.
4158-8.book Seite 208 Dienstag, 30. August 2016 1:58 13
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
209
5
Attribut Beschreibung HTML
download Damit geben Sie an, dass Sie das Verweisziel zum Download anbieten,
auch wenn der Webbrowser den Inhaltstyp des Ziels selbst darstellen
könnte.
5
href Damit geben Sie die URL der Seite an, wo der Link hinführt, wenn dieser
aktiviert wird.
hreflang Hier können Sie die Sprache des verlinkten Dokuments angeben. Als
Angaben sind die üblichen Sprachenkürzel erlaubt (z. B. de für Deutsch-
land).
media Damit können Sie Angaben zu den Medien machen, wofür das Verweis-
ziel optimiert wurde. Sie können entweder Medientypen, durch Kom-
mata getrennt, aufzählen oder all für alle Medientypen angeben.
5
rel Das Attribut kennen Sie bereits vom link-Element aus Abschnitt 3.5.1,
»Die HTML-Attribute für das allein stehende HTML-Element <link>«, wo
Sie zurückblättern können, wenn Sie mehr Informationen benötigen.
Hiermit bestimmen Sie den Typ der Verlinkung. Speziell für das a-Ele-
ment sind hier noch die rel-Attributwerte bookmark, external, nofollow
und noreferrer von besonderer Bedeutung, da diese nur im a-Element
verwendet werden können.
� rel="bookmark": Hier legen Sie fest, dass das Verweisziel ein über-
geordneter Abschnitt (bzw. Dokument) des aktuellen Dokuments ist.
Dies stellt praktisch eine Verlinkung zurück zu einem umfangreichen
HTML-Dokument dar, wie es bei wissenschaftlichen oder techni-
schen Dokumenten der Fall ist. In der Praxis wird dieser Linktyp auch
für Permalinks verwendet, um eine ältere Version des aktuellen
Dokuments ansehen zu können.
� rel="external": Damit geben Sie an, dass der Link zu einem exter-
nen Webangebot gehört. Häufig wird dieser mit CSS noch gesondert
formatiert.
� rel="nofollow": Damit weisen Sie die Webcrawler an, dem Link nicht
zu folgen.
� rel="noreferrer": Hiermit weisen Sie den Webbrowser des Besu-
chers an, beim Anklicken des Links keine Referrer-Adresse zu verwen-
den, wodurch vermieden werden sollte, dass der Webserver der
Zieladresse Informationen erhält, von woher der Besucher gekom-
men ist.
� Nicht verwenden hingegen können Sie die Attributwerte icon,
pingback, prefetch und stylesheet für a-Elemente.
Tabelle 5.2 Attribute für Links mit <a>-Element
4158-8.book Seite 209 Dienstag, 30. August 2016 1:58 13
5 Tabellen und Hyperlinks
210
Veraltete Attribute
Die ehemaligen Attribute charset, coord, name, rev und shape werden nicht mehr von HTML5
unterstützt und sind daher nicht in dieser Tabelle aufgelistet.
5.3 Zusammenfassung
In diesem Kapitel haben Sie einige essenzielle HTML-Elemente kennengelernt. Die wichtigs-
ten Elemente, die Sie vermutlich auf fast jeder Webseite vorfinden und verwenden werden,
sind:
� a-Element, um Hyperlinks zu erzeugen
� Tabellen, um zusammenhängende Daten und Informationen in einem Raster aus Zeilen
und Spalten zu präsentieren
target Hier tragen Sie ein, wo das Verweisziel geöffnet werden soll. Mögliche
Werte dafür sind:
� _blank: neues Fenster/Tab
� _parent: Eltern-Fenster
� _self: aktuelles Fenster
� _top: oberste Fenster-Ebene
� framename: Name des Fensters, das mit JavaScript geöffnet und auch
darin vergeben wurde
type Damit können Sie dem Webbrowser den MIME-Typ (Dateiformat)
nennen, zu welchem die verlinkte Datei gehört. Eine Liste bekannter
MIME-Typen finden Sie in Abschnitt A.19, »MIME-Typen (Internet Media
Type)«. Diese Angabe ist sinnvoll, wenn das Ziel kein HTML-Dokument ist.
5
Attribut Beschreibung HTML
Tabelle 5.2 Attribute für Links mit <a>-Element (Forts.)
4158-8.book Seite 210 Dienstag, 30. August 2016 1:58 13
495
13
Kapitel 13
Das Layout mit CSS gestalten
Wenn Sie das Buch bis hierher gelesen haben und mit dem Box-Modell und
der Positionierung von CSS vertraut sind, können Sie sich endlich an praxis-
nähere Beispiele heranwagen. In diesem Kapitel wird konkret das Erstellen
von Layouts mit CSS behandelt.
In diesem Kapitel werden Sie einige gängige Techniken zum Layouten von Webseiten mit
CSS kennenlernen. Es gibt sehr viele Ansätze, ein Layout mit CSS zu erstellen, und falls Sie
sich zum ersten Mal mit diesem Thema befassen, könnte die Flut von Informationen dazu
zunächst erschlagend wirken.
Wenn Sie sich im Internet bereits ein wenig nach Layouts mit CSS umgesehen haben, dürf-
ten Sie schnell auf fertige CSS-Frameworks gestoßen sein, die einem das Leben erheblich ein-
facher machen können. Auf solche CSS-Frameworks wird in diesem Buch noch an anderer
Stelle eingegangen. In diesem Kapitel werden Sie zunächst die Grundlagen zur Erstellung
eines Layouts mit CSS kennenlernen.
<main> oder <div id="main">
Ich habe in den Beispielen für den Hauptinhalt das neue HTML5-Element <main> verwendet.
Ob Sie hier <main> verwenden oder <div>, müssen Sie selbst entscheiden. Mehr Informa-
tionen zu <main> finden Sie in Abschnitt 5.2.8, »Links zu bestimmten Teilen einer Webseite
setzen«.
Zuvor noch eine kurze Übersicht, was Sie in diesem Kapitel alles erwartet:
� Sie lernen verschiedene Techniken kennen, mit denen Sie zweispaltige Layouts erstellen
können.
� Ebenso werden Sie verschiedene Techniken für dreispaltige Layouts kennenlernen.
� In diesem Kapitel wird umfassender auf das Thema Responsive Layouts eingegangen,
d. h., Sie lernen, flexible Layouts zu erstellen, die die Eigenschaften des Endgeräts des
Besuchers berücksichtigen.
� Auch auf etwas fortgeschrittenere Themen wie das Erstellen eines Layouts mit einem Ras-
ter (englisch: Grid) wird eingegangen.
4158-8.book Seite 495 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
496
13.1 Exkurs: Was bedeutet feste und flexible Breite?
In den nächsten Abschnitten werden Sie eine Menge verschiedene Layouts kennenlernen.
Dabei werden Sie Methoden mit einer festen und andere Methoden mit einer flexiblen
Breite verwenden. An dieser Stelle werde ich Ihnen kurz den Unterschied und die Vor- und
Nachteile von festen und flexiblen Layouts erläutern.
13.1.1 Ein Layout mit fester Breite
Layouts mit fester Breite werden gewöhnlich in Pixel angegeben und ändern sich auch nicht,
wenn das Webbrowser-Fenster vergrößert oder verkleinert wird.
Die Vorteile von Layouts mit fester Breite sind:
� Größe und Position von Elementen können pixelgenau festgelegt werden.
� Das relative Verhältnis bei verwendeten Bildern bleibt im gleichen Verhältnis zum Rest
der Seite.
� Sie haben weitaus mehr Kontrolle über die einzelnen Elemente als beim flexiblen Layout,
und die Umsetzung ist hierbei häufig wesentlich einfacher.
Zu den Nachteilen von Layouts mit fester Breite gehören allerdings:
� Das Layout ist unflexibel und passt sich sehr schlecht an sehr kleinen oder sehr großen
Bildschirmen an. In der Praxis funktionieren solche Layouts am besten in der Auflösung,
für die sie erstellt worden sind, was in der Regel Desktopbildschirme sind.
� Wird die Schriftgröße im Webbrowser geändert (gezoomt), kann es passieren, dass der
Text nicht mehr im dafür vorgesehenen Platz bleibt.
� Bei Bildschirmen mit hoher Auflösung wirkt alles sehr klein und verloren. Oft entsteht
zwischen dem Seitenrand und dem eigentlichen Inhalt eine große unansehnliche Lücke.
13.1.2 Ein Layout mit flexibler Breite
Bei Layouts mit flexibler Breite erfolgt die Maßangabe gewöhnlich in Prozent. Dadurch passt
sich bei einer Änderung des Webbrowser-Fensters auch das Layout mit an.
Die Vorteile einer flexiblen Breite sind:
� Die Webseite reagiert flexibel auf die Änderung der Größe des Webbrowser-Fensters, und
das Layout dehnt sich über die Bildschirmfläche aus oder wird geschrumpft.
� Das komplette Webbrowser-Fenster kann ausgefüllt werden, und es entstehen keine
unschönen Lücken bei extrem hoher Bildschirmauflösung.
� Auch bei einer Vergrößerung der Schrift wächst das Layout mit, weil sich die Seite ausdeh-
nen kann.
4158-8.book Seite 496 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
497
13
Als Nachteile einer flexiblen Breite sind zu nennen:
� Eine flexible Breite ist etwas schwieriger zu kontrollieren und nicht so einfach zu realisieren.
� Das Layout kann sich u. U. durch die Flexibilität deutlich negativ auswirken, wenn z. B. der
Bildschirm extrem breit ist und die Textzeilen unendlich lang werden. Auch bei extrem
kleinen Bildschirmen können die Textzeilen so weit zusammengestaucht werden, dass
nur noch einzelne Wörter pro Zeile vorhanden sind. In diesem Fall können Sie eventuell
Abhilfe schaffen mit den CSS-Eigenschaften min-width bzw. max-width.
� Fixe Elemente wie Bilder können aus einem dafür vorgesehenen Bereich bei einer zu klei-
nen Bildschirmgröße herausragen und so anderen Text überdecken. Auch Bilder lassen
sich flexibel gestalten.
13.2 Ein zweispaltiges Layout erstellen
Als Erstes werden Sie einige Techniken zu den klassischen zweispaltigen Layouts kennenler-
nen. Bei einem zweispaltigen Layout enthält meistens eine größere Spalte den Hauptinhalt
der Webseite und ein kleinerer Teil entweder die Navigation oder eine weitere Seitenleiste
mit marginalen Informationen und/oder weiteren Links. Bei dem Beispiellayout, wie es in
Abbildung 13.1 zu sehen ist, sei das Hauptaugenmerk auf die beiden Spalten mit dem Haupt-
inhalt und (hier) der Seitenleiste gerichtet.
Abbildung 13.1 Eine von vielen Möglichkeiten für ein klassisches zweispaltiges Layout
13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung
Als erstes Beispiel soll ein zweispaltiges Layout mit einer flexiblen Breite und einer absolu-
ten Positionierung vorgestellt werden. Das Prinzip basiert darauf, einen Teil der Spalte mit
Navigation – <nav>
Hauptinhalt
<main>
<div id=″main″>
oder
Seitenleiste
<aside>
Kopfleiste – <header>
Fußleiste – <footer>
4158-8.book Seite 497 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
498
position: absolute ganz links (left: 0;) oder rechts (right: 0;) mit einer bestimmen Breite zu
platzieren und in der anderen Spalte einen entsprechend großen Außenabstand mit margin
(margin-left oder margin-right) zu diesem absolut positionierten Element zu verwenden.
Damit sich das Layout an die Fenstergröße flexibel anpassen kann, wird jeweils eine prozen-
tuale Angabe der Breite (width) verwendet.
In Abbildung 13.2 sehen Sie das hier beschriebene Prinzip mit theoretischen Werten. Die
rechte Spalte wurde mit einer absoluten Positionierung aus dem Dokumentenfluss genom-
men und ganz nach rechts (right: 0) mit 25 % Breite platziert. Auf der anderen Seite wurde
dem Hauptinhalt ein Außenabstand (margin-right) nach rechts von dieser Breite (25 %) zuge-
wiesen, und der Hauptinhalt selbst bekommt 75 %, die Differenz von der kompletten Breite
des Fensters (100 %) minus der Seitenleiste (25 %).
Abbildung 13.2 Eine flexible Breite mit absoluter Positionierung
Hierzu ein Beispiel, das Ihnen diese Art der Positionierung in der Praxis demonstriert, des-
sen Endergebnis Sie in Abbildung 13.3 sehen. Im Beispiel wurden außerdem nicht exakt 25 %
und 75 % wie in der Abbildung verwendet, weil noch etwas Raum für das padding bleiben
sollte, damit nicht alles so eng zusammengeklebt wirkt.
<style>…
#sidebar {
position: absolute;
right: 0;
margin: 0;
Navigation – <nav>
margin-right: 25%;width: 75%;
position: absolute;right: 0;width: 25%;
Kopfleiste – <header>
Fußleiste – <footer>
4158-8.book Seite 498 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
499
13
padding: 2% 2%;
border: 0;
width: 22%;
}
main {
margin: 0;
padding: 2% 2%;
margin-right: 24%;
border: 0;
width: 72%;
}
</style>
…
<header>Zweispalter mit absoluter Positionierung</header>
<nav id="mainnav"><a href="#">Home</a> | … </nav>
<aside id="sidebar">
<h3>Seitenleiste</h3>
<p>Lorem ipsum dolor … </p>
<ul>
<li><a href="#">Link 1</a></li>
<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
4158-8.book Seite 499 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
500
Abbildung 13.3 Das zweispaltige flexible Layout bei der Darstellung
Das Prinzip funktioniert selbstverständlich auch andersherum, indem Sie die Seitenleiste
absolut auf der linken Seite positionieren und den Außenabstand des Hauptinhalts mit mar-
gin-left entsprechend einhalten. Hierzu müssten Sie den CSS-Code nur an zwei Stellen wie
folgt ändern, um das Ergebnis in Abbildung 13.4 zu erhalten:
…#sidebar {position: absolute;left: 0;margin: 0;padding: 2% 2%;border: 0;width: 22%;
}main {
margin: 0;padding: 2% 2%;margin-left: 24%;border: 0;width: 72%;
}…
Listing 13.2 /Beispiele/Kapitel013/13_2_1/index2.html
4158-8.book Seite 500 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
501
13
Abbildung 13.4 Mit kleinen Änderungen lässt sich die Anordnung der Spalten auch wechseln.
Ausdehnung festlegen
Bei diesem Beispiel handelt es sich um ein flexibles Layout, d. h., das Layout wird bei einer
Größenänderung des Webbrowser-Fensters gedehnt oder geschrumpft. Wollen Sie die maxi-
male oder minimale Ausdehnung der Spalten festlegen, können Sie hierzu zusätzlich die
CSS-Eigenschaft min-width und/oder max-width verwenden. Mit min-width geben Sie die
minimale und mit max-width die maximale Breite bzw. Ausdehnung an.
Die Nachteile von diesem Layout
Der Nachteil von diesem Layout ist die absolute Positionierung der Seitenleiste. Angenom-
men, Sie entfernen im verwendeten Beispiel Artikel 2, wird die Fußzeile zum Problem, weil
Sie durch die absolute Positionierung der Seitenleiste das Element aus dem Dokumenten-
fluss genommen haben, und daher wird keine Rücksicht mehr auf die Fußleiste genommen,
wie Sie in Abbildung 13.5 sehen.
Wenn Sie sicher sein können, dass der Inhalt des absolut positionierten Elements nicht län-
ger ist als der Inhalt der anderen Spalte daneben, können Sie diese Form des Layouts mit der
absoluten Positionierung verwenden.
4158-8.book Seite 501 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
502
Abbildung 13.5 Problematisch ist die Form eines Layouts mit absoluter Positionierung, wenn der
Inhalt des absolut positionierten Elements länger ist als der Hauptinhalt.
13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung
Dasselbe Beispiel, wie es eben mit absoluter Positionierung und flexibler Breite erstellt
wurde, können Sie auch mit einer festen Breite realisieren, indem Sie anstelle einer prozen-
tualen Angabe eine pixelgenaue Angabe verwenden. Ansonsten bleibt das Prinzip dasselbe
wie in Abschnitt 13.2.1 vorgestellt – und somit bleibt auch hier das Problem bestehen, wenn
die Seitenleiste länger ist als der Hauptinhalt, dass diese über die Fußleiste hinausragt. Hier
die CSS-Anweisung:
…#sidebar {position: absolute;left: 0;margin: 0;padding: 15px;border: 0;width: 180px;
}main {margin: 0;padding: 15px;margin-left: 190px;border: 0;width: 450px;
}…
Listing 13.3 /Beispiele/Kapitel013/13_2_2/index.html
4158-8.book Seite 502 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
503
13
Beim festen Layout mit der Angabe von Pixeln ändert sich die Position der Seitenleiste und
des Hauptinhalts nicht mehr, wenn Sie das Webbrowser-Fenster vergrößern oder verklei-
nern. Die Kopf- und Fußleiste und die Navigation sind in diesem Beispiel noch flexibel. In
Abbildung 13.6 können Sie sehr schön erkennen, wie zwischen dem rechten Webbrowser-
Rand und dem Hauptinhalt eine größere Lücke aufgrund der fixen Breitenangabe von der
Seitenleiste und dem Hauptinhalt entstanden ist. Verkleinern Sie das Webbrowser-Fenster
in der Breite, also kleiner als die Breite von Hauptinhalt plus Seitenleiste, müssen Sie auf der
Webseite gar querscrollen.
Abbildung 13.6 Bei der Verwendung einer festen Breite in Pixeln verändert sich die Breite des
Inhalts nicht mehr, wenn das Webbrowser-Fenster vergrößert bzw. verkleinert wird.
13.2.3 Den (Haupt)inhalt horizontal zentrieren
Wollen Sie einen Inhalt (nicht den Text) in einem Layout mittig in der Horizontalen zentrie-
ren, so funktioniert dies, indem Sie die Breite angeben, u. U. auch in Prozent oder em, und die
äußeren Abstände links und rechts von margin auf auto setzen.
Bezogen auf das Beispiel /Beispiele/Kapitel013/13_2_2/index.html mit dem fixierten zwei-
spaltigen Layout, können Sie folgendermaßen den Hauptinhalt (<main>) horizontal zen-
trieren:
…#wrapper {
width: 660px; /* Gesamtbreite */margin: 0 auto;
}…
4158-8.book Seite 503 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
504
<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 neben der Breite des Hauptinhalts auch die Seitenleiste berück-
sichtigt. Dann wurden mit der margin-Kurzschreibweise die linke und rechte Seite auf auto
und die obere und untere Seite auf 0 gesetzt. Zu guter Letzt haben Sie den ID-Selektor noch in
einem div-Element verwendet und den Hauptinhalt (hier: <main>…</main>) darin einge-
schlossen. Jetzt »wandert« der Hauptinhalt horizontal mittig mit, wenn das Webbrowser-
Fenster vergrößert oder verkleinert wird. Das Verkleinern sollte nur bis zu einer gewissen
Breite erfolgen. Das Ergebnis sehen Sie in Abbildung 13.7.
Diese Art des horizontalen Zentrierens funktioniert auch in anderen Beispielen und nicht
nur wie hier beim Hauptinhalt von festen zweispaltigen Layouts.
In diesem Beispiel hätten Sie eine feste bzw. teilweise flexible horizontale Zentrierung auch
ohne das div-Element und den ID-Selektor wrapper mit dem Innenabstand padding realisie-
ren können. Diese Möglichkeit werde ich Ihnen nicht vorenthalten:
…main {
margin: 0;padding: 1% 10%;margin-left: 190px;border: 0;width: 450px;
}…
Listing 13.5 /Beispiele/Kapitel013/13_2_3/index2.html
4158-8.book Seite 504 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
505
13
Abbildung 13.7 Hier wurde der Hauptinhalt zwischen <main> und </main> horizontal zentriert.
Damit haben Sie einen flexiblen Innenabstand rechts und links vom Hauptinhalt auf 10 %
gestellt. Mit einer Angabe von Pixeln könnten Sie auch einen fixen Innenabstand verwenden.
13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen
Auch mit einem float der beiden Spalten lässt sich ein flexibles Layout erstellen. Im Gegen-
satz zum absolut positionierten flexiblen Layout haben Sie das Problem mit der Fußzeile
nicht mehr, wenn z. B. die Seitenleiste länger ist als der Hauptinhalt. Voraussetzung hierfür
ist, dass Sie hinter den gefloateten Inhalten den Bereich mit clear wieder aufheben, da Ele-
mente mit float aus dem Dokumentenfluss herausgenommen werden.
Hierzu die CSS-Anweisungen für ein zweispaltiges flexibles Layout mit float. Den HTML-
Code können Sie sich sparen, weil sich gegenüber den Beispielen zuvor nichts geändert hat.
Sie gestalten das ganze Layout lediglich mit CSS.
…#sidebar {float: right;margin: 0;padding: 2% 2%;border: 0;width: 22%;
} /* Breite 22% + padding x 2 = 26% */main {float: right;
4158-8.book Seite 505 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
506
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 rechts bleibt. Die Breite
beträgt insgesamt 26 %, was sich aus den 22 % von width und den 2 × 2 % Außenabständen in
padding rechts und links ergibt. Sie wissen noch, dass Sie bei einer Box mit float eine Breite
angeben müssen.
Auch den Hauptinhalt ordnen Sie so weit rechts wie möglich an und verwenden float:right. Die Breite beträgt insgesamt 74 %, was sich aus width (70 %) und den beiden äußeren
padding-Abständen rechts und links (2 × 2 %) ergibt. Insgesamt beträgt die Breite des Zwei-
spalters mit float somit 100 %. Bei einer Breite von mehr als 74 % würde der Hauptinhalt
nach unten wegrutschen.
Damit die Fußzeile nicht zur Navigation hochrutscht, weil die Seitenleiste und der Haupt-
inhalt mit float aus dem Dokumentenfluss genommen wurden, wird ein Klassenselektor
erstellt, den Sie in der Fußzeile mit class="clear" verwenden können:
<footer class="clear">Fußzeile</footer>
Das Endergebnis des Zweispalters mit float sehen Sie in Abbildung 13.8.
Abbildung 13.8 Ein vollständig flexibler Zweispalter mit »float«
4158-8.book Seite 506 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
507
13
Wollen Sie die Ausrichtung ändern, sodass sich die Seitenleiste auf der linken Seite befindet
und der Hauptinhalt rechts, müssen Sie lediglich die float-Ausrichtung von right auf left
setzen.
13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen
Gerade bei flexiblen Layouts kann der Vorteil schnell zum Nachteil werden, wenn der Inhalt
der Seite abhängig von der Breite des Bildschirms zu weit auseinandergedehnt oder
geschrumpft wird. Ist eine Textzeile in einem Absatztext zu kurz oder zu lang, leidet der
Lesefluss darunter. Daher sollten die Textzeilen weder zu lang noch zu kurz sein. Was opti-
mal ist, hängt auch von der Schriftgröße ab. Ein guter Richtwert sind 50 bis 70 Zeichen pro
Zeile oder, wie es in der klassischen Buchtypografie gerne verwendet wird, acht bis zwölf
Wörter.
CSS bietet die Eigenschaften min-width und max-width an, um die Ausdehnung oder das
Schrumpfen einzuschränken. Bezogen auf das Beispiel /Beispiele/Kapitel013/13_2_4/index
.html, könnten Sie z. B. folgendermaßen eine sinnvolle Begrenzung über den Inhalt ziehen:
…#wrapper {width: 100%;min-width: 720px;max-width: 60em;
}…<body><div id="wrapper"><header>Zweispalter mit float</header><nav id="mainnav"> … <nav><aside id="sidebar"> … </aside><main> … </main><footer class="clear">Fußzeile</footer>
</div></body>
…
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 höchstens auf 720 Pixel schrumpfen. Wenn
das Webbrowser-Fenster trotzdem kleiner als 720 Pixel ist, wird ein horizontaler Scrollbal-
ken sichtbar, wie Sie es in Abbildung 13.9 sehen. Die maximale Breite mit max-width haben Sie
mit der Einheit em an die Schriftgröße gekoppelt und auf 60em gestellt. Somit wird der Inhalt
nicht breiter als 60em, und Sie verhindern damit, dass der Text schlechter lesbar wird. 60em
4158-8.book Seite 507 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
508
sind meistens 960 Pixel, wenn die Basisschriftgröße des Webbrowsers 16 Pixel ist (60 × 16 =
960). Eine Umrechnungstabelle dazu finden Sie auf http://pxtoem.com.
Abbildung 13.9 Dank »min-width« gibt es eine Grenze, ab der das zweispaltige Layout nicht mehr
schrumpft.
Abbildung 13.10 Auch mit »max-width« lässt sich eine gewisse Grenze einhalten, ab der sich das
zweispaltige Layout nicht mehr weiter ausdehnt.
4158-8.book Seite 508 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
509
13
Höhe einschränken
Auch wenn es in der Praxis nicht so häufig verwendet wird, es gibt noch die CSS-Eigenschaf-
ten min-height und max-height, mit denen Sie die minimale und maximale Höhe von Boxen
angeben können.
Auch hier gilt wieder, dass diese Einschränkung der minimalen und maximalen Breite und
Höhe nicht nur auf das ganze Layout beschränkt ist. Sie können diese CSS-Eigenschaften
auch auf einzelne HTML-Elemente anwenden.
13.2.6 Zweispaltiges festes Layout mit »float« erstellen
Es ist möglich, ein zweispaltiges festes Layout mit float in Pixeln statt prozentualer Werte zu
realisieren. In der Praxis können Sie dies wie folgt notieren:
…
#sidebar {
float: left;
margin: 0;
padding: 5px 5px;border: 0;
width: 200px;}
main {
float: left;
padding: 5px 5px;margin: 0;
border: 0;
width: 500px;}
.clear { clear: both; }
…
Listing 13.8 /Beispiele/Kapitel013/13_2_6/index.html
Hier wurden die Angaben von Prozent in Pixel geändert, sodass die beiden Spalten eine feste
Breite von insgesamt 720 Pixeln haben. Damit außerdem der Hauptinhalt unter 720 Pixel
nicht unterhalb der Seitenleiste rutscht, was durchaus gewollt sein kann, wurde hier ein div-
Element als Wrapper mit min-width und max-width eingesetzt, wie es bereits im Beispiel /Bei-
spiele/Kapitel013/13_2_5/index.html verwendet wurde, wo ausführlicher auf die minimale
und maximale Breite eines Layouts eingegangen wurde.
4158-8.book Seite 509 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
510
In der Praxis ist es einfacher und empfehlenswerter, die Angaben in Prozent zu machen und
die Einschränkungen mit min-width und max-width (siehe Abschnitt 13.2.5, »Minimale und
maximale Breite bei flexiblen Layouts einstellen«) zu regeln.
13.2.7 Zweispaltiges Layout mit »display: table« erstellen
Eine weitere interessante Lösung, ein zweispaltiges Layout zu erstellen, ist mit der CSS-
Eigenschaft display und dem Wert table. Dies ist eine CSS-Variante, um Tabellen zu erstel-
len, und wird vom Internet Explorer ab Version 8 verstanden. Den einzelnen Spalten können
Sie ebenfalls die Eigenschaft display und den Wert table-cell zuweisen. Der Wert table-cell
stellt so viel wie das HTML-Element <td> dar.
Tabellen zum Layouten sind doch veraltet?
Es wurde bereits erwähnt, dass Sie das HTML-Tag <table> nicht mehr für das Layout von
Webseiten verwenden sollten. Und um es gleich richtigzustellen, Sie tun es hier nicht mit
dem HTML-Tag <table>, sondern Sie erstellen eine Tabelle mit der CSS-Eigenschaft display.
Es gibt noch weitere Werte, die Sie display im Zusammenhang mit CSS-Tabellen zuweisen
und verwenden können. So könnten Sie z. B. mit table-row das Element als Tabellenzeile (wie
<tr>) umdefinieren. Auf die einzelnen Eigenschaften von display wird hier nicht näher ein-
gegangen. In diesem Beispiel reicht table-cell aus.
Was macht »display«?
Im Buch sind Sie schon des Öfteren über display gestolpert und werden das ein oder andere
Mal wieder diese CSS-Eigenschaft verwenden. Mit dieser Eigenschaft können Sie das Verhal-
ten von HTML-Elementen beim Rendern im Webbrowser verändern bzw. umdefinieren. So
können praktisch Inline-Elemente in Block-Elemente oder Flow-Elemente umgewandelt wer-
den. Im Beispiel mit display: table wird das Element beim Rendern als Tabelle betrachtet
und verhält sich dann, grob gesagt, wie ein <table>-Element. Eine Übersicht über displayund die verschiedenen Werte finden Sie in Abschnitt 13.6, »Verhalten von HTML-Elementen
mit »display« ändern«.
Hierzu das zweispaltige Layout, das mit dem CSS-Tabellenlayout erstellt wurde:
…
#sidebar {
margin: 0;
padding: 5px 5px;
border: 0;
width: 180px;
4158-8.book Seite 510 Dienstag, 30. August 2016 1:58 13
13.2 Ein zweispaltiges Layout erstellen
511
13
display: table-cell;}
main {
padding: 5px 5px;
margin: 0;
border: 0;
display: table-cell;}
#wrapper {
display: table;min-width: 720px;
max-width: 60em;
}
…
<header>Zweispalter mit display: table</header>
<nav id="mainnav"><a href="#">Home</a> … </nav>
<div id="wrapper"><aside id="sidebar"> … </aside>
<main>
<article> … </article>
<article> … </article>
</main>
</div><footer>Fußzeile</footer>
…
Listing 13.9 /Beispiele/Kapitel013/13_2_7/index.html
Hier wurde ein CSS-Tabellenlayout mit dem ID-Selektor wrapper mit display: table erstellt.
Im HTML-Code verwenden Sie ein div-Element und stecken dazwischen die Elemente, die Sie
als Tabelle behandeln wollen. Hier sind es die Elemente <aside> mit dem Klassenselektor
sidebar und das main-Element, das Sie mit dem entsprechenden Typselektor ausgewählt
haben. Als Funktion im Tabellenlayout setzen Sie für beide Elemente über deren Selektoren
die CSS-Eigenschaft display auf table-cell, sodass die beiden Elemente jetzt die Daten in der
Tabelle sind. Die Tabellenzeile müssen Sie nicht angeben.
Im Beispiel wurde für die Seitenleiste eine feste Größe verwendet und für den Hauptinhalt
keine. Bei der festen Größe haben Sie den Vorteil, dass die Seitenleiste gleich breit bleibt, und
der Hauptinhalt nimmt den Rest des Platzes in der Tabellenzeile daneben ein. Damit das
Auseinanderdehnen oder Schrumpfen dieses Bereiches auf ein gewisses Maß eingeschränkt
wird, werden in der Tabelle im ID-Selektor wrapper min-width und max-width gesetzt.
4158-8.book Seite 511 Dienstag, 30. August 2016 1:58 13
13 Das Layout mit CSS gestalten
512
Abbildung 13.11 Das Layout mit CSS-Tabellen im Einsatz
13.3 Ein dreispaltiges Layout erstellen
Ebenfalls im Web häufiger anzutreffen sind dreispaltige Layouts, wie Sie in Abbildung 13.12
sehen. Eine zusätzliche dritte Spalte kann verwendet werden, um dort etwa die Hauptnaviga-
tion, weitere Informationen oder Sonstiges aufzunehmen. In den nächsten Abschnitten wer-
den Sie einige Techniken kennenlernen, mit denen Sie solche dreispaltigen Layouts mit CSS
umsetzen.
Abbildung 13.12 Eine mögliche und sinnvolle Anordnung eines dreispaltigen Layouts
Navigation<nav>
Seitenleiste<aside>
Hauptbereich<main>
Kopfleiste – <header>
Fußleiste – <footer>
4158-8.book Seite 512 Dienstag, 30. August 2016 1:58 13
Auf einen Blick
Auf einen Blick
1 Einführung in das HTML5-Universum .......................................................................... 29
2 Grundlegender Aufbau von HTML(-Dokumenten) .................................................. 55
3 Die Kopfdaten eines HTML-Dokuments ...................................................................... 71
4 Der sichtbare Bereich eines HTML-Dokuments ........................................................ 101
5 Tabellen und Hyperlinks ................................................................................................... 177
6 Grafiken und Multimedia ................................................................................................. 211
7 HTML-Formulare und interaktive Elemente .............................................................. 261
8 Einführung in Cascading Stylesheets (CSS) ................................................................ 307
9 Die Selektoren von CSS ..................................................................................................... 327
10 Die Vererbung und die Kaskade ..................................................................................... 381
11 Das Box-Modell von CSS ................................................................................................... 409
12 CSS-Positionierung ............................................................................................................. 451
13 Das Layout mit CSS gestalten ......................................................................................... 495
14 Stylen mit CSS ...................................................................................................................... 607
15 Testen und Organisieren .................................................................................................. 689
16 Eine kurze Einführung in JavaScript ............................................................................. 713
17 Objekte in JavaScript ......................................................................................................... 757
18 HTML DOM und DOM-Manipulation ........................................................................... 793
19 Einführung in die HTML5-JavaScript-APIs .................................................................. 859
20 Eine Einführung in Ajax und jQuery ............................................................................. 937
21 Fertige CSS-Frameworks ................................................................................................... 993
4158-8.book Seite 3 Dienstag, 30. August 2016 1:58 13
Inhalt
5
Inhalt
Vorwort .................................................................................................................................................................. 25
1 Einführung in das HTML5-Universum 29
1.1 Ist dieses Buch überhaupt etwas für mich? ............................................................................ 29
1.2 Die verschiedenen Typen von Webseiten ................................................................................ 30
1.2.1 Webpräsenz – die klassische Homepage ..................................................................... 31
1.2.2 Ein Blog – das Tagebuch im Internet ............................................................................ 31
1.2.3 Webshop – Geschäfte ohne Öffnungszeiten ............................................................. 33
1.2.4 Webplattform – sich ein eigenes soziales Netzwerk bauen ................................. 34
1.2.5 Rich Internet Application (RIA) ........................................................................................ 34
1.3 Dynamische und statische Webseiten ...................................................................................... 35
1.3.1 Statische Webseiten ........................................................................................................... 35
1.3.2 Dynamische Webseiten ..................................................................................................... 37
1.4 Sprachen für die Gestaltung und Entwicklung im Web .................................................... 39
1.4.1 HTML5 – der »Überbegriff« für alles zusammen ...................................................... 39
1.4.2 HTML – die textbasierte Hypertext-Auszeichnungssprache ................................ 39
1.4.3 CSS – die Gestaltungssprache Cascading Style Sheets ........................................... 41
1.4.4 JavaScript – die clientseitige Skriptsprache des Webbrowsers ............................ 42
1.4.5 Die serverseitigen Skriptsprachen und Datenbanken ............................................. 43
1.5 Was brauche ich, um hier anzufangen? ................................................................................... 43
1.5.1 (HTML-)Editor zum Schreiben von HTML-Dokumenten ......................................... 43
1.5.2 Webbrowser für die Anzeige der Webseiten .............................................................. 44
1.5.3 Cross-Browser-Tests – wie sieht das bei den anderen aus? .................................. 45
1.5.4 Schritt für Schritt: Webseite erstellen und im Webbrowser betrachten .......... 47
1.5.5 Geschriebenes HTML überprüfen .................................................................................. 50
1.5.6 Gute Gründe, den HTML-Code zu validieren .............................................................. 53
1.6 Verwendete Konventionen im Buch .......................................................................................... 54
1.7 Zusammenfassung ............................................................................................................................. 54
4158-8.book Seite 5 Dienstag, 30. August 2016 1:58 13
Inhalt
6
2 Grundlegender Aufbau von HTML(-Dokumenten) 55
2.1 Syntax und Aufbau von HTML(-Dokumenten) ...................................................................... 55
2.1.1 Wie wird in HTML ein Dokument strukturiert? ......................................................... 55
2.1.2 Baumstruktur mit dem DOM-Inspektor betrachten ................................................ 58
2.1.3 Was sind HTML-Tags und was HTML-Elemente? ...................................................... 58
2.1.4 HTML-Elemente verschachteln und die hierarchische Struktur .......................... 59
2.1.5 Falsche Verschachtelung von HTML-Elementen vermeiden ................................. 60
2.1.6 Das Ende-Tag eines HTML-Elements weglassen? ..................................................... 62
2.1.7 Allein stehende HTML-Tags ohne Ende-Tag ............................................................... 63
2.1.8 Zusätzliche HTML-Attribute für HTML-Elemente ..................................................... 63
2.1.9 Kommentare in HTML-Dokumenten verwenden ..................................................... 65
2.2 Ein einfaches HTML-Dokument-Grundgerüst ........................................................................ 65
2.2.1 Der HTML5-Dokumenttyp <!doctype> ......................................................................... 66
2.2.2 Die alten <!doctype>-Deklarationen ............................................................................. 67
2.2.3 Der Anfang und das Ende eines HTML-Dokuments mit <html> ......................... 67
2.2.4 <head> – der Kopf eines HTML-Dokuments ............................................................... 68
2.2.5 <body> – der sichtbare Bereich eines HTML-Dokuments ...................................... 69
2.3 Zusammenfassung ............................................................................................................................. 69
3 Die Kopfdaten eines HTML-Dokuments 71
3.1 Die HTML-Elemente für den Kopf in der Übersicht .............................................................. 71
3.2 <title> – die Überschrift der HTML-Seite .................................................................................. 72
3.3 Exkurs: Namenskonvention und Referenzierung ................................................................ 74
3.3.1 Gültige und gute Dateinamen für ein HTML-Dokument ....................................... 74
3.3.2 Gültige Verzeichnisnamen und sinnvolle Verzeichnisstrukturen ....................... 75
3.3.3 Referenz auf eine Datenquelle notieren ...................................................................... 76
3.4 Die Basis-URL einer Webseite mit <base> definieren ......................................................... 78
3.4.1 Die HTML-Attribute für das HTML-Element <base> ................................................ 80
3.5 Beziehung zu einem externen Dokument mit <link> ........................................................ 81
3.5.1 Die HTML-Attribute für das allein stehende HTML-Element <link> ................... 83
3.6 Dokumentglobale CSS-Stile mit <style> notieren ................................................................ 85
3.6.1 Die HTML-Attribute für das HTML-Element <style> ................................................ 86
3.6.2 Das <style>-Element außerhalb des Kopfbereiches verwenden ......................... 86
3.7 Skripte in Webseiten einbinden mit <script> ......................................................................... 88
3.7.1 Die HTML-Attribute für das HTML-Element <script> .............................................. 90
4158-8.book Seite 6 Dienstag, 30. August 2016 1:58 13
Inhalt
7
3.8 Metainformationen für das Dokument mit <meta> .......................................................... 90
3.8.1 Die gebräuchlichsten Metaangaben ............................................................................. 91
3.8.2 Nützliche Metadaten für einen Webcrawler angeben ........................................... 93
3.8.3 Hilfreiche Metadaten für Suchmaschinen .................................................................. 94
3.8.4 Nützliche Metadaten für den Webbrowser ................................................................ 96
3.8.5 Allgemeine Metadaten verwenden ............................................................................... 97
3.8.6 Die HTML-Attribute für das HTML-Element <meta> ............................................... 98
3.9 Zusammenfassung ............................................................................................................................. 98
4 Der sichtbare Bereich eines HTML-Dokuments 101
4.1 HTML-Elemente für Seitenstrukturierung ............................................................................... 101
4.1.1 <body> – der darstellbare Inhaltsbereich eines HTML-Dokuments ................... 102
4.1.2 Die neuen Sektionselemente von HTML ...................................................................... 103
4.1.3 Inhalt in themenbezogene Abschnitte mit <section> einteilen .......................... 103
4.1.4 Inhalt in einen für sich geschlossenen Block mit <article> einteilen ................. 104
4.1.5 Inhalte mit zusätzlichen Informationen mit <aside> ergänzen .......................... 106
4.1.6 Einen Inhalt mit <nav> zu einer Seiten-Navigationsleiste erklären ................... 108
4.1.7 Überschriften mit den HTML-Elementen von <h1> bis <h6> ............................... 111
4.1.8 Ein Kopfbereich mit <header> und ein Fußbereich mit <footer> ....................... 116
4.1.9 Kontaktinformationen mit <address> kennzeichnen ............................................. 118
4.2 HTML-Elemente für Textstrukturierung ................................................................................... 119
4.2.1 Textabsätze mit <p> hinzufügen ................................................................................... 120
4.2.2 Zeilenumbruch erzwingen mit <br> ............................................................................. 122
4.2.3 Einen optionalen Zeilenumbruch mit <wbr> hinzufügen ..................................... 123
4.2.4 Leerzeichen erzwingen und Umbruch verhindern mit » « ....................... 124
4.2.5 Thematische Trennung mit <hr> hinzufügen ........................................................... 124
4.2.6 Absätze bzw. Zitate mit <blockquote> hinzufügen ................................................. 126
4.2.7 Einen allgemeinen Bereich mit <div> definieren ...................................................... 127
4.2.8 <main> – ein HTML-Element für den Hauptinhalt .................................................. 129
4.2.9 Gesonderte Beschriftung von Inhalten mit <figure> und <figcaption> ........... 130
4.2.10 Ungeordnete Listen mit <ul> und <li> ......................................................................... 132
4.2.11 Geordnete Listen mit <ol> und <li> ............................................................................... 133
4.2.12 Nummerierung einer geordneten Liste umdrehen .................................................. 133
4.2.13 Nummerierung einer geordneten Liste ändern ........................................................ 134
4.2.14 Listen ineinander verschachteln ..................................................................................... 135
4.2.15 Eine Beschreibungsliste mit <dl>, <dt> und <dd> erstellen ................................. 137
4.3 Das semantische HTML verwenden ........................................................................................... 139
4.3.1 Strukturloses HTML ............................................................................................................ 140
4158-8.book Seite 7 Dienstag, 30. August 2016 1:58 13
Inhalt
8
4.3.2 Generische Strukturierung mit <div> ............................................................................ 141
4.3.3 Semantische Strukturierung mit den neuen Elementen in HTML5 .................... 145
4.3.4 Wem nützen diese semantischen HTML5-Elemente was? .................................... 147
4.4 HTML-Elemente für Textauszeichnungen ................................................................................ 148
4.4.1 Abkürzungen oder Akronyme mit <abbr> kennzeichnen ...................................... 150
4.4.2 Text als Quelle eines Arbeitstitels mit <cite> markieren ........................................ 150
4.4.3 Darstellung von Computercode mit <code> und <pre> auszeichnen ............... 151
4.4.4 Tastatureingabe mit <kdb> und Programmausgabe mit <samp> ..................... 154
4.4.5 Einen Text mit <dfn> als eine Definition auszeichnen ........................................... 155
4.4.6 Text als Variable mit <var> auszeichnen ..................................................................... 155
4.4.7 Textrichtung mit <bdo> und <bdi> ändern ................................................................ 156
4.4.8 Text betonen bzw. hervorheben mit <em>, <strong>, <i> und <b> ................... 157
4.4.9 Einen Text mit <mark> hervorheben ............................................................................ 158
4.4.10 Text zwischen Anführungsstriche setzen mit <q> ................................................... 160
4.4.11 Text unter- bzw. durchstreichen mit <u> und <s> ................................................... 161
4.4.12 Änderungen von Text mit <ins> und <del> markieren ........................................... 162
4.4.13 Einen Text hochstellen bzw. tiefstellen mit <sup> und <sub> ............................ 163
4.4.14 Datums- und Zeitangaben mit <time> kennzeichnen ............................................ 164
4.4.15 Das Kleingedruckte mit <small> kennzeichnen ........................................................ 168
4.4.16 <ruby>, <rp> und <rt> für eine Anmerkung der Aussprache ................................ 168
4.4.17 Bereich von einzelnen Textpassagen mit <span> zusammenfassen ................. 170
4.5 Exkurs: Zeichencodierung ............................................................................................................... 170
4.5.1 Von Bytes zur Zeichencodierung .................................................................................... 171
4.5.2 Von ASCII zu ISO-8859 ........................................................................................................ 171
4.5.3 Über die Bytegrenze hinaus mit Unicode .................................................................... 172
4.6 Zeichenentitäten in HTML ............................................................................................................... 173
4.7 Zusammenfassung ............................................................................................................................. 175
5 Tabellen und Hyperlinks 177
5.1 Daten in einer Tabelle strukturieren .......................................................................................... 177
5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th> ...................... 178
5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen ............ 180
5.1.3 HTML-Attribute für die Tabellenelemente .................................................................. 183
5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren ................................... 184
5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col> ............................... 186
5.2 »Elektronische« Verweise aka Hyperlinks mit <a> .............................................................. 189
5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen ............ 190
4158-8.book Seite 8 Dienstag, 30. August 2016 1:58 13
Inhalt
9
5.2.2 Tabellen beschriften mit <caption> bzw. <figcaption> .......................................... 193
5.2.3 Links zu anderen Webseiten einfügen ......................................................................... 196
5.2.4 Links mit dem »target«-Attribut in einem neuen Fenster öffnen ....................... 197
5.2.5 E-Mail-Links mit »href=mailto:…« .................................................................................. 198
5.2.6 Links zu anderen Inhaltstypen setzen .......................................................................... 200
5.2.7 Downloadlinks mit dem »download«-Attribut hinzufügen ................................. 203
5.2.8 Links zu bestimmten Teilen einer Webseite setzen ................................................. 205
5.2.9 Die HTML-Attribute für das HTML-Element <a> ....................................................... 208
5.3 Zusammenfassung ............................................................................................................................. 210
6 Grafiken und Multimedia 211
6.1 Bilder mit <img> einbinden ........................................................................................................... 212
6.1.1 Bilder einem HTML-Dokument hinzufügen ............................................................... 212
6.1.2 Höhe und Breite für die Grafik angeben ...................................................................... 216
6.1.3 Bilder beschriften mit <figure> und <figcaption> .................................................... 220
6.1.4 Die HTML-Attribute für das HTML-Element <img> ................................................. 221
6.2 Verweissensitive Grafiken aka Image-Maps erstellen ...................................................... 222
6.3 Das passende Bild mit <picture> laden ..................................................................................... 228
6.3.1 HTML-Attribute von <source> ......................................................................................... 230
6.3.2 Mehrere Bildquellen mit dem HTML-Attribut »srcset« .......................................... 231
6.3.3 Mehrere Bildquellen mit <img> und den HTML-Attributen »srcset«
und »sizes« ............................................................................................................................. 233
6.4 Ein Icon für die Webseite hinzufügen (Favicon) ................................................................... 234
6.5 Vektorgrafiken in HTML-Dokumenten verwenden ............................................................ 235
6.5.1 SVG als Grafikreferenz hinzufügen mit <img> .......................................................... 236
6.5.2 SVG direkt in die Webseite einbetten mit <svg> ...................................................... 237
6.5.3 SVG-Tags für die Vektorgrafiken .................................................................................... 238
6.5.4 Übersicht über die grafischen Elemente von SVG .................................................... 238
6.5.5 Weitere Hinweise zur Verwendung von SVG ............................................................. 240
6.5.6 Mathematische Formeln mit MathML ......................................................................... 241
6.6 Grafiken zeichnen mit <canvas> ................................................................................................. 242
6.7 Videos mit dem HTML-Element <video> abspielen ............................................................ 244
6.7.1 Die HTML-Attribute für das HTML-Element <video> .............................................. 246
6.7.2 Dem Video Untertitel mit <track> hinzufügen ......................................................... 247
6.7.3 Videos über YouTube abspielen lassen ........................................................................ 250
4158-8.book Seite 9 Dienstag, 30. August 2016 1:58 13
Inhalt
10
6.8 Audios mit dem HTML-Element <audio> abspielen ............................................................ 251
6.8.1 Die HTML-Attribute für das HTML-Element <audio> .............................................. 253
6.9 Andere aktive Inhalte einbinden ................................................................................................. 254
6.9.1 Das HTML-Element <embed> .......................................................................................... 254
6.9.2 Das HTML-Element <object> ........................................................................................... 255
6.9.3 Das HTML-Element <iframe> ........................................................................................... 256
6.10 Zusammenfassung ............................................................................................................................. 258
7 HTML-Formulare und interaktive Elemente 261
7.1 Einen Bereich für Formulare definieren .................................................................................... 263
7.2 Die HTML-Eingabefelder für Formulare .................................................................................... 264
7.2.1 Ein einzeiliges Texteingabefeld mit <input type="text"> ...................................... 264
7.2.2 Ein Passworteingabefeld mit <input type="password"> ........................................ 265
7.2.3 Ein mehrzeiliges Texteingabefeld mit <textarea> ................................................... 266
7.2.4 Eine Auswahlliste bzw. Dropdown-Liste mit <select> ............................................ 267
7.2.5 Eine Gruppe von Radiobuttons mit <input type="radio"> erstellen ................... 269
7.2.6 Ein Textlabel mit <label> hinzufügen ........................................................................... 270
7.2.7 Checkboxen mit <input type="checkbox"> verwenden .......................................... 270
7.2.8 Felder für Datei-Upload mit <input type="file"> verwenden ................................ 271
7.2.9 Verschiedene Schaltflächen im Überblick ................................................................... 272
7.2.10 Ein verstecktes Eingabefeld mit <input type="hidden"> verwenden ................. 273
7.2.11 Formularfelder außerhalb von <form>…</form> notieren (HTML5) ................. 274
7.2.12 Mehrere Submit-Schaltflächen zu unterschiedlichen URLs (HTML5) ................ 274
7.3 Die neuen HTML5-Eingabefelder mit <input> ....................................................................... 276
7.3.1 Ein Eingabefeld für Farben mit <input type="color"> .............................................. 277
7.3.2 Ein Eingabefeld für ein Datum mit <input type="date"> ....................................... 277
7.3.3 Ein Eingabefeld für eine Uhrzeit mit <input type="time"> .................................... 278
7.3.4 Eingabefelder für Datum und Uhrzeit .......................................................................... 279
7.3.5 Eingabefelder für den Monat und die Woche ............................................................ 279
7.3.6 Ein Eingabefeld für die Suche mit <input type="search"> ..................................... 280
7.3.7 Ein Eingabefeld für E-Mail-Adressen mit <input type="email"> .......................... 280
7.3.8 Ein Eingabefeld für eine URL-Adresse mit <input type="url"> .............................. 281
7.3.9 Ein Eingabefeld für Telefonnummern mit <input type="tel"> ............................. 281
7.3.10 Ein Eingabefeld für Zahlen mit <input type="number"> ........................................ 281
7.3.11 Ein Eingabefeld für Zahlen eines bestimmten Bereiches ....................................... 282
7.3.12 Ausgabe von Werten und Berechnungen mit <output> ........................................ 282
4158-8.book Seite 10 Dienstag, 30. August 2016 1:58 13
Inhalt
11
7.4 Die neuen HTML5-Attribute für Eingabefelder ..................................................................... 283
7.4.1 Den Eingabefokus mit dem HTML-Attribut »autofocus« setzen ........................ 283
7.4.2 Autovervollständigung (de)aktivieren mit dem Attribut »autocomplete« ..... 284
7.4.3 Eine Liste mit Vorschlägen mit dem HTML-Attribut »list« und <datalist> ...... 284
7.4.4 Minimale und maximale Werte und die Schrittweite festlegen ......................... 285
7.4.5 Das Auswählen oder die Eingabe mehrerer Werte mit »multiple« .................... 285
7.4.6 Reguläre Ausdrücke für Eingabefelder mit »pattern« ............................................ 285
7.4.7 Ein Platzhalter für ein Eingabefeld mit »placeholder« ........................................... 286
7.4.8 Eine Eingabe erforderlich machen mit dem Attribut »required« ........................ 286
7.4.9 Fehlermeldung von Eingabefeldern (steuern) ........................................................... 286
7.5 Weitere nützliche Helferlein für Eingabefelder .................................................................... 289
7.5.1 Formularelemente mit dem HTML-Attribut »disabled« deaktivieren ............... 289
7.5.2 Bei Eingabefeldern mit dem Attribut »readonly« nur Lesen erlauben .............. 290
7.5.3 Hilfreiche Tastenkürzel und Tabulator-Reihenfolge für Eingabefelder ............ 290
7.5.4 Formularelemente gruppieren mit <fieldset> und <legend> .............................. 292
7.5.5 Fortschrittsanzeige mit <progress> .............................................................................. 293
7.5.6 Werte visualisieren mit <meter> ................................................................................... 293
7.6 Formulardaten mit PHP versenden ............................................................................................ 294
7.6.1 So kommen die Daten vom Webbrowser … ................................................................ 295
7.6.2 Die POST-Methode .............................................................................................................. 296
7.6.3 Die GET-Methode ................................................................................................................ 297
7.6.4 … zum Webserver mit einem PHP-Skript ..................................................................... 298
7.7 Interaktive HTML-Elemente ........................................................................................................... 301
7.7.1 Inhalte auf-/zuklappen mit <details> und <summary> ......................................... 301
7.7.2 Eine Dialogbox mit <dialog> ............................................................................................ 302
7.7.3 Eine Menüleiste mit <menu> und <menuitem> erzeugen ................................... 303
7.8 Zusammenfassung ............................................................................................................................. 305
8 Einführung in Cascading Stylesheets (CSS) 307
8.1 Die Versionen von CSS ...................................................................................................................... 308
8.1.1 Die erste Version mit CSS Level 1 (CSS 1) ..................................................................... 308
8.1.2 Die zweite Version mit CSS Level 2 (CSS 2) ................................................................. 309
8.1.3 Die neueste Version mit CSS Level 3 (CSS3) ................................................................ 309
8.2 Das grundlegende Anwendungsprinzip von CSS ................................................................. 309
8.2.1 Aufbau eines Selektors in CSS ......................................................................................... 312
8.2.2 Die Deklaration eines Selektors ...................................................................................... 313
4158-8.book Seite 11 Dienstag, 30. August 2016 1:58 13
Inhalt
12
8.2.3 Kommentare für CSS-Code verwenden ........................................................................ 313
8.2.4 Ein paar Hinweise zur Codeformatierung von CSS-Code ....................................... 314
8.3 Einbindungsmöglichkeiten von CSS in HTML ......................................................................... 315
8.3.1 Stilanweisungen direkt im HTML-Tag mit dem HTML-Attribut »style« ............ 315
8.3.2 Stilanweisungen im Dokumentkopf mit dem HTML-Element <style> .............. 316
8.3.3 Stilanweisungen aus einer externen CSS-Datei mit <link> einbinden .............. 317
8.3.4 Kombinieren von CSS-Regeln im Kopfbereich und in externen
CSS-Datei(en) ......................................................................................................................... 319
8.3.5 Alternative Stylesheets ...................................................................................................... 320
8.3.6 Stilanweisungen aus einer externen CSS-Datei mit »@import« einbinden .... 323
8.3.7 Medienspezifische Stylesheets für bestimmte Ausgabegeräte ........................... 324
8.3.8 Medienspezifische Stylesheets mit CSS3 ..................................................................... 326
8.4 Zusammenfassung ............................................................................................................................. 326
9 Die Selektoren von CSS 327
9.1 Die einfachen Selektoren von CSS ............................................................................................... 329
9.1.1 HTML-Elemente mit dem Typselektor ansprechen .................................................. 329
9.1.2 HTML-Elemente mit einer bestimmten Klasse oder ID ansprechen ................... 332
9.1.3 Universalselektor – alle Elemente in einem Dokument ansprechen ................. 339
9.1.4 Elemente anhand der Attribute mit dem Attributselektor ansprechen ........... 342
9.1.5 Attributselektor für Attribute mit einem bestimmten Attributwert ................. 344
9.1.6 Attributselektor für Attribute mit einem bestimmten Teilwert (CSS3) ............ 348
9.1.7 CSS-Pseudoklassen, die Selektoren für bestimmte Eigenschaften ..................... 351
9.1.8 Die komfortablen Struktur-Pseudoklassen von CSS ................................................ 356
9.1.9 Sprach-Pseudoklasse »:lang()« und die Negations-Pseudoklasse »:not()« ....... 362
9.1.10 Pseudoelemente, die Selektoren für nicht vorhandene Elemente ...................... 363
9.2 Kombinatoren – die Selektoren verketten .............................................................................. 366
9.2.1 Der Nachfahrenselektor (E1 E2) ...................................................................................... 368
9.2.2 Der Kindselektor (E1 > E2) ................................................................................................. 371
9.2.3 Der Nachbarselektor (E1 + E2) ......................................................................................... 372
9.2.4 Der Geschwisterselektor (E1 ~ E2) .................................................................................. 374
9.3 Performance verschiedener Selektoren .................................................................................... 376
9.4 Zusammenfassung ............................................................................................................................. 378
4158-8.book Seite 12 Dienstag, 30. August 2016 1:58 13
Inhalt
13
10 Die Vererbung und die Kaskade 381
10.1 Das Prinzip der Vererbung in CSS ................................................................................................ 381
10.1.1 Vorsicht bei der Verwendung von relativen Eigenschaften .................................. 386
10.1.2 Es wird nicht alles weitervererbt .................................................................................... 386
10.1.3 Vererbung erzwingen mit »inherit« .............................................................................. 386
10.1.4 Den Standardwert einer CSS-Eigenschaft wiederherstellen (»initial«) ............ 388
10.2 Das Regelsystem der Kaskade verstehen ................................................................................ 388
10.2.1 Die Herkunft eines Stylesheets ....................................................................................... 389
10.2.2 Die Priorität einer CSS-Eigenschaft mit »!important« erhöhen .......................... 390
10.2.3 Sortierung nach Wichtigkeit und Herkunft ................................................................ 390
10.2.4 Sortieren nach Gewichtung der Selektoren (Spezifität) ......................................... 392
10.2.5 Zusammenfassung zum Regelsystem der Kaskade ................................................. 396
10.3 Exkurs: Werte an CSS-Eigenschaften übergeben ................................................................. 397
10.3.1 Die verschiedenen Maßeinheiten in CSS ..................................................................... 397
10.3.2 Zeichenketten und Schlüsselwörter als Wert für CSS-Eigenschaften ............... 399
10.3.3 Die vielen Möglichkeiten, eine Farbe in CSS zu verwenden .................................. 400
10.3.4 CSS3-Wertetypen ................................................................................................................ 405
10.3.5 Werte mit Kurzschreibweise an CSS-Eigenschaft übergeben .............................. 406
10.4 Zusammenfassung ............................................................................................................................. 408
11 Das Box-Modell von CSS 409
11.1 Das klassische Box-Modell von CSS ............................................................................................ 410
11.1.1 Den Inhaltsbereich mit »width« und »height« vorgeben ...................................... 411
11.1.2 Den Innenabstand mit »padding« angeben ............................................................... 412
11.1.3 Den Rahmen mit »border« erstellen ............................................................................. 413
11.1.4 Den Außenabstand mit »margin« einrichten ............................................................ 414
11.1.5 Collapsing Margins (zusammenfallende vertikale Außenabstände) ................. 416
11.1.6 Gesamtbreite und Gesamthöhe einer Box ermitteln .............................................. 419
11.2 Das neue alternative Box-Modell von CSS3 ........................................................................... 421
11.2.1 Das neue Box-Modell »box-sizing« verwenden ........................................................ 423
11.2.2 Ist das neue Box-Modell schon alltagstauglich? ....................................................... 423
11.2.3 Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) ................................................ 427
11.3 Boxen gestalten .................................................................................................................................. 429
11.3.1 Einen Rahmen mit der Eigenschaft »border« hinzufügen und gestalten ........ 429
11.3.2 Hintergrundfarbe mit »background-color« festlegen ............................................ 433
11.3.3 Hintergrundgrafiken verwenden ................................................................................... 434
4158-8.book Seite 13 Dienstag, 30. August 2016 1:58 13
Inhalt
14
11.3.4 Die Boxen durchsichtig gestalten (CSS3) ..................................................................... 441
11.3.5 Einen Farbverlauf hinzufügen (CSS3) ............................................................................ 443
11.3.6 Einen Schlagschatten mit der Eigenschaft »box-shadow« hinzufügen ............ 446
11.3.7 Runde Ecken mit der CSS3-Eigenschaft »border-radius« hinzufügen ............... 447
11.4 Zusammenfassung ............................................................................................................................. 449
12 CSS-Positionierung 451
12.1 Positionierung mit der CSS-Eigenschaft »position« ............................................................ 451
12.1.1 Die statische Positionierung (»position: static«) ....................................................... 452
12.1.2 Platzierung von Elementen mit »top«, »right«, »bottom« und »left« ............... 454
12.1.3 Die relative Positionierung (»position: relative«) ...................................................... 454
12.1.4 Die absolute Positionierung (»position: absolute«) ................................................. 457
12.1.5 Die fixe Positionierung (»position: fixed«) .................................................................. 459
12.2 Übereinanderstapeln regeln mit »z-index« ............................................................................ 462
12.3 Schwebende Boxen für die Positionierung mit »float« ..................................................... 472
12.3.1 Elemente mit »float« nebeneinander anordnen ....................................................... 474
12.3.2 Umfließen der Elemente mit »clear« aufheben ........................................................ 477
12.3.3 Probleme beim Eltern-Element von gefloateten Elementen ................................ 481
12.3.4 Weitere essenzielle Informationen rund um »float« ............................................... 484
12.4 Die neuen flexiblen Boxen von CSS3 .......................................................................................... 486
12.4.1 Die Flexbox ausrichten ....................................................................................................... 486
12.4.2 Flexibilität der Flexbox einstellen .................................................................................. 489
12.4.3 Flexible Boxen mit fester Höhe ....................................................................................... 491
12.4.4 Die Reihenfolge der Boxen bestimmen ........................................................................ 492
12.5 Zusammenfassung ............................................................................................................................. 493
13 Das Layout mit CSS gestalten 495
13.1 Exkurs: Was bedeutet feste und flexible Breite? .................................................................. 496
13.1.1 Ein Layout mit fester Breite .............................................................................................. 496
13.1.2 Ein Layout mit flexibler Breite ......................................................................................... 496
13.2 Ein zweispaltiges Layout erstellen .............................................................................................. 497
13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung .......... 497
13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung .............. 502
13.2.3 Den (Haupt)inhalt horizontal zentrieren ..................................................................... 503
4158-8.book Seite 14 Dienstag, 30. August 2016 1:58 13
Inhalt
15
13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen ............................................... 505
13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen ........................ 507
13.2.6 Zweispaltiges festes Layout mit »float« erstellen .................................................... 509
13.2.7 Zweispaltiges Layout mit »display: table« erstellen ................................................ 510
13.3 Ein dreispaltiges Layout erstellen ............................................................................................... 512
13.3.1 Dreispaltiges flexibles Layout mit »float« erstellen ................................................ 513
13.3.2 Dreispaltiges Layout mit »float« mit festen Seiten erstellen ............................... 515
13.3.3 Ungleich lange Spalten einfärben ................................................................................. 517
13.3.4 Mit dem Layout das komplette Webbrowser-Fenster ausfüllen ......................... 527
13.3.5 Dreispaltiges Layout mit Flexboxen erstellen (CSS3) .............................................. 528
13.4 Responsive Layouts mit Media Queries erstellen ................................................................ 531
13.4.1 Die Verwendung von Medientypen mit CSS 2 ........................................................... 532
13.4.2 Mächtige Medienabfragen mit den Media Queries von CSS3 ............................. 534
13.4.3 Einbinden und Anwenden von Media Queries .......................................................... 535
13.4.4 Der grundlegende Aufbau von einfachen Media Queries ..................................... 536
13.4.5 Welche Medienmerkmale können abgefragt werden? .......................................... 538
13.4.6 Anwendungsbeispiel .......................................................................................................... 540
13.4.7 Die mobile Navigation anpassen ................................................................................... 554
13.4.8 Bilder reaktionsfähig machen ......................................................................................... 555
13.4.9 Das passende Bild mit <picture> laden ........................................................................ 565
13.4.10 Weitere Anpassungen ........................................................................................................ 567
13.5 Das Layout mit einem Raster (Grid) erstellen ........................................................................ 571
13.5.1 Das Grundprinzip von Rasterlayouts ............................................................................ 572
13.5.2 Eigenes 960-Pixel-Rasterlayout auf 12 Spalten erstellen ...................................... 576
13.5.3 Das erstellte Rasterlayout überprüfen ......................................................................... 579
13.5.4 Layout erstellen einfach gemacht .................................................................................. 579
13.5.5 Das Rasterlayout reaktionsfähig machen ................................................................... 590
13.5.6 Stabilisieren mit »border-box« ....................................................................................... 595
13.5.7 Ein flexibles Raster erstellen ............................................................................................ 597
13.5.8 Fertige Grid-Systeme .......................................................................................................... 598
13.5.9 Fertiges Grid-System integrieren ................................................................................... 599
13.6 Verhalten von HTML-Elementen mit »display« ändern .................................................... 603
13.7 Zusammenfassung und »Da geht noch (viel) mehr …« ..................................................... 605
14 Stylen mit CSS 607
14.1 Textgestaltung mit CSS .................................................................................................................... 607
14.1.1 Schriftarten mit »font-family« auswählen ................................................................. 608
4158-8.book Seite 15 Dienstag, 30. August 2016 1:58 13
Inhalt
16
14.1.2 Schriftarten mit Webfonts liefern – »@font-face« .................................................. 613
14.1.3 Symbole mit Iconfonts verwenden ................................................................................ 619
14.1.4 Schriftgröße mit »font-size« festlegen ......................................................................... 624
14.1.5 Kursive und fette Schriften mit »font-style« und »font-weight« ........................ 629
14.1.6 Kapitälchen mit »font-variant« erstellen .................................................................... 630
14.1.7 Zeilenabstand mit »line-height« definieren ............................................................... 631
14.1.8 Die Kurzschreibweise der Schriftformatierung mit »font« ................................... 633
14.1.9 Buchstaben- und Wortabstände mit »letter-spacing« und »word-spacing«
festlegen ................................................................................................................................. 634
14.1.10 Die Textausrichtung mit »text-align« festlegen ....................................................... 635
14.1.11 Die vertikale Ausrichtung mit »vertical-align« einstellen ...................................... 636
14.1.12 Den Text mit »text-indent« einrücken ......................................................................... 638
14.1.13 Unter- und Durchstreichen von Text mit »text-decoration« ................................ 639
14.1.14 Groß- und Kleinschreibung von Text mit »text-transform« ................................. 640
14.1.15 Dem Text Schlagschatten mit »text-shadow« hinzufügen (CSS3) ..................... 641
14.2 Listen mit CSS gestalten ................................................................................................................... 643
14.2.1 Aufzählungspunkte mit »list-style-type« anpassen ................................................ 643
14.2.2 Bilder als Aufzählungszeichen mit »list-style-image« verwenden ..................... 644
14.2.3 Aufzählungsliste mit »list-style-position« positionieren ....................................... 645
14.2.4 Die Kurzschreibweise »list-style« für die Listengestaltung ................................... 646
14.2.5 Navigation und Menüs mit Listen erstellen ................................................................ 647
14.3 Schönere Tabellen mit CSS gestalten ......................................................................................... 653
14.3.1 Tabellen mit fester Breite erstellen ................................................................................ 654
14.3.2 Allgemeines Rezept: Tabelle schön mit CSS gestalten ............................................ 655
14.3.3 Kollabierende Rahmen für Tabellenzellen mit »border-collapse« ...................... 656
14.3.4 Abstand zwischen den Zellen mit »border-spacing« einstellen .......................... 657
14.3.5 Leere Tabellenzellen anzeigen mit »empty-cells« .................................................... 658
14.3.6 Tabellenbeschriftung mit »caption-side« positionieren ........................................ 660
14.4 Bilder und Grafiken mit CSS gestalten ...................................................................................... 660
14.4.1 Bilder und Grafiken mit »width« und »height« anpassen ..................................... 660
14.4.2 Grafiken mit der CSS-Eigenschaft »clip« beschneiden ............................................ 663
14.4.3 Sprites mit CSS verwenden ............................................................................................... 665
14.4.4 Eine einfache Bildergalerie mit CSS gestalten ........................................................... 667
14.5 Elemente transformieren mit CSS3 ............................................................................................. 671
14.5.1 HTML-Elemente skalieren mit »transform: scale()« ................................................. 672
14.5.2 HTML-Elemente drehen mit »transform: rotate()« .................................................. 673
14.5.3 HTML-Elemente neigen mit »transform: skew()« ..................................................... 674
14.5.4 HTML-Elemente verschieben mit »transform: translate()« ................................... 674
14.5.5 Verschiedene Transformationen kombinieren .......................................................... 675
14.5.6 Es geht auch mit anderen HTML-Elementen .............................................................. 676
4158-8.book Seite 16 Dienstag, 30. August 2016 1:58 13
Inhalt
17
14.6 Übergänge mit CSS3 erstellen ...................................................................................................... 677
14.7 HTML-Formulare mit CSS stylen .................................................................................................. 678
14.7.1 Ein HTML-Formular ordentlich strukturieren ............................................................. 679
14.7.2 Ausrichten der Formularelemente mit CSS ................................................................ 682
14.7.3 Gestalten der Formularelemente mit CSS .................................................................. 684
14.8 Zusammenfassung ............................................................................................................................. 687
15 Testen und Organisieren 689
15.1 CSS und die Webbrowser ................................................................................................................ 690
15.1.1 Acid-Webbrowser-Test ...................................................................................................... 690
15.1.2 CSS3-Webbrowser-Test ..................................................................................................... 691
15.1.3 CSS3 in der Praxis ................................................................................................................ 692
15.2 Webseiten mit CSS in verschiedenen Größen betrachten ............................................... 692
15.3 Zentrales Stylesheet einrichten ................................................................................................... 695
15.4 Eingebaute Stilvorgaben des Webbrowsers und CSS-Reset ............................................ 698
15.5 Normalisierung – die Alternative zum CSS-Reset ................................................................ 699
15.6 Die neuen HTML5-Elemente mit CSS stylen ........................................................................... 700
15.7 Conditional Comments für den alten IE ................................................................................... 703
15.7.1 Webbrowser-Sniffer ........................................................................................................... 704
15.8 Modernizr – Fähigkeiten des Webbrowsers testen ............................................................ 705
15.9 caniuse.com – kann ich das verwenden? ................................................................................. 707
15.10 Entwickler-Tools des Webbrowsers ........................................................................................... 708
15.11 Zusammenfassung ............................................................................................................................. 711
16 Eine kurze Einführung in JavaScript 713
16.1 Was ist JavaScript? ............................................................................................................................. 714
16.2 Laufzeitumgebungen für JavaScript .......................................................................................... 716
16.3 JavaScript-Programme schreiben und ausführen ................................................................ 716
16.3.1 JavaScript-Umgebung und Web-Konsole verwenden ............................................ 716
16.3.2 Das »console«-Objekt ......................................................................................................... 718
16.3.3 Den JavaScript-Code mit Anmerkungen kommentieren ....................................... 719
4158-8.book Seite 17 Dienstag, 30. August 2016 1:58 13
Inhalt
18
16.4 Die Verwendung von Variablen in JavaScript ........................................................................ 720
16.4.1 Konstanten ............................................................................................................................. 722
16.4.2 Strikter Modus mit "use strict" ........................................................................................ 723
16.5 Übersicht über die JavaScript-Datentypen .............................................................................. 723
16.5.1 Number-Datentyp (Zahlen) .............................................................................................. 724
16.5.2 String-Datentyp (Zeichenketten) .................................................................................... 725
16.5.3 Boolean-Datentyp ................................................................................................................ 727
16.5.4 Undefined- und Null-Datentyp ....................................................................................... 727
16.5.5 Objekte .................................................................................................................................... 728
16.5.6 Datentypen konvertieren .................................................................................................. 728
16.6 Bedingte Anweisungen in JavaScript ......................................................................................... 730
16.6.1 true« oder »false«: boolescher Wahrheitswert ......................................................... 731
16.6.2 Die verschiedenen Vergleichsoperatoren in JavaScript verwenden ................... 732
16.6.3 Die »if«-Verzweigung verwenden .................................................................................. 733
16.6.4 Logische Operatoren ........................................................................................................... 734
16.6.5 Mehrfachverzweigung mit »switch« ............................................................................ 736
16.7 Programmanweisungen mehrmals wiederholen mit Schleifen .................................... 737
16.7.1 Inkrement- und Dekrementoperator ............................................................................ 737
16.7.2 Die kopfgesteuerte »for«-Schleife .................................................................................. 738
16.7.3 Die kopfgesteuerte »while«-Schleife ............................................................................ 740
16.7.4 Die fußgesteuerte »do-while«-Schleife ........................................................................ 740
16.7.5 Den Anweisungsblock mit »break« beenden ............................................................. 741
16.7.6 Mit »continue« zum Schleifenanfang springen ........................................................ 741
16.8 Arrays ........................................................................................................................................................ 742
16.8.1 Zugriff auf die einzelnen Elemente in einem Array .................................................. 742
16.8.2 Einem Array neue Elemente hinzufügen ..................................................................... 743
16.8.3 Elemente durchlaufen mit der »for/in«- oder »for/of«-Schleife ......................... 744
16.9 Arithmetische Operatoren zum Rechnen in JavaScript ..................................................... 745
16.10 Eigene Funktionen in JavaScript erstellen ............................................................................... 747
16.10.1 Die verschiedenen Möglichkeiten, eine Funktion in JavaScript zu
definieren ................................................................................................................................ 747
16.10.2 Funktion aufrufen und Funktionsparameter ............................................................. 749
16.10.3 Rückgabewert einer Funktion .......................................................................................... 750
16.10.4 Der Gültigkeitsbereich von Variablen in einer Funktion ......................................... 751
16.10.5 Arrow-Funktionen ................................................................................................................ 752
16.10.6 Rest-Parameter – beliebige Anzahl von Funktionsparametern ........................... 754
16.11 Zusammenfassung ............................................................................................................................. 755
4158-8.book Seite 18 Dienstag, 30. August 2016 1:58 13
Inhalt
19
17 Objekte in JavaScript 757
17.1 Benutzerdefinierte Objekte in JavaScript ................................................................................ 757
17.1.1 Was sind Objekte genau? ................................................................................................. 758
17.1.2 Die Objekt-Eigenschaften von JavaScript .................................................................... 760
17.1.3 Die Methoden von Objekten ............................................................................................ 761
17.1.4 Verschiedene Möglichkeiten, neue Objekte zu erzeugen ...................................... 761
17.1.5 Das Schlüsselwort »this« .................................................................................................. 764
17.2 Vordefinierte Objekte von JavaScript ........................................................................................ 765
17.2.1 Das oberste Objekt »Object« ........................................................................................... 766
17.2.2 Objekte für die primitiven Datentypen Number, String und Boolean ............... 766
17.2.3 Array-Objekt .......................................................................................................................... 768
17.2.4 Reguläre Ausdrücke (RegExp-Objekte) ......................................................................... 769
17.2.5 »Function«-Objekt ............................................................................................................... 770
17.2.6 »Date«-Objekt ....................................................................................................................... 770
17.2.7 »Math«-Objekt ..................................................................................................................... 770
17.3 Einbinden von JavaScript in HTML .............................................................................................. 771
17.3.1 »Hallo Web-Browser« – Ausgabe von JavaScripts .................................................... 771
17.3.2 Das JavaScript im Kopfbereich <head> des HTML-Dokuments ........................... 775
17.3.3 Das JavaScript im Körper <body> des HTML-Dokuments ...................................... 776
17.3.4 Ein externes JavaScript mit dem »script«-Element einbinden ............................. 777
17.3.5 Die Ausführung eines JavaScript-Codes ...................................................................... 778
17.3.6 Das »noscript«-Element für JavaScript-Verweigerer ............................................... 779
17.4 Browser-Objekte bzw. Host-Objekte der Laufzeitumgebung ........................................ 780
17.4.1 Ganz oben ist das »window«-Objekt ............................................................................ 781
17.4.2 Das »screen«-Objekt für die Angaben zum Bildschirm .......................................... 787
17.4.3 Das »location«-Objekt für den Zugriff auf die URI ................................................... 788
17.4.4 Das »history«-Objekt für den Browserverlauf ........................................................... 789
17.4.5 Das »navigator«-Objekt für verschiedene Informationen ..................................... 790
17.5 Zusammenfassung ............................................................................................................................. 791
18 HTML DOM und DOM-Manipulation 793
18.1 Einführung in das DOM eines HTML-Dokuments ................................................................ 794
18.2 Das »document«-Objekt ................................................................................................................. 795
18.3 Die Programmierschnittstelle von HTML DOM ..................................................................... 796
4158-8.book Seite 19 Dienstag, 30. August 2016 1:58 13
Inhalt
20
18.4 Nach bestimmten HTML-Elementen suchen .......................................................................... 797
18.4.1 Ein HTML-Element mit einem bestimmten »id«-Attribut suchen ...................... 797
18.4.2 HTML-Elemente mit einem bestimmten Tag-Namen suchen ............................. 799
18.4.3 HTML-Elemente mit einem bestimmten »class«-Attribut suchen ..................... 801
18.4.4 HTML-Elemente mit einem bestimmten »name«-Attribut suchen ................... 801
18.4.5 »querySelector()« und »querySelectorAll()« verwenden ........................................ 803
18.4.6 Weitere Objekt- und Eigenschaftensammlungen .................................................... 805
18.5 HTML-Element, -Attribut oder den Style ändern .................................................................. 808
18.5.1 Fallstricke bei der Anwendung von »document.write()« ........................................ 809
18.5.2 Den Inhalt von HTML-Elementen mit »innerHTML« ändern ................................ 809
18.5.3 Den Wert eines HTML-Attributs ändern ...................................................................... 811
18.5.4 Den Style (CSS) eines HTML-Elements ändern ........................................................... 812
18.6 Auf JavaScript-Events reagieren ................................................................................................... 814
18.7 Mit dem Event-Handler die Events behandeln ...................................................................... 815
18.7.1 Event-Handler als HTML-Attribut im HTML-Element einrichten ......................... 815
18.7.2 Event-Handler als Eigenschaft eines Objekts einrichten ........................................ 816
18.7.3 Einen Event-Handler mit »addEventListener()« einrichten ................................... 817
18.8 Gängige JavaScript-Events in der Übersicht ........................................................................... 819
18.8.1 Die JavaScript-Events der Benutzeroberfläche (Window-Events) ....................... 819
18.8.2 JavaScript-Events, die in Verbindung mit der Maus auftreten können ............. 821
18.8.3 JavaScript-Events für Geräte mit einem Touchscreen ............................................. 822
18.8.4 JavaScript-Events, die in Verbindung mit der Tastatur auftreten ....................... 823
18.8.5 JavaScript-Events für HTML-Formulare ........................................................................ 824
18.8.6 JavaScript-Events für die neuen HTML5-APIs ............................................................. 824
18.9 Weitere Informationen zu Events mit dem »event«-Objekt ........................................... 824
18.10 Standardaktion von Events unterdrücken ............................................................................... 827
18.11 Der Event-Fluss (Event-Propagation) ......................................................................................... 829
18.11.1 Mehr zur Bubbling-Phase .................................................................................................. 829
18.11.2 Bubbling mit der Methode »stopPropagation()« abbrechen ................................ 831
18.11.3 Eingreifen in den Event-Fluss während der Capturing-Phase .............................. 832
18.11.4 Mehr Informationen zu Capturing-Phase und Bubbling-Phase ........................... 833
18.12 HTML-Elemente hinzufügen, ändern, entfernen .................................................................. 834
18.12.1 Neues HTML-Element und Inhalt erzeugen und hinzufügen ............................... 835
18.12.2 HTML-Elemente noch gezielter im DOM-Baum ansteuern ................................... 836
18.12.3 Ein neues HTML-Element gezielter dem DOM-Baum hinzufügen ...................... 841
18.12.4 Vorhandenes HTML-Element vom DOM-Baum löschen ........................................ 842
18.12.5 Ein HTML-Element im DOM-Baum durch ein anderes ersetzen .......................... 843
18.12.6 Einen Knoten oder ganze Fragmente des DOM-Baumes klonen ......................... 845
4158-8.book Seite 20 Dienstag, 30. August 2016 1:58 13
Inhalt
21
18.12.7 Verschiedene Methoden, um die HTML-Attribute zu manipulieren .................. 846
18.13 HTML-Formulare und JavaScript .................................................................................................. 849
18.13.1 Texteingabefelder mit JavaScript einlesen ................................................................. 849
18.13.2 Auswahllisten mit JavaScript einlesen ......................................................................... 851
18.13.3 Radioschaltflächen und Checkboxen mit JavaScript einlesen ............................. 852
18.13.4 Schaltflächen mit JavaScript abfangen ........................................................................ 854
18.13.5 Die Fortschrittsanzeige <progress> mit JavaScript steuern .................................. 855
18.14 Zusammenfassung ............................................................................................................................. 857
19 Einführung in die HTML5-JavaScript-APIs 859
19.1 Video- und Audio-Media-API ......................................................................................................... 860
19.1.1 Ein Video mit JavaScript und der Media-API steuern .............................................. 861
19.1.2 Eine Audiodatei mit JavaScript und der Media-API steuern ................................. 864
19.2 Zeichnen mit der Canvas-2D-API ................................................................................................. 866
19.2.1 Auf einem <canvas>-Element zeichnen ...................................................................... 866
19.2.2 Methoden, mit denen auf das <canvas>-Element gezeichnet wird ................... 868
19.2.3 Bilder mit <canvas> kopieren und manipulieren ...................................................... 870
19.2.4 Eigene (Wrapper-)Funktionen für <canvas> erstellen ............................................ 872
19.2.5 Den »CanvasRenderingContext2D« erweitern ......................................................... 875
19.2.6 Fertige <canvas>-Bibliotheken im Überblick ............................................................. 876
19.2.7 <canvas> gegen <svg> oder <canvas> oder <svg>? ................................................. 877
19.2.8 Weitere Hinweise zu <canvas> ....................................................................................... 878
19.3 Den Standort ermitteln mit der Geolocation-API ................................................................ 878
19.3.1 Die Geolocation-API in einem HTML-Dokument verwenden ............................... 880
19.3.2 Fehler und Zugriffsrechte der Geolocation-API behandeln ................................... 882
19.3.3 Feintuning mit weiteren Optionen der Geolocation-API ....................................... 884
19.3.4 Die Position des Benutzers dauerhaft überwachen ................................................. 886
19.3.5 Die Position des Benutzers auf einer Karte anzeigen .............................................. 887
19.3.6 Eine einfache Navigation vom aktuellen Standort erstellen ................................ 891
19.4 Ziehen und Fallenlassen mit der Drag & Drop-API .............................................................. 892
19.4.1 Ein HTML-Element mit »draggable« ziehbar machen ............................................ 892
19.4.2 Events, die beim Drag & Drop auftreten können ..................................................... 893
19.4.3 Mit dem Ziehen von Elementen starten ...................................................................... 894
19.4.4 Die Daten zum Ziehen behandeln ................................................................................. 894
19.4.5 Den Platz zum Fallenlassen festlegen .......................................................................... 895
19.4.6 Die fallen gelassenen Daten verarbeiten .................................................................... 896
19.4.7 Andere Events während des Drag & Drop-Vorgangs behandeln ........................ 896
4158-8.book Seite 21 Dienstag, 30. August 2016 1:58 13
Inhalt
22
19.4.8 Das komplette Beispiel in der Übersicht ...................................................................... 897
19.4.9 Weitere Hinweise zur Drag & Drop-API ....................................................................... 900
19.5 Offlinedaten zur Verfügung stellen ............................................................................................ 901
19.5.1 Application Cache – das Cache Manifest ..................................................................... 901
19.5.2 Web Storage – Datenbank für Offlineanwendungen ............................................. 906
19.5.3 Weitere Offlinetechnologien im Überblick ................................................................. 910
19.5.4 Die Internetverbindung des Benutzers prüfen .......................................................... 911
19.6 Web Workers – die Helfer im Hintergrund .............................................................................. 912
19.7 Aktualisieren ohne Anfrage mit Server Sent Events ........................................................... 921
19.8 Weitere interessante APIs im Schnelldurchlauf .................................................................... 924
19.8.1 Kommunikation in Echtzeit mit den WebSockets .................................................... 925
19.8.2 Sprach- und Videotelefonie mit WebRTC .................................................................... 927
19.8.3 3D-Grafiken und Spiele mit WebGL ............................................................................... 928
19.8.4 Den kompletten Bildschirm mit der Fullscreen API verwenden ........................... 928
19.8.5 Der Umgang mit lokalen Dateien mit der File API .................................................... 932
19.9 Zusammenfassung ............................................................................................................................. 935
20 Eine Einführung in Ajax und jQuery 937
20.1 Eine Einführung in die Ajax-Programmierung ....................................................................... 937
20.1.1 Ein einfaches Ajax-Beispiel bei der Ausführung ........................................................ 939
20.1.2 Das »XMLHttpRequest«-Objekt erzeugen ................................................................... 941
20.1.3 Eine Anfrage an den Server stellen ................................................................................ 942
20.1.4 Daten mitsenden ................................................................................................................. 943
20.1.5 Den Status des »XMLHttpRequest«-Objekts ermitteln .......................................... 944
20.1.6 Die Antwort vom Server weiterverarbeiten ................................................................ 946
20.1.7 Das Ajax-Beispiel bei der Ausführung ........................................................................... 946
20.1.8 Ein komplexeres Ajax-Beispiel mit XML und DOM ................................................... 947
20.1.9 Das JSON-Datenformat mit Ajax .................................................................................... 953
20.2 Einführung in die JavaScript-Bibliothek jQuery .................................................................... 958
20.2.1 jQuery in das HTML-Dokument einbinden .................................................................. 959
20.2.2 Ein Grundgerüst und die grundlegende Verwendung von jQuery ...................... 960
20.2.3 Die komfortablen jQuery-Selektoren ............................................................................ 961
20.2.4 Die jQuery-Events ................................................................................................................ 964
20.2.5 Inhalte und HTML-Attribute mit jQuery abfragen und setzen ............................. 966
20.2.6 HTML-Elemente mit jQuery hinzufügen und löschen ............................................. 970
20.2.7 CSS mit jQuery manipulieren ........................................................................................... 975
20.2.8 Verschiedene jQuery-Effekte und -Animationen ...................................................... 978
4158-8.book Seite 22 Dienstag, 30. August 2016 1:58 13
Inhalt
23
20.2.9 jQuery und Ajax zusammen verwenden ..................................................................... 987
20.2.10 Weitere jQuery-Plug-ins verwenden ............................................................................. 990
20.2.11 Letzte Hinweise zu jQuery ................................................................................................ 990
20.3 Zusammenfassung ............................................................................................................................. 991
21 Fertige CSS-Frameworks 993
21.1 Übersicht über beliebte CSS-Frameworks ............................................................................... 994
21.2 Das Bootstrap-Framework .............................................................................................................. 995
21.2.1 Twitter Bootstrap herunterladen und integrieren ................................................... 995
21.2.2 Das Layout mit dem Bootstrap-Framework erstellen ............................................. 998
21.2.3 Die Komponenten des Bootstrap-Frameworks verwenden .................................. 1011
21.2.4 JavaScript-Erweiterungen von Bootstrap einbauen ................................................ 1019
21.2.5 Bootstrap an die eigenen Bedürfnisse anpassen ...................................................... 1024
21.3 YAML 4 – das CSS-Framework ....................................................................................................... 1024
21.3.1 Das nackte HTML-Grundgerüst ...................................................................................... 1025
21.3.2 YAML dem Projekt hinzufügen ........................................................................................ 1027
21.3.3 Layoutmodul wählen ......................................................................................................... 1029
21.3.4 Aufteilen des Inhalts mit Gridmodulen ....................................................................... 1033
21.3.5 Elemente mit YAML untereinanderstellen .................................................................. 1037
21.3.6 Testen Sie YAML ................................................................................................................... 1040
21.4 Exkurs zu CSS-Präprozessoren ...................................................................................................... 1040
21.4.1 Die Stylesheet-Sprache Less ............................................................................................. 1041
21.4.2 Die Stylesheet-Sprache Sass ............................................................................................ 1045
21.5 Zusammenfassung ............................................................................................................................. 1046
Anhang 1049
A HTML-Referenz .................................................................................................................................... 1051
B CSS-Referenz ......................................................................................................................................... 1149
C JavaScript- und Browser-Objekte ................................................................................................ 1217
D HTML-/WYSIWYG-/CSS-Editoren ................................................................................................ 1243
Index ....................................................................................................................................................................... 1247
4158-8.book Seite 23 Dienstag, 30. August 2016 1:58 13
Index
1247
Index
-- -Operator;++-Operator ............................................ 737
:hover
mobile Geräte ............................................................ 353
! (logisches NICHT) ........................................................ 735
&& (logisches UND) ..................................................... 734
> ..................................................................................... 174
< ....................................................................................... 174
..................................................................... 124, 180
" ................................................................................ 174
­ .................................................................................. 123
++-Operator ..................................................................... 737
<!-- … --> .......................................................................... 1053
|| (logisches ODER) ........................................................ 734
960-Pixel-Rasterlayout ............................................... 576
A
Absatztext <p> ............................................................... 120
Acid-Webbrowser-Test ................................................ 690
Ajax ..................................................................................... 937
Callback-Funktion .................................................... 944
DOM ............................................................................... 947
HTTP-Request ............................................................. 942
HTTP-Response .......................................................... 946
jQuery ............................................................................ 987
JSON ............................................................................... 953
onreadystatechange ..................................... 944, 950
open() ............................................................................ 942
readyState ................................................................... 944
responseText .............................................................. 946
responseXML .................................................... 946, 951
send() ............................................................................. 942
status ............................................................................. 946
Status ermitteln ........................................................ 944
XMLHttpRequest-Objekt ....................................... 941
alert() .................................................................................. 773
Allein stehende Tags ...................................................... 63
Animationen
jQuery ............................................................................ 978
Anker .................................................................................. 205
#ankername .................................................................... 205
Application Cache ......................................................... 901
Cache Manifest .......................................................... 902
Applikationsserver ......................................................... 38
Array-Objekt ................................................................. 1228
ASCII-Codierung ............................................................ 171
Attribute
required ........................................................................ 288
Audios
abspielen ...................................................................... 251
Aufzählungspunkte ..................................................... 132
Autorenstylesheet ........................................................ 389
Autovervollständigung .............................................. 284
B
background-position ................................................... 666
background-size ............................................................ 561
Benannte Farben ........................................................... 400
Benutzerstylesheet ...................................................... 389
Beschreibungsliste � Definitionsliste
Bilder
beschneiden ................................................................ 663
beschriften .................................................................. 220
einbinden ..................................................................... 212
gestalten ...................................................................... 660
mit CSS skalieren ...................................................... 660
responsiv ...................................................................... 555
skalieren ....................................................................... 218
Bildergalerie erstellen ................................................. 667
Blog ........................................................................................ 31
BOM .................................................................................... 780
history ........................................................................... 789
location ........................................................................ 788
navigator ..................................................................... 790
screen ............................................................................ 787
window ......................................................................... 781
Boolean-Objekt ............................................................ 1233
Bootstrap .......................................................................... 995
JavaScript-Erweiterungen ................................... 1019
Komponenten .......................................................... 1011
Layout ........................................................................... 998
border-box ....................................................................... 595
CSS3 ................................................................................ 421
Box-Modell ...................................................................... 409
alternatives Box-Modell (CSS3) .......................... 421
box-sizing: border-box ........................................... 421
klassisches Box-Modell .......................................... 410
Box-Modell � Kastenmodell
box-sizing
border-box .................................................................. 596
content-box ................................................................ 423
4158-8.book Seite 1247 Dienstag, 30. August 2016 1:58 13
Index
1248
Breakpoints ..................................................................... 570
Browser-Objekte .......................................................... 1235
history ......................................................................... 1240
location ...................................................................... 1241
navigator ................................................................... 1235
screen .......................................................................... 1236
window ....................................................................... 1237
Browserstylesheet ........................................................ 389
Buchstabenabstand ..................................................... 634
C
Cache Manifest .............................................................. 901
Camel Case ....................................................................... 813
caniuse.com .................................................................... 707
Canvas ...................................................................... 242, 866
Bibliotheken ............................................................... 877
Bilder kopieren .......................................................... 870
Bilder manipulieren ................................................ 870
getContext .................................................................. 866
Methoden .................................................................... 868
Rendering Context ................................................... 866
clear .................................................................................... 477
both ....................................................................... 478, 584
left .................................................................................. 478
none ............................................................................... 478
right ............................................................................... 478
cm ........................................................................................ 398
Collapsing Margins ...................................................... 416
Conditional Comments ..................................... 703, 997
CSS (Cascading Style Sheets) ............................. 41, 307
alternatives Stylesheet ........................................... 320
border-box .................................................................. 421
Code kommentieren ............................................... 313
Codeformatierung ................................................... 314
CSS Level 1 (CSS 1) ...................................................... 308
CSS Level 2 (CSS 2) .................................................... 309
CSS Level 3 (CSS3) ...................................................... 309
Einbinden in HTML .................................................. 315
jQuery ........................................................................... 975
Kaskade ............................................................... 320, 388
Kombinatoren ......................................................... 1202
manipulieren ............................................................. 812
Media Queries ............................................................ 326
Selektoren .................................................................... 327
Selektoren (Übersicht) .......................................... 1201
style-Attribut .............................................................. 315
validieren ..................................................................... 692
Vererbung ................................................................... 381
CSS3 .................................................................................... 692
CSS3-Webbrowser-Test ............................................... 691
CSS-Eigenschaften
!important ................................................................... 390
align-content ............................................... 1168, 1169
align-items ............................................................... 1169
align-self .................................................................... 1170
animation ................................................................. 1191
animation-delay .................................................... 1192
animation-direction ............................................. 1192
animation-duration ............................................. 1191
animation-iteration-count ................................ 1191
animation-name .................................................... 1191
animation-play-state ........................................... 1192
animation-timing-function ............................... 1192
backface-visibility .................................................. 1188
background ........................................... 434, 438, 1150
background-attachment ................. 434, 438, 1150
background-clip ......................................... 1150, 1151
background-color ............................... 433, 434, 1151
background-image ............................. 434, 561, 1151
background-origin ...................................... 441, 1152
background-position ............. 434, 438, 1152, 1153
background-repeat ............................ 434, 436, 1153
background-size ...................... 440, 561, 1153, 1154
background-size: contain ...................................... 563
background-size: cover .......................................... 563
benannte Farben ....................................................... 400
border ...................................................... 413, 429, 1154
border-bottom .............................................. 413, 1156
border-bottom-color ............................................ 1157
border-bottom-left-radius ....................... 448, 1159
border-bottom-right-radius .................... 448, 1159
border-bottom-style ............................................. 1157
border-bottom-width ........................................... 1157
border-collapse ............................................. 656, 1184
border-color ................................................... 430, 1156
border-image ................................................. 432, 1158
border-image-outset ............................................ 1158
border-image-repeat .................................. 433, 1159
border-image-slice ...................................... 433, 1158
border-image-source ............................................ 1158
border-image-width ................................... 433, 1158
border-left ....................................................... 413, 1156
border-left-color ..................................................... 1157
border-left-style ...................................................... 1157
border-left-width .................................................... 1157
border-radius ................................................. 447, 1159
border-right .................................................... 413, 1157
border-right-color .................................................. 1157
border-right-style ................................................... 1157
border-right-width ................................................ 1157
border-spacing .............................................. 657, 1184
4158-8.book Seite 1248 Dienstag, 30. August 2016 1:58 13
Index
1249
border-style ..................................................... 430, 1155
border-top ....................................................... 413, 1157
border-top-color .................................................... 1157
border-top-left-radius ................................. 448, 1159
border-top-right-radius ............................. 448, 1159
border-top-style ..................................................... 1157
border-top-width ................................................... 1157
border-width ................................................... 430, 1155
bottom .............................................................. 454, 1160
box-shadow .................................................... 446, 1160
box-sizing .......................................................... 423, 595
box-sizing: border-box ........................................... 423
caption-side .................................................... 660, 1184
clear .......................................................... 477, 505, 1161
clip ...................................................................... 663, 1161
clip-path .................................................................... 1161
color ............................................................................ 1149
column-count ......................................................... 1198
column-fill ................................................................ 1198
column-gap .............................................................. 1198
column-rule ............................................................. 1199
column-rule-color ................................................. 1199
column-rule-style ...................................... 1199, 1200
column-rule-width ................................................ 1200
columns ..................................................................... 1197
column-width .......................................................... 1198
content .............................................................. 364, 1194
counter-increment .................................... 1185, 1186
counter-reset ........................................................... 1186
direction .................................................................... 1183
display ..................................................... 510, 603, 1162
display: block ................................................... 546, 682
display: flex ....................................................... 486, 528
display: grid ................................................................ 603
display: inline ................................................... 546, 649
display: inline-block ................................................ 682
display: table .................................................... 510, 522
display: table-cell ............................................ 510, 522
empty-cells ...................................................... 658, 1185
Farbangaben .............................................................. 400
Farbverlauf hinzufügen ......................................... 443
flex ...................................................................... 489, 1170
flex-basis .......................................................... 489, 1171
flex-direction .................................................. 486, 1172
flex-flow ..................................................................... 1171
flex-grow .......................................................... 489, 1170
flex-shrink ........................................................ 489, 1171
float .................... 472, 505, 509, 513, 515, 649, 1162
font ......................................................... 633, 1179, 1180
font-family .......................................... 608, 1181, 1182
font-size ............................................................ 624, 1181
font-size-adjust ....................................................... 1182
font-stretch ..................................................... 635, 1182
font-style .......................................................... 629, 1180
font-variant .................................................... 630, 1180
font-weight ..................................................... 629, 1180
height ...................................................... 411, 660, 1162
inherit ........................................................................... 386
initial ............................................................................. 388
justify-content ............................................. 1168, 1169
Kurzschreibweise ...................................................... 406
left ...................................................................... 454, 1160
letter-spacing ................................................. 634, 1173
line-height ........................................... 631, 1173, 1181
list-style ............................................................ 646, 1186
list-style-image ............................................. 644, 1188
list-style-position ......................................... 645, 1188
list-style-type ................................................. 643, 1187
margin .............................................................. 414, 1163
margin-bottom ............................................. 414, 1163
margin-left ...................................................... 414, 1163
margin-right .................................................. 414, 1163
margin-top ...................................................... 414, 1163
Maßeinheiten ............................................................ 397
max-height ............................................................... 1162
max-width ................................... 507, 555, 557, 1167
min-height ................................................................ 1162
min-width ........................................................ 507, 1167
name="viewport" ..................................................... 550
opacity .............................................................. 441, 1149
order .................................................................. 492, 1173
orphans ...................................................................... 1200
outline ......................................................................... 1195
outline-color ............................................................. 1196
outline-offset ........................................................... 1196
outline-style ............................................................. 1196
outline-width ........................................................... 1196
overflow ..................................... 483, 515, 1163, 1164
overflow-x ..................................................... 1163, 1164
overflow-y ..................................................... 1163, 1164
padding ............................................................ 412, 1164
padding-bottom ........................................... 413, 1165
padding-left .................................................... 413, 1165
padding-right ................................................ 413, 1165
padding-top .................................................... 413, 1165
page-break-after ......................................... 1200, 1201
page-break-before ...................................... 1200, 1201
page-break-inside .................................................. 1201
perspective ................................................................ 1189
perspective-origin .................................................. 1189
position ............................................................ 451, 1165
quotes ......................................................................... 1174
4158-8.book Seite 1249 Dienstag, 30. August 2016 1:58 13
Index
1250
resize ........................................................................... 1197
right ................................................................... 454, 1160
Schlüsselwörter (Werte) ......................................... 399
Standardwert wiederherstellen .......................... 388
table-layout .................................................... 654, 1185
tab-size ....................................................................... 1174
text-align ......................................................... 635, 1174
text-decoration ............................................. 639, 1178
text-decoration-color ........................................... 1178
text-decoration-line .............................................. 1178
text-decoration-style ............................................ 1178
text-indent ...................................................... 638, 1175
text-overflow ............................................... 1175, 1176
text-shadow ....................................... 641, 1178, 1179
text-transform ............................................... 640, 1175
top ...................................................................... 454, 1160
transform ............................................ 671, 1189, 1190
transform-origin .................................................... 1190
transform-style ....................................................... 1190
transition ......................................................... 677, 1192
transition-delay ...................................................... 1193
transition-duration ............................................... 1193
transition-property ............................................... 1193
transition-timing-function ................................ 1193
unicode-bidi ............................................................. 1183
Vererbung ................................................................... 381
Vererbung erzwingen ............................................. 386
vertical-align .................................................. 636, 1166
visibility .......................................................... 1166, 1167
white-space ............................................................... 1176
widows ........................................................................ 1201
width ....................................................... 411, 660, 1167
Winkelmaße ............................................................... 405
word-break ............................................................... 1177
word-spacing ................................................. 634, 1177
word-wrap ................................................................. 1177
Zeichenketten (Werte) ............................................ 399
z-index .................................................. 462, 1167, 1168
CSS-Frameworks ............................................................ 993
CSS-Funktionen
hsl() ................................................................................ 405
hsla() ..................................................................... 405, 441
linear-gradient() ....................................................... 443
radial-gradient() ....................................................... 445
rect() ............................................................................... 664
repeating-linear-gradient() .................................. 444
repeating-radial-gradient() .................................. 445
rgb() ............................................................................... 403
rgba() .................................................................... 403, 441
rotate() .......................................................................... 673
scale() ............................................................................ 672
skew() ............................................................................. 674
translate() .................................................................... 674
CSS-Kompression .......................................................... 697
CSS-Präprozessoren ................................................... 1040
Less .............................................................................. 1041
Sass .............................................................................. 1045
CSS-Pseudoelemente ...................................... 363, 1206
::after ............................................................................. 364
::backdrop .................................................................... 932
::before .......................................................................... 364
::first-letter .................................................................. 364
::first-line ...................................................................... 364
::selection ..................................................................... 364
CSS-Pseudoklassen .......................................... 351, 1203
:active .................................................................. 352, 686
:checked ........................................................................ 353
:disabled ....................................................................... 353
:empty ........................................................................... 356
:enabled ........................................................................ 353
:first-child ..................................................................... 357
:first-of-type ................................................................ 359
:focus .............................................................................. 352
:fullscreen ..................................................................... 931
:hover ......................................................... 352, 655, 686
:invalid ...................................................... 280, 281, 287
:lang() ............................................................................ 362
:last-child ..................................................................... 357
:last-of-type ................................................................. 359
:link ................................................................................. 351
:not() ............................................................................... 362
:nth-child() ......................................................... 357, 358
:nth-last-child() ................................................ 357, 358
:nth-last-of-type() ..................................................... 359
:nth-of-type() .............................................................. 359
:only-child .......................................................... 357, 359
:root ................................................................................ 356
:target ............................................................................ 354
:valid .......................................................... 280, 281, 287
:visited ........................................................................... 351
CSS-Regeln .............................................................. 310, 312
@charset ................................................................... 1207
@document ............................................................. 1207
@font-face ................................................................ 1207
@import ....................................... 323, 536, 695, 1207
@keyframes ..................................... 1190, 1191, 1207
@media ........................................ 325, 534, 536, 1207
@namespace ........................................................... 1207
@page ........................................................................ 1207
@supports ................................................................ 1207
CSS-Reset ........................................................................... 698
Normalisierung ......................................................... 699
4158-8.book Seite 1250 Dienstag, 30. August 2016 1:58 13
Index
1251
CSS-Selektoren ............................................................... 312
CSS-Sprites ....................................................................... 665
D
Dateinamen ....................................................................... 74
Date-Objekt ................................................................... 1225
Definitionsliste .............................................................. 137
deg ....................................................................................... 406
Deprecated ......................................................................... 41
Desktop First ................................................................... 569
display ................................................................................ 603
block ............................................................................... 604
flex .................................................................................. 604
inline .............................................................................. 604
inline-block ................................................................. 604
list-item ........................................................................ 604
none ..................................................................... 532, 604
run-in ............................................................................. 604
table ............................................................................... 604
table-row ...................................................................... 510
<div> ......................................................................... 141, 590
<!doctype> ................................................. 66, 1053, 1054
Document Object Model ............................................ 793
document.body .............................................................. 835
document.documentElement ................................. 835
document-Objekt .......................................................... 795
Dokumenten-Outline ............................... 112, 113, 114
DOM .......................................................................... 793, 794
Ajax ................................................................................ 947
document-Objekt ...................................................... 795
DOM-Baum ...................................................................... 794
DOM-Eigenschaften ..................................................... 796
childNodes ................................................................... 836
firstChild ............................................................. 836, 951
hasChildNodes ........................................................... 837
innerHTML .................................................................. 809
lastChild ....................................................................... 836
nextSibling .................................................................. 837
nodeName ................................................................... 837
nodeType ..................................................................... 837
nodeValue ......................................................... 837, 951
parentNode ................................................................. 836
previousSibling .......................................................... 837
style ................................................................................ 812
DOM-Funktionen
appendChild() ................................................... 835, 841
cloneNode() ................................................................. 845
createElement() ......................................................... 835
createTextNode() ...................................................... 835
getAttribute() ............................................................. 846
getElementById() ...................................................... 797
getElementsByClassName() ................................. 801
getElementsByName() ............................................ 801
getElementsByTagName() .................................... 799
hasAttribute() ............................................................ 846
insertBefore() ............................................................. 841
querySelector() .......................................................... 803
querySelectorAll() ..................................................... 803
removeAttribute() .................................................... 846
removeChild() ............................................................ 842
replaceChild() ............................................................. 843
setAttribute() ........................................... 809, 845, 846
write() ............................................................................ 809
DOM-Inspektor ....................................................... 58, 795
DOM-Manipulation ............................................ 793, 834
DOM-Methoden ............................................................ 796
DOM-Objektsammlung .............................................. 805
anchors ......................................................................... 807
baseURI ........................................................................ 807
body ............................................................................... 807
cookie ............................................................................ 807
doctype ......................................................................... 807
documentElement ................................................... 807
documentURI ............................................................. 807
domain ......................................................................... 807
domConfig .................................................................. 807
embeds ......................................................................... 807
forms ............................................................................. 807
head ............................................................................... 808
images .......................................................................... 808
implementation ........................................................ 808
inputEncoding ........................................................... 808
lastModified ............................................................... 808
links ................................................................................ 808
readyState ................................................................... 808
referrer .......................................................................... 808
scripts ............................................................................ 808
title ................................................................................. 808
URL ................................................................................. 808
DOM� HTML DOM
Downloadlinks ............................................................... 203
Drag & Drop-API ........................................................... 892
dataTransfer-Objekt ............................................... 894
drag ................................................................................ 893
dragend ........................................................................ 894
dragenter ..................................................................... 893
draggable .................................................................... 892
dragleave ..................................................................... 893
dragover ...................................................................... 893
dragstart ...................................................................... 893
drop ............................................................................... 894
4158-8.book Seite 1251 Dienstag, 30. August 2016 1:58 13
Index
1252
effectAllowed ............................................................. 895
getData() ...................................................................... 896
setData() ...................................................................... 895
setDragImage() ......................................................... 895
dropshadow .................................................................... 642
Druckversion .................................................................. 532
Durchstreichen .............................................................. 639
Dynamische Webseiten ................................................ 37
E
Echtzeitkommunikation ........................................... 927
ECMAScript ...................................................................... 715
em ....................................................................................... 398
E-Mail-Adresse
mailto ........................................................................... 198
prüfen ............................................................................ 280
Entitäten ........................................................................... 173
Entwickler-Tools ............................................................ 708
Event Handler ................................................................ 815
addEventListener() ................................................... 817
Event-Attribute
addEventListener() ................................................. 1111
für HTML-Elemente ............................................... 1111
onabort ...................................................................... 1114
onafterprint .............................................................. 1111
onbeforeprint ........................................................... 1111
onbeforeunload ...................................................... 1111
onblur ......................................................................... 1112
oncanplay ................................................................. 1114
oncanplaythrough ................................................. 1115
onchange ................................................................... 1112
onclick ......................................................................... 1113
oncontextmenu ...................................................... 1112
oncopy ........................................................................ 1114
oncuechange ............................................................ 1115
oncut ........................................................................... 1114
ondblclick .................................................................. 1113
ondrag ........................................................................ 1113
ondragend ................................................................. 1113
ondragenter ............................................................. 1113
ondragleave ............................................................. 1113
ondragover ............................................................... 1113
ondragstart .............................................................. 1113
ondrop ........................................................................ 1114
ondurationchange ................................................. 1115
onemptied ................................................................. 1115
onended ..................................................................... 1115
onerror ............................................................ 1111, 1115
onfocus ....................................................................... 1112
onhashchange ......................................................... 1111
oninput ...................................................................... 1112
oninvalid ................................................................... 1112
onkeydown ............................................................... 1113
onkeypress ................................................................ 1113
onkeyup ..................................................................... 1113
onload ........................................................................ 1111
onloadeddata .......................................................... 1115
onloadedmetadata ............................................... 1115
onloadstart .............................................................. 1115
onmessage ................................................................ 1111
onmousedown ........................................................ 1114
onmousemove ........................................................ 1114
onmouseout ............................................................. 1114
onmouseover ........................................................... 1114
onmouseup .............................................................. 1114
onoffline .................................................................... 1111
ononline .................................................................... 1111
onpagehide .............................................................. 1112
onpageshow ............................................................. 1112
onpaste ...................................................................... 1114
onpause ..................................................................... 1115
onplay ........................................................................ 1115
onplaying .................................................................. 1115
onpopstate ............................................................... 1112
onprogress ................................................................ 1115
onratechange .......................................................... 1115
onreset ........................................................................ 1113
onresize ...................................................................... 1112
onscroll ...................................................................... 1114
onsearch .................................................................... 1113
onselect ...................................................................... 1113
onstalled .................................................................... 1115
onstorage .................................................................. 1112
onsubmit ................................................................... 1113
onsuspend ................................................................. 1115
ontimeupdate ......................................................... 1116
onunload ................................................................... 1112
onvolumechange ................................................... 1116
onwaiting .................................................................. 1116
onwheel ..................................................................... 1114
event-Objekt
altKey ............................................................................. 826
bubbles .......................................................................... 827
button ............................................................................ 827
cancelable .................................................................... 827
clientX ........................................................................... 827
clientY ............................................................................ 827
ctrlKey ........................................................................... 826
currentTarget ............................................................. 827
keyCode ........................................................................ 827
metaKey ....................................................................... 827
4158-8.book Seite 1252 Dienstag, 30. August 2016 1:58 13
Index
1253
preventDefault() ........................................................ 828
screenX ......................................................................... 827
screenY .......................................................................... 827
shiftKey ......................................................................... 826
target ............................................................................. 827
type ................................................................................. 827
Event-Propagation ........................................................ 829
ex ......................................................................................... 399
F
falsy ..................................................................................... 731
Farbangaben .................................................................... 400
benannte Farben ....................................................... 400
hexadezimale Schreibweise ................................. 402
HSL-Mischung ............................................................ 405
RGB-Mischung ........................................................... 403
Transparenz ................................................................ 403
Farbauswahl-Dialog ..................................................... 277
Farben auswählen ......................................................... 277
Farbverlauf ....................................................................... 443
Faux Column ................................................................... 518
Favicon .............................................................................. 234
favicon.ico ........................................................................ 235
File API ..................................................................... 910, 932
Flash abspielen ............................................................... 254
Flexbox .................................................................... 486, 528
display: flex ................................................................. 486
flex .................................................................................. 489
flex-direction .............................................................. 486
Layout ........................................................................... 528
order .............................................................................. 492
flex-direction
column-reverse .......................................................... 489
row-reverse ................................................................. 489
float ........................... 472, 513, 515, 532, 540, 544, 650
Aufheben mit clear .................................................. 477
Elemente nebeneinander ....................................... 474
inherit ............................................................................ 473
left ......................................................................... 472, 474
none ............................................................................... 473
right ............................................................................... 472
zweispaltiges Layout ............................................... 505
Float drop ......................................................................... 485
Font Awesome ................................................................ 620
@font-face ....................................................................... 613
font-family
Webfonts ...................................................................... 613
font-stack .......................................................................... 608
<form> ............................................................................... 263
Form-Mailer .................................................................... 294
Formulare ........................................................................ 261
Auswahlliste ............................................................... 267
Autovervollständigung ......................................... 284
Bereich definieren .................................................... 263
Checkboxen ................................................................ 270
Datei-Upload ............................................................. 271
Datum und Uhrzeit eingeben ............................. 279
Datums-Eingabefeld ............................................... 277
Drowdown-Liste ....................................................... 267
Eingabefokus setzen ............................................... 283
Elemente deaktivieren ........................................... 289
Elemente gruppieren .............................................. 292
E-Mail-Eingabefeld .................................................. 280
Farbauswahl-Dialog ............................................... 277
Fehler bei der Eingabe ............................................ 286
JavaScript .................................................................... 849
mehrere Submit-Schaltflächen ........................... 274
mehrzeiliges Texteingabefeld ............................. 266
method="get" ............................................................. 263
method="post" .......................................................... 263
Monats-Eingabefeld ................................................ 279
neue Eingabefelder (HTML5) ............................... 276
nur lesbar .................................................................... 290
Passworteingabefeld .............................................. 265
PHP ................................................................................ 294
Platzhalter verwenden ........................................... 286
Radiobuttons ............................................................. 269
reguläre Ausdrücke ................................................. 285
Schaltflächen ............................................................. 272
Schieberegler .............................................................. 282
Sucheingabefeld ....................................................... 280
Tabulator-Reihenfolge ........................................... 291
Tastenkürzel ............................................................... 291
Telefonnummern-Eingabefeld ............................ 281
Texteingabefeld ........................................................ 264
Textlabel ...................................................................... 270
Uhrzeit-Eingabefeld ................................................ 278
URL-Eingabefeld ....................................................... 281
verstecktes Eingabefeld ......................................... 273
Wochen-Eingabefeld ............................................... 279
Zahlen-Eingabefeld ................................................. 281
Framework
Bootstrap ..................................................................... 995
YAML 4 ....................................................................... 1024
Frameworks
CSS .................................................................................. 993
Fullscreen API ................................................................. 928
function ............................................................................ 747
4158-8.book Seite 1253 Dienstag, 30. August 2016 1:58 13
Index
1254
G
Geolocation-API ............................................................ 878
clearWatch() ............................................................... 886
coords.accuracy ........................................................ 881
coords.altitude .......................................................... 881
coords.altitudeAccuracy ....................................... 881
coords.heading .......................................................... 881
coords.latitude .......................................................... 881
coords.longitude ....................................................... 881
coords.speed ............................................................... 881
enableHighAccuracy .............................................. 885
Fehlerbehandlung .................................................... 882
getCurrentPosition() ............................................... 881
maximumAge ............................................................ 885
Navigation erstellen ............................................... 891
PERMISSION_DENIED ............................................ 884
POSITION_UNAVAILABLE .................................... 884
PositionOptions-Objekt ......................................... 885
TIMEOUT ..................................................................... 884
timeout ......................................................................... 885
timestamp ................................................................... 881
watchPosition() ......................................................... 886
GET-Methode .................................................................. 297
Geviertbreite ................................................................... 398
Gewichtung ..................................................................... 392
grad ..................................................................................... 406
Grafiken
einbinden ..................................................................... 212
gestalten ...................................................................... 660
Gridlayout ........................................................................ 572
H
Hauptinhalt <main> .................................................... 129
Hintergrundfarbe ......................................................... 433
Hintergrundgrafik ........................................................ 434
fixieren ......................................................................... 438
positionieren .............................................................. 438
reaktionsfähig machen ......................................... 561
history ............................................................................. 1240
history-Objekt ................................................................ 789
back() ............................................................................. 790
forward() ...................................................................... 790
Hochformat
orientation .................................................................. 567
HTML
Auszeichnungssprache ............................................. 39
CSS hinzufügen ......................................................... 315
validieren ........................................................................ 50
HTML 5.1 ............................................................................. 40
HTML DOM ...................................................................... 793
HTML5 .................................................................................. 39
HTML5-Elemente
CSS .................................................................................. 700
HTML5Shiv ....................................................................... 702
HTML-Attribute ................................................................ 63
<source> .................................................................... 1085
<track> ....................................................................... 1085
<video> ...................................................................... 1085
abbr ............................................................................. 1097
accept ......................................................................... 1068
accept-charset ............................................... 264, 1067
accesskey ......................................................... 291, 1051
action ............................................. 263, 295, 297, 1067
alt .................. 212, 213, 221, 227, 1068, 1082, 1084
async .................................................................... 90, 1100
autocomplete .................................... 284, 1067, 1068
autofocus ........ 283, 1068, 1073, 1074, 1076, 1078
autoplay ..................................... 246, 253, 1086, 1088
border ............................................................................ 183
challenge ................................................................... 1078
charset .................................... 90, 98, 172, 1098, 1100
charset="UTF-8" ........................................................... 92
checked ................................................ 269, 1068, 1094
cite ............................................................ 126, 160, 1063
class .......................................................... 333, 801, 1051
cols ..................................................................... 266, 1073
colspan ............................................................. 180, 1097
content ......................................................... 91, 98, 1098
contenteditable ...................................................... 1051
contextmenu ........................................................... 1051
controls ....................................... 246, 253, 1086, 1088
coords ...................................................... 225, 227, 1082
data-* .............................................................. 1015, 1052
datetime .......................................................... 164, 1063
default ............................................................ 1087, 1094
defer ..................................................................... 90, 1100
dir ........................................................... 156, 1052, 1062
disabled 289, 1068, 1073, 1074, 1076, 1077, 1078,
1079, 1094
download ......................... 203, 209, 227, 1082, 1089
draggable ........................................................ 892, 1052
dropzone ................................................................... 1052
enctype .................................................... 263, 271, 1067
for .................................................. 270, 681, 1078, 1079
form .................. 274, 1068, 1073, 1074, 1076, 1078,
1079, 1101
formaction .......................................... 275, 1069, 1074
formenctype ................................................. 1069, 1075
formmethod ....................................... 275, 1069, 1075
formnovalid ................................................................ 275
4158-8.book Seite 1254 Dienstag, 30. August 2016 1:58 13
Index
1255
formnovalidate .......................................... 1069, 1075
formtarget ........................................... 275, 1069, 1075
headers ...................................................................... 1097
height .......... 216, 218, 221, 236, 1070, 1080, 1084,
1088, 1101
hidden ........................................................................ 1052
high ............................................................................. 1076
href ........ 79, 80, 83, 190, 209, 226, 227, 318, 1082,
1089, 1091, 1099
href="mailto: … " ....................................................... 198
hreflang ................... 83, 209, 227, 1082, 1090, 1091
http-equiv ................................................... 91, 98, 1098
http-equiv="refresh" .................................................. 92
icon .............................................................................. 1094
id .......................... 207, 242, 274, 336, 774, 797, 1052
ismap ................................................................. 221, 1084
keytype ...................................................................... 1079
kind .................................................................... 248, 1087
label .................................. 248, 268, 1077, 1088, 1094
lang ...................................................................... 68, 1052
list ....................................................................... 284, 1070
loop ........................................................ 253, 1086, 1088
low ............................................................................... 1076
manifest ........................................................... 904, 1055
manipulieren .................................................... 811, 846
max ..... 278, 279, 281, 282, 285, 1070, 1077, 1080
maxlength ................................. 264, 266, 1070, 1073
media ......... 83, 86, 209, 227, 231, 324, 1058, 1082,
1085, 1086, 1090, 1091
media="print" ............................................................. 532
media="screen" .......................................................... 532
method ............................................................. 263, 1067
method="get" ............................................................. 263
method="post" ................................................. 263, 296
min .................. 278, 279, 281, 282, 285, 1070, 1077
multiple ................... 269, 280, 285, 932, 1070, 1076
muted .......................................... 246, 253, 1086, 1088
name ..... 91, 98, 222, 264, 266, 268, 269, 271, 274,
801, 852, 1067, 1070, 1073, 1076, 1078,
1079, 1080, 1084, 1099, 1101, 1102
name="description" ................................................... 95
name="keywords" ...................................................... 95
name="robots" ............................................................. 93
novalidate ....................................................... 289, 1067
open ................................................................... 302, 1058
optimum ................................................................... 1077
pattern .................................................... 281, 285, 1070
placeholder ......................................... 286, 1070, 1073
poster ................................................................. 246, 1088
preload ........................................ 246, 253, 1086, 1088
pubdate ........................................................................ 167
readonly ............................................... 290, 1070, 1073
rel .................................. 83, 84, 209, 1082, 1090, 1091
rel="icon" ..................................................................... 234
rel="stylesheet" .......................................................... 318
required .......................... 280, 286, 1071, 1074, 1076
reversed ............................................................ 133, 1093
rows ................................................................... 266, 1074
rowspan ........................................................... 180, 1097
sandbox ........................................................... 258, 1080
scope ...................................................... 182, 1058, 1097
scoped ....................................................................... 85, 86
seamless ........................................................... 258, 1080
selected ............................................................. 268, 1077
shape ................................................................. 224, 1083
size ....................................... 84, 264, 1071, 1076, 1092
sizes ................................................................................ 231
sortable ...................................................................... 1096
sorted .......................................................................... 1097
span ............................................................................. 1096
spellcheck .................................................................. 1052
src ........ 90, 212, 222, 236, 245, 246, 248, 253, 777,
1071, 1080, 1084, 1086, 1088, 1089, 1100, 1101
srcdoc .......................................................................... 1080
srclang .............................................................. 248, 1088
srcset ....................................................... 230, 231, 1085
start ................................................................... 134, 1093
step .................................................. 281, 282, 285, 1071
style .................................................................... 315, 1053
tabindex ........................................................... 291, 1053
target .. 80, 197, 210, 264, 1068, 1083, 1090, 1099
target="_blank" ......................................................... 198
title ........................................ 150, 202, 215, 320, 1053
translate ..................................................................... 1053
type ....... 84, 86, 90, 202, 210, 245, 252, 255, 1058,
1071, 1075, 1083, 1085, 1087, 1091,
1092, 1093, 1094, 1095, 1101
type="button" .......................................................... 1072
type="checkbox" ........................................... 270, 1072
type="checkboxen" .................................................. 852
type="color" .................................................... 277, 1072
type="date" ..................................................... 277, 1072
type="datetime" ............................................ 279, 1072
type="datetime-local" ................................ 279, 1072
type="email" ................................................... 280, 1072
type="file" .............................................. 271, 932, 1072
type="hidden" ................................................ 273, 1072
type="image" ............................................................ 1072
type="month" ................................................. 279, 1072
type="number" .............................................. 281, 1072
type="password" ........................................... 265, 1072
type="radio" ......................................... 269, 852, 1072
4158-8.book Seite 1255 Dienstag, 30. August 2016 1:58 13
Index
1256
type="range" .................................................. 282, 1072
type="reset" ..................................................... 272, 1072
type="search" ................................................. 280, 1072
type="submit" ................................................ 272, 1072
type="tel" ......................................................... 281, 1072
type="text" ...................................................... 264, 1072
type="text/css" .......................................................... 318
type="text/javascript" ............................................ 771
type="time" ..................................................... 278, 1073
type="url" ......................................................... 281, 1073
type="week" .................................................... 279, 1073
usemap ................................................. 222, 1084, 1101
value 134, 264, 269, 271, 274, 277, 278, 279, 849,
851, 1071, 1075, 1077, 1080, 1094, 1102
width 216, 218, 222, 236, 246, 1072, 1080, 1084,
1089, 1101
wrap ................................................................... 266, 1074
HTML-Elemente ............................................................... 58
<a> ..................................................................... 189, 1089
<abbr> .............................................................. 150, 1059
<address> ........................................................ 118, 1059
<area> ................................................... 222, 1081, 1082
<article> ................................................. 104, 145, 1055
<aside> ................................................... 106, 145, 1056
<audio> ................................................ 251, 1085, 1086
<b> ..................................................................... 158, 1059
<base> ..................................................... 78, 1098, 1099
<bdi> ................................................................. 156, 1059
<bdo> .................................................... 156, 1059, 1062
<blockquote> ..................................... 126, 1060, 1063
<body> ....................................................... 69, 102, 1054
<br> .................................................................... 122, 1054
<button> .............................................. 272, 1064, 1074
<canvas> .................................... 242, 866, 1081, 1084
<caption> ........................................................ 193, 1095
<cite> ................................................................. 150, 1060
<code> .............................................................. 151, 1060
<col> ...................................................... 186, 1095, 1096
<colgroup> .......................................... 186, 1095, 1096
<command> ............................................................... 305
<datalist> .................................................................. 1064
<dd> ................................................................... 138, 1093
<del> ...................................................... 162, 1060, 1063
<details> .................................... 194, 301, 1056, 1058
<dfn> ................................................................. 155, 1060
<dialog> ........................................................... 302, 1056
<div> ........................................................ 127, 680, 1056
<dl> .................................................................... 137, 1092
<dt> .................................................................... 137, 1093
<em> .................................................................. 157, 1060
<embed> .............................................. 254, 1099, 1101
<fieldset> .......................... 292, 681, 685, 1064, 1078
<figcaption> ............................... 130, 195, 220, 1081
<figure> ........................................ 130, 195, 220, 1081
<footer> .................................................. 116, 145, 1056
<form> ............................... 263, 274, 295, 1064, 1067
<h1> ................................................................... 111, 1054
<h2> ................................................................... 111, 1054
<h3> ................................................................... 111, 1054
<h4> ................................................................... 111, 1054
<h5> ................................................................... 111, 1054
<h6> .................................................................. 111, 1054
<head> ......................................................... 68, 71, 1098
<header> ................................................ 116, 145, 1057
<hgroup> ................................................................... 1057
<hr> ................................................................... 124, 1054
<html> ..................................................... 67, 1054, 1055
<i> ...................................................................... 158, 1060
<iframe> .......................................................... 256, 1080
<img> ........................................... 212, 236, 1081, 1084
<input type="checkbox"> ............................ 270, 852
<input type="color"> ............................................... 277
<input type="date"> ................................................. 277
<input type="datetime"> ....................................... 279
<input type="datetime-local"> ............................ 279
<input type="email"> .............................................. 280
<input type="file"> ................................................... 271
<input type="hidden"> ........................................... 273
<input type="month"> ............................................ 279
<input type="number"> ......................................... 281
<input type="password"> ...................................... 265
<input type="radio"> ..................................... 269, 852
<input type="range"> .............................................. 282
<input type="reset"> ................................................ 272
<input type="search"> ............................................ 280
<input type="submit"> ........................................... 272
<input type="tel"> ..................................................... 281
<input type="text"> .................................................. 264
<input type="time"> ................................................ 278
<input type="url"> .................................................... 281
<input type="week"> ............................................... 279
<input> ........................................................... 1064, 1068
<ins> ...................................................... 162, 1060, 1063
<kbd> ................................................................ 154, 1061
<keygen> ....................................................... 1064, 1078
<label> ......................................... 270, 681, 1065, 1078
<legend> ................................................. 292, 685, 1065
<li> ................................................ 132, 133, 1092, 1094
<link> ............................................. 81, 317, 1089, 1091
<main> .......................................................................... 129
<map> .................................................. 222, 1081, 1084
<mark> ............................................................. 158, 1061
4158-8.book Seite 1256 Dienstag, 30. August 2016 1:58 13
Index
1257
<math> ......................................................................... 241
<menu> ................................................ 303, 1093, 1094
<menuitem> ....................................... 303, 1093, 1094
<meta> ................................................................ 90, 1098
<meter> ................................................ 293, 1065, 1076
<nav> ....................................................... 108, 145, 1089
<noscript> ................................................ 88, 779, 1099
<object> ................................................ 255, 1100, 1101
<ol> ........................................................ 133, 1092, 1093
<optgroup> ......................................... 268, 1065, 1077
<option> ..................................... 267, 851, 1065, 1077
<output> .............................................. 282, 1066, 1079
<p> ...................................................................... 120, 1054
<param> ............................................... 255, 1100, 1102
<picture> .................................... 228, 565, 1081, 1085
<pre> .................................................................. 151, 1061
<progress> ................................. 293, 855, 1066, 1080
<q> .......................................................... 160, 1061, 1063
<rp> .................................................................... 168, 1061
<rt> ..................................................................... 168, 1061
<ruby> ............................................................... 168, 1061
<s> ...................................................................... 161, 1061
<samp> ............................................................. 154, 1061
<script> ............. 88, 771, 775, 776, 777, 1099, 1100
<section> ................................................ 103, 145, 1057
<select> ....................................... 267, 851, 1066, 1076
<small> ............................................................. 168, 1061
<source> ....................................... 228, 245, 252, 1086
<span> .............................................................. 170, 1057
<strong> ........................................................... 157, 1061
<style> ........................................... 85, 316, 1057, 1058
<sub> ................................................................. 163, 1061
<summary> ........................................... 194, 301, 1057
<sup> ................................................................. 163, 1062
<svg> ............................................................................. 237
<table> .................................................. 178, 1095, 1096
<tbody> ............................................................ 184, 1095
<td> ........................................................ 178, 1095, 1097
<textarea> ................................. 266, 851, 1066, 1073
<tfoot> .............................................................. 184, 1096
<th> ........................................................ 179, 1095, 1097
<thead> ............................................................ 184, 1096
<time> ................................................... 164, 1062, 1063
<title> .................................................................. 72, 1054
<tr> ..................................................................... 178, 1096
<track> .............................................................. 247, 1087
<u> ...................................................................... 161, 1062
<ul> .................................................................... 132, 1092
<var> ........................................................................... 1062
<video> ............................................................. 244, 1088
<wbr> ................................................................ 123, 1062
datalist ......................................................................... 284
Event-Attribute ....................................................... 1111
verschachteln ................................................................ 59
HTML-Elemente (veraltet)
<acronym> ................................................................ 1102
<applet> ..................................................................... 1102
<basefont> ................................................................ 1102
<big> ............................................................................ 1102
<center> ..................................................................... 1102
<dir> ............................................................................ 1102
<font> ......................................................................... 1102
<frame> ...................................................................... 1102
<frameset> ................................................................ 1103
<noframes> .............................................................. 1103
<strike> ....................................................................... 1103
<tt> ............................................................................... 1103
HTML-Formulare .......................................................... 261
HTML-Kopfdaten ............................................................. 68
HTML-Tags .......................................................................... 58
HTML-Zeichen maskieren ......................................... 174
HTTP-Request ................................................................. 296
Hyperlinks ....................................................................... 189
I
Icon ..................................................................................... 234
Iconfonts .......................................................................... 619
Image-Map ....................................................................... 222
@import .................................................................. 536, 695
!important ....................................................................... 390
in .......................................................................................... 398
IndexedDB ....................................................................... 910
inherit ................................................................................ 386
Inline-Styles .................................................................... 316
<input type="button"> ............................................... 273
Internet Media Type .................................................. 1121
Internetverbindung prüfen ...................................... 911
ISO-8859 ........................................................................... 171
ISO-8859-1 ....................................................................... 172
J
JavaScript ................................................................... 42, 713
"use strict"; .................................................................. 723
<canvas> ............................................................. 242, 866
<noscript> ................................................................... 779
<script> ......................................................................... 771
<video> ......................................................................... 860
===-Operator ............................................................. 767
aktivieren .................................................................... 776
alert() ............................................................................. 773
4158-8.book Seite 1257 Dienstag, 30. August 2016 1:58 13
Index
1258
Anweisungen ............................................................. 720
Anweisungsblock ..................................................... 731
appendChild() ............................................................ 896
arithmetische Operatoren .................................... 745
Array ..................................................................... 742, 768
Array-Objekt ............................................................. 1228
Arrow-Funktionen ................................................... 752
bedingte Anweisung ............................................... 730
Boolean ............................................................... 727, 766
Boolean-Objekt ....................................................... 1233
boolescher Wahrheitswert .................................... 731
break ..................................................................... 736, 741
Browser-Objekte ....................................................... 780
clearInterval() ............................................................ 786
clearTimeout() ........................................................... 786
console .......................................................................... 718
console.log() ............................................................... 772
const .............................................................................. 722
continue ....................................................................... 741
Date ............................................................................... 770
Datentypen ................................................................. 723
Datentypen konvertieren ...................................... 728
Date-Objekt .............................................................. 1225
deaktiviert ................................................................... 776
Dekrementoperator ................................................ 737
do-while-Schleife ...................................................... 740
Drag & Drop-API ...................................................... 892
Eigenschaften ............................................................ 760
Escape-Sequenzen .................................................... 725
Event Handler ............................................................ 815
Events ............................................................................ 814
false ................................................................................ 731
Formulare .................................................................... 849
for-Schleife .................................................................. 738
Function ....................................................................... 770
function (Schlüsselwort) ........................................ 747
Funktionen .................................................................. 747
Geolocation-API ....................................................... 878
globale Funktionen ............................................... 1234
history ........................................................................... 789
if-Verzweigung .......................................................... 733
Inkrementoperator .................................................. 737
innerHTML .................................................................. 774
Internetverbindung prüfen .................................. 911
isNaN() .......................................................................... 730
Kommentare .............................................................. 719
Konsole ......................................................................... 772
Konstanten ................................................................. 722
Konstruktorfunktion .............................................. 762
Laufzeitumgebung .................................................. 716
let .................................................................................... 720
Literal ............................................................................. 726
location ......................................................................... 788
logische Operatoren ................................................ 734
Math ..................................................................... 746, 770
mathematische Funktionen ................................. 746
Math-Objekt ............................................................. 1223
Media-API .................................................................... 860
navigator ..................................................................... 790
new ................................................................................. 762
null .................................................................................. 727
Number ......................................................................... 766
number .......................................................................... 724
Number-Objekt ....................................................... 1221
Object ............................................................................. 766
Objekte .......................................................................... 757
Objekt-Literal .............................................................. 761
onmessage ................................................................... 916
parseFloat() ................................................................. 729
parseInt() ...................................................................... 729
Rest-Parameter .......................................................... 754
Schleifen ....................................................................... 737
screen ............................................................................. 787
setInterval() ................................................................. 786
setTimeout() ................................................................ 786
Steuerzeichen ............................................................. 725
Strikter Modus ........................................................... 723
String ............................................................................. 766
String-Objekt ........................................................... 1217
Strings ........................................................................... 725
switch-Verzweigung ................................................ 736
this .................................................................................. 764
Timing Events ............................................................. 786
true ................................................................................. 731
typeof ............................................................................. 724
undefined ..................................................................... 727
var ................................................................................... 720
Variablen ...................................................................... 720
Vergleichsoperatoren .............................................. 732
Video steuern .............................................................. 860
while-Schleife .............................................................. 740
window ......................................................................... 781
Zahlen ............................................................................ 724
JavaScript Events ........................................................... 814
blur ................................................................................. 824
Bubbling-Phase .......................................................... 829
Capturing-Phase ....................................................... 829
change ........................................................................... 824
click ................................................................................. 821
dblclick .......................................................................... 821
Eigenschaften ............................................................. 824
error ................................................................................ 820
4158-8.book Seite 1258 Dienstag, 30. August 2016 1:58 13
Index
1259
Event Handler ............................................................ 815
event-Objekt ............................................................... 824
Event-Propagation ................................................... 829
focus ............................................................................... 824
keydown ....................................................................... 823
keypress ........................................................................ 823
keyup ............................................................................. 823
load ................................................................................ 820
mousedown ................................................................ 821
mousemove ................................................................ 821
mouseout ..................................................................... 821
mouseover ................................................................... 821
mouseup ...................................................................... 821
onblur ............................................................................ 849
onchange ..................................................................... 851
onclick ........................................................................... 852
onload ........................................................................... 820
onsubmit ...................................................................... 854
onunload ..................................................................... 820
preventDefault() ........................................................ 828
reset ................................................................................ 824
resize .............................................................................. 820
scroll ............................................................................... 820
select .............................................................................. 824
Standardaktion ......................................................... 827
Standardaktion verhindern ................................. 828
stopPropation() ......................................................... 831
submit ................................................................. 824, 854
touchcancel ................................................................. 823
touchend ...................................................................... 823
touchmove .................................................................. 823
touchstart .................................................................... 823
unload ........................................................................... 820
JavaScript-Bibliothek
jQuery ............................................................................ 958
JavaScript-Events
dragend ........................................................................ 894
dragenter ..................................................................... 893
dragleave ..................................................................... 893
dragover ....................................................................... 893
dragstart ............................................................ 893, 894
drop ................................................................................ 894
offline ............................................................................ 911
onkeyup ........................................................................ 948
online ............................................................................. 911
onload ........................................................................... 941
JavaScript-Konsole ........................................................ 772
JavaScript-Objekte ..................................................... 1217
Array .................................................................. 768, 1228
Boolean ............................................................. 766, 1233
Date .................................................................... 770, 1225
Function ....................................................................... 770
Math .................................................................. 770, 1223
Number ............................................................ 766, 1221
Object ............................................................................ 766
RegExp ........................................................................ 1233
String ................................................................. 766, 1217
jQuery ................................................................................ 958
$.get() ............................................................................. 990
$.post() .......................................................................... 990
addClass() .................................................................... 975
after() ............................................................................ 971
Ajax ................................................................................ 987
animate() ............................................................ 979, 984
append() .............................................................. 961, 971
attr() ............................................................................... 967
before() ......................................................................... 971
CSS .................................................................................. 975
css() ................................................................................ 975
document ready ....................................................... 961
Effekte ........................................................................... 978
empty() ......................................................................... 971
Ereignisse ..................................................................... 964
Events ............................................................................ 964
fadeIn() ......................................................................... 979
fadeOut() ...................................................................... 979
fadeTo() ........................................................................ 979
fadeToggle() ............................................................... 979
hide() ............................................................................. 979
html() ............................................................................. 967
jquery() ......................................................................... 962
load() ............................................................................. 988
Plug-ins ........................................................................ 990
prepend() ..................................................................... 971
remove() ....................................................................... 971
removeClass() ............................................................ 975
Selektoren .................................................................... 961
show() ............................................................................ 979
slideDown() ................................................................. 979
slideToggle() ............................................................... 979
slideUp() ....................................................................... 979
stop() ............................................................................. 979
text() .............................................................................. 967
toggle() ......................................................................... 979
toogleClass() ............................................................... 975
val() ................................................................................ 967
JScript ................................................................................. 715
JSON .................................................................................... 953
JSON.parse() ................................................................ 956
4158-8.book Seite 1259 Dienstag, 30. August 2016 1:58 13
Index
1260
K
Kapitälchen ............................................................ 630, 641
Kaskade .................................................................... 320, 388
Kastenmodell ................................................................. 409
Kombinatoren .................................................... 366, 1202
Kommentare ..................................................................... 65
CSS .................................................................................. 313
Kurzschreibweise
CSS-Eigenschaften ................................................... 406
L
Layout ................................................................................ 495
dreispaltiges ............................................................... 512
Faux Column .............................................................. 518
feste Breite .................................................................. 496
Flexboxen .................................................................... 528
flexible Breite ............................................................. 496
Grid ................................................................................ 571
Inhalt horizontal zentrieren ................................ 503
Raster ............................................................................ 571
Responsive .................................................................. 531
Tabellenlayout .......................................................... 510
zweispaltiges .............................................................. 497
Leerzeichen
.......................................................................... 124
Less ................................................................................... 1041
Links ................................................................................... 189
Linktext ............................................................................. 189
Listen
Bildergalerie ............................................................... 667
Grafiken als Aufzählungszeichen ...................... 644
Listen gestalten .............................................................. 643
Listendarstellung
Beschreibungsliste ................................................... 137
geordnet ....................................................................... 133
nummeriert ................................................................ 133
Nummerierung ändern .......................................... 134
Nummerierung umdrehen ................................... 133
ungeordnet ................................................................. 132
verschachteln ............................................................. 135
Listeneintrag <li> .......................................................... 132
Literale ............................................................................... 726
Local Storage ................................................................... 906
location ........................................................................... 1241
location-Objekt .............................................................. 788
hostname .................................................................... 789
href ................................................................................. 789
pathname .................................................................... 789
protocol ........................................................................ 789
M
Maßeinheiten ................................................................. 397MathML ............................................................................. 241Math-Objekt .................................................................. 1223max-height ...................................................................... 509@media ................................................................... 534, 536media
handheld ...................................................................... 534Media Queries ............................................. 326, 531, 534
<meta name="viewport"> ..................................... 550aspect-ratio ................................................................. 539color ............................................................................... 539device-aspect-ratio ................................................... 539device-height .............................................................. 539device-width ................................................................ 539height ............................................................................. 539max-aspect-ratio ...................................................... 539max-color ..................................................................... 539max-device-aspect-ratio ........................................ 539max-device-height ................................................... 539max-device-width ..................................................... 539max-height .................................................................. 539max-resolution .......................................................... 539max-width ................................................................... 539min-aspect-ratio ....................................................... 539min-color ...................................................................... 539min-device-aspect-ratio ......................................... 539min-device-height .................................................... 539min-device-width ...................................................... 539min-height ................................................................... 539min-resolution ........................................................... 539min-width .................................................................... 539orientation .................................................................. 539orientation: landscape ........................................... 567orientation: portrait ................................................ 567Rasterlayout ............................................................... 590resolution ..................................................................... 539width .............................................................................. 539
Media-API ......................................................................... 860Menüleiste ........................................................................ 647<meta charset="UTF-8"> ............................................. 171Millimeter ......................................................................... 398MIME-Sniffing .............................................................. 1127MIME-Typen ....................................................... 202, 1121min-height ....................................................................... 509Mixins ............................................................................. 1042mm ...................................................................................... 398Mobile First ...................................................................... 569Modernizr ......................................................................... 705Modulares CSS ................................................................ 697MP3 abspielen ................................................................. 251
4158-8.book Seite 1260 Dienstag, 30. August 2016 1:58 13
Index
1261
N
Namenskonvention ....................................................... 74
Navigationsleiste ........................................................... 647
navigator ....................................................................... 1235
navigator-Objekt ........................................................... 790
Normalisierung CSS ..................................................... 699
normalize.css .................................................................. 700
<noscript> .......................................................................... 88
Number-Objekt ........................................................... 1221
O
Objekte JavaScript ......................................................... 757
Offlinedaten .................................................................... 901
<ol>
list-style-type .............................................................. 643
Onlineshop ........................................................................ 33
Outline ..................................................................... 112, 114
overflow
auto ................................................................................ 521
P
pc .......................................................................................... 398
PHP
Form-Mailer ................................................................ 294
Pica ...................................................................................... 398
Pixel .................................................................................... 398
Polyglottes Markup ................................................... 1117
position ............................................................................. 451
Positionierung ................................................................ 451
absolute ........................................... 457, 497, 502, 652
fixe .................................................................................. 459
float ................................................................................ 472
relative .......................................................................... 454
statische ....................................................................... 452
POST-Methode ............................................................... 296
Protokoll ............................................................................. 76
Prozent .............................................................................. 399
pt .......................................................................................... 398
Punkt .................................................................................. 398
px ......................................................................................... 398
Q
Querformat
orientation .................................................................. 567
Query String .................................................................... 297
R
rad ....................................................................................... 406
Rahmen ............................................................................. 431
Schmuckrahmen ...................................................... 432
Rahmen gestalten ......................................................... 429
Rasterlayout .................................................................... 572
border-box .................................................................. 595
Media Queries ............................................................ 590
Rasterlayout � Gridlayout
Recommendation ......................................................... 427
Referenzierung ................................................................. 76
RegExp-Objekt .............................................................. 1233
Reguläre Ausdrücke ..................................................... 285
rem ............................................................................. 399, 626
Responsive Layouts ..................................................... 531
Responsive Webdesign ...................................... 531, 534
rgb() .................................................................................... 403
rgba() .................................................................................. 403
RGB-Mischung ............................................................... 403
Transparenz ............................................................... 403
Rich Internet Application ............................................. 34
Ruby-Annotation .......................................................... 168
Runde Ecken hinzufügen .......................................... 447
S
Sass ................................................................................... 1045
Schlagschatten ............................................................... 641
Schlagschatten hinzufügen ...................................... 446
Schriftarten ..................................................................... 608
Webfonts ...................................................................... 613
Schriftformatierung .................................................... 633
Schriftgröße ........................................................... 569, 624
em ................................................................................... 624
Pixel ............................................................................... 628
Punkt ............................................................................. 628
relative (em) ............................................................... 624
rem ................................................................................. 626
Schlüsselwörter ......................................................... 624
Schriftklassen ................................................................. 608
Schriftschnitt
fett .................................................................................. 629
kursiv ............................................................................. 629
Scratchpad ....................................................................... 716
screen ............................................................................... 1236
screen-Objekt ................................................................. 787
availHeight ................................................................. 788
availWidth .................................................................. 788
colorDepth .................................................................. 788
height ............................................................................ 787
4158-8.book Seite 1261 Dienstag, 30. August 2016 1:58 13
Index
1262
pixelDepth ................................................................... 788
width ............................................................................. 787
Sektionselemente ......................................................... 103
Selektoren .................................................. 312, 327, 1201
Attributselektor (Attributwert) ........................... 344
Attributselektor (Präsenz) .................................... 342
Attributselektor (Teilwert) .................................... 348
Geschwisterselektor ................................................ 374
Gewichtung ................................................................ 392
gruppieren .................................................................. 332
ID-Selektor .................................................................. 336
jQuery ........................................................................... 961
Kindselektor ............................................................... 371
Klassenselektor ......................................................... 333
Kombinatoren ........................................................... 366
Muster ........................................................................... 328
Nachbarselektor ....................................................... 372
Nachfahrenselektor ................................................. 368
Negations-Pseudoklasse ....................................... 363
Performance ............................................................... 376
Pseudoklassen ........................................................... 351
Sprach-Pseudoklasse .............................................. 362
Struktur-Pseudoklassen ......................................... 356
Typselektor ................................................................. 329
Universalselektor ..................................................... 339
Userinterface-Pseudoklassen .............................. 353
verschachteln ............................................................. 367
Selektoren � CSS-Selektoren
Semantisches HTML .................................................... 139
Server Sent Events ........................................................ 921
event.data ................................................................... 921
EventSource-Objekt ................................................. 921
onmessage .................................................................. 921
Session Storage .............................................................. 906
Sniffer ................................................................................ 704
Spam .................................................................................. 200
Spezifität ........................................................................... 392
Sprites ................................................................................ 665
Sprungmarke .................................................................. 205
SSE API ............................................................................... 921
Standalone tags ................................................................ 63
Standort ermitteln ....................................................... 878
Stapelung ......................................................................... 462
Statische Webseiten ........................................................ 35
String-Objekt ................................................................ 1217
SVG-Elemente
<circle …/> ................................................................... 239
<ellipse …/> ................................................................. 239
<line …/> ...................................................................... 239
<path …/> .................................................................... 239
<polygon …/> .............................................................. 239
<polyline …/> .............................................................. 240
<rect …/> ....................................................................... 239
<text>…</text> .......................................................... 240
SVG-Format ..................................................................... 235
<img> ............................................................................. 236
<svg> .............................................................................. 237
SVG-Tags ........................................................................... 238
Symbole ............................................................................. 619
T
Tabellen ................................................................... 177, 653
beschriften ......................................................... 193, 660
feste Breite ................................................................... 654
Tabellenlayout ................................................................ 510
Text einrücken ................................................................ 638
Text hochstellen <sup> ............................................... 163
Text tiefstellen <sub> .................................................. 163
Textausrichtung ............................................................ 635
vertikal .......................................................................... 636
Textauszeichnungen ................................................... 148
textContent ..................................................................... 806
text-decoration .............................................................. 639
Textgestaltung ................................................................ 607
text-transform ................................................................ 631
Textunterstrich .............................................................. 163
Timing Events ................................................................. 786
Transformieren .............................................................. 671
drehen ........................................................................... 673
neigen ............................................................................ 674
skalieren ....................................................................... 672
verschieben .................................................................. 674
transition .......................................................................... 677
transition-delay ......................................................... 678
transition-duration .................................................. 678
transition-property .................................................. 678
transition-timing-function ................................... 678
Transparenz ..................................................................... 441
Trennungsstrich ­ ............................................... 123
truthy ................................................................................. 731
turn ...................................................................................... 406
typeof-Operator ............................................................. 907
U
Übergänge ........................................................................ 677
Überschriften .................................................................. 111
Unicode ............................................................................. 172
Universalselektor, Gewichtung ............................... 393
Unterstreichen ............................................................... 639
4158-8.book Seite 1262 Dienstag, 30. August 2016 1:58 13
Index
1263
Untertitel
Video, Audio ............................................................... 247
URL ........................................................................................ 76
UTF-8 ................................................................. 92, 171, 172
V
Validieren
HTML ............................................................................... 50
Vektorgrafiken ............................................................... 235
<img> ............................................................................ 236
<svg> ............................................................................. 237
Vererbung
CSS .................................................................................. 381
inherit ............................................................................ 386
Versalien ........................................................................... 631
Verweissensitive Grafiken ......................................... 222
Verweistext ...................................................................... 189
Verzeichnisnamen .......................................................... 75
Verzeichnisstruktur ....................................................... 75
vh ......................................................................................... 399
Videos
abspielen ...................................................................... 244
steuern .......................................................................... 860
YouTube ....................................................................... 250
Viewport ................................................................. 540, 550
Breite .............................................................................. 399
Höhe .............................................................................. 399
Resizer ........................................................................... 693
vw ........................................................................................ 399
W
Web SQL ............................................................................ 910
Web Storage ..................................................................... 906
clear() ............................................................................. 907
getItem() ....................................................................... 907
localStorage ................................................................ 906
removeItem() .............................................................. 907
sessionStorage ........................................................... 906
setItem() ....................................................................... 907
Web Workers ................................................................... 912
onerror .......................................................................... 918
onmessage .................................................................. 916
postMessage() ............................................................ 915
self.close() .................................................................... 919
terminate() .................................................................. 919
Worker-Objekt ........................................................... 915
Webbrowser ....................................................................... 44
Standardstylesheet .................................................. 389
Webbrowser-Präfixe .................................................... 427
Webbrowser-Sniffer ..................................................... 704
Webbrowser-Test
CSS .................................................................................. 690
Webbrowser-Weiche .................................................... 703
Webfonts .......................................................................... 613
Webformulare ................................................................ 261
WebGL ............................................................................... 928
Web-Konsole ................................................................... 716
Weblinks ........................................................................... 189
Weblog .................................................................................. 31
Webplattform .................................................................... 34
Webpräsenz ........................................................................ 31
WebRTC ............................................................................. 927
Webserver ........................................................................... 38
Webshop .............................................................................. 33
WebSockets ..................................................................... 925
WebVTT-Format ............................................................ 248
window.close() ............................................................... 783
window-Objekt .................................................. 781, 1237
alert() ............................................................................. 784
close() ............................................................................ 783
confirm() ...................................................................... 784
innerWidth .................................................................. 781
open() ............................................................................ 782
outerWidth .................................................................. 781
prompt() ....................................................................... 784
setInterval() ................................................................ 786
Winkelmaße .................................................................... 405
Working Draft ................................................................. 427
Wortabstand ................................................................... 634
Wurzel-Em ....................................................................... 399
WYSIWYG-Editor .............................................................. 44
X
x-Höhe ............................................................................... 399
XHTML5 .......................................................................... 1116
XML-Deklaration ......................................................... 1117
XMLHttpRequest-Objekt ........................................... 941
Y
YAML 4 ............................................................................ 1024
Layout ......................................................................... 1029
YouTube
abspielen über ........................................................... 250
Z
Zeichencodierung .................................................. 92, 170
Zeilenabstand ................................................................. 631
4158-8.book Seite 1263 Dienstag, 30. August 2016 1:58 13
Index
1264
Zeilenumbruch
<br> ................................................................................ 122
<wbr> ............................................................................ 123
verhindern ................................................................... 124
Zeitangaben .................................................................... 406
Zentimeter ....................................................................... 398
Zielanker ........................................................................... 205
z-index ............................................................................... 462
Zoll ....................................................................................... 398
4158-8.book Seite 1264 Dienstag, 30. August 2016 1:58 13
Wissen, wie’s geht.
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-lung von der E-Book-Fassung des vorgestellten Buches abweichen können. Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.
Teilen Sie Ihre Leseerfahrung mit uns!
Jürgen Wolf
HTML5 und CSS3 – Das umfassende Handbuch1.264 Seiten, gebunden, 2. Auflage 2016 44,90 Euro, ISBN 978-3-8362-4158-8
www.rheinwerk-verlag.de/4129
Jürgen Wolf ist Web- und Softwareentwickler sowie Autor mehrerer Standardwerke zu Programmierung und Fotografie. Ihm gelingt es auf hervorragende Weise, Theorie verständlich zu machen und mit Beispielen aus der Programmierpraxis zu verbinden.
Wissen, wie’s geht.Wissen, wie’s geht.
top related