` ` ` Web-хитрости и не только...: Работа с изображениями

Трудно представить себе сайт, на страницах которого не содержались бы изображения, которые делают сайт более привлекательным и непохожим на другие ресурсы, однако, следует помнить, что переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время ее загрузки.
Во-первых, все вложения в WEB страницу производятся между тегами BODY, думаю, следует напомнить, что если в качестве фона используется изображение(картинка), то применяется тег background с указанием URL-адреса картинки:

<BODY background="http://адрес картинки">

Во-вторых, рассмотрим непосредственно порядок установки изображения на странице.
Для вставки изображения используется тег IMG с обязательным атрибутом SRC, который указывает браузеру путь к файлу изображения. Для вставки картинки в определенное место html-страницы нужно записать следующий html-код:

<img src="http://адрес картинки">

Для вставки изображения на страницу используются еще несколько необязательных атрибутов. Рассмотрим их подробнее:
width — ширина изображения; height — высота изображения.
Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от размеров окна браузера), так и в процентах (размер картинки будет зависить от размеров окна браузера). Например:

< img src="http://адрес картинки" width="150" height="80">
или
< img src="http://адрес картинки" width="30%" height="10%">

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

< img src="адрес" width="130"> < img src="адрес" width="130" height="60">

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

<img src="адрес картинки" alt="Логотип сайта">

В этом случае повторю, если отключен показ графики, браузер вместо самой картинки покажет текст в значении атрибута alt, если же графика включена, картинка скроет альтернативный текст.
Атрибутом align выравниванием изображение относительно других элементов html-страницы:
left — картинка у левого края страницы, текст будет располагаться справа;
right — картинка у правого края страницы, текст соответственно слева.

<img src="адрес" align="left"> <img src="адрес" align="right">

Логотип сайта

По умолчанию изображение встраивается вплотную к тексту и другим элементам. Однако можно задать пустые поля вокруг картинки с помощью следующих атрибутов тега IMG:
vspace — задает верхнее и нижнее поля; hspace — задает боковые поля.
Значения этих атрибутов указывается в пикселях.

<img src="адрес" align="left" vspace="10" hspace="15">

Задать границы обтекания текстом изображения можно также посредством тегов CSS:

<img src="адрес" style="float: left; margin-right: 15px;">

обтекание текстом обтекание текстом обтекание текстом обтекание текстом обтекание текстом обтекание текстом обтекание текстом обтекание текстом обтекание текстом

Для прекращения обтекания текстом изображения используется тег BR, у которого есть атрибут clear принимающий три значения:
left — прекращение обтекания изображений, выровненных по левому краю;
right — прекращение обтекания изображений, выровненных по правому краю;
all — прекращение обтекания изображений, выровненных по левому и правому краю.

<br clear="left">

Вокруг изображений можно создать черную рамку с помощью атрибута border. Значение в пикселях определяет толщину рамки:

<img src="адрес" border="10">

Задать цветную рамку вокруг изображения можно посредством тегов CSS:

<img src="адрес" style="border: 10px solid #FF00FF;">

Посредством команды border-radius (закругление углов обрамления в CSS) можно задать закругление для каждого угла рамки (обрамление текста или изображения оригинальной рамкой).

КОД ЛЮБОГО ЦВЕТА ВЫ МОЖЕТЕ ВЫБРАТЬ ЗДЕСЬ
...Дерзайте...