Ссылки | 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

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

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

Вы можете изменить цвета состояния ссылки с помощью CSS:

Пример

Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она станет красной и подчеркнутой:

<стиль>
a:link {
  цвет: зеленый;
  background-color: прозрачный;

  украшение текста: нет;
}

a:посетили {
 цвет: розовый;
  background-color: прозрачный;
текстовое оформление: нет;
}

a:hover {
 цвет: красный;
  background-color: прозрачный;
  text-decoration: подчеркивание;
}

a:active {
  цвет: желтый;
  background-color: прозрачный;
оформление текста: подчеркивание;
}

Попробуйте сами »

Кнопки ссылок

Ссылку также можно оформить как кнопку с помощью CSS:

Это ссылка

Пример