(HTML Anchor Element
).
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.
Поддержка браузерами
| Тег
| | |
Opera
| |
IExplorer
|
Edge
|
|---|
|
| Да
| Да
| Да
| Да
| Да
| Да
|
Атрибуты
| Атрибут
| Значение
| Описание
|
|---|
| charset
| char_encoding
| Не поддерживается в HTML5.
Определяет кодировку, связанного документа.
|
| coords
| coordinates
| Не поддерживается в HTML5.
Определяет координаты ссылки.
|
|
| filename
| Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки.
|
| href
| URL
| Задает URL
страницы, или документа на которую ведёт ссылка.
|
| hreflang
| language_code
| Определяет язык связанного документа на который ведёт ссылка.
|
| media
| media_query
| Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств.
|
| name
| section_name
| Не поддерживается в HTML5.
Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут .
|
| rel
| alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
| |
| rev
| text
| Не поддерживается в HTML5.
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
|
| shape
| default
rect
circle
poly
| Не поддерживается в HTML5.
Определяет форму ссылки (использовался с атрибутом coords
). Используйте вместо данного тега элемент .
|
| target
| _blank
_parent
_self
_top
framename
| Указывает, где открыть документ.
|
| type
| media_type
| Указывает MIME-тип документа на который осуществляется переход.
|
Пример использования
Пример размещения ссылки в <a href="/kak-vstavit-izobrazhenie-v-html-dokument-vstavka-izobrazhenii-v-html-dokument/">HTML документе</a><title>
</head>
<body>
<a
href =
"http://www.yandex.ru"
>
Найдется всё</a>
</body>
</html>
<p>В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё .</p>
<p>Атрибут href
(аббревиатура от <i>hyper reference
</i>) - это основной атрибут тега , указывающий браузеру, <b>URL-адрес страницы
</b>, куда ведет ссылка. <b>Единый указатель ресурса
</b> (англ. <i>Uniform Resource Locator
</i>, ) - единообразный локатор (определитель местонахождения) ресурса.</p>
<h2>Относительные и абсолютные пути ссылок</h2>
<p>В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу.
Ниже приведены примеры указания абсолютных путей:</p>
<a
href =
"https://www.yandex.ru"
>
Содержимое элемента<span> <span><!-- указываем полный путь (протокол https) -->
</span>
<a
</span>href =
"http://www.yandex.ru"
>
Содержимое элемента<span></a> <span><!-- указываем полный путь (протокол http) -->
</span>
<a
</span>href =
"//www.yandex.ru"
>
Содержимое элемента</a>
<span><!-- допускается указывать полный путь без протокола -->
</span>
<p><i>Обращаю Ваше внимание, что в большинстве случаев, <a href="/php-absolyutnyi-put-k-failu-absolyutnyi-i-otnositelnyi-put-k-failam/">абсолютные пути</a> ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).
</i></p>
<p>Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок.
Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.
</p>
<h3>Путь относительно текущего документа</h3>
<p>Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.</p>
<br><img src='https://i0.wp.com/basicweb.ru/html/primer/folder1.png' width="100%" loading=lazy><p>Пример подключения файлов:</p>
<span><!DOCTYPE html>
<html>
<head>
</span>
<title>
Пример подключения файлов к HTML документу из той же папки<span><title>
</head>
<body>
<img src='/prebyvaniya-a-href-http-site-vneshnie-ssylki-atribut-href/' loading=lazy>src =
"image.png"
alt =
"someimage info"
<span>> <span><!-- размещаем изображение -->
</span>
<a
</span>href =
"page.html"
>
Содержимое элемента<span></a> <span><!-- ссылаемся на страницу -->
</span>
</body>
</html>
</span>
<p>Перейдем к <a href="/anketa-pri-prieme-na-rabotu-medicinskoi-organizacii-nyuansy-kotorye/">следующему примеру</a>, допустим у нас есть файл <i>index.html
</i>, в этом же каталоге есть папка (каталог) с именем <i>etc
</i> из которой нам необходимо подключить изображение и сделать ссылку на документ <i>page.html
</i>:</p>
<br><img src='https://i0.wp.com/basicweb.ru/html/primer/folder2.png' width="100%" loading=lazy><span><!DOCTYPE html>
<html>
<head>
</span>
<title>
Пример подключения файлов из дочернего каталога<span><title>
</head>
<body>
<img src='/prebyvaniya-a-href-http-site-vneshnie-ssylki-atribut-href/' loading=lazy>src =
"etc/image.png"
alt =
"someimage info"
<span>> <span><!-- размещаем изображение из дочернего каталога -->
</span>
<a
</span>href =
"etc/page.html"
>
Содержимое элемента<span></a> <span><!-- ссылаемся на страницу, из дочернего каталога -->
</span>
</body>
</html>
</span>
<p><b>Обратите внимание, как мы указываем путь к нашим файлам - мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. <a href="/chto-daet-yandeks-katalog-effekt-ot-popadaniya/">Данный каталог</a> является по отношению к текущему каталогу дочерним и чтобы подключить <a href="/kak-sdelat-tablicu-v-google-sheets-sozdanie-kopii-neobhodimogo-faila-predlozhenie/">необходимые файлы</a> мы спускаемся на один уровень ниже (<i>название_каталога/необходимый_файл
</i>).
</b></p>
<p>Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:</p>
<br><img src='https://i0.wp.com/basicweb.ru/html/primer/folder3.png' width="100%" loading=lazy><span><!DOCTYPE html>
<html>
<head>
</span>
<title>
Пример подключения файлов из родительского каталога<span><title>
</head>
<body>
<img src='/prebyvaniya-a-href-http-site-vneshnie-ssylki-atribut-href/' loading=lazy>src =
"../../image.png"
alt =
"someimage info"
<span>> <span><!-- размещаем изображение, которое находится на 2 уровня выше -->
</span>
<a
</span>href =
"../page.html"
>
Содержимое элемента<span></a> <span><!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
</span>
</body>
</html>
</span>
<p>Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы../ это позволит подняться на один уровень вверх. Вы можете, используя символы../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.
</p>
<h3>Путь относительно корня сайта</h3>
<p>Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на <a href="/ustanovka-php-ustanovka-php-na-lokalnyi-kompyuter-ustanovka-pochtovoi/">локальном компьютере</a>, то у вас должна быть установлена <a href="/programma-na-yazyke-assembler-v-programmnoi-srede-algorithm-builder-zatem/">программная среда</a>, которая позволяет эммулировать веб-сервер.</p>
<p><b>Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать <a href="/proshivka-asus-neksus-7-novyi-nexus-mnogofunkcionalnyi-programmnyi-kompleks/">программный комплекс</a>, предназначенный для <a href="/nastroika-apache-nastroika-mysql-nastroika-php-ili-lokalnaya-sreda/">локальной разработки</a>, отладки и тестирования веб проектов. Я использую Open Server , он предназначен для пользователей, которые используют <a href="/raznovidnosti-operacionnyh-sistem-operacionnye-sistemy-ih-naznachenie-i/">операционную систему</a> Windows.
В качестве аналога <i><a href="/kak-zapustit-lokalnyi-server-lokalnyi-server-open-server/">Open Server</a>
</i> под <i>Mac
</i>, могу предложить MAMP , если он вам не подойдет, можете попробовать выбрать другой.
</b></p>
<p>Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере.
На примере куска этого сайта, подключим из папок <i>primer
</i> по одному изображению и одному <i>html
</i> файлу:</p>
<br><img src='https://i2.wp.com/basicweb.ru/html/primer/folder4.png' width="100%" loading=lazy><p>Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно <a href="/kak-ukazat-otnositelnyi-put-absolyutnyi-i-otnositelnyi-put-k/">относительные пути</a> используются только в рамках одного сервера.</p>
<span><!DOCTYPE html>
<html>
<head>
</span>
<title>
Пример подключения файлов относительно корня сайта<span><title>
</head>
<body>
<img src='/prebyvaniya-a-href-http-site-vneshnie-ssylki-atribut-href/' loading=lazy>src =
"/html/primer/anyimage.png"
alt =
"someimage info"
<span>> <span><!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
</span>
<a
</span>href =
"/html/primer/anypage.html"
>
Содержимое элемента<span></a> <span><!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
</span>
<img src='/prebyvaniya-a-href-http-site-vneshnie-ssylki-atribut-href/' loading=lazy>src =
"/css/primer/anyimage.png"
alt =
"someimage info"
<span>> <span><!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
</span>
<a
</span>href =
"/css/primer/anypage.html"
>
Содержимое элемента<span></a> <span><!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
</span>
</body>
</html>
</span>
<p>Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.
</p>
<h2>Атрибут target</h2>
<p>Атрибут target
используется для того, чтобы указать браузеру, где необходимо открыть веб страницу.
Следующий пример открывает документ в новом окне браузера:</p>
<a
href=
"http://yandex.ru"
target=
"_blank"
>
Поиск </a>
<p>Ниже представлены все значения этого атрибута:</p>
<p>Работа с фреймами будет рассмотрена позднее в статье учебника " ".</p>
<h2>Атрибут mailto</h2>
<p>Использование атрибута "mailto"
в HTML документе позволяет создать ссылку для отправки письма:</p>
<a
href =
"mailto:smbd@some.com"
>
Написать автору</a>
<p>В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:</p>
<a
href =
"mailto:mail_1@some.com
?subject=
<span>Тема%20моего%20письма
</span>&cc=
mail2@some.com
&body=
<span>Здравствуй%20уважаемый%20автор"
</span>>
Написать автору</a>
<ul><li>subject
-тема письма.</li>
<li>cc
-копия письма.</li>
<li>bcc
-скрытая копия письма.</li>
<li>body
-тело письма.</li>
</ul><p>Допустимо указывать несколько адресов (либо не указывать вовсе):</p>
<a
href=
<span>" mailto:mail_1@some.com, mailto:mail_2@some.com "
</span>>
Написать автору </a>
<h2>Изображение как ссылка</h2>
<p>Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами
.</p>
<b>Ссылка html
</b> - это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которым Вы переходите, могут находиться на абсолютно разных сайтах.<br>
Ссылка, как правило, выделяется <a href="/sdelat-podcherkivanie-css-nizhnee-podch-rkivanie-html-ili-kak-ukrasit/">нижним подчёркиванием</a> и синим цветом. Однако в качестве ссылки могут выступать ссылки других цветов, изображения и области сайта.<p>
Перейти на Яндекс</p><p>
</body><br>
</html>
<br>
В результате получаем</p><h2>Атрибут title</h2><b>Атрибут title
</b> служит для того, чтобы при наведении на ссылку выплывала подсказка. В <b>атрибуте title
</b> соответственно прописывается текст подсказки или пояснения<p> <html><br>
<head><br>
<title>Атрибут title в ссылках html
При наведении на ссылку высветится сообщение "Ссылка на Яндекс".
Атрибут charset
Атрибут charset
служит для того, чтобы браузеру отправлялась информация о том, что сайт по ссылке создан в другой кодировке.
Данное действие позволит избежать
некорректного отображения символов при переходе.
Атрибут charset в ссылках html
Сайт в кодировке utf-8
Спасибо за внимание! Урок очень важный! Использование ссылок - основа основ! Удачи!
Описание
HTML тег определяет гиперссылку (её также называют просто "ссылка"), которая используется для перехода с одной страницы на другую. Текстовое содержимое тега выступает в качестве названия ссылки. Внешне ссылку легко отличить от обычного текста, так как по умолчанию она отображается в виде подчеркнутого текста, а при наведении на нее курсора мыши, он принимает вид руки с указательным пальцем, как бы показывающим, что этот текст является активным и по нему можно кликнуть ЛКМ.
- Непосещённая ссылка - текст синего цвета
- Посещенная ссылка - текст фиолетового цвета
- Активная (при клике (и удерживании) ЛКМ) - текст красного цвета
Особенность ссылок состоит в том, что сама ссылка может вести не только на другую веб-страницу, но и на файл любого типа. Файл на который ведёт ссылка, открывается в окне браузера только в тех случаях, когда браузер знает тип документа, в других случаях выводится сообщение, как следует обработать файл - открыть его или сохранить в указанную папку.
По умолчанию, страница, на которую ведёт ссылка открывается в том же окне, где находится текущая ссылка. Ссылка, которая ведёт на несуществующую страницу, файл или изображение называется "мёртвая" или "битая".
Ссылки для перехода внутри веб-страницы
Ссылки можно также использовать для перехода к определенному месту внутри веб-страницы (не обязательно в текущей). Для определения места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент. Чтобы определить элемент к которому будет сделан переход по ссылке, нужно использовать глобальный атрибут id , указав его у нужного элемента:
Заголовок
Теперь, чтобы перейти к нему, в значении атрибута href элемента мы должны указать значение атрибута id (идентификатор), перед которым нужно поставить символ решетки (#). Если элемент к которому будет сделан переход находится на одной странице с ведущей на него ссылкой, то имя документа в атрибуте href можно опустить, написав только идентификатор.
Чтобы перейти к определённому месту на другой странице, нужно указать необходимый идентификатор после URL-адреса:
Примечание:
основная польза от ссылок внутри веб-страницы заключается в том, что пользователю не приходится просматривать всю веб-страницу в поисках нужного раздела. Такие ссылки удобно применять на страницах с большим объемом содержимого, чтобы посетители могли быстро переходить к нужному им разделу.
Ссылка на почтовый ящик
