⬆
Youtube Video

Hyperlinks | Verweise

* = wichtig

Das Ankerelement & href Attribut

<a href="kontakt.html">Zur Kontaktseite</a>

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)

Attribut-Wert: Sprungziel

Man unterscheidet verschiedene Verknüpfungsmodi siehe auch e-teaching.org

Interhypertextuelle Verknüpfungen

Sprungziel: Man verweist auf die einzelnen Unterseiten des Webprojekts produkte/schrank/kuechenschrank.html siehe auch

Extrahypertextuelle Verknüpfungen

Sprungziel: URL / URI / mit einer absoluten Adresse außerhalb des eigenen Webangebots ins www http://www.google.com siehe auch

Intrahypertextuelle Verknüfungen

Sprungziel: Benannter Ankerpunkt oder ID / innerhalb einer einzelnen HTML-Seite zu einer anderen Stelle #meineId siehe auch

Außerdem gibt es folgende Unterscheidung:

Projektinterne Links Links zu anderen Seiten des eigenen Projekts

Deeplinks Links zu anderen Seiten innerhalb anderer Websites

Gültigkeistbereich des a Elements

<a href="seite2.html"><img src="pfeil.jpg" alt="weiter"></a>

Der Verweistext kann auch andere Html-Elemente enthalten, wie beispielsweise das img Element für Bilder.

Obwohl das Ankerelement ein inline Element ist, darf es gruppierende Elemente wie p, ul, blockquote etc. umschließen.

Title Attribut

<a href="next.html" title="Hosen">next</a>

Wenn das Verweisziel des Links nicht selbstsprechend ist, sollte man im title Attribut einen erklärenden Titel vergeben.

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

Sprungmarke / internes Verweisziel

Man ist mit HTML in der Lage große Seiten zu erzeugen, wobei ein ganzes Projekt innerhalb einer Seite erscheint Singelpage. 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 (Sprungmarke) definiert werden, also die Stelle innerhalb der Seite, zu der ein Link führen soll.

Auch diese Seite hat oben eine Navigation, die zu den einzelnen Themen innerhalb der Seite verweist.

Man setzt ein Sprungziel mit dem id Attribut. Das kann in jedem Element gesetzt werden. Bei der Namensvergabe gelten die Regeln (keine Sonderzeichen außer _ oder - keine Leerzeichen, nicht mit einer Zahl beginnen.

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

Link zum Sprungziel

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>

Pseudolink

Der Hashtag als Verweis springt zum Anfang der Seite.

<a href="#">top</a>

Animiertes Scrollen

Damit zum Verweisziel animiert gescrollt wird, kann man folgenden CSS Befehl einsetzen. siehe auch
html{scroll-behavior: smooth;}

Absolute Verweisziele

href="/"

Hier sieht man einen Verweis auf das Wurzelverzeichnis, oder Root-Verzeichnis

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

https://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 referenzieren.

Die absolute Referenzierung beginnt mit einem Schrägstrich, um ins root-Verzeichnis zu gelangen. Von da aus kann man dann in die gewünschten Unterverzeichnisse gelangen, indem man sie mit Schrägstrichen getrennt aufführt, genauso wie bei der relativen Verlinkung.

Dazu folgendes Beispiel,

<a href="/tutor/index.html">Tutorials</a>

Im Hauptverzeichnis der Domain liegt ein Ordner "tutorial" darin eine Seite "index.html"
Mit dem oben aufgeführten Link gelangt man auf diese Seite. Es ist egal auf welcher Seite des eigenen Projekts dieser Link eingefügt ist.

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.

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. Siehe dazu das Thema iframe

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. Das funktioniert selbstverständlich nur, wenn man eine Seite über den Server aufruft.

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

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)

Angaben zum Linkziel

Man kann Links folgende Zusatzinformationen zuweisen:

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

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

Typisierte Links

rel Relationship Beziehung

siehe auch Wiki Microformat
https://microformats.io/

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.
Links auf Email Adressen beginnen mit mailto: gefolgt von der Emailadresse:

Man kann mittels Javascript die Emailadressen vor Spambots verschleiern.
Email-Verdunkler (Obfuscator) https://www.albionresearch.com/tools/obfuscator
Ich kann allerdings nicht garantieren, ob der Betreiber dieser Seite nicht selber die Email Adressen sammelt und verkauft.

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

IMAP / POP3

Wenn man ein Emailprogramm einrichtet, gibt es die Möglichkeit IMAP oder POP3 zu wählen.

POP3
Wählt man POP3 werden die Emails auf dem Emailserver gelöscht, nachdem man sie mit Emailprogramm abgerufen hat.
IMAP
Bei IMAP bleiben sie auf dem Serverrechner, welcher dann mit der Zeit immer voller wird.

Weitere Infos zu Imap und POP3
Liste mit POP3 Servern

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

Spezielle Links

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. Desweiteren wir auf Smartphone oder Tablets die entsprechende mit Zahlen auf.

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

Skype

Link zu Skype

< a href="skype:skypebenutzername">Skype Benutzername</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>

Eingabehilfen

Tabulatorreihenfolge

Die Tabulatorreihenfolge bestimmt das Weiterspringen zum nächsten Eingabefeld oder auswählbaren Feld. Mit der Tabulatortaste wird standardmäßig nach der Reihenfolge der Elemente vorgegangen. Man kann jedoch mit dem Attribut tabindex eine andere Tabulatorreihenfolge festlegen. Die Reihenfolge wird durch eine Ganzzahl bestimmt.
tabindex="1"
tabindex="2"
Mit der Tabulatortaste springt man dann zum nächsthöheren Element.


tabindex="0"
bedeutet, das Element bleibt in seiner zugewiesenen Position. Das kann man dazu einsetzen, um Elemente, die nicht auswählbar sind, auswählbar zu machen, beispielsweise li Elemente in einer Drop Down Navigation.

Ein Wert unter 0 entfernt ein Element aus der Tabulatorreihenfolge. Das gleiche geschieht, wenn mehrere Elemente den gleichen Wert bekommen.

Zugriffstaste / Accesskey

siehe auch Wiki

Mit dem Attribut accesskey kann man ein Zeichen auf der Tastatur bestimmen, mit dem der User ein Element direkt anspringt, beispielsweise um einen Link aufzurufen. Geben Sie nur einen Buchstaben ein.
accesskey="b"

Die Tastenkombi, mit der der Focus auf das Element gelegt wird, unterscheidet sich je nach Browser. Die meisten User wissen nicht, welche Tastenkombi ihr Browser verlangt.

Eine Einsatzmöglichkeit wäre ein Aufruf zur Startseite oder nach oben auf die Seite. Auf dieser Seite gilt:

Drücken Sie Alt t oder im Firefox Alt Shift t um noch oben auf die Seite zu gelangen.

 

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