Тема 2 Структура й елементи гіпертекстових документів

1. Загальна характеристика і структура HTML-документа

2. Тіло документа та оформлення його основних фрагментів

2.1. Тіло документа

2.2. Теги логічного форматування тексту

2.3. Теги фізичного форматування тексту

3. Оформлення списків термінів і визначень

3.1. Марковані списки

3.2. Створення нумерованих списків

3.3. Списки визначень

3.4. Багаторівневі спискові структури

4. Використання графіки при оформленні електронного видання

5. Включення до видання посилань та коментарів

6. Оформлення таблиць

7. Фреймова структура електронного видання

8. HTML-форми

9. Поняття про динамічний HTML і його компоненти

1. Загальна характеристика і структура html-документа

На зорі комп'ютеризації доводилося працювати з простими текстовими редакторами, такими як WordStar, для яких інформація, яка відображається на екрані, відрізнялася від виведеної на папір за допомогою принтера. У текст документа вставлялися спеціальні керуючі символи, які не відображалися на екрані, але забезпечували вивід на друк окремих фрагментів документа в потрібному форматі. При форматуванні одна група символів визначала початок фрагмента, потім ішов текст, якого стосувалося це форматування, а після нього – символи кінця фрагмента. Так задавалися розрядка, курсив, напівжирний шрифт та ін. Аналогічні способи застосовувалися і при роботі з першими версіями СУБД dBase (наприклад, dBase II.

Той же принцип покладено в основу структури HTML-документа, однак керуючі символи, які тут називаються тегами, визначають особливості відображення інформації, виведеної вже не на принтер, а на екран монітора. Значна частина таких тегів використовується парами: спочатку відкриваючий тег, потім об'єкт управління, а в кінці – закриваючий тег. Така конструкція називається контейнером, оскільки об'єкт форматування розташований усередині. Деякі теги принципово не потребують пар. Прикладом може бути тег примусового переведення рядка. Тег може містити деякі параметри (атрибути), які розміщуються безпосередньо після імені тега. Якщо параметрів декілька, то як роздільники використовуються проміжки.

Для перегляду HTML-документів використовують спеціальні програми, які називаються браузерами (Browser, тобто засіб перегляду в дослівному перекладі). Такі програми потребують графічної оболонки. Зокрема, значна кількість браузерів (Microsoft Internet Explorer, Netscape Communicator, Opera і ін) працюють у середовищі Windows 95, 98 і 2000.

Популярність мови HTML росла разом із розвитком мережі Інтернет. Відсутність протягом деякого часу стандартів на мову HTML призвела до того, що деякі браузери належно відображали не всі теги, а у версіях різних фірм одні й ті самі теги могли трактуватися неоднаково або навіть не підтримувалися. Широке використання HTML-документів в мережі Інтернет привело до появи міжнародних стандартів на цю мову, відомих як специфікації мови HTML. Цією роботою зайнялася широко відома організація World Wide Web Consortium (WWWC). Першою зі специфікацій, визнаною більшістю компаній-розробників, стала HTML 2.0, представлена ​​в кінці 1995 р. Незабаром була випущена попередня (робоча) версія специфікації 3.0, а в травні 1996 р. - проект специфікації HTML 3.2. Після тривалого обговорення та виправлення в січні 1997 р. ця специфікація стала офіційною рекомендацією для розробників HTML-документів і браузерів. У грудні 1997 р. офіційною рекомендацією стала специфікація HTML 4.0, яка залишається чинним до теперішнього часу.

Основою специфікації HTML 4.0 стало відділення параметрів опису документів від параметрів подання окремих його фрагментів на екрані монітора. Такий поділ полегшує адаптацію мови до різних платформ передач (Windows, UNIX, DOS і пр.) і спрощує процес внесення змін до документів. Відповідно до такої концепції для опису документа слід використовувати таблицю стилів, причому це поняття схоже з використовуваним в сучасних текстових редакторах, таких як Word 97 або 2000. Використання ж даних про форму представлення документа упереміж із вмістом самого документа не рекомендується.

Специфікація HTML 4.0 скасовує ряд раніше використовувалися тегів. Скасування тегу означає, що цей тег і раніше підтримується браузерами, але його застосування в сучасних документах не рекомендується. Надалі такі теги можуть бути переведені в розряд застарілих, які вже можуть не підтримуватися браузерами. Інформація такого роду може бути отримана на сайті http://www.w3.org/TR/.

Будь HTML-документ укладений в контейнер <HTML> і </ HTML>. Сам документ, як вже говорилося вище, являє собою звичайний текстовий файл. Його можна переглядати в DOS'і за допомогою стандартних редакторів і засобів перегляду текстових документів, при цьому разом з самим текстом ми будемо бачити і теги. Структурно документ розпадається на дві частини: заголовну і основну. Перша частина знаходиться всередині контейнера <HEAD> і </ HEAD>, а основна частина - всередині контейнера <BODY> і </ BODY>.

Єдиний обов'язковий тег, який використовується в заголовній частині, - <ТIТLE>, причому він утворює контейнер, усередині якого розміщується текст заголовка. При завантаженні документа в браузер текст заголовка завантажується в першу чергу у вікно заголовка браузера. Якщо текст заголовка досить інформативний, користувач у процесі пошуку релевантних документів вже на етапі завантаження документа може визначити, чи дійсно йому потрібен цей документ, а якщо не потрібен, то одразу відмовитися від його завантаження і перейти до завантаження наступного. Текст назви використовується і при створенні закладки для даного документа, з цієї точки зору також дуже важлива його інформативність.

Багато HTML-документи пов'язані один з одним, і посилання від одного документа на інші можуть бути абсолютні та відносні, причому останні формуються відносно того каталогу, в якому розташований документ - джерело посилання. Абсолютні посилання довгі, а відносні - перестають працювати при переміщенні основного документа. Можна включати відразу обидва посилання, щоб зв'язки між документами не порушувалися в будь-яких умовах.

Для формування посилань в заголовній частині застосовується тег <ВАSЕ>, в якому використовується один єдиний параметр HREF, як значення якого вказується URL (Universal Resours Locator) - адреса файлу, на який проводиться посилання. Адреса може бути локальною, тобто задавати розміщення файлу в каталогах і підкаталогах на тому ж самому комп'ютері, або мережевою, наприклад <BASE HREF='http:// www.uprint.spb.ru/main.htm'>.

Для організації логічного зв'язку і співпідпорядкованості електронних видань може використовуватися тег <LINK>. У цьому тегові можуть використовуватися чотири параметри: HREF, REL, REV і TYPE. За допомогою першого з них задається URL пов'язаного з даними документа. Параметр REL визначає вид відносини між поточним і пов'язаним з ним документом, a REV-зворотне відношення (між іншим і поточним документами). Останній параметр TYPE задає тип і параметри приєднуваної до документа таблиці стилів. Приклади тегу <LINK>:

<LINK REL='contents' HREF='(адрес)'>

<CLINK HREF='mailto: (адрес автора)' REV='made'>

Іншими значеннями параметра REL можуть бути bookmark, copyright, glossary, help. Значення made параметра REV є ознакою зворотної відносини. Інші його значення: autor, editor, publisher.

Пізніше до складу заголовної частини був доданий спеціальний тег <МЕТА>, за допомогою якого задається метаінформація, пов'язана з даним електронним виданням, або атрибути для прискореного пошуку. Окремі випадки метаінформації - це ім'я автора, видавця, редактора, назва видавництва, час публікації та інші характерні ознаки видання. Тег <МЕТА> має два параметри: NAME, яким задається ім'я атрибута, і CONTENT, що визначає значення цього атрибута. Наприклад:

<Mета NAME = 'author' CONTENT = 'B. А. Вуль '>

<КОШТОРИС NAME = 'description' СОМТЕМТ = 'Електронні видання'>

Отже, всередині контейнера <HEAD> і </ HEAD>, що обмежує заголовну частину HTML-документа, зазвичай використовується один контейнер <TITLE> і </ TITLE>, усередині якого розміщується текст заголовка, і можуть бути включені теги <BASE>, <LINK > і <МЕТА>. Зазначимо, що HTML-документ, який містить лише заголовну частину, буде нормально відображатися браузерами як порожній документ. А нижче показаний відповідає цьому документу HTML-код:

<HTML>

<HEAD> <ТIТLE> Порожній документ </ TITLE> </ HEAD>

<BODY> </ BODY>

</ HTML>