Интернет-браузеры поддерживают два основных формата изображений - GIF и JPEG. Тип файлов GIF (Graphical Interchange Format) стал первым типом файлов, поддерживаемых сетью. Файлы в более позднем формате JPEG (Joint Photographic Experts Group) за счет специальной техники компрессии изображений занимают меньше места, чем файлы GIF, поэтому быстрее загружаются. Сохраняют цвета и детали лучше, чем GIF.

Итак, зальем картинку на сайт и займемся ее кодом:

Изображения можно помещать в любом месте Web-страницы, в текст, таблицы, заголовки с помощью элемента IMG (image), состоящего из одного тега и атрибута src="имя файла". Это обязательный атрибут.

Код нашей картинки выглядит так:

<img src="http://donadecasa.ucoz.ru/images/girl.jpg">

Рамка вокруг рисунка задается атрибутом border в теге IMG. Толщина рамки задается значением атрибута в пикселях от 1.

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" border="0">

Загрузка изображений занимает много времени. Возможен режим просмотра документов, когда браузер не выводит изображение. Альтернативный текст на месте рисунка - это краткое описание того, что представлено на рисунке. Прочитав этот текст, можно загрузить изображение, если оно представляет интерес. Для этого используем атрибут alt:

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" alt="Девочка">

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

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" width="120" height="123">

Справа и слева от рисунка можно создать пустое пространство с помощью атрибута hspace элемента IMG, сверху и снизу - с помощью атрибута vspace элемента IMG. Размеры задаются в пикселях. Это важно, чтобы картинка не "слипалась" с текстом.

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" hspace="5" vspace="5">

Теперь выберем выравнивание картинки относительно страницы (справа, слева или по центру):

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" align="right|left|center">

Выравнивание по левому краю задается по умолчанию.

Картинка может быть ссылкой. Для этого ее код впишем в адрес:

<a href="URL ссылки"><img src="http://donadecasa.ucoz.ru/images/girl.jpg"></a>

Именно таким образом можно превратить простую картинку в кнопку))

Итак, посмотрим, что у нас получится, если мы пропишем все необходимые атрибуты для этой картинки и разместим ее в тексте:

<img src="http://donadecasa.ucoz.ru/images/girl.jpg" border="0" align="right" hspace="5" vspace="5" width="120" height="123" alt="Девочка">

Пример текста с картинками-ссылками смотрим здесь.