HTML Ссылки

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

Ссылки в HTML документами называются гипертекстовыми ссылками, или гиперссылками. Для их вставки используют элемент <a>. В качестве ссылки можно использовать как текст, так и изображение.

По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной. Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.

  • не посещенные ссылки: подчеркнутый текст синего цвета
  • посещенные ссылки: подчеркнутый текст фиолетового цвета
  • активные ссылки: подчеркнутый текст красного цвета

Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей.

Синтаксис

Для того, чтобы сказать браузеру, что данная часть текста является ссылкой, необходимо поместить его в тег <a> </a>․ Адрес документа, на который следует перейти, указывается при помощи атрибута href.

Выглядит это так :

<a href="url">текст ссылки</a>.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h2>Пример ссылки</h2>
       <a href="https://ru.w3docs.com/">W3Docs.com</a>
   </body>
</html>

Результат

В этом примере мы использовали тег <h2>, чтобы определить подзаголовки и тег <a>, чтобы создать ссылки. Между тегами <a> и </a> мы поместили W3Docs.com. Нажмите на него и будете перенаправлены на домашнюю страницу нашего веб-сайта.

Атрибут target

Для того, чтобы ссылка открывалась в новом окне, необходимо добавить атрибут target, значением которого является"_blank" .

<a href="https://ru.w3docs.com" target="_blank">W3Docs.com</a>

Не забудьте добавлять слеш (/) к ссылке.

Атрибут ID

Атрибут id используется для создания уникального идентификатора части документа для того, чтобы к нему можно было обращаться.

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

  1. Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее подчеркивание).
    Пример. <a id="пример"> Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку. </a>
  1. Создать гиперссылку с указанием id, которому предшествует символ решетка #.
    Пример. <a href="#пример"> Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример” </a>

Теперь давайте посмотрим, как это выглядит в коде HTML.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h2>Пример ссылки с атрибутом id</h2>
       <a id="пример">Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку </a>
        <a href="#пример">Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример”</a>
   </body>
</html>

Результат

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

Для того, чтобы сделать изображение кликабельным, необходимо добавить в тег <a> изображение. Делаете это при помощи тега <img>, с которым используются следующие атрибуты:

  1. src - источник изображения
  2. alt - альтернативный текст
  3. width - ширина изображения
  4. height - высота изображения

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
      <a href="https://ru.w3docs.com/">
           <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
      </a>
  </body>
</html>

Результат

Кликните по изображению внизу, и вы будете перенаправлены на домашнюю страницу нашего сайта.

Об HTML изображениях мы поговорим подробнее в следующей главе.




Related articles