betacode

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

View more Tutorials:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

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

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.