Для вставки рисунков в HTML пользуются тегом IMG с обязательным атрибутом SRC. Данный инструмент направляет браузер на месторасположение файла изображения.

То есть, для ввода изображения с именем image.jpg в конкретную область странички, в случае расположения и ее, и рисунка в одном каталоге, нужно написать данную кодировку: <img src="image.jpg">.
 

В случае, если страничка и изображение занесены в различные папки, необходимо указать место, где расположен рисунок относительно веб-странички. К примеру, когда страничка располагается в папке website, и здесь же размещена папка logos, где и есть наше изображение image.jpg, тогда, для его ввода, нужно прописать такой код:     <img src="logos/image.jpg">

Также у тега IMG есть и другие инструменты. О них и пойдет речь дальше.

Для указания параметров изображения используются инструменты height и width. Width определяет параметры картинки, с помощью пикселей или процентов по ширине, height – по высоте.

 

Коды выглядят так:

<img src="image.jpg" width="60" height="30"> (пиксели), <img src=" image.jpg" width="20%" height="10%"> (проценты).

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

 

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

Вариант кода: <img src="image.jpg" alt="нужный текст">.

Выравнивание картинки.

Выровнять рисунок возможно с помощью инструмента align. Он определяет расположение картинки в зависимости от остальных элементов странички.

 

Самыми интересными являются два значения данного атрибута: left и right. Left располагает картинку на странице слева, в этом случае остальное содержимое страницы обтекает картинку справа, значение right дает прямо противоположную ситуацию.

 

Как образец: <img src="imag.jpg" align="left">, <img src="imag.jpg" align="right">.

Для полной отмены обтекания рисунков текстовыми документами и прочими элементами странички, применяется тег BR.

 

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

 

Отступы от картинки.

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

 

Задать отступы возможно инструментами vspace и hspace. Vspace создает вертикальные отступы, hspace – горизонтальные. Данные показатели указываются только пикселями. Как образец: <img src="image.jpg" align="left" vspace="10" hspace="10">.

Временами возникает необходимость выделить изображение рамкой. Например, рамка черного цвета создается инстументом border. Показатели указываются пикселями и формируют ее ширину. Примером может служить следующая кодировка: <img src="image.jpg" border="10">.

Все же не стоит забывать, что излишнее применение графики «утяжеляет» размер странички, отвлекает от общего содержания интернет-странички, а слишком пёстрое оформление режет глаз посетителям порталов.

 

Автор: Виктор Милованов