Ссылки в html5: — элемент ссылки — HTML

Leave a Comment / Html / By /

HTML5 | Ссылки

Последнее обновление: 08.04.2016

Ссылки, которые представлены элементом <a></a>, играют важную роль — они обеспечивают навигацию между отдельными документами. Этот элемент имеет следующие атрибуты:

  • href: определяет адрес ссылки

  • hreflang: указывает на язык документа, на который ведет данная ссылка

  • media: определяет устройство, для которого предназначена ссылка

  • rel: определяет отношение между данным документом и ресурсом, на который ведет ссылка

  • target: определяет, как документ по ссылке должен открываться

  • type: указывает на mime-тип ресурса по ссылке

Наиболее важным атрибутом является href:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ссылки</title>
	</head>
	<body>
		<a href="content.
 
 html">Учебник по HTML5</a>
	</body>
</html>

Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию на ссылку.

Также мы можем использовать абсолютные пути с полным указанием адреса:


<a href="http://metanit.com/web/html5/">Учебник по HTML5</a>

Навигация внутри документа

И также мы можем задать внутренние ссылки, которые будут переходить к определенным блокам внутри элементов:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Внутренние ссылки</title>
	</head>
	<body>
		<a href="#paragraph2">Параграф 1</a> | <a href="#paragraph3">Параграф 2</a> | <a href="#paragraph4">Параграф 3</a>
		<h3>Параграф 1</h3>
		<p>Содержание параграфа 1</p>
		<h3>Параграф 2</h3>
		<p>Содержание параграфа 2</p>
		<h3>Параграф 3</h3>
		<p>Содержание параграфа 3</p>
	</body>
</html>

Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном случае переход будет идти к заголовкам h3.

Атрибут target

По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить это действие. Атрибут target может принимать следующие значения:

  • _blank: открытие html-документа в новом окне или вкладке браузера
  • _self: открытие html-документа в том же фрейме (или окне)
  • _parent: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме
  • _top: открытие html-документа на все окно браузера
  • framename: открытие html-документа во фрейме, который называется framename (В данном случае framename — только пример, название фрейма может быть произвольным)

Например, открытие документа по ссылке в новом окне:


<a href="http://metanit.com/web/html5/" target="_blank">Учебник по HTML5</a>

Значение _blank как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.

Стилизация ссылок

По умолчанию ссылка уже имеет некоторый цвет (один из оттенков синего), кроме того она имеет подчеркивание. При нажатии на ссылку она становится активной и приобретает красный цвет, а после перехода по ссылке эта ссылка может окраситься в другой цвет (как правило, в фиолетовый). Подобная стилизация задается многими браузерами по умолчанию, но мы можем ее переопределить. Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ссылки</title>
		<style>
			a:link    {color:blue; text-decoration:none}
			a:visited {color:pink; text-decoration:none}
			a:hover   {color:red; text-decoration:underline}
			a:active  {color:yellow; text-decoration:underline}
		</style>
    </head>
    <body>
        <a href="index.html">Учебник по HTML5</a>
    </body>
</html>

Здесь определены стили для ссылок в различных состояниях.

a:link применяется для ссылок в обычном состоянии, когда они не нажаты и на них не наведен указатель мыши.

a:visited указывает на состояние ссылки, по которой уже был осуществлен переход.

a:hover указывает на состояние ссылки, на которую навели указатель мыши.

a:active указывает на ссылку в нажатом состоянии.

Стиль color устанавливает цвет ссылки. А стиль text-decoration устанавливает подчеркивание: если значение underline, то ссылка поддчеркнута, если none, то подчеркивание отсутствует.

Ссылка-картинка

Поместив внутрь элемента <a> элемент <img>, можно сделать ссылку-изображение:


<a href="index.html">
	<img src="cover.png" alt="HTML tutorial">
</a>

НазадСодержаниеВперед

Ссылки | WebReference

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

Создание ссылок

Для создания ссылки необходимо сообщить браузеру, какой текст или изображение является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью элемента <a>, адрес задаётся с помощью атрибута href (пример 1). Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширениями zip) будут сохраняться на локальный диск, сайты открываться в браузере.

Пример 1. Создание ссылки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> </head> <body> <p><a href=»page/lorem.html»>Ссылка на страницу lorem. html</a></p> <p><a href=»lorem.zip»>Ссылка на файл lorem.zip</a></p> <p><a href=»https://webref.ru»>Ссылка на сайт webref.ru</а></p> </body> </html>

В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес может быть абсолютным и относительным. К абсолютному адресу относится полный путь к документу, включая протокол и наименование сайта, например http://mysite.ru/about/. Эта форма обращения работает везде и всюду, независимо от имени сайта или веб-страницы, где прописана ссылка. Как правило, абсолютные адреса применяются для перехода на другой ресурс, а внутри текущего сайта применяются относительные ссылки. Подобные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. Когда путь ведётся от корня сайта, в начале пути добавляют слэш (/), например /source/adm. html. В этом случае сервер понимает, что ему следует загрузить документ по адресу http://mysite.ru/source/adm.html. Учтите, что ссылки относительно корня сайта не работают на локальном компьютере, а только под управлением веб-сервера. Вот некоторые примеры адресов.

//mysite.ru
Обращение к сайту без указания протокола.

/
/demo/
Эти две ссылки называются неполными и указывают веб-серверу загружать файл index.html (или index.php), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов или блокирует доступ к сайту из соображений безопасности.

/images/pic.html
Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на документ pic.html, который находится в папке images. А она, в свою очередь, размещена в корне сайта.

../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта.

manual/info.

html
Если перед именем папки нет никаких дополнительных символов, вроде двух точек, то она размещена внутри текущей папки.

Открытие ссылки в новом окне

По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target. В качестве значения используется зарезервированное слово _blank, тогда страница откроется в новом окне браузера (пример 2). Открывать в новой вкладке или новом окне — задавать через HTML мы не можем, это определяется настройками браузера и пользователя.

Пример 2. Создание различных ссылок

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> </head> <body> <p><a href=»page/1.html»>Ссылка откроется в текущем окне</a></p> <p><a href=»page/2.html» target=»_blank»>Ссылка откроется в новом окне</а></p> </body> </html>

Загрузка файлов

Что делать с тем или иным типом документа определяет веб-сервер. Как правило, если ссылка ведёт на файл в понятном браузеру формате, то он будет открыт. html-документ, изображения в JPEG, PNG, обычные текстовые документы, видео и аудио-файлы — всё это современным браузерам знакомо и они вполне могут это показать. Что касается архивов и других форматов, которые браузеры пока не распознают, то при щелчке по ссылке браузер предложит сохранить файл на локальный диск.

В некоторых случаях требуется не открыть файл, как, например, рисунок, а сохранить его. Для этого просто добавьте атрибут download к элементу <a>, как показано в примере 3.

Пример 3. Использование download

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>download</title> </head> <body> <p><a href=»image/xxx.jpg»>Открыть файл в браузере</a></p> <p><a href=»image/xxx.jpg» download>Скачать файл</a></p> </body> </html>

В данном примере первая ссылка откроется в браузере, а вторая сохранит файл. Браузер Internet Explorer не поддерживает атрибут download, поэтому в нём поведение для двух ссылок будет одинаковым.

См. также

  • <a>
  • text-decoration-skip-ink
  • Использование :hover

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Тег HTML 5

Тег HTML используется для определения ссылки на внешний ресурс. Он находится в разделе HTML-документа.

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

Хотя тег создает так называемую «гиперссылку», именно , а не используется для создания «кликабельной» гиперссылки, с которой знакомо большинство веб-пользователей. Для создания такой ссылки используйте тег .

Пример

В этом примере стили ссылаются на внешнюю таблицу стилей. Внешняя таблица стилей связана с документом с помощью тега .

Атрибуты

Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

Ниже перечислены атрибуты, которые можно добавить к этому тегу.

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут Описание
href Указывает URL-адрес документа ресурсов.
crossorigin Этот атрибут является атрибутом настроек CORS. CORS расшифровывается как Cross-Origin Resource Sharing . Назначение атрибута crossorigin — позволить вам настроить запросы CORS для извлеченных данных элемента. Перечислены значения атрибута crossorigin .

Возможные значения:

Значение Описание
анонимный Запросы CORS из разных источников для элемента не будут иметь установленного флага учетных данных. Другими словами, не будет обмена учетными данными пользователя через файлы cookie, SSL-сертификаты на стороне клиента или HTTP-аутентификацию.
use-credentials Запросы CORS между источниками для элемента будут иметь установленный флаг учетных данных.

Если этот атрибут не указан, CORS вообще не используется.

Недопустимое ключевое слово и пустая строка будут обрабатываться как анонимное значение .

rel Описывает связь между текущим документом и целевым URI. Можно указать несколько значений, разделенных пробелом.

Возможные значения:

Значение Описание
альтернативный Дает альтернативные представления текущего документа. Например, вот пример кода (взятый из спецификации HTML5) для предоставления фида синдикации для текущей страницы:
канонический Дает предпочтительный URL для текущего документа.
автор Дает ссылку на автора текущего документа.
dns-prefetch Указывает, что пользовательский агент должен упреждающе выполнять разрешение DNS для источника целевого ресурса.
help Предоставляет ссылку на контекстно-зависимую справку.
значок Импортирует значок для представления текущего документа.
modulepreload Указывает, что пользовательский агент должен заблаговременно получить сценарий модуля и сохранить его в карте модуля документа для последующей оценки. При желании можно также получить зависимости модуля.
лицензия Указывает, что основное содержание текущего документа защищено лицензией на авторское право, описанной в документе, на который делается ссылка.
next Указывает, что текущий документ является частью серии и что следующий документ в серии является документом, на который делается ссылка.
pingback Дает адрес сервера pingback, который обрабатывает pingbacks для текущего документа.
preconnect Указывает, что пользовательский агент должен предварительно подключиться к источнику целевого ресурса.
prefetch Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс, поскольку он может потребоваться для последующей навигации.
preload Указывает, что пользовательский агент должен упреждающе извлекать и кэшировать целевой ресурс для текущей навигации в соответствии с потенциальным пунктом назначения, заданным атрибутом as (и приоритетом, связанным с соответствующим пунктом назначения).
prerender Указывает, что пользовательский агент должен упреждающе извлекать целевой ресурс и обрабатывать его таким образом, чтобы обеспечить более быстрый ответ в будущем.
prev Указывает, что текущий документ является частью серии и что предыдущий документ в серии является документом, на который делается ссылка.
поиск Дает ссылку на ресурс, который можно использовать для поиска в текущем документе и связанных с ним страницах.
таблица стилей Импорт внешней таблицы стилей.
rev Отношение обратной ссылки целевого ресурса к этому документу (или подразделу/теме).
media Указывает, какой носитель использует целевой URL. Используется только при наличии атрибута href .

Значение:

[Значение должно быть допустимым медиа-запросом. Значение по умолчанию: , все 9.0004 ] .

одноразовый номер Представляет криптографический одноразовый номер ("число, использованное один раз"), который может использоваться политикой безопасности содержимого для определения того, будет ли внешний ресурс, указанный ссылкой, загружен и применен к документу. Значение — текст.
hreflang Код языка целевого URL. Чисто консультативный. Значение должно быть допустимым кодом языка RFC 3066.
type MIME-тип содержимого в месте назначения ссылки. Чисто консультативный.
referrerpolicy Политика Referrer для выборок, инициированных элементом.
размеры Задает размеры значков для визуальных носителей. Можно использовать для фавиконов. Можно указать несколько значений, если они разделены пробелом.

Примеры:

  • размеры="16x16" (1 размер)
  • размеры="16x16 32x32 64x64" (3 разных размера)
  • размеры="любой" (любой размер)

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам диалога ).

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.

Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5.

ссылок в HTML5 — Технический фундамент

Как создавать ссылки в HTML5?

Предыдущий пост

Следующий пост

Ссылки:

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

Синтаксис ссылки HTML: 

 ссылка

В приведенном выше фрагменте кода мы определили, как использовать ссылки. Мы взяли тег для предоставления ссылок, а href используется для указания URL-адреса страницы, и URL-адрес определяется как то, что мы даем в ссылке, а ссылка используется для предоставления текста, который мы даем ссылки в URL.

Отображение гиперссылки:

Чтобы отобразить гиперссылку, мы должны следовать

 
Заголовок отображается как dotnetfunda 

 dotnetfunda.com">dotnetfunda

В приведенном выше фрагменте кода мы определили, как создать гиперссылку на html-странице. Мы взяли тег для определения гиперссылки. В теге у нас есть href в качестве гиперссылки как http , что означает (протокол передачи гипертекста) из www(World Wide Web) . Мы дали сайту имя dotnetfunda.com, которое называется гиперссылкой. Мы указали атрибут title как dotnetfunda, который отображается как заголовок в выходных данных.

вывод

Изображение ссылки:

Чтобы сохранить изображение в качестве ссылки, мы должны добавить источник изображения в тег .

 
 Добавление ссылки на изображение 

    
    
    
    
 Добавление ссылки на изображение

Ссылка на изображение 

В приведенном выше фрагменте кода показано, как создать изображение в виде ссылки. Для того, чтобы дать ссылку на изображение, мы должны расположить изображение в теге , чтобы создать изображение в виде ссылки.

вывод

 

Цвета ссылок:

Существуют различные типы ссылок, которые используют атрибут стиля для предоставления ссылок 

Ссылка для наведения

Используется для изменения цвета ссылки при наведении курсора мыши на ссылку

 <стиль>
            а: наведите курсор {цвет: розовый;}
    
    dotnetfunda

Ссылка на наведение

В приведенном выше фрагменте кода мы создали изменение цвета ссылки при наведении мыши на ссылку с помощью наведения на странице 9 html.0007

output

Это изображение до

Это изображение после наведения мыши, которое меняет цвет ссылки размещен по ссылке