Содержание
Ссылки | htmlbook.ru
Ссылки являются основой гипертекстовых документов и позволяют переходить с
одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка
может вести не только на HTML-файлы, но и на файл любого типа, причем этот
файл может размещаться совсем на другом сайте. Главное, чтобы к документу,
на который делается ссылка, был доступ. Иными словами, если путь к файлу можно
указать в адресной строке браузера, и файл при этом будет открыт, то на него
можно сделать ссылку.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также
указать адрес документа, на который следует сделать ссылку. Оба действия выполняются
с помощью тега <a>. Общий синтаксис создания ссылок следующий.
<a href="URL">текст ссылки</a>
Атрибут href определяет URL (Universal Resource Locator, универсальный указатель
ресурса), иными словами, адрес документа, на который следует перейти, а содержимое
контейнера <a> является ссылкой. Текст, расположенный между тегами <a> и </a>,
по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано
создание нескольких ссылок на разные веб-страницы.
Пример 8.1. Добавление ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Ссылки на странице</title> </head> <body> <p><a href="dog.html">Собаки</a></p> <p><a href="cat.html">Кошки</a></p> </body> </html>
В данном примере создаются две ссылки с разными текстами. При щелчке по тексту «Собаки» в
окне браузера откроется документ dog.html, а при щелчке на «Кошки» —
файл cat.html.
Результат примера показан на рис. 8.1. Обратите внимание, что при наведении
курсора мыши на ссылку, в строке состояния браузера отображается полный путь
к ссылаемому файлу.
Рис. 8.1. Вид ссылок на странице
Если указана ссылка на файл, которого не существует, например, его имя в атрибуте
href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок
следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение.
Так, при щелчке по ссылке из примера 8.1 в браузере Safari откроется не сам документ, а
окно с предупреждением (рис. 8.2).
Рис. 8.2. Результат при открытии битой ссылки
Естественно, подобное сообщение будет различаться в браузерах, но смысл остается
один — документ, на который ведет ссылка, не может быть открыт. Чтобы
не возникало подобных ошибок, тестируйте все ссылки на их работоспособность
и сразу же устраняйте имеющиеся погрешности.
Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер
знает тип документа. Но поскольку ссылку можно сделать на файл любого типа,
то браузер не всегда может отобразить документ. При этом выводится сообщение,
как следует обработать файл — открыть его или сохранить в указанную папку. Например, в браузере Firefox выводится следующее окно
(рис. 8.3).
Рис. 8.3. Окно для выбора действия с файлом в Firefox
ссылки
HTML по теме
- Тег <a>
Статьи по теме
- Можно ли оборачивать ссылкой блок?
- Ссылки
Абсолютные и относительные ссылки | htmlbook.ru
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса
должны начинаться с указания протокола (обычно http://) и содержать имя сайта.
Относительные ссылки ведут отсчет от корня сайта или текущего документа.
В примере 8.2 показано создание абсолютной ссылки на другой сайт.
Пример 8.2. Использование абсолютных ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Абсолютный адрес</title> </head> <body> <p><a href="http://htmlbook. ru">Изучение HTML</a></p> </body> </html>
В данном примере ссылка вида <a href=»http://htmlbook.ru»>Изучение
HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.
При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/),
отображается индексный файл. Это файл, который загружается по умолчанию
при обращении к каталогу без явного указания имени файла. Обычно в качестве
индексного файла выступает документ с именем index.html.
Абсолютные ссылки обычно применяются для указания документа на другом сетевом
ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта.
Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные
и громоздкие. Поэтому внутри сайта преимущественно используются относительные
ссылки.
Ссылки относительно текущего документа
При создании относительных ссылок надо понимать, какое значение для атрибута
href следует указывать, поскольку оно зависит от исходного расположения файлов.
Рассмотрим несколько типичных вариантов.
1. Файлы располагаются в одной папке (рис. 8.4).
Рис. 8.4
Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае
код будет следующий.
<a href="Ссылаемый документ.html">Ссылка</a>
Подобное имя файла взято только для образца, на сайте в именах файлов не следует
использовать русские символы с пробелами, да еще и в разном регистре.
2. Файлы размещаются в разных папках (рис. 8.5).
Рис. 8.5
Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта,
то перед именем файла в адресе ссылки следует поставить две точки и слэш (/),
как показано ниже.
<a href="../Ссылаемый документ.html">Ссылка</a>
Две точки в данном случае означают выйти из текущей папки на уровень выше.
3. Файлы размещаются в разных папках (рис. 8.6).
Рис. 8.6
Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на
документ в корне сайта, требуется повторить написание предыдущего примера два
раза.
<a href="../../Ссылаемый документ.html">Ссылка</a>
Аналогично обстоит дело с любым числом вложенных папок.
4. Файлы размещаются в разных папках (рис. 8.7).
Рис. 8.7
Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл,
на который необходимо сделать ссылку — в папке. В этом случае путь к файлу
будет следующий.
<a href="Папка/Ссылаемый документ.html">Ссылка</a>
Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет.
Если файл находится внутри не одной, а двух папок, то путь к нему записывается
так.
<a href="Папка 1/Папка 2/Ссылаемый документ.html">Ссылка</a>
Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он выглядит
как «/Папка/Имя файла» со слэшем вначале. Так, запись <a href=»/course/»>Курсы</a> означает,
что ссылка ведет в папку с именем course, которая располагается в корне сайта,
а в ней необходимо загрузить индексный файл.
Учтите, что такая форма записи не работает на локальном компьютере, а только
под управлением веб-сервера.
ссылки
HTML-ссылки Гиперссылки
❮ Предыдущая
Далее ❯
Ссылки есть почти на всех веб-страницах. Ссылки позволяют пользователям переходить со страницы на страницу.
HTML-ссылки — гиперссылки
HTML-ссылки — это гиперссылки.
Вы можете щелкнуть ссылку и перейти к другому документу.
При наведении курсора мыши на ссылку стрелка мыши превращается в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением
или любой другой элемент HTML!
HTML-ссылки — синтаксис
Тег HTML
определяет гиперссылку.
Он имеет следующий синтаксис:
Текст ссылки — это та часть, которая будет видна читателю.
Щелчок по тексту ссылки перенаправит читателя на указанный URL-адрес.
Пример
В этом примере показано, как создать ссылку на W3Schools.com:
Попробуйте. О себе »
По умолчанию во всех браузерах ссылки отображаются следующим образом:
- Непосещенная ссылка подчеркнута и окрашена в синий цвет
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута и окрашена в красный цвет
Совет: Ссылки, конечно, могут быть оформлены с помощью CSS, чтобы получить
другой взгляд!
HTML-ссылки — целевой атрибут
По умолчанию связанная страница будет отображаться в текущем окне браузера.
Чтобы изменить это, вы должны указать другую цель для ссылки.
Атрибут target
указывает, где открыть связанный документ.
Атрибут target
может иметь одно из следующих значений:
-
_self
— по умолчанию. Открывает документ в
то же самое окно/вкладка, на которое было нажато -
_blank
— Открывает документ в новом окне или вкладке -
_parent
— Открывает документ в родительском фрейме -
_top
— Открывает документ в полном теле окна
Пример
Используйте target=»_blank», чтобы открыть связанный документ в новом окне или вкладке браузера:
Попробуйте сами »
Абсолютные URL-адреса и относительные URL-адреса
В обоих приведенных выше примерах используется абсолютный URL-адрес (полный веб-адрес)
в атрибуте href
.
Локальная ссылка (ссылка на страницу в пределах того же веб-сайта) указывается с
относительный URL (без
часть «https://www»):
Пример
Абсолютные URL-адреса
Относительный
URL-адреса
Попробуйте сами »
HTML-ссылки — использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто вставьте
внутри тега
:
Пример
Попробуйте сами »
Ссылка на адрес электронной почты
Используйте
внутри
mailto:
для создания ссылки, открывающей программу электронной почты пользователя (для
href
пусть отправят новое письмо):
Пример
Попробуйте сами »
Кнопка в качестве ссылки
Использовать кнопку HTML в качестве ссылки, вам нужно добавить код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, например при нажатии кнопки:
Пример
Попробуйте сами »
Совет: Узнайте больше о JavaScript в нашем учебном пособии по JavaScript.
Заголовки ссылок
Атрибут title
указывает дополнительную информацию об элементе.
Информация чаще всего отображается в виде всплывающей подсказки при наведении мыши на элемент.
Пример
Попробуйте сами »
Подробнее об абсолютных и относительных URL-адресах
Пример
Используйте полный URL-адрес для ссылки на веб-страницу:
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в папке html на текущем веб-сайте:
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
Попробуйте сами »
Подробнее о путях к файлам можно прочитать в главе HTML
Пути к файлам.
Резюме главы
- Используйте элемент
- Используйте атрибут
href
для определения адреса ссылки - Используйте атрибут
target
, чтобы определить, где открыть связанный документ - Использовать элемент
использовать изображение в качестве ссылки - Используйте
схема внутри
mailto:
для создания ссылки, открывающей программу электронной почты пользователя
атрибут href
Теги ссылок HTML
Тег | Описание |
---|---|
Определяет гиперссылку |
Полный список всех доступных HTML-тегов см. в нашем справочнике по HTML-тегам.
❮ Предыдущий
Следующая ❯
Цвета ссылок HTML
❮ Предыдущая
Далее ❯
HTML-ссылка отображается другим цветом в зависимости от
был ли он посещен, не посещен или активен.
Цвета ссылок HTML
По умолчанию ссылка выглядит так (во всех браузерах):
- Непосещенная ссылка подчеркнута и окрашена в синий цвет
- Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
- Активная ссылка подчеркнута и окрашена в красный цвет
Вы можете изменить цвета состояния ссылки с помощью CSS:
Пример
Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка
будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута.
Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой:
<стиль>
a:link {
цвет: зеленый;
цвет фона: прозрачный;
украшение текста: нет;
}
a: посещено {
цвет: розовый;
background-color: прозрачный;
текстовое оформление: нет;
}
a:hover {
цвет: красный;
background-color: прозрачный;
text-decoration: подчеркивание;
}
a:active {
цвет: желтый;
background-color: прозрачный;
оформление текста: подчеркивание;
}
стиль>
Попробуйте сами »
Кнопки ссылок
Ссылку также можно оформить как кнопку с помощью CSS:
Это ссылка
Пример