Санкт-ПетербургИзображения (рисунки, фотографии) это один из основных элементов любого сайта. О Важности этого элемента Вы убедитесь на странице Проекта

"Ваш сайт" Размещение изображений.

Мы не будем рассматривать какие существуют форматы изображений. Какие предьявляются требования к изображениям. Во всем этом Вы сами разбираетесь прекрасно.

Итак как вставить изображение на страницу.

1).  изображение лежит в той же папке что и страница.

В работе учавствует Тег IMG, закрывающего тега нет.

И атрибут SRC (сокращение от source = положение). Данный атрибут указывает где находится изображение. Следовательно можно легко вставлять изображения, размещенные в других папках или на других сайтах. Что нужно - это указывать правильный путь.

Примеры:

<img src="images/ pikine.jpg"> изображение находится в папке “images
<img src="http://www.aragrig.ru/pikine.jpg"> изображение находится на сайте www.aragrig.ru

<img src="http:// www.aragrig.ru/images/ pikine.jpg ">  изображение находится на сайте www.agrig.ru  в папке images

Атрибуты:

ALIGNприменяется для выравнивания картинки по горизонтали.

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

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

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

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

 

Примеры:


отступами и выравниванием по правому краю

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

отступы и выравнивание по левому краю

align="justify"> <img src="pikine.jpg" width="65" height="59" hspace="15" vspace="15" align="left">
Атрибуты - ALT и TITLE .
ALT - определяет текст названия изображения, будет отображаться когда браузер не может найти файл с изображением или включен в текстовый режим.

Пример:

<img src="pikine.jpg" alt="пик Ине" width="65" height="59">

 

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

Пример:

<img src="pikine.jpg" width="65" height="59" title="пик Ине">

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

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

Конечно же, здесь представлены только азы работы с рисунками и фотографиями. Но главное, на что я хотел обратить внимание, это всего лишь один тег и несколько атрибутов, превращают сайт в архитектурный шедевр. Такие сайты, Я и Вы наверняка видели. И Вы сможете.