View
221
Download
0
Category
Preview:
Citation preview
175
5
Kapitel 5
Tabellen, Hyperlinks und Bilder
In diesem Kapitel lernen Sie weitere Elemente von HTML kennen.
Genauer gesagt, erfahren Sie hier, wie Sie Tabellen, Hyperlinks und
Bilder Ihrer Webseite hinzufügen und verwenden können.
Grundlegende und essenzielle HTML-Elemente, die bisher noch nicht beschrieben
wurden, werden in diesem Kapitel zusammengefasst. Sie erfahren mehr zu folgen-
den Themen:
� Tabellen: Sie erfahren, wie Sie Tabellen zur Darstellung von Informationen oder
Daten in einem Raster verwenden können.
� Hyperlinks: Jeder, der das Internet kennt, kennt auch Hyperlinks, mit denen Sie
sich von einer Webseite zur anderen bewegen können. Hier erfahren Sie, wie Sie
ein HTML-Dokument mit anderen (HTML-)Dokumenten verlinken.
� Bilder: Eine Webseite ohne Bilder, Grafiken oder Logos ist heutzutage kaum noch
vorstellbar, weshalb Sie hier auch erfahren werden, wie Sie einem HTML-Doku-
ment Bilder hinzufügen.
� Verweissensitive Grafiken: Hierbei erfahren Sie, wie Sie mehrere Hypertextlinks
innerhalb einer Grafik einbetten können.
� Favoriten-Icons: Jeder kennt diese kleinen Icons in der Adressleiste, dem Tab oder
den Bookmarks. Hier erfahren Sie, wie Sie ein solches Favicon einer Webseite hin-
zufügen.
5.1 Daten in einer Tabelle strukturieren
Tabellen sind sehr hilfreich, wenn Sie zusammenhängende Daten wie z. B. Börsen-
kurse, Finanzdaten, Reisepläne, Zugfahrpläne, Busfahrpläne, Reiseberichte oder
Sportergebnisse in einem Raster aus Zeilen und Spalten darstellen wollen. HTML bie-
tet hierbei sehr gute und viele Möglichkeiten an, eine solche Tabelle zu strukturieren.
Formatierung mit CSS
Da HTML seit HTML5 nur noch für eine semantische und strukturelle logische Aus-
zeichnung verwendet wird, gilt dies auch für Tabellen in HTML. Tabellen in HTML bie-
5 Tabellen, Hyperlinks und Bilder
176
ten keinerlei Formatierungsmöglichkeiten an. Alle Attribute zur Formatierung aus
altem HTML, abgesehen von einem Rahmen mit border, werden in HTML5 nicht
mehr unterstützt. Daher gilt auch hier: Tabellen werden mit CSS formatiert, wie es in
Abschnitt 14.3, »Schönere Tabellen mit CSS gestalten«, beschrieben wird.
5.1.1 Eine einfache Tabellenstruktur mit <table>, <tr>, <td> und <th>
Jede Tabelle in HTML wird zwischen den Elementen <table> und </table> erstellt
(table, deutsch: Tabelle). Die Inhalte der Tabelle werden Zeile für Zeile hingeschrie-
ben. Den Beginn einer Zeile notieren Sie mit einem öffnenden <tr> und das Ende der
Zeile mit einem schließenden </tr> (tr = table row, deutsch: Tabellenzeile). Innerhalb
einer Tabellenzeile zwischen <tr> und </tr> notieren Sie dann die einzelnen Zellen
(oder auch Spalten) mit <td> und </td> (td = table data, deutsch: Tabellendaten).
Wollen Sie Zellen bzw. Spalten als Überschrift einer Tabelle verwenden, können Sie
die Daten zwischen <th> und </th> stellen (th = table heading, deutsch: Tabellenüber-
schrift). Das th-Element können Sie genauso verwenden wie das td-Element, nur dass
die Webbrowser dieses Element gewöhnlich durch eine in der Spalte zentrierte Fett-
schrift hervorheben. Wenn es sinnvoll ist, sollten Sie Tabellenüberschriften immer
verwenden, da dies zum einen für die Besucher mit Screenreadern hilfreich ist und
zum anderen gegebenenfalls für die Suchmaschinen, die Ihre Webseite damit besser
indizieren können.
HTML-Element Bedeutung
<table> Tabelle
<tr> Tabellenzeile
<td> Tabellenzelle
<th> Tabellenkopfzelle für Überschrift
<thead> Tabellenkopfbereich
<tbody> Tabellenkörper
<tfoot> Tabellenfußbereich
<colgroup> Gruppe von Tabellenspalten
<col> Tabellenspalte
<caption> Tabellenüberschrift/-legende
Tabelle 5.1 Schnellübersicht über die hier behandelten Tabellenelemente
5.1 Daten in einer Tabelle strukturieren
177
5
Abbildung 5.1 Eine grundlegende Tabellenstruktur in HTML
Hierzu soll ein einfaches Beispiel einer Tabelle erstellt werden, in der Daten einer
Webbrowser-Statistik von einer Webseite in einem Raster zusammengefasst und
übersichtlich dargestellt werden:
…<table><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
</tr><tr><td>Firefox</td><td>3499</td><td>14.4 %</td>
</tr><tr><td>Safari</td>
<table>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</table>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<th>...</th> <th>...</th>
5 Tabellen, Hyperlinks und Bilder
178
<td>1619</td><td>6.6 %</td>
</tr></table>
…
Listing 5.1 /Beispiele/Kapitel005/5_1_1/index.html
Wie Sie in Abbildung 5.2 sehen, stellen Webbrowser die Tabelle ohne jede Formatie-
rung dar. Die Höhe und Breite einer Tabelle wird gewöhnlich gemäß dem enthalte-
nen Inhalt ausgegeben.
Abbildung 5.2 Die strukturierte Darstellung einer grundlegenden Tabelle in HTML
Was darf in eine Tabellenzelle alles rein?
Zwischen einer Zelle in <td> und <td> können Sie neben einem Text auch weitere
HTML-Elemente verwenden. Theoretisch könnten Sie darin auch eine weitere kom-
plette Tabelle einfügen. Wenn Sie eine leere Zelle ohne Inhalt verwenden wollen,
müssen Sie trotzdem ein leeres <td></td> bzw. <th></th> angeben, um eine leere
Zelle zu notieren, da die Tabelle ansonsten nicht richtig dargestellt wird. Bei ganz
alten Webbrowsern können Sie zudem noch zur Sicherheit ein erzwungenes Leerzei-
chen mit der HTML-Entität in die Zelle schreiben, weil es dort bei leeren Zellen
ohne Inhalt zu Problemen kommen könnte.
5.1.2 Spalten bzw. Zeilen mit »colspan« bzw. »rowspan« zusammenfassen
Wenn Sie Tabelleneinträge über mehrere Zellen zusammenfassen (oder auch über-
spannen) wollen, können Sie dies mit dem HTML-Attribut colspan und rowspan
machen. Anhand des Zahlenwerts, den Sie diesen Attributen übergeben, wird die
Anzahl der Zellen angegeben, die Sie zusammenfassen wollen. Wie Sie anhand des
Attributnamens vielleicht schon erahnen können, wird colspan für das Zusammen-
fassen von Spalten und rowspan für das Zusammenfassen von Zeilen verwendet.
5.1 Daten in einer Tabelle strukturieren
179
5
Hierzu ein einfaches Beispiel, in dem der Tagesplan eines Fotografieseminars in einer
Tabelle zusammengefasst wurde:
…<table><tr><th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>
</tr><tr><th scope="row">Montag</th><td colspan="2">Fotoshooting (outdoor)</td><td>Workshop Bildbearbeitung</td>
</tr><tr><th scope="row">Dienstag</th><td>Straßenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Porträt)</td>
</tr><tr><th scope="row">Mittwoch</th><td>Aktfotografie</td><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>
</tr></table>
…
Listing 5.2 /Beispiele/Kapitel005/5_1_2/index.html
Wie Sie in Abbildung 5.3 sehen, wurde der Rahmen der Tabelle mit CSS gestylt, damit
das Ergebnis von colspan deutlicher sichtbar ist.
Sie können sehr schön sehen, wie sich hier am Montag die Zelle Fotoshooting (out-
door) dank colspan="2" über 2 Spalten vom Vormittag und Mittag überspannt. Glei-
ches gilt auch am Dienstag für die Spalte Fotoshooting (Porträt), was hier von Mittag
bis Nachmittag zusammenfasst wurde.
Bei der Verwendung colspan müssen Sie auch beachten, dass die Anzahl der Zellen
reduziert werden muss, wenn z. B. ein colspan über zwei Zellen zusammengefasst
wird. Im Beispiel von Montag haben Sie somit nur zwei td-Elemente notieren müssen
anstelle von drei, da sich das erste td-Element bereits über zwei Spalten erstreckt.
5 Tabellen, Hyperlinks und Bilder
180
Abbildung 5.3 Zusammenfassen von Spalten mit dem Attribut »colspan«
Es spricht übrigens nichts dagegen, Spalten in mehr als zwei Zellen zusammenzufas-
sen. Hierbei müssen Sie allerdings immer (logischerweise) auf die Anzahl der tatsäch-
lich vorhandenen Spalten achten. Folgendermaßen könnten Sie z. B. am Dienstag das
Fotoshooting (Porträt) über drei Spalten zusammenfassen:
…<tr><th scope="row">Dienstag</th><td colspan="3">Fotoshooting (Portrait)</td>
</tr><tr>
…
Die Zelle Straßenfotografie (Stadt) müsste dann allerdings ebenfalls entfernt
werden.
Das »scope«-Attribut von <th>
Im Beispiel wurde auch das scope-Attribut beim th-Element verwendet. Damit kön-
nen Sie angeben, ob die Tabellenüberschrift für eine Spalte (scope="col") oder eine
Zeile (scope="row") gelten soll.
Alles, was eben beschrieben wurde, gilt auch, wenn Sie Tabelleneinträge mit rowspan
über mehrere Zeilen zusammenfassen wollen. Hierzu nochmals das Beispiel, in dem
der Tagesplan für das Fotoseminar etwas geändert wurde, wo jetzt am Dienstag und
Mittwoch die Straßenfotografie (Stadt) am Vormittag durchführt wird:
…<table><tr>
5.1 Daten in einer Tabelle strukturieren
181
5
<th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>
</tr>…
<th scope="row">Dienstag</th><td rowspan="2">Strassenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Portrait)</td>
</tr><tr><th scope="row">Mittwoch</th><td>Workshop Bildbearbeitung</td><td>Abschlussfeier</td>
</tr></table>
…
Listing 5.3 /Beispiele/Kapitel005/5_1_2/index2.html
Im letzten tr-Element musste das td-Element mit Aktfotografie entfernt werden,
weil Sie den Eintrag Straßenfotografie (Stadt) darüber mit dem Attribut rowspan
nach unten ausgedehnt haben, wodurch dieser Eintrag den Platz in der darunter lie-
genden Zelle einnimmt, wie Sie in Abbildung 5.4 sehen.
Abbildung 5.4 Zusammenfassen von Zeilen mit dem Attribut »rowspan«
5.1.3 HTML-Attribute für die Tabellenelemente
Mit HTML5 wurden alle Attribute des einleitenden table-Elements, die zur Forma-
tierung von Tabellen verwendet wurden, entfernt. Wie am Anfang bereits erwähnt,
5 Tabellen, Hyperlinks und Bilder
182
sollten Sie zur Formatierung nur noch CSS verwenden. Für das table-Element
unterstützt HTML5 im Augenblick lediglich das border-Attribut, bei dem der Wert
allerdings nur "1" oder "" sein darf, um einen Rahmen anzuzeigen. Aber auch hier
wird CSS als bessere Alternative empfohlen. Um z. B. border="1" nachzubilden,
brauchen Sie nur folgendes CSS-Konstrukt im Kopf des HTML-Dokuments hinzu-
fügen:
…<style>table, td, th { border: 1px solid gray }
</style>…
Für die Tabellenzeile mit <tr> gibt es gar keine Attribute mehr, die von HTML5 unter-
stützt werden. Die Attribute von <td> und <th> mit colspan, rowspan und scope haben
Sie bereits kennengelernt. Die restlichen Attribute der beiden Elemente wurden
ebenfalls von HTML5 als missbilligt erklärt bzw. gestrichen.
Webseiten-Layout mit Tabellen?
Sie sollten Tabellen nicht mehr verwenden, um das Layout einer Webseite zu erstel-
len. Dies wurde im vorherigen Jahrtausend gemacht. Ich erwähne es nur, weil Sie
sich vielleicht schon den einen oder anderen Quelltext einer älteren Webseite ange-
sehen haben und sich wohl noch ansehen werden und immer noch zahlreiche Web-
seiten aus dieser Zeit vorhanden sind, die eine Tabelle zum Layouten bzw. Ausrichten
des Dokumenteninhalts verwenden. Meistens handelt es sich einfach um Seiten, die
nicht weitergepflegt werden, oder sie stammen von Entwicklern, die nicht mehr auf
dem Laufenden sind. Heute greifen Sie für das Layout einer Webseite auf CSS zurück,
das umfassend ab Kapitel 8 behandelt wird.
5.1.4 Tabellen mit <thead>, <tbody> und <tfoot> strukturieren
Optional zu den grundlegenden Tabellenelementen von HTML können Sie noch eine
Tabelle mit den Elementen <thead>, <tbody> und <tfoot> in einen Kopf-, Daten- und
Fußbereich einteilen.
Den Tabellenkopf schließen Sie zwischen <thead> und </thead> ein (thead = table
head, deutsch: Tabellenkopf). Sinnvollerweise sollten Sie dafür auch das th-Element
für die einzelnen Zellen verwenden. Die eigentlichen Daten für die Tabelle markieren
Sie zwischen <tbody> und </tbody> (tbody = table body, deutsch: Tabellenkörper). Wol-
len Sie einen Bereich als Tabellenfuß notieren, fassen Sie diesen zwischen <tfoot>
und </tfoot> (tfoot = table foot, deutsch: Tabellenfuß) zusammen.
5.1 Daten in einer Tabelle strukturieren
183
5
Hierzu ein Beispiel, das diese drei Elemente in einer Tabelle verwendet:
…<table><thead><tr><th>Monat</th><th>Besucher</th><th>Bytes</th>
</tr></thead><tfoot><tr><th>Gesamt</th><th>23423</th><th>3234 MB</th>
</tr></tfoot><tbody><tr><td>Januar</td><td>3234</td><td>132 MB</td>
</tr>……
<tr><td>Dezember</td><td>7193</td><td>894 MB</td>
</tr></tbody></table>
…
Listing 5.4 /Beispiele/Kapitel005/5_1_4/index.html
Wenn Sie den HTML-Quelltext und die dazugehörende Darstellung in Abbildung 5.5
betrachten, werden Sie feststellen, dass der Webbrowser in der Lage ist, die Reihen-
folge der Tabelle selbstständig richtig wiederzugeben. Obwohl im Quelltext der Fuß-
bereich ganz oben angegeben wurde, wird er vom Webbrowser passend unten
angezeigt.
5 Tabellen, Hyperlinks und Bilder
184
Abbildung 5.5 Eine längere Tabelle mit den Elementen <thead>, <tbody> und
<tfoot> im Einsatz
Die Aufteilung einer Tabelle in drei verschiedene Bereiche ist optional und beein-
flusst in der Regel auch nicht die Darstellung im Webbrowser. Es handelt sich um
eine rein semantische Darstellung. Allerdings werden diese Elemente häufig verwen-
det, um das Erscheinungsbild dieser Bereiche mit CSS zu formatieren.
Abbildung 5.6 Die Aufteilung einer Tabelle in drei Bereiche ist zunächst rein semantischer
Natur. Erst mit CSS können Sie diese Bereiche gesondert visualisieren.
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th><thead>
<tbody>
<tfoot> </tfoot>
</tbody>
</thead>
5.1 Daten in einer Tabelle strukturieren
185
5
Auch beim Ausdruck sehr langer Tabellen über mehrere Seiten könnte der Webbrow-
ser diese Aufteilung verwenden, um auf jeder Seite den Kopf- und Fußbereich der
Tabelle mitauszudrucken, womit besser erkannt werden kann, in welcher Spalte die
einzelnen Daten stehen bzw. was die Daten bedeuten. Eine weitere Möglichkeit wäre,
bei langen Tabellen nur den Körperbereich zwischen <tbody> und </tbody> zu scrol-
len, während die Kopf- und Fußzeile fest stehen bleiben. Leider unterstützt noch kein
Webbrowser diese Funktionen, aber auch das können Sie u. U. selbst mit CSS und
gegebenenfalls JavaScript realisieren.
5.1.5 Spalten einer Tabelle gruppieren mit <colgroup> und <col>
So, wie Sie eben die Tabellenzeilen mit <thead>, <tbody> und <tfoot> in drei Bereiche
aufteilen konnten, können Sie mit den Elementen <colgroup> und <col> auch die ein-
zelnen Spalten in semantische und logische Bereiche aufteilen, sofern dies sinnvoll
erscheint. Eine Gruppierung von Spalten ist z. B. sinnvoll, um eine bestimmte Spalte
oder eine bestimmte Gruppe von Spalten mit einer bestimmten CSS-Formatierung
zu versehen, anstatt den Style für jede Zelle der Spalte zu wiederholen.
Die Elemente <colgroup> und <col> müssen Sie hinter dem öffnenden table-Element
und vor allen anderen Elementen wie tr, thead, tfoot oder tbody notieren. Eine Spal-
tengruppe öffnen Sie mit <colgroup> und schließen sie wieder mit </colgroup> (col-group = column group, deutsch: Spaltengruppe). Um eine Spalte zu gruppieren,
müssen Sie für jede Spalte (die sich über die komplette Spalte erstrecken soll) das
allein stehende Tag <col> verwenden. Wollen Sie mehrere Spalten in einem col-Ele-
ment zusammenfassen, können Sie dies mit dem Attribut span und der Anzahl der
Spalten als Attributwert machen.
Hierzu ein einfaches Beispiel, das das eben Beschriebene in der Praxis erläutert:
…<table><colgroup><col span="2" style="background-color:lightgrey;"><col style="background-color:snow;">
</colgroup><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
5 Tabellen, Hyperlinks und Bilder
186
</tr>……
</table>…
Listing 5.5 /Beispiele/Kapitel005/5_1_5/index.html
Abbildung 5.7 Hier wurden die ersten zwei Spalten zu einer Gruppe
mit »span="2"« zusammengefasst und zur Demonstration farblich mit
CSS hervorgehoben. Die letzte Spalte ist eine eigene Spaltengruppe.
Abbildung 5.8 Die semantische Aufteilung von Spalten in Gruppen. In der Abbildung sehen
Sie eine Gruppe mit zwei Spalten und mit einer Spalte.
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th>
<colgroup> </colgroup><col span="2"> <col>
5.1 Daten in einer Tabelle strukturieren
187
5
Wollen Sie hingegen für jede Spalte eine eigene Gruppe verwenden, können Sie diese
wie folgt realisieren:
<table><colgroup><col style="background-color: lightgrey;"><col style="background-color: snow;"><col style="background-color: lightgrey;">
</colgroup><tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr>…</table>
…
Jetzt wurde jede Spalte in einer eigenen col-Gruppe zusammengefasst. Der Vorteil
wird erst ersichtlich, wenn Sie Spalten mit CSS stylen wollen. Die semantische Auftei-
lung in drei Spalten finden Sie in Abbildung 5.9 dargestellt.
Abbildung 5.9 Semantische Aufteilung in drei Spalten
Wollen Sie <col> XHTML-konform verwenden, müssen Sie es mit <col /> schreiben.
<table>
<tr>
<tr>
<tr>
<tr>
</tr>
</tr>
</tr>
</tr>
<th>...</th>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</table>
<td>...</td> <td>...</td> <td>...</td>
<th>...</th> <th>...</th>
<colgroup> </colgroup><col><col><col>
5 Tabellen, Hyperlinks und Bilder
188
5.1.6 Tabellen beschriften mit <caption> bzw. <figcaption>
Zur Beschriftung einer Tabelle mit einem Titel können Sie entweder das caption-Ele-
ment verwenden, das unmittelbar nach dem öffnenden <table>-Tag verwendet wer-
den muss, oder Sie verwenden die neuen figure- und figcaption-Elemente.
Tabelle beschriften mit <caption>
Wie bereits erwähnt, muss das caption-Element gleich nach dem öffnenden <table>-
Tag folgen. Außerdem kann nur eine Beschriftung pro Tabelle verwendet werden.
Hierzu ein einfaches Beispiel:
…<table><caption>Browserstatistik 08/2015</caption>
<tr><th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
</tr>……
</table>…
Listing 5.6 /Beispiele/Kapitel005/5_1_6/index.html
Abbildung 5.10 Die Überschrift wird standardmäßig zentriert über der Tabelle angezeigt.
5.1 Daten in einer Tabelle strukturieren
189
5
<caption> mit CSS formatieren
Die Webbrowser stellen die Beschriftung gewöhnlich zentriert über der Tabelle dar.
Mit CSS ist es aber kein Aufwand, mithilfe der CSS-Eigenschaften text-align und
caption-side die Ausrichtung und die Position der Tabellenbeschriftung woanders
zu platzieren.
Wollen Sie einer Tabellenbeschriftung noch weitere Hinweise hinzufügen, können
Sie die neuen HTML5-Elemente detail und summary zwischen <caption> und </cap-
tion> setzen.
Abbildung 5.11 Informationen zum Auf- und Zuklappen dank der neuen
HTML5-Elemente »detail« und »summary«. Das Beispiel dazu finden Sie unter
»/Beispiele/Kapitel005/5_1_6/index2.html«.
Beschriften einer Tabelle mit <figcaption>
Auf das figcaption- und figure-Element wurde bereits in Abschnitt 4.2.3, »Geson-
derte Beschriftung von Inhalten mit <figure> und <figcaption>«, eingegangen. Es
bietet sich auch für Tabellen an, diese zwischen <figure> und </figure> zu verpacken
und eine Beschriftung dieser Tabelle am Anfang nach dem öffnenden <figure> oder
am Ende vor dem schließenden </figure> einzufügen. Hierzu ein Beispiel, wie Sie
eine Tabelle mit den neuen figure- und figcaption-Elementen beschriften können:
…<article><h1>Browserstatistik August 2015</h1><figure><table><tr>
5 Tabellen, Hyperlinks und Bilder
190
<th>Browser</th><th>Zugriffe</th><th>Prozent</th>
</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>
</tr>…</table><figcaption>Tabelle 1: Browserstatistik 08/2015</figcaption></figure></article>
…
Listing 5.7 /Beispiele/Kapitel005/5_1_6/index3.html
Abbildung 5.12 Tabellen beschriften mit <figure> und <figcaption>
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
Die Hyperlinks dürften wohl zu den wichtigsten Elementen von HTML gehören, weil
es damit erst möglich wird, sich von einer Webseite zur anderen zu bewegen. Hyper-
links, oft auch nur Links oder Verweise genannt, werden Sie benötigen, um Ihr Pro-
jekt zu strukturieren und zu verlinken. Ausgehend von Ihrer Hauptseite, benötigen
Sie oft Verweise zu weiteren Unterseiten und eventuell auch wieder Verweise zurück
zur Hauptseite. Erst durch die Verlinkung mehrerer Dateien wird eine Webseite zu
einer sinnvoll bedienbaren Webseite. Neben der Verlinkung eigener Inhalte können
Sie aber auch Links zu anderen Webseiten oder anderen Dokumenten erstellen, die
sich ganz woanders im Internet befinden.
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
191
5
Einen Link können Sie in HTML mit dem a-Element (a = anchor, deutsch: Anker)
erstellen. Der Text, den Sie zwischen <a> und </a> schreiben, heißt Linktext oder Ver-
weistext und kann aktiviert werden, wenn Sie im öffnenden <a>-Tag das href-Attri-
but verwenden. Als Linktext können Sie notieren, was Sie wollen, aber nicht immer
ist es hilfreich, einfach »Bitte hier klicken« hinzuschreiben. Mit einem sinnvollen
Linktext helfen Sie Ihren Besuchern, schneller dorthin zu gelangen, wo sie hinwollen,
und auch Personen mit Screenreadern. Zwischen <a> und </a> können auch andere
Elemente als ein Text stehen. Häufig finden Sie hier z. B. auch eine Grafik als Link
wieder.
Erlaubtes zwischen <a> und </a>
Wie bereits erwähnt, können Sie neben Text auch andere HTML-Elemente wie Grafi-
ken zwischen <a> und </a> verwenden. Mit HTML5 dürfen Sie sogar, im Gegensatz zu
HTML 4.01, gruppierende Elemente wie Absätze, Listen, Artikel, Blocksätze usw. ver-
wenden. Praktisch können Sie fast alles zwischen <a> und </a> einsetzen, abgesehen
von interaktiven Elementen wie Links, Formularelementen, audio, video. In HTML
4.01 waren nur sogenannte Inline-Elemente erlaubt (z. B. strong, em usw.), die zur
Textauszeichnung verwendet wurden. Trotzdem empfehle ich Ihnen nicht, zu viel
Inhalt in einen einzelnen Link zwischen <a> und </a> zu stecken. Screenreader wür-
den den Text mehrmals vorlesen, und Besucher könnten damit überfordert sein, da
sie daran gewöhnt sind, einzelne Links im traditionellen Link-Stil zu aktivieren.
Natürlich hängt dies auch vom Inhalt der Webseite ab. Ich werde hier nicht mehr
näher darauf eingehen, aber Sie wissen jetzt, dass Ihnen in HTML5 »mehr« HTML-Ele-
mente für Links zur Verfügung stehen. Wenn Sie extrem viel zwischen <a> und </a>gesteckt haben und sich nicht mehr sicher sind, ob es noch gültig ist, können Sie den
Quelltext auch einfach validieren (siehe Abschnitt 1.5.5, »Geschriebenes HTML über-
prüfen«).
Das wichtigste Attribut, mit dem das a-Element fast immer verwendet wird, ist das
href-Attribut. Mit dem href-Attribut geben Sie den Verweis an, wohin der Benutzer
gelangt, wenn er auf den Linktext klickt.
Abbildung 5.13 Der klassische Aufbau eines Hyperlinks
Ein Linktext wird gewöhnlich vom Webbrowser (meistens in Blau) unterstrichen.
Dies können Sie aber (wie immer) mit CSS jederzeit ändern.
<a href ="http://rheinwerk-verlag.de/">Verlagsseite</a> Der Text, den der Benutzer anklicken kann
Dies ist die Seite, wohin der Hyperlink führt
5 Tabellen, Hyperlinks und Bilder
192
Zum Nachlesen
Auf die Begriffe Verzeichnisnamen, Verzeichnisstrukturen, vollständige, absolute und
relative Pfadangaben wurde bereits in Abschnitt 3.3, »Exkurs: Namenskonvention
und Referenzierung«, eingegangen. Lesen Sie gegebenenfalls dort nach, wenn Sie in
den folgenden Abschnitten Probleme mit den dort verwendeten Begriffen haben.
5.2.1 Links zu anderen HTML-Dokumenten der eigenen Webseite einfügen
Wenn Sie Ihre Webseite erstellen, dürften diese Verweise wohl die ersten Links sein,
die Sie verwenden, um die losen Sammlungen von HTML-Dokumenten zu einer
zusammenhängenden Webseite zu strukturieren – genauer: die Navigation der Web-
seite zu erstellen. Wenn Sie einen Link zu einer anderen Seite derselben Webseite
angeben wollen, müssen Sie in der Regel nicht den kompletten Domainnamen mitan-
geben, sondern verwenden gewöhnlich eine relative URL. Folgende in Abbildung 5.14
abgedruckte Verzeichnisstruktur sei als Beispiel gegeben.
Abbildung 5.14 Verzeichnisstruktur für ein Beispiel von Links zu
anderen Seiten derselben Webseite
Die Verlinkung für die Startseite, hier index.html, zu den anderen Seiten links.html,
about.html und impressum.html sieht demnach in der Praxis wie folgt aus:
html
seiten
index.html
links.html
about.html
impres-sum.html
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
193
5
…<nav>Blog |<a href="seiten/links.html">Links</a> |<a href="seiten/about.html">Über mich</a> |<a href="seiten/impressum.html">Impressum</a>
</nav><h1>Mein Blog</h1><p>Neueste Berichte zu HTML</p>
…
Listing 5.8 /Beispiele/Kapitel005/5_2_1/index.html
Abbildung 5.15 Dank der Verlinkung über eine relative URL kann innerhalb der
Seiten derselben Webseite jede Seite besucht und betrachtet werden.
Natürlich müssen Sie auch die Links zu den anderen Seiten, wie hier im Beispiel mit
links.html, about.html und impressum.html, anpassen. Hierbei müssen Sie bei der
Angabe der relativen URL allerdings beachten (siehe Abbildung 5.14), dass sich die Sei-
ten (in diesem Beispiel) in einem Unterordner Namens seiten befinden. Bezogen auf
die Seite links.html, würden die Angaben für das Attribut href wie folgt aussehen:
…<nav><a href="../index.html">Blog</a> |Links |<a href="about.html">Über mich</a> |<a href="impressum.html">Impressum</a>
</nav>…
Listing 5.9 /Beispiele/Kapitel005/5_2_1/seiten/links.html
5 Tabellen, Hyperlinks und Bilder
194
Hier können Sie sehr schön sehen, wie Sie aus dem Unterordner seiten mit ../ (hier ../
index.html) zum übergeordneten Ordner navigieren, wo sich index.html befindet. Die
anderen beiden Dateien about.html und impressum.html befinden sich im selben
Ordner wie links.html, daher reicht es aus, nur den Dateinamen anzugeben. Ähnlich
müssen Sie auch die Dateien about.html und impressum.html verlinken.
Abbildung 5.16 Das HTML-Dokument »links.html«
5.2.2 Links zu anderen Webseiten einfügen
Links zu anderen Webseiten werden genauso notiert wie die Links zu den Seiten der-
selben Webseite. Nur mit dem Unterschied, dass Sie im Attribut href die komplette
Adresse, also die absolute URL, zu dieser Seite angeben müssen. Hierzu wieder ein
einfaches Beispiel, in dem Links auf externe Seiten enthalten sind:
…<article><header><h2>Entwurf zu HTML5.1</h2>
</header><p>Wie bereits berichtet hat das
<a href="http://www.w3.org/">World Wide Web Consortium</a> einen<a href="http://www.w3.org/html/wg/drafts/html/master/">neuen Entwurf</a> für HTML vorgelegt, welche inVersion 5.1 weiterentwickelt wird ...
</p><aside><h3>Weiterführende Links</h3><nav><ul><li><a href="http://www.w3.org/html/wg/drafts/html/master/">HTML 5.1 Nightly</a></li>
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
195
5
<li><a href="http://www.w3.org/">W3C</a></li><li><a href="http://www.whatwg.org/">WHATWG</a></li></ul></nav>
</aside></article>
…
Listing 5.10 /Beispiele/Kapitel005/5_2_2/index.html
Abbildung 5.17 Viele Webbrowser zeigen die Zieladresse des Links unten in der Statusleiste
an, wenn Sie mit der Maus darüber stehen. Aktivieren Sie den Link …
Abbildung 5.18 … wird die Zieladresse in den Webbrowser geladen und dargestellt.
5 Tabellen, Hyperlinks und Bilder
196
5.2.3 Links mit dem »target«-Attribut in einem neuen Fenster öffnen
Mit dem HTML-Attribut target vom a-Element können Sie dafür sorgen, dass ein Ver-
weisziel in einem neuen Fenster oder Tab geöffnet wird. Hierbei müssen Sie target
nur den Attributwert _blank übergeben. Ein Beispiel hierzu:
<p>Wie bereits berichtet, hat das<a target="_blank" href="http://www.w3.org/">W3C</a> einenneuen Entwurf für HTML vorgelegt, welcher in Version 5.1weiterentwickelt wird ...
</p>
Würden Sie in diesem Beispiel den Linktext W3C aktivieren, würde die Zieladresse
(hier: http://www.w3.org) hier tatsächlich in einem neuen Fenster oder Tab geöffnet
und geladen werden. Ziel der Verwendung von target="_blank" ist natürlich vorran-
gig, den Besucher der Seite nicht zu »verlieren«, sondern die Seite offen zu lassen,
damit er dort zurückkehrt, wenn er die Seite im neu geöffneten Fenster oder Tab gele-
sen hat.
Das target-Attribut war in HTML 4.01 in der Strict-Variante nicht mehr erlaubt und ist
aber mit HTML5 wieder voll einsatzfähig. Neben dem am meisten verwendeten Attri-
butwert _blank können Sie hier noch _self (= aktuelles Fenster), _parent (= Eltern-
Fenster), _top (= oberste Fenster-Ebene) und Namen von Fenstern verwenden, die mit
einen JavaScript verarbeitet werden können.
Das Attribut »target="_blank"« verwenden oder nicht?
Auch wenn viele Webseiten dieses Attribut recht häufig und gerne verwenden, sollten
Sie nicht auf Teufel komm raus für jeden Link ein neues Fenster öffnen. In der Praxis
sollten Sie es dem Nutzer überlassen, ob dieser für einen Link eine neue Seite öffnen
will oder nicht. Auch wenn Sie es vielleicht gewohnt sind, unzählige Tabs und mehrere
Webseiten auf einmal geöffnet zu haben, so sollten Sie immer an die etwas unerfah-
reneren Besucher denken, die eben nicht so im World Wide Web unterwegs sind oder
eben nicht so unterwegs sein wollen. Setzen Sie das Attribut target="_blank" spar-
sam ein und, wenn möglich, weisen Sie den Besucher darauf hin, dass ein neues Fens-
ter oder Tab geöffnet wird, wenn er den Link aktiviert.
5.2.4 E-Mail-Links mit »href=mailto:...«
Sicherlich kennen Sie auch die Sorte von Links, die Sie aktivieren, worauf sich die
E-Mail-Anwendung mit einer bestimmten E-Mail-Adresse öffnet. Auch diese Links
werden mit dem a-Element und dem href-Attribut erzeugt. Solche E-Mail-Verweise
beginnen bei href mit mailto:, gefolgt von der gewünschten E-Mail-Adresse, z. B.:
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
197
5
…<footer><a href="mailto:webmaster@dieter-baer.de">E-Mail senden</a>
</footer>…
Listing 5.11 /Beispiele/Kapitel005/5_2_4/index.html
Abbildung 5.19 Wenn Sie mit der Maus über dem Link stehen bleiben,
können Sie gewöhnlich in der Statusleiste die E-Mail-Adresse sehen, die mit
diesem Link verknüpft ist. Aktivieren Sie den Link …
Abbildung 5.20 … wird häufig die E-Mail-Anwendung mit der E-Mail-Adresse geöffnet.
5 Tabellen, Hyperlinks und Bilder
198
Die Funktionalität eines »mailto«-Verweises ist nicht zuverlässig
Hierzu muss angemerkt werden, dass es keine Garantie gibt, dass eine solche mailto-
Verknüpfung auch funktioniert. Dafür muss entweder der Webbrowser das Erstellen
und Versenden von E-Mail unterstützen, oder es muss bei einem mailto-Verweis eine
lokale E-Mail-Anwendung gestartet werden. Wenn der Besucher keine lokale E-Mail-
Anwendung verwendet bzw. eingerichtet hat, sondern lediglich das klassische Web-
mail im Webbrowser nutzt, funktioniert der mailto-Verweis nur, wenn der Benutzer
den Webbrowser entsprechend konfiguriert hat. Außerdem gibt es aber auch noch
Webbrowser, die man dafür gar nicht konfigurieren kann. Es ist daher wohl immer
sinnvoll und empfehlenswert, wenn Sie die E-Mail-Adresse zusätzlich in lesbarer
Form angeben, sodass Besucher, die den E-Mail-Verweis nicht ausführen können,
Ihnen trotzdem eine E-Mail senden können.
Achtung vor Spam!
Leider müssen Sie aufgrund solcher E-Mail-Adressen auf der Webseite früher oder
später mit unerwünschten Werbe-E-Mails (Spam) rechnen, weil es Webcrawler gibt,
die Webseiten nach E-Mail-Adressen durchsuchen. Sie haben sogar die Pflicht, die
E-Mail-Adresse im Impressum zu nennen (§5 Allgemeine Informationspflicht; http://
www.gesetze-im-internet.de/tmg/__5.html). Der einzige Schutz wäre, die E-Mail-
Adresse nicht im Quelltext zu nennen. Die erste Möglichkeit, dies zu vermeiden,
wäre die Einbindung als Grafik. Allerdings wäre dies wieder diskriminierend gegen-
über Personen, die auf Screenreader angewiesen sind, und auch so ist eine »Grafik-
E-Mail-Adresse« rechtlich bedenklich. Häufig sind noch Versionen im Einsatz, in denen
das @-Zeichen einfach durch (at) ausgetauscht wird (z. B. webmaster (at) dieter-
baer.de). Ebenso wird auch gerne noch der Punkt mit (dot) beschrieben (z. B.: web-
master (at) dieter-baer (dot) de). Natürlich bedeutet das dann auch, dass der Besu-
cher die E-Mail-Adresse von Hand eingeben muss.
Alternativ könnten Sie auch die E-Mail-Adresse im Unicode-Format mit numerischen
Entitäten angeben. Bezogen auf 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
jetzt nicht mehr im Quelltext so einfach erkennen. Ein richtiger Schutz ist das aller-
dings nicht. Auch die Softwareentwickler von Spam-Crawlern wissen, wie man sol-
che Informationen verwerten kann. Eine interessante Webseite, wie Sie es besser
machen können, Ihre E-Mail-Adresse z. B. mit JavaScript zu verstecken, finden Sie
hier: http://alistapart.com/article/gracefulemailobfuscation.
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
199
5
5.2.5 Links zu anderen Inhaltstypen setzen
Wenn Sie Links zu anderen, nicht im Web gebräuchlichen Dokumententypen wie
z. B. Word-, Excel-, PDF-Dokumenten setzen, hängt es vom Webbrowser ab, wie er die-
sen Dokumententypen weiterbehandelt. Darauf haben Sie als Webentwickler keinen
Einfluss. Hier lautet zunächst die allgemeine Empfehlung, weitverbreitete Formate
zu verwenden. So ist die Wahrscheinlichkeit höher, dass bei einem Link auf ein PDF-
Dokument der Webbrowser einen entsprechenden PDF-Reader aufruft und das
Dokument darin zum Lesen öffnet, als wenn der Link zum Inhaltstyp ein plattform-
abhängiges oder herstellerspezifisches Dokument ist (wie z. B. ein Word-Dokument).
Hierzu ein einfaches Beispiel:
…<h1>Verweis auf andere Inhaltstypen</h1><p>Ein PDF-Dokument öffnen: <a href="dokument.pdf">PDF</a></p><p>Einen MOV-Film öffnen: <a href="ganges.mov">MOV</a></p><p>Ein Word-Dokument öffnen: <a href="worddokument.doc"
type="application/msword">DOC</a></p>…
Listing 5.12 /Beispiele/Kapitel005/5_2_5/index.html
Abbildung 5.21 Hier haben Sie drei Links auf verschiedene Inhaltstypen.
Was bei diesen drei im Beispiel verwendeten Links jetzt genau passiert, kann nicht
100%ig vorhergesagt werden und hängt vom Webbrowser ab. Beim PDF-Dokument
dürfte der Webbrowser wissen, wie er damit umzugehen hat. Schwieriger dürfte es
mit dem Film im MOV-Format sein, weil dafür gewöhnlich ein QuickTime-Plug-in
von Apple benötigt wird. Einige Webbrowser bieten dazu an, dass entsprechende
Plug-in herunterzuladen und zu installieren. Andere aber wiederum nicht.
Selbiges gilt auch für das Word-Dokument. Ist Word auf Ihrem Rechner installiert,
bietet der Webbrowser häufig einen Dialog an, das Dokument mit Microsoft Word zu
öffnen, oder aber die Möglichkeit, eine entsprechende Anwendung auszuwählen, mit
5 Tabellen, Hyperlinks und Bilder
200
der Sie dieses Dokument öffnen wollen. Häufig wird auch noch zusätzlich die Mög-
lichkeit zum Herunterladen des Dokuments angeboten.
In Abbildung 5.22 kennt der Webbrowser die Standardverknüpfung der Anwendung
mit dem Word-Dokument auf dem System. Die Anwendung zum Öffnen des Doku-
ments kann hier aber auch geändert werden. Auch ein Herunterladen mit Datei
speichern wird angeboten.
Abbildung 5.22 Öffnen eines Word-Dokuments im Webbrowser
Plug-ins nachrüsten
Bei vielen Webbrowsern gibt es die Möglichkeit, verschiedene Dateiformate über
Plug-ins oder Add-ons nachzurüsten, um eine bestimmte Datei anzuzeigen oder wie-
derzugeben. Wenn Sie wirklich einen solchen Inhaltstyp auf Ihrer Webseite anbieten,
der ein bestimmtes Plug-in oder Add-on benötigt, sollten Sie den Besucher vorher
darauf hinweisen. Ob dieser allerdings das Plug-in oder Add-on installiert, nur um
den einen Inhalt betrachten zu können, bleibt fraglich und hängt wohl auch vom
Inhalt ab (ob sich der Aufwand lohnt). Mit HTML haben Sie keinen Einfluss darauf.
Inhaltstyp mitangeben
Bei besonderen Inhaltstypen können Sie dem Webbrowser auch den Internet-MIME-
Typ mit dem type-Attribut im öffnenden <a>-Tag mitteilen, wie dies im Beispiel mit
application/msword für ein Word-Dokument gemacht wurde. Die Informationen sind
für den Webbrowser und auch andere Webclients sehr nützlich. Sinnvoll ist eine sol-
che Angabe des Dateiformats eigentlich fast immer, wenn das Linkziel kein HTML-
Dokument ist. Eine Liste mit bekannten MIME-Typen finden Sie in Abschnitt A.19,
»MIME-Typen (Internet Media Type)«.
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
201
5
Informieren Sie den Besucher darüber, was sich hinter einem Link verbirgt
Wenn Sie Nicht-HTML-Dokumente auf Ihrer Webseite anbieten, sollten Sie den Besu-
cher auf jeden Fall darüber informieren, was sich hinter dem Link versteckt und,
eventuell auch, wie groß diese Datei ist. Sie können hierzu das globale title-Attribut
im öffnenden <a>-Element verwenden, aber es ist auch empfehlenswert, genauere
Angaben direkt beim Linktext zu erwähnen. Ein Negativbeispiel, wie es nicht
gemacht werden sollte, sieht so aus:
<a href="jahresumsatz.pdf">Jahresumsatz 2014</a>
Der Besucher wird hier nur den Linktext Jahresumsatz 2014 zu sehen bekommen
und vielleicht verdutzt reagieren, wenn dieser Link ein PDF-Dokument ist, das viel-
leicht etwas länger zum Laden benötigt. Besser ist daher, Folgendes zu schreiben:
<a title="Öffnet die PDF-Datei mit dem Jahresumsatz von 2014"href="jahresumsatz.pdf">Jahresumsatz 2014 (PDF, 3,9 MB)
</a>
5.2.6 Downloadlinks mit dem »download«-Attribut hinzufügen
Neu mit HTML5 ist die Möglichkeit, Links als Downloadverweis hinzuzufügen – und
dies unabhängig vom Inhaltstyp (= MIME-Typ) des Linkziels. Für diesen Zweck wird
das Attribut download im öffnenden <a>-Tag verwendet. Hier nochmals derselbe
HTML-Code vom Beispiel /Beispiele/Kapitel005/5_2_5/index.html zuvor, nur werden
jetzt alle drei Dateien mit dem download-Attribut zum Download angeboten:
…<h1>Verweis auf anderer Inhaltstypen</h1><p>Ein PDF-Dokument herunterladen:
<a href="dokument.pdf" download>PDF</a></p><p>Einen MOV-Film herunterladen:
<a href="ganges.mov" download="film.mov">MOV</a></p><p>Ein Word-Dokument herunterladen: <a href="worddokument.doc"
download="worddokument.doc">DOC</a></p><p>Ein HTML-Dokument herunterladen: <a href="website.html"
download="website.html">HTML</a></p>…
Listing 5.13 /Beispiele/Kapitel005/5_2_6/index.html
Mit dem Attribut download weisen Sie einen Webbrowser an, diese Datei zum Down-
load anzubieten, auch wenn er die Datei selbst anzeigen könnte oder das entspre-
5 Tabellen, Hyperlinks und Bilder
202
chende Plug-in bzw. Add-on dazu kennt, das er für gewöhnlich für einen solchen
Inhaltstyp verwenden würde.
Das Attribut download können Sie auch als allein stehendes Attribut verwenden, wie
im ersten Beispiel mit dem PDF-Dokument zu sehen ist. Der Name der Datei, die he-
runtergeladen wird, entspricht dann der Angabe in href (hier: dokument.pdf). Enthält
der Link in href keinen sinnvollen Namen, können Sie dem download-Attribut auch
einen anderen Namen zuweisen, wie es im Beispiel mit dem MOV-Film der Fall ist, wo
der eigentliche Dokumentenname ganges.mov lautet, der Downloadname der Datei
dann aber einfach film.mov heißt. Bei XHTML müssen Sie bei download immer einen
Dateinamen verwenden, weshalb im dritten Beispiel mit dem Word-Dokument für
href und download derselbe Dokumentenname verwendet wird. Das letzte Beispiel
mit dem HTML-Dokument soll nur demonstrieren, dass selbst webbrowsertypische
Inhaltstypen wie hier ein HTML-Dokument mit dem Attribut download wirklich nur
noch als Download angeboten werden.
Den Besucher darüber informieren, was hier heruntergeladen wird?
Wie auch schon beim Verlinken von Nicht-HTML-Dokumenten sollten Sie den Leser
darauf hinweisen, was er hier herunterlädt und womit er das Dokument betrachten
oder weiterverwenden kann. Wenn Sie z. B. Excel-Tabellen mit einem Jahresumsatz-
bericht zum Download anbieten, sollten Sie den Leser auch darüber informieren,
welche Software er benötigt, um diese Tabelle zu betrachten.
Dasselbe gilt auch für ZIP-verpackte Archive. Auch hier sollte ein zusätzlicher Hin-
weis oder ein Link zu einer Software hinzugefügt werden, wie ein solches Archiv ent-
packt werden kann. Bedenken Sie, dass viele Besucher nichts mit Dateiendungen wie
*.odt, *.xls, *.zip, *.tar.bz usw. anfangen können. Halten Sie es nicht für selbstverständ-
lich, bloß weil Sie täglich mit unzähligen Datenformaten zu tun haben, dass Ihre
Besucher dies auch tun. Auch empfiehlt es sich, beim Download die Dateigröße mit-
anzugeben. Der Download eines umfangreichen ZIP-Archivs könnte somit wie folgt
notiert werden:
…<a title="Jahresumsatz im Excel-Format als ZIP-Archiv verpackt"
href="archiv.zip" download="jahresumsatz2014.zip">Jahresumsatz 2014 (ZIP-Archiv; 2,5 MB)</a>
<small>(Um das ZIP-Archiv zu entpacken, benötigen Sie einPackprogramm wie z.B. 7-Zip. Die Jahresumsätze sindim Excel-Format gehalten und benötigen somit eineSoftware, die Excel-Tabellen betrachten kann.)
</small>…
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
203
5
Hier wurde neben dem title-Attribut auch noch das Dateiformat (hier: ZIP-Archiv)
und die Dateigröße erwähnt. Zusätzlich wurden noch ein paar klein gedruckte Infor-
mationen zwischen <small> und </small> notiert.
Alte Webbrowser, die das »download«-Attribut nicht kennen?!
Bei alten Webbrowsern, die das neue download-Attribut nicht kennen, wird vorge-
gangen wie bisher, als wäre das download-Attribut nicht vorhanden. Inhaltstypen, die
der Webbrowser nicht kennt, werden wie gehabt entweder zum lokalen Speichern
angeboten, oder Sie können aus einer Liste von Anwendungen auswählen, mit wel-
cher Sie dieses Dokument öffnen wollen. Eine beliebte und fast immer funktionie-
rende Methode ist, die Dateien in das ZIP-Format zu packen und anzubieten.
5.2.7 Links zu bestimmten Teilen einer Webseite setzen
Nichts kann für den Besucher lästiger sein, als eine sehr lange wissenschaftliche
Abhandlung eines speziellen Themas auf einer Webseite zu lesen und dabei sehr
lange hoch- und herunterscrollen zu müssen, um zu einem speziellen Abschnitt zu
gelangen. Für solche Fälle können Sie sogenannte Anker mit dem globalen Attribut
id setzen, den Sie dann mit einem gewöhnlichen Link mit dem a-Element anspringen
können. Vorbildlich werden solche Zielanker z. B. bei Wikipedia für das Inhaltsver-
zeichnis eines Themas verwendet. Für eine Verlinkung zu einem bestimmten
Bereich einer Webseite benötigen Sie nur:
� einen Anker (Sprungmarke), den Sie mit dem Attribut id="ankername" erstellen.
Zum Beispiel:
<h1 id="ankername">Überschrift xyz</h1>
� einen Link, der auf den Anker mit href="#ankername" verweist. Hierzu wird das
Doppelkreuz-Zeichen # vor den Ankernamen geschrieben. Zum Beispiel:
<a href="#ankername">Zur Überschrift xyz springen</a>
Hierzu ein einfaches Beispiel, wie Sie solche Sprungmarken in der Praxis setzen und
verwenden können:
…<h1 id="top">Inhaltsverzeichnis</h1><ul><li><a href="#intro">Einführung in HTML</a></li><li><a href="#syntax">Die Syntax von HTML</a></li><li><a href="#versionen">Versionen von HTML</a></li><li><a href="#techniken">Techniken rund um HTML</a></li>
5 Tabellen, Hyperlinks und Bilder
204
<li><a href="#praxis">Einstieg in die Praxis</a></li></ul><h1 id="intro">Einführung in HTML</h1><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="syntax">Die Syntax von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="versionen">Versionen von HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="techniken">Techniken rund um HTML</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p><h2 id="praxis">Einstieg in die Praxis</h2><p>Lorem ipsum dolor sit amet … <p><p><a href="#top">Zum Inhaltsverzeichnis</a></p>
…
Listing 5.14 /Beispiele/Kapitel005/5_2_7/index.html
In Abbildung 5.23 sehen Sie das Beispiel bei der Ausführung, wo Sie dank Sprungmar-
ken schneller zum gewünschten Abschnitt gelangen.
Abbildung 5.23 Ein etwas längeres Dokument, in dem Sie dank Sprungmarken …
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
205
5
Aktivieren Sie z. B. den Link Techniken rund um HTML, wird direkt zum entsprechen-
den Abschnitt mit der Sprungmarke gesprungen, wie Sie in Abbildung 5.24 sehen.
Unterhalb von jedem Abschnitt wurde außerdem ein weiterer Link zur Sprungmarke
zurück nach oben zum Inhaltsverzeichnis eingefügt.
Abbildung 5.24 … schneller zum gewünschten Abschnitt gelangen
Anker setzen mit dem »id«-Attribut (»id="ankername"«)
Bevor Sie also einen Link zu einem bestimmten Teil innerhalb einer Webseite erstel-
len können, müssen Sie die Sprungmarke (oder auch einen Anker) mit dem globalen
Attribut id innerhalb eines öffnenden HTML-Tags festlegen. Im Beispiel wurde dies
bei den Hauptüberschriften <h1> und <h2> gemacht (z. B. <h2 id="techniken">). Der
Attributwert von id muss mit einem Buchstaben oder einem Unterstrich anfangen
(auf keinen Fall mit einer Zahl) und darf keine Leerzeichen enthalten. Es ist außerdem
ratsam, einen aussagekräftigen Namen zu verwenden, um nicht den Überblick zu
verlieren und um auch hier einen semantisch sinnvollen Namen für das HTML-
Dokument zu verwenden. Auf nichtssagende Bezeichnungen wie anker1, anker2 usw.
sollten Sie verzichten. Außerdem wird auch zwischen Groß- und Kleinschreibung
geachtet.
»name«-Attribut aus HTML 4.01 oder »id«-Attribut aus HTML5
Die Verwendung des id-Attributs für das Setzen eines Ankers mit z. B. <h2 id="tech-niken"> wurde neu mit HTML5 eingeführt. Mit HTML 4.01 wurde dies noch mit dem
Attribut name realisiert (z. B.: <h2 name="techniken">).
5 Tabellen, Hyperlinks und Bilder
206
Auf einen Anker verweisen mit »#ankername«
Um einen Link zu den Ankern zu verwenden, müssen Sie im öffnenden <a>-Tag den
Attributwert zum Anker in href angeben. Lautet der Anker z. B. <h2 id="techniken">,
müssen Sie vor diesen Ankernamen (hier mit: »techniken«) noch das Doppelkreuz-Zei-
chen # schreiben. Bezogen auf unser Beispiel, müssten Sie dies wie folgt notieren:
<li><a href="#techniken">Techniken rund um HTML</a></li>
Wenn Sie diesen Link aktivieren, wird im HTML-Dokument zum Element gesprun-
gen, wo der Wert des Attributs id gleich »techniken« lautet. In diesem Beispiel wäre es
zum <h2>-Element mit der Überschrift Techniken rund um HTML gesprungen.
Links zu einem bestimmten Bereich einer anderen Webseite erstellen
Genauso ist es möglich, einen Link zu einem Bereich eines anderen HTML-Doku-
ments zu erstellen. Voraussetzung hierfür ist, dass das andere HTML-Dokument
auch einen entsprechenden Anker enthält. Wenn sich der Anker in einem anderen
Dokument befindet, können Sie wie folgt einen Verweis dorthin erstellen:
<a href="tech.html#techniken">Techniken rund um HTML</a>
Hiermit würden Sie in einem anderen HTML-Dokument, das sich im selben Ver-
zeichnis befindet und dessen Dateiname tech.html lautet, zum Bereich mit dem
Anker #techniken springen.
Befindet sich die Datei mit dem Anker gar auf einer anderen Webseite, müssen Sie
die komplette URL dorthin angeben:
<a href="http://www.domain.de/pfad/tech.html#techniken">…</a>
Selbstverständlich ist es auch möglich, einen Link auf Bereiche von fremden Websei-
ten zu verwenden. Allerdings sollte klar sein, dass Sie hier keinen Anker setzen, son-
dern nur bereits vorhandene Anker verlinken können. Hier z. B. ein Link zu einem
verankerten Bereich einer Wikipedia-Seite:
< a href="http://de.wikipedia.org/wiki/Html#Versionen">…</a>
Hier würden Sie direkt zur Wikipedia-Seite mit dem Eintrag HTML zum Anker #Ver-
sionen springen. Allerdings setzt dies voraus, dass der Anker existiert – was zur
Drucklegung des Buches zwar noch der Fall war, sich aber jederzeit ändern könnte.
Wenn der Anker nicht mehr existiert oder falsch ist, wird die Webseite aufgerufen
und der Anker ignoriert, wie dies ohne eine Angabe von #ankername bei der Verlin-
kung mit dem a-Element der Fall gewesen wäre.
5.2 »Elektronische« Verweise aka Hyperlinks mit <a>
207
5
5.2.8 Die HTML-Attribute für das HTML-Element <a>
Zum Schluss sollen hier noch die HTML-Attribute für die Links erläutert werden, die
u. a. auch für die Suchmaschinen recht nützlich sein können. In Tabelle 5.1 finden Sie
eine Übersicht über alle vorhandenen Attribute für das a-Element. Einige davon
haben Sie ja bereits kennengelernt.
Attribut Beschreibung HTML
download Damit geben Sie an, dass Sie das Verweisziel zum
Download anbieten, auch wenn der Webbrowser
den Inhaltstyp des Ziels selbst darstellen könnte.
5
href Damit geben Sie die URL der Seite an, wo der Link
hinführt, wenn dieser aktiviert wird.
hreflang Hier können Sie die Sprache des verlinkten Doku-
ments angeben. Als Angaben sind die üblichen Spra-
chenkürzel erlaubt (z. B. de für Deutschland).
media Damit können Sie Angaben zu den Medien machen,
wofür das Verweisziel optimiert wurde. Sie können
entweder Medientypen, durch Kommata getrennt,
aufzählen oder all für alle Medientypen angeben.
5
rel Das Attribut kennen Sie bereits vom link-Element
aus Abschnitt 3.5.1, »Die HTML-Attribute für das
allein stehende HTML-Element <link>«, wo Sie
zurückblättern können, wenn Sie mehr Informatio-
nen benötigen. Hiermit bestimmen Sie den Typ der
Verlinkung. Speziell für das a-Element sind hier noch
die rel-Attributwerte bookmark, external, nofollow
und noreferrer von besonderer Bedeutung, da diese
nur im a-Element verwendet werden können.
� rel="bookmark": Hier legen Sie fest, dass das Ver-
weisziel ein übergeordneter Abschnitt (bzw.
Dokument) des aktuellen Dokuments ist. Dies
stellt praktisch eine Verlinkung zurück zu einem
umfangreichen HTML-Dokument dar, wie es bei
wissenschaftlichen oder technischen Dokumen-
ten der Fall ist. In der Praxis wird dieser Linktyp
auch für Permalinks verwendet, um eine ältere
Version des aktuellen Dokuments ansehen zu
können.
Tabelle 5.2 Attribute für Links mit »a«-Element
5 Tabellen, Hyperlinks und Bilder
208
Veraltete Attribute
Die ehemaligen Attribute charset, coord, name, rev und shape werden nicht mehr
von HTML5 unterstützt und sind daher auch nicht in dieser Tabelle aufgelistet.
� rel="external": Damit geben Sie an, dass der Link
zu einem externen Webangebot gehört. Häufig
wird dieser mit CSS noch gesondert formatiert.
� rel="nofollow": Damit weisen Sie die Webcraw-
ler an, dem Link nicht zu folgen.
� rel="noreferrer": Hiermit weisen Sie den Web-
browser des Besuchers an, beim Anklicken des
Links keine Referrer-Adresse zu verwenden,
wodurch vermieden werden sollte, dass der Web-
server der Zieladresse keine Informationen erhält,
von woher der Besucher gekommen ist.
Nicht verwenden hingegen können Sie die Attribut-
werte icon, pingback, prefetch und stylesheet für a-
Elemente.
target Hier tragen Sie ein, wo das Verweisziel geöffnet wer-
den soll. Mögliche Werte dafür sind:
� _blank: neues Fenster/Tab
� _parent: Eltern-Fenster
� _self: aktuelles Fenster
� _top: oberste Fensterebene
� framename: Name des Fensters, das mit JavaScript
geöffnet und auch darin vergeben wurde
type Damit können Sie dem Webbrowser den MIME-Typ
(Dateiformat) nennen, zu welchem die verlinkte
Datei gehört. Eine Liste bekannter MIME-Typen fin-
den Sie in Abschnitt A.19, »MIME-Typen (Internet
Media Type)«. Diese Angabe ist immer dann sinnvoll,
wenn das Ziel kein HTML-Dokument ist.
5
Attribut Beschreibung HTML
Tabelle 5.2 Attribute für Links mit »a«-Element (Forts.)
493
13
Kapitel 13
Das Layout mit CSS gestalten
Wenn Sie das Buch bis hierher gelesen haben und mit dem Box-Modell
und der Positionierung von CSS vertraut sind, können Sie sich endlich
an praxisnähere Beispiele heranwagen. In diesem Kapitel wird konkret
das Erstellen von Layouts mit CSS behandelt.
In diesem Kapitel werden Sie einige gängige Techniken zum Layouten von Webseiten
mit CSS kennenlernen. Es gibt sehr viele Ansätze, ein Layout mit CSS zu erstellen, und
falls Sie sich zum ersten Mal mit diesem Thema befassen, könnte die Flut an Informa-
tionen hierzu zunächst erschlagend wirken.
Wenn Sie sich im Internet bereits ein wenig nach Layouts mit CSS umgesehen haben,
dürften Sie schnell auf fertige CSS-Frameworks gestoßen sein, die einem das Leben
erheblich einfacher machen können. Auf solche CSS-Frameworks wird in diesem
Buch noch an anderer Stelle eingegangen. In diesem Kapitel werden Sie zunächst die
Grundlagen zur Erstellung eines Layouts mit CSS kennenlernen.
<main> oder <div id="main">
Ich habe in den Beispielen für den Hauptinhalt das neue HTML5-Element <main> ver-
wendet. Ob Sie hier <main> verwenden oder <div>, müssen Sie selbst entscheiden.
Mehr Informationen zu <main> finden Sie in Abschnitt 4.3.8, »<main> – Ein HTML-
Element für den Hauptinhalt«.
Zuvor noch eine kurze Übersicht, was Sie in diesem Kapitel alles erwartet:
� Sie lernen verschiedene Techniken kennen, mit denen Sie zweispaltige Layouts
erstellen können.
� Ebenso werden Sie verschiedene Techniken für dreispaltige Layouts kennenlernen.
� In diesem Kapitel wird umfassender auf das Thema Responsive Layouts eingegan-
gen, d. h., Sie lernen flexible Layouts zu erstellen, die die Eigenschaften des Endge-
räts des Besuchers berücksichtigen.
� Auch auf etwas fortgeschrittene Themen wie das Erstellen eines Layouts mit
einem Raster (englisch: Grid) wird eingegangen.
13 Das Layout mit CSS gestalten
494
13.1 Exkurs: Was bedeutet feste und flexible Breite?
In den nächsten Abschnitten werden Sie eine Menge verschiedene Layouts kennen-
lernen. Dabei werden Sie Methoden mit einer festen und andere Methoden mit einer
flexiblen Breite verwenden. An dieser Stelle werde ich Ihnen kurz den Unterschied
und die Vor- und Nachteile von festen und flexiblen Layouts erläutern.
13.1.1 Ein Layout mit fester Breite
Layouts mit fester Breite werden gewöhnlich in Pixel angegeben und ändern sich
auch nicht, wenn das Webbrowser-Fenster vergrößert oder verkleinert wird.
Die Vorteile von Layouts mit fester Breite sind:
� Größe und Position von Elementen können pixelgenau festgelegt werden.
� Das relative Verhältnis bei verwendeten Bildern bleibt im gleichen Verhältnis zum
Rest der Seite.
� Sie haben weitaus mehr Kontrolle über die einzelnen Elemente als beim flexiblen
Layout, und auch die Umsetzung ist hierbei häufig wesentlich einfacher.
Zu den Nachteilen von Layouts mit fester Breite gehören allerdings:
� Das Layout ist unflexibel und passt sich sehr schlecht an sehr kleinen oder sehr
großen Bildschirmen an. In der Praxis funktionieren solche Layouts am besten in
der Auflösung, für die sie erstellt worden sind, was in der Regel Desktopbild-
schirme sind.
� Wird die Schriftgröße im Webbrowser geändert (gezoomt), kann es passieren, dass
der Text nicht mehr im dafür vorgesehenen Platz bleibt.
� Bei Bildschirmen mit hoher Auflösung wirkt alles sehr klein und verloren. Oft ent-
steht zwischen dem Seitenrand und dem eigentlichen Inhalt eine große unan-
sehnliche Lücke.
13.1.2 Ein Layout mit flexibler Breite
Bei Layouts mit flexibler Breite erfolgt die Maßangabe gewöhnlich in Prozent.
Dadurch passt sich bei einer Änderung des Webbrowser-Fensters auch das Layout
mit an.
Die Vorteile einer flexiblen Breite sind:
� Die Webseite reagiert flexibel auf die Änderung der Größe des Webbrowser-Fens-
ters, und das Layout dehnt sich über die Bildschirmfläche aus oder wird ge-
schrumpft.
� Das komplette Webbrowser-Fenster kann ausgefüllt werden, und es entstehen
keine unschönen Lücken bei extrem hoher Bildschirmauflösung.
13.2 Ein zweispaltiges Layout erstellen
495
13
� Auch bei einer Vergrößerung der Schrift wächst das Layout mit, weil sich die Seite
ausdehnen kann.
Als Nachteile einer flexiblen Breite sind zu nennen:
� Eine flexible Breite ist etwas schwieriger zu kontrollieren und auch nicht so ein-
fach zu realisieren.
� Das Layout kann sich u. U., durch die Flexibilität, deutlich negativ auswirken,
wenn z. B. der Bildschirm extrem breit ist und die Textzeilen unendlich lang wer-
den. Auch bei extrem kleinen Bildschirmen können die Textzeilen so weit zusam-
mengestaucht werden, dass nur noch einzelne Wörter pro Zeile vorhanden sind.
In diesem Fall können Sie eventuell Abhilfe schaffen mit den CSS-Eigenschaften
min-width bzw. max-width.
� Fixe Elemente wie Bilder können aus einem dafür vorgesehenen Bereich bei einer
zu kleinen Bildschirmgröße herausragen und so anderen Text überdecken. Aber
auch Bilder lassen sich flexibel gestalten.
13.2 Ein zweispaltiges Layout erstellen
Als Erstes werden Sie einige Techniken zu den klassischen zweispaltigen Layouts ken-
nenlernen. Bei einem zweispaltigen Layout enthält meistens eine größere Spalte den
Hauptinhalt der Webseite und ein kleinerer Teil entweder die Navigation oder ein-
fach eine weitere Seitenleiste mit marginalen Informationen und/oder weiteren
Links. Bei dem Beispiellayout, wie es in Abbildung 13.1 zu sehen ist, sei das Haupt-
augenmerk auf die beiden Spalten mit dem Hauptinhalt und (hier) der Seitenleiste
gerichtet.
Abbildung 13.1 Eine von vielen Möglichkeiten für ein klassisches zweispaltiges Layout
Navigation – <nav>
Hauptinhalt
<main>
<div id=″main″>
oder
Seitenleiste
<aside>
Kopfleiste – <header>
Fußleiste – <footer>
13 Das Layout mit CSS gestalten
496
13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung
Als erstes Beispiel soll ein zweispaltiges Layout mit einer flexiblen Breite und einer
absoluten Positionierung vorgestellt werden. Das Prinzip basiert darauf, einen Teil
der Spalte mit position:absolute ganz links (left:0;) oder rechts (right:0;) mit einer
bestimmen Breite zu platzieren und in der anderen Spalte einen entsprechend gro-
ßen Außenabstand mit margin (margin-left oder margin-right) zu diesem absolut
positionierten Element zu verwenden. Damit sich das Layout an die Fenstergröße
flexibel anpassen kann, wird jeweils eine prozentuale Angabe der Breite (width) ver-
wendet.
In Abbildung 13.2 sehen Sie das hier beschriebene Prinzip mit theoretischen Werten.
Die rechte Spalte wurde mit einer absoluten Positionierung aus dem Dokumenten-
fluss genommen und ganz nach rechts (right: 0) mit 25 % Breite platziert. Auf der
anderen Seite wurde dem Hauptinhalt ein Außenabstand (margin-right) nach rechts
von dieser Breite (25 %) zugewiesen, und der Hauptinhalt selbst bekommt 75 %, also
die Differenz von der kompletten Breite des Fensters (100 %) minus der Seitenleiste
(25 %).
Abbildung 13.2 Eine flexible Breite mit absoluter Positionierung
Hierzu ein Beispiel, das Ihnen diese Art der Positionierung in der Praxis demonst-
riert, dessen Endergebnis Sie in Abbildung 13.3 sehen. Im Beispiel wurden außerdem
nicht exakt 25 % und 75 % wie in der Abbildung verwendet, weil noch etwas Raum für
das padding bleiben sollte, damit nicht alles so eng zusammengeklebt wirkt.
<style>…
#sidebar {
Navigation – <nav>
margin-right: 25%;width: 75%;
position: absolute;right: 0;width: 25%;
Kopfleiste – <header>
Fußleiste – <footer>
13.2 Ein zweispaltiges Layout erstellen
497
13
position: absolute;right: 0;margin: 0;padding: 2% 2%;border: 0;width: 22%;
}main {
margin: 0;padding: 2% 2%;margin-right: 24%;border: 0;width: 72%;
}</style>
…<header>Zweispalter mit absoluter Positionierung</header><nav id="mainnav"><a href="#">Home</a> | … </nav><aside id="sidebar">
<h3>Seitenleiste</h3><p>Lorem ipsum dolor … </p><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul><p>Lorem ipsum dolor … </p>
</aside><main><article><h1>Artikel 1</h1><p>Lorem ipsum dolor sit … </p>
</article><article><h1>Artikel 2</h1><p>Lorem ipsum dolor … </p>
</article></main>
<footer>Fußzeile</footer>…
Listing 13.1 /Beispiele/Kapitel013/13_2_1/index.html
13 Das Layout mit CSS gestalten
498
Abbildung 13.3 Das zweispaltige flexible Layout bei der Darstellung
Das Prinzip funktioniert selbstverständlich auch andersherum, indem Sie die Seiten-
leiste absolut auf der linken Seite positionieren und den Außenabstand des Haupt-
inhalts mit margin-left entsprechend einhalten. Hierzu müssten Sie den CSS-Code
dann nur an zwei Stellen wie folgt ändern, um das Ergebnis in Abbildung 13.4 zu
erhalten:
…#sidebar {position: absolute;left: 0;margin: 0;padding: 2% 2%;border: 0;width: 22%;
}main {
margin: 0;padding: 2% 2%;margin-left: 24%;border: 0;width: 72%;
}…
Listing 13.2 /Beispiele/Kapitel013/13_2_1/index2.html
13.2 Ein zweispaltiges Layout erstellen
499
13
Abbildung 13.4 Mit kleinen Änderungen lässt sich die Anordnung der Spalten auch
wechseln.
Ausdehnung festlegen
Bei diesem Beispiel handelt es sich um ein flexibles Layout, d. h., das Layout wird bei
einer Größenänderung des Webbrowser-Fensters gedehnt oder geschrumpft. Wol-
len Sie die maximale oder minimale Ausdehnung der Spalten festlegen, können Sie
hierzu zusätzlich die CSS-Eigenschaft min-width und/oder max-width verwenden. Mit
min-width geben Sie die minimale und mit max-width die maximale Breite bzw. Aus-
dehnung an.
Die Nachteile von diesem Layout
Der Nachteil von diesem Layout ist die absolute Positionierung der Seitenleiste.
Angenommen, Sie entfernen im verwendeten Beispiel Artikel 2, wird die Fußzeile
zum Problem, weil Sie durch die absolute Positionierung der Seitenleiste das Ele-
ment aus dem Dokumentenfluss genommen haben, und daher wird keine Rücksicht
mehr auf die Fußleiste genommen, wie Sie in Abbildung 13.5 sehen.
Wenn Sie sicher sein können, dass der Inhalt des absolut positionierten Elements
nicht länger ist als der Inhalt der anderen Spalte daneben, können Sie diese Form des
Layouts mit der absoluten Positionierung verwenden.
13 Das Layout mit CSS gestalten
500
Abbildung 13.5 Problematisch ist die Form eines Layouts mit absoluter Positionierung,
wenn der Inhalt des absolut positionierten Elements länger ist als der Hauptinhalt.
13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung
Dasselbe Beispiel, wie es eben mit absoluter Positionierung und flexibler Breite
erstellt wurde, können Sie auch mit einer festen Breite realisieren, indem Sie anstelle
einer prozentualen Angabe eine pixelgenaue Angabe verwenden. Ansonsten bleibt
das Prinzip dasselbe wie in Abschnitt 13.2.1 vorgestellt – und somit bleibt auch hier
das Problem bestehen, wenn die Seitenleiste länger ist als der Hauptinhalt, dass diese
dann über die Fußleiste hinausragt. Hier die CSS-Anweisung:
…#sidebar {position: absolute;left: 0;margin: 0;padding: 15px;border: 0;width: 180px;
}main {margin: 0;padding: 15px;margin-left: 190px;border: 0;
13.2 Ein zweispaltiges Layout erstellen
501
13
width: 450px;}
…
Listing 13.3 /Beispiele/Kapitel013/13_2_2/index.html
Beim festen Layout mit der Angabe von Pixeln ändert sich die Position der Seiten-
leiste und des Hauptinhalts nicht mehr, wenn Sie das Webbrowser-Fenster vergrö-
ßern oder verkleinern. Die Kopf- und Fußleiste und die Navigation sind in diesem
Beispiel noch flexibel. In Abbildung 13.6 können Sie sehr schön erkennen, wie zwi-
schen dem rechten Webbrowser-Rand und dem Hauptinhalt eine größere Lücke
aufgrund der fixen Breitenangabe von der Seitenleiste und dem Hauptinhalt ent-
standen ist. Verkleinern Sie das Webbrowser-Fenster in der Breite, also kleiner als
die Breite von Hauptinhalt plus Seitenleiste, müssen Sie auf der Webseite gar quer-
scrollen.
Abbildung 13.6 Bei der Verwendung einer festen Breite in Pixeln verändert sich die Breite
des Inhalts nicht mehr, wenn das Webbrowser-Fenster vergrößert bzw. verkleinert wird.
13.2.3 Den (Haupt)inhalt horizontal zentrieren
Wollen Sie einen Inhalt (nicht den Text) in einem Layout mittig in der Horizontalen
zentrieren, so funktioniert dies, indem Sie die Breite angeben, u. U. auch in Prozent
oder em und die äußeren Abstände links und rechts von margin auf auto zu setzen.
13 Das Layout mit CSS gestalten
502
Bezogen auf das Beispiel /Beispiele/Kapitel013/13_2_2/index.html mit dem fixierten
zweispaltigen Layout, können Sie folgendermaßen den Hauptinhalt (<main>) hori-
zontal zentrieren:
…#wrapper {
width: 660px; /* Gesamtbreite */margin: 0 auto;
}…
<div id="wrapper"><main>
<article>
<h1>Artikel 1</h1>
<p> … </p>
</article>
<article>
<h1>Artikel 2</h1>
<p> … </p>
</article>
</main>
</div>…
Listing 13.4 /Beispiele/Kapitel013/13_2_3/index.html
Hier haben Sie im ID-Selektor wrapper die Größe der verfügbaren Breite für den
Hauptinhalt angegeben. Hierbei wurde natürlich neben der Breite des Hauptinhalts
auch die Seitenleiste berücksichtigt. Dann wurden mit der margin-Kurzschreibweise
die linke und rechte Seite auf auto und die obere und untere Seite auf 0 gesetzt. Zu
guter Letzt haben Sie den ID-Selektor noch in einem div-Element verwendet und den
Hauptinhalt (hier: <main>…</main>) darin eingeschlossen. Jetzt »wandert« der Haupt-
inhalt immer horizontal mittig mit, wenn das Webbrowser-Fenster vergrößert oder
verkleinert wird. Das Verkleinern sollte natürlich nur bis zu einer gewissen Breite
erfolgen. Das Ergebnis sehen Sie in Abbildung 13.7.
Diese Art des horizontalen Zentrierens funktioniert natürlich auch in anderen Bei-
spielen und nicht nur wie hier beim Hauptinhalt von festen zweispaltigen Layouts.
In diesem Beispiel hätten Sie eine feste bzw. teilweise flexible horizontale Zentrie-
rung auch ohne das div-Element und den ID-Selektor wrapper mit dem Innenabstand
padding realisieren können. Diese Möglichkeit werde ich Ihnen nicht vorenthalten:
13.2 Ein zweispaltiges Layout erstellen
503
13
…main {
margin: 0;padding: 1% 10%;margin-left: 190px;border: 0;width: 450px;
}…
Listing 13.5 /Beispiele/Kapitel013/13_2_3/index2.html
Damit haben Sie einen flexiblen Innenabstand rechts und links vom Hauptinhalt auf
10 % gestellt. Mit einer Angabe von Pixeln könnten Sie auch einen fixen Innenab-
stand verwenden.
Abbildung 13.7 Hier wurde der Hauptinhalt zwischen <main> und </main> horizontal
zentriert.
13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen
Auch mit einem float der beiden Spalten lässt sich ein flexibles Layout erstellen. Im
Gegensatz zum absolut positionierten flexiblen Layout haben Sie das Problem mit
der Fußzeile nicht mehr, wenn z. B. die Seitenleiste länger ist als der Hauptinhalt.
13 Das Layout mit CSS gestalten
504
Voraussetzung hierfür ist natürlich, dass Sie hinter den gefloateten Inhalten den
Bereich mit clear wieder aufheben, da Elemente ja mit float aus dem Dokumenten-
fluss herausgenommen werden.
Hierzu die CSS-Anweisungen für ein zweispaltiges flexibles Layout mit float. Den
HTML-Code können Sie sich wieder sparen, weil sich gegenüber den Beispielen zuvor
nichts geändert hat. Sie gestalten das ganze Layout lediglich immer mit CSS.
…#sidebar {float: right;margin: 0;padding: 2% 2%;border: 0;width: 22%;
} /* Breite 22% + padding x 2 = 26% */main {float: right;padding: 2% 2%;margin: 0;border: 0;width: 70%;
} /* Breite 70% + padding x 2 = 74% */.clear { clear: both; }
…
Listing 13.6 /Beispiele/Kapitel013/13_2_4/index.html
Zuerst richten Sie die Seitenleiste mit float:right ein, damit diese immer rechts
bleibt. Die Breite beträgt insgesamt 26 %, was sich aus den 22 % von width und den 2 ×
2 % Außenabständen in padding rechts und links ergibt. Sie wissen ja noch, dass Sie
bei einer Box mit float eine Breite angeben müssen.
Auch den Hauptinhalt ordnen Sie so weit rechts wie möglich an und verwenden
float:right. Die Breite beträgt insgesamt 74 %, was sich aus width (70 %) und den bei-
den äußeren padding-Abständen rechts und links (2 × 2 %) ergibt. Insgesamt beträgt
die Breite des Zweispalters mit float somit 100 %. Bei einer Breite von mehr als 74 %
würde der Hauptinhalt nach unten wegrutschen.
Damit die Fußzeile nicht zur Navigation hochrutscht, weil die Seitenleiste und der
Hauptinhalt mit float aus dem Dokumentenfluss genommen wurden, wird ein Klas-
senselektor erstellt, den Sie in der Fußzeile mit class="clear" verwenden können:
<footer class="clear">Fußzeile</footer>
Das Endergebnis des Zweispalters mit float sehen Sie in Abbildung 13.8.
13.2 Ein zweispaltiges Layout erstellen
505
13
Abbildung 13.8 Ein vollständig flexibler Zweispalter mit »float«
Wollen Sie die Ausrichtung ändern, sodass sich die Seitenleiste auf der linken Seite
befindet und der Hauptinhalt rechts, müssen Sie lediglich die float-Ausrichtung von
right auf left setzen.
13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen
Gerade bei flexiblen Layouts kann der Vorteil auch schnell zum Nachteil werden,
wenn der Inhalt der Seite abhängig von der Breite des Bildschirms zu weit auseinan-
dergedehnt oder geschrumpft wird. Ist eine Textzeile in einem Absatztext zu kurz
oder zu lang, leidet der Lesefluss darunter. Daher sollten die Textzeilen weder zu lang
noch zu kurz sein. Was optimal ist, hängt auch von der Schriftgröße ab. Ein guter
Richtwert sind 50 bis 70 Zeichen pro Zeile oder, wie es in der klassischen Buchtypo-
grafie gerne verwendet wird, acht bis zwölf Wörter.
CSS bietet die Eigenschaften min-width und max-width an, um die Ausdehnung oder
das Schrumpfen einzuschränken. Bezogen auf das Beispiel /Beispiele/Kapitel013/13_
2_4/index.html, könnten Sie z. B. folgendermaßen eine sinnvolle Begrenzung über
den Inhalt ziehen:
…#wrapper {width: 100%;min-width: 720px;max-width: 60em;
13 Das Layout mit CSS gestalten
506
}…<body><div id="wrapper"><header>Zweispalter mit float</header><nav id="mainnav"> … <nav><aside id="sidebar"> … </aside><main> … </main><footer class="clear">Fußzeile</footer>
</div></body>
…
Listing 13.7 /Beispiele/Kapitel013/13_2_5/index.html
Hier haben Sie einen Wrapper auf 100 % eingerichtet. Mit min-width haben Sie die
minimale Breite auf 720 Pixel festgelegt. Das Layout wird also höchstens auf 720
Pixel schrumpfen. Wenn das Webbrowser-Fenster trotzdem kleiner als 720 Pixel ist,
wird ein horizontaler Scrollbalken sichtbar, wie Sie es in Abbildung 13.9 sehen. Die
maximale Breite mit max-width haben Sie mit der Einheit em an die Schriftgröße
gekoppelt und auf 60em gestellt. Somit wird der Inhalt nicht breiter als 60em, und Sie
verhindern damit, dass der Text schlechter lesbar wird. 60em sind meistens 960 Pixel,
wenn die Basisschriftgröße des Webbrowsers 16 Pixel ist (60 × 16 = 960). Eine
Umrechnungstabelle dazu finden Sie auf http://pxtoem.com.
Abbildung 13.9 Dank »min-width« gibt es eine Grenze, ab der
das zweispaltige Layout nicht mehr schrumpft.
13.2 Ein zweispaltiges Layout erstellen
507
13
Abbildung 13.10 Auch mit »max-width« lässt sich eine gewisse Grenze einhalten, ab der
sich das zweispaltige Layout nicht mehr weiter ausdehnt.
Höhe einschränken
Auch wenn es in der Praxis nicht so häufig verwendet wird, es gibt auch die CSS-
Eigenschaften min-height und max-height, mit denen Sie die minimale und maxi-
male Höhe von Boxen angeben können.
Auch hier gilt wieder, dass diese Einschränkung der minimalen und maximalen
Breite und Höhe nicht nur auf das ganze Layout beschränkt ist. Sie können diese CSS-
Eigenschaften auch auf einzelne HTML-Elemente anwenden.
13.2.6 Zweispaltiges festes Layout mit »float« erstellen
Es ist auch möglich, ein zweispaltiges festes Layout mit float in Pixeln statt prozen-
tualer Werte zu realisieren. In der Praxis können Sie dies wie folgt notieren:
…#sidebar {float: left;margin: 0;padding: 5px 5px;border: 0;width: 200px;
}main {
float: left;padding: 5px 5px;
13 Das Layout mit CSS gestalten
508
margin: 0;border: 0;width: 500px;
}.clear { clear: both; }
…
Listing 13.8 /Beispiele/Kapitel013/13_2_6/index.html
Hier wurden die Angaben von Prozent in Pixel geändert, sodass die beiden Spalten
jetzt eine feste Breite von insgesamt 720 Pixeln haben. Damit außerdem der Haupt-
inhalt unter 720 Pixel nicht unterhalb der Seitenleiste rutscht, was ja durchaus gewollt
sein kann, wurde hier auch ein div-Element als Wrapper mit min-width und max-widtheingesetzt, wie es bereits im Beispiel /Beispiele/Kapitel013/13_2_5/index.html verwen-
det wurde, wo ausführlicher auf die minimale und maximale Breite eines Layouts ein-
gegangen wurde.
In der Praxis ist es aber einfacher und empfehlenswerter, die Angaben in Prozent zu
machen und die Einschränkungen mit min-width und max-width (siehe Abschnitt
13.2.5, »Minimale und maximale Breite bei flexiblen Layouts einstellen«) zu regeln.
13.2.7 Zweispaltiges Layout mit »display: table« erstellen
Eine weitere interessante Lösung, ein zweispaltiges Layout zu erstellen, ist mit der
CSS-Eigenschaft display und dem Wert table. Dies ist eine CSS-Variante, um Tabellen
zu erstellen, und wird auch vom Internet Explorer ab Version 8 verstanden. Die ein-
zelnen Spalten können Sie ebenfalls mit der Eigenschaft display und dem Wert table-cell zuweisen. Der Wert table-cell stellt so viel wie das HTML-Element <td> dar.
Tabellen zum Layouten sind doch veraltet?
Es wurde bereits erwähnt, dass Sie das HTML-Tag <table> nicht mehr für das Layout
von Webseiten verwenden sollten. Und um es gleich richtigzustellen, Sie tun es hier
auch nicht mit dem HTML-Tag <table>, sondern Sie erstellen eine Tabelle mit der
CSS-Eigenschaft display.
Es gibt noch weitere Werte, die Sie display im Zusammenhang mit CSS-Tabellen
zuweisen und verwenden können. So könnten Sie z. B. mit table-row das Element als
Tabellenzeile (wie <tr>) umdefinieren. Auf die einzelnen Eigenschaften von display
wird hier nicht näher eingegangen. In diesem Beispiel reicht table-cell aus.
Was macht »display«?
Im Buch sind Sie schon des Öfteren über display gestolpert und werden das ein oder
andere Mal auch immer wieder diese CSS-Eigenschaft verwenden. Mit dieser Eigen-
13.2 Ein zweispaltiges Layout erstellen
509
13
schaft können Sie das Verhalten von HTML-Elementen beim Rendern im Webbrow-
ser verändern bzw. umdefinieren. So können praktisch Inline-Elemente einfach in
Block-Elemente oder Flow-Elemente umgewandelt werden. Im Beispiel mit dis-play:table wird das Element beim Rendern als Tabelle betrachtet und verhält sich
dann, grob gesagt, wie ein <table>-Element. Eine Übersicht über display und die
verschiedenen Werte finden Sie in Abschnitt 13.6, »Verhalten von HTML-Elementen
mit ›display‹ ändern«.
Hierzu das zweispaltige Layout, das mit dem CSS-Tabellenlayout erstellt wurde:
…#sidebar {margin: 0;padding: 5px 5px;border: 0;width: 180px;display: table-cell;
}main {
padding: 5px 5px;margin: 0;border: 0;display: table-cell;
}#wrapper {display: table;min-width: 720px;max-width: 60em;
}…
<header>Zweispalter mit display:table</header><nav id="mainnav"><a href="#">Home</a> … </nav><div id="wrapper"><aside id="sidebar"> … </aside><main><article> … </article><article> … </article>
</main></div><footer>Fußzeile</footer>
…
Listing 13.9 /Beispiele/Kapitel013/13_2_7/index.html
13 Das Layout mit CSS gestalten
510
Hier wurde ein CSS-Tabellenlayout mit dem ID-Selektor wrapper mit display:tableerstellt. Im HTML-Code verwenden Sie einfach ein div-Element und stecken dazwi-
schen die Elemente, die Sie als Tabelle behandeln wollen. Hier sind es die Elemente
<aside> mit dem Klassenselektor sidebar und das main-Element, das Sie mit dem ent-
sprechenden Typselektor ausgewählt haben. Als Funktion im Tabellenlayout setzen
Sie für beide Elemente über deren Selektoren die CSS-Eigenschaft display auf table-cell, sodass die beiden Elemente jetzt die Daten in der Tabelle sind. Die Tabellenzeile
müssen Sie nicht angeben.
Im Beispiel wurde für die Seitenleiste eine feste Größe verwendet und für den Haupt-
inhalt keine. Bei der festen Größe haben Sie den Vorteil, dass die Seitenleiste immer
gleich breit bleibt, und der Hauptinhalt nimmt den Rest des Platzes in der Tabellen-
zeile daneben ein. Damit das Auseinanderdehnen oder Schrumpfen dieses Bereichs
auf ein gewisses Maß eingeschränkt wird, werden in der Tabelle im ID-Selektor
wrapper min-width und max-width gesetzt.
Abbildung 13.11 Das Layout mit CSS-Tabellen im Einsatz
13.3 Ein dreispaltiges Layout erstellen
Ebenfalls im Web häufiger anzutreffen sind dreispaltige Layouts, wie Sie es in Abbil-
dung 13.12 sehen. Eine zusätzliche dritte Spalte kann verwendet werden, um dort
etwa die Hauptnavigation, weitere Informationen oder Sonstiges aufzunehmen. In
den nächsten Abschnitten werden Sie einige Techniken kennenlernen, mit denen Sie
solche dreispaltigen Layouts mit CSS umsetzen.
975
22
Kapitel 22
Weitere interessante HTML5-Features
Viele der Neuerungen von HTML5 sind nicht als HTML-Elemente,
sondern vielmehr als JavaScript-APIs hinzugekommen. Einige dieser
APIs sind relativ komplex, daher finden Sie in diesem Kapitel einen
Überblick und kurzen Einstieg in die HTML5-JavaScript-APIs.
Die einzelnen Abschnitte bestehen vorwiegend aus JavaScript-Code und sind daher
etwas komplexer als die Kapitel zuvor. Auf folgende APIs wird in diesem letzten Kapi-
tel etwas näher eingegangen:
� Geolocation-API: Hier erfahren Sie, wie Sie den Standort des Besuchers ermitteln
können.
� Drag&Drop-API: In diesem Abschnitt erfahren Sie, wie Sie HTML-Elemente inner-
halb des Webbrowsers per Drag & Drop verschieben können.
� Offlinedaten: Es gibt mehrere Arten von Offlinedaten. Mit Application Cache
erfahren Sie, wie Sie einzelne Dateien und Ressourcen offline verfügbar machen
können, wenn mal keine Internetverbindung besteht. Wie Sie außerdem Daten
lokal im Webbrowser speichern und wieder auslesen können, erfahren Sie mit
Web Storage.
� Web Workers: Dieses Hilfsmittel ist sehr gut für rechenintensive und länger lau-
fende JavaScripts geeignet, um diese nebenläufig im Hintergrund auszuführen,
ohne dass der Benutzer dies mitbekommt.
� Server Sent Events: Wie eine Webseite automatisch und regelmäßig ein Update
oder eine Nachricht vom Server bekommt, ohne eine gesonderte Anfrage dafür
gestellt zu haben, erfahren Sie mit den Server Sent Events.
� Weitere APIs: HTML5 ist ein ständig fortlaufender Standard, und es gibt noch eine
Menge weitere sehr nützlicher APIs, die am Ende im Schnelldurchlauf beschrieben
werden. Gesondert werden hier noch kurz WebSockets, WebRTC, Fullscreen API
und die File API beschrieben.
22 Weitere interessante HTML5-Features
976
Wichtige Anmerkung zu diesem Kapitel
An dieser Stelle muss unbedingt angemerkt werden, dass dies ein sehr schwieriges
Kapitel ist, weil hier extrem viele Informationen und Themen auf ganz wenig Platz
versammelt und auch die Codebeispiele zum Teil recht komplex sind. Betrachten Sie
dieses Kapitel einfach als eine grobe Übersicht über die vielen weiteren Themen und
APIs, die Ihnen in der Webentwicklung zur Verfügung stehen. Für eine umfassendere
Beschreibung der vielen Themen in diesem Kapitel bedarf es schon eines eigenen
Buches.
22.1 Den Standort ermitteln mit der Geolocation-API
Mit der Geolocation-API können Sie den Standort des Besuchers ermitteln, und das
Schöne ist, dass dies mit fast allen modernen Webbrowsern funktioniert. Der Web-
browser kann dabei mehrere Methoden nutzen, um den Standort des Nutzers zu
ermitteln. Da wären die IP-Adresse, Ihre WLAN-Verbindung, der Mobilfunkmast, mit
dem Ihr Smartphone verbunden ist, und natürlich die Position via GPS-Sender,
sofern dies vom Betriebssystem oder der Hardware unterstützt wird. Wenn ein Gerät
einen GPS-Sender enthält, wie dies in fast jedem handelsüblichen Smartphone mitt-
lerweile der Fall ist, funktioniert die Geolocation-API theoretisch auch offline ohne
Internetverbindung.
GPS
GPS steht für Global Positioning System und ist ein globales Navigationssatelliten-
system, mit dem die Position bestimmt werden kann.
Wie genau die Ermittlung der Position funktioniert, hängt somit auch vom verwen-
deten Gerät ab. Bei einem lokalen Desktoprechner, der nicht mit einem 3G-Modem
oder einem eigenen GPS-Modul ausgerüstet ist, kann die Genauigkeit der Position
nach IP-Adresse ziemlich variieren (was vom Provider abhängt). Ich lebe z. B. auf dem
Land, und bei meiner DSL-Infrastruktur wird die Position meines Serviceproviders
60 km von mir entfernt angezeigt. Verwende ich allerdings meine mobilen Geräte
wie ein Smartphone oder ein Tablet, in denen ein GPS-Modul integriert ist, ist die
Angabe häufig auf den Meter genau.
Datenschutz und Sicherheit
Es ist ziemlich beängstigend, wie einfach es heutzutage ist, den Standort des Benut-
zers zu ermitteln. Trotzdem können Sie jetzt nicht einfach hergehen und Ihre Besu-
cher auf der Webseite auf den Meter genau lokalisieren. Ohne ausdrückliche
22.1 Den Standort ermitteln mit der Geolocation-API
977
22
Genehmigung vom Besucher bekommen Sie keine Positionsdaten. Bei den meisten
Webbrowsern erfolgt eine solche Abfrage am oberen Bildschirmrand in Form einer
Leiste (siehe Abbildung 22.1). Wie die Webbrowser diese Zustimmung oder Ableh-
nung speichern, ist häufig ziemlich unterschiedlich, kann aber auch jederzeit wieder
rückgängig gemacht werden.
Mehr zu den Sicherheitsbestimmungen und der Geolocation-API finden Sie in der
W3C-Spezifikation auf http://dev.w3.org/geo/api/spec-source.html.
Abbildung 22.1 Bevor Sie den Standort des Benutzers mit der Geolocation-API ermit-
teln können, benötigen Sie dessen Zustimmung.
Abbildung 22.2 Bei Google Chrome können Sie die Standortverfolgung über das ent-
sprechende Symbol in der URL-Leiste verwalten.
22.1.1 Die Geolocation-API in einem HTML-Dokument verwenden
Um die Geolocation-API verwenden zu können, müssen Sie zunächst überprüfen, ob
sie unterstützt wird. Hierzu ein grundlegendes Beispiel, das die minimalste Anwen-
dung der Geolocation-API demonstriert:
…<h1>Geolocation-API verwenden</h1><p>Klicken Sie, um Ihre Position zu ermitteln.</p><button onclick="getMyLocation()">Position bestimmen</button><p id="pos"></p>
<script>
22 Weitere interessante HTML5-Features
978
var x = document.getElementById("pos");
function getMyLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);
}else {x.innerHTML = "Keine Geolocation-API verfügbar!";
}}
function showPosition(position) {var pos = "Breitengrad: " + position.coords.latitude;pos += "<br>Längengrad: " + position.coords.longitude;x.innerHTML = pos;
}</script>…
Listing 22.1 /Beispiele/Kapitel022/22_1/index.html
Wenn die Schaltfläche angeklickt wird, wird die Funktion getMyLocation() aufgeru-
fen, wo Sie zunächst überprüfen, ob navigator.geoloacation gleich true ist und somit
die Geolocation-API verwendet werden kann. Dann starten Sie die Methode getCur-
rentPosition() der Geolocation-API. Bei der ersten Verwendung sollte zunächst die
Zustimmung vom Benutzer gefordert werden. Wenn die Zustimmung gegeben
wurde und die Methode getCurrentPosition() erfolgreich ausgeführt werden
konnte, wird ein Koordinaten-Objekt zurückgegeben, das als Parameter an der hier
mit showPosition eingerichteten Callback-Funktion übergeben wird.
Dieses Koordinaten-Objekt wird in der Callback-Funktion showPosition verwendet,
um die ermittelten Daten, hier Breitengrad und Längengrad, auszugeben. Neben den
hier verwendeten coords.latitude und coords.longitude für die geografische Breite
bzw. Länge finden Sie in diesem Objekt noch weitere Eigenschaften für die Zeit- und
Positionsbestimmung vor, die alle in Tabelle 22.1 aufgelistet sind.
Eigenschaft Beschreibung
coords.latitude geografische Breite
coords.longitude geografische Länge
coords.accuracy Präzision in Meter von Breite und Länge
Tabelle 22.1 Daten, die von »getCurrentPosition()« bei Erfolg zurückgegeben werden
22.1 Den Standort ermitteln mit der Geolocation-API
979
22
Bei den aufgelisteten Angaben in Tabelle 22.2 muss noch hinzugefügt werden, dass
hier nur wirklich sinnvolle Werte zurückgegeben werden können, wenn der Web-
browser oder das Gerät diese Informationen auch bereitstellt. Andernfalls wird null
zurückgegeben.
Das Beispiel sehen Sie in Abbildung 22.3 bei der Ausführung.
Abbildung 22.3 Ermittlung der geografischen Länge und Breite mit der Geolocation-API
Fallback-Lösung für alte Webbrowser
Alle modernen Webbrowser können mittlerweile die Geolocation-API verwenden
(siehe auch http://caniuse.com/#search=geolocation). Ältere Webbrowser wie der
Internet Explorer 8 unterstützen gar kein und einige andere betagte Webbrowser
können die Geolocation-API nur teilweise verwenden. Für ältere Webbrowser kann
eine Fallback-Lösung wie folgt eingerichtet werden:
if(navigator.geolocation){// Einsatz der HTML5-Geolocation-API ist möglich
}
coords.altitude Höhe in Meter
coords.altitudeAccuracy Präzision in Meter von der Höhe
coords.heading Richtung
coords.speed Geschwindigkeit
timestamp Zeitstempel der Anfrage
Eigenschaft Beschreibung
Tabelle 22.1 Daten, die von »getCurrentPosition()« bei Erfolg zurückgegeben werden
22 Weitere interessante HTML5-Features
980
else{// Die Position benötigt eine Fallback-Lösung
}
Eine Fallback-Lösung könnte z. B. ein Polyfill wie Webshims (http://afarkas.github.io/
webshim/demos) oder gleich die Google AJAX API (https://developers.google.com/
loader/?csw=1) sein.
22.1.2 Fehler und Zugriffsrechte der Geolocation-API behandeln
Wenn Sie die Geolocation-API verwenden, sollten Sie auch eine Callback-Funktion
für Fehler einrichten, damit der Anwender auch weiß, warum die Positionsermitt-
lung nicht funktioniert hat. Zumindest lässt sich damit ermitteln, ob der Zugriff auf
die Geolocation-API blockiert wurde, die Abfrage zu lange gedauert hat oder ob die
Position einfach nicht ermittelt werden konnte. Die Callback-Funktion müssen Sie
lediglich als zweiten Parameter an die Methode getCurrentPositon() übergeben.
Hierzu das entsprechende Beispiel:
…<script>var x = document.getElementById("pos");
function getMyLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);
}…
}
function showPosition(position) { … }
function showError(error) {if(error.PERMISSION_DENIED) {x.innerHTML ="Der Zugriff auf Ihre Position wurde verweigert!?"
}else if(error.POSITION_UNAVAILABLE) {x.innerHTML ="Es sind keine Geopositionsdaten vorhanden."
}else if(error.TIMEOUT) {
22.1 Den Standort ermitteln mit der Geolocation-API
981
22
x.innerHTML ="Timeout bei der Ortsanfrage wurde ausgelöst."
}else {x.innerHTML = "Ein unbekannter Fehler ist aufgetreten";
}}
</script>…
Listing 22.2 /Beispiele/Kapitel022/22_1/index2.html
Je nachdem, ob und welcher Fehler aufgetreten ist, wird das Ergebnis auf der Web-
seite ausgegeben. Die möglichen Fehler und deren Bedeutung finden Sie in Tabelle
22.2 aufgelistet.
22.1.3 Feintuning mit weiteren Optionen der Geolocation-API
Die Methode getCurrentPosition() kann noch einen dritten optionalen Parameter
mit einem Objekt vom Typ PositionOptions übernehmen. Hierzu ein Codeaus-
schnitt, der anschließend etwas genauer erläutert wird:
…function getMyLocation() {if (navigator.geolocation) {var geo_options = {enableHighAccuracy: true,maximumAge : 30000,timeout : 27000
};navigator.geolocation.getCurrentPosition(showPosition, showError, geo_options );
Fehler Bedeutung
PERMISSION_DENIED Zugriff verweigert. Vermutlich hat der Benutzer die Erlaub-
nis zur Positionsbestimmung verweigert oder eine Einstel-
lung auf dem Gerät blockiert diese Funktion.
POSITION_UNAVAILABLE Die Position konnte nicht ermittelt werden.
TIMEOUT Die Abfrage der Position dauerte zu lang und konnte nicht
innerhalb einer bestimmten Zeit bestimmt werden.
Tabelle 22.2 Codeeigenschaften zum Auswerten von Fehlern
22 Weitere interessante HTML5-Features
982
}else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";
}}
…
Listing 22.3 /Beispiele/Kapitel022/22_1/index3.html
Hier verwenden Sie mit enableHighAccuracy, maximumAge und timeout alle drei vorhan-
denen Eigenschaften des PositionOptions-Objekts. Alle drei Eigenschaften sind opti-
onal, und Sie können sie einzeln, zwei davon oder eben alle drei Eigenschaften
verwenden. Die Bedeutung der drei Eigenschaften entnehmen Sie Tabelle 22.3.
Sehen wir uns die folgenden Zeilen aus dem Beispiel näher an:
…var geo_options = {enableHighAccuracy: true,maximumAge : 30000,timeout : 27000
};…
Eigenschaft Beschreibung
enableHighAccuracy Mit true zwingen Sie die API, noch genauer die Position zu
ermitteln. Einige mobile Geräte (iPhone und Android) bieten
solche Optionen für eine genauere Positionsbestimmung an.
Allerdings kann diese Option auch dazu führen, dass ein Auf-
ruf der Methode getCurrentPosition() fehlschlägt, wenn
diese Option auf true gesetzt wurde, wohingegen ein Aufruf
mit false erfolgreich gewesen wäre.
maximumAge Damit geben Sie an, wie lange eine im Cache gespeicherte
Ortsangabe verwendet werden darf, wenn Sie das nächste
Mal getCurrentPosition() aufrufen. Geben Sie 0 an, werden
keine im Cache gehaltenen Daten verwendet, und es wird
immer die aktuelle Position benötigt.
timeout Hiermit geben Sie eine Zeit in Millisekunden an, ab wann ein
Fehler (TIMEOUT) ausgelöst werden soll, wenn bis dahin keine
Daten geholt werden konnten.
Tabelle 22.3 Optionale Geolocation-Optionen
22.1 Den Standort ermitteln mit der Geolocation-API
983
22
Hier haben Sie mit enableHighAccuracy=true die höchstmögliche Standardortbestim-
mung aktiviert. Wurde die letzte Standortbestimmung mit getCurrentPosition()
innerhalb von 30 Sekunden durchgeführt, darf auch eine im Cache gespeicherte
Standardortbestimmung verwendet werden, was mit maximumAge:30000 angegeben
(30.000 Millisekunden = 30 Sekunden) wurde. Dauert die Standardortermittlung
länger als 27 Sekunden, wird ein Timeout wegen der Zeitüberschreitung als Fehler
zurückgegeben (timeout:27000).
22.1.4 Die Position des Benutzers dauerhaft überwachen
Für eine dauerhafte Überwachung der Position des Benutzers bietet die Geolocation-
API die Methode watchPosition() an, die dieselbe Struktur wie getCurrentPosition()
besitzt. Als ersten Parameter geben Sie eine Callback-Funktion an, die bei Erfolg auf-
gerufen werden soll, um die Daten des Standorts auszuwerten. Optional können Sie
auch als zweiten Parameter eine Callback-Funktion einrichten, die im Fall eines Feh-
lers aufgerufen wird. Auch optional können Sie als Parameter das PositionsObject-
Objekt verwenden. Im Prinzip können Sie praktisch die Beispiele vom Abschnitt
zuvor verwenden und einfach nur getCurrentPosition durch watchPosition ersetzen.
Im Gegensatz zur Methode getCurrentPosition() ruft die Methode watchPosition()
jedes Mal die Callback-Funktion auf, wenn sich die Position des Benutzers geändert
hat. Zusätzlich liefert diese Methode eine ID zurück, die Sie an die Methode clear-
Watch() als Parameter übergeben können, um die Methode watchPositon() wieder
anzuhalten.
Das folgende Beispiel zeigt die Verwendung von watchPosition() im Einsatz. Sie
benötigen ein Gerät mit einem GPS-Sender, um das Beispiel im Einsatz besser testen
zu können (z. B. ein Tablet oder Smartphone wie iPhone, Android oder ein Windows
Phone).
…<p>Klicken Sie, um Ihre Position zu überwachen.</p><button onclick="getMyLocation()">Position bestimmen</button><button onclick="endMyLocation()">Überwachung beenden</button><p id="pos"></p>
<script>var x = document.getElementById("pos");var id;function getMyLocation() {if (navigator.geolocation) {var geo_options = {enableHighAccuracy: true,
22 Weitere interessante HTML5-Features
984
maximumAge : 30000,timeout : 27000
};id = navigator.geolocation.watchPosition(showPosition, showError, geo_options);
}else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";
}}
function showPosition(position) { … }
function showError(error) { … }
function endMyLocation() {if (navigator.geolocation) {navigator.geolocation.clearWatch(id);x.innerHTML = "Positionsüberwachung beendet";
}}
</script>…
Listing 22.4 /Beispiele/Kapitel022/22_1/index4.html
22.1.5 Die Position des Benutzers auf einer Karte anzeigen
Mit den Angaben zur geografischen Länge und Breite mit Latitude und Longitude
haben Sie alle nötigen Daten, um den Standort auf einer Karte anzuzeigen. Hierzu
benötigen Sie aber eine API für einen Kartenanbieter und müssen diese etwas mit der
Geolocation-API vermischen.
Achtung, komplex!
Das gleich folgende Beispiel, in dem eine echte Karte wie Google Maps oder Bing
Maps verwendet wird, ist natürlich erheblich komplexer, als nur die Latitude und
Longitude anzuzeigen, weil hier auch Kenntnisse in den APIs der Kartenhersteller
nötig sind, hier speziell: Google Maps API und Bing Maps Ajax Control. Betrachten Sie
dieses Beispiel daher eher als eine Art Demonstration, was noch so möglich ist.
Zur Demonstration finden Sie hier ein Beispiel, das zunächst wie gehabt den Standard-
ort ermittelt und auch überwacht, aber zur Darstellung nicht mehr die Angabe in
22.1 Den Standort ermitteln mit der Geolocation-API
985
22
Form von Latitude und Longitude verwendet, sondern eine geografische Karte.
Gegenüber den Versionen in den Beispielen zuvor müssen Sie somit die Callback-
Funktion showPosition() entsprechend anpassen, damit der ermittelte Standort in
einer Karte und nicht als geografische Längen- bzw. Breitenangabe angezeigt wird.
Im folgenden Beispiel wurde hierfür einmal eine Callback-Funktion showPosition-
Google() und showPositionBing() geschrieben, wodurch der Benutzer die Wahl hat,
seinen Standort entweder in der Karte von Google oder von Bing anzuzeigen. Hier
das Beispiel dazu, das anschließend etwas genauer erläutert wird:
…<!-- Für Google Maps --><script src="http://maps.google.com/maps/api/js?sensor=true"></script><!-- Für Bing Maps --><script src="http://ecn.dev.virtualearth.net/mapcontrol/
mapcontrol.ashx?v=7.0"></script>…<p>Klicken Sie, um Ihre Position auf einer Karte anzuzeigen</p><button onclick="getMyLocation('google')">Google-Map</button><button onclick="getMyLocation('bing')">Bing-Map</button><button onclick="endMyLocation()">Überwachung beenden</button><div id="pos"
style="position:absolute; width:500px; height: 350px;"></div>
<script>var x = document.getElementById("pos");var id = null;
…function getMyLocation(str) {if (navigator.geolocation) {if(id != null) {navigator.geolocation.clearWatch(id);
}if( str == "google") {id = navigator.geolocation.watchPosition(
showPositionGoogle, showError, geo_options);}else if( str == "bing") {id = navigator.geolocation.watchPosition(
showPositionBing, showError, geo_options);}
}
22 Weitere interessante HTML5-Features
986
else {x.innerHTML ="Der Webbrowser unterstützt keine Geolocation-API!";
}}
// Position mit Google Maps anzeigenfunction showPositionGoogle(position) {var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = {zoom: 12,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
};var map = new google.maps.Map(x, myOptions);var marker = new google.maps.Marker({
position: latlng, map: map,title: "Ihr Position"});
}
// Position mit Bing Maps anzeigenfunction showPositionBing(position) {var latlng =new Microsoft.Maps.Location(position.coords.latitude,position.coords.longitude);
var myOptions = {credentials: "Ihr Schlüssel für die Bing Map",center: latlng,mapTypeId: Microsoft.Maps.MapTypeId.road,zoom: 10
};var map = new Microsoft.Maps.Map(x, myOptions );
}
function showError(error) { … }function endMyLocation() { … }
</script>…
Listing 22.5 /Beispiele/Kapitel022/22_1/index5.html
22.1 Den Standort ermitteln mit der Geolocation-API
987
22
Zunächst betten Sie die Google Maps JavaScript-API und das Bing Maps AJAX Control
ein. Die Größe für die Karte legen Sie auch gleich im div-Element mit einem Inline-
Stylesheet fest.
Sensor-Parameter bei der Google Maps API auf »true« oder »false«?
Im Beispiel wurde beim Verweis zur Google Map API der Parameter sensor mit http://
maps.google.com/maps/api/js?sensor=true auf true gesetzt, weil die Positionsbe-
stimmung damit genauer ist, wenn das Gerät, auf dem dieses Beispiel ausgeführt
wird, einen GPS-Sensor enthält. Bei einem stationären Computer oder bei vielen
Notebooks könnten Sie hier auch sensor=false verwenden, wenn dort kein GPS vor-
handen ist.
Wenn Sie eine der Schaltflächen Google-Map oder Bing-Map angeklickt haben,
wird in der Funktion getMyLocation() nach einer Überprüfung, ob die Geolocation-
API verfügbar ist, ermittelt, welche Schaltfläche Sie angeklickt haben. Dies wurde hier
ganz einfach mit dem String google oder bing realisiert, der beim Anklicken an die
Funktion getMyLocation(str) mit übergeben wird. Abhängig davon, welche Karte Sie
verwenden wollen, wird der Methode watchPosition() als zweiter Parameter die Call-
back-Funktion showPositionGoogle() oder showPositionBing() übergeben.
Abgesehen von den mit der Geolocation-API ermittelten Latitude (position.coords.
latitude) und Longitude (position.coords.longitude) sind die in showPosition-
Google() und showPositionBing() enthaltenen Methoden, Objekte und Optionen
reine Google-Maps-API- bzw. Bing-Maps-AJAX-Control-Angaben, die nichts mehr mit
der Geolocation-API zu tun haben.
Das Beispiel bei der Ausführung sehen Sie in Abbildung 22.4.
Google Maps API & Bing Maps AJAX Control
Auf die Einzelheiten der Google Maps API und des Bing Maps AJAX Control einzu-
gehen würde hier den Rahmen des Buches sprengen. Sie finden für die Karten von
Google auf der Webseite https://developers.google.com/maps/?hl=de eine umfas-
sende Dokumentation mit Beispielen, um tiefer in die Materie einzusteigen. Dasselbe
gilt für die Karten von Bing, wo Sie auf der Webseite http://msdn.microsoft.com/
en-us/library/gg427610.aspx eine umfassende Dokumentation finden. Beachten Sie
außerdem beim Beispiel, dass Sie, wenn Sie die Bing-Karte verwenden wollen, einen
Schlüssel dafür benötigen und im Beispiel anstelle von Ihr Schlüssel für die Bing-Map eintragen müssen. Einen Schlüssel können Sie z. B. bei Microsoft unter http://
www.microsoft.com/maps/create-a-bing-maps-key.aspx erstellen.
22 Weitere interessante HTML5-Features
988
Abbildung 22.4 Die Geolocation-API wird mit der Google Maps API gemischt und zeigt den
Standort auf der Google-Karte an.
22.1.6 Eine einfache Navigation vom aktuellen Standardort erstellen
Der nächste Schritt oder Wunsch dürfte vielleicht sein, eine kleine Navigation auf der
Webseite anzubieten. So könnten Sie z. B. einem Besucher den Weg zu einem Ort
oder einer Veranstaltung aufzeigen. Allerdings müssen Sie hier noch tiefer in die ent-
sprechenden APIs von Google oder Bing eintauchen. Die Google Maps API bietet hier-
für z. B. einen Routendienst an, den Sie über DirectionService erreichen (https://
developers.google.com/maps/documentation/javascript/directions?hl=de) an. Aller-
dings will ich das im letzten Abschnitt ohnehin immer komplexer werdende Thema
nicht noch komplizierter machen, und Sie finden ein entsprechendes Beispiel zum
Ausprobieren oder als Demonstration unter /Beispiele/Kapitel022/22_1/index6.html.
Das Beispiel, das Sie in Abbildung 22.5 sehen, versucht, die aktuelle Position zu
ermitteln und zu überwachen, und bietet Ihnen einen Routendienst zum Rhein-
werk Verlag nach Bonn an. Am besten funktioniert das Beispiel natürlich wieder
mit einem mobilen Gerät wie einem Smartphone oder einem Tablet, bei denen GPS
vorhanden ist.
22.2 Ziehen und Fallenlassen mit der Drag&Drop-API
989
22
Abbildung 22.5 Hier wurde ein Routendienst mit der Google Maps API erstellt.
22.2 Ziehen und Fallenlassen mit der Drag&Drop-API
Drag & Drop wurde bereits über die Jahre hinweg mit Bibliotheken wie jQuery (http://
jquery.com), Dojo (http://dojotoolkit.org) oder MooTools (http://mootools.net) reali-
siert, um ein Objekt im Webbrowser mit gehaltener Maustaste von einer Position zu
einer anderen zu ziehen. Mit HTML5 können Sie Drag & Drop (kurz auch DnD) jetzt
auch nativ ohne weitere Bibliothek nutzen.
Allerdings muss hinzugefügt werden, dass die Verwendung der nativen Drag&Drop-
API von HTML5 im Vergleich zu Lösungen wie jQuery, Dojo oder MooTools erheblich
komplexer ist.
Fallback-Lösung für die Drag&Drop-API
Viele moderne Webbrowser können mittlerweile die Drag&Drop-API zumindest zum
(größten) Teil verwenden (siehe auch http://caniuse.com/#feat=dragndrop). Auf
jeden Fall sollten Sie zur Sicherheit erst einmal prüfen, ob ein Webbrowser mit der
Recommended