Учебник по текстовым ссылкам HTML »WebNots
Создание ссылок в HTML
Представьте, что сайт состоит из сотен страниц, между которыми нет связи. При создании веб-сайта важным фактором является подключение одной страницы к другой. Это не только помогает пользователям понять релевантность основных и связанных страниц, но также помогает поисковым системам оценить относительную важность страницы на всем сайте.
Ссылки (также называемые гиперссылками) — это соединители, соединяющие один ресурс с другим ресурсом на той же странице или между страницами, а тег привязки используется в HTML для определения ссылки.
Структура HTML-ссылки
Тег привязки состоит из двух частей:
- Ссылка на гиперссылку — это URL-адрес страницы, на которую вы хотите создать ссылку.
- Текст — так называемый якорный текст, отображаемый в окне браузера.
Структура HTML-ссылки
Типы гиперссылок
Гиперссылки можно классифицировать на основе элемента, с которым они используются, следующим образом:
- Текстовые ссылки
- Подключение разных страниц
- Соединение разделов одной страницы
- Ссылка на скачивание
- Электронная почта
- Ссылки на изображения
Создание текстовых ссылок — соединение разных страниц
Это стандартная, простая и наиболее распространенная форма гиперссылок, которую вы можете видеть в меню навигации сайта и в хлебных крошках. HTML-тег привязки с целевым URL и текстом привязки достаточен для создания ссылки. Ниже приведен пример кода для создания текстовой ссылки:
<a href="https://www.webnots.com/">Home</a> | <a href="https://www.webnots.com/webmasters-blog/">Blog</a> | <a href="https://www.webnots.com/shop/">Shop</a> | <a href="https://www.webnots.com/contact-us/ ">Contact Us</a>
На веб-странице это будет выглядеть так:
Главная | Блог | Магазин | Связаться с нами
Текстовые ссылки — соединение двух разделов одной страницы
Чтобы соединить два раздела, расположенных на одной веб-странице, целевой раздел должен быть идентифицирован, а затем связан в исходном тексте с помощью тега . Например, если на странице (http://yoursite.com/page.html) есть заголовок «Типы ссылок» для раздела, и вы хотите перейти к этому заголовку с определенной текстовой ссылки, расположенной где-то вниз по странице, тогда есть два шага, которые необходимо выполнить.
Первый шаг — определить заголовок с идентификатором, как показано ниже:
<h1 id="Link_Types"> Types of Links </h1>
Второй шаг — связать идентификатор раздела с текстом привязки с помощью тега #, чтобы при нажатии на текст пользователи переходили к заголовку.
<a href="http://yoursite.com/page.html#Link_Types"> Go to Types of Links Section </a>
Использование текстовой ссылки «Вернуться к началу»
Рекомендуется размещать ссылку «вернуться к началу» после каждого раздела веб-страницы, особенно если контент очень длинный. В HTML это очень просто, просто добавьте приведенный ниже тег привязки в любом месте своей страницы, и нажатие на ссылку приведет пользователей к началу страницы.
<a href="https://www.webnots.com/html-text-links-tutorial/#top">Back to Top</a>
Создание ссылки для скачивания
Ссылки для скачивания — это гиперссылки, при нажатии на которые загружается файл в окне браузера. Ниже приведен пример создания кнопки загрузки, при нажатии на которую будет загружен файл PDF с сервера.
<button> <a href="http://yoursite.com/ebook.pdf" target="_blank"> Download </a> </button>
Атрибут target = ”_ blank” используется для указания браузеру открыть ссылку в новом окне браузера.
Кнопка загрузки в браузере будет выглядеть, как показано ниже !!!
Кнопка загрузки с гиперссылкой
Узнать больше о ссылки на электронную почту, ссылки на изображения и атрибуты ссылки.
Относительные и абсолютные ссылки
При использовании гиперссылок (будь то текстовая ссылка или ссылка на изображение) необходимо понимать структуру каталогов. Давайте рассмотрим пример структуры сайта, как показано ниже:
Вы должны связать файл «style.css» с файлом «index.html». Сделать это можно двумя способами:
Вот ссылка на файл style.css с относительной структурой.
Вот ссылка на style.css с использованием абсолютного URL.
На самом деле сайт может иметь более сложную структуру. Если вы не понимаете структуру сайта, просто используйте абсолютные URL-адреса. Проблема с абсолютным URL-адресом заключается в том, что при изменении URL-адреса необходимо изменять каждый его экземпляр. Но относительные URL-адреса обычно обновляются автоматически без необходимости изменения каждого экземпляра.
Помните, что когда вы меняете имя файла с «style.css» на «style1.css», вы должны изменять каждый экземпляр независимо от того, какой относительный или абсолютный URL используется. Потому что он будет указывать на недоступный ресурс и приведет к ошибке 404.
Системы управления контентом, такие как Weebly, используют относительные URL-адреса, тогда как WordPress использует абсолютные URL-адреса.
Цвета текстовых ссылок
Все текстовые ссылки на веб-странице будут иметь следующие цвета по умолчанию.
| Ссылка на сайт | цвет |
|---|---|
| Непосещенная ссылка | Синий |
| Посещенная ссылка | Пурпурный |
| Активная ссылка | Красный |
Цвета непосещенной ссылки, посещенной ссылки и активной ссылки можно изменить с помощью атрибутов link, vlink и alink в теге вашего HTML-документа, как показано ниже:
<body link=red vlink=green alink=yellow> Your Site Content Goes Here.... </body>
Хотя он поддерживается всеми браузерами, не рекомендуется управлять цветами ссылок с помощью HTML. Вместо этого можно использовать CSS для управления всем сайтом.
