Розробка документів складної структури з використанням
Засобів гіпертекстової розмітки документів
Найбільш розповсюдженими структурованими документами ймовірно є гіпертекстові документи.
Гіпертекст – це така форма організації тексту, при якій його одиниці представлені не в лінійній послідовності, а як система явно вказаних можливих переходів, зв'язків між ними. Слідуючи цим зв'язкам, можна читати матеріал в будь-якому порядку, утворюючи різні лінійні тексти. Найпростіший приклад гіпертексту "доінтернетовської епохи" – це будь-який словник чи енциклопедія, де кожна стаття має посилання до інших статей цього ж словника. У результаті читати такий текст можна по-різному: від однієї статті до іншої, у міру потреби, ігноруючи гіпертекстові посилання; читати статті одну за одною, справляючись із відсиланнями; переходити від одного відсилання до іншого і тощо.
Загальновідомим і яскраво вираженим прикладом сучасного гіпертексту служать веб-сторінки, підготовлені за допомогою HTML і розміщені у Web-мережі. Відповідно, в комп'ютерній термінології під гіпертекстом розуміється текст, сформований за допомогою мови розмітки,який потенційно містить у собі гіперпосилання. Гіперпосилання дозволяють переходити від вихідного (одного) тексту до безлічі інших текстів, розміщених у web-мережі [].
Під розміткою гіпертексту розуміється виділення структурних одиниць тексту та встановлення між ними логічних зв'язків (гіперпосилань).
Розглянемо найбільш популярну мову розмітки гіпертексту – HTML.
HTML (англ. HyperText Markup Language – Мова розмітки гіпертексту) – стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Документ HTML оброблюється браузером та відтворюється на екрані у звичному для людини вигляді.
HTML є похідною мовою від SGML, успадкувавши від неї визначення типу документу та ідеологію структурної розмітки тексту.
HTML разом із CSS та cкриптингом – це три основні технології побудови веб-сторінок.
CSS (англ. Cascading Style Sheets – каскадні таблиці стилів) – формальна мова опису зовнішнього вигляду документа, що створений з використанням мови розмітки.
HTML впроваджує засоби для:
створення структурованого документу шляхом позначення структурного складу тексту: заголовки, абзаци, списки, таблиці, цитати та інше;
отримання інформації із Всесвітньої мережі через гіперпосилання;
створення інтерактивних форм;
включення зображень, звуку, відео, та інших об'єктів до тексту.
Загальна структура
Документ HTML складається з трьох частин:
Декларація типу документа (Document type declaration – Doctype), на самому початку документа, в якій визначається тип документа (DTD).
Шапка документа (знаходиться в межах елементу head), в якій записано загальні технічні відомості або додаткова інформація про документ, яка не відтворюється безпосередньо в браузері. Обов‘язковим дочірнім для елемента head є елемент title, який визначає заголовок веб-сторінки.
Тіло документа (може знаходитися в елементах body або frameset), в якому міститься основна інформація документа.
На рис. 12.4 наведено приклад загальної структури HTML документа:
Рис. 12.4. Загальної структури HTML документа
Елементи
Елементи являють собою базові компоненти розмітки HTML. Кожен елемент має дві основні властивості: атрибути та зміст (контент). Існують певні вимоги щодо кожного атрибута та контента елемента, які треба виконувати задля того, щоб HTML-документ був визнаний таким, що відповідає стандарту мови розмітки гіпертексту.
У елемента є початковий тег, який має вигляд <element-name>, та кінцевий тег, який має вигляд </element-name>. Атрибути елемента записуються в початковому тегу одразу після назви елемента, контент елемента записується між його двома тегами.
Наприклад: <element-name element-attribute="attribute-value">контент елемента</element-name>.
Деякі елементи, наприклад br, не містять контенту, тож і не мають кінцевого тега. Нижче зазначені деякі типи елементів розмітки HTML.
Елементи структурної розмітки застосовуються для опису семантики тексту, іншими словами ці елементи описують призначення тексту свого контенту. Вони не зазначають ніякого спеціального (візуального) відтворення тексту, проте більшість браузерів мають стандартні стилі форматування для кожного елемента. Для подальшого стилізування тексту рекомендується використовувати каскадні таблиці стилів (CSS), а не елементи структурної розмітки, котрі вважаються застарілими.
Для створення гіперпосилань використовується тег <a> з атрибутом href, у якому вказується адреса (URL) ресурсу на який встановлюється посилання (наприклад, <a href=" http://www.hneu.edu.ua/ ">Офіційний сайт ХНЕУ</a>).
Для створення гіпертекстових документів існує дуже багато програмних засобів. Із професійних засобів можна виділити найбільш популярні: MS Visual Studio, Zend Studio, NetBeans, Adobe DreamWeaver, JetBrains WebStorm та ін.
Але якщо потрібно швидко створити гіпертекстовий документ для цього достатньо використати пакет MS Office. Практично кожна програма цього пакету дозволяє зберегти документ свого формату в гіпертекстовий документ (формату HTML). Для цього потрібно в меню Файл обрати пункт Сохранить как та у списку Тип файла обрати Веб-страница. Але у цьому випадку програми пакету MS Office додають у HTML-файл дуже багато непотрібного коду (HTML та CSS). Тому для більш "чистого" HTML-документа потрібно обрати Тип файла – Веб-страница с фильтром.
Крім того у діалоговому вікні Сохранение документа можна встановити параметри веб-документа (див. рис. 12.5).
а)
б)
Рис. 12.5. Встановлення параметрів збереження веб-документа
Після збереження документа у даному форматі створюється відповідний файл із розширенням *.htm та каталог з мультимедійними ресурсами (зображення, анімація, звук, відео), які підключено до цього HTML-документа. Цей файл можна відкривати у веб-оглядачі або розміщувати на веб-сайті.