Отправляет 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 - 11


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

8. Ссылки (продолжение)

Виды ссылок

Любая ссылка на веб-странице может находиться в одном из следующих состояний.

Непосещенная ссылка. Такое состояние характеризуется для ссылок, которые еще не открывали. По умолчанию непосещенные текстовые ссылки изображаются синего цвета и с подчеркиванием.

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

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

Правила вложений для тега <A>

Любая ссылка является встроенным элементом, поэтому для нее действуют те же правила, что и для встроенных элементов. А именно, нельзя размещать внутри тега <A> блочные элементы, но допустимо делать наоборот, и вкладывать ссылку в блочный контейнер. В листинге 8.3 показано ошибочное и правильное использование тегов.

Листинг 8.3. Вложение тегов

<!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="lion.html"><h1>Охота на льва</h1></a>
<h1><a href="lion.html">Как поймать льва в пустыне</a></h1>
</body>
</html>

В строке 8 данного примера содержится типичная ошибка — тег <H1> располагается внутри контейнера <A>. Поскольку <H1> это блочный элемент, то его недопустимо вкладывать внутрь ссылки. В строке 9 этого же примера показан корректный вариант.

Параметры ссылок

Основной параметр href тега <A> мы уже освоили, рассмотрим еще несколько полезных, но необязательных атрибутов этого тега.

target

По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме (о фреймах разговор еще пойдет далее). При необходимости, это условие может быть изменено параметром target тега <А>. Синтаксис следующий.

<a target="имя окна">...</a>

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

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно (это значение задается по умолчанию).
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

В листинге 8.4 показано, как сделать, чтобы ссылка открывалась в новом окне.

Листинг 8.4. Открытие ссылки в новом окне

<!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="new.html" target="_blank">Открыть в новом окне</a></p>
</body>
</html>

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

title

Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время пропадает. Синтаксис такой.

<a title="текст">...</a>

В качестве аргумента указывается любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки. В листинге 8.5 показано, как использовать параметр title для ссылок.

Листинг 8.5. Создание всплывающей подсказки

<!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="zoo.html" title="Рисунки различных животных и не только...">Рисунки</a></p>
</body>
</html>

Результат данного примера показан на рис. 8.8.

Рис. 8.8

Рис. 8.8. Вид всплывающей подсказки в браузере Opera

Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут, а вот вид и содержимое может незначительно варьироваться в зависимости от браузера. Например, в браузере Opera выводится не только текст подсказки, но и адрес ссылки, а Firefox и Internet Explorer отображают только текст (рис. 8.9).

а Рис. 8.8

б Рис. 8.8

Рис. 8.9. Вид всплывающей подсказки, а — Firefox 1.5, б — Internet Explorer 6

Ссылка на адрес электронной почты

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты (листинг 8.6).

Листинг 8.6. Ссылка на адрес электронной почты

<!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="mailto:ask@htmlbook.ru">Задавайте вопросы по электронной почте</a></p>
</body>
</html>

В параметре href тега <A> вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка ничем не отличается от ссылки на веб-страницу, но при нажатии на нее запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки следует указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведет нажатие на нее.

Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject="тема сообщения", как показано в листинге 8.7.

Листинг 8.7. Задание темы сообщения

<!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="mailto:ask@htmlbook.ru?subject=Вопрос по HTML">Задавайте вопросы по электронной почте</a>
</body>
</html>

При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.

Вопросы для проверки

1. На странице располагаются три текстовые ссылки, две из них синего цвета, а одна фиолетовая. Почему различаются цвета ссылок?

  1. Тег <A> в фиолетовой ссылке содержит ошибочные параметры, поэтому выделяется другим цветом.
  2. Фиолетовая ссылка содержит абсолютный путь к документу, а синие ссылки - локальный.
  3. На фиолетовую ссылку уже щелкали, она стала посещенной, а синие ссылки еще не открывали.
  4. Фиолетовая ссылка является активной, а синие ссылки нет.
  5. Синие ссылки битые, а фиолетовая корректная.

2. Какая ссылка написана с ошибкой?

  1. <a href="ftp://microsoft.com/windows/halyava/dounload/">Скачать<a>
  2. <a href="http://htmlbook.ru/download/?id=100">Справочники<a>
  3. <a href="../../animal/index.html">Животные</a>
  4. <a href="/site/my/html/learn/links/yes/мои файлы.html">Мои файлы<a>
  5. <a href="/">Главная страница </a>

3. Текущий файл располагается в следующей папке относительно корня сайт krsk/peoples/index.html. Вам надо сделать ссылку на файл index.html, расположенный в папке krsk/animal. Какой путь правильный?

  1. ../../krsk/animal/index.html
  2. ../krsk/animal/index.html
  3. ../krsk/peoples/index.html
  4. ../animal/index.html
  5. /animal/index.html

4. Настя захотела сделать ссылку на новое окно, для чего она написала такой код <a target="new">Открыть в новом окне</a>. Антон утверждает, что здесь ошибка, потому что у параметра target нет значения new. Настя говорит, что это не важно, ссылка все равно откроется в новом окне, а Паша заявляет, что ссылка вообще работать не будет. Кто из них прав?

  1. Настя
  2. Антон
  3. Паша
  4. Настя и Антон
  5. Никто

6. Ваня связал между собой ссылками три веб-страницы, записал их на диск и пошел к своему другу Пете показать, что получилось. Но ссылки не открывались, хотя все файлы были в наличии. Какая возможная ошибка произошла?

  1. Перед именем файлов в теге <A> забыли указать слэш (/).
  2. Вместо относительных путей написаны абсолютные.
  3. В настройках браузера не указан прокси-сервер для локальных адресов.
  4. Внутри контейнера <A> располагались блочные элементы.
  5. Расширение html не зарегистрировано на данном компьютере.

Задание

1. Создайте три файла с именами 1.html, 2.html и 3.html, в каждом из них должен быть заголовок вида "Страница 1" и ссылка с текстом "Перейти". Причем ссылки должны быть замкнуты по схеме кольца, т.е. ссылка с документа 1.html должна вести на 2.html, с файла 2.html на 3.html, а файл 3.html опять ссылается на 1.html.

2. Создайте веб-страницу, результат которой показан на рис. 8.10. Адреса ссылок произвольны.

Рис. 8.10

Рис. 8.10

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