Изображения на сайт.



Графическим изображением могут быть: схемы, рисунки, карты, заголовки в виде изображений и т.д.

Изображения на сайт добавляют в два этапа. Готовится графический файл необходимого размера, затем с помощью тега <img> добавляется на страницу. На web-страницах используют как фоновое так и самостоятельное изображение. Используемые форматы JPEG, GIF и PNG. Все изображения хранят в отдельной папке, например images. Пути к изображения прописывают как ссылки. Объем графического файла существенно влияет на загрузку страницы документа. Чем меньше изображение, тем быстрее оно отобразится на странице.

Фоновые изображения

Фоновое изображение заполняет все пространство web-страницы. Оно повторяется и по горизонтали и по вертикали. Если указать атрибут background="bgr.gif" на странице документа, то весь фон зальется этим рисунком.

Пример записи кода:

<html> <head> <title></title> </head> <body background="../images/bgr.gif" bgcolor="blue"> Содержание документа </body> </html>

Смотрите результат:

Атрибут bgcolor="blue" пишем для того, чтобы если у пользователя отключена загрузка изображения, браузер будет использовать этот параметр.

Размещение изображений

Для размещения изображений используют атрибут <img>, имеющий единственный параметр src - адрес изображения.

Пример записи кода:

<html> <head> <title></title> </head> <body> <img src="../Poleznoe/images/icon.png"/>Далее содержание документа. </body> </html>

РЕЗУЛЬТАТ:

Далее содержание документа.


Для того, чтобы текст не прилегал к картинке применяют параметр align, который имеет атрибуты


bottom    Нижняя граница изображения выравнивается по тексту
left   Изображение располагается слева, а текст обтекает его. Текст может состоять из нескольких абзацев.
middle   Изображение располагается по центру текущей строки.
right   Изображение справа, текст обтекает изображение слева.
top   Изображение выравнивается по самому высокому элементу текущей строки.

Иногда текст необходимо расположить под картинкой, в этом случае используется атрибут <br> с параметром clear запрещающий обтекание. Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all).


Пример записи кода:

<html> <head> <title></title> </head> <body> <img src="../Poleznoe/images/icon.png" width="64" height="64"/><br clear="all"> Остальное содержание документа. </body> </html>

РЕЗУЛЬТАТ:


Остальное содержание документа.

Размеры изображений


Размер изображения выражается в пикселях. Иногда при размещении на страницу приходится уменьшать размер исходного изображения.

Для этого к тегу <img> применяют параметры width - ширина и height - высота. Ширина и высота задаются в пикселах или в процентах от ширины экрана. Браузер автоматически масштабирует картинку к заданным параметрам ширины и высоты.

Пример записи кода:

<html> <head> <title></title> </head> <body> <img src="../Poleznoe/images/icon.png" width="90" height="90" /> <img src="../Poleznoe/images/icon.png" width="60" height="60" /> <img src="../Poleznoe/images/icon.png" width="40" height="40" /> </body> </html>

РЕЗУЛЬТАТ:


Отделить изображения от текста


Когда текст прилипает к картинке - это не совсем красиво. Для этого применяют параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.


Пример записи кода:

<html> <head> <title></title> </head> <body> <img src="../Poleznoe/images/icon.png" width="64" height="64" align="left" hspace="20" vspace="20"> Содержимое документа при использовании этих параметров не прилипает к изображению. </body> </html>

РЕЗУЛЬТАТ:

Содержимое документа при использовании
этих параметров не прилипает к изображению.
Как видно документ выглядит интереснее.


Изображение в качестве ссылки


Изображение может быть ссылкой. Для этого его нужно поместить между тегами <a></a>, а атрибут <href> указывает адрес перехода.

Пример записи кода:


<html> <head> <title></title> </head> <body> <a href="http://valvas.ru" target="_blank"><img src="../Poleznoe/images/icon.png" alt="Кофе"></a> </body> </html>

РЕЗУЛЬТАТ:


Наша картинка теперь работает как ссылка. Вокруг изображения может быть рамка. В этом случае мы прописываем атрибут border="0", чтобы ее не было.


Далее рассмотрим: Создаем таблицы.