LR 3

Лабораторна робота № 3
Тема: Нелінійна структура документів HTML.

Мета: Навчитись створювати нелінійні структури HTML документа
використовуючи різні способи.
ТЕОРЕТИЧНА ЧАСТИНА
На сьогоднішній день можливості HTML дозволяють створювати
гіпертекстові сторінки як лінійної так і нелінійної структури. У лінійній
структурі усі елементи сторінки представлені послідовно (приклад, сторінки ЛР
№ 1). Нелінійна структура HTML документа наведена у табл. 1.
Таблиця 1
Нелінійна структура HTML документа
Контент шапки Web-сторінки
Меню:
 пункт 1
 пункт 2
 пункт 3
 пункт 4
Основний контент Web-сторінки
Нижній колонтитул
В історичному аспекті відомі такі основні способи створення нелінійної

структури:
 використання таблиць;
 використання фреймів;
 використанням блочних елементів.
Табличний спосіб створення структури HTML

Таблична верстка – умовна назва методу верстання HTML-документів, при
якому за структурну основу для розташування текстових чи графічних
елементів документа використовуються таблиці (HTML-тег <table>).
Метод широко застосовувався до появи стандарту CSS, оскільки на той
момент не було іншої можливості точно розташувати елементи на сторінці.
Таблиці є спроможними автоматично змінювати свої розміри відповідно до
вмісту, і навпаки, тримати точні розміри певних комірок, дозволяють швидко і
зручно розставити по комірках різнорідну текстову чи графічну інформацію.
Таблиці в HTML можуть бути вкладеними, що дозволяє створювати цілі
ієрархії таблиць при верстанні складних сторінок, окремі елементи яких мають
зберігати своє розташування і розмір на екрані незалежно від розміру вікна
браузера, тоді як інші елементи, навпаки, мають змінюватися в розмірах або
змінювати своє розташування щодо решти об'єктів документа.
Таблична верстка залишається найбільш зручною та простою в засвоєнні, і
багато розробників продовжують нею користуватися.
Переваги табличної верстки:
 табличні теги з'явилися в стандартах HTML значно раніше за блокові
теги, і тому практично всі браузери відображають їх коректно. Цей метод
верстки зарекомендував себе, як найбільш стабільний і надійний.
 при розумному підході таблиці спроможні чітко структурувати
інформацію.
Недоліки табличної верстки:
 у випадку, якщо макет містить багато дрібних деталей, HTML-код
виходить занадто громіздким, оскільки він складається в основному з
вкладених таблиць.
 таблична верстка погано поєднується з концепцією позиціонування.
 таблиці не можуть перекривати одна одну.
 в табличні теги не можна прописати програмний код скрипта або певний
сценарій інтерактивності елементу.
Приклад HTML коду файлу табличної структури «table.html»:
Спосіб створення структури HTML з використанням фреймів
Незважаючи на те, що сайти з фреймами зустрічаються все рідше,
вивчення HTML було б неповним без розгляду теми про фрейми. До того ж
фрейми в якомусь сенсі зайняли свою нішу і застосовуються для систем
адміністрування та довідки. Там, де недоліки фреймів не мають особливого
значення, а переваги навпаки, активно затребувані.
Для створення фрейма використовується тег <frameset>, який замінює тег
<body> в документі і застосовується для поділу екрана на області. Усередині
даного тега знаходяться теги <frame>, які вказують на HTML-документ,
призначений для завантаження в область.
При використанні фреймів можливо створити чотири HTML-файли: 1-й
визначає фреймової структуру і ділить вікно браузера на чотири частини, а інші
документи завантажуються в задані вікна.
Приклад HTML коду файлу фреймової структури «frame.html»:
Приклад HTML коду файлу «top.html»:
Приклад HTML коду файлу «left.html»:
Приклад HTML коду файлу «content.html»:
HTML код файлів «content2.html» та «content3.html» аналогічний.
Приклад HTML коду файлу «footer.html»:
При використанні фреймів візьміть до уваги їх наступні особливості.

 пошукові системи погано працюють з фреймової структурою, оскільки
на сторінках, які містять контент, зазвичай немає посилань на інші документи.
 фрейми приховують адресу сторінки на якій знаходиться відвідувач і
встановлюється через тег <title>, і завжди показують тільки адресу сайту. З цієї
причини вподобану сторінку неможливо помістити в розділ «Вибране»
браузера.
 велика кількість фреймів вимагає для браузера виділення більше пам'яті,
ніж зазвичай.
Спосіб створення структури HTML з використанням

блочних елементів
На відміну від табличного способу розташування даних блокова верстка не

потребує чіткої прив'язки кожного логічного блоку до певної комірки. Спосіб
блокової верстки базується на абсолютно інших принципах розташування і
взаємодії за допомогою блокових елементів <div>. Для конкретизації контенту
замість тегу <div>, можна визначати блоки за допомогою тегів <header>
(шапка сайту), <nav> (меню сайту), <footer> (колонтитул сайту), <article>
(блок новин, статті), <section> (задає розділ документу).
Кожний логічний елемент (текст, картинка, таблиця) представляються як
окремі блоки, які також можуть бути вкладеними. Таке розміщення є більш
природним потоком.
Характерним моментом для блокової верстки є почергове розташування
блоків – один за іншим і чітке розділення між собою. Розташування блоків в
одному рядку є можливим, але воно використовується лише у випадках, коли
виникає потреба добитися особливого ефекту.
Суттю блокової верстки є використання всіх можливостей каскадних
таблиць стилів CSS замість таблиць і фреймів.
Переваги блокової верстки:
 як правило, об’єм коду сторінки, що зверстана блоками є відчутно
меншим, ніж об’єм коду сторінки, де застосовано табличну структуру.
 блокова верстка дуже «дружньо» відноситься до позиціонування
 блоки можуть перекривати один одного, причому розробник вказує,
який з блоків буде зверху.
Недоліки блокової верстки:
 блокова верстка є досить складною і потребує професійних навичок
верстання.
 за низької роздільної здатності монітору блоки можуть зсуватися,
перекривати один одного, або закривати доступ до інтерфейсних елементів
сайту.
Приклад HTML коду файлу блочної структури «bloc.html»:
ХІД РОБОТИ
1. Уважно ознайомтеся з теоретичним матеріалом лабораторної роботи
наведеним вище.
2. Створіть каталог «lr2».
3. У створеному каталозі створіть ще три каталоги «table», «frames» та
«blocks».
4. У каталозі «table» створіть файл «table.html», який повинен містити HTML
код табличної структури WEB-сторінки за зразком наведеним на рис.1.
Улюблені місця відпочинку студента ...
Контент про улюблене місце відпочинку.

 Україна
 Грузія  Google
 НУВГП
 Польща  Кафедра
ПІБ, спеціальність, група
Рис. 1. Приклад типової структури WEB-сторінки
5. У середній комірці таблиці повинен відображатися контент про улюблене

місце відпочинку (текст та фото).
6. При натисканні на посилання правого стовпця (Google, НУВГП, Кафедра) на
новій вкладці повинні відкриватися відповідні сторінки.
7. У каталозі «table» створіть аналогічні файли табличної структури
«table2.html» та «table3.html» про два інших місця відпочинку. Забезпечте
перехід між сторінками при натисненні на відповідні гіперпосилання.
8. Оформіть WEB-сторінки, шляхом завдання стилю та кольору шрифту, фону
тощо.
9. У каталозі «frames» створіть файл «frame.html», який повинен містити
HTML код фреймової структури WEB-сторінки за зразком наведеним на
рис.1.
10. У каталозі «Фрейми» створіть додаткові файли, що повинні
завантажуватися у відповідні вікна файлу «frame.html», а саме:
 «top.html» – файл шапки Web-сторінки;
 «left.html» – файл меню переходів по місцях відпочинку;
 «right.html» – файл переходів на сайти Google, НУВГП, ЕК;
 «content.html» – файл, що містить інформацію про 1-ше місце
відпочинку;
 «content2.html» – файл, що містить інформацію про 2-ге місце
 «content3.html» – файл, що містить інформацію про 3-тє місце
 «footer.html» – файл нижнього колонтитула, що містить інформацію про
ПІБ, спеціальність, курс.
11. Забезпечте відображення та функціональність Web-сайту фреймової
структури аналогічно до табличної.
12. У каталозі «blocks» створіть файл «bloc.html», який повинен містити
HTML код блочної структури WEB-сторінки за зразком наведеним на рис.1.
13. Забезпечте відображення та функціональність Web-сторінки блочної
структури аналогічно до табличної.
14. У каталозі «blocks» створіть аналогічні файли блочної структури
«bloc2.html» та «bloc3.html» про два інших місця відпочинку.
15. Опишіть переваги та недоліки кожного із способів створення структури
HTML-документа.
16. Показати та захистити виконану роботу викладачеві.

LR 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LR 3

Uploaded by

Copyright:

Available Formats

Лабораторна робота № 3

Тема: Нелінійна структура документів HTML.

Контент шапки Web-сторінки

В історичному аспекті відомі такі основні способи створення нелінійної

Табличний спосіб створення структури HTML

Приклад HTML коду файлу «left.html»:

Приклад HTML коду файлу «content.html»:

HTML код файлів «content2.html» та «content3.html» аналогічний.

Приклад HTML коду файлу «footer.html»:

При використанні фреймів візьміть до уваги їх наступні особливості.

Спосіб створення структури HTML з використанням

На відміну від табличного способу розташування даних блокова верстка не

Улюблені місця відпочинку студента ...

Контент про улюблене місце відпочинку.

ПІБ, спеціальність, група

Рис. 1. Приклад типової структури WEB-сторінки

5. У середній комірці таблиці повинен відображатися контент про улюблене

You might also like