0 3421

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:


<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:

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.

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.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich 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.

Weiter