Beschreibung
Verweis, Hyperlink: a (anchor)
Element: a
| Beschreibungen |
 |
 |
 |
|
|
|
 |
 |
| Referenzen |
|
|
|
 |
 |
 |
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
 |
|
|
|
|
|
|
 |
Elementbeschreibung <a>
Hyperlinks sind Verweise von denen ausgehend man auf andere Stellen im WWW springen kann - sie entsprechen dem "siehe auch" in gedruckten Texten. Der Hyperlink selbst ist meist eine Textstelle, kann aber auch eine Grafik oder selten auch ein anderes Element sein.
Fährt
man mit der Maus über einen Hyperlink ändert sich die Gestalt des Mauszeigers auf eine Hand mit ausgestrecktem Zeigefinger.
Anmerkung: Dieses Verhalten kann man mit Hilfe von CSS verändert werden.
Anschauung: Darstellung von Hyperlinks
Darstellung von Hyperlinks "klassisch" (ohne CSS)
Ohne weitere Formatierungen mit CSS wird von den meisten Browser ein Text, wenn er ein Hyperlink ist, in der Farbe blau und unterstrichen dargestellt.
Ein Bild (<img>) bekommt in älteren Browserversionen einen blauen Rahmen,
akutelle Browser zeichnen keinen Rahmen um das Bild; somit ist ein Bild
als Hyperlink als solcher nicht unmittelbar erkennbar.
Smilodon ist eine Gattung der ausgestorbenen Säbelzahnkatzen, die während des Pleistozäns in Amerika weit verbreitet war.
Darstellung von Hyperlinks im modernen Webdesign (mit CSS)
Beim modernen Webdesign werden Hyperlinks meist mittels CSS formatiert, sodass sie nicht mehr so aussehen wie früher.
Text dezenter formatiert
Hyperlinks im Text werden meist dezenter formatiert. Um dennoch zu erkennen, dass es sich um einen Hyperlink handelt, wird oft die mit Hyperlinks assoziierte Unterstreichung der Textstelle angezeigt, sobald man mit dem Mauszeiger über die Textstelle fährt.
Smilodon ist eine Gattung der ausgestorbenen Säbelzahnkatzen, die während des Pleistozäns in Amerika weit verbreitet war.
Mauszeiger verändern
Der Mauszeiger über Hyperlinks kann mit CSS ebenfalls verändert werden.
Der Mauszeiger kann ein Fadenkreuz sein, oder Hilfe anzeigen, aber auch zeigen, dass der Computer Beschäftigt ist, auch Verschieben anzeigen und noch einige andere.
ToDo: url für eigene Mauszeiger.
Navigation
Dienen Hyperlinks zur Navigation innerhalb einer Website - also dem Wechseln auf die anderen Webseiten - so werden die Hyperlinks meist wie "Buttons" bzw. Schaltflächen gestaltet; ohne Unterstreichung
aber mit einem Hintergrund und einen Veränderungseffekt, wenn man mit dem Mauszeiger über die Textstelle fährt.
Was passiert mit der Zieldatei
Ziel kann jede Datei sein, aber was passiert, wenn sie aufgerufen wird:
- Browser kann Datei selbst darstellen:
- Datei wird im Browser dargestellt.
- Browser hat ein Add-on/Plug-in installiert, das die Datei darstellen kann oder
der Browser weiß von
Windows ein Programm, das die Datei darstellen kann:
- Das Add-on/Plug-in stellt die Datei im Browserfenster dar.
- Der Browser downloadet die Datei in den "Temporären Ordner" und das Programm öffnet dann diese Datei.
- Manchmal: Browser fragt vorher nach, ob die Datei dargestellt
oder gespeichert werden soll.
- Browser kann weder selbst die Datei darstellen noch weiß er
von einem Programm, das es kann:
- Fragt, wohin die Datei gespeichert werden
soll und ladet sie dann herunter (downlaod).
Auflistung von Dateitypen und wie die
unterschiedlichen Browser(versionen) damit umgehen.
http://webkompetenz.wikidot.com/html-handbuch:html-attributreferenz-href
Attribute <a>
Das HTML-Element a wird dann zu einem Verweis, wenn das Attribut href
verwendet wird.
In HTML5 sind mittels neuer Attribute einige neue Möglichkeiten dazugekommen.
Alle, ausgenommen die Universalattribute, können nur gemeinsam mit dem Attribut href sinnvoll eingesetzt werden.
Das Attribut name für das Festlegen von Sprungmarken ist verworfen
worden (deprecated, obsolet) und soll nicht mehr verwendet werden.
Stattdessen kann man
jedes HTML-Element zum
Sprungziel machen, indem man es als Sprungmarke mit dem
Attribut id versieht.
Attribute: a
| Attribut |
Verwenden
caniuse |
Schwierigkeit |
Kurzbeschreibung |
Anmerkung |
| href |
Empfohlen |
leicht |
(hypertext reference) Ziel (Datei) des Hyperlinks |
|
| target |
|
leicht |
Zielfenster des Hyperlinks |
|
| download |
|
leicht |
Zieldatei soll downgeloadet werden |
|
| type |
|
mittel |
Dateiformat der Zieldatei |
|
| hreflang |
|
leicht |
Sprache des Textes in der Zieldatei |
|
| media |
|
schwierig |
für welche Medien (Ausgabegeräte) die Zieldatei geeignet ist |
|
| rel |
|
mittel |
|
nur mit href |
| ping |
|
schwierig |
|
|
| accesskey |
|
|
|
|
| tabindex |
|
|
|
|
| Universal |
|
leicht |
id, class, style, title, lang, dir |
|
| veraltete |
nein |
|
|
|
href: Zieladresse des Verweises
Attribut: href
| Beschreibungen |
|
|
|
|
|
|
|
|
| Referenzen |
|
|
|
|
|
|
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
|
|
|
|
|
|
|
|
href steht für "hypertext reference" und bedeutet Hypertext-Verweis.
href ist zwar formal nicht verpflichtend (da es in früheren Versionen von
HTML für das HTML-Element a noch die Variante mit name gab), aber ohne die Verwendung von href kann
das HTML-Element a nicht zu einem Verweis werden.
Der angegebene Wert für href gibt die Zieladresse an, also worauf verwiesen
wird. Dies kann eine URL als Webadresse für eine Datei sein, aber auch eine
URL für andere
Internetdienste wie z.B. eine E-Mail-Adresse.
Details
Um einen Verweis zu erstellen, muss das HTML-Element a mit dem Attribut href (hypertext reference)
verwendet werden
(z.B. <p>Der genaue Ablauf wird im <a href="kapitel2.html">Kapitel 2</a> beschrieben.</p>).
Das was zwischen dem Anfangstag und dem Endtag steht, wirkt als Hyperlink.
Der genaue Ablauf wird im
Kapitel 2 beschrieben.
In HTML5 auch als Blockelement.
Dies kann eine Textstelle oder auch ein Bild sein. In HTML5 könnte man
theoretisch "alles" zu einem Hyperlink machen, da hier das HTML-Element a
auch als Block-Element verwendet werden darf.
<a href="Zieladresse">Textstelle</a>
Zieladresse: Adresse des Zieles das angezeigt werden soll.
URL (absolute Adresse, relative Adresse)
Textstelle: Text (oder auch Bild), das den Hyperlink darstellt;
standardmäßig unterstrichen dargestellt und blau (wenn das Ziel
noch nicht besucht wurde bzw. violett, wenn es schon besucht wurde - d.h. die Datei im Cache des Browsers ist).
Neu in HTML5: Das HTML-Element a kann in HTML5 auch als Block-Element verwendet werden. Somit können ganze Textteile wie z.B. Werbeeinschaltungen mit
Überschriften, Texten und Bilder als Ganzes als ein Hyperlink zu einen Webshop gestaltet werden.
Attributwerte
- Text (a-z, 0-9, sowie - und _ ) ohne Sonderzeichen (keine Umlaute,
Leerzeichen, Großbuchstaben, Sonderzeichen) sowie die Trennzeichen :
/ und # an den dafür vorgesehenen Stellen innerhalb der URL.
URL (Uniform Resource
Locator) als Webadresse
- vollständige URL
Werden für Dateien verwendet, die nicht
unter dem selben Host verfügbar sind, wie die HTML-Datei in der der
Verweis angegeben ist. Im Normalfall sind dies "fremde" Webseiten
eines anderen Anbieters, wie z.B.
https://de.wikipedia.org/wiki/Wikipedia:Hauptseite
(Vollständige
URLs haben zwangsläufig absolute Pfadangaben.)
- URLs mit relativen Pfadangaben
Werden für Dateien verwendet,
die unter dem selben Host verfügbar sind, wie die
HTML-Datei in der der Verweis angegeben ist. Im Normalfall sind dies
eigene Webseiten auf der selben Website.
- Weitere Formen von URLs sind noch möglich, haben aber für uns in
der Praxis keine Relevanz.
URL (Uniform Resource Locator) als E-Mail-Adresse
- vollständige URL
In der Regel werden für E-Mail-Adressen
vollstänidge URLs verwendet.
URL (Uniform Resource Locator) für andere Dienste im Internet sind
noch möglich, aber für uns nicht relevant.
target: Hypertext Reference mit Zielangabe
Attribut: target
| Beschreibungen |
|
|
|
|
|
|
|
|
| Referenzen |
|
|
|
|
|
|
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
|
|
|
|
|
|
|
|
Das Attribut target gibt an, in welchem Browserfenster die angeforderte Ressource (Datei mit der Zieladresse) angezeigt werde soll.
Das Attribut target kann nur gemeinsam mit dem Attribut href verwendet werden.
<a href="Zieladresse" target="Browserkontext">Textstelle</a>
Browserkontext: Gibt an, wo die aufgerufene HTML-Datei (oder Bild) angezeigt wird. Mögliche Werte sind:
- _self
Wird im selben Fenster angezeigt, wie die Datei von der aus die aufgerufen wurde. Wird das Attribut target nicht verwendet, wird die Datei im selben Fenster angezeigt - ist dies so gewünscht, läßt man das Attribut normalerweise weg.
- _blank
Wird in einem neuen Fenster angezeigt, oder in einer neuen Registerkarte (Tab), wenn dies in den Browsereinstellungen so eingestellt ist. Von HTML aus kann dies nicht beeinflusst werden.
- alle anderen wie _top, _parent oder in denen das Word "frame" vorkommt, sowie Namen von Browserfenster (https://developers.whatwg.org/browsers.html#valid-browsing-context-name-or-keyword) sind veraltet weil sie mit Frames arbeiten, die komplett überholt sind.
Man kann eine Webseite oder eine Datei, die im Browser angezeigt werden kann, entweder in selben Browserfenster öffnen oder in einem neuen Browserfenster oder Tab (Registerkarte) öffnen.
Man kann eine Webseite oder eine Datei, die im Browser angezeigt werden kann, entweder in <a href="beispiele/html-5elemente-6hyperlinks-target.html">selben Browserfenster öffnen</a> oder in einem <a href="beispiele/html-5elemente-6hyperlinks-target.html" target="_blank">neuen Browserfenster oder Tab (Registerkarte) öffnen</a>.
Wenn der User jedoch etwas anderes vorgibt (z.B. über das Kontextmenü, oder anklicken mit gedrückter Strg-Taste), so hat dies Vorrang und die aufgerufende Datei wird eben dort angezeigt.
Anmerkung: Das Attribut target war zuletzt missbilligt (deprecated), wurde aber mit HTML5 wieder eingeführt. Man sollte es aber eher zurückhaltend einsetzen und eher den Usern die Kontrolle überlassen.
http://webkompetenz.wikidot.com/html-handbuch:links-definieren
http://webkompetenz.wikidot.com/html-handbuch:html-attributreferenz-target
download: Hypertext Reference mit Download-Absicht
Attribut: x
| Beschreibungen |
|
|
|
|
|
|
|
|
| Referenzen |
|
|
|
|
|
|
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
|
|
|
|
|
|
|
|
Zieldatei soll downgeloadet werden (auch wenn sie im Browser angezeigt werden kann).
Das Attribut download kann nur gemeinsam mit dem Attribut href verwendet werden.
WD (Working Draft) - Can I Use
default style sheet - Formatierung in HTML
<a href="Zieladresse" download="Lokaler-Dateiname">Textstelle</a>
Lokaler-Dateiname: Gibt an, dass die im Verweis angegebene Datei lokal gespeichert werden soll (download) und nicht mit einem Programm geöffnen. Da die Regeln für Dateinamen im Internet die Möglichkeiten einschränken, kann für das lokale Speichern ein (anderer) Dateiname angegeben werden.
Beispiel: <a href="ifom_ue5.zip" download="IFOM Übung 5.zip">
Was wenn kein Dateiname? Nur download oder download="download".
Man kann eine Webseite oder eine Datei, die im Browser angezeigt werden kann, entweder öffnen oder dem Browser vorgeben, dass er die Datei downloaden soll.
Man kann eine Webseite oder eine Datei, die im Browser angezeigt werden kann, entweder <a href="beispiele/html-5elemente-6hyperlinks-download.html">öffnen</a> oder dem Browser vorgeben, dass er die Datei <a href="beispiele/html-5elemente-6hyperlinks-download.html" download="löschen.html">downlaoden</a> soll.
Gehe zu Expression Web | BlueGriffon | Dreamweaver
type: Hypertext Reference mit Angabe des Dateiformats (MIME-Typ)
Attribut: x
| Beschreibungen |
|
|
|
|
|
|
|
|
| Referenzen |
|
|
|
|
|
|
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
|
|
|
|
|
|
|
|
Dateiformat der Zieldatei.
Das Attribut type kann nur gemeinsam mit dem Attribut href verwendet werden.
Mit type können Sie den MimeType des Linkziel-Dateiformats angeben. Sinnvoll ist diese Angabe in allen Fällen, in denen das Linkziel kein HTML-Dokument ist, also beispielsweise bei Links auf PDF-Dokumente, Flashmovies, MP3-Tracks usw. Als
Wert ist ein passender MimeTyp
zu verwenden.
<a href="Zieladresse" type="application/pdf">Textstelle</a>
Zieladresse ist z.B. eine pdf-Datei.
http://webkompetenz.wikidot.com/html-handbuch:angaben-zum-linkziel
http://webkompetenz.wikidot.com/html-handbuch:angaben-zum-linkziel
http://webkompetenz.wikidot.com/html-handbuch:html-attributreferenz-type
http://de.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions
http://de.wikipedia.org/wiki/Internet_Media_Type#MIME-Sniffing
hreflang: Hypertext Reference
Attribut: x
| Beschreibungen |
|
|
|
|
|
|
|
|
| Referenzen |
|
|
|
|
|
|
|
|
| Sprache |
dt |
dt |
en |
en |
en |
en |
dt |
en |
| Info zur Quelle |
|
|
|
|
|
|
|
|
Hypertext Reference Language: Sprache des Textes in der Zieldatei.
Das Attribut hreflang kann nur gemeinsam mit dem Attribut href verwendet werden.
Mit hreflang bestimmen Sie die Sprache des Verweisziels. Als Angabe ist ein Sprachenkürzel erlaubt.
<a href="Zieladresse" hreflang="fr">Textstelle</a>
Der Text in der Zieldatei ist auf französisch.
http://webkompetenz.wikidot.com/html-handbuch:angaben-zum-linkziel
http://webkompetenz.wikidot.com/html-handbuch:html-attributreferenz-hreflang
Universalattibute: Hypertext Reference mit
xxxxxxxxxxxxxx
xxxxxx <a href="Zieladresse" download="Lokaler-Dateiname">Textstelle</a>
Eventuell später.
Besonderheiten <a>
a: Hypertext ohne Verweis
Es kann manchmal sinnvoll sein, eine Textstelle als Hyperlink zu strukturieren, aber keinen Verweis anzugeben.
So wird in einer Navigation meist der Namen der Datei, die gerade geladen ist und im Browserfenster angezeigt wird, ebenfalls angezeigt. Damit dieser Name gleich aussieht und auch mit CSS gleichermaßen "angesprochen" werden kann, wird dieser in HTML ebenfalls mit <a> ausgezeichnet.
Sprungmarke für Fragment: id (identification)
(Element-) Beschreibung <… id="…">
Wenn ein Hyperlink auf eine HTML-Datei verweist, kann dies zur ganze
Seite sein - die Webseite wird dann vom Anfang an angezeigt. Oder der
Hyperlink verweist zu einer Stelle innerhalb der HTML-Datei - dann scrollt
der Browser die Webseite soweit, bis die Darstellung an dieser Stelle
beginnt und somit zuerst nur einen Teil der Webseite, ein Fragment, sichtbar
ist.
veraltete Methode für Sprungmarken
In HTML5 kann jedes HTML-Element in einer HTML-Datei als Ziel verwendet werden.
Früher musste man für eine Sprungmarke ein zusätzliches HTML-Element a mit dem Attribut name einfügen (z.B. <h1><a name="kapitel2">Kapitel 2</a></h1>).
In HTML5 geht dies mit Hilfe des
Universalattributs id, z.B. <h1 id="kapitel2">Kapitel 2</h1>.
Da das Attribut name in HTML5 nicht mehr verwendet wird, hat dies zur Folge, dass auch der in den meisten Web-Editoren (die vor dem Jahr 2014 veröffentlicht
wurden) dafür vorgesehenen Befehl nicht mehr verwendet werden darf:
- Expression Web:
nicht mehr! Menü Einfügen, Befehl Textmarke
- BlueGriffon:
nicht mehr! Menü Einfügen, Befehl Anker
- Dreamweaver:
nicht mehr! Menü Einfügen, Befehl Benannter Ankerpunkt
Anstelle dessen muss eine id eingefügt werden.
akutelle Methode in HTML5
Bei einem Hyperlink auf die ganze Seite braucht man nur in der Quelldatei
(von der der Hyperlink wegspringt) einen Verweis <a href="…">
einfügen, wobei der Wert von href mit einem Dateiname endet.
Bei einem Hyperlink zu einem Fragment braucht man zusätzlich zum Verweis
in der Quelldatei (von der der Hyperlink wegspringt) eine Sprungmarke in der
Zieldatei (auf die der Hyperlink verweist), welche die gewünschte Stelle
eindeutig bestimmt. Um diese Eindeutigkeit zu erlangen wird das Attribut id
verwendet, dessen zugewiesener Wert einmalig und somit eindeutig sein muss.
Da id ein Universalattribut ist, und daher jedem HTML-Element zugewiesen
werden kann, kann auch jeder Start-Tag in der Zieldatei zur Sprungmarke
gemacht werden.
Um einen Hyperlink auf ein Fragment zu erstellen, weist
man in der Zieldatei einem (beliebigen) Start-Tag - der die Sprungmarke
werden soll - das Attribut id zu und zwar mit einem in dieser Datei
eindeutigen Namen <… id="…">. In der Quelldatei wird im Verweis <a href="…">
in der Wertangabe dem Dateinamen noch eine Raute "#" als Trennzeichen und
dann der Name der id angefügt.
Bei Fragmenten von fremden Webseiten kann man nur auf Stellen verweisen,
wo im Quellcode schon eine id eingefügt ist. Wollte man auf eine andere
Stelle verweisen, müsste man dort eine id einfügen. Da man aber frende
Webseiten nicht editieren kann, ist dies möglich. (Eine Ausnahme können
Wikis darstellen, da man dort unter gewissen Voraussetzungen die
HTML-Dateien bearbeiten kann.)
Attribute <… id="…">
id: Bezeichnung für die Sprungmarke
id steht für "identification" und bedeutet Identifikation, Ausweis.
id ist ein Universalattribut, das nicht verpflichtend ist. Es ist jedoch
notwendig, wenn eine Sprungmarke gesetzt werden möchte.
Der angegebene Wert für id gibt an, wie diese Position heißt. Diese
Bezeichnung muss in der gesamten HTML-Datei einmalig und somit eindeutig
sein. Es darf keine andere id den selben Wert haben.
Attributwerte
- Text (a-z, 0-9, sowie - und _ ) ohne Sonderzeichen (keine Umlaute,
Leerzeichen, Großbuchstaben, Sonderzeichen)
Fragmentname: Name einer id, die sich einer
beliebigen Stelle innerhalb einer HTML-Datei befindet. Wird dorthin
gesprungen, wird nur der Teil danach (nur ein "Fragment" der gesamten Datei)
im Browserfenster angezeigt, (z.B. eine überschrift 3) <h3 id="Fragmentname" >Textstelle</h3>
Hinweis: Für Fragmentnamen gelten bestimmte Regeln
für die Namensgebung.
Anmerkung: An die Stelle der id springen bedeutet, dass der Browser
die Datei so weit nach oben rollt (scrollt), bis sich die Position der id am oberen Rand des Fensters befindet. Ist jedoch nicht genug Text
unterhalb der Position, der das Fenster in der Höhe ausfüllen
kann, so funktioniert das nicht.
Es wird nur so weit gerollt (gescrollt), bis das Ende
der Datei (Text, Bilder, …) den unteren Rand des Fensters erreicht.
Dann wird nicht weiter gerollt (gescrollt). Daher wird in so einem Fall,
die Position der id nicht am oberen Rand dargestellt, sondern irgendwo
in der Mitte, je nachdem, wie viel Text sich noch unterhalb befindet.
Wenn bei "fremden" Websites ids existieren, können
diese auch bei Hyperlinks verwendet werden. Wenn an den gewünschten Stellen
keine id existiert, hat man Pech. Es können keine ids eingefügt
werden, da man auf fremden Websites klarerweise keine änderungen vornehmen
kann.
