HTML Ссылки
Ссылки находятся почти на всех веб-страницах. Ссылки позволяют пользователям переходить от страницы к странице по всему сайту или перейти на другой сайт.
В этой теме:
HTML Ссылки - Гиперссылки
HTML ссылки - это гиперссылки.
Вы можете кликнуть на ссылки и перейти к другому документу.
При наведении мыши на ссылки стрелка мыши превратится в маленькую стрелку (при настройках по умолчанию).
Примечание: Ссылки не обязательно должны быть текстовыми. Ссылкой может быть изображение или любой другой html-элемент.
HTML Ссылки - Синтаксис
Гиперссылки определяются с помощью HTML-тега <a> (от слова anchor - якорь):
<a href="url">Текст ссылки</a>
Пример
<a href="https://www.w3schools.com/html/">HTML уроки для начинающих онлайн</a>
Попробуйте сами »
Атрибут href указывает адрес назначения ссылки (https://w3schoolsua.github.io/html/).
Текст ссылки есть видимой частью (HTML уроки для начинающих онлайн).
Кликнув на текст ссылки, вас отправит по указанному адресу.
Примечание: Без косой черты (слэша) в конце адресов подпапок вы можете сгенерировать два запроса к серверу. Многие серверы автоматически добавляют косую черту в конец адреса, а затем создают новый запрос.
Локальные ссылки
В приведенном выше примере используется абсолютный URL (полный веб-адрес).
Локальные ссылки (ссылки на один и тот же веб-сайт) указываются с относительным URL (без https://www....).
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>
Попробуйте сами »
Ссылки часто стилизуются в виде кнопок с помощью CSS:
Это ссылкиПример
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Попробуйте сами »
Чтобы узнать больше о CSS, перейдите в CSS Учебник на нашем сайте W3Schools на русском.
HTML ссылки - Атрибут target
Атрибут target определяет, где открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
_blank- Открывает связанный документ в новом окне или вкладке_self- Открывает связанный документ в том же окне / вкладке, в котором он был нажат (по умолчанию)_parent- Открывает связанный документ в родительском фрейме_top- Открывает связанный документ в полном теле окна- framename - Открывает связанный документ в названом фрейме
Этот пример откроет связанный документ в новом окне/вкладке браузера:
Пример
<a href="https://www.w3schools.com/" target="_blank">Посетите W3Schools!</a>
Попробуйте сами »
Совет: Если веб-страница заблокирована во фрейме, вы можете использовать target="_top", чтобы выйти из фрейма:
HTML Ссылки - Изображения как ссылки
Часто в качестве ссылок используются изображения:
Пример
<a href="index.html">
<img src="smiley.gif" alt="HTML уроки для начинающих" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »
Примечание: border:0; добавляется, чтобы IE9 (и более ранние версии) не отображали рамку вокруг изображения (когда изображение является ссылкой).
Атрибут Title - Подсказка для ссылок
Атрибут title определяет дополнительную информацию об элементе. Информация чаще всего отображается в виде подсказки, когда курсор перемещается над элементом.
Пример
<a href="https://www.w3schools.com/html/" title="Перейти на уроки по HTML для начинающих">Уроки по HTML для начинающих</a>
Попробуйте сами »
HTML Ссылки - Как создать закладку
HTML-закладки используются, чтобы позволить читателям переходить к определенным частям веб-страницы.
Закладки могут быть полезны, если ваша веб-страница очень длинная.
Чтобы создать закладку, сначала необходимо создать закладку, а затем добавить ссылки на неё.
При нажатии на ссылки страница прокручивается к месту закладки.
Пример
Сначала создайте закладку с атрибутом id:
<h2 id="C4">Раздел 4</h2>
Потом добавьте ссылки на закладку ("Перейти к разделу 4") на той же странице:
<a href="#C4">Перейти к разделу 4</a>
Или добавьте ссылки на закладку ("Перейти к разделу 4") с другой страницы:
Внешние пути
На внешние страницы можно ссылаться по полному URL или по пути относительно текущей веб-страницы.
В этом примере используется полный URL для ссылки на веб-страницу:
Этот пример ссылается на страницу, расположенную в папке html на текущем вебсайте:
Этот пример ссылается на страницу, расположенную в той же папке, что и текущая страница:
Вы можете прочитать больше о путях к файлам в разделе HTML Пути к файлам на нашем сайте W3Schools на русском.
Резюме раздела
- Используйте элемент
<a>для определения ссылки - Используйте атрибут
hrefдля определения адреса ссылки - Используйте атрибут
targetчтобы определить, где открыть связанный документ - Используйте элемент
<img>(внутри <a>) для использования картинки в качестве ссылки - Используйте атрибут
id(id="значение") для определения закладок на странице - Используйте атрибут
href(href="#значение") для ссылки на закладку
HTML Упражнения
HTML Теги ссылок
| Тег | Описание |
|---|---|
| <a> | Определяет гиперссылки |
Для получения полного списка всех доступных HTML тегов, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Для чего нужны ссылки на веб-страницах?
- Что такое гиперссылки?
- С помощью какого тега определяются гиперссылки на HTML-страницах?
- Какой атрибут указывает адрес назначения гиперссылки на HTML-страницах?
- Какая часть гиперссылки просматривается на веб-страницах?
- Какие объекты на веб-страницах могут быть гиперссылками?
- Какая разница между локальными и абсолютными адресами гиперссылок?
- Какие цвета по умолчанию у гиперссылок?
- С помощью чего можно изменить цвет гиперссылок?
- Какой атрибут указывает, где открыть связанный веб-документ?
- Какие значения у атрибута target?
- Можно ли использовать изображение в качестве ссылки?
- Какой атрибут определяет дополнительную информацию об элементе в виде подсказки?
- Для чего нужны HTML-закладки?
- Что нужно указать, чтобы сделать закладку на веб-странице?
- Какие ссылки используются для перехода по страницам в пределах одного сайта?
- Какие ссылки используются для перехода с одного сайта на другой?
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
HTML - Ссылки - W3Schools Видеоурок
В этом видео объясняется, что такое ссылки и как они работают в HTML.
Часть серии видеоуроков для начинающих по изучению HTML!
