Hyperlinks | Verweise

Hyperlinks (kurz Links) sind anklickbare Verweise, die zu anderen Seiten oder anderen Bereichen innerhalb einer Seite verweisen. Erst mit Hyperlinks wird aus einzelnen Seiten eine zusammenhängende Website.

HTML-Element: A (anchor) Der Elementinhalt ist für den Anwender anklickbar.

Attribut: href (hypertext reference)

Wert: Sprungziel

Interhypertextuelle Verknüpfungen

Sprungziel: Relativer Pfad

Extrahypertextuelle Verknüpfungen

Sprungziel: URL / URI

Intrahypertextuelle Verknüfungen

Sprungziel: Benannter Ankerpunkt oder ID

 

Man unterscheidet außerdem

Projektinterne Links Links zu anderen Seiten des eigenen Projekts

Deeplinks Links zu anderen Seiten innerhalb anderer Websites

Gültigkeistbereich

Der Verweistext kann auch anderen Html-Elemente enthalten. In HTML5 sind sogar gruppierende Elemente wie p, ul, blockquote etc. erlaubt.

 

Download Attribut /neu in HTML 5

Links, die auf eine Datei führen, die zum Download bereitgestellt wird können mit dem alleinstehenden Attribut download versehen werden.

<a download href="hotel.jpg">Bild Download</a>

In älteren Browsern öffnete sich automatisch das Download-Fenster, wenn die verknüpfte Datei nicht im Browser dargestellt werden konnte, also der MimeType dem Browser unbekannt war. Mit HTML5 hat man nun die Möglichkeit selbst zu bestimmen, ob eine Datei angezeigt werden soll, oder zum Download bereitgestellt wird.

Wenn das herunterzuladende Objekt keinen brauchbaren Namen zum Abspeichern hat oder wenn man einen Namen vorgeben will, kann man dem download Attribut diesen Namen als Wertzuweisung eingeben. Das bietet sich auch bei XHTML an, da es dort keine alleinstehenden Attribute geben darf.

<a download="news.mp3" href="/podcast.php?news">Nachrichten von Heute</a>

Wenn man Browser, die das Download-Attribut nicht kennen, dazu veranlassen will eine Datei in jedem Fall als Download anzubieten, so kann man die Datei als Zip-Datei verpacken.

Target Attribut

Attribut: target

Wert: Browserfenster

<a href="info.html" target="_blank">Weitere Informationen</a>

Mit dem target Attribut hat man die Möglichkeit ein Browserfenster zu bestimmen, in dem sich die Seite öffnet.

Das target Attribut wurde in HTML4 als depricated (unerwünscht) gekennzeichnet in HTML5 gehört es wieder zum Standard, aber es wird geraten nur sparsam davon Gebrauch zu machen und dem User die Wahl des Browserfensters zu überlassen.

mögliche Wert sind:

_blank

neues Fenster

_self

aktuelles Fenster

_top

gesamtes Browsfenster

_parent

übergeordnetes Fenster / Elternfenster

eigenerNameDesFensters

Name eines Fensters, welches von Javascript vergeben wurde

Basis URL

Man kann im Head-Bereich eine Adressbasis und ein Basisziel (target) für alle verknüpften Inhalte angeben. Bei relativ verlinkten Inhalten gilt die URL-Basis als Ausgangspunkt oder Bezug. Beim Ziel wird der Name des Zielfensters bestimmt, sofern in dem Link selbst kein target Attribut aufgeführt ist.

<base href="http://www.on-design.de/">

<base target="mainWindow">

Die target Wertzuweisug kann der Name eines eingebetten Frames sein. Eingebettete Frames gehören seit HTML5 wieder zum gewollten Standard.

Unbekannte Dateitypen verlinken

Wenn man Dateitypen verlinkt, die nicht zu im Internet verbreiteten Formaten zählen, zum Beispiel proprietäre Formate wie psd das Photoshop-Dateiformat ist es für den Browser oder Webclient hilfreich, wenn man den MimeType angibt. HTML bietet hierfür das type Attribut an.

<a href="welt.psd" type="image/x-photoshop">Weltkugel</a>

Mime Type

Liste von MIME Types bei Selfhtml

Zuständig für MIME Types ist die IANA.

Der MIME Type ist ein Standard mit dem Datentypen definiert werden. Ursprünglich wurde dieser Standard für Emails entwickelt, jedoch kommt er heute immer dann zum Einsatz wenn Webbrowser und Webserver über die Art der bevorstehenden Dateiübertragung kommunizieren. So wird beispielsweise bei einer HTTP-Übertragung einem Browser mittels des MIME-Types mitgeteilt, welche Daten der Webserver sendet – ob es beispielsweise Klartext, ein HTML-Dokument oder ein PNG-Bild ist.

type="image/png"

In einigen HTML- Tags gibt es Attribute die einen MIME-Type als Wert erwarten.
a, link, script, style, param, object, gibt es das type Attribut, bei form (enctype oder accept) bei input (accept)


Ein MIME Type besteht aus einem Hauptteil gefolgt von einem Schrägstrich und einem Subtyp.
z.B.: text/html, image/png,

Der Hauptteil bestimmt den Medientyp.

text Textdateien
image Grafikdateien
video Videodateien
audio Sound-Dateien
application Dateien, die an ein bestimmtes Programm gebunden sind
multipart mehrteilige Daten
message Nachrichten
model Dateien, die mehrdimensionale Strukturen repräsentieren

Dateigröße

Bei großen Dateigrößen sollte man dem User die Größe mitteilen.
z.B.: Hier können Sie das Programm herunterladen: Download (ca. 3MB)

Links und Anker

Man ist mit HTML in der Lage große Seiten zu erzeugen, wobei ein ganzes Projekt innerhalb einer Seite erscheint. Dadurch könnte eine sehr lange Seite entstehen, deren einzelne Bereiche über die Scrollfunktion erreicht werden. Es ist aber auch möglich diese Bereiche über einen Link < a href=....> anzusteuern. Dazu muss zuerst das Sprungziel definiert werden, also die Stelle innerhalb der langen Seite, zu der ein Link führen soll. Es gibt 2 Möglichkeiten so ein Sprungziel zu definieren.

1.Möglichkeit

Um ein Sprungziel innerhalb der Seite zu setzen, wird auch das a- Element verwendet. Mit dem Attribut name wird ein Anker definiert. Ankernamen kann man frei vergeben, aber er darf keine Leerzeichen enthalten. Verwenden Sie auch keine Umlaute. Beschränken Sie sich auf lateinische Zeichen und Ziffern und den Unterstrich. Beginnen Sie mit einem Buchstaben und wählen Sie kurze und prägnante Namen. Groß und Kleinschreibung wird unterschieden.

<a name="ankername">Alle meine Entchen</a>

2.Möglichkeit ab Html 4

Man setzt ein Sprungziel mit dem id Attribut. Das kann in jedem Element gesetzt werden. Bei der Namensvergabe gelten die gleichen Regeln wie beim name Attribut.

<h2 id="meinAnker">Hotelreservierung</h2>

 

Link zum Anker

Man setzt einen Link zu einem Anker, indem man dem href Attribut als Wertzuweisung ein Gatterzeichen gefolgt von dem Ankernamen zuweist.

<a href="#ankername">zum Anfang der Seite</a>

Auch Ankernamen auf anderen Webseiten sind adressierbar.

<a href="http://www.on-design.de/tutor/html5/index.htm#canvas">Das HTML5 Canvas Element</a>

Angaben zum Linkziel

Man kann Links folgende Zusatzinformationen zuweisen:

<a href="http://www.newyork.us" href lang="en">New York</a>

<a href="katze.mp4" type="video/mp4" media="screen">Katze spielt Klavier</a>

 

 

Absolute Adressierung relativ zur Basis-URL

Die absolute Adressierung kann man wählen, wenn die gewünschte Datenquelle auf dem gleichen Host-Rechner liegt und über das Standardprotokoll und den Standardport erreichbar ist.

In

http://www.on-design.de/artwork.html

ist der Teil

/artwork.html

die absolute Pfadangabe relativ zur Basis Url. Man kann also innerhalb des Projektes auf diese Weise jede beliebige andere Seite oder Datei auf die Art referenzieren.

Die absolute Referenzierung beginnt mit einem Schrägstrich alle Unterverzeichnisse werden mit Schrägstrichen getrennt aufgeführt.

Dazu folgendes Beispiel, nehmen wir an eine HTML- Datei liegt in irgendeinem Unterverzeichnis des Projektes. Mit dem Link <a href="/index.html">Home</a> kann man die index.html im Wurzelverzeichnis des Projekts aufrufen.

Eine Datei im gleichen Verzeichnis wie im aktuellen kann man einfach durch die Angabe des Dateinamens referenzieren. Das aktuelle Verzeichnis referenziert man mit ./

Also führen die folgenden Referenzierungen zum gleichen Ziel.

farben.html

./farben.html

Mit ../ referenziert man ein Verzeichnis welches über dem aktuellen Verzeichnis liegt (zurück). Da das immer nur ein Verzeichnis sein kann, ist hier keine Namensangabe nötig. Will man noch ein Verzeichnis darüber ansprechen sähe die Refernzierung so aus

../../

Von jedem Verzeichnis, welches man auf diese Art referziert hat, kann man wieder auf das Unterverzeichnis verweisen.

../../tutor/photoshop/shortcuts.html

 

Typisierte Links

rel Relationship Beziehung

Mit dem Attribut rel kann man im a- Element wie auch im link- Element eine Beziehung des Linkziels angeben. Die Wertzuweisungen sind jedoch nicht völlig gleich. Es gibt einige nur für das a- und einige nur für das link- Element.

rel="external" link zu einem anderen Webangebot. Dieser Wert ist auch für CSS Formatierung von Vorteil.

rel="nofollow" Suchmaschinen sollen diesem Link nicht folgen. Das ist besonders in Blogs oder Foren von Vorteil um Spambeiträge zu vermeiden.

rel="noreferrer" Der Browser soll keine Referrer Adresse übermitteln. Es gibt jedoch keinen Browser, der diese Anweisung befolgt.

Links mit Ping Funktion

Man kann in einem Link mit dem Attribut ping andere Webseiten benachrichtigen, dass der Link angeklickt wurde. Das ist in erster Linie für Scripts gedacht, die User Tracking überwachen.

<a href="buchBestellung.htm" ping="http://www. on-design.de/webstatistik.htm">Buch bestellen</a>

Email Links

Auf HTML Seiten veröffentlichte Emailadressen müssen mit vermehrtem Spam rechnen. Man kann mittels Javascript die Emailadressen vor Spambots verschleiern. Siehe http://www.addressmunger.com/ oder www.e-mail-adresse-verschluesseln.de

Email verschlüsseln
Links auf Email Adressen beginnen mit mailto: gefolgt von der Emailadresse:

< a href="mailto:info@foobar.de">info@foobar.de</a>

Durch Anklicken des Links, sollte sich das Mailprogramm des Userrechners öffnen, sofern es vorhanden ist. Eine Garantie gibt es nicht. Deshalb sollte die Emailadresse auch im Linktext erscheinen. Die Emailadresse ist im Emailfenster eingetragen.

Optionen

siehe auch Selfhtml

Man hat die Möglichkeit weitere Optionen einzugeben und Betreff, Blindcopy, etc. mit Werten vorzubelegen. Diese Optionen gehören nicht zum HTML Standard und von daher gibt es keine Garantie, dass alle Browser es ausführen.

cc copy, sichtbare Email an weitere Empfänger

bcc blindcopy, für die anderen Empfänger unsichtbare Adresse an mehrere Empfänger

subject Betreff, vorbelegter Betreff

body Nachrichtentext, vorbelegter Text in der eigentlichen Email

Beispiel
<a href="mailto:info@foobar.de?cc=mail@brixelbruxel.de">info@foobar.de</a>

Nach der Emailadresse wird ein Fragezeichen angehängt. Das Fragezeichen ist generell dafür zuständig in Links Parameter anzuhängen.
cc=mail@brixelbraxel.de ist der Parameter der angehängt wird.

Weitere Parameter werden mit kaufmännischem & angehängt. Das kann auch maskiert werden &amp;

<a href="mailto:info@foobar.de?cc=mail@brixelbruxel.de&amp;subject=Emailanfrage%20Homepage">info@foobar.de</a>

Bestimmte Zeichen, sowie die Zeichen, die nicht zur ASCCII Tabelle gehören, sollten maskiert werden, da diese nicht in einer URI vorkommen dürfen. Die Maskierung erfolgt durch ein Prozentzeichen gefolgt von der hexadezimal ausgedrückten Zeichennummer. Unicode Charts http://unicode-table.com
siehe auch Zeichenkodierung

Zeichen Maskierung
neue Zeile %0A
Wagenrücklauf %0D
Leerzeichen %20
! %21
# %23
% %25
* %2A
/ %2F
? %3F
Zeichen Maskierung
< %3C
> %3E
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF

 

Telefonlinks mit Anruffunktion

Es besteht die Möglichkeit einen Link zu definieren, der die Anruffunktion eines Smartphones aufruft. In anderen Browsern wird eventuell die Möglichkeit geboten die Nummer zu speichern oder es öffnet sich Skype oder eine andere Telefonmöglichkeit.

<a href="tel:+49231123456">Rufen Sie mich an</a>

SMS Links

Sofern das Gerät die Möglichkeit zulässt eine SMS Nachricht zu verschicken, kann man diese mit folgendem Link aufrufen.

< href="sms:+49231123456">Schreiben Sie mir eine SMS</a>

Ordnung in der Ordnerstruktur

Wenn man eine Homepage oder Website startet, hat man eventuell noch kein richtiges Konzept. Die Anzahl der Seiten und Dateien ist noch gering und so wird alles irgendwo abgespeichert. Je umfangreicher das Projekt wird, desto undurchschaubarer und chaotischer wird die Ansammlung von Dateien. Es ist im Nachhinein schwierig, eine Struktur zu schaffen. Überlegen Sie sich vorher, welche Ordnerstruktur sie benötigen. Erstellen Sie sich ein Konzept, welches logisch aufgebaut ist und sich erweitern lässt. Hier ein Beispiel einer Ordnerstruktur für eine Firmenpräsentation.

Sinnvolle Ordnernamen sind auch im Hinblick auf Suchmaschinenoptimierung von Vorteil.

/produkte
/produkte/moebel
/produkte/moebel/kuechen
/support
/support/moebel
/support/moebel/kuechen
/medien
/medien/grafik/produkte
/medien/flash
/styles
/scripts