Тема 2. Розмітка тексту з використанням html Лабораторна робота 2. Розміщення текстової інформації на Web-сторінках

Література: основна [1]; додаткова [5,6].

Мета роботи – вивчення мови HTML, прийомів розмітки тексту і створення простих Web-сторінок.

Дане лабораторне заняття забезпечує напрацювання таких умінь:

створювати Web-сторінки з використанням мови розмітки тексту HTML;

Указані вміння надають можливість вирішення наступних задач:

створення Web-сторінок з однім вікном та фреймами;

розміщення на Web-сторінках текстової інформації та зображень;

форматування текстової інформації за допомогою тегів;

позиціонування елементів на сторінці за допомогою таблиць.

Завдання на лабораторну роботу

При підготовці до лабораторної роботи:

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

Теги для створення|створіння| текстових елементів

Ім'я тега	Вміст тега
<P>.</P>	Абзац тексту
<H1|>.</H1>. <H6>.</H6>	Заголовки
<UL|>.</UL> <OL|>.</OL> <DL>.</DL>	Списки
<TABLE>. </TABLE>	Таблиця

Таблиця 4