Добавление изображений к html странице.
Для добавления к web–странице файла с изображением используется тег <img>, с обязательным атрибутом src, который будет указывать на файл с изображением.
<p><center><img src="../img/cat.gif" alt="Это кот "></center></p>
Форматирование изображений.
Для форматирования текста, расположенного рядом с изображением используется атрибут тега <img> – allign. Пример его работы вы можете видеть ниже:
Значение |
Вид |
Rigth Hspace=10px |
б ла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла |
Left Hspace=3px |
б ла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла |
Top Hspace=10px Vspace=5px |
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла |
Middle Hspace=1px Vspace=12px |
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла |
Bottom Hspace=10px Vspace=10px |
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла |
Для дополнительного форматирования изображений могут быть использованны атрибуты hspace и vspace, которые определяют интервал между графическим изображением и расположенным возле текстом по горизонтали и вертикали. Величина отступа задается в пикселях. В примере сверху вы можете видеть влияние этих атрибутов на форматирование.
Также форматировать изображение можно посредством атрибута border, задающего ширину рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.
Аттрибуты height и width позволяют задать размер изображения по ширине и высоте. Задать размер можно как в пиксельной, так и в процентной величине. По умолчанию браузер устанавливает изображению его реальные размеры, но я вам настоятельно рекомендую всегда использовать эти атрибуты и задавать размер изображения вручную. Связанно это с тем, что при невозможности загрузить изображения браузер установит ему случайные размеры и получится пустой квадрат со случайным размером, который почти наверняка искаверкает общий каркас сайта, что приведет к неправильному отображению последнего. Если же атрибуты размера установленны, то даже при невозможности загрузки изображения каркас сайта не будет нарушен.
Атрибут ALT – указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе «Как раскрутить сайт самостоятельно и с нуля ».
Использование фона в html.
Одним из наиболее важных факторов графического оформления сайта является использование фона. Для создания фона, состоящего из одного сплошного цвета используется атрибут bgcolor со значением цвета. Для использования изображения в качестве фона используется атрибут background с адресом фонового рисунка. Особенностью тега backgroundявляется то что он при открытии изображения помещает его в полном размере в левый верхний угол экрана и начинает его тиражировать на весь экран, что позволяет добиваться довольно интерестных эффектов. Например:
Я текст на красном фоне |
<body bgcolor="red"> <p align="center"> я текст на красном фоне </p> </body>
Я текст на фоне маленького кота |
"../img/cat_mini.gif">
<p align="center">
я текст на фоне маленького кота
</p></body>
я текст на фоне кота побольше |
<body background= "../img/cat.gif"> <p align="center"> я текст на фоне кота побольше </p></body>