Контрольні запитання:

1. Який тег служить для вставки зображення в html-документ?

2. Де в тезі <img> вказується шлях до графічного файлу?

3. Як задати вирівнювання картинки відносно тексту?

4. Які списки існують в HTML?

5. Який тег бере участь у створенні як маркірованого, так і нумерованого списків?

6. Як змінити порядок нумерації в нумерованому списку?

7. Як змінити вигляд маркера в маркірованому списку?

8. Що таке списки визначень?

9. Як задати якір для посилань в прибудовах одного документа?

10. За що відповідає атрибут target у тезі <a>?

Практична робота 4 Тема: Таблиці

Мета: 1. Набуття навиків створення таблиці заданого розміру. 2. Навчитися об’єднувати комірки таблиці по горизонталі та вертикалі. 3. Навчити створювати фіксовані та динамічні таблиці. 4. Навчитися керувати відстанню між комірками і рамкою таблиці.

Питання для повторення:

1. Використання таблиць у HTML-документах.

2. Створення таблиці.

3. Об’єднання комірок.

4. Встановлення ширини таблиці та комірок.

5. Форматування тексту та оформлення рамок таблиці.

6. Колірне оформлення таблиць.

7. Використання таблиць для розміщення об’єктів на Web-сторінці.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

1. Створити файл lab4.html і зберегти його в своїй папці.

2. Створити у файлі lab4.html таблицю розміром 3х3 для гри в «Хрестики-нулі». Для створення таблиці використати тег <table>. Для таблиці необхідно створити рамку для відображення границь, а порожні комірки заповнити символом нерозривного пропуску.

3. Доповнити файл таблицею з об’єднаними комірками і жирнішою рамкою для всієї таблиці, текст вирівняти по середині комірки (вертикально і горизонтально) (див. рис. 4.1).

Рис. 4.1. Приклад таблиці

4. Створити таблицю, встановити їй наступні параметри: розташування на екрані – по центру, ширина 70% від ширини екрану. Колір вертикальної загальної комірки – блакитний, загальної горизонтальної комірки – жовтий. Колір всієї частини таблиці, що залишилася, – зелений. Вирівнювання тексту у комірках – по правому краю (див. рис. 4.2).

Рис. 4.2. Приклад таблиці

5. Створити в окремому файлі таблицю для шаблону сайту, яка відповідатиме наступним вимогам (див. рисунок 4.3). Назвати файл lab4.1.html.

Рис.4.3. Шаблон сайту

• шапка таблиці повинна складатися з двох комірок;

<tr>

<td background=Shapka_saita.JPG width="590" height="131"></td>

<td bgcolor="#9A0000" width="*" valign="middle" align="center">Роботу виконав СТУДЕНТ</td>

</tr>

• розмір лівої верхньої комірки задати залежно від розміру рисунку-фону (слід задати ширину і висоту комірки виходячи з розміру зображення);

• фоном цієї комірки зробити зображення (атрибут background для тегу комірки <td>), файл зображення є в архіві до лабораторної роботи;

• права верхня комірка повинна займати місце, що залишилося, у вікні браузеру і мати колір фону #.... (дізнатися колір фону можна використовую кнопку select у вікні вибору кольору фону);

• для того, щоб прибрати відстань між комірками використати атрибути rules, cellpadding і cellspacing тегу <table>;

• у верхній правій комірці змінити колір тексту і його вирівнювання (згідно рисунку) і записати в ній своє прізвище. Для вирівнювання тексту необхідно використати атрибути aling і valign;

• центральну (контентну) частину зробити заввишки в 350 пікселів і задати колір фону #fff3e5;

• у центральній комірці об’єднати дві комірки так, щоб вийшла одна загальна, встановити вирівнювання тексту по ширині і по верхньому краю комірки;

• задати підвал таблиці заввишки в 30 пікселів, текст вирівняти по правому краю. Включити в підпис символ ©.

6. У окремому файлі з назвою lab4.2 створити таблицю розміром 3х3, (пунктиром вказані границі комірок).

7. Задати ширину і висоту таблиці та комірок так, щоб ширина таблиці зменшувалася і збільшувалася при зміні розмірів вікна браузеру, а висота була встановлена рівній висоті браузеру. Якщо комірка порожня, то вона не відображуватиметься на екрані, а якщо у комірці знаходиться пробіл, то її висота може бути більше необхідної, для зменшення висоти комірки слід використовувати замість нерозривного пропуску прозору картинку розміром в 1 піксель (картинка є в архіві до лабораторної роботи).

8. Добавте в файл index.html посилання про виконані завдання з лабораторної роботи № 4.

9. Покажіть виконану роботу викладачеві.