Die Anleitung zu HTML Hyperlink

HTML Hyperlink
HTML Email Link
target
download
hreflang
type
ping
CSS Hyperlink

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:

https://ex1.o7planning.com/html/a/hyperlink-example.html

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

Die Anleitung zu 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"

Die Anleitung zu HTML IFrame

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