Работа с изображениями

Изображения - это фотографии, логотипы, значки и прочие визуальные объекты, которые можно поместить на Web-страницу. В этой главе вы научитесь вставлять изображения в страницу и управлять ими.

Вставка изображения

Изображения на Web-страницах играют роль оформления или иллюстрации. Это могут быть фотографии или графика. В терминах HTML изображения - это встроенные элементы, то есть их код содержиться в теле страницы наряду с текстом.

Вставка графического файла или фотографии
  1. Введите <IMG SRC="?">, где ? - путь к графическому файлу или фотографии.


Размер изображения

Если на странице изображение выглядит слишком большим или слишком маленьким, можно изменить его размер с помощью кода HTML. Можно задавать ему ширину и высоту. Эти параметры задаются в пикселях или в процентных долях экрана.

  1. В тег <IMG> добавьте атрибут WIDTH="?", где? - желаемая ширина изображения.
  2. В тег <IMG> добавьте атрибут HEIGHT="?", где? - желаемая высота изображения.


Примечание: Также можно задавать ширину и высоту в процентах от общей ширины и высоты окна. Процентные доли задаются знаком процента - %.


Горизонтальное выравнивание изображения

Атрибуты выравнивания LEFT и RIGHT управляют положением изображения по горизонтали. Они же управляют обтеканием текста вокруг изображения. По умолчанию изображения выравниваются по левому краю страницы.
  1. В тег <IMG> добавьте атрибут ALIGN="?", где ? - выравнивание по левому (left) или по правому (right) краю страницы.


Вертикальное выравнивание изображения

Вертикальное расположение изображения на странице определяется атрибутами Top, Middle и Bottom. Особенно они полезны для выравнивания изображения относительно его подписи.
  1. В тег <IMG> добавьте атрибут ALIGN="?", где ? - выравнивание по середине (Middle), по верхней (Top) или нижней (Bottom) границе. Если изображение находится на одной строке с текстом, атрибуты регулируют его положение относительно этого текста.


Выравнивание по центру страницы

Изображение можно поместить в центр страницы. Так оно будет выделяться среди текста и других элементов.
  1. Перед тегом <IMG> введите тег <CENTER>.
  2. После тега <IMG>, со всеми атрибутами и путем к изображению, введите тег <CENTER>.


Обтекание текста между изображениями

Два изображения можно поместить рядом и между ними вставить текст. для этого нужно выровнять одно из них слева, а другое - справа.
  1. В HTML-коде вставьте перед текстом два изображения.
  2. В первый тег <IMG> добавьте ALIGN="left"
  3. Во второй тег <IMG> добавьте ALIGN="right"
  4. Результат: текст находится на странице между двумя изображениями.


Рамки

Чтобы выделить изображение, в информативных или просто в эстетических целях, его можно заключить в рамку. У рамки можно задать толщину в пикселях и изменять ее цвет.
  1. В тег <IMG> добавьте атрибут BORDER="?", где ? - толщина рамки. Значение "0" означает ее отсутствие.
  2. В тег <IMG> с атрибутом BORDER="?", введите еще один атрибут BORDERCOLOR="?", изменяющий цвет рамки, где ? - цвет рамки.


Отступы изображений

Большинство браузеров почти не оставляют места между изображениями и текстом. Расстояние между ними можно увеличить, и читаемость и общий вид страницы значительно улучшаттся. Горизонтальные отступы регулируются атрибутом HSPACE, вертикальные - VSPACE
  1. В тег <IMG> добавьте атрибут HSPACE="?" или VSPACE="?", где ? - величина отступа. Можно одновременно использовать оба атрибута.


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

Изображение можно поместить на фон страницы. При выборе фонового изображения всегда следите за разборчивостью текста. Возможно, потребуется сменить его цвет.
  1. В тег <BODY> добавьте атрибут BACKGROUND="?", где ? - путь к файлу изображения.


Примечание: Большое изображение заполнит весь фон. Маленькое размножится по нему мозаикой.

Сделано в студии ladoga-design.ru