Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)

HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)

Das Salz in der Suppe des Internets ist die Möglichkeit, Inhalte mittels Hyperlinks miteinander zu verbinden. Gäbe es diese Hyperlinks nicht, wäre das Internet in seiner heutigen Form nicht denkbar. Welche Varianten euch HTML hinsichtlich der Hyperlink-Definitionen bietet, erfahrt ihr in diesem und im nächsten Video-Training.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die Definition von Verweisen erfolgt in HTML über das a-Element. Bevor ich euch dessen Verwendung zeige, noch einige allgemeine Hinweise zu den Hyperlinks. Überlegt euch unbedingt gute Verweistexte. Mit einem schnöden zurück ist normalerweise niemandem geholfen. (Wenn ein Besucher nämlich von einer externen Seite kommt, weiß er in aller Regel nicht, was mit zurück gemeint ist). Versucht, beschreibende Verweistexte zu wählen.

Hyperlinks folgen in HTML immer demselben Prinzip.

<a href="videos.html">Aktuelle Videos</a>

Dem a-Element wird das Attribut href zugewiesen. Dieses href wiederum erwartet als Wert das Verweisziel. Im vorherigen Beispiel wurde auf die Datei videos.html verwiesen. Diese befindet sich im selben Verzeichnis wie die HTML-Datei, in welcher der Hyperlink definiert wurde.

Bilder



 
Bei der Definition der Hyperlinks gelten ansonsten die Regeln, die auch im Zusammenhang mit dem Einbinden von Grafiken vorgestellt wurden.

Ihr könnt übrigens nicht nur projektinterne Verweise definieren. Ebenso lassen sich Hyperlinks auch auf externe Dateien und Domains setzen.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>

Der Text, der zwischen öffnendem <a> und schließendem </a> steht, ist letztendlich der Verweistext. Standardmäßig wird dieser Text von den Browsern unterstrichen dargestellt.

Bilder



 

Zielfenster angeben

Klickt man einen Hyperlink an, wird das Verweisziel im aktuellen Browserfenster geöffnet. Das ist so normalerweise völlig in Ordnung. Es kann aber durchaus sein, dass man beispielsweise einen Verweis auf eine externe Domain gesetzt hat. Klickt ein Besucher diesen Link an, soll das Verweisziel in einem neuen Browserfenster bzw. Tab geöffnet werden. Vorteil dieser Variante: Eure Webseite bleibt im Hintergrund geöffnet.

Bilder



 
Ihr solltet allerdings nicht jeden Hyperlink eurer Seite in einem externen Fenster öffnen, da Besucher davon schnell genervt sind.

Über das target-Attribut des a-Elements lässt sich das Zielfenster bestimmen, in dem das jeweilige Verweisziel geöffnet werden soll. Dabei bietet HTML zunächst einmal drei Standardwerte für target an.

_blank – Das Verweisziel wird in einem neuen Browserfenster angezeigt.
_self – Öffnet das Verweisziel im aktuellen Browserfenster.
_parent – Hier kann man aus dem Frame ausbrechen. (Beachtet bitte, dass Frames in HTML5 nicht unterstützt werden. Ohnehin sollte man diese Technik nicht mehr einsetzen, da es dafür heute bessere Alternativen gibt. Wer sich näher mit den Frames befassen will, wird beispielsweise auf der Seite http://de.wikipedia.org/wiki/Frame_(HTML) fündig).
_top – Auch das wird im Zusammenhang mit Frames verwendet. Ihr könnt damit das Verweisziel außerhalb des Framesets öffnen.

Hier ein Beispiel dafür, wie man das target-Attribut einsetzt:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>

In diesem Fall würde das Verweisziel http://www.psd-tutorials.de also in einem neuen Fenster/Tab geöffnet werden. Denselben Effekt würde man übrigens auch erzielen, wenn man anstelle des reservierten Namens _blank einen Fantasienamen wie halligalli verwendet. Wenn ihr aber target einsetzt, würde ich tatsächlich zu einem der reservierten Namen raten.


Die Verweisbasis bestimmen

Ihr könnt im head-Bereich der HTML-Datei eine sogenannte Verweisbasis definieren. Eine solche Verweisbasis sorgt dafür, dass alle Verweisziele in einem bestimmten Browserfenster angezeigt werden. Auch das ist natürlich wieder in erster Linie in Verbindung mit Frames interessant.

Praktisch ist das Ganze allerdings auch, wenn ihr beispielsweise sämtliche Links mittels _blank in einem neuen Browserfenster anzeigen lassen wollt. Stellt euch dazu eine Linkliste vor. Sollen deren Verweisziele immer ein neues Fenster öffnen, sähe das so aus:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a>
<br />
<a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a>
<br />
<a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>

Ihr müsstet also jeder a-Definition ein target-Attribut zuweisen.

Das ist nicht sonderlich effizient, wie ihr seht. Noch weniger effizient wird es dann übrigens, wenn ihr in ein paar Monaten entscheidet, die Verweisziele doch nicht in einem neuen Fenster öffnen zu lassen. Dann müsstet ihr die target-Attribute aller Links anpassen. Verhindern lässt sich das über besagte Zielfensterbasis. Definiert wird diese über das base-Element innerhalb von head. Dem base-Element weist man das target-Attribut mit dem gewünschten Wert zu. Hier ein Beispiel dazu, wie das aussehen könnte:
<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>PSD-Tutorials.de</title>
 <meta charset="UTF-8" />
 <base target="_blank">
 </head>
 <body>
 <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a>
 <br />
 <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a>
 <br />
 <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a>
 </body>
 </html>

Das spart euch eine Menge Tipparbeit.


 

Anker definieren

Wie ihr Hyperlinks auf andere Dateien setzen könnt, habt ihr bereits gesehen. Ebenso lassen sich aber innerhalb einer HTML-Datei auch sogenannte Anker definieren. Anschließend könnt ihr Verweise auf eben diese Anker setzen. Praktisch ist das beispielsweise bei umfangreichen Seiten. So kann man zu Beginn des Dokuments ein Inhaltsverzeichnis definieren, über das die Besucher zu den für sie relevanten Stellen springen können, ohne durch das Browserfenster scrollen zu müssen.

Bilder



 
Anker werden über das a-Element erzeugt. Allerdings bekommen Anker-Definitionen kein href-, sondern ein name-Attribut zugewiesen.
<a name="seitenanfang">Inhalt</a>
<a name="kapitel1">Inhalt Kapitel 1</a>
<p>Hier folgt ganz viel Text.</p>
<a name="kapitel2">Inhalt Kapitel 2</a>
<p>Hier folgt ganz viel Text.</p>

Die Ankernamen könnt ihr frei vergeben. Ich empfehle euch allerdings, diese möglichst kurz zu wählen, nur Kleinschreibung zu verwenden und auf Sonderzeichen zu verzichten.

Um auf einen Anker zu verweisen, definiert man einen normalen Hyperlink, so wie das eingangs dieses Tutorials gezeigt wurde.
<a href="#seitenanfang">Zum Seitenanfang</a>

Dem href-Attribut wird als Wert der Ankername zugewiesen. Entscheidend ist hierbei allerdings, dass dem Ankernamen ein Rautezeichen vorangestellt wird.

Ihr könnt Verweise auf Anker übrigens auch dateiübergreifend setzen. Ich gehe im folgenden Beispiel davon aus, dass es eine Datei news.htm gibt, die im selben Verzeichnis wie die eigentliche HTML-Datei liegt. Innerhalb der news.htm wurde der Anker seitenanfang definiert. Um auf diesen zu verweisen, wird hinter dem Namen der Zieldatei (news.htm) ein Rautezeichen notiert. Daran schließt sich wiederum der Ankername an.
<a href="news.htm#seitenanfang">Zum Seitenanfang</a>

So einfach könnt ihr also Verweise auf Anker in jeder beliebigen Datei setzen.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von blaster M.
  • 12.10.2016 - 16:09

Herzlichen Dank für das Video.

Portrait von ZainaPhoto
  • 28.03.2015 - 20:38

Großen Dank für das Video.

LG Zaina

Portrait von Monti7
  • 01.03.2015 - 10:47

Wie immer super beschrieben! Herzlichen Dank!

Portrait von pallasathena
Portrait von Domingo
  • 30.11.2014 - 22:58

Das Tutorial gefällt, vielen Dank dafür.

Portrait von Kundentest
  • 30.11.2014 - 22:09

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 30.11.2014 - 21:54

Vielen Dank für den 11. Teil :)

Portrait von dornensplitter
Portrait von Caesarion2004
  • 30.11.2014 - 20:54

Vielen Dank für den weiteren interessanten Teil der Reihe.

Portrait von Steve007
  • 09.11.2014 - 17:17

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von MichiL
  • 09.11.2014 - 14:07

Sehr gut erklärt.

Kleine Anmerkung noch zu der Bemerkung, dass man bei 'target="_blank"' statt _blank auch einen anderen Text verwenden könnte.
Wenn man hier etwas anderes als die gezeigten Schlüsselwörter verwendet, dann wird der erste Link wie bei _blank in einem neuen Fenster/Tab geöffnet. Das Fenster bekommt dabei aber den Namen aus target als internen Fensternamen. Wenn jetzt ein weiteres Mal ein Link mit dem selben Target geklickt wird, dann wird der neue Link nicht in einem neuen Fenster, sondern in dem Fenster das beim ersten Mal geöffnet wurde, geöffnet. Der zuvor geöffnete Inhalt verschwindet dann.
Voraussetzung ist natürlich, dass das entsprechende Fenster noch offen ist.

Das Verhalten kann in manchen Situation so gewollt sein, in anderen kann es aber auch ziemlich irritieren. Also am besten mal mit zwei Links ausprobieren und bei der Verwendung genau überlegen wie man den Benutzer auf der Seite führen will.

Portrait von pallasathena
Portrait von Caesarion2004
  • 09.11.2014 - 11:03

Vielen Dank für das weitere Grundlagen-Tutorial und die Datei.

Portrait von B_Kukuk
  • 09.11.2014 - 11:03

Vielen Dank für die beiden Tutorials in kurzer Folge. Da hat man bei diesem Wetter etwas zum Lernen. Informativ und gut gemacht. Danke!

Portrait von Kundentest
  • 09.11.2014 - 09:53

Herzlichen Dank für das Video.

x
×
×