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

HTML5 Учебник

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

HTML Формы

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

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

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

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

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

HTML Ссылки



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


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

HTML-ссылки представляют собой гиперссылки.

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

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

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


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

В HTML, ссылка определяется тегом <a>:

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

Пример

<a href="https://schoolsw3.com/html/">Посетите наш HTML учебник</a>
Редактор кода »

Атрибут href указывает адрес назначения (https://schoolsw3.com/html/) ссылки.

Текст ссылки это видимая часть (посетите наш HTML учебник).

Нажав на текстовую ссылку, Вы перейдете на указанный адрес.

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


Локальные Ссылки

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

Локальная ссылка (ссылка на тот же веб-сайт), указан относительный URL-адрес (без http://..).

Пример

<a href="../html_images.php">Изображение HTML</a>
Редактор кода »

Цвет Ссылок HTML

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

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

Вы можете изменить цвета по умолчанию, с помощью стилей CSS:

Пример

<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>
Редактор кода »

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

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

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

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

Этот пример открывает связанный документ в новой вкладке окна браузера:

Пример

<a href="https://schoolsw3.com/" target="_blank">Посетить schoolsw3!</a>
Редактор кода »

Совет: Если Ваша Веб-страница заблокирована в рамке (frame), вы можете использовать target="_top", чтобы выйти из рамки:

Пример

<a href="https://schoolsw3.com/html/" target="_top">Учебник HTML5!</a>
Редактор кода »

Ссылки HTML - Изображение как ссылка

Изображение является общим для использования в качестве ссылки:

Пример

<a href="../index.php">
  <img src="smiley.gif" alt="Учебник HTML" style="width:42px; height:42px; border:0">
</a>
Редактор кода »

Примечание: border:0; добавляется для предотвращения IE9 (и ранее) отображать границы вокруг изображения (если изображение является ссылкой).


Ссылки HTML - Создать Закладку

Закладки HTML позволяют читателям, перейти к определенной части веб-страницы.

Закладки могут быть полезны, если Ваша страница очень длинная.

Чтобы сделать закладку, нужно сначала создать закладку, а затем добавить ссылку на нее.

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

Пример

Во-первых, создать закладку с помощью атрибута id :

<h2 id="C4">Глава 4</h2>

Затем добавьте ссылку на закладку ("Перейти к Главе 4"), на той же странице:

<a href="#C4">Перейти к Главе 4</a>

Или добавьте ссылку в закладки ("Перейти к Главе 4"), на другую страницу:

Пример

<a href="html_demo.php#C4">Перейти к Главе 4</a>
Редактор кода »

Внешний Путь

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

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

Пример

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

Редактор кода »

Это пример ссылки на страницу, расположенние в папке php на текущем веб-сайта:

Пример

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

Редактор кода »

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

Пример

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

Редактор кода »

Подробнее о пути к файлам узнаете в главе HTML Путь к Файлам.


Краткое содержание

  • Используйте HTML элемент <a> для определения ссылки
  • Используйте HTML атрибут href для определения адреса ссылки
  • Используйте HTML атрибут target для определения, где открыть связанный документ
  • Используйте HTML элемент <img> (внутри тега <a>) для определения изображение в качестве ссылки
  • Используйте HTML атрибут id (id="value") для определения закладки на странице
  • Используйте HTML атрибут href (href="#value") для ссылки на закладку страницы

HTML Упражнения

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

Упражнение:

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

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

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


Тег Ссылки HTML

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