Работаем с изображениями

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

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

Форматы:

GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым количество оттенков. Этот формат поддерживает прозрачность изображений.

JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики (с огромным количеством оттенков).

PNG - сравнительно новый формат. По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.

Вставить изображение на страницу очень просто - используем тег IMG. Элемент IMG не имеет закрывающего тега.

Вот самом простом случае файл лежит в той же папке, что и страница:

< img src=" pchela.jpg" >

В результате мы увидим:

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

<! -- если бы изображение находилось в папке images -->
< img src=" images/pchela.jpg" >
<! -- если б находилось на сайте www.zv.com -->
< img src=" https://www.zv.com/pchela.jpg" >
<! -- если б находилось на сайте www.zv.com в папке images -->
< img src=" https://www.zv.com/images/pchela.jpg" >

АТРИБУТЫ:

SRC (сокращение от source - положение) - указывает где находится изображение

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

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

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

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

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

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

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

Пример:

<! -- пример с отступами и выравниванием по левому краю-->
< p align=" justify" > < img src=" pchela.jpg" width=" 65" height=" 59" hspace=" 15" vspace=" 15" align=" left" >

Как можно изображение сделать ссылкой?

Для этого вместо текста ссылки необходимо вставить изображение. Когда делаем изображение ссылкой, вокруг него появляется некрасивая рамка(border) и, чтобы ее убрать, используют дополнительный атрибут border.

Пример:

< a href=" https://www.zv.com" >
< img src=" pchela.jpg" width=" 65" height=" 59" title=" Пчела мая!!! " border=" 0" >
< /a>