5. Питання для самоконтролю

Як вставляється зображення в Web- сторінку?

Як задається вирівнювання зображення, і яких значень воно може набувати?

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

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

Як формуються посилання на зовнішній документ HTML?

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

Лабораторна робота № 6 Вставка таблиць в Web- сторінки

1. Мета роботи

Метою роботи є знайомство з елементами і стилями таблиць в мові HTML.

2. Склад робочого місця

2.1. Устаткування: IBM- сумісний персональний комп'ютер(ПК).

2.2. Програмне забезпечення: операційна система Windows, Web- браузер Internet Explorer версії 6.0 і вище.

3. Підготовка до лабораторної роботи

Для підготовки до виконання лабораторної роботи необхідно повторити наступні розділи (дивись електронний конспект лекцій по розділу 4 «Технології програмування»).

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

Відкрийте модифіковану в лабораторній роботі 2-05 Web- сторінку для вашого варіанту. Скопіюйте в папку images в вашій папці всі зображення в папці для вашого варіанту, які находяться в папці Таблицы.

Створіть правило стилів для усієї таблиці (елементу <table>) для вашого варіанту, у відповідності з табл. 6.3.

Таблиця 6.3. Стилі елементу <table>

Створіть правило стилів для заголовка (елементу <caption>). Відступ заголовка має бути таким же, як для елементу <p>, вага шрифту має бути задана як жирний, розмір шрифту - на один пункт більше, ніж розмір шрифту для елементу <p>, гарнітура шрифту - та ж, що і для заголовка другого рівня елементу <h2>) і колір тексту - відповідно до вашого варіанту:

1) brown; 2) darkred; 3) darkgreen; 4) fuchsia; 5) blue; 6) indigo; 7) green; 8) red; 9) navy; 10) maroon; 11) chocolate; 12) slateblue.

Створіть правило стилів для заголовної частини таблиці (елементу <thead>). В якості фонового має бути задане зображення з ім'ям backgroundxx.jpg або backgroundxx.gif у зображеннях вашого варіанту. Текст в заголовній частині має бути вирівняний по центру(по горизонталі і вертикалі), розмір шрифту - той же, що і для елементу <p>, гарнітура шрифту - та ж, що і для заголовка першого рівня, вага шрифту має бути задана як жирний. Колір тексту в заголовній частині - відповідно до вашого варіанту:

1) indigo; 2) navy; 3) orchid; 4) darkgreen; 5) darkred; 6) slateblue; 7) red; 8) royalblue; 9) olive; 10) orangered; 11) maroon; 12) purple.

Створіть правило стилів для класу header елемента <td> для вивода границь клітинок в заголовній частині таблиці. Ширина межі має бути задана рівній 4pt, межа повинна мати той же колір, що і колір тексту в заголовній частині і стиль inset.

Створіть правило стилів для тіла таблиці (елементу <tbody>): гарнітура і розмір шрифту - ті ж, що і в елементі <p>, колір шрифту - чорний.

Створіть правило стилів для класу odd елемента <tr> для виведення кольору фона непарного рядка тіла таблиці для вашого варіанту:

1) aliceblue; 2) lightyellow; 3) cornsilk; 4) palegreen; 5) oldlace; 6) papayawhip; 7) floralwhite; 8) mintcream; 9) lightgoldenrodyellow; 10) honeydew; 11) azure; 12) ghostwhite.

Створіть правило стилів для класу even елемента <tr> для виведення кольору фону парного рядка тіла таблиці для вашого варіанту:

1) lavender; 2) khaki; 3) mistyrose; 4) greenyellow; 5) moccasin; 6) peachpuff; 7) gainsboro; 8) aqua; 9) wheat; 10) moccasin; 11) aquamarine; 12) gainsboro.

Створіть правило стилів для класу border елемента <td> для виведення меж клітинок в тілі таблиці. Ширина межі має бути задана рівній 4pt, границя повинна мати стиль outset і колір відповідно до вашого варіанту:

1) blue; 2) brown; 3) lightblue; 4) green; 5) yellow; 6) pink; 7) slateblue; 8) palegreen; 9) violet; 10) aqua; 11) navajowhite; 12) fuchsia.

Створіть правило стилів для класу left елемента <td> для виведення тексту в клітинці тіла таблиці, що відформатовано вліво по горизонталі і згори по вертикалі.

Створіть правило стилів для класу center елемента <td> для виведення тексту в клітинці тіла таблиці, що відформатовано по центру по горизонталі і посередині по вертикалі.

Задайте структуру таблиці і заповніть даними таблицю або таблиці для вашого варіанту відповідно до зображення вашої таблиці. Для елементу <table> задайте значення атрибутів cellspacing і cellpadding, відповідно рівні 3 і 2 пікселі. Для усіх елементів таблиці використайте елемент <td>. Для вставок малюнків в елементи таблиці використайте елемент <img>.

Заголовок таблиці помістіть в контейнер <caption>…</caption>.

Заголовну частину таблиці помістите в контейнер <thead>…</thead>, а тіло таблиці – в контейнер <tbody>…</tbody>.

Для всіх клітинок заголовної частини таблиці задайте клас header.

Для всіх елементів <tr> непарних рядків тіла таблиці задайте клас odd, а для всіх парних – клас even.

Для усіх перших клітинок в кожному рядку тіла таблиці задайте значення класу border і left, для всіх інших клітинок рядку – значення класу border і center (значення в атрибуті class повинні розділятися пропуском).

Перевірте правильність виведення елементів Web- сторінки в Web- браузері Internet Explorer. Покажіть створену вами Web- сторінку викладачеві.

Збережіть створений вами документ HTML для Web- сторінки. Цей документ використовуватиметься в лабораторній роботі 2-07.