HTML Учимся создавать сайт [Работа с изображениями]

[Salvage]

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

GIF (Graphics Interchange Format)

JPG / JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

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

<img src="logo.jpg">

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

<!-- если бы изображение находилось в папке images -->
<img src="images/logo.jpg">
<!-- если б находилось на сайте www.pawno-info.ru -->
<img src="http://www.pawno-info.ru/logo.jpg">
<!-- если б находилось на сайте www.************** в папке images -->
<img src="http://www.**************/images/logo.jpg">

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

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

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

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

Ладно, лучше все смотреть на примерах:

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

<p align="justify"> <img src="logo.jpg" width="65" height="59" hspace="15" vspace="15" align="left"> 
Ваш текст.</p>

<!-- второй пример с отступами и выравниванием по правому краю-->
<p align="justify"> <img src="logo.jpg" width="65" height="59" hspace="15" vspace="15" align="right"> 
Ваш текст.</p>

<!--третий пример без отступов, с выравниванием по левому краю-->
<p align="justify"> <img src="logo.jpg" width="65" height="59" align="left"> 
Ваш текст.</p>

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

<img src="logo1.jpg" alt="Павно" width="65" height="59">

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

<img src="logo.jpg" width="65" height="59" title="Павно" >

Что бы сделать ссылку на изображении нужно сделать:

<a href="http://www.pawno-info.ru">
<img src="logo.jpg" width="65" height="59" title="Павно" border="0" >
</a>

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

Ну вот в принципе и все с изображениями, как видите ничего сложного нет.