Изображения на сайте значительно улучшают его внешний вид, оживляют сайт и отображают визуально представленную информацию. Редкий сайт удержит посетителя, если на нем представлен только текст. Изображения в HTML-документе могут легко позиционироваться и подвергаться дополнительной настройке с помощью тегов и атрибутов.
Вставка изображений в html-документ
Для загрузки изображения используется тег img, при этом указывается абсолютный или относительный путь к файлу. Указав относительный путь, картинка должна быть сохранена в папке с сайтом в подпапке с изображениями.
<img src="/images/pict.jpg"> - изображение в папке images
<img src="http://pictures.com/kartinka.jpg"> - картинка на другом сайте
После загрузки картинки, её размер можно изменить, с помощью атрибутов ширины (width) и высоты (height):
<img src="/images/pict.jpg" width="200" height="150">
Кроме вставки в контенте, изображение может являться фоном сайта. Для этого его нужно указать в теге body с помощью атрибута background:
<body background="images/fon.jpg">
Позиционирование изображения в тексте
После вставки изображения, его нужно позиционировать в тексте, для этого применяется атрибут align.
<img src="/images/pict.jpg" align="left">
После этого изображение выравняется слева от текста, так как указано значение left, чтобы выровнять справа - указать значение right. Также текст может располагаться вверху (top), внизу (bottom) или посередине (middle) относительно картинки.
После выравнивания изображения и текста обычно требуется установить отступ между ними. Это можно сделать с помощью атрибутов hspace и vspace:
<img src="/images/pict.jpg" vspace="10"> - отступ по вертикали
<img src="/images/pict.jpg" align="left" hspace="10"> - по горизонтали
Для прерывания обтекания изображения можно воспользоваться тегом br с атрибутом all:
<img src="/images/pict.jpg" align="left">Начало<br clear="all">текст...
После тега br, текст остановит обтекание и окажется под рисунком.
Дополнительные операции с изображениями
К картинке принято устанавливать описание, которое покажется при наведении:
<img src="/images/pict.jpg" alt="картинка">
По умолчанию изображению задается рамка со значением 1, чтобы её убрать следует установить значение 0
<img src="/images/pict.jpg" border="0">
Чтобы узнать как установить ссылку на изображение читайте следующую статью.
{social}
