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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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>Определяет гиперссылку