FrontendBook | HTML Ссылки

HTML Ссылки

Что такое ссылка?

Это подключение одного веб-ресурса к другому. У ссылки есть два конца: якорь и направление. Ссылка начинается с якоря «источник» и указывает на якорь «назначения», которым может быть любой веб-ресурс, такой как изображение, видеоклип, звуковой фрагмент, программа, HTML-документ или элемент в HTML-документе. . Вы найдете множество веб-сайтов или платформ социальных сетей (таких как YouTube, Instagram), которые связывают изображение с URL-адресом или текст с URL-адресом и т. д.

В основном это означает, что с помощью тега «a» вы можете связать 1 элемент кода с другим элементом, который может быть или не быть в вашем коде.

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

Синтаксис:

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

Наиболее важным атрибутом элемента <a> является атрибут href, который указывает место назначения ссылки. Текст ссылки — это та часть, которая будет видна читателю. Щелкнув по тексту ссылки, читатель отправится на указанный URL-адрес.

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

  • Непосещенная ссылка - подчеркнута и окрашена в синий цвет
  • Посещенная ссылка - подчеркнута и окрашена в фиолетовый цвет
  • Активная ссылка - подчеркнута и окрашена в красный цвет

HTML Ссылки - Атрибут Target

По умолчанию связанная страница будет отображаться в текущем окне браузера. Чтобы изменить это, вы должны указать другую цель для ссылки.

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

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

  • _self — по умолчанию. Открывает документ в том же окне/вкладке, где он был нажат
  • _blank — открывает документ в новом окне или вкладке
  • _parent — открывает документ в родительском фрейме
  • _top — открывает документ во всем теле окна

Абсолютные и относительные URL-адреса

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

<h2>Абсолютные URL-адреса</h2>
<p><a href="https://www.frontendbook.ru/">FrontendBook</a></p>
<p><a href="https://www.google.com/">Google</a></p>


<h2>Относительные URL-адреса</h2>
<p><a href="/html/elements">HTML Элементы</a></p>
<p><a href="/css">CSS Справочник</a></p>

Рассмотрим разные вариации использования ссылки