Задание к лабораторной работе №6 «Изображение-Карта»

1. Тщательно изучить содержимое раздела 8.

2. Задействовать любой из доступных файлов-изображений (например, фоновые рисунки рабочего стола Windows) для создания изображения-карты.

3. Использовать, помеченные Вами фрагменты изображения-карты, для ссылок на разные целевые документы.

3. ТАБЛИЦЫ

Таблицы в html-документах используются не столько для того, чтобы располагать данные в обрамленных ячейках, сколько с целью позиционирования фрагментов текста и изображений друг относительно друга. Действительно, помещая изображения и фрагменты текста в ячейки таблицы с невидимой границей, можно добиться эффекта обтекания изображения текстом, расположить текст как многоколоночный и так далее. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.

Основные теги, используемые для описания таблиц: <TABLE> ... </TABLE>; <TR> ... </TR>; <TD> ... </TD>. Все табличные данные заключаются в теги <TABLE> ... </TABLE>; описание каждого ряда ячеек заключается в теги <TR> ... </TR>; содержимое каждой ячейки заключается в теги <TD> ... </TD>.

Таким образом, для описания, например, таблицы из двух строк (рядов), каждая из которых содержит две ячейки, придется создать следующую конструкцию:

<TABLE>

<TR>

<TD> содержимое 1-ой ячейки первой строки </TD>

<TD> содержимое 2-ой ячейки первой строки </TD>

</TR>

<TR>

<TD> содержимое 1-ой ячейки второй строки </TD>

<TD> содержимое 2-ой ячейки второй строки </TD>

</TR>

</TABLE>

Ячейки таблицы могут содержать любые данные, допустимые в html-документе, в частности, текст, изображения, текст с html-тегами. Допустимы также вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по Вашему замыслу какая-то ячейка должна выглядеть пустой, поместите в нее хотя бы неразрывный пробел  . Ячейки, не содержащие данных, могут некрасиво выглядеть в Netscape Navigator: не отображаться заданный фон и рамки ячеек.

Помещаемый в ячейки таблицы текст по умолчанию автоматически размещается браузером (если не задан атрибут ячейки NOWRAP); текст выводится слово за словом; при достижении правой границы ячейки очередное слово переносится на новую строку.

Ячейки таблицы могут охватывать несколько строк или столбцов; при описании таких ячеек используется атрибуты ROWSPAN и COLSPAN.

Теги, описывающие таблицы, имеют много атрибутов; все они необязательны. В данном пособии мы упомянем лишь те, которые одинаково поддерживаются браузерами Netscape Navigator и Microsoft Internet Explorer. Учтите, что даже при использовании только этих атрибутов, таблицы могут выглядеть в разных браузерах по-разному. Следовательно, как и во многих других случаях, уверенность в качестве Вашего сайта даст только тестирование во многих браузерах.

Атрибуты тега <TABLE> задают параметры таблицы в целом:

ALIGN = значение	Устанавливает расположение таблицы по отношению к полям документа. Возможны значения left, right и center.
BACKGROUND = url	Фоновое изображение для всей таблицы.
BGCOLOR = цвет	Фоновый цвет.
BORDER = значение	Толщина внешней рамки таблицы и ячеек в пикселах (0 - без обрамления).
CELLPADDING = значение	Расстояние от границ ячейки до ее содержимого в пикселах.
CELLSPACING = значение	Расстояние между ячейками в пикселах.
HSPACE = значение	Свободное пространство слева и справа от таблицы в пикселах.
VSPACE = значение	Свободное пространство сверху и снизу от таблицы в пикселах.
WIDTH = значение	Ширина таблицы. Задается либо в пикселах, либо в процентах от текущей ширины окна браузера. Примеры: WIDTH=256; WIDTH=100%.

Атрибуты тега <TR> задают параметры данного ряда (при возникновении противоречий атрибуты, заданные в теге <TABLE>, отменяются):

ALIGN = значение	Выравнивание содержимого ячеек. Возможны значения left, right и center.
BACKGROUND = url	Фоновое изображение для ячеек данного ряда таблицы.
BGCOLOR = цвет	Фоновый цвет для ячеек данного ряда.
BORDER = значение	Толщина рамки, обрамляющей ячейки данного ряда (0 - без обрамления).
VALIGN = значение	Вертикальное выравнивание содержимого ячеек. Возможны значения top, center и bottom.

Атрибуты тега <TD> задают параметры данной ячейки (при возникновении противоречий атрибуты, заданные в тегах <TABLE> и <TR>, отменяются):

ALIGN = значение	Выравнивание содержимого ячейки. Возможны значения left, right и center.
BACKGROUND = url	Фоновое изображение для ячейки таблицы.
BGCOLOR = цвет	Фоновый цвет для ячейки.
BORDER = значение	Толщина рамки, обрамляющей ячейку (0 – без обрамления).
VALIGN = значение	Вертикальное выравнивание содержимого ячейки. Возможны значения top, center и bottom.
WIDTH = значение	Ширина ячейки. Задается либо в пикселах, либо в процентах от ширины таблицы.
ROWSPAN = значение	Указывает количество строк, охватываемых ячейкой.
COLSPAN = значение	Указывает количество столбцов, охватываемых ячейкой.
NOWRAP	При задании этого атрибута текст не располагается автоматически в ячейке. Отображается лишь та его часть, что умещается в видимой части ячейки. Может появиться горизонтальная полоса прокрутки.

При работе с таблицами учтите, что указанное значение атрибута WIDTH во многих случаях лишь "принимается к сведению" браузером. Заданные пропорции в точности выдерживаются редко, браузер старается отобразить таблицу как можно лучше (в его понимании).

Отметим, что любая ячейка таблицы может содержать в себе другую таблицу.

Пример таблицы:

<H1>Простейшая таблица </H1> 

<TABLE BORDER=1> <!--Это начало таблицы--> 

<CAPTION>        <!--Это заголовок таблицы--> 

У таблицы может быть заголовок 

</CAPTION> 

<TR>             <!--Это начало первой строки--> 

<TD>             <!--Это начало первой ячейки--> 

Первая строка, первая колонка 

</TD>            <!--Это конец первой ячейки--> 

<TD>             <!--Это начало второй ячейки--> 

Первая строка, вторая колонка 

</TD>            <!--Это конец второй ячейки--> 

</TR>            <!--Это конец первой строки--> 

<TR>             <!--Это начало второй строки--> 

<TD>             <!--Это начало первой ячейки--> 

Вторая строка, первая колонка 

</TD>            <!--Это конец первой ячейки--> 

<TD>             <!--Это начало второй ячейки--> 

Вторая строка, вторая колонка 

</TD>            <!--Это конец второй ячейки--> 

</TR>            <!--Это конец второй строки--> 

</TABLE>         <!--Это конец таблицы-->