Inhaltsverzeichnis

Die Anleitung zu HTML Hyperlink

View more Tutorials:

1- HTML Hyperlink

Die Hyperlink werden in die Webseiten am meisten gefunden, auf die der Benutzer klickt kann und auf die andere Seite springt.
Im  HTML verwenden Sie das Tag  <a> um eine Hyperlink zu erstellen.  "a" ist die Abkürzung von  Anchor .
Die einfachste Syntax zur Erstellung einer Hyperlink ist:
<a href="url">link text</a>

<!-- Examples: -->

<a href="https://google.com">Go to Google</a>

<a href="my-page.html">Go to My Page</a>
 

Die lokale Link

Eine lokale Link ist die Link zur Verbindung nach einer Seite in die gleichen  website. Diese Link braucht keine Präfixe http://, https://.
<a href="products.html">Products</a>

<a href="admin/products.html">Product Management</a>
Das Attribut   href ist am wichtigsten für das Tag   <a>. Es bestimmt die Zieladdresse (destination) der Link. HREF ist die Abkürzung von  hypertext reference.
Klicken Sie auf die Link Text, dann werden Sie auf einer bestimmten Addresse gebracht.
Zum Beispiel:
hyperlink-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Hyperlink</h2>

    <a href="https://google.com">Go to Google</a>

</body>
</html>
Zum Beispiel: Eine Hyperlink auf einem Bild erstellen:
image-hyperlink-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Image Hyperlink</h2>

    <a href="https://o7planning.org">
       <img src="../../_testdatas_/triceratops.png" height="150"/>
    </a>

</body>
</html>

2- HTML Email Link

3- target

Das Attribut  target legt fest, wo die Link geöffnet wird. Zum Beispiel, target="_blank" heißt, dass die Link in einem neuen Fenster (oder neues Tab) geöffnet wird.
Die möglichen Werte des Attributes  target:
target Die Bezeichnung
_blank Öffen Sie das verlinkte Dokument in einem neuen Fenster oder neuen Tab.
_self Öffnen Sie das verlinkte Dokument in dem gleichen Fenster/Tab, wo es geklickt wird (Das ist Default).
_parent Öffnen Sie das verlinkte Dokument in Vater-Frame . Oder funktioniert es wie  "_self" wenn das Vater-Frame existiert.
_top Öffnen Sie das verlinkte Dokument in Viewport des Browser.
framename Öffnen Sie das verlinkte Dokument in einem genannten Frame .

target="_blank"

Zum Beispiel: Öffnen Sie das verlinkte Dokument in einem neuen Fenster (oder neuen Tab):

<a href="https://o7planning.org" target="_blank">Visit o7planning!</a>
 

target="_self" (Default)

target="_self", das verlinkte Dokument wird in dem Fenster/Tab geöffnet, wo die Linkt geklickt wird (normalerweise auf die Linkenmaustaste klicken). Allerdings wenn der Benutzer möchten, dass das Dokument in das neue Fenster (oder neues Tab) geöffnet wird, kann er mit den Mouse Wheel Button auf die Link klicken.
<a href="https://google.com">Go to Google</a>

<!-- Same as: -->

<a href="https://google.com" target="_self">Go to Google</a>

target="_parent"

target="_parent": Das verlinkte Dokument wird im Vater  Frame geöffnet. Oder es funktioniert wie  "_self" wenn das Vater  Frame existiert nicht.
parent-page.html
<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>

<body>
   <h3>parent-page.html</h3>
   <p>IFrame:</p>

   <iframe src="child-page.html"
           style="border:1px solid black;height:200px;width:100%;"></iframe>

</body>
</html>
child-page.html
<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>

  <h3>child-page.html</h3>
  <p>a href="other-page.html" target="_parent"</p>
  <a href="other-page.html" target="_parent">Go to other-page.html</a>

</body>
</html>
other-page.html
<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>

  <h3>other-page.html</h3>

  <button onclick="history.back()">back</button>

</body>
</html>

4- download

Das Attribut  download sagt dem Browser,  URL herunterzuladen statt auf URL zu navigieren. Die Wert des Attribut  download wird für den Name der File, die in die Festplatte des Benutzer gespeichert wird, benutzt.
<a href="/images/picture.png" download>picture.png</a>

<a href="/images/picture.png" download="new-file-name.png">picture.png</a>
Achtung:
Das Attribut  download arbeitet nur mit den gleichen-Herkunft  URL  (same-orgin URLs)
HTTP Header Content-Disposition
Content-Disposition: inline

Content-Disposition: attachment

Content-Disposition: attachment; filename="filename.jpg"
 
Wenn  HTTP Header Content-Disposition den Name für die File anbietet, der sich mit der Wert des Attribut  download ändert, wird der Name der durch  HTTP Header angebotenen File benutzt werden.
Wenn  Content-Disposition als die Wert  inline gesetzt wird.
  • Firefox priorisiert den Name der File, die durch Content-Disposition angeboten wird.
  • Chrome priorisiert den Name der File, die durch download ​​​​​​​angeboten wird.

Example:

Zum Beispiel: Das Tag  <a> mit dem Attribut  download. Achtung: Sie müssen dieses Beispiel auf das Protokol (protocol) http:// (oder  https://) laufen. Wenn Sie dieses Beispiel direkt auf den Browser nach dem Protokol  file:/// laufen, kann es nicht funktionieren. (Mit dem Browser  Firefox, Chrome geprüft).
download-example.html
<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink download attribute</title>
  <meta charset="UTF-8">
</head>
<body>

  <h3>Hyperlink download attribute</h3>

  <a href="../../_testdatas_/flower.png" download="My-Flower.png">flower.png</a>

</body>
</html>

5- hreflang

Das Attribut  hreflang ist eine Hinweis, die die Human-Sprache der verlinkte Quelle (linked resource) festlegt.
<a href="/vi" hreflang="vi">Vietnamese</a>

<a href="/ru" hreflang="ru">Rusian</a>

<a href="/" hreflang="en-us">English</a>
Das Attribut  hreflang ist nützlich für die Suchentool wie  Google, Yandex,.. damit sie kennen, zur welchen Sprache die durch das Tag  <a> angebotene Quelle gehört.
Wenn der Benutzer die Dokument in die Tools wie Google, Yandex,.. suchen, werden diese Tools die IP-Addresse des Benutzer kennen. Dann kennen sie, woher der Benutzer kommt aus und welche Sprache der Benutzer benutzt. Nach dieser Informationen geben sie ein anpassendes Ergebnis, davon die Priorität der Sprache des Dokument. Das vermindert die Rate der Austritt (bounce rate) (ist die Rate, in die der Benutzer die Seite besucht und sofort austritt weil er die Seite unanpassend findet).

6- type

Das Attribut  type ist nur eine Hinweis, die  MIME Type von  URL festlegt. Das Attribut  type hat einige Tags wie  <a>, <object>, <source>,...
<a href="https://o7lanning.org" type="text/html">o7lanning</a>

<object width="400" height="400"
        data="helloworld.swf"
        type="application/vnd.adobe.flash-movie">
</object>

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
</audio>

<embed src="helloworld.swf" type="application/vnd.adobe.flash-movie">

7- ping

Das Attribut  ping ist das meist interessant von Tag  <a> denn nicht alle es kennt, sogar für die Entwickler, die mit  HTML in many years arbeiten. Sehen Sie ein Beispiel:
<a href="https://o7planning.org/en/10259/html" ping="https://example.com/trackpings">HTML</a>
Wenn der Benutzer auf die Hyperlink oben klickt, wird ein  POST Request durch den Browser erstellt und nach  https://example.com/trackpings gesendet. Es ist ganz dem Benutzer unsichtbar und es ist wirklich so streng dass es gesprerrt nicht werden kann . Auch wenn der Benutzer  Javascript deaktiviert, denn  Anchor ping kein  Javascript benutzt. Anchor ping ist asynchron nicht abgebrochen auch wenn die Link, auf die der Benutzer geklickt, geladet nicht werden kann.
Sie können viele  URL für das Attribut  ping anbieten. Die URLs werden durch einen Leerzeichen getrennt.

<a href="https://o7planning.org/en/10259/html"
       ping="https://example.com/trackpings  https://abc.com/pings">HTML</a>
 
Anchor ping ist klar eine schöne Funktion für die Werber. Jetzt gibt es viele fortlaufenden Streitigkeiten. Die Opponents meinen, dass es den Datenschutz des Benutzer verletzt. So unterstützt ein Browser einmal diese Funktion, aber dann unterstützt es diese Funktion nicht mehr.
Eigentlich wie Sie alle kenne ich nicht, wie die Zukunft des Attribut  ping ist. Wenn es nicht mehr unterstützt wird, ist es wirklich leider. Sie können einige Artikel wie folgend referenzieren:

8- CSS Hyperlink

  • TODO

View more Tutorials: