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

Сказание о гипертекстах

Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты. Но это просто тексты.

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

HTML-документ — это гипертекст.

• Первый этюд к гипертексту

  Некоторое нарушение линейности обычной книги вносят сноски, ссылки на другие страницы и ссылки на другую литературу.

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

• Второй этюд к гипертексту

  Из массы текстовой продукции выделяются словари, справочники, энциклопедии. Физически текст устроен в них линейно: за десятой страницей обязательно следует одиннадцатая, а за сотой — сто первая. Однако предполагается, что читатель обращается к такой книге для справки, а не читает её всю подряд, от корки до корки.

  Для упрощения навигации в таких книгах разделы упорядочиваются в алфавитном порядке и имеют развитую систему перекрёстных ссылок.
  
   

• Третий этюд к гипертексту

  В век бурных компьютерных технологий как-то не хочется вручную копаться в большом словаре. Почему бы не поручить эту рутину “твёрдому” другу с “мягкой” душой? Вгоним словарь в компьютер и настроим “душу”. Щёлкнул мышкой на нужном слове — получил результат: соответствующий раздел на экране.
  
   

• Последний этюд к гипертексту

  Возможности компьютера порождают принципиально новую идею: почему бы изначально не проектировать текст в расчёте на возможность чтения не по порядку, а по контексту? Такой подход позволяет разным пользователям просматривать текст, ориентируясь на свои вкусы, уровень владения темой и поставленные задачи.

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

  Для навигации по такой сети предусматривается простой способ: те фрагменты документа, которые содержат переходы на другие его части, каким-то образом выделены. Простое интерфейсное действие на такой ссылке (нажатие клавиши Enter или мышиный щелчок) “перебрасывают” пользователя в другой информационный блок. Посмотрел и вернулся обратно или, не возвращаясь, продолжил путешествие по новой ссылке.

Гипертексты и браузеры

Читая эту книгу, вы, конечно, уже достаточно много поработали со ссылками и понимаете, что это такое на практике.

Вы поняли, что:

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

Если ссылки образуют вложенную цепочку, то кнопки Назад (Back) и Вперёд (Forward) можно использовать для движения по пройденному ссылочному пути в обе стороны. Они работают как традиционные операции “откатка” и “накатка” в большинстве прикладных программ.

В нижеприведенном примере используется цепочка вложенных ссылок. Совершите небольшое путешествие. Сначала, щёлкая ссылки, доберитесь до текста, в котором ссылок уже нет. Затем, пользуясь навигационными кнопками браузера, “прогуляйтесь” по пройденному пути назад.

Пример Цепочка вложенных ссылок

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

Пример Ссылка внутри документа

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

Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name — приемником.

  ...
<A href=#метка>текст</A>
  ...
  ...
<A name=метка></A>
  ...

Задание перехода по метке
На экран выводится ссылка: текст

Метка. Сюда браузер приходит по ссылке.
На экране ничего не отображается.

Для организации перехода внутри документа нужно:

1. Выбрать имя для метки.
   • Имя должно быть уникальным в HTML-программе. Это означает, что других меток с таким именем в программе быть не должно.
     А что будет, если не послушаться этого совета?
     Когда одинаковых меток несколько, браузер выполняет переход на самую первую метку в программе.
   • Имя может заключаться в кавычки.
   • Имя может состоять из любых символов. В том случае, когда имя содержит пробелы или ключевые символы HTML, кавычки обязательны.
   
    
2. Запрограммировать переход по метке.
   В месте перехода нужно написать команду <A href=#метка>текст</A>.
   Здесь:
   • # — ключевой символ;
   • метка — выбранное имя для метки;
   • текст — запись, которая будет выглядеть на экране браузера как ссылка.
   
    
3. Установить тег с меткой в нужном месте HTML-программы.
   Перед фрагментом HTML-программы, на который должен выполниться переход записать команду-метку <A name=метка></A>.
   При этом:
   • имя метки должно быть то же самое, что и в команде, задающей переход;
   • на экране тег-метка <A name=метка> никаких изображений не строит.

Пример

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

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

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

Выполнить файл “имя_файла”.
На экран выводится ссылка: текст

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

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

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

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

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

Первый HTML-файл
...
<A href=имя_файла#метка>текст</A>
...



Второй HTML-файл
...
<A name=метка></A>
...

Приступить к показу фрагмента
с меткой "метка" в файле
"имя_файла". На экран выводится
ссылка: текст.


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

Документ
Программа, на которую настроена ссылка в документе (файл 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 в соответствии с принадлежностью к той или иной главе документа.

Как можно сослаться из файла 00.htm на файл 02.htm?

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

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

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

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

Замечание

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

>Назад<<