Урок 4. Гіпертекст

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

Вже досить багато часу витрачено на те, щоб навчитися за допомогою HTML і браузера виводити на екран тексти.

Але це просто тексти. Використовуючи потужний текстовий процесор, такий, як Microsoft Word, зверстати оголошення, лист брошуру і невелику книгу можна набагато швидше, і результат буде кращої якості.

При цьому не треба писати програми, вникати в усі тонкощі численних тегів і їх атрибутів. Працюючи в Word’і, практично не треба думати ні про що, окрім вмісту власного твору.
Різноманітний оформлювальний інструментарій має інтуїтивно-зрозумілий інтерфейс і численну бібліотеку шрифтів, ліній, значків, рамочок, орнаментів, фігур, картинок та інших корисних “штучок”, які роблять текст на екрані і папері приємним для ока. За умови, звичайно, що ви не позбавлені смаку і почуття міри.

Так чому ж у всьому світі вибухнув справжній бум HTML-програмування? Збувається мрія А. П. Єршова: програмування стає другою грамотністю, народним захопленням.

Головних причин популярності HTML три. Ось вони в порядку зростання важливості.

1. HTML-програмування дуже просте. У ньому немає традиційних алгоритмічних структур, таких, як розгалуження, цикл, процедура. Воно лінійно в своїй основі.
   (Відступом від цієї тези є посилання. З їх допомогою можна організувати розгалуження й процедурний виклик. Про це буде розказано нижче. Однак, ці засоби занадто примітивні для серйозного зіставлення з аналогічними структурами мов типу Сі або Паскаль.) Багато авторів підручників навіть соромляться називати HTML-тексти програмами. Роботу HTML-проектувальника вони називають розміткою тексту. Насправді, в цій назві укладена методична помилка. Адже вона (назва) передбачає такий порядок роботи:
   • береться звичайний текст
   • і розмічається, тобто, на нього накладається сітка з тегів так, щоб браузер зміг показати рядки тексту на екрані.

   Однак, хороші гіпертекстові документи при такому підході отримати набагато складніше, ніж у випадку коли, структура HTML-документа планується ще до написання текстів. Адже гіпертекст влаштований принципово інакше (див. третю причину).

2. Переносимість.Якщо, працюючи в Word’і, ви створюєте документ для власного споживання, у вас немає проблем. Немає проблем і тоді, коли ви посилаєте свою роботу в світ як друковану копію. Якщо ж ваш партнер, видавець або колега просить надіслати електронну версію – починаються проблеми.
   • Для того щоб документ з’явився на екрані у абонента, необхідно, щоб його комп’ютер і операційна система (платформа) дозволяли запустити ваш улюблений редактор.
   • Для того щоб документ завантажився в Word, вкрай бажано збіг версій цього продукту у вас і вашого колеги.
   • Для того щоб текст на екрані не виглядав як старонорвежський манускрипт, необхідно, щоб ваш партнер мав на своєму комп’ютері шрифти, які були використані при створенні вашого тексту.

   Але навіть, якщо всі ці умови виконані, все одно мало шансів на те, що ваш товариш побачить текст не спотвореним (картинки вилазять з рамок, межі сторінок пливуть по тексту, …). Це відбувається тому, що ваш Word і Word вашого партнера налаштовані по-різному.

   Після того, як по телефону (або електронною поштою) редактори будуть налаштовані однаково, текст все одно може виглядати по-різному вже з причин, відомих тільки фірмі Microsoft.

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

   HTML-документ є переносимим продуктом. Це означає, що авторська праця буде легко доступна величезному числу користувачів, незалежно від марки комп’ютера і типу операційної системи.
   Саме ця властивість HTML-документів, а також їх відносно малий розмір, дозволили з успіхом використовувати HTML-технологію для підготовки WWW-сторінок в Інтернеті.

   Переносимість HTML-документа досягається за рахунок того, що пересилається НЕ екранне зображення, а програма. А зображення будує браузер, виконуючи команди цієї програми. Правда, і тут не все гладко. Різні браузери можуть працювати трохи по-різному.

    

3. HTML-документ – це гіпертекст.
   Звичайний текст має лінійну структуру. І хоча користувач може читати будь-які його сторінки і рядки, гортаючи документ на екрані або в паперовій книзі, автор припускає, що текст читається по порядку.
   Спочатку перша сторінка, потім друга і так далі.
   • Перший етюд до гіпертексту
     Деяке порушення лінійності звичайної книги вносять виноски, посилання на інші сторінки та посилання на іншу літературу.Передбачається, що користувач може перервати лінійне читання в місці посилання, подивитися іншу частину тексту, що читається або навіть зовсім інший текст, а потім продовжити читання з місця переривання.
   • Другий етюд до гіпертексту
     З маси лінійної текстової продукції виділяються словники, довідники, енциклопедії. Фізично текст влаштований лінійно: за сторінкою 10 обов’язково слідує сторінка 11, а за сотою – сто перша. Однак, передбачається, що читач звертається до книги для довідки, а не читає її всю підряд від корки до корки.
     Для спрощення навігації користувача в таких книгах передбачаються докладний зміст, алфавітні і тематичні покажчики. Розділи словника або довідника мають систему розвинутих перехресних посилань. (Пам’ятаєте як у Лема:
     СЕПУЛЬКА – предмет для сепулькации, см. сепулькация.
     СЕПУЛЬКАЦИЯ – действие, выполняемое при помощи СЕПУЛЬКИ, см. сепулька.)
   • Третій етюд до гіпертексту
     У століття бурхливих комп’ютерних технологій якось не хочеться вручну копатися у великому словнику. Чому б цю рутину не доручити “залізному” другові з “м’якою” душею? Вганяючи словник в “залізо” і налаштуємо “душу”. Клацнув мишкою по потрібному слову – отримав результат: потрібний розділ книги на екрані.
   • Останній етюд до гіпертексту
     Можливості комп’ютера народжують принципово нову ідею: чому б спочатку не проектувати текст у розрахунку на можливість читання не по-порядку, а по контексту. Такий підхід дозволяє різним користувачам переглядати текст орієнтуючись, на свої смаки, рівень володіння темою і поставлені завдання.

     Структура комп’ютерної книги стає істотно нелінійної, вона навіть перестає бути ієрархічною, а швидше нагадує поплутану риболовну мережу або порцію спагеті, перекинуту на підлогу.

     Для навігації по такій мережі передбачається простий спосіб: ті фрагменти документа, які мають переходи на інші його частини, якимось чином виділені. Просту інтерфейсну дію на такому посиланню (натискання на 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>
  ...

Виконати файл "ім'я_файлу".
На екран виводиться посилання: текст
При клацанні користувача на посиланні
браузер будує на екрані документ
за програмою, заданою в файлі
"ім'я_файлу".

Документ. Програма (файл doc1.htm)
Програма, на яку налаштоване посилання в документі (файл doc2.htm)

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

Ми навчилися вирішувати такі завдання:

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

Ці два методи можна об’єднати і передати управління з одного документа до мітці всередині іншого.

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



Другий HTML-файл
     ...
  <A name=мітка>
    ...

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

При клацанні користувача по посиланню 
браузер будує на екрані документ
за програмою, заданою в файлі
"ім'я_файла", починаючи з фрагмента
з міткою "мітка"

Документ. Програма (файл doc3.htm)
Програма, на яку налаштоване посилання в документі (файл doc4.htm)

Імена файлів і посилання на них

Імена файлів з HTML-програмами мають розширення htm або html.

Без необхідності позначення html краще не використовувати, оскільки не всі операційні системи розуміють 4 символу в розширенні імені файлу.

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

Якщо, наприклад, ваш багатофайловий гіпертекст має ієрархічну структуру, намагайтеся в позначеннях враховувати ієрархію. Так, основний файл зі змістом можна назвати 00.htm. Файл з першою главою – 01.htm і так далі (бути може до 99.htm). Коли глави мають файли-параграфи, їх імена виходять з імені глави додаванням двозначного номера параграфа. Так само роблять і з файлами-пунктами параграфа.

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

Якщо в тезі <A> вказано ім’я файлу, браузер шукає файл у тому ж каталозі, в якому розташований файл з посиланням. Коли необхідно посилатися на файл з іншого каталогу можна

• вказувати в посиланні повний шлях до файлу, починаючи з імені дисковода;
• вказувати в посиланні шлях по відношенню до файлу з посиланням.

Другий спосіб набагато краще, так як при правильному використанні дозволяє переносити ваш багатофайловий гіпертекст з одного каталогу в інший і з одного комп’ютера на інший без додаткових налаштувань.

Нехай, наприклад, ваш гіпертекст розташований в каталозі BOOK кореневого каталогу диска C. У самому каталозі BOOK розташований файл зі змістом 00.htm. Решта файли поміщені в підкаталоги 01, 02, 03, 04 відповідно до приналежності до тієї чи іншої голови документа.

Як можна послатися з файлу 00.htm на файл 02.htm?

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

Перший спосіб призводить до непереносимості вашого продукту. Варто вам перезаписати, наприклад, каталог BOOK на диск D, як посилання перестають працювати.
Другий запис пропонує браузеру орієнтуватися на поточний каталог – про це говорить вказівка “./”.
Можна переміщувати каталог BOOK в будь-яке місце і навіть перейменовувати його – посилання працювати будуть.
Відносне посилання з файлу 02.htm в файл 00.htm запишеться так: ../00.htm. Символи “../” вказують на батьківський каталог.

Зауваження. При запису шляху до файлу використовуйте косу риску з нахилом вправо, а не вліво, як прийнято в DOS, навіть якщо ваш браузер знаходить посилання і з лівонахиленою рисою.
Нахил риси стає суттєвим при розміщенні гіпертексту на сервері для доступу до нього з Інтернету. Сервери, як правило, працюють під операційною системою UNIX, а в ній рисочки – правонаклонні.

Натисніть кнопку “Скидання”, потім виберіть вірні відповіді на запитання.

1. Створіть довідник у вигляді одного HTML-файлу. Документ повинен починатися зі змісту, що містить посилання. Далі повинна розташовуватися довідкова інформація з мітками.
2. Створіть гру в загадки у вигляді багатоофайлового HTML-документа. Основний файл повинен містити загадки, допоміжні – розгадки.