При підготовці до лабораторної роботи:
1. Відпрацювати матеріал лекції, літературу.
2. Продумати зміст і підготувати ескізи сторінок для створення під час роботи.
3. Створити необхідну кількість малюнків для фону та елементів оформлення.
При виконанні лабораторної роботи:
1. Спільна робота з додатками Блокнот і Internet Explorer.
1.1. Створити сторінку з фоном і кількома довільними елементами.
1.2. Створити сторінку з фреймами, в кожному з яких відображається своя сторінка.
1.3. Доповнити станиці мета-тегами, що містять інформацію про автора, ключових словах та кодування. Випробувати мета-теги для переадресації сторінок і установки кодування.
2. Розміщення форматованого тексту.
2.1. Створити сторінку, текст якої форматован різними тегами (теги фізичного і логічного форматування).
2.2. Створити сторінку, що містить структурований з використанням різних засобів текст (списки, тег PRE та інші прийоми), випробувати підстановки.
3. Розміщування на сторінках зображень.
3.1. Вивчити і випробувати різні засоби створення фону сторінки (малюнок, текстура, кольоровий фон).
3.2. Розмістити на сторінках ілюстрації, задати різну взаємодію з текстом, вивчити різні режими відображення зображень.
4. Використовування таблиць.
4.1. Створити таблицю з об'єднаними осередками, що містить різний зміст.
4.2. Навчитися використовувати теги <THEAD>, <TFOOT>, <TBODY>, <COL> І <COLGROUP> для форматування таблиць.
4.3. Вивчити використання таблиць для позиціонування елементів. Створити модульну сітку для сторінок на основі таблиці. Застосувати створену сітку для сторінки, розмістити в кожній області свій фон або малюнок.
Звіт по лабораторній роботі представляється у вигляді сторінок, яки створені при виконанні кожного пункту за особистим замислом та оформленням.
Контрольні запитання:
1. Що таке гіпертекстовий документ?
2. Перерахувати основні синтаксичні конструкції мови HTML.
3. Дати визначення понять тег, елемент, контейнер.
4. Записати приклад використання тегів, що визначають структуру документа.
5. В якому з тегів (який відкриває або закриває) можуть задаватися атрибути?
6. Назвати засоби, що дозволяють змінювати розміри і шрифти написів, що виводяться на сторінці.
7. Назвати види списків, які можуть бути присутніми на сторінці. Записати приклад.
8. Перерахувати основні атрибути тегу <IMG>.
9. У яких тегах може бути присутнім URL файлу з малюнком? Записати приклад.
10. Як задати фоновий малюнок на сторінці?
Довідкові матеріали до лабораторної роботи
До пункту 1.
При спільної роботе з додатками Блокнот і Internet Explorer рекомендується така послідовність дій:
- відкрити Блокнот, ввести HTML-код сторінки;
- зберегти у відповідній папці з необхідним ім'ям і розширенням htm (для початкової сторінки це index.htm), вікно Блокнота не закривати;
- відкрити браузер;
- через меню Файл-Відкрити знайти і відкрити сторінку;
- оцінити вигляд сторінки, прийняти рішення про необхідні зміни;
- переключитися в Блокнот, внести зміни в код, виконати команду Зберегти;
- переключитися в браузер, виконати команду Оновити.
Три останні пункти виконувати до одержання необхідного результату.
При створенні сторінок використовувати атрибуті тегу BODY (таблиця 1), мета-теги та теги створення фреймів (таблиця 2).
Таблиця 1
Призначення атрибутів тегу BODY
| Ім'я атрибута | Значення | Призначення |
| background | “шлях до файлу” | Створення фонового зображення |
| bgcolor | #RRGGBB | Колір фону |
| text | #RRGGBB | Колір тексту |
| link | #RRGGBB | Колір посилань |
| vlink | #RRGGBB | Колір використовуваних посилань |
| alink | #RRGGBB | Колір останньої посилання |
Таблиця 2
Теги завдання структури
| Ім'я тега | Вміст тега |
| <HTML>.</HTML> | Контейнер гіпертекстового документа |
| <HEAD>.</HEAD> | Контейнер заголовка документа |
| <BODY>.</BODY> | Контейнер тіла документа |
| <TITLE>.</TITLE> | Контейнер назви документа |
| <FRAMESET|>. </FRAMESET> | Контейнер для фреймів |
| <FRAME> | Фрейм |
| <IFRAME>...</IFRAME> | Плаваючий фрейм |
До пункту 2.
Основні теги, яки можуть містити текст, наведені у таблиці 3, теги логічного та фізичного форматування у таблиці 4 та таблиці 5.
Таблиця 3
