Практична робота №5 «Колірне оформлення таблиць. Використання таблиць для розміщення об’єктів на веб-сторінці»

Практична робота N5

Тема:«Колірне оформлення таблиць. Використання таблиць для розміщення

об’єктів на веб-сторінці»

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

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

Колір можна визначити, вказуючи його назву англійською мовою або символ # та шістнадцяткове число. Якщо потрібно задати колір для всієї таблиці, то атрибут BGCOLOR задають тегу <TABLE>, для зміни кольору лише в одному рядку – в тегу <TR>, а настроювання кольору окремої комірки забезпечує наявність цього атрибута всередині тегу

<TD> або <TH>.

Колір рамки таблиці можна задати за допомогою таких атрибутів:

 BORDERCOLOR – колір всієї рамки;

 BORDERCOLORLIGHT – колір світлої частини рамки;

 BORDERCOLORDARK – колір темної частини рамки.

Ці атрибути вставляють у тег <TABLE>. Щоб вони діяли, необхідна наявність ще й

атрибута BORDER, який задає товщину рамки. Розглянемо приклад оформлення таблиці за

допомогою різних кольорів.

Приклад

HTML-документ, який містить різнокольорову таблицю.

<HTML>

<TITLE>Приклад керування кольором</TITLE>

<BODY>

<TABLE BGCOLOR=”#F0F0F0” BORDER=10 BORDERCOLOR=”#808080”

BORDERCOLORLIGHT=”#99CCFF” BORDERCOLORDARK=”#9900FF”>

<TR BGCOLOR=lightblue>

<TH COLSPAN=”3”>Найкращі класи</TH>

</TR>

<TR>

<TD BGCOLOR=pink>11-A</TD>

<TD BGCOLOR=cyan>11-Б</TD>

<TD BGCOLOR=plum>11-В</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Вигляд готової таблиці

Якщо необхідно задати колір шрифту для тексту таблиці, то це можна зробити за

допомогою тегу <FONT> всередині відповідних тегів <TD>. Наприклад:

<TD BGCOLOR=magenta><FONT COLOR=pink>Текст</FONT></TD>

Вправа 1

Розробити веб-сайт, на головній сторінці якого будуть розміщені гіперпосилання на сторінки (можна розробитивласну структуругіперпосилань). Кожне посилання пов’язане з файлом, в якому міститьсявідповідна інформація. Для цього потрібно:

1. Визначити структуру головної сторінки сайту за допомогою таблиці.

2. Підготувати текстові наповнення для веб-сторінок, які пов’язані гіперпосиланнями з головною сторінкою.

3. Товщина рамки таблиці 20 пікселів, розділювальні лінії не показані.

На рисунку показано головну сторінку сайту

Результат відправити