Задание размеров выводимого изображения
Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображения при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселах, так и в процентах от размеров окна просмотра.
Значения параметров ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры автоматически при загрузке изображений выполняют его перемасштабирование. Заметим, что неаккуратное задание параметров может привести к изменению пропорций рисунка и, как следствие, к его искажению.
Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр будет вычисляться автоматически из условий сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения.
Приведем пример HTML-кода, отображение которого показано на рисунке. Для изменения масштаба использовано указание ширины изображения, а его высота автоматически масштабируется.
<HTML>
<TITLE>Задание размеров изображения</TITLE>
<BODY>
<IMG SRC=eagle.jpg WIDTH=300>
<IMG SRC=eagle.jpg >
<IMG SRC=eagle.jpg WIDTH=75>
</BODY>
</HTML>
Созданную страницу сохраните с именем lab9_4.html.
Отделение изображения от текста
Для тэга <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия. В приведенном ниже примере, со всех четырех сторон задан отступ, равный 20 пикселам.
<HTML>
<TITLE>Использование параметровHSPASEVSPASE</TITLE>
<BODY>
<IMG SRC=romb.jpg ALIGN=left HSPACE=20 VSPACE=20>
(текст абзаца)
<P>
(текст абзаца)
</BODY>
</HTML>
Рамки вокруг изображений
Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
На рис. показан пример задания рамок различной толщины для одного и того же изображения. HTML-код данного примера приведен ниже:
<HTML>
<TITLE>Помещение изображения в рамку</TITLE>
<BODY>
<IMG SRC=eagle.jpg >
<IMG SRC=eagle.jpg BORDER=1>
<IMG SRC=eagle.jpg BORDER=5>
<IMG SRC=eagle.jpg BORDER=10>
</BODY>
</HTML>
Созданную страницу сохраните с именем lab9_5.html.
Практическое задание.
С учетом все приведенных возможностей языка HTMLиз работ № 7,8,9 создайтеWeb– страницу на свободную тему. Используйте не менее 5 гиперссылок, 1 список маркированный, 1 список нумерованный, таблицу, картинки. Если у вас нет возможности использовать собственные картинки, можете воспользоваться папкойWebArtв лабораторном практикуме.