Інформаційні технології та моделювання бізнес-процесів - Томашевський О.М. - 13.2. Принципи побудови Web-сторінок

13.1. World Wide Web та Hyper Text Markup Language

World Wide Web (WWW) - найвідоміший та найпопулярніший сервіс Інтернет. Ця глобальна, розподілена по цілому світі інформаційна гіпертекстова мультимедійна система дозволяє об'єднати в одне ціле інформацію різних видів, яка зберігається на різних комп'ютерах. Інформація в WWW розповсюджується у вигляді web-сторінок (web-документів). Декілька web-сторінок з однієї теми, що належать одному власникові чи є на одному комп'ютері, утворюють web-вузол, який часто називають сайтом.

Основним принципом використання web-сторінок є активізація гіпертекстових посилань, за допомогою яких користувач може здійснити перехід до інших web-сторінок або сайтів. Зазначимо, що префікс "гіпер-" означає "зв' язаний".

В основі WWW лежать два поняття: гіпертекстові посилання та формат документів HTML. Завдяки гіпертексту web-сторінки набувають властивості інтерактивності.

Web-документ зберігається і пересилається як файл з розширенням html або htm (HTML-файл). Це звичайні текстові файли-програми, написані мовою HTML. Відображаються такі файли на екрані інакше, ніж вони виглядають у HTML-файлі.

HTML (Hyper Text Markup Language) - це спеціальна мова форматування текстових електронних документів

Наприклад, для друкованого документа задаються такі параметри, як розмір паперу та полів, шрифти та їх розміри тощо. Електронні web-документи призначені для перегляду на екрані, причому наперед не відомо, на якому комп'ютері - невідомі розміри вікна програми-переглядача, шрифти, які встановлені на комп'ютері, і т. д. Тому мова HTML призначена саме для оформлення електронних документів з врахуванням факту невизначеності параметрів засобів їх перегляду.

Спочатку HTML була лише мовою форматування гіпертекстових документів. Її можливості обмежувались заголовками, абзацами і невеликим набором текстових форматів - таких як Bold та Italic. Стрімкий розвиток HTML почався з 1993 року, коли з'явився перший web-переглядач Mosaic (до того часу гіпертекст можна було переглянути виключно в текстовому редакторі). Пояснимо, чому потрібні переглядачі.

Оскільки HTML - це мова розмітки, то вона не належить до мов програмування високого рівня, тобто HTML-код не компілюється і не виконується, як скажімо, код на C++. Замість того він інтерпретується переглядачем.

HTML разом із протоколом передачі гіпертексту (HTTP - Hypertext Transfer Protocol) дозволяє взаємодію комп'ютерних документів різного типу, а також прискорює обмін інформацією. Широке розповсюдження web-документи одержали завдяки різноманітним можливостям представлення інформації, легкістю написання та сумісністю з різними операційними системами.

13.2. Принципи побудови Web-сторінок

Типовий Web-документ складається з текстових блоків, рисунків, таблиць, ліній, гіперпосилань (hyperlinks). Більш складні Web-документи містять фрейми (вкладені Web-сторінки), елементи керування та вводу інформації (кнопки, перемикачі, поля вводу тексту, тощо), динамічні об'єкти (Java Applet, Java Script, ActiveX).

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

До вузлів будь-якого змісту - чи то інформаційний сайт, чи персональний, чи Інтернет-магазин - висуваються наступні вимоги:

o швидке завантаження сторінок;

o зручність навігації по сайту;

o коректність представлення інформації.

Якщо Web-документ буде містити лише текст, така сторінка швидко завантажиться довільним броузером, проте навряд чи буде цікавою пересічному користувачеві. Тому розробники додають елементи графіки, анімацію, і т.д., балансуючи між прагненням наділити вузол індивідуальним дизайном і не позбавити його інформативності та швидкодії.

Навігація по сайту носить нелінійний характер - якщо, наприклад, вузол має 10 сторінок, перехід з 1-ї на 5-ту здійснюється одразу, і не потребує послідовного переходу через 2-гу, 3-ю та 4-у сторінки. Навігацію необхідно планувати таким чином, щоби вона передбачала можливість доповнення без реконструкції всього сайту. Як правило, використовують навігаційні кнопки або списки (наприклад, як на.life.com.ua, рис.13.1). Окрім переходів між сторінками існують внутрішні і поштові посилання; зв'язувати можна також і зображення (наприклад, мініатюра та велике зображення зв'язуються між собою).

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

Рис.13.1. Приклад оформлення навігації сайту

Поштові посилання (mailto) на сторінці дозволяють написати електронного листа адресату - при переході по mailto відкривається поштова програма, що є частиною броузера (Outlook для IE чи Mail для Mozilla) або інстальована на комп'ютері користувача (наприклад, The Bat!). При створенні поштового посилання користувачеві пропонується ввести слово чи фразу в поле "Subject", визначивши тему листа, що відповідає етичним нормам мережі.

Рис.13.2. Приклад оформлення внутрішніх посилань

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

Основні теги мови HTML. Формування документів мовою HTML подібне до програмування. Вихідний текст документу складається з послідовності команд, які називають тегами (tag) або дескрипторами. Під час перегляду теги виконуються, і завдяки їм на екран виводяться запрограмовані елементи зображення. Наприклад, якщо на початку абзацу стоїть тег <center>, то весь абзац буде вирівняно по центру вікна.

Теги HTML дозволяють вирівнювати рядки документу, керувати кольором фону та кольором тексту, вставляти в текст ілюстрації, задавати заголовки різних рівнів, будувати таблиці, створювати гіпертекстові посилання на інші документи, тощо.

Теги бувають одинарними і парними. Більшість тегів є парними, наприклад, тег обмеження HTML-файлу: <html>...</html>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках, причому той тег, що закриває область дії, має косу риску - слеш (slash). Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <body bgcolor="green"> (колір тла - зелений).

Всі програми, написані мовою HTML (HTML-файли) мають однакову структуру. Можна зекономити час при створенні своїх Web-сторінок, якщо використовувати цю структуру в якості еталону. Зокрема, обов'язково повинні бути три наступні команди (теги):

В наведеному прикладі міститься службова інформація про те, що сторінку створено засобами текстового редактора MS Word з пакету програм MS Office; службові посилання для броузера.

Наведений код описує, що у сторінці міститься український текст.

Тег <title>...</title> не входить в перелік обов'язкових, проте його використання відповідає етичним нормам мережі, оскільки текст, введений між цими тегами, з 'являється в броузері в рядку заголовку.

o <body>...</body>

Визначає вміст web-документу. Може містити атрибути, що описують вигляд документа, наприклад:

У прикладі задаються кольори тексту посилань (простого, активного та відвіданого), колір тексту сторінки і колір фону.

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

Таблиця 13.1. Теги форматування

Детальніше розглянемо синтаксис дескриптора якоря - зв'язування сторінок. Як правило, використовується атрибут href, що визначає гіпертекстове посилання. Після нього вводиться значення, що найчастіше представляє собою URL (Uniform Resource Locator) - універсальний вказівник ресурсів, тобто адресу Web-вузла чи сторінки. Вона складається з префікса (зазвичай, http://), який визначає протокол з'єднання; імені домена (як правило, починається з www) і саме ресурсу - імені файлу.

Якщо шлях до потрібного документу вказується повністю, посилання (лінка) буде абсолютним:

Відносне посилання використовує частину шляху, і не прив'язане до місця розташування файлу:

Приклад поштової лінки:

Вставка зображень відбувається за аналогічною схемою з використанням дескриптора <img>:

На цьому завершуємо ознайомлення із тегами мови HTML та їх використанням. Зазначимо, що для створення Web-сторінок дизайнери використовують гіпертекстові редактори, наприклад, Macromedia Dreamweaver, Microsoft FrontPage та інші, хоча за достатнього володіння мовою HTML можна писати Web-сторінки в будь-якому текстовому редакторі, наприклад, NotePad. Сучасні текстові процесори, наприклад, MS Word, Lotus WordPerfect дають змогу створювати Web-сторінки методом конструювання без застосування команд HTML, оскільки вони генерують ці команди автоматично.