Изучите основы гиперссылок — WebNots

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

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

Структура гиперссылки

Гиперссылка состоит из двух простых частей:

  • URL-адрес под названием Uniform Resource Locator, который представляет собой не что иное, как адрес веб-страницы, на которую вы хотите создать ссылку.
  • Якорный текст — это текст, видимый пользователям в окне браузера.

Структура гиперссылки

Тип гиперссылок

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

  • Текстовая ссылка
  • Ссылка на изображение
  • Ссылка на файл
  • Ссылка на адрес электронной почты

Создание текстовых гиперссылок

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

Код

<a href="https://www.webnots.com">A Knowledge Sharing Platform for Webmasters</a>

Href — это атрибут, называемый ссылкой на гиперссылку, который используется для связывания запрошенного ресурса, и ресурсом может быть веб-страница, файл или идентификатор электронной почты. Пользователи будут видеть только текст привязки в содержимом, а URL-адрес ссылки будет отображаться в нижнем правом или левом углу браузера (или в строке состояния в случае Internet Explorer) при наведении указателя мыши на текст привязки, как показано на рисунке ниже.

Пример текстовой ссылки

Пример текстовой ссылки

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

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

Как это выглядит

Публикация в поисковой системе

Публикация в поисковой системе

Альтернативный текст — важный элемент изображений, который будет использоваться поисковыми системами для понимания изображений. Веб-браузеры будут отображать замещающий текст, если изображение не поддерживается.

Ссылка на файл

Еще одно важное использование ссылки — это соединение текста или изображения с файлом, загруженным на веб-сервер. Например, ниже приведен пример кода, который используется с тегом кнопки HTML для создания текстовой ссылки, которая загружает файл PDF.

Код

<button>
<a href="https://img.webnots.com/2014/05/Submit-Site-to-Search-Engines.pdf"> Download Site Submission Guide for Search Engines</a>
</button>

Ссылка на идентификатор электронной почты

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

Код

<a href="https://www.webnots.com/learn-basics-of-hyperlinks/mailto:contact@webnots.com">Contact Us</a>

Цвета гиперссылок по умолчанию

Гиперссылки по умолчанию отображаются в следующих цветах:

Ссылка цвет
Непосещенная ссылка Синий
Посещенная ссылка Пурпурный
Активная ссылка Красный

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

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

<a href="https://www.webnots.com" target="_blank">
A Knowledge Sharing Platform for Webmasters
</a>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *