Работа с изображениями
Изображения - это фотографии, логотипы, значки и прочие визуальные объекты, которые можно поместить на Web-страницу. В этой главе вы научитесь вставлять изображения в страницу и управлять ими.
Вставка изображения
Изображения на Web-страницах играют роль оформления или иллюстрации. Это могут быть фотографии или графика. В терминах HTML изображения - это встроенные элементы, то есть их код содержиться в теле страницы наряду с текстом.
Вставка графического файла или фотографии
Введите <IMG SRC="?">, где ? - путь к графическому файлу или фотографии.
Размер изображения
Если на странице изображение выглядит слишком большим или слишком маленьким, можно изменить его размер с помощью кода HTML. Можно задавать ему ширину и высоту. Эти параметры задаются в пикселях или в процентных долях экрана.
В тег <IMG> добавьте атрибут WIDTH="?", где? - желаемая ширина изображения.
В тег <IMG> добавьте атрибут HEIGHT="?", где? - желаемая высота изображения.
Примечание: Также можно задавать ширину и высоту в процентах от общей ширины и высоты окна. Процентные доли задаются знаком процента - %.
Горизонтальное выравнивание изображения
Атрибуты выравнивания LEFT и RIGHT управляют положением изображения по горизонтали. Они же управляют обтеканием текста вокруг изображения. По умолчанию изображения выравниваются по левому краю страницы.
В тег <IMG> добавьте атрибут ALIGN="?", где ? - выравнивание по левому (left) или по правому (right) краю страницы.
Вертикальное выравнивание изображения
Вертикальное расположение изображения на странице определяется атрибутами Top, Middle и Bottom. Особенно они полезны для выравнивания изображения относительно его подписи.
В тег <IMG> добавьте атрибут ALIGN="?", где ? - выравнивание по середине (Middle), по верхней (Top) или нижней (Bottom) границе. Если изображение находится на одной строке с текстом, атрибуты регулируют его положение относительно этого текста.
Выравнивание по центру страницы
Изображение можно поместить в центр страницы. Так оно будет выделяться среди текста и других элементов.
Перед тегом <IMG> введите тег <CENTER>.
После тега <IMG>, со всеми атрибутами и путем к изображению, введите тег <CENTER>.
Обтекание текста между изображениями
Два изображения можно поместить рядом и между ними вставить текст. для этого нужно выровнять одно из них слева, а другое - справа.
В HTML-коде вставьте перед текстом два изображения.
В первый тег <IMG> добавьте ALIGN="left"
Во второй тег <IMG> добавьте ALIGN="right"
Результат: текст находится на странице между двумя изображениями.
Рамки
Чтобы выделить изображение, в информативных или просто в эстетических целях, его можно заключить в рамку. У рамки можно задать толщину в пикселях и изменять ее цвет.
В тег <IMG> добавьте атрибут BORDER="?", где ? - толщина рамки. Значение "0" означает ее отсутствие.
В тег <IMG> с атрибутом BORDER="?", введите еще один атрибут BORDERCOLOR="?", изменяющий цвет рамки, где ? - цвет рамки.
Отступы изображений
Большинство браузеров почти не оставляют места между изображениями и текстом. Расстояние между ними можно увеличить, и читаемость и общий вид страницы значительно улучшаттся. Горизонтальные отступы регулируются атрибутом HSPACE, вертикальные - VSPACE
В тег <IMG> добавьте атрибут HSPACE="?" или VSPACE="?", где ? - величина отступа. Можно одновременно использовать оба атрибута.
Фоновые изображения
Изображение можно поместить на фон страницы. При выборе фонового изображения всегда следите за разборчивостью текста. Возможно, потребуется сменить его цвет.
В тег <BODY> добавьте атрибут BACKGROUND="?", где ? - путь к файлу изображения.
Примечание: Большое изображение заполнит весь фон. Маленькое размножится по нему мозаикой.
