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


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

Добрый день.

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

1. Выравнивание текста по ширине
2. Помечает текст как важный
3. <SUP>
4. Наклон

9. Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи параметра name тега <А> (листинг 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Листинг 98.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>
<a name="top"></a>
...
<a href="#top">Наверх</a>
</body>
</html>

Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения параметров name и href совпадали (символ решетки не в счет).

Замечание

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

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в параметре href тега <A> надо указать адрес документа и в конце добавить символ решетки # и имя закладки (листинг 9.2).

Листинг 98.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="text.html#bottom">Перейти к нижней части текста</a>
</body>
</html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Замечание

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

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

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

  1. <a href="http://webreference.ru/link.html#graph">Переход</a>
  2. <a href=" /style.html#top">Переход</a>
  3. <a href="#17" monitor">Переход</a>
  4. <a href="../music/queen.html#A Winter's Tale">Переход</a>
  5. <a href="#images.html">Переход</a>

2. Иван написал ссылку вида <a href="top">Вернуться</a>, чтобы можно было быстро переходить к верхней части текущей страницы. Какой результат будет в браузере при щелчке по этой ссылке?

  1. Браузер перейдет к якорю с именем top.
  2. Появится сообщение об ошибке, т.к. файла top не существует.
  3. Никаких видимых результатов не будет.
  4. Текст не будет выделен как ссылка, поэтому щелчок по тексту ни к чему не приведет.
  5. Откроется файл top.html. 

3. Что помогает делать якорь?

  1. Сокращать объем кода веб-страницы.
  2. Избавиться от лишних ссылок.
  3. Осуществлять переход с одной страницы на другую.
  4. Быстрее загружать веб-документы.
  5. Переходить к определенной закладке внутри страницы.

Задание

Исправьте все ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body>
<P>Эйлер, Леонард (Leonhard Euler, 1707-1783)
<A href="#E6_1" target=b">44</A>,
<A href="#E6_2" target=b">67</A>,
<A href="#E6_3" target=b">73</A>, <SPAN
A name=6_1></A>Леонард Эйлер обратился к своему другу <A name=K13></A>Клеро с просьбой поискать в доме Ферма, не осталось ли где-нибудь клочка бумаги с жизненно важным фрагментом доказательства.
</body>
</html>

Рецепты CSS

Как убрать подчеркивание у ссылок?

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

Чтобы ссылки не подчеркивались, следует для селектора A добавить параметр text-decoration: none.

Пример

<!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">
A {
 text-decoration: none; /* Отменяем подчеркивание у ссылки */
}
</style>
</head>
<body>
 <a href="link.html">Ссылка без подчеркивания</a>
</body>
</html>

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

Рис. 1. Вид ссылки без подчеркивания

Рис. 1. Ссылка на странице, у которой отсутствует подчеркивание



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