ЛабыWeb / ЛабРабота4

Тема «Графические объекты документа HTML»

Цель работы: Вставка графических объектов в web-странице.

Теория. Пользователь при просмотре Web-страницы особый интерес проявляет к изображениям. Из множества форматов графики в Интернет используются лишь три: jpeg/jpg, gif или png.

Дескриптор<IMG> Добавляет рисунок в Web-Страницу. Имеет следующие атрибуты:

1)ALIGN выравнивание рисунка в тексте или обтекание текста вокруг рисунка,

2)ALT альтернативный текст, 3)BORDER границы вокруг рисунка,

4)DYNSRC встроенное видео в формате AVI, 5)HEIGHT высота рисунка,

6)WIDTH ширина рисунка, 7)HSPACE отступ текста от рисунка по горизонтали,

8)VSPACE отступ текста от рисунка по вертикали,

9)ISMAP создание областей в рисунке на стороне сервера. Сообщает, что изображение является картой-изображением на стороне сервера,

10)LOWSRC путь к файлу миниатюрной копии рисунка

11)NAME имя рисунка 12) SRC путь к файлу рисунка,

13) tabindex порядок перехода при нажатии клавиши <ТаЬ>

14) usemap имя объекта определения областей рисунка. Сообщает, что изображение является картой-изображением на стороне клиента.

Обычно в Интернет используется графика с разрешением до 100 dpi. Стандартным для Интернет является разрешение 72 dpi. Уменьшение изображения существенно сокражает размер файла, так же как и уменьшение размера изображения, которое необходимо выполнить в любом графическом редакторе. WIDTH и HEIGHT картинки задают в пикселах или процентах. Всегда желательно явно устанавливать эти параметры для ускорения загрузки страницы браузером.

Примечание. Файл, на который ссылается дескриптор <IMG> , должен находиться в той же папке, что и файл web-страницы, либо перед именем файла необходимо указать путь к нему.

Задание. 1)С помощью редактора Paint (Рисунок - Изменить размер/наклонить) уменьшить размер рисунка «Водяные лилии» на 50% (дважды) и сохранить в свою папку под именем lilia.jpg.

2)Набрать текст web-страницы, сохранить как html-документ.

3) Измените для последнего абзаца выравнивание текста по левой стороне рисунка.

4) Задайте каждому изображению атрибут ALT, записав в качестве альтернативного текста название «Цветок водной лилии».

5) Отделите каждый абзац с рисунком горизонтальной полосой синего, зеленого и красного цветов, задав каждой линии свою толщину и ширину, для чего используйте непарный тег <HR> .

Теория. Дескриптор <HR> добавляет в HTML документ горизонтальную линию. Перед и после линии помещается пустая строка.

Атрибуты

SIZE –устанавливает высоту(толщину) линии ;

WIDTH – устанавливает ширину линии в пикселах или процентах ;

NOSHADE – создает линию без тени ;

COLOR – задает линии определенный цвет .

Пример красной линии с заданной толщиной <hr size=3 color=’red’>

Дескриптор <MAP> определяет коллекцию чувствительных областей в графическом изображении, при этом различные участки изображения могут быть ссылками на различные ресурсы. Чувствительные области задаются тегами <AREA>.

Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <AREA> задает форму области, ее координаты, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ.

Дескриптор <MAP> является парным , а дескриптор <AREA> - непарным.

<MAP Name =”AAA”>  <AREA HREF="URL" ALT=”текст” SHAPE=”тип_фигуры” COORDS=”A,B,C,D…”> </MAP>

Атрибуты тега <Area>

ALT - альтернативный текст для области изображения.

TARGET - имя окна или фрейма, куда браузер будет загружать документ.

COORDS – координаты чувствительных областей карты изображений. Задание координат зависит от формы области - атрибута shape .

Тип фигуры	Значение атрибута COORDS
RECT - прямоугольник	COORDS="A,B,C,D", где A,B - координаты верхнего левого угла области. C,D - координаты правого нижнего угла области.
CIRCLE - окружность	COORDS="A,B,R", где A,B - координаты центра окружности. R - радиус окружности.
POLY - многоугольник	COORDS="A,B,C,D, ... ,A,B". Каждая пара задает координаты вершин многоугольника. Первая и последняя пары координат должны совпадают, задавая замкнутую фигуру.

HREF – URL-адрес или ссылка на HTML-файл.

NOHREF – ссылка для заданной области отсутствует.

SHAPE – тип фигуры может принимать следующие значения: RECT (прямоугольник), CIRCLE (окружность), POLY (многоугольник).

Задание. 1)Создайте папку «тег Area», куда скопируйте файл «Водные лилии». 2) Создайте в папке , используя блокнот, файл с именем F.HTML и наберите/скопируйте текст в него:

<html><head><title>Пример использования карты изображения</title></head><body>

<MAP NAME="test">

<AREA HREF="?.html" ALT="ЛИСТЬЯ КУВШИНКИ - область Прямоугольник" SHAPE="rect" COORDS="0,0,798,128">

<AREA HREF="??.html" ALT="ЦВЕТОК КУВШИНКИ_ область Треугольник" SHAPE="poly" COORDS="16,339,192,469,13,501">

<AREA HREF="?.html" ALT="ЦВЕТОК КУВШИНКИ С НАСЕКОМЫМ _область Круг" SHAPE="circle" COORDS="198,182,51">

<AREA HREF="?.html" ALT="ЦВЕТОК КУВШИНКИ С НАСЕКОМЫМ - область Круг" SHAPE="circle" COORDS="527,209,56"> </MAP>

<img src="Водяные лилии.jpg" border="0" usemap="#test">

</body></html>

3) Сохраните набранное. Откройте файл F.HTML в Internet Explorer и наведите курсор мыши сначала на верхнюю часть рисунка(где только листья), затем на цветки с насекомыми, а затем на цветок в нижнем левом углу картинки.

4)Для того чтобы работали гиперссылки , необходимо скопировать в папку «тег Area» три любых готовых html –файла и их имена записать вместо знаков вoпроса в теге AREA в значении атрибута HREF. Добавьте свои файлы и сохраните изменения в файле F.HTML . Откройте F.HTML и проверьте работу гиперссылок.

Самостоятельная работа

1. Создайте графический файл, показанный ниже:

2. Создайте на каждую фигуру ссылку на разные файлы Html.. Проверьте< как работают эти гиперссылки. Создайте для фона картинки отсутствие ссылку на другой объект.