Графика на web-странице

Занятие 8

Publication version: 1

Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются браузером внутри. Для этого служит одиночный тег <IMG>. Обязательным атрибутом этого тега является атрибут src, значением которого является путь к файлу с рисунком или фотографией,

Если картинка лежит в той же папке, что и web-страница, то путь представляет собой просто имя файла, например: <IMG src=”boss2.gif”>.

Если картинка лежит в другой папке, то эту папку надо указать, например:

<IMG src=”/work/boss2.gif”>.

Если картинка лежит на другом сайте, то путь прописывается полностью, например: <IMG src="http://www.homepage.ru/my/my.jpg">.

В теге <IMG> можно также использовать необязательные атрибуты. Познакомимся с некоторыми из них.

Атрибуты height, width – задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах (от размера ширины или высоты окна браузера), например:

Атрибут border – задаёт толщину рамки вокруг картинки (в пикселях), например: <img src="Дом.jpg" border=4 width=400>.

По умолчанию рамка вокруг изображения в HTML не отображается, за исключением случая, когда изображение (картинка или фотография) является ссылкой. Если изображение является ссылкой, рамка добавляется автоматически, толщина её один пиксель, а цвет рамки совпадает с цветом текстовых ссылок. Обычно это синий цвет. Чтобы убрать рамку, следует задать атрибут border="0".

Атрибут bordercolor – задаёт цвет рамки вокруг картинки,
например: <IMG src="picture.gif" border="3" bordercolor="#CC0000">. В нашем примере цвет рамки задан красным. Но этот атрибут уже устарел и его поддержка в браузерах ограничена. Вместо bordercolor для стилизации границ таблиц следует использовать CSS.