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

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

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), который доставит вас на указанный адрес.

Например:

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>

Пример создания гиперссылки на изображении:

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

Руководство 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"

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

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

Pуководства HTML

Возможно, вам интересно

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

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

1. HTML Hyperlink

2. HTML Email Link

3. target

4. download

5. hreflang

6. type

7. ping

8. CSS Hyperlink

Pуководства HTML

Pуководства HTML

Новейшие статьи