Tutorialwelt.de » Links http://www.tutorialwelt.de Tutorials aus der IT-Welt Sat, 22 May 2010 13:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Links in HTML erstellen http://www.tutorialwelt.de/76/links-in-html-erstellen.htm http://www.tutorialwelt.de/76/links-in-html-erstellen.htm#comments Mon, 17 Aug 2009 01:27:35 +0000 admin http://www.tutorialwelt.de/?p=76 Yet Another Related Posts Plugin.]]> 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?

:

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:

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.

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.

No related posts.

Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.

]]> http://www.tutorialwelt.de/76/links-in-html-erstellen.htm/feed 0