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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 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 Справочник тегов.