Урок 7: Работаем с изображениями

Есть три типа файлов изображений, которые можно вставить на ваши страницы:

GIF (Graphics Interchange Format)

JPG / JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

Вставить изображение на страницу очень просто. Вот пример если оно лежит в той же папке что и страница.

<img src="pchela.jpg">

Что нам понадобилось: элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь (примерно так как при созданиии ссылок).

Вот еще несколько примеров с комментариями:

<!-- если бы изображение находилось в папке images -->

<img src="images/pchela.jpg">

<!-- если б находилось на сайте www.zvirec.com -->

<img src="http://www.zvirec.com/pchela.jpg">

<!-- если б находилось на сайте www.zvirec.com в папке images -->

<img src="http://www.zvirec.com/images/pchela.jpg">

Вот еще очень необходимые атрибуты:

ALIGN - определяет способ выравнивания картинки по горизонтали. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа.

HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. И еще, не советую Вам искажать реальные размеры картинки.

<!-- первый пример с отступами и выравниванием по левому краю-->

<p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left">

Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза &quot;научиться создавать сайты&quot; будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>

ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения:

<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59">

TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title:

<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! " >

Можно изображение сделать ссылкой.

Для этого просто вместо текста ссылки, вставляете изображение:

<a href="http://www.zvirec.com">

<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! " border="0" >

</a>

border="0" : когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border.