Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 10


Самоучитель по HTML и CSS

8. Ссылки

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на 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=windows-1251">
<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

Рис. 8.1. Вид ссылок на странице

Если указана ссылка на файл, которого не существует, например, его имя в параметре href набрано с ошибкой, то такая ссылка называется битая. Битых ссылок следует категорически избегать, поскольку они вводят посетителей сайта в заблуждение. Так, при щелчке по ссылке из листинга 8.1 откроется не сам документ, а окно с предупреждением (рис. 8.2).

Рис. 8.2

Рис. 8.2. Результат при открытии битой ссылки

Естественно, подобное сообщение будет различаться в браузерах, но смысл остается один — документ, на который ведет ссылка, не может быть открыт. Чтобы не возникало подобных ошибок, тестируйте все ссылки на их работоспособность и сразу же устраняйте имеющиеся погрешности.

Файл по ссылке открывается в окне браузера только в тех случаях, когда браузер знает тип документа. Но поскольку ссылку можно сделать на файл любого типа, то браузер не всегда может отобразить документ. При этом выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку (рис. 8.3).

Рис. 8.3

Рис. 8.3. Окно для выбора действия с файлом

Абсолютные и относительные ссылки

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно 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=windows-1251">
<title>Абсолютный адрес</title>
</head>
<body>
<a href="http://htmlbook.ru">Изучение HTML</a>
</body>
</html>

В данном примере ссылка вида <a href="http://htmlbook.ru">Изучение HTML</a> является абсолютной и ведет на главную страницу сайта htmlbook.ru.

Замечание

При указании в качестве ссылки каталога сайта (например, http://htmlbook.ru/css/), отображается индексный файл. Это файл, который загружается по умолчанию при обращении к каталогу без явного указания имени файла. Обычно в качестве индексного файла выступает документ с именем index.html.

Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.

Ссылки относительно текущего документа

При создании относительных ссылок надо понимать, какое значение для параметра href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке (рис. 8.4).

Рис. 8.4

Рис. 8.4

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

<a href="Ссылаемый документ.html">Ссылка</a>

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

2. Файлы размещаются в разных папках (рис. 8.5).

Рис. 8.5

Рис. 8.5

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

<a href="../Ссылаемый документ.html">Ссылка</a>

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках (рис. 8.6).

Рис. 8.6

Рис. 8.6

Теперь исходный файл находится в двух вложенных папках, и чтобы сослаться на документ в корне сайта, требуется повторить написание предыдущего примера два раза.

<a href="../../Ссылаемый документ.html">Ссылка</a>

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках (рис. 8.7).

Рис. 8.7

Рис. 8.7

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку — в папке. В этом случае путь к файлу будет следующий.

<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Заметьте, что никаких дополнительных точек и слэшей перед именем папки нет. Если файл находится внутри не одной, а двух папок, то путь к нему записывается так.

<a href="Папка 1/Папка 2/Ссылаемый документ.html">Сылка</a>

Ссылки относительно корня сайта

Иногда можно встретить путь к файлу относительно корня сайта, он выглядит как "/Папка/Имя файла" со слэшем вначале. Так, запись <a href="/course/">Курсы</a> означает, что ссылка ведет в папку с именем course, которая располагается в корне сайта, а в ней необходимо загрузить индексный файл.

Учтите, что такая форма записи не работает на локальном компьютере, а только под управлением веб-сервера.

Рецепты CSS

Как сделать, чтобы колонки, созданные с помощью параметра float, не меняли своего исходного положения при изменении размеров окна браузера?

Существует несколько способов создания двух и более колонок при верстке слоями. Один из самых простых и применяемых методов основан на использовании стилевого атрибута float. При этом каждому слою в стилях надо задать float: left и ширину через параметр width. Но есть следующая проблема. Если ширина окна браузера больше суммарной ширины слоев, то все отображается замечательно (рис. 1).

Рис. 1

Рис. 1. Вид колонок, созданных с помощью параметра float

Но стоит уменьшить окно до определенного размера, как слои «рассыпаются» и располагаются друг под другом (рис. 2). Естественно, подобная неприятность обычно возникает в случае, когда ширина слоев задана в пикселах, а не в процентах.

Рис. 2

Рис. 2. Вид слоев при уменьшении размеров окна браузера

Решение заключается в создании контейнера, в который помещаются слои-колонки, и установке для него свойства min-width. Этот стилевой параметр определяет минимальную ширину блока, при этом браузер содержимое такого блока воспринимает целиком и никак не переносит. В примере 1 показано, как создать две колонки с учетом min-width.

Пример 1. Использование параметра min-width

<!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=windows-1251">
<title>Колонки без переносов</title>
<style type="text/css">
#container {
 min-width: 420px; /* Минимальная ширина контейнера */
}
#col1 {
 background-color: #fc0; /* Цвет фона колонки */
 padding: 5px; /* Поля вокруг текста */
 float: left; /* Обтекание по правому краю */
 width: 150px; /* Ширина левой колонки */
}
#col2 {
 background-color: #c0c0c0; /* Цвет фона колонки */
 padding: 5px; /* Поля вокруг текста */
 width: 250px; /* Ширина правой колонки */
 float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div id="container">
 <div id="col1">Колонка 1</div>
 <div id="col2">Колонка 2</div>
</div>
</body>
</html>

В данном примере ширина левой колонки установлена как 150 пикселов, правой — 250 пикселов. Значение min-width задано как 420 пикселов, оно получилось суммированием ширины колонок плюс значения полей с каждой стороны слоя.

Замечание

Браузер Internet Explorer 6 и ниже не поддерживает свойство min-width. В этом браузере приведенный метод не работает.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное