Dienstag, 26. Oktober 2010

HTML links - let's build a web!


Zusammengefasst nach dem Artikel von Christian Heilmann
Quelle: http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/

18: HTML links - let's build a web


Links sind Teile einer Webseite, welche zu anderen Quellen verweisen (HTML Dokumente, Text Dateien, PDF, etc..). Es gibt Links, zu denen der Browser automatisch verbindet, und es gibt optionale Links, auf die der User selbst klicken muss, um zur Quelle zu kommen.
Durch den <a> Tag kann jedes Element eines Dokumentes in einen Link verwandelt werden. Jedoch gibt es verschiedene Eigenschaften, die man dazufügen kann.

Die Eigenschaften 

 
Die am weit verbreitetste Eigenschaft eines <a> Tag ist "href". Damit wird die Quelle angegeben, wohin der Link führen soll. 


<a href=“http://developer.yahoo.com“>Yahoo Developer Network</a>


Des Weiteren gibt es noch Links, welche als "Anker" bezeichnet werden und mit der "id" Eigenschaft dargestellt werden. Diese Anker verweisen nicht zu anderen Webseiten, sondern ein Anker ist eine Stelle, zu dem ein anderer Link hin verweist. Zum Beispiel: ist eine Seite sehr lang, kann man mithilfe von gesetzten Ankern auf eine bestimmte Stelle innerhalb der Seite springen.

<a href=“#sec1“>Section One</a>    Link, welcher auf das Ziel verweist

<a id=“sec1“>Section #1</a>        Anker, auf den der erste Link verweist

Keine Zweideutigkeit beim verwenden von Links

 
Das wichtigste was bei einem Link beachtet werden muss, ist die Beziehung zum Besucher. Der User vertraut darauf, dass er durch einen klick auf den Link immer auch eine relevante Information erhält. Wenn jedoch dieser Link nicht funktioniert betrügt man damit das Vertrauen der User und verliert somit an Glaubwürdigkeit.

Extra Information

 
Optional zu jedem Link kann man ein "title" Element hinzufügen. Diese werden dann angezeigt, wenn der User mit der Computer-Maus über dem Link verweilt. Dieser Tooltip gibt zum Beispiel Informationen darüber, auf welche Seite der Link verweist.
Für sehbehinderte Menschen, welche die Seite, und somit auch alle extra Informationen, vorgelesen bekommen, ist das eher ein Problem, da sie oftmals mit dem Link nichts anfangen können, wie bei einem PDF-Dokument, Bilder und Videos.

Links zu non-HTML Quellen

 
Es gibt viele Links, bei welchen der Browser dann nicht weiß, wohin er eigentlich verlinken soll. Es ist weit verbreitet, dass Webseiten zu Bildern, PDF Dokumente und Videos verlinken ohne jedoch den Besucher vorher über den Vorgang zu warnen. Besonders beim Öffnen von großen Videodateien sind die Browser schon oft abgestürzt. Daher sollte man den User immer genauestens darauf vorbereiten, was die Folgen bei der Aktivierung eines Links sind.


Vorteile von Outbound und Inbound Links

 
Eine der größten Ängste von Webseiten Besitzer ist es, dass Besucher ihre Seite permanent verlassen. Das ist oft der Grund warum selten Links zu Konkurrenz Seiten angeboten werden.
Es gibt jedoch einige gute Gründe, warum es von Vorteil ist zu Konkurrenz Seiten zu verlinken:

  • erzeugt Glaubwürdigkeit in den Augen der Besucher
  • Möglichkeit den User mehr Service zu bieten z.B.: durch Verlinkung zu Artikel oder Produkten auf anderen Seiten
  • Verlinkung auf ältere Artikel und selbst eine bessere Lösung vorschlagen.

Andersrum ist es sehr von Vorteil, wenn Links auf anderen Webseiten zur eigenen verweisen. Umso öfter User auf solch einen Link klicken, desto höher steigt man im Rang von Suchmaschinen wie Google auf.

Formulierung eines Links

 
Um eine schnelle Navigation zu ermöglichen, sollte der Link Text immer so klar wie möglich formuliert werden. Das heißt, man sollte sich sicher sein, dass der Text einen Sinn ergibt und das nicht mehrere Links mit derselben Formulierung existieren, welche aber zu unterschiedlichen Quellen verlinken.
Aussehen eines Links
Obwohl das Aussehen eigentlich erst mit dem CSS definiert wird, ist es von großem Vorteil die verschiedenen Zustände eines Links zu bedenken.

  • link - definiert den Standard Zustand eines Links; unbesuchte Links werden blau dargestellt.
  • visited - definiert das Aussehen eines bereits besuchten Links; sie sind violett.
  • hover - definiert das Aussehen eines Links, während sich die Maus darüber befindet
  • active – definiert das Aussehen eines Links, während er aktiviert ist

Keine Kommentare:

Kommentar veröffentlichen