HTML Ссылки

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML Как создать ссылки на веб-сайте?

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

HTML-ссылки - гиперссылки

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

Примечание: Ссылка не обязательно должна быть текстом. Это может быть также изображение или любой другой элемент HTML.

HTML-ссылка - синтаксис

HTML ссылки определяются тегом <a>:

<a href="url">link text</a>

Пример:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Попробуйте сами »

Атрибут href определяет адрес назначения (https://www.w3schools.com/html/) ссылки. Текст ссылки является видимой частью (Visit our HTML tutorial). Нажав на текст ссылки, вас отправит на указанный веб-адрес.

Локальные ссылки

В приведенном выше примере использован абсолютный URL-адрес (полный веб-адрес). Локальная ссылка (ссылка на тот самый веб-сайт) указана с относительным URL (без https://www....).

Пример:

<a href="html_images.asp">HTML Images</a>
Попробуйте сами »

Цвета HTML ссылки

По умолчанию ссылка будет отображаться так (у всех веб-браузерах):

С помощью CSS можно изменить цвета ссылок по умолчанию:

Пример:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Попробуйте сами »

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

Это ссылка

Приклад:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
Попробуйте сами »

Примечание: Чтобы узнать больше про CSS, перейдите к Учебнику CSS.

HTML-ссылки - атрибут target

Атрибут target (пер. - цель) определяет, где открывать связанный документ.

Атрибут target может иметь одно из таких значений:

Этот пример откроет связанный документ в новом окне / вкладке веб-браузера:

Пример:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Попробуйте сами »

Совет. Если веб-страница заблокирована во фрейме, вы можете воспользоваться target="_top", чтобы выйти с фрейма:

Пример:

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Попробуйте сами »

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

Обычно изображения используются как ссылки:

Пример:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »

Примечание: border: 0; добавляется, чтобы предотвратить отображение рамки вокруг изображения в IE9 (и более ранних версиях) (когда изображение является ссылкой). Хотя для других современных браузеров данный параметр не нужен.

HTML-ссылки - атрибут title

Атрибут title определяет дополнительную информацию про элемент. Эта информация обычно отображается как текст-подсказка, когда мышка перемещается над элементом (например, над ссылкой).

Пример:

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
Попробуйте сами »

HTML-ссылки - bookmark (закладки)

HTML закладки (bookmark) используются для того, чтобы читатели могли переходить к определённым частям веб-страницы. Закладки могут быть полезными, если ваша веб-страница очень длинная. Чтобы создать закладку, сначала необходимо создать закладку, а потом добавить ссылку на неё. Когда ссылка будет нажата, страница прокрутиться до необходимого места с помощью закладки.

Пример

Сначала создайте закладку с атрибутом id:

<h2 id="C4">Глава 4</h2>

Потом добавьте ссылку на закладку ("Перейти до главы 4") с одной страницы:

<a href="#C4">Перейти до глави 4</a>

или добавьте ссылку на закладку ("Перейти до главы 4") с другой страницы:

<a href="html_demo.html#C4">Перейти до глави 4</a>
Попробуйте сами »

Внешние пути

На внешние страницы можно ссылаться с полным URL-адресом или относительно текущей веб-страницы.

Этот пример использует полный URL-адрес для ссылки на веб-страницу:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Попробуйте сами »

Этот пример ссылается на страницу, размещенную в папке html на текущем веб-сайте:

<a href="/html/default.asp">HTML tutorial</a>
Попробуйте сами »

Этот пример ссылается на страницу, расположенную в той же папке, что и текущая страница:

<a href="default.asp">HTML tutorial</a>
Попробуйте сами »

Примечание: Подробнее про пути к файлам вы можете прочитать в разделе HTML Пути к файлам.

Резюме раздела

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »

HTML теги ссылок

Тег Описание
<a> Определяет гиперссылку

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.