Schlagwort-Archive: Anchor Tag

Verlinken mit HTML oder das Anchor Element

Das Anchor bzw. <a> Tag in HTML wird sehr häufig verwendet. Man verlinkt damit Inhalt. Die Definierung eines solchen Links bzw. Verweises schaut folgendermaßen aus:
<a id="HomeLink" class="Link" href="blog.multi-player.net/blog" target="_blank" rel="follow" title="Baud's Blog">Zur Seite wechseln</a>
 

Verweise haben viele Attribute, die am Anfang wichtigsten erkläre ich jetzt:

  • target: mit dem „target“ Attribut legen wir das Zielfenster für den Verweis fest.
  • rel: Hiermit wird die Beziehung des momentanen Dokumentes zum verlinkten Dokument festgelegt.
  • title: damit wird dem Link ein Titel zugeordnet welcher erscheint wenn man mit der Maus über den Verweis fährt (hover).
  • href: mit dem „href“ Attribut wird die Verweis URL bzw. der zu verlinkende Inhalt festgelgt.
  • id: damit wird dem Verweis eine einzigartige ID zugeteilt welche man z.B. mit Javascript oder CSS ansprechen kann.
  • class: hiermit wird dem Link eine Klasse zugeteilt welche man ebenfalls mit z.B. Javascript oder CSS ansprechen kann.

 

Nun zeige ich euch die Werte welche die einzelnen Attribute haben können:

target:

  • _blank: Verweis in einem neuen Fenster öffnen.
  • _self: Verweis im aktuellen Fenster öffnen.
  • _parent: bei verschachtelten Framesets wird das aktuelle Frameset gesprengt.
  • _top: bei verschachtelten Framesets werden alle Framesets gesprengt.

 
rel:

  • alternate: Ein Link zu einer alternativen Version des ursprünglichen Dokumentes.
  • author: Link zum Author des ursprünglichen Dokumentes.
  • bookmark: Permanente URL um ein Lesezeichen zu setzen.
  • help: Hier wird ein „Help“ bzw. „Hilfe“ Dokument verlinkt.
  • license: Ein Link zu den Copyright Informationen des ursprünglichen Dokumentes.
  • next: Das nächste Dokument in dieser Auswahl.
  • prev: Das vorherige Dokument in dieser Auswahl.
  • nofollow: Ein link zu einem nicht bestätigtem Dokument dem ein Crawler z.B. der Googlebot nicht zu folgen braucht.
  • noreferrer: Hier soll der Browser keine sogenannten „HTTP referer header“ ausgeben wenn diesem Link gefolgt wird.
  • prefetch: Das Ziel Dokument soll gecached werden.
  • search: Link zu einer Suchmaschine wo das urspüngliche Dokument als Suchvariable gesetzt ist.
  • tag: Hiermit wird ein Tag bzw. Keyword für das aktuelle Dokument definiert.

 
title:

  • Der Titel ist ein String welcher zusätzliche Informationen über das verlinkte Dokument enthält.
  • Er erscheint wenn man mit der MAus über den Link geht (Hover).

 
href:

  • Der Zielpfad des verlinkten Dokuments, ebenfalls ein String.
  • Kann auch nur der Dateiname sein wenn das verlinkte Dokument im gleichen Verzeichnis liegt wie das ausgangs Dokument.

 
id:

  • String ID, kann frei gewählt werden.
  • Wird über das „#“ Zeichen in CSS oder Javascript angesprochen
  • Das wäre „#HomeLink“ in unserem Fall.

 
class:

  • String Klasse, kann auch frei gewählt werden.
  • Wird über das „.“ Zeichen in CSS oder Javascript angesprochen
  • Das wäre „.Link“ in unserem Fall.

 
Ich hoffe ich konnte euch weiterhelfen, viel Spass bei ausprobieren und Testen.
Bei Fragen hinterlasst einfach einen Kommentar unten oder eröffnet ein Thema im Forum dazu wenn Ihr eine Diskussion über das Thema starten möchtet.