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:
<html>
<body>
<a href="http://www.tutorialwelt.de">Suuuper Tutorial-Seite</a>
</body>
</html>
Sie können nicht nur Texte sondern auch Bilder verlinken:
Beispielcode:
<html>
<body>
<a href="http://www.tutorialwelt.de"><img src="beispielbild.jpg" alt="beispieltext" title="beispieltitle"></a>
</body>
</html>
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:
<html>
<body>
<a href="http://www.tutorialwelt.de" target="_blank">&Link in neuem Fenster öffnen</a>
</body>
</html>
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:
<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>
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.
Related posts:
- HTML Datei erstellen Wer noch nie eine Internet-Seite erstellt hat, fragt sich in...
- Formulare in HTML Teil 2 Es gibt eine weitere Möglichkeit dem Besucher eine Auswahl zu...
- Bilder suchmaschinenoptimiert in HTML einbinden Heute erkläre ich Ihnen, wie man in HTML Bilder einfügen...
- Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
- Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
