02. Кодирование переходов

На этой странице:

• Идентификатор элемента
• Переход внутри одного документа
• Переход к другому документу
• Переход на фрагмент другого документа
• Имена файлов и ссылки на них
• Дизайн ссылок
• На какие ресурсы можно записывать ссылку

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

Идентификатор элемента

Каждый элемент в теле HTML-программы может иметь идентификатор — уникальную метку.

Идентификаторы используется для доступа к элементам HTML из скриптов — программ, написанных, как правило, на языке JavaScript. Эти программы позволяют отслеживать события, происходящие на странице (например, зависание курсора над элементом) и менять свойства элемента (например, менять цвет фона элемента).

Если расположить курсор над этим абзацев, то фон абзаца меняется на жёлтый.

Идентификатор присваивается элементу при помощи атрибута id:

id="идентификатор"

Идентификатор должен начинаться с буквы (стандарт рекомендует латинскую букву) и может продолжаться любым количеством букв, арабских цифр, символов дефиса (“-”), подчёркивания (“_”), двоеточия (“:”) и точки (“.”).

На странице не должно быть двух элементов с одинаковыми идентификаторами.

В коде, показанном ниже, идентификатор задан для каждого абзаца.

<P id="p1">Первый абзац.</P>
<P id="p2">Второй абзац.</P>
<P id="p3">Третий абзац.</P>

Идентификаторы можно использовать для построения стилевых определений. Например, для элемента с идентификатором p2 можно записать стилевое определение в виде:

#p2
{
  border: 1px solid black;
  background: yellow;
  padding:5px;
}

Посмотрите, как работает это определение:

<P id="p1">Первый абзац.</P>
<P id="p2">Второй абзац.</P>
<P id="p3">Третий абзац.</P>

Определение, связанное с идентификатором, похоже на определение класса (вместо точки используется символ рамки “#”, а вместо имени класса — идентификатор), но оно будет работать только для одного элемента страницы.

Переход внутри одного документа

Для кодирования гипертекстовых переходов (гиперссылок) используется элемент A с обязательным закрывающим тегом:

<A href="переход">текст</A>

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

<A href="#имя">текст</A>

<ELEMENT id="имя">
  ...
</ELEMENT>

Когда пользователь щёлкает по ссылке текст, браузер перемещает окно на начало элемента с идентификатором имя:

Пример Код примера

Посмотрите, как работают переходы внутри одного документа, и как они закодированы на странице.

Переход к другому документу

Чтобы браузер загрузил в своё окно новый документ, нужно записать в HTML-коде ссылку при помощи элемента A с атрибутом href="имя_файла".

<A href="имя_файла">текст</A>

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

Пример с двумя документами:

Документ doc1.htm
Код документа doc1.htm
Код документа doc2.htm

На рисунке схематично показана связь ссылки в документе doc1.htm с документом doc2.htm.

Переход на фрагмент другого документа

Мы научились:

• передавать управление в другую часть документа;
• передавать управление в другой документ.

Эти два метода можно объединить и передать управление из одного документа к фрагменту внутри другого.

Чтобы браузер выполнил такой переход, нужно записать ссылку с атрибутом href="имя_файла#имя", отделяя символом рамки имя файла-приёмника от идентификатора элемента.

<A href="имя_файла#имя">текст</A>

<ELEMENT id="имя">
  ...
</ELEMENT>

Пример, иллюстрирующий данный вид ссылки:

Документ doc3.htm
Код документа doc3.htm
Код документа doc4.htm

На рисунке схематично показана связь ссылки в документе doc3.htm с элементом p3 в документе doc4.htm.

Имена файлов и ссылки на них

Имена HTML-файлов имеют расширение htm или html. Без необходимости обозначение html лучше не использовать, т. к. не все операционные системы понимают 4 символа в расширении имени файла.

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

Если ваш многофайловый гипертекст имеет иерархическую структуру, старайтесь в обозначениях учитывать иерархию. Так, основной файл с оглавлением лучше назвать index.htm. Файл с первой главой — 01.htm, со второй — 02.htm и так далее (быть может, и до 99.htm). Если у глав есть параграфы, имя для каждого файла параграфа формируют из имени главы, добавляя к нему двузначный номер параграфа. Так же поступают и с файлами для пунктов параграфа.

Предлагаемая нотация позволяет по имени файла однозначно определить его место в общей структуре многофайлового гипертекстового приложения. Например, файл 0205.htm описывает построение пятого параграфа второй главы, а файл 111299.htm — 99-й пункт 12-го параграфа 11-й главы.

Браузер ищет файл в том же каталоге, что и файл, содержащий ссылку на него. Если надо сослаться на файл из другого каталога, можно:

• указать в ссылке полный путь к файлу, начиная с имени дисковода;
• указать в ссылке путь относительно файла со ссылкой.

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

Пусть, например, гипертекст расположен в каталоге book корневого каталога диска c. В самом каталоге book расположен файл index.htm с оглавлением. Остальные файлы помещены в подкаталоги 01, 02, 03, 04 в соответствии с принадлежностью к той или иной главе документа.

Как сослаться из файла index.htm на файл 02.htm? Для этого есть два способа.

1. "c:/book/02/02.htm" (абсолютная адресация).
2. "./02/02.htm" (относительная адресация).

Первый способ приводит к непереносимости продукта. Стоит перенести каталог book, например, на диск d, как ссылки перестают работать.

Вторая запись предлагает браузеру ориентироваться на текущий каталог — об этом говорит указание ./. Можно переместить каталог book в любое место и даже переименовать его — ссылки будут работать.

Указание ./ можно опускать и записывать ссылку на файл как "02/02.htm".

Относительная ссылка из файла 02.htm в файл index.htm запишется так (символы ../ указывают на родительский каталог):

"../index.htm"

Дизайн ссылок

Задание цвета ссылок в теге BODY

Атрибуты link, alink, vlink элемента BODY задают цвета ссылок на странице.

Смысл атрибутов:

• link — задаёт цвет неотработанных ссылок (пользователь ещё не щёлкал на них);
• alink — задаёт цвет активных ссылок (цвет ссылки во время загрузки документа);
• vlink — задаёт цвет отработанных ссылок (пользователь “ходил” по этим ссылкам).

Если значения атрибутов не заданы, браузер будет использовать значения цветов по умолчанию. Как и в случае с цветами текста и фона, не стоит выпускать из-под контроля эти важные параметры визуального образа страницы.

Рекомендации по выбору цветов для ссылок

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

Посещенные (отработанные) ссылки должны иметь существенно меньшую напряжённость окраски. Они должны сообщать об окончании своей рабочей смены и отдыхать. Не надо по-прежнему фиксировать на них взгляд пользователя.

Цвет ссылки, сразу после щелчка, должен стать ещё более активным, чем цвет неотработанной ссылки: “Внимание! Я (ссылка) приступила к работе. Документ загружается и скоро появится на вашем экране. Потерпите немного!”

В большинстве браузеров цвета ссылок по умолчанию такие:

• синий — цвет неотработанной ссылки;
• красный — цвет активной ссылки;
• пурпурный — цвет отработанной ссылки.

И эти цвета выбраны, конечно, не случайно. Элемент BODY в “чёрном костюме, белой рубашке и строгом галстуке” выглядит так:

<BODY bgcolor="white" text="black" 
      link="blue" alink="red" vlink="purple">

Эта запись эквивалентна следующей:

<BODY bgcolor="#FFFFFF" text="#000000" 
      link="0000FF" alink="FF0000" vlink="#800080">

Дизайн ссылок на CSS

Для управления стилем ссылок CSS предлагает специальные псевдоклассы, представленные в таблице. Предпоследняя колонка содержит атрибуты элемента BODY, которые управляют цветом соответствующих ссылок.

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

Пример, иллюстрирующий рассмотренные псевдоклассы:

Документ
Код документа

Псевдокласс A:hover позволяет задавать стиль ссылки при зависании над ней курсора.

Документ
Код документа

А теперь рассмотрим примеры технических приёмов оформления ссылок.

Приём	Документ	Код документа
Ссылки без подчёркивания
Ссылки разных цветов
Фон ссылки под курсором
Рамка, когда курсор над ссылкой
Ссылка в виде кнопки
Вертикальное меню ссылок
Меню с подсветкой пунктов

На какие ресурсы можно записывать ссылку

До сих пор мы записывали относительные ссылки в пределах одного многостраничного приложения (сайта).

Но при помощи элемента A можно программировать переходы на любые ресурсы, доступные в сети.

Гиперсвязь в HTML-документе представляет собой URL-адрес.

URL-обозначение (Uniform Resource Locator — унифицированный указатель ресурса) — ввёл в 1989 году Тим Бернерс-Ли (Tim Berners-Lee). Согласно предложенной им схеме, сначала записывают условное обозначение протокола, по которому файл доступен в Интернете, потом, через символы “://”, — адрес сервера, на котором расположен файл, затем, через символ “/”, — местоположение файла на сервере:

название протокола://адрес сервера/расположение файла

Пример 1. URL файла в FTP-архиве Роботландии:

ftp://ftp.botik.ru/rented/robot/univer/reclam/reclam.zip

Здесь:

• ftp — название протокола;
• ftp.botik.ru — сервер;
• rented — каталог;
• robot — каталог;
• univer — каталог;
• reclam — каталог;
• reclam.zip — файл.

Пример 2. URL Роботландской HTML-странички “Роботландский университет”:

http://www.botik.ru/~robot/ru/index.htm

Здесь:

• http — название протокола;
• www.botik.ru — сервер;
• ~robot/ru/index.htm — расположение HTML-файла на сервере;

Запись ~robot означает корневой каталог пользователя с именем “robot”. В UNIX-системах web-сервер может поддерживать несколько каталогов, принадлежащих разным пользователям, и вместо того, чтобы набирать полный путь достаточно записать символ “~” и имя пользователя — путь к корневому каталогу этого пользователя сервер подставит автоматически.

Ниже кратко описаны популярные протоколы Сети и приведены примеры ссылок.

FTP — передача файлов

Этот протокол служит для загрузки файла с ftp-сервера. Если поместить в HTML-код ссылку:

<A href="ftp://ftp.botik.ru/rented/robot/univer/reclam/reclam.zip">Демо CD</A> 

то при активизации ссылки (мышином щелчке на ней) на компьютер пользователя будет передан файл reclam.zip с Роботландского FTP-архива.

HTTP — передача гипертекстовых страниц Интернета

Этот протокол служит для просмотра гипертекстовых страничек Интернета. Если поместить в HTML-код ссылку:

<A href="http://www.botik.ru/~robot/index.htm">Роботландия</A> 

то при активизации ссылки в браузер загрузится начальная страница Роботландского сайта index.htm.

На самом деле, эта страничка загрузится и по такой ссылке:

<A href="http://www.botik.ru/~robot/">Роботландия</A> 

но только потому, что Роботландскому серверу дано указание “Если HTML-файл не задан, передай в Сеть файл с именем index.htm”. Каждый конкретный сервер может иметь свои настройки для такого случая, и выдавать в качестве стартового файла, файл с именем default.htm, default.html, main.htm, main.html или с другим.

Mailto — отправка сообщения по электронной почте

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

Пример оформления ссылки для отправки письма в Роботландский университет:

<A href="mailto:kurs@robotland.pereslavl.ru">Письмо в Роботландию</A> 

<A href="mailto://kurs@robotland.pereslavl.ru">Письмо</A>