Лабораторна робота 3 Створення документів із таблицями. Використання таблиць для форматування і розміщення елементів. Активні зображення

Мета:

• Закріпити на практиці знання і навички по створенню таблиць. Вивчити основні засоби опису таблиць, їхнє застосування і використання в HTML-документах.

• Вивчити на практику інші можливості, пов'язані з використанням таблиць. Навчитися застосовувати табличні теги в інших випадках: для розташування малюнків, створення гіперпосилання в осередках таблиць і ін. Закріпити отримані раніше знання по використанню табличних тегів у HTML-документах.

• Вивчити на практиці засоби створення активних зображень. Навчитися створювати й описувати активну карту за допомогою стандартних тегів мови HTML.

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

Для опису таблиць служить тег <TABLE>. Teг <TABLE>, як і багато інших, автоматично перекладає рядок до і після таблиці. Розмір таблиці для відображення вмісту звичайно встановлюється браузером автоматично, проте можна встановити ширину таблиці, використовуючи атрибут WIDTH.

Основний синтаксис

<TABLE>

[<CAPTION> Заголовок таблиці </CAPTION>]

<TR> Рядок таблиці </TR>

<TR> Рядок таблиці </TR>

</TABLE>

Можливі атрибути

Ім'я атрибута	Можливі значення	зміст	Примітки
ALIGN	LEFT, CENTER, RIGHT	Горизонтальнее вирівнювання всієї таблиці	по замовчанню LEFT, проте це може бути перекрито зовнішніми елементами DIV або CENTER
WIDTH	Специф. ширини	ширина всієї таблиці	по замовчанню ширина визначається браузером так, щоб представити весь вміст
COLS	Ціле	Число стовпчиків у таблиці	He обов'язковий
BORDER	Ціле	Ширина рамки в пікселях	Значення 0 (по замовчанню) означає - без рамки; деякі браузери допускають просто написання BORDER, що сприймається, як BORDER=1
BACKGROUND	URL	Фонове зображення для таблиці	Має пріоритет перед кольором фона. Тільки для Internet Explorer
BGCOLOR	Колір	Колір фона таблиці	Якщо не задане фонове зображення
BORDERCOLOR	Колір	Колір рамки	Тільки для IE.
CELLSPACING	Ціле	Проміжок між комірками в пікселях	Дивіться примітки нижче
FRAME	ABOVE BELOW BORDER BOX HSIDES LHS RHS VOID VSIDES	Верхній край Нижній край Навколо -"- Верхній і нижній краї Лівий край Правий край Зовн. рамка приховується лівий і правий краї	Визначає правила відображення зовнішніх меж таблиці
RULES	ALL COL NONE ROWS	Скрізь між осередками Лінії між стовпчиками Немає внутрішніх ліній Лінії між рядками	Визначає правила відображення внутрішніх меж таблиці
CELLPADDING	Ціле	Проміжок між вмістом осередку і рамкою навколо осередку в пікселях ("набивка")
TITLE	Рядок	Заголовок таблиці	Необов'язковий. Аналогічно тегу <CAPTION>

Просте посилання можна записати у виді:

<А HREF="http://polyn.net.kiae.su/index.html"> Індекс бази даних "Полин" </А>

Ішою формою використання тега А є визначення точок усередині тексту, на які можна посилатися. Такий метод використовується, коли документ не можна поділити на частині і необхідно швидко переміщуватись зі змісту по тексті.

<А NAME=point">

Для посилання на таку точку в іншому документі використовують таку форму URL:

<А HREF=" http://polyn.net.kiae.su/index.html #point"> Посилання на точку "point" y документі "index.html"</A>

Посилатися можна не тільки на документ HTML, a i на будь-який файл. При цьому якщо браузер уміє відкривати даний тип файла, то його вміст буде відображено в браузері, інакше буде задане питання: "Записати файл або спробувати його відкрити, використовуючи список асоціацій типів файла".

Якщо ми хочемо, щоб посиланням на інший документ був малюнок, то тег <IMG> повинний бути тілом тега <А>.

Приклад:

<А HREF="next. html"><IMG SRC="RightArrow. gif" /A>

Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіуса кола. Ці параметри записуються в карту (МАР-файл).

He забудьте перед ім'ям карти в атрибуті USEMAP записати символ # у такий спосіб:

<IMG SRC="mymap.gif" USEMAP="#sitemap">

Коли зображення стало активним і для кожної активної області визначений URL, його потрібно помістити на HTML-сторінку. Це можна зробити декількома засобами, у залежності від того, яке зображення ви робите: на сервері або в клієнта.

Активні зображення в клієнта

Приведемо приклад посилання в HTML-файлі для цього виду активних зображень:

Приклад

<HTML>

<HEAD>

<TITLE> Товари</ТІТLЕ>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">Компанія </H1>

<HR>

<р ALIGN="CENTER"><font color="#400040" size="4">[

<a href="news.html">Новини</a> |

<a href="products.html">Товари</a> |

<a href="servis.html">Пocлyги</a> |

<a href="contact.html">Контакти</a> |

<a href =" search. htm">Пошук</a> ] </font>

<HR>

<H3 ALIGN=CENTER>Види побутової електроніки

запропоновані Компанією </Н3>

<IMG SRC="catal2.jpg" usemap="#catal2" ALIGN=MIDDLE>

<map name="catal2">

<area shape="rect" coords="8,5,128,134" href="tv.html">

<area shape="default" nohref> </map>

<HR>

<H3 ALIGN="CENTER">Контактна інформація</Н3>

<UL>

<LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56

<LІ>Поштова адреса 123456 p. Город, ул.Лісова, 106

<UL TIPE="CIRCLE">Eлeктpoннa пошта<BR>

<LІ>Загальна інформація: abc@abc.su

<LІ>Продажі: abc@abc.abc.su

</UL>

</UL>

<BR><BLINK>Copyright</BLINK> 1997 Компанія </BODY>

</HTML>

Опис активної карти

Опис активної карти такий

<МАР NAME="IM'Я карти"> <AREA>

<AREA> </МАР>

Тег <AREA> - визначає конкретну область і пов'язане з нею гіперпосилання. Тег не має тіла і закриваючого тега

Параметри Tera<AREA>

Ім'я атрибута	Можливі значення	Зміст	Примітки
SHAPE	CIRCLE RECT POLY DEFAULT	(Обов'язковий) Коло Прямокутник Багатокутник URL для частини зображення не приналежній жодній фігурі	Задає фігуру для активної області Потребує наявності центру і радіуса Один вектор - діагональ прямокутника До ста вершин багатокутника
COORDS	ціле число через кому	Аргументи до параметра SHAPE	Одиночне число або їхня пара, у залежності від SHAPE. Вся послідовність укладена в лапки
HREF	URL	Адреса переходу	Повинний бути присутнім HREF або NOHREF
NOHREF	-	Немає адреси	Змушує браузер ігнорувати цю область
ALT	текст	Альтернативний гекст	Відображається коли неможливо відобразити малюнок