Практична робота № 6 Тема: Створення Web-документів, що містять теги оформлення списків та таблиць.

Мета: Навчитись створювати Web-документи, що містять списки та таблиці. 

Програмне забезпечення: Блокнот, Internet Explorer та ОС Windows.

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

Для перераховування набору предметів або понять часто використовують списки. Серед них найбільш часто використовуються такі типи: маркіровані, нумеровані та ненумеровані.

Для визначення списка використовують тег <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) - вирівнює вміст осередку щодо її центра (правого чи лівого країв),

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 та відформатувати її за зразком:

Завдання 3.

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

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

КОНТРОЛЬНІ ПИТАННЯ

1. За допомогою яких тегів ми створюємо таблиці?

2. За допомогою яких тегів ми форматуємо таблиці?

3. Які є типи списків в WEB-документі?

4. Як створити нумеровані та ненумеровані списки?

5. Які теги формують у таблиці рядки, клітинки-заголовки та звичайні клітинки?

6. Який параметр використовують для вирівнювання елементів?