Links in HTML erstellen
Links in HTML erstellen
Wie erstellt man einen Link?
Wie verlinkt man Bilder?
Wie öffnet man eine Seite in einem neuen Fenster?
Wie verlinkt man innerhalb einer HTML-Datei zu einem Text?
Um einen Link in HTML zu erstellen verwenden wir das Anchor-Tag a
:
Beispielcode:
<pre><html>
<body>
<a href="http://www.tutorialwelt.de">Suuuper Tutorial-Seite</a>
</body></html></pre>
Sie können nicht nur Texte sondern auch Bilder verlinken:
Beispielcode:
<pre><html>
<body>
<a href="http://www.tutorialwelt.de"><img src="beispielbild.jpg" alt="beispieltext" title="beispieltitle"></a>
</body></html></pre>
Sie können selbst entscheiden, ob die verlinkte Seite in einem neuen Fenster geöffnet werden soll, oder in dem aktuellen Fenster. Dazu verenden wir das Element type:
Um beispielsweise den Link in einem neuen Fenster zu öffnen übergeben wir dem type Element den Wert _blank
Beispielcode:
<pre><html>
<body>
<a href="http://www.tutorialwelt.de" target="_blank">&Link in neuem Fenster öffnen</a>
</body></html></pre>
Verwenden Sie bitte:
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.
Sie können auch Seitenbereiche innerhalb einer HTML Datei verlinken. Klicken Sie bitte auf folgenden Link:
Zurück zu: wie verlinkt man Bilder
Sie werden bemerkt haben, daß Sie bei dem zweiten Beispielcode herausgekommen sind.
Dazu müssen Sie nur einem HTML-Tag einen Namen oder eine ID vergeben. Da beides prinzipiell den gleichen Effekt erzielt (der Unterschied liegt in den erlaubten Zeichen), möchte ich Sie bitten gleich das id-Element zu verwenden. In XHTML (unsere nächste HTML-Tutorial Reihe vor HTML 5.0) ist das name-Element nicht mehr erlaubt.
Beispielcode:
<pre><html>
<body>
<p id="bilderverlinken">Link-Ziel</p>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
DummyText<br>
<a href="#bilderverlinken">Beispiel Link 1</a>
<a href="http://www.tutorialwelt.de/76/links-in-html-erstellen.htm#bilderverlinken">Beispiel Link 2</a>
</body></html></pre>
Sollten Sie alles richtig gemacht haben, müsste der Link zurück zum Anfang der Seite führen.
Im nächsten Tutorial erkläre ich Ihnen eine imagemap. Das ist ebenfalls eine Verlinkung mit einem Bild. Allerdings ist hier nur ein von Ihnen ausgesuchter Bereich auf dem Bild anklickbar.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
