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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рассмотрим пример с двумя документами.

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

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

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

Мы научились решать такие задачи:

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

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

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

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

Документ 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.htm в файл index.htm запишется так (символы ../ указывают на родительский каталог):

../index.htm

При записи пути к файлу используйте косую черту с наклоном вправо (слэш), а не влево, как принято в DOS и WINDOWS, даже если ваш браузер находит такие ссылки, где косая черта наклонена влево (обратный слэш). Наклон черты становится существенным, когда гипертекст размещают на сервере. Серверы, как правило, работают под управлением операционной системы UNIX, а в ней чёрточки, обозначающие вложенность каталогов, наклонены вправо.

Кроме того, на серверах под UNIX (или Linux) регистр букв в именах файлов (и каталогов) имеет значение. Чтобы не было лишних проблем, записывайте все имена в одном (например, нижнем) регистре.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Гиперссылки — это особый элемент гипертекстового жанра. Гиперссылок как интерактивных элементов нет ни в книге, ни в газете. Традиционно гиперссылки выделяются цветом и подчёркиванием.

В силу этого старайтесь следовать таким правилам.

• Не подчёркивайте другие элементы на экране. Пользователь попытается выполнить щелчок на подчёркнутом тексте и огорчится, что ничего не произошло.
• По той же причине, старайтесь не выделять текстовые элементы тем же цветом, что и ссылки. Вообще, избегайте выделения цветом. На странице и так есть цветные пятна — ссылки. Дополнительные цветные вкрапления приведут к пестроте. Выделять можно, используя жирность или курсив (но желательно не одновременно). Заголовки выделяют с помощью специальных элементов Hn (жирность и размер).
• Не помечайте как ссылку слишком длинный текст. Ведь известно, что выделить много, — значит, не выделить ничего. Например, не надо делать ссылкой целую фразу “Посмотрите, как выглядит этот рисунок”. Лучше сделать ссылкой только одно ключевое слово этой фразы — “Посмотрите, как выглядит этот рисунок”.
• Не выделяйте текст ссылки дополнительно (курсивом, размером, жирностью). Одного выделения уже достаточно, а ссылка имеет их целых два — цвет и подчёркивание (ужасная ССЫЛКА).
• Не располагайте несколько ссылок слишком близко друг к другу. Пользователь может подумать, что видит одну большую ссылку (сколько здесь ссылок?).

Дизайн ссылок на 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-код ссылку:

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

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

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

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

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

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

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

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

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

После названия протокола mailto идёт просто двоеточие, а не двоеточие с двумя косыми чертами, как обычно. Зачем такое разнообразие в одном месте? Может быть, так сделано потому, что слово mailto на самом деле не обозначает реальный протокол передачи писем, а является просто условным обозначением на уровне HTML? Если всё же написать

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

письмо будет отправлено по адресу:

//kurs@robotland.pereslavl.ru.