Создание карты изображений

3.1.Создайте новый HTML-документ.

3.2.Введите следующий текст

<IMG src="C:Documents and SettingsAll UsersДокументыМои рисункиОбразцы рисунковзакат.jpg" usemap=#map1 height=600 width=800>

<MAP name=map1>

<AREA shape=rect coords="1, 470, 800, 600" href="sea.htm" title=море>

</MAP>

3.3.Сохраните файл под именем map.htm и откройте в одном из браузеров. Обратите внимание на контур вокруг изображения и на появляющийся указатель гиперссылки в нижней части рисунка.

3.4.Вернитесь в Блокнот, уберите рамку вокруг изображения, установив атрибут border тега <IMG> равным нулю, и добавьте еще две области на карту изображения:

<AREA shape=circle coords="380, 400, 35" href="sun.htm" title=солнце>

<AREA shape=poly coords="100,100, 100,200, 200,340, 640,380, 630,250" href="cloud.htm" title=облако>

3.5. Сохраните файл и обновите страницу в окне браузера. Оцените полученный результат.

4. Индивидуальное задание

Свяжите гиперссылками Web-страницы, созданные вами в процессе выполнения первой лабораторной работы. Добавьте на одну или несколько страниц рисунки. Создайте карту изображения, размещенного на первой странице, и свяжите указанные в ней области с другими страницами вашего сайта.

Контрольные вопросы

1. Что такое гиперссылка? Как создать гиперссылку?

2. Как создать гиперссылку на фрагмент документа?

3. Какие атрибуты тега <A> являются обязательными? Почему?

4. Как добавить графическое изображение на Web-страницу?

5. Какие форматы графических файлов используются при создании Web-страниц?

6. Перечислите и определите атрибуты тега <IMG>. Как они влияют на способ отображения изображения?

7. Что такое карта изображения? Зачем она нужна?

8. Как задаются области карты изображения? Какой они могут быть формы?

9. Будет ли работать карта изображения, если не указать размер вставляемого рисунка?

10. Могут ли пересекаться области карты изображения? Обоснуйте свой ответ.

Лабораторная работа № 3
Таблицы

Цель работы – ознакомление с возможностями построения таблиц различной структуры и получение практических навыков их использования при создании Web-страниц.

Теоретические сведения

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

Таблица в языке HTML помещается между тегами <TABLE> и </TABLE>. Между этими тегами последовательно описывается каждая строка таблицы, заключаемая в теги <TR> и </TR>, а уже внутри каждой строки описываются ячейки.

Тег <TABLE> имеет следующие атрибуты:

– align – выравнивание таблицы относительно документа (left, center или right);

– background – рисунок фона таблицы; если изображение слишком большое, берется его часть, если маленькое, то оно размножается;

– bgcolor – цвет фона таблицы;

– border – толщина рамки в пикселях; если атрибут не указан, то таблица выводится без видимой рамки;

– bordercolor – цвет рамки;

– cellspacing – расстояние между ячейками таблицы в пикселях (по умолчанию 1);

– cellpadding – расстояние между содержимым ячейки и ее границами в пикселях;

– hspace и vspace – величина свободного пространства в пикселях слева/справа и сверху/снизу таблицы соответственно;

– frame – способ отображения границы таблицы (void – без рамки, box или border – вся рамка, hsides – горизонтальные линии, vsides – вертикальные линии, lhs – левая граница, rhs – правая граница);

– rules – отображение сетки таблицы. Может принимать следующие значения: all отображает все части рамки внутри таблицы, cols – все вертикальные рамки внутри таблицы, rows – все горизонтальные рамки внутри таблицы, none удаляет все рамки внутри таблицы;

– width – ширина таблицы в процентах или пикселях.

Пример:

<TABLE align=center width=90% border=2 background=”picture.gif”>

Тег <TR> определяет строку в таблице и может содержать следующие атрибуты:

– align – горизонтальное выравнивание текста в ячейке (left, center или right);

– backgrounde – фоновый рисунок строки;

– bgcolor – цвет фона строки;

– bordercolor – цвет обрамления строки;

– valign – вертикальное выравнивание текста в ячейках строки (top – по верхнему краю, middle – по центру, bottom – по нижнему краю), по умолчанию осуществляется выравнивание по центру.

Ячейки таблицы могут относиться к двум разным типам: ячейки в заголовках столбцов и строк задают парным тегом <ТН>, а обычные ячейки – парным тегом <TD>. Закрывающие теги </ТН> и </TD> можно опускать. Различаются теги <TH> и <TD> только форматированием: содержимое ячейки заголовка отображается полужирным шрифтом с горизонтальным выравниванием по центру ячейки, а содержимое обычной ячейки – обычным шрифтом с выравниванием по левому краю.

Пример таблицы с заголовками столбцов:

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

<TABLE border=1>

<TR bgcolor=silver>

<TH>1.1<TH>1.2<TH>1.3</TR>

<TR><TD>2.1<TD>2.2<TD>2.3</TR>

<TR><TD>3.1<TD>3.2<TD>3.3</TR>

</TABLE>

Атрибуты тегов <TH> и <TD>:

– align и valign – горизонтальное и вертикальное выравнивание содержимого ячейки;

– background – фоновый рисунок ячейки;

– bgcolor – цвет фона ячейки;

– bordercolor – цвет границ ячейки;

– nowrap – отображение только той части текста ячейки, которое умещается в одной строке, таким образом высота строки не изменяется при изменении размеров окна браузера;

– colspan – количество ячеек, объединенных по горизонтали с указанной ячейкой (по умолчанию 1)

– rowspan – количество ячеек, объединенных по вертикали с указанной ячейкой (по умолчанию 1)

– width – ширина ячейки в пикселях или процентах от ширины таблицы.

При использовании атрибутов объединения ячеек colspan и rowspan нужно учитывать, что объединяемые ячейки из других строк или столбцов в соответствующих строках или столбцах никак не указываются, но считаются. То есть если во второй строке таблицы первая ячейка была объединена с первой ячейкой третьей строки, то первый тег <TD> в третьей строке будет описывать вторую ячейку этой строки:

1.1	1.2	1.3
2.1+3.1	2.2	2.3
3.2	3.3

<TABLE border=1>

<TR><TD>1.1<TD>1.2<TD>1.3</TR>

<TR><TD rowspan=2>2.1+3.1<TD>2.2<TD>2.3 </TR>

<TR><TD>3.2<TD>3.3</TR>

</TABLE>

Более сложный пример объединения ячеек:

1.1+1.2+2.1+2.2	1.3	1.4
2.3+2.4
3.1	3.2+3.3+4.2+4.3	3.4+4.4
4.1

<TABLE border=1>

<TR><TD colspan=2 rowspan=2>1.1+1.2+2.1+2.2

<TD>1.3<TD>1.4</TR>

<TR><TD colspan=2>2.3+2.4</TR>

<TR><TD>3.1<TD colspan=2 rowspan=2>3.2+3.3+4.2+4.3

<TD rowspan=2>3.4+4.4</TR>

<TR><TD>4.1</TR>

</TABLE>

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

Если требуется указать название таблицы, его можно создать с помощью парного тега <CAPTION>, который может располагаться только непосредственно после начального тега <TABLE>. Атрибут valign устанавливает, где будет расположен заголовок: над таблицей (значение top установлено по умолчанию) или под таблицей (bottom). Атрибут align управляет горизонтальным выравниванием.

1.1	1.2	1.3
2.1	2.2	2.3

Таблица с заголовком

<TABLE border=1>

<CAPTION valign=bottom>Таблица с заголовком</CAPTION>

<TR><TD>1.1<TD>1.2<TD>1.3</TR>

<TR><TD>2.1<TD>2.2<TD>2.3</TR>

</TABLE>

Порядок выполнения работы