HTML5 und CSS3 – Das umfassende Handbuch - … · 5 Tabellen, Hyperlinks und Bilder 182 sollten...

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


177

5

Abbildung 5.1 Eine grundlegende Tabellenstruktur in HTML

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

Webbrowser-Statistik von einer Webseite in einem Raster zusammengefasst und

übersichtlich dargestellt werden:

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

</tr><tr><td>Chrome</td><td>14478</td><td>59.6 %</td>

</tr><tr><td>Firefox</td><td>3499</td><td>14.4 %</td>

</tr><tr><td>Safari</td>

<table>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</table>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

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


178

<td>1619</td><td>6.6 %</td>

</tr></table>

…

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

Wie Sie in Abbildung 5.2 sehen, stellen Webbrowser die Tabelle ohne jede Formatie-

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

nen Inhalt ausgegeben.

Abbildung 5.2 Die strukturierte Darstellung einer grundlegenden Tabelle in HTML

Was darf in eine Tabellenzelle alles rein?

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

HTML-Elemente verwenden. Theoretisch könnten Sie darin auch eine weitere kom-

plette Tabelle einfügen. Wenn Sie eine leere Zelle ohne Inhalt verwenden wollen,

müssen Sie trotzdem ein leeres <td></td> bzw. <th></th> angeben, um eine leere

Zelle zu notieren, da die Tabelle ansonsten nicht richtig dargestellt wird. Bei ganz

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

chen mit der HTML-Entität in die Zelle schreiben, weil es dort bei leeren Zellen

ohne Inhalt zu Problemen kommen könnte.

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

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

spannen) wollen, können Sie dies mit dem HTML-Attribut colspan und rowspan

machen. Anhand des Zahlenwerts, den Sie diesen Attributen übergeben, wird die

Anzahl der Zellen angegeben, die Sie zusammenfassen wollen. Wie Sie anhand des

Attributnamens vielleicht schon erahnen können, wird colspan für das Zusammen-

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


179

5

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

Tabelle zusammengefasst wurde:

…<table><tr><th></th><th scope="col">Vormittag</th><th scope="col">Mittag</th><th scope="col">Nachmittag</th>

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

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

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

</tr></table>

…


Wie Sie in Abbildung 5.3 sehen, wurde der Rahmen der Tabelle mit CSS gestylt, damit

das Ergebnis von colspan deutlicher sichtbar ist.

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

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

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

bis Nachmittag zusammenfasst wurde.

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

reduziert werden muss, wenn z. B. ein colspan über zwei Zellen zusammengefasst

wird. Im Beispiel von Montag haben Sie somit nur zwei td-Elemente notieren müssen

anstelle von drei, da sich das erste td-Element bereits über zwei Spalten erstreckt.


180

Abbildung 5.3 Zusammenfassen von Spalten mit dem Attribut »colspan«

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

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

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

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

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

</tr><tr>

…

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

werden.

Das »scope«-Attribut von <th>

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

nen Sie angeben, ob die Tabellenüberschrift für eine Spalte (scope="col") oder eine

Zeile (scope="row") gelten soll.

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

über mehrere Zeilen zusammenfassen wollen. Hierzu nochmals das Beispiel, in dem

der Tagesplan für das Fotoseminar etwas geändert wurde, wo jetzt am Dienstag und

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

…<table><tr>


181

5

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

</tr>…

<th scope="row">Dienstag</th><td rowspan="2">Strassenfotografie (Stadt)</td><td colspan="2">Fotoshooting (Portrait)</td>

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

</tr></table>

…

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

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

weil Sie den Eintrag Straßenfotografie (Stadt) darüber mit dem Attribut rowspan

nach unten ausgedehnt haben, wodurch dieser Eintrag den Platz in der darunter lie-

genden Zelle einnimmt, wie Sie in Abbildung 5.4 sehen.

Abbildung 5.4 Zusammenfassen von Zeilen mit dem Attribut »rowspan«

5.1.3 HTML-Attribute für die Tabellenelemente

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

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


182

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

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

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

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

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

fügen:

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

</style>…

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

stützt werden. Die Attribute von <td> und <th> mit colspan, rowspan und scope haben

Sie bereits kennengelernt. Die restlichen Attribute der beiden Elemente wurden

ebenfalls von HTML5 als missbilligt erklärt bzw. gestrichen.

Webseiten-Layout mit Tabellen?

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

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

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

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

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

des Dokumenteninhalts verwenden. Meistens handelt es sich einfach um Seiten, die

nicht weitergepflegt werden, oder sie stammen von Entwicklern, die nicht mehr auf

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

das umfassend ab Kapitel 8 behandelt wird.

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

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

Tabelle mit den Elementen <thead>, <tbody> und <tfoot> in einen Kopf-, Daten- und

Fußbereich einteilen.

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

head, deutsch: Tabellenkopf). Sinnvollerweise sollten Sie dafür auch das th-Element

für die einzelnen Zellen verwenden. Die eigentlichen Daten für die Tabelle markieren

Sie zwischen <tbody> und </tbody> (tbody = table body, deutsch: Tabellenkörper). Wol-

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

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


183

5

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

…<table><thead><tr><th>Monat</th><th>Besucher</th><th>Bytes</th>

</tr></thead><tfoot><tr><th>Gesamt</th><th>23423</th><th>3234 MB</th>

</tr></tfoot><tbody><tr><td>Januar</td><td>3234</td><td>132 MB</td>

</tr>……

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

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

…


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

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

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

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

angezeigt.


184

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

<tfoot> im Einsatz

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

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

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

det, um das Erscheinungsbild dieser Bereiche mit CSS zu formatieren.

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

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

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

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

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

<tbody>

<tfoot> </tfoot>

</tbody>

</thead>


185

5

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

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

Tabelle mitauszudrucken, womit besser erkannt werden kann, in welcher Spalte die

einzelnen Daten stehen bzw. was die Daten bedeuten. Eine weitere Möglichkeit wäre,

bei langen Tabellen nur den Körperbereich zwischen <tbody> und </tbody> zu scrol-

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

Webbrowser diese Funktionen, aber auch das können Sie u. U. selbst mit CSS und

gegebenenfalls JavaScript realisieren.

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

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

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

zelnen Spalten in semantische und logische Bereiche aufteilen, sofern dies sinnvoll

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

oder eine bestimmte Gruppe von Spalten mit einer bestimmten CSS-Formatierung

zu versehen, anstatt den Style für jede Zelle der Spalte zu wiederholen.

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

und vor allen anderen Elementen wie tr, thead, tfoot oder tbody notieren. Eine Spal-

tengruppe öffnen Sie mit <colgroup> und schließen sie wieder mit </colgroup> (col-group = column group, deutsch: Spaltengruppe). Um eine Spalte zu gruppieren,

müssen Sie für jede Spalte (die sich über die komplette Spalte erstrecken soll) das

allein stehende Tag <col> verwenden. Wollen Sie mehrere Spalten in einem col-Ele-

ment zusammenfassen, können Sie dies mit dem Attribut span und der Anzahl der

Spalten als Attributwert machen.

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

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

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



186

</tr>……

</table>…


Abbildung 5.7 Hier wurden die ersten zwei Spalten zu einer Gruppe

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

CSS hervorgehoben. Die letzte Spalte ist eine eigene Spaltengruppe.

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

Sie eine Gruppe mit zwei Spalten und mit einer Spalte.

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

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

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

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


187

5

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

wie folgt realisieren:

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

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

</tr>…</table>

…

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

wird erst ersichtlich, wenn Sie Spalten mit CSS stylen wollen. Die semantische Auftei-

lung in drei Spalten finden Sie in Abbildung 5.9 dargestellt.

Abbildung 5.9 Semantische Aufteilung in drei Spalten

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

<table>

<tr>

<tr>

<tr>

<tr>

</tr>

</tr>

</tr>

</tr>

<th>...</th>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

<td>...</td>

</table>

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

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

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


188

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

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

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

den muss, oder Sie verwenden die neuen figure- und figcaption-Elemente.

Tabelle beschriften mit <caption>

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

Tag folgen. Außerdem kann nur eine Beschriftung pro Tabelle verwendet werden.

Hierzu ein einfaches Beispiel:

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

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


</tr>……

</table>…


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


189

5

<caption> mit CSS formatieren

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

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

caption-side die Ausrichtung und die Position der Tabellenbeschriftung woanders

zu platzieren.

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

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

tion> setzen.

Abbildung 5.11 Informationen zum Auf- und Zuklappen dank der neuen

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

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

Beschriften einer Tabelle mit <figcaption>

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

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

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

und eine Beschriftung dieser Tabelle am Anfang nach dem öffnenden <figure> oder

am Ende vor dem schließenden </figure> einzufügen. Hierzu ein Beispiel, wie Sie

eine Tabelle mit den neuen figure- und figcaption-Elementen beschriften können:

…<article><h1>Browserstatistik August 2015</h1><figure><table><tr>


190

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


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

…


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

5.2 »Elektronische« Verweise aka Hyperlinks mit <a>

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

es damit erst möglich wird, sich von einer Webseite zur anderen zu bewegen. Hyper-

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

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

Sie oft Verweise zu weiteren Unterseiten und eventuell auch wieder Verweise zurück

zur Hauptseite. Erst durch die Verlinkung mehrerer Dateien wird eine Webseite zu

einer sinnvoll bedienbaren Webseite. Neben der Verlinkung eigener Inhalte können

Sie aber auch Links zu anderen Webseiten oder anderen Dokumenten erstellen, die

sich ganz woanders im Internet befinden.


191

5

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

erstellen. Der Text, den Sie zwischen <a> und </a> schreiben, heißt Linktext oder Ver-

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

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

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

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

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

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

wieder.

Erlaubtes zwischen <a> und </a>

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

ken zwischen <a> und </a> verwenden. Mit HTML5 dürfen Sie sogar, im Gegensatz zu

HTML 4.01, gruppierende Elemente wie Absätze, Listen, Artikel, Blocksätze usw. ver-

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

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

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

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

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

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

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

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

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

mente für Links zur Verfügung stehen. Wenn Sie extrem viel zwischen <a> und </a>gesteckt haben und sich nicht mehr sicher sind, ob es noch gültig ist, können Sie den

Quelltext auch einfach validieren (siehe Abschnitt 1.5.5, »Geschriebenes HTML über-

prüfen«).

Das wichtigste Attribut, mit dem das a-Element fast immer verwendet wird, ist das

href-Attribut. Mit dem href-Attribut geben Sie den Verweis an, wohin der Benutzer

gelangt, wenn er auf den Linktext klickt.

Abbildung 5.13 Der klassische Aufbau eines Hyperlinks

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

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

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

Dies ist die Seite, wohin der Hyperlink führt


192

Zum Nachlesen

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

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

und Referenzierung«, eingegangen. Lesen Sie gegebenenfalls dort nach, wenn Sie in

den folgenden Abschnitten Probleme mit den dort verwendeten Begriffen haben.

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

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

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

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

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

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

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

abgedruckte Verzeichnisstruktur sei als Beispiel gegeben.

Abbildung 5.14 Verzeichnisstruktur für ein Beispiel von Links zu

anderen Seiten derselben Webseite

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

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

html

seiten

index.html

links.html

about.html

impres-sum.html


193

5

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

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

…


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

Seiten derselben Webseite jede Seite besucht und betrachtet werden.

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

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

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

ten (in diesem Beispiel) in einem Unterordner Namens seiten befinden. Bezogen auf

die Seite links.html, würden die Angaben für das Attribut href wie folgt aussehen:

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

</nav>…

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


194

Hier können Sie sehr schön sehen, wie Sie aus dem Unterordner seiten mit ../ (hier ../

index.html) zum übergeordneten Ordner navigieren, wo sich index.html befindet. Die

anderen beiden Dateien about.html und impressum.html befinden sich im selben

Ordner wie links.html, daher reicht es aus, nur den Dateinamen anzugeben. Ähnlich

müssen Sie auch die Dateien about.html und impressum.html verlinken.

Abbildung 5.16 Das HTML-Dokument »links.html«

5.2.2 Links zu anderen Webseiten einfügen

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

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

Adresse, also die absolute URL, zu dieser Seite angeben müssen. Hierzu wieder ein

einfaches Beispiel, in dem Links auf externe Seiten enthalten sind:

…<article><header><h2>Entwurf zu HTML5.1</h2>

</header><p>Wie bereits berichtet hat das

<a href="http://www.w3.org/">World Wide Web Consortium</a> einen<a href="http://www.w3.org/html/wg/drafts/html/master/">neuen Entwurf</a> für HTML vorgelegt, welche inVersion 5.1 weiterentwickelt wird ...

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


195

5

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

</aside></article>

…


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

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

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


196

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

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

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

nur den Attributwert _blank übergeben. Ein Beispiel hierzu:

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

</p>

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

(hier: http://www.w3.org) hier tatsächlich in einem neuen Fenster oder Tab geöffnet

und geladen werden. Ziel der Verwendung von target="_blank" ist natürlich vorran-

gig, den Besucher der Seite nicht zu »verlieren«, sondern die Seite offen zu lassen,

damit er dort zurückkehrt, wenn er die Seite im neu geöffneten Fenster oder Tab gele-

sen hat.

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

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

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

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

einen JavaScript verarbeitet werden können.

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

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

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

sollten Sie es dem Nutzer überlassen, ob dieser für einen Link eine neue Seite öffnen

will oder nicht. Auch wenn Sie es vielleicht gewohnt sind, unzählige Tabs und mehrere

Webseiten auf einmal geöffnet zu haben, so sollten Sie immer an die etwas unerfah-

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

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

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

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

5.2.4 E-Mail-Links mit »href=mailto:...«

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

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

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

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


197

5

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

</footer>…


Abbildung 5.19 Wenn Sie mit der Maus über dem Link stehen bleiben,

können Sie gewöhnlich in der Statusleiste die E-Mail-Adresse sehen, die mit

diesem Link verknüpft ist. Aktivieren Sie den Link …

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


198

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

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

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

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

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

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

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

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

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

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

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

Ihnen trotzdem eine E-Mail senden können.

Achtung vor Spam!

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

später mit unerwünschten Werbe-E-Mails (Spam) rechnen, weil es Webcrawler gibt,

die Webseiten nach E-Mail-Adressen durchsuchen. Sie haben sogar die Pflicht, die

E-Mail-Adresse im Impressum zu nennen (§5 Allgemeine Informationspflicht; http://

www.gesetze-im-internet.de/tmg/__5.html). Der einzige Schutz wäre, die E-Mail-

Adresse nicht im Quelltext zu nennen. Die erste Möglichkeit, dies zu vermeiden,

wäre die Einbindung als Grafik. Allerdings wäre dies wieder diskriminierend gegen-

über Personen, die auf Screenreader angewiesen sind, und auch so ist eine »Grafik-

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

das @-Zeichen einfach durch (at) ausgetauscht wird (z. B. webmaster (at) dieter-

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

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

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

Alternativ könnten Sie auch die E-Mail-Adresse im Unicode-Format mit numerischen

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

numerischen Entität wie folgt aus:

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

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

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

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

che Informationen verwerten kann. Eine interessante Webseite, wie Sie es besser

machen können, Ihre E-Mail-Adresse z. B. mit JavaScript zu verstecken, finden Sie

hier: http://alistapart.com/article/gracefulemailobfuscation.


199

5

5.2.5 Links zu anderen Inhaltstypen setzen

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

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

sen Dokumententypen weiterbehandelt. Darauf haben Sie als Webentwickler keinen

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

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

Dokument der Webbrowser einen entsprechenden PDF-Reader aufruft und das

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

abhängiges oder herstellerspezifisches Dokument ist (wie z. B. ein Word-Dokument).

Hierzu ein einfaches Beispiel:

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

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


Abbildung 5.21 Hier haben Sie drei Links auf verschiedene Inhaltstypen.

Was bei diesen drei im Beispiel verwendeten Links jetzt genau passiert, kann nicht

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

dürfte der Webbrowser wissen, wie er damit umzugehen hat. Schwieriger dürfte es

mit dem Film im MOV-Format sein, weil dafür gewöhnlich ein QuickTime-Plug-in

von Apple benötigt wird. Einige Webbrowser bieten dazu an, dass entsprechende

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

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

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

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


200

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

lichkeit zum Herunterladen des Dokuments angeboten.

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

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

ments kann hier aber auch geändert werden. Auch ein Herunterladen mit Datei

speichern wird angeboten.

Abbildung 5.22 Öffnen eines Word-Dokuments im Webbrowser

Plug-ins nachrüsten

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

Plug-ins oder Add-ons nachzurüsten, um eine bestimmte Datei anzuzeigen oder wie-

derzugeben. Wenn Sie wirklich einen solchen Inhaltstyp auf Ihrer Webseite anbieten,

der ein bestimmtes Plug-in oder Add-on benötigt, sollten Sie den Besucher vorher

darauf hinweisen. Ob dieser allerdings das Plug-in oder Add-on installiert, nur um

den einen Inhalt betrachten zu können, bleibt fraglich und hängt wohl auch vom

Inhalt ab (ob sich der Aufwand lohnt). Mit HTML haben Sie keinen Einfluss darauf.

Inhaltstyp mitangeben

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

Typ mit dem type-Attribut im öffnenden <a>-Tag mitteilen, wie dies im Beispiel mit

application/msword für ein Word-Dokument gemacht wurde. Die Informationen sind

für den Webbrowser und auch andere Webclients sehr nützlich. Sinnvoll ist eine sol-

che Angabe des Dateiformats eigentlich fast immer, wenn das Linkziel kein HTML-

Dokument ist. Eine Liste mit bekannten MIME-Typen finden Sie in Abschnitt A.19,

»MIME-Typen (Internet Media Type)«.


201

5

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

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

cher auf jeden Fall darüber informieren, was sich hinter dem Link versteckt und,

eventuell auch, wie groß diese Datei ist. Sie können hierzu das globale title-Attribut

im öffnenden <a>-Element verwenden, aber es ist auch empfehlenswert, genauere

Angaben direkt beim Linktext zu erwähnen. Ein Negativbeispiel, wie es nicht

gemacht werden sollte, sieht so aus:

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

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

und vielleicht verdutzt reagieren, wenn dieser Link ein PDF-Dokument ist, das viel-

leicht etwas länger zum Laden benötigt. Besser ist daher, Folgendes zu schreiben:

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

</a>

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

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

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

das Attribut download im öffnenden <a>-Tag verwendet. Hier nochmals derselbe

HTML-Code vom Beispiel /Beispiele/Kapitel005/5_2_5/index.html zuvor, nur werden

jetzt alle drei Dateien mit dem download-Attribut zum Download angeboten:

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

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

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

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

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


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

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


202

chende Plug-in bzw. Add-on dazu kennt, das er für gewöhnlich für einen solchen

Inhaltstyp verwenden würde.

Das Attribut download können Sie auch als allein stehendes Attribut verwenden, wie

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

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

der Link in href keinen sinnvollen Namen, können Sie dem download-Attribut auch

einen anderen Namen zuweisen, wie es im Beispiel mit dem MOV-Film der Fall ist, wo

der eigentliche Dokumentenname ganges.mov lautet, der Downloadname der Datei

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

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

href und download derselbe Dokumentenname verwendet wird. Das letzte Beispiel

mit dem HTML-Dokument soll nur demonstrieren, dass selbst webbrowsertypische

Inhaltstypen wie hier ein HTML-Dokument mit dem Attribut download wirklich nur

noch als Download angeboten werden.

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

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

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

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

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

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

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

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

packt werden kann. Bedenken Sie, dass viele Besucher nichts mit Dateiendungen wie

*.odt, *.xls, *.zip, *.tar.bz usw. anfangen können. Halten Sie es nicht für selbstverständ-

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

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

anzugeben. Der Download eines umfangreichen ZIP-Archivs könnte somit wie folgt

notiert werden:

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

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

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

</small>…


203

5

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

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

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

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

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

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

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

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

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

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

5.2.7 Links zu bestimmten Teilen einer Webseite setzen

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

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

lange hoch- und herunterscrollen zu müssen, um zu einem speziellen Abschnitt zu

gelangen. Für solche Fälle können Sie sogenannte Anker mit dem globalen Attribut

id setzen, den Sie dann mit einem gewöhnlichen Link mit dem a-Element anspringen

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

zeichnis eines Themas verwendet. Für eine Verlinkung zu einem bestimmten

Bereich einer Webseite benötigen Sie nur:

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

Zum Beispiel:

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

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

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

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

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

verwenden können:

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


204

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

…


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

ken schneller zum gewünschten Abschnitt gelangen.

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


205

5

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

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

Unterhalb von jedem Abschnitt wurde außerdem ein weiterer Link zur Sprungmarke

zurück nach oben zum Inhaltsverzeichnis eingefügt.

Abbildung 5.24 … schneller zum gewünschten Abschnitt gelangen

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

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

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

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

bei den Hauptüberschriften <h1> und <h2> gemacht (z. B. <h2 id="techniken">). Der

Attributwert von id muss mit einem Buchstaben oder einem Unterstrich anfangen

(auf keinen Fall mit einer Zahl) und darf keine Leerzeichen enthalten. Es ist außerdem

ratsam, einen aussagekräftigen Namen zu verwenden, um nicht den Überblick zu

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

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

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

geachtet.

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

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

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


206

Auf einen Anker verweisen mit »#ankername«

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

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

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

chen # schreiben. Bezogen auf unser Beispiel, müssten Sie dies wie folgt notieren:

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

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

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

zum <h2>-Element mit der Überschrift Techniken rund um HTML gesprungen.

Links zu einem bestimmten Bereich einer anderen Webseite erstellen

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

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

auch einen entsprechenden Anker enthält. Wenn sich der Anker in einem anderen

Dokument befindet, können Sie wie folgt einen Verweis dorthin erstellen:

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

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

zeichnis befindet und dessen Dateiname tech.html lautet, zum Bereich mit dem

Anker #techniken springen.

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

die komplette URL dorthin angeben:

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

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

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

dern nur bereits vorhandene Anker verlinken können. Hier z. B. ein Link zu einem

verankerten Bereich einer Wikipedia-Seite:

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

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

sionen springen. Allerdings setzt dies voraus, dass der Anker existiert – was zur

Drucklegung des Buches zwar noch der Fall war, sich aber jederzeit ändern könnte.

Wenn der Anker nicht mehr existiert oder falsch ist, wird die Webseite aufgerufen

und der Anker ignoriert, wie dies ohne eine Angabe von #ankername bei der Verlin-

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


207

5

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

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

u. a. auch für die Suchmaschinen recht nützlich sein können. In Tabelle 5.1 finden Sie

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

haben Sie ja bereits kennengelernt.

Attribut Beschreibung HTML

download Damit geben Sie an, dass Sie das Verweisziel zum

Download anbieten, auch wenn der Webbrowser

den Inhaltstyp des Ziels selbst darstellen könnte.

5

href Damit geben Sie die URL der Seite an, wo der Link

hinführt, wenn dieser aktiviert wird.

hreflang Hier können Sie die Sprache des verlinkten Doku-

ments angeben. Als Angaben sind die üblichen Spra-

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

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

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

entweder Medientypen, durch Kommata getrennt,

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

5

rel Das Attribut kennen Sie bereits vom link-Element

aus Abschnitt 3.5.1, »Die HTML-Attribute für das

allein stehende HTML-Element <link>«, wo Sie

zurückblättern können, wenn Sie mehr Informatio-

nen benötigen. Hiermit bestimmen Sie den Typ der

Verlinkung. Speziell für das a-Element sind hier noch

die rel-Attributwerte bookmark, external, nofollow

und noreferrer von besonderer Bedeutung, da diese

nur im a-Element verwendet werden können.

� rel="bookmark": Hier legen Sie fest, dass das Ver-

weisziel ein übergeordneter Abschnitt (bzw.

Dokument) des aktuellen Dokuments ist. Dies

stellt praktisch eine Verlinkung zurück zu einem

umfangreichen HTML-Dokument dar, wie es bei

wissenschaftlichen oder technischen Dokumen-

ten der Fall ist. In der Praxis wird dieser Linktyp

auch für Permalinks verwendet, um eine ältere

Version des aktuellen Dokuments ansehen zu

können.

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


208

Veraltete Attribute

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

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

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

zu einem externen Webangebot gehört. Häufig

wird dieser mit CSS noch gesondert formatiert.

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

ler an, dem Link nicht zu folgen.

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

browser des Besuchers an, beim Anklicken des

Links keine Referrer-Adresse zu verwenden,

wodurch vermieden werden sollte, dass der Web-

server der Zieladresse keine Informationen erhält,

von woher der Besucher gekommen ist.

Nicht verwenden hingegen können Sie die Attribut-

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

Elemente.

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

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

� _blank: neues Fenster/Tab

� _parent: Eltern-Fenster

� _self: aktuelles Fenster

� _top: oberste Fensterebene

� framename: Name des Fensters, das mit JavaScript

geöffnet und auch darin vergeben wurde

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

(Dateiformat) nennen, zu welchem die verlinkte

Datei gehört. Eine Liste bekannter MIME-Typen fin-

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

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

wenn das Ziel kein HTML-Dokument ist.

5

Attribut Beschreibung HTML

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

493

13

Kapitel 13

Das Layout mit CSS gestalten

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

und der Positionierung von CSS vertraut sind, können Sie sich endlich

an praxisnähere Beispiele heranwagen. In diesem Kapitel wird konkret

das Erstellen von Layouts mit CSS behandelt.

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

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

falls Sie sich zum ersten Mal mit diesem Thema befassen, könnte die Flut an Informa-

tionen hierzu zunächst erschlagend wirken.

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

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

erheblich einfacher machen können. Auf solche CSS-Frameworks wird in diesem

Buch noch an anderer Stelle eingegangen. In diesem Kapitel werden Sie zunächst die

Grundlagen zur Erstellung eines Layouts mit CSS kennenlernen.

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

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

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

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

Element für den Hauptinhalt«.

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

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

erstellen können.

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

� In diesem Kapitel wird umfassender auf das Thema Responsive Layouts eingegan-

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

räts des Besuchers berücksichtigen.

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

einem Raster (englisch: Grid) wird eingegangen.

13 Das Layout mit CSS gestalten

494

13.1 Exkurs: Was bedeutet feste und flexible Breite?

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

lernen. Dabei werden Sie Methoden mit einer festen und andere Methoden mit einer

flexiblen Breite verwenden. An dieser Stelle werde ich Ihnen kurz den Unterschied

und die Vor- und Nachteile von festen und flexiblen Layouts erläutern.

13.1.1 Ein Layout mit fester Breite

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

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

Die Vorteile von Layouts mit fester Breite sind:

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

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

Rest der Seite.

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

Layout, und auch die Umsetzung ist hierbei häufig wesentlich einfacher.

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

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

großen Bildschirmen an. In der Praxis funktionieren solche Layouts am besten in

der Auflösung, für die sie erstellt worden sind, was in der Regel Desktopbild-

schirme sind.

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

der Text nicht mehr im dafür vorgesehenen Platz bleibt.

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

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

sehnliche Lücke.

13.1.2 Ein Layout mit flexibler Breite

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

Dadurch passt sich bei einer Änderung des Webbrowser-Fensters auch das Layout

mit an.

Die Vorteile einer flexiblen Breite sind:

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

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

schrumpft.

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

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

13.2 Ein zweispaltiges Layout erstellen

495

13

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

ausdehnen kann.

Als Nachteile einer flexiblen Breite sind zu nennen:

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

fach zu realisieren.

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

wenn z. B. der Bildschirm extrem breit ist und die Textzeilen unendlich lang wer-

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

mengestaucht werden, dass nur noch einzelne Wörter pro Zeile vorhanden sind.

In diesem Fall können Sie eventuell Abhilfe schaffen mit den CSS-Eigenschaften

min-width bzw. max-width.

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

zu kleinen Bildschirmgröße herausragen und so anderen Text überdecken. Aber

auch Bilder lassen sich flexibel gestalten.


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

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

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

fach eine weitere Seitenleiste mit marginalen Informationen und/oder weiteren

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

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

gerichtet.

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

Navigation – <nav>

Hauptinhalt

<main>

<div id=″main″>

oder

Seitenleiste

<aside>

Kopfleiste – <header>

Fußleiste – <footer>


496

13.2.1 Zweispaltiges Layout mit flexibler Breite und absoluter Positionierung

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

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

der Spalte mit position:absolute ganz links (left:0;) oder rechts (right:0;) mit einer

bestimmen Breite zu platzieren und in der anderen Spalte einen entsprechend gro-

ßen Außenabstand mit margin (margin-left oder margin-right) zu diesem absolut

positionierten Element zu verwenden. Damit sich das Layout an die Fenstergröße

flexibel anpassen kann, wird jeweils eine prozentuale Angabe der Breite (width) ver-

wendet.

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

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

fluss genommen und ganz nach rechts (right: 0) mit 25 % Breite platziert. Auf der

anderen Seite wurde dem Hauptinhalt ein Außenabstand (margin-right) nach rechts

von dieser Breite (25 %) zugewiesen, und der Hauptinhalt selbst bekommt 75 %, also

die Differenz von der kompletten Breite des Fensters (100 %) minus der Seitenleiste

(25 %).

Abbildung 13.2 Eine flexible Breite mit absoluter Positionierung

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

riert, dessen Endergebnis Sie in Abbildung 13.3 sehen. Im Beispiel wurden außerdem

nicht exakt 25 % und 75 % wie in der Abbildung verwendet, weil noch etwas Raum für

das padding bleiben sollte, damit nicht alles so eng zusammengeklebt wirkt.

<style>…

#sidebar {

Navigation – <nav>

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

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

Kopfleiste – <header>

Fußleiste – <footer>


497

13

position: absolute;right: 0;margin: 0;padding: 2% 2%;border: 0;width: 22%;

}main {

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

}</style>

…<header>Zweispalter mit absoluter Positionierung</header><nav id="mainnav"><a href="#">Home</a> | … </nav><aside id="sidebar">

<h3>Seitenleiste</h3><p>Lorem ipsum dolor … </p><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul><p>Lorem ipsum dolor … </p>

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

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

</article></main>

<footer>Fußzeile</footer>…



498

Abbildung 13.3 Das zweispaltige flexible Layout bei der Darstellung

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

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

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

dann nur an zwei Stellen wie folgt ändern, um das Ergebnis in Abbildung 13.4 zu

erhalten:

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

}main {

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

}…



499

13

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

wechseln.

Ausdehnung festlegen

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

einer Größenänderung des Webbrowser-Fensters gedehnt oder geschrumpft. Wol-

len Sie die maximale oder minimale Ausdehnung der Spalten festlegen, können Sie

hierzu zusätzlich die CSS-Eigenschaft min-width und/oder max-width verwenden. Mit

min-width geben Sie die minimale und mit max-width die maximale Breite bzw. Aus-

dehnung an.

Die Nachteile von diesem Layout

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

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

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

ment aus dem Dokumentenfluss genommen haben, und daher wird keine Rücksicht

mehr auf die Fußleiste genommen, wie Sie in Abbildung 13.5 sehen.

Wenn Sie sicher sein können, dass der Inhalt des absolut positionierten Elements

nicht länger ist als der Inhalt der anderen Spalte daneben, können Sie diese Form des

Layouts mit der absoluten Positionierung verwenden.


500

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

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

13.2.2 Zweispaltiges Layout mit fester Breite und absoluter Positionierung

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

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

einer prozentualen Angabe eine pixelgenaue Angabe verwenden. Ansonsten bleibt

das Prinzip dasselbe wie in Abschnitt 13.2.1 vorgestellt – und somit bleibt auch hier

das Problem bestehen, wenn die Seitenleiste länger ist als der Hauptinhalt, dass diese

dann über die Fußleiste hinausragt. Hier die CSS-Anweisung:

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

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


501

13

width: 450px;}

…


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

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

ßern oder verkleinern. Die Kopf- und Fußleiste und die Navigation sind in diesem

Beispiel noch flexibel. In Abbildung 13.6 können Sie sehr schön erkennen, wie zwi-

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

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

standen ist. Verkleinern Sie das Webbrowser-Fenster in der Breite, also kleiner als

die Breite von Hauptinhalt plus Seitenleiste, müssen Sie auf der Webseite gar quer-

scrollen.

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

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

13.2.3 Den (Haupt)inhalt horizontal zentrieren

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

zentrieren, so funktioniert dies, indem Sie die Breite angeben, u. U. auch in Prozent

oder em und die äußeren Abstände links und rechts von margin auf auto zu setzen.


502

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

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

zontal zentrieren:

…#wrapper {

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

}…

<div id="wrapper"><main>

<article>

<h1>Artikel 1</h1>

<p> … </p>

</article>

<article>

<h1>Artikel 2</h1>

<p> … </p>

</article>

</main>

</div>…


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

Hauptinhalt angegeben. Hierbei wurde natürlich neben der Breite des Hauptinhalts

auch die Seitenleiste berücksichtigt. Dann wurden mit der margin-Kurzschreibweise

die linke und rechte Seite auf auto und die obere und untere Seite auf 0 gesetzt. Zu

guter Letzt haben Sie den ID-Selektor noch in einem div-Element verwendet und den

Hauptinhalt (hier: <main>…</main>) darin eingeschlossen. Jetzt »wandert« der Haupt-

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

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

erfolgen. Das Ergebnis sehen Sie in Abbildung 13.7.

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

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

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

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

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


503

13

…main {

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

}…


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

10 % gestellt. Mit einer Angabe von Pixeln könnten Sie auch einen fixen Innenab-

stand verwenden.

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

zentriert.

13.2.4 Zweispaltiges flexibles Layout mit »float« erstellen

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

Gegensatz zum absolut positionierten flexiblen Layout haben Sie das Problem mit

der Fußzeile nicht mehr, wenn z. B. die Seitenleiste länger ist als der Hauptinhalt.


504

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

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

fluss herausgenommen werden.

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

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

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

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

} /* Breite 22% + padding x 2 = 26% */main {float: right;padding: 2% 2%;margin: 0;border: 0;width: 70%;

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

…


Zuerst richten Sie die Seitenleiste mit float:right ein, damit diese immer rechts

bleibt. Die Breite beträgt insgesamt 26 %, was sich aus den 22 % von width und den 2 ×

2 % Außenabständen in padding rechts und links ergibt. Sie wissen ja noch, dass Sie

bei einer Box mit float eine Breite angeben müssen.

Auch den Hauptinhalt ordnen Sie so weit rechts wie möglich an und verwenden

float:right. Die Breite beträgt insgesamt 74 %, was sich aus width (70 %) und den bei-

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

die Breite des Zweispalters mit float somit 100 %. Bei einer Breite von mehr als 74 %

würde der Hauptinhalt nach unten wegrutschen.

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

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

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

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

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


505

13

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

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

befindet und der Hauptinhalt rechts, müssen Sie lediglich die float-Ausrichtung von

right auf left setzen.

13.2.5 Minimale und maximale Breite bei flexiblen Layouts einstellen

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

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

dergedehnt oder geschrumpft wird. Ist eine Textzeile in einem Absatztext zu kurz

oder zu lang, leidet der Lesefluss darunter. Daher sollten die Textzeilen weder zu lang

noch zu kurz sein. Was optimal ist, hängt auch von der Schriftgröße ab. Ein guter

Richtwert sind 50 bis 70 Zeichen pro Zeile oder, wie es in der klassischen Buchtypo-

grafie gerne verwendet wird, acht bis zwölf Wörter.

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

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

2_4/index.html, könnten Sie z. B. folgendermaßen eine sinnvolle Begrenzung über

den Inhalt ziehen:

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


506

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

</div></body>

…


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

minimale Breite auf 720 Pixel festgelegt. Das Layout wird also höchstens auf 720

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

wird ein horizontaler Scrollbalken sichtbar, wie Sie es in Abbildung 13.9 sehen. Die

maximale Breite mit max-width haben Sie mit der Einheit em an die Schriftgröße

gekoppelt und auf 60em gestellt. Somit wird der Inhalt nicht breiter als 60em, und Sie

verhindern damit, dass der Text schlechter lesbar wird. 60em sind meistens 960 Pixel,

wenn die Basisschriftgröße des Webbrowsers 16 Pixel ist (60 × 16 = 960). Eine

Umrechnungstabelle dazu finden Sie auf http://pxtoem.com.

Abbildung 13.9 Dank »min-width« gibt es eine Grenze, ab der

das zweispaltige Layout nicht mehr schrumpft.


507

13

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

sich das zweispaltige Layout nicht mehr weiter ausdehnt.

Höhe einschränken

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

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

male Höhe von Boxen angeben können.

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

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

Eigenschaften auch auf einzelne HTML-Elemente anwenden.

13.2.6 Zweispaltiges festes Layout mit »float« erstellen

Es ist auch möglich, ein zweispaltiges festes Layout mit float in Pixeln statt prozen-

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

…#sidebar {float: left;margin: 0;padding: 5px 5px;border: 0;width: 200px;

}main {

float: left;padding: 5px 5px;


508

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

}.clear { clear: both; }

…


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

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

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

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

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

gegangen wurde.

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

machen und die Einschränkungen mit min-width und max-width (siehe Abschnitt

13.2.5, »Minimale und maximale Breite bei flexiblen Layouts einstellen«) zu regeln.

13.2.7 Zweispaltiges Layout mit »display: table« erstellen

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

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

zu erstellen, und wird auch vom Internet Explorer ab Version 8 verstanden. Die ein-

zelnen Spalten können Sie ebenfalls mit der Eigenschaft display und dem Wert table-cell zuweisen. Der Wert table-cell stellt so viel wie das HTML-Element <td> dar.

Tabellen zum Layouten sind doch veraltet?

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

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

auch nicht mit dem HTML-Tag <table>, sondern Sie erstellen eine Tabelle mit der

CSS-Eigenschaft display.

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

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

Tabellenzeile (wie <tr>) umdefinieren. Auf die einzelnen Eigenschaften von display

wird hier nicht näher eingegangen. In diesem Beispiel reicht table-cell aus.

Was macht »display«?

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

andere Mal auch immer wieder diese CSS-Eigenschaft verwenden. Mit dieser Eigen-


509

13

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

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

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

dann, grob gesagt, wie ein <table>-Element. Eine Übersicht über display und die

verschiedenen Werte finden Sie in Abschnitt 13.6, »Verhalten von HTML-Elementen

mit ›display‹ ändern«.

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

…#sidebar {margin: 0;padding: 5px 5px;border: 0;width: 180px;display: table-cell;

}main {

padding: 5px 5px;margin: 0;border: 0;display: table-cell;

}#wrapper {display: table;min-width: 720px;max-width: 60em;

}…

<header>Zweispalter mit display:table</header><nav id="mainnav"><a href="#">Home</a> … </nav><div id="wrapper"><aside id="sidebar"> … </aside><main><article> … </article><article> … </article>

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

…



510

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

schen die Elemente, die Sie als Tabelle behandeln wollen. Hier sind es die Elemente

<aside> mit dem Klassenselektor sidebar und das main-Element, das Sie mit dem ent-

sprechenden Typselektor ausgewählt haben. Als Funktion im Tabellenlayout setzen

Sie für beide Elemente über deren Selektoren die CSS-Eigenschaft display auf table-cell, sodass die beiden Elemente jetzt die Daten in der Tabelle sind. Die Tabellenzeile

müssen Sie nicht angeben.

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

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

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

zeile daneben ein. Damit das Auseinanderdehnen oder Schrumpfen dieses Bereichs

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

wrapper min-width und max-width gesetzt.

Abbildung 13.11 Das Layout mit CSS-Tabellen im Einsatz

13.3 Ein dreispaltiges Layout erstellen

Ebenfalls im Web häufiger anzutreffen sind dreispaltige Layouts, wie Sie es in Abbil-

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

etwa die Hauptnavigation, weitere Informationen oder Sonstiges aufzunehmen. In

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

solche dreispaltigen Layouts mit CSS umsetzen.

975

22

Kapitel 22

Weitere interessante HTML5-Features

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

sondern vielmehr als JavaScript-APIs hinzugekommen. Einige dieser

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

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

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

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

tel etwas näher eingegangen:

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

können.

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

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

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

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

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

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

Web Storage.

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

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

ohne dass der Benutzer dies mitbekommt.

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

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

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

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

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

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

und die File API beschrieben.

22 Weitere interessante HTML5-Features

976

Wichtige Anmerkung zu diesem Kapitel

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

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

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

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

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

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

Buches.

22.1 Den Standort ermitteln mit der Geolocation-API

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

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

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

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

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

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

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

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

Internetverbindung.

GPS

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

system, mit dem die Position bestimmt werden kann.

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

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

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

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

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

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

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

Angabe häufig auf den Meter genau.

Datenschutz und Sicherheit

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

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

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


977

22

Genehmigung vom Besucher bekommen Sie keine Positionsdaten. Bei den meisten

Webbrowsern erfolgt eine solche Abfrage am oberen Bildschirmrand in Form einer

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

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

rückgängig gemacht werden.

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

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

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

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

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

sprechende Symbol in der URL-Leiste verwalten.

22.1.1 Die Geolocation-API in einem HTML-Dokument verwenden

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

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

dung der Geolocation-API demonstriert:

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

<script>


978

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

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

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

}}

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

}</script>…

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

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

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

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

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

Zustimmung vom Benutzer gefordert werden. Wenn die Zustimmung gegeben

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

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

mit showPosition eingerichteten Callback-Funktion übergeben wird.

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

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

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

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

Positionsbestimmung vor, die alle in Tabelle 22.1 aufgelistet sind.

Eigenschaft Beschreibung

coords.latitude geografische Breite

coords.longitude geografische Länge

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

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


979

22

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

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

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

zurückgegeben.

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

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

Fallback-Lösung für alte Webbrowser

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

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

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

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

eine Fallback-Lösung wie folgt eingerichtet werden:

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

}

coords.altitude Höhe in Meter

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

coords.heading Richtung

coords.speed Geschwindigkeit

timestamp Zeitstempel der Anfrage


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


980

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

}

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

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

loader/?csw=1) sein.

22.1.2 Fehler und Zugriffsrechte der Geolocation-API behandeln

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

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

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

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

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

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

Hierzu das entsprechende Beispiel:

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

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

}…

}

function showPosition(position) { … }

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

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

}else if(error.TIMEOUT) {


981

22

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

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

}}

</script>…

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

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

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

22.2 aufgelistet.

22.1.3 Feintuning mit weiteren Optionen der Geolocation-API

Die Methode getCurrentPosition() kann noch einen dritten optionalen Parameter

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

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

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

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

Fehler Bedeutung

PERMISSION_DENIED Zugriff verweigert. Vermutlich hat der Benutzer die Erlaub-

nis zur Positionsbestimmung verweigert oder eine Einstel-

lung auf dem Gerät blockiert diese Funktion.

POSITION_UNAVAILABLE Die Position konnte nicht ermittelt werden.

TIMEOUT Die Abfrage der Position dauerte zu lang und konnte nicht

innerhalb einer bestimmten Zeit bestimmt werden.

Tabelle 22.2 Codeeigenschaften zum Auswerten von Fehlern


982

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

}}

…


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

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

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

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

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

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

};…


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

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

solche Optionen für eine genauere Positionsbestimmung an.

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

ruf der Methode getCurrentPosition() fehlschlägt, wenn

diese Option auf true gesetzt wurde, wohingegen ein Aufruf

mit false erfolgreich gewesen wäre.

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

Ortsangabe verwendet werden darf, wenn Sie das nächste

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

keine im Cache gehaltenen Daten verwendet, und es wird

immer die aktuelle Position benötigt.

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

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

Daten geholt werden konnten.

Tabelle 22.3 Optionale Geolocation-Optionen


983

22

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

mung aktiviert. Wurde die letzte Standortbestimmung mit getCurrentPosition()

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

Standardortbestimmung verwendet werden, was mit maximumAge:30000 angegeben

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

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

zurückgegeben (timeout:27000).

22.1.4 Die Position des Benutzers dauerhaft überwachen

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

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

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

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

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

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

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

zuvor verwenden und einfach nur getCurrentPosition durch watchPosition ersetzen.

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

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

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

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

anzuhalten.

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

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

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

Phone).

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

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

984

maximumAge : 30000,timeout : 27000

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

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

}}

function showPosition(position) { … }

function showError(error) { … }

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

}}

</script>…


22.1.5 Die Position des Benutzers auf einer Karte anzeigen

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

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

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

Geolocation-API vermischen.

Achtung, komplex!

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

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

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

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

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

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

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


985

22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

showPositionBing, showError, geo_options);}

}


986

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

}}

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

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

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

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

}

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

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

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

}

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

</script>…



987

22

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

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

Stylesheet fest.

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

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

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

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

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

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

handen ist.

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

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

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

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

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

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

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

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

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

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

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

der Geolocation-API zu tun haben.

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

Google Maps API & Bing Maps AJAX Control

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

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

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

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

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

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

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

Schlüssel dafür benötigen und im Beispiel anstelle von Ihr Schlüssel für die Bing-Map eintragen müssen. Einen Schlüssel können Sie z. B. bei Microsoft unter http://

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


988

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

Standort auf der Google-Karte an.

22.1.6 Eine einfache Navigation vom aktuellen Standardort erstellen

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

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

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

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

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

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

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

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

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

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

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

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

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

vorhanden ist.

22.2 Ziehen und Fallenlassen mit der Drag&Drop-API

989

22

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

22.2 Ziehen und Fallenlassen mit der Drag&Drop-API

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

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

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

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

auch nativ ohne weitere Bibliothek nutzen.

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

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

komplexer ist.

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

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

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

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

HTML5 und CSS3 – Das umfassende Handbuch - … · 5 Tabellen, Hyperlinks und Bilder 182 sollten...

Documents

Transcript of HTML5 und CSS3 – Das umfassende Handbuch - … · 5 Tabellen, Hyperlinks und Bilder 182 sollten...