Закривати тег не потрібно. При виконанні завдання будемо вважати, що графічний файл clock.jpg знаходиться у вашому робочому каталозі, де і Web-сторінка.

Читайте также:

<HTML>

<HEAD>

<TITLE> > Інформація про </TITLE>

</HEAD>

Глобальна </B></FONT><BR>

<FONT SIZE="6"><I> Подія

</I></FONT>

</P>

</BODY>

</HTML>

Завдання 2. Установлення фонового зображення на Web-сторінці.

Графіка, що використовується як фон, задається в тегові <BODY> за допомогою атрибута BACKGROUND.

<HTML>

<HEAD>

<TITLE>> Інформація про HTML</TITLE>

</HEAD>

Глобальна </B></FONT><BR>

<FONT SIZE="6"> <I> Подія

</I>

</FONT>

</Р>

</BODY>

</HTML>

Лабораторна робота 3

Тема: Таблиці.

1. Постановка задачі: Створити таблицю із 3-х рядків та 2-х стовпців. Задайте для неї колір фону (або фоновий малюнок) і подвійну рамку. У комірках таблиці розмістіть малюнки або тексти. Задайте відступ від границі комірки до її вмісту, рівний 10 пікселям, відстань між комірками зробіть рівною 3 пікселям. Таблицю “прижміть” до правого боку вікна броузера.

2. Створити таблицю із 4-х рядків і 4-х стовпців. За допомогою атрибутів colspan та rowspan об¢єднайте окремі комірки. В об¢єднані комірки розмістіть текст або зображення так, щоб вони розміщувалися посередині комірки, по горизонталі і по вертикалі.

3. Створити документ:

4. За допомогою таблиці (без рамки) розмістіть текст у вікні броузера у дві колонки, над якими розміщений один спільний фрагмент.

Важливим інструментом Web-дизайну є таблиці, які використовуються не лише для виведення табличних даних, але і для управління взаємним розміщенням тексту й графіки, створення колонок газетного типу, кольорових ефектів та ін. Таблиця задається тегом <TABLE>…</TABLE>, що має цілий ряд опцій:

Таблиця 2

Опція	Призначення
ALIGN="вирівнювання"	Вирівнювання усієї таблиці відносно тексту, в якому вона знаходиться (left, center або right)
BORDER="число"	Ширина бордюру таблиці, у пікселях
CELLSPACING="число"	Відстань між комірками, у пікселях
CELLPADDING="число"	Розмір вільного простору між границями комірки та її вмістом, у пікселях
HSPACE="число"	Розмір вільного простору зліва та справа від таблиці, у пікселях
VSPACE="число"	Розмір вільного простору зверху і знизу від таблиці, у пікселях
WIDTH="ширина"	Ширина таблиці у пікселях або відсотках від ширини вікна броузера
BACKGROUND="IMAGES\ptichka.jpg"	Заповнює комірку фоновим малюнком. Необхідно вказати URL малюнка
BGCOLOR="CCFFFF"	Визначає колір фону комірки
COLSPAN	Визначає кількість стовпців, які об¢єднуються. За замовчуванням має значення 1
ROWSPAN	Визначає кількість рядків, які об¢єднуються. За замовчуванням має значення 1
VALIGN	Визначає спосіб вертикального вирівнювання змісту комірки. Можливі значення: top, bottom, middle. За замовчуванням – рівняння по центру (VALIGN="middle)

Таблицю визначають таким чином:

<table>

<tr>

<td>Вміст комірки</td>

...

</tr>

<tr>

<td>Вміст комірки</td>

...

</tr>

...

</table>

Тег <TR>…</TR> визначає рядок таблиці, а тег <TD>…</TD> — комірку в рядку. Якщо комірку треба залишити пустою, то в неї розміщують символ пропуску &nbsp;

Завдання 1. Створити таблицю.

<HTML>

<HEAD>

<TITLE> Глобальна події </TITLE>

</HEAD>

<B> Країна

</B></FONT><BR></P>

<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#009966" bordercolordark="#9999FF">

<tr bgcolor="#9999FF">

<td> Дата </td>

<td> поді 1 </td>

<td> поді 2 </td>

<td> поді 3 </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 1</td>

<td> </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 2</td>

<td> </td>

</tr>

<tr bgcolor="#33CCCC">

<td> 3</td>

<td> </td>

</tr>

</table>

</BODY>

</HTML>

У цьому прикладі границя таблиці виконана у двох кольорах. Це досягається за рахунок використання атрибутів BORDERCOLORLIGHT та BORDERCOLORDARK.

Завдання 2. Створити “неправильну” таблицю.

	Характеристики
Середній зріст, см	Середня вага, кг
Стать	Чоловіча
Жіноча

......................................................................................

<tr>

<td colspan="2">Характеристики</td>

</tr>

<tr>

<td> Середній зріст, см </td>

<td> Середня вага, кг </td>

</tr>

<td> Чоловіча </td>

</tr>

<td> Жіноча </td>

<td>166</td>

<td>65</td>

</tr>

</table>

................................................................

Дата добавления: 2015-10-02; просмотров: 45 | Нарушение авторских прав

<== предыдущая страница | следующая страница ==>

Як створити HTML документ ?. | Завдання до лабораторної роботи №3 для самостійного виконання

mybiblioteka.su - 2015-2024 год. (0.014 сек.)

<== предыдущая страница	\|	следующая страница ==>
Як створити HTML документ ?.	\|	Завдання до лабораторної роботи №3 для самостійного виконання