Cодержание

Руководство HTML Hyperlink

View more Tutorials:

1- HTML Hyperlink

Гиперссылки (Hyperlink) в основном встречаются на web страницах, которые позволяют пользователям нажимать и переходить на другую страницу.
В HTML, используйте тег  <a> чтобы создать гиперссылку (hyperlink). "a" это аббревиатура  Anchor (Якорь).
Самый простой синтаксис для создания гиперссылки:
<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>
 

Локальная ссылка (Local link)

Локальная ссылка это ссылка для подключения к странице на том же ​​​​​​​ website, для которой не требуются префиксы  http://, https://.
<a href="products.html">Products</a>

<a href="admin/products.html">Product Management</a>
Атрибут (attribute) href является самым важным у тега <a>, он определяет адрес назначения (destination) ссылки. HREF это аббревиатура hypertext reference.
Нажмите на текст ссылки (link text), который доставит вас на указанный адрес.
Например:
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>
Пример создания гиперссылки на изображении:
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

Атрибут  target определяет место где ссылка будет открытна. Например, target="_blank" значит ссылка будет открыта в новом окне (Или новом Tab).
Возможные значения атрибута  target:
target Описание
_blank Открывет связанный документ в новом окне или Tab (вкладке​​​​​​​).
_self Открывает связанный документ в том же окне/tab, в котором он был нажат (Это по умолчанию).
_parent Открывает связанный документ в родительском Frame. Или действуйте как​​​​​​​ "_self", если родительский Frame не существует.
_top Открывает связанный документ в​​​​​​​ Viewport браузера.
framename Открывает связанный документ в​​​​​​​​​​​​ названном Frame.

target="_blank"

Пример открытия связанного документа в новом окне (Или новом Tab):

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

target="_self" (Default)

taget="_self", связанный документ откроется в том же окне/Tab, где была нажата ссылка (Обычно щелчок левой кнопкой мыши).  Однако, если пользователи хотят открыть документ в новом окне (Или в новом Tab) они могут нажать на кнопку колесика мыши (Mouse Wheel button), чтобы щелкнуть на ссылку.
<a href="https://google.com">Go to Google</a>

<!-- Same as: -->

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

target="_parent"

taget="_parent": Связанный документ откроется в родительском​​​​​​​ Frame. Или он будет работать так же, как  "_self" если родительский  Frame не существует.
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

Атрибут  download говорит браузеру скачать  URL вместо навигации(navigate) к нему. Значение атрибута  download используется как названия файла, сохраняется на жестком диске пользователя.
<a href="/images/picture.png" download>picture.png</a>

<a href="/images/picture.png" download="new-file-name.png">picture.png</a>
Примечение:
Атрибут (attribute) download работает только с URL одного происхождения (same-orgin URLs)
HTTP Header Content-Disposition
Content-Disposition: inline

Content-Disposition: attachment

Content-Disposition: attachment; filename="filename.jpg"
 
Если  HTTP Header Content-Disposition предоставляет название файлу, данное название отличается от значения атрибута  download, название атрибута предоставляемый  HTTP Header будет приоритетом при использовании.
Если  Content-Disposition был настроен как значение  inline.
  • Firefox ​​​​​​​расставляет приоритеты в отношении файлов предоставленных Content-Disposition.
  • Chrome расставляет приоритеты в отношении файлов предоставленных атрибутом download.

Example:

Например тег  <a> с атрибутом  download. Примечание: Вам нужно запустить данный пример на протоколе (protocol) http:// (Или  https://). Если вы запускаете данный пример напрямую на браузере по протоколу  file:///, он может не работать (Чтобы проврить с браузерами  Firefox, Chrome).
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

Атрибут  hreflang это подсказка, он дает знать человеческий язык (human language) источника связанных данных (linked resource).
<a href="/vi" hreflang="vi">Vietnamese</a>

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

<a href="/" hreflang="en-us">English</a>
Атрибут  hreflang полезен для инструментов поиска, таких как  Google, Yandex,.. помогает им знать ресурс предоставленный тегом  <a> пренадлежит какому языку.
Когда пользователь ищет документы в таких инструментах как в​​​​​​​ Google, Yandex,..  Эти инструменты будут знать ​​​​​​​ IP адрес пользователя, таким образом, знает откуда пользователь и какой язык он использует. Основываясь на этих данных, инструменты дадут подходящий результат, включая языковой приоритет документа. Следовательно, это снижает показатель отказов (bounce rate) (Процент пользователей, получающих доступ к странице и сразу выходящих из нее по причине неуместности страницы).

6- type

Атрибут  type это только подсказка, он дает знаить  MIME Type у URL. Атрибут​​​​​​​ type имеется в некоторых тегах как в <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

Атрибут ​​​​​​​ ping является самым интересным у тега  <a>, потому что не каждый знает о нем, даже программисты работающие с   HTML много лет. Рассмотрим пример:
<a href="https://o7planning.org/en/10259/html" ping="https://example.com/trackpings">HTML</a>
Когда пользователь нажимает на гиперссылку выше, создается  POST Request браузером и отправляется к  https://example.com/trackpings. он совершенно невидим для пользователся и на самом деле силен, не может быть заблокирван даже когда пользователь отключает  Javascript, так как  Anchor ping не использует  Javascript. Anchor ping является асинхронным (asynchronous) и не отменяется, даже если ссылка, которую пользователь только что щелкнул, не может загрузиться (load).
Вы можете предоставить много  URL для атрибута ping, эти  URL отделены пробелом.

<a href="https://o7planning.org/en/10259/html"
       ping="https://example.com/trackpings  https://abc.com/pings">HTML</a>
 
Anchor ping ​​​​​​​безусловно, отличная функция для рекламодателей. Много дискуссий происходят в эти дни, оппоненты утверждают, что это нарушает конфиденциальность пользователей. Поэтому браузеры, которые когда-то поддерживали эту функцию в конце концов перестали поддерживать ее..
На самом деле, как и вы, я не знаю, каким будет будущее атрибута ​​​​​​​ ping. Если он больше не будет поддерживаться то очень жаль. Вы можете прочитать некоторые из следующих статей:

8- CSS Hyperlink

  • TODO

View more Tutorials: