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:

• Hyperlinks – das Besondere am World Wide Web, Abschnitt 5.1

• Die Wegbeschreibung zur Grafik – »img«, Abschnitt 5.2

• Weitere HTML-Elemente zur Auszeichnung von Text, Abschnitt 5.3

• Know-how – Zeichensätze und Sonderzeichen, Abschnitt 5.4

• Auf einen Blick, Abschnitt 5.5

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 das Hyper 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 in Abschnitt 6.2 in Erscheinung.

5.1.1Anatomie eines Hyperlinks

Hyperlinks haben immer denselben Aufbau:

Hier das Beispiel im Detail:

• Das Element zum Erstellen eines Hyperlinks heißt einfach nur a.

• Das Attribut href steht für Hypertext 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.

So wie in Abbildung 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 meist Chronik oder Verlauf heißt, werden auch die besuchten Links wieder blau dargestellt.

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.

Der Link zur Seite kontakt.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 in Abbildung 5.2. Gestaltet wird die Navigationsliste später per CSS.

Abbildung 5.2Die Beispielseite mit einer Navigationsliste

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:

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.