5HTML-Elemente für Links, Bilder und mehr
Worin Sie weitere wichtige HTML-Elemente für Hyperlinks, Grafiken und ein paar andere Dinge kennenlernen sowie das Wichtigste über Zeichensätze und Sonderzeichen erfahren.
Die Themen im Überblick:
In diesem Kapitel komplettieren Sie den kurzen HTML-Grundkurs mit Elementen zum Erstellen von Hyperlinks und zum Einfügen von Bildern. Außerdem lernen Sie noch andere nützliche HTML-Elemente kennen. Den Abschluss bilden Sonderzeichen in HTML und ein Exkurs zur Rolle von Zeichensätzen wie UTF-8.
5.1Hyperlinks – das Besondere am World Wide Web
Hyperlinks sind dasHyper in Hypertext und sind bildlich gesprochen die Fäden, mit denen dieses weltweite Gewebe namens Web gesponnen wird. In gewisser Weise typisch für HTML ist, dass das wichtigste Element in dem ganzen Laden nicht hyperlink heißt, sondern schlicht und einfach a (wie Anker). Es gibt übrigens tatsächlich ein Element namens link, aber das macht etwas anderes und tritt erst inAbschnitt 6.2 in Erscheinung.
5.1.1Anatomie eines Hyperlinks
Hyperlinks haben immer denselben Aufbau:
<ahref="...">Sichtbarer Text</a>
Hier das Beispiel im Detail:
Das Element zum Erstellen eines Hyperlinks heißt einfach nur a.
Das Attribut href steht fürHypertext Reference und enthält die Wegbeschreibung zu einer Datei, die nach einem Klick im selben Browserfenster angezeigt wird. Hier kann ein Dateiname oder auch eine komplette URL stehen.
Zwischen<a> und</a> steht der Text, der vom Browser standardmäßig blau und unterstrichen hervorgehoben wird.
</a> beendet den Hyperlink.
Im folgenden ToDo erstellen Sie einen einfachen Hyperlink zur Website zum Buch.
ToDo: Erstellen Sie einen Hyperlink
Erstellen Sie folgenden Quelltext auf der Beispielseiteunterhalb der verschachtelten Liste undvor</main>:
<p>Besuchen Sie<ahref="http://little-boxes.de/">die Website zum
Buch</a> für weitere Informationen.</p>
Speichern Sie die Seite, und betrachten Sie sie in einem Browser.
So wie inAbbildung 5.1 sieht der Hyperlink im Browser aus.
Abbildung 5.1Ein Hyperlink im Browser – blau und unterstrichen
Beachten Sie, dass der Hyperlink lila wird, nachdem der Link zum ersten Mal angeklickt wurde oder die im a-Element gespeicherte URL mit diesem Browser bereits besucht worden ist. Wenn Sie die Surfgeschichte des Browsers löschen, die je nach Browser meistChronik oderVerlauf heißt, werden auch die besuchten Links wieder blau dargestellt.
Ein Hyperlink zurück nach oben auf derselben Seite
Falls Sie auf einer langen Webseite unten auf der Seite einen Link anbieten möchten, der »zurück nach oben« an den Beginn der Webseite springt, so können Sie eine bereits vorhandene ID als Sprungziel benutzen.
Auf den Beispielseiten könnte das zum Beispiel so aussehen:
<ahref="#wrapper">Nach oben</a>
Die Raute # sagt dem Browser, dass wrapper eine ID ist. Ein Klick auf diesen Link führt zum Element<div id="wrapper"> direkt unterhalb von<body>.
5.1.2Die Navigation – eine ungeordnete Liste mit Hyperlinks
Eine Navigation ist im Prinzip eine Auflistung von Hyperlinks, und aus diesem Grund wird sie oft als ungeordnete Liste notiert. Das Aussehen der Liste wird später per CSS geregelt.
ToDo: Eine Navigationsliste erstellen
Ergänzen Sie auf der Beispielseite die ungeordnete Liste innerhalb des Navigationsbereichs:
<navid="navibereich">
<ul>
<li><ahref="index.html">Startseite</a></li>
<li><ahref="kontakt.html">Kontakt</a></li>
</ul>
</nav>
Speichern Sie die Seite, und betrachten Sie sie in einem Browser.
Der Link zur Seitekontakt.html funktioniert noch nicht, da die Seite erst im nächsten Kapitel erstellt wird, aber der Link kann trotzdem schon eingebaut werden.
Der obere Bereich der Beispielseite sieht im Browser jetzt so aus wie inAbbildung 5.2. Gestaltet wird die Navigationsliste später per CSS.
Abbildung 5.2Die Beispielseite mit einer Navigationsliste
Hyperlinks um Block-Elemente sind in HTML5 erlaubt
In älteren HTML-Versionen war das Element a ein reines Inline-Element und durfte dementsprechend auch nur Inline-Elemente enthalten. In HTML5 ist es eintransparentes Element, eine Art Chamäleon, das sowohl Inline- als auch Block-Element sein kann.
Quintessenz ist, dass Hyperlinks jetzt auch Block-Elemente enthalten dürfen, was im Alltag sehr nützlich ist.
5.1.3Links auf andere Dateien – PDF, MP3 etc.
Hyperlinks müssen nicht unbedingt auf andere Webseiten zeigen. Das Ziel des Hyperlinks kann auch ein PDF, ein MP3 oder irgendeine andere Datei sein, die Sie dem Besucher zum Download anbieten möchten. Dazu benutzen Sie einen ganz normalen Hyperlink, dem Sie im Attribut href den Namen der gewünschten Datei geben.
Im Linktext sollten Sie dem Besucher ein paar Informationen über Dateityp und -größe geben, damit er schon vor dem Anklicken weiß, was ihn erwartet. Für ein PDF könnte das so aussehen:
<ahref="leseprobe.pdf">Leseprobe (PDF, 1,2Mb)</a>
Was genau nach dem Anklicken eines solchen Links im Browser des Besuchers passiert, können Sie dabei nicht kontrollieren, denn ob der Browser ein Dialogfeld zum Speichern der Datei anbietet oder das PDF sofort darstellt, hängt von der Konfiguration des Browsers ab.
Öffnen und lesen kann ein Besucher das PDF aber in jedem Fall nur, wenn er auch ein entsprechendes Programm wie den Adobe Reader installiert hat oder sein Browser PDF von selbst darstellen kann.
Hyperlinks in einem neuen Fenster öffnen – »target="_blank"«
Normalerweise ersetzt ein Link die vorhandene Seite im Browser, sodass der Benutzer mit demZurück-Button wieder auf die vorherige Seite gelangt. Wenn ein Link stattdessen in einem neuen Fenster erscheinen soll, können Sie dazu das Attribut target benutzen:
<ahref="http://little-boxes.de/"target="_blank">die Website zum Buch</a>
(in neuem Tab oder Fenster).
Sie sollten target allerdings sparsam einsetzen, denn im neuen Tab oder Fenster funktioniert zum Beispiel derZurück-Button nicht, was besonders ungeübte Surfer verwirrt. Außerdem kann der Benutzer bei Bedarf den Link über das Kontextmenü selbst in einem neuen Tab oder Fenster öffnen. Mit target...
