Практична робота №27

Тема. Створення Web-документів, що містять теги оформлення списків та таблиць. 
Мета. Навчитись створювати Web-документи, що містять списки та таблиці. 
Обладнання: комп'ютери IBM PC, інструкція.

Теоретичні відомості.

Для перераховування набору предметів або понять часто використовують списки. Серед них найбільш часто використовуються такі типи: маркіровані, нумеровані та ненумеровані.
Для визначення списка використовують тег <LI>.
Всередині ньог,о можна організувати всі вказані раніше типи списків:
<OL> - нумерований список,
<UL> - ненумерований список.
Маркірований список організовується за допомогою атрибутів тега <LI> type="disk" -повний кружок (за домовленістю),
type="circle" - порожній кружок,
type="square" - квадратик
Для якісного розміщення матеріала на сторінці можна використовувати таблиці. Це дасть можливість створити сторінку, яка буде відображати всі елементи на своїх місцях, не дивлячись на масштабування вікна браузера чи особливості самого браузера.
Для створення таблиці використовують тег <table>, який має такі атрибути:
<tr></tr> - рядок (ряд) таблиці,
<td></td> - стовпець таблиці,
bgcolor="#FFCC33" - колір тла таблиці,
background='KapTHHKa.gif' - задає фоновий малюнок для таблиці,
width="50" чи width="50%"- ширина таблиці у пікселях чи відсотках,
height="45" чи height="45%"- висота таблиці у пікселях чи відсотках,
align="center" (right, left) - вирівнює вміст осередку щодо її центра (правого чи лівого країв),

Black- чорний                 Green- зелений
Navy- темно-синій         Teal- бірюзовий
Silver- сірий                     Lime- яскраво-зелений
Blue- синій                      Aqua- блакитний
Maroon- малиновий      Olive- темно-зелений
Purpule- бузковий           Gray- темно-сірий
Red- червоний                Yellow- жовтий
Fushsia- рожевий            White- білий

valign="middle" (top, bottom) - вертикальне вирівнювання вмісту рядка (комірки) по середині,
colspan="2" - розтягти комірку на кілька стовпців,
rowspan="2" - розтягти комірку на кілька рядів,
cellspacing="5" - задає простір між комірками,
cellpadding="5" - задає простір усередині комірки між її вмістом і границями,
border="3" - задає товщину рамки таблиці,
bordercolor="#000000" - задає колір рамки таблиці
Таблиця складається з рядків, які визначаються тегом <tr>, та стовпців, що визначаються тегом <td>.

Завдання 1.

Помістити на сторінку probal.htm нумеровані та маркіровані списки, вміщені нижче: До кольорової гами радуги входять:
    o Червоний
    o Жовтогарячий
    o Жовтий
    o Зелений
    o Блакитний
    o Синій
    o Фіолетовий
До кольорової гами радуги входять:
    1. Червоний
    2. Жовтогарячий
    3. Жовтий
    4. Зелений
    5. Блакитний
    6. Синій
    7. Фіолетовий

Завдання 2.

Створити на цьому документі таблицю розмірності 2x4 та відформатувати її за зразком:

Додаткове завдання:

1. Розфарбувати вказані списки та таблицю відповідно до кольорів

2. Підібрати у таблиці колір тексту, який би гарно читався на фоні кольору комірки (для кожної комірки свій колір)
3. Результати підбору записати до зошиту з практичних робіт.

Порядок виконання роботи:

1. Ввімкнути комп'ютер.
2. Дочекатись повного завантаження Windows.
3. Запустити редактор, в якому буде створюватись Web-документ.
4. Виконати завдання №1.
5. Виконати завдання №2.
6. Записати висновки до зошита з практичних робіт.
7. Закрити всі відкриті вікна.
8. Вимкнути комп'ютер.

Домашнє завдання:

1. Підготуватись до практичної роботи № 28. Тема "Створення Web-документів".
1.2. Переписати до зошита з практичних робіт інструкцію до роботи № 28.
1.3. Повторити основні теги HTML та їх атрибути.

Запитання до захисту практичної роботи:

1. За допомогою яких тегів ми створюємо списки?
    o Маркіровані
    o Нумеровані
    o Ненумеровані
2. За допомогою яких тегів ми створюємо таблиці?
3. За допомогою яких тегів ми форматуємо таблиці?
4. Які є типи списків в WEB-документі?
5. Як створити немеровані та ненумеровані списки?
6. Які теги формують у таблиці рядки, клітинки-заголовки та звичайні клітинки?
7. Який параметр використовують для вирівнювання елементів?