САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Учебник

HTML Главная HTML Информация HTML Редактор HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвет HTML с CSS HTML Ссылки HTML Изображение HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML с JavaScript HTML Путь к файлу HTML Мета теги HTML Методы верстки HTML Адаптивный дизайн HTML Компьютерный код HTML Симантика HTML Руководство HTML Сущности HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

HTML Формы HTML Элементы ввода HTML Типы ввода HTML Атрибуты ввода HTML Атрибты форм ввода

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

HTML Геолакация HTML Перетаскивание HTML Веб хранилище HTML Веб работник HTML SSE

HTML Примеры

HTML Примеры HTML Тестирование HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML Поддержка браузера HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Типы документов HTML Кодировка символов HTML URL Кодировка HTML Коды языка HTTP Сообщения HTTP Методы PX в EM конвертер Клавишные комбинации

HTML Ссылки



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

HTML Ссылки - Гиперссылки

HTML ссылки - это гиперссылки.

Вы можете нажать на ссылку и перейти к другому документу.

Когда вы наведете курсор мыши на ссылку, стрелка мыши превратится в маленькую руку.

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


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

HTML тег <a> определяет гиперссылку. Он имеет следующий синтаксис:

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

Самый важный атрибут элемента <a> - это атрибут href, что указывает на пункт назначения ссылки.

Текст ссылки это та часть, которая будет видна читателю.

Нажав на текст ссылки, читатель отправится на указанный URL-адрес.

Пример

В этом примере показано, как создать ссылку на Schoolsw3.com:

<a href="https://schoolsw3.com/">Посетить Schoolsw3.com!</a>
Попробуйте сами »

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

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

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


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

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

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

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

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

Пример

Используйте target="_blank", чтобы открыть связанный документ в новом окне браузера или на новой вкладке:

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

Абсолютные и относительные ссылки

В обоих приведенных выше примерах используется абсолютный URL (полный веб-адрес) в атрибуте href.

Локальная ссылка (ссылка на страницу внутри того же веб-сайта) указывается с помощью относительного URL (без "https://www"):

Пример

<h2>Абсолютные URLы</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Относительные URLы</h2>
<p><a href="html_images.php">HTML Изображения</a></p>
<p><a href="/css/index.php">CSS Учебник</a></p>
Попробуйте сами »


HTML Ссылки - использование изображения в качестве ссылки

Чтобы использовать изображение в качестве ссылки, просто поместите тег <img> внутри тега <a>:

Пример

<a href="index.php">
<img src="smiley.gif" alt="HTML учебник" style="width:42px;height:42px;">
</a>
Попробуйте сами »

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

Используйте mailto: внутри атрибута href, чтобы создать ссылку, которая открывает пользователя программы электронной почты (чтобы позволить им отправить новое сообщение электронной почты):

Пример

<a href="mailto:someone@example.com">Отправлять электронную почту</a>
Попробуйте сами »

Кнопка как ссылка

Чтобы использовать HTML кнопку в качестве ссылки, вы должны добавить некоторый код JavaScript.

JavaScript позволяет указать, что происходит при определенных событиях, таких как нажатие кнопки:

Пример

<button onclick="document.location='index.php'">HTML Учебник</button>
Попробуйте сами »

Совет: Узнайте больше о JavaScript в разделе JavaScript Учебник.


Названия ссылок

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

Пример

<a href="https://schoolsw3.com/html/" title="Идти к Schoolsw3 HTML раздел">Посетите HTML Учебник</a>
Попробуйте сами »

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

Пример

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

<a href="https://schoolsw3.com/html/index.php">HTML учебник</a>

Попробуйте сами »

Пример

Ссылка на страницу, расположенную в папке html на текущем веб сайте:

<a href="/html/index.php">HTML учебник</a>

Попробуйте сами »

Пример

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

<a href="index.php">HTML учебник</a>

Попробуйте сами »

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


Краткое содержание главы

  • Используйте элемент <a> для определения ссылки
  • Используйте атрибут href для определения адреса ссылки
  • Используйте атрибут target для определения места открытия связанного документа
  • Используйте элемент <img> (внутри <a>) чтобы использовать изображение в качестве ссылки
  • Используйте mailto: схему внутри атрибута href, чтобы создать ссылку, которая открывает программу электронной почты пользователя

HTML Упражнения

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

Упражнение:

Используйте правильный HTML код, чтобы превратить приведенный ниже текст в ссылку на "index.html".

>Посетите HTML учебник.

Начните упражнение


HTML Ссылки теги

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

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