Графика

Рисунки и анимация могут сделать HTML-документ более привлекательным и интересным. Они не только украшают страницу, но и помогают лучше передать содержание документа. Для правильного использования графики в HTML-документе необходимо учитывать следующие факторы: многие браузеры поддерживают только графические форматы GIF и JPEG; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических браузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом. Если картинка хранится в файле с расширением отличным от .gif или .jpg, то вам необходимо будет выполнить преобразование формата изображения в нужный. Для этого можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.

Изображения GIF (Graphics Interchange Format) могут содержать 256 цветов и используются, в основном, для отображения рисунков. Кроме того, этот формат обладает средствами поддержки анимации и прозрачности.

Изображения JPEG (JPG) (Joint Photographic Experts Group) содержат более 16 млн. цветов. Данный формат используется для хранения фотографий и крупных изображений.

Как правило, в процессе конвертации файла в формат .gif или .jpg его размер уменьшается, что способствует увеличению скорости загрузки картинки.

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

Разработчики веб-странц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра. Если размер изображения меньше размеров окна просмотра, то оно будет размножаться по принципу мозаики. Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были невидимыми. Эта задача напоминает подбор рисунка при оклеивании обоями стен комнаты.

Обычно в качестве фонового борется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Существуют огромные коллекции изображений (текстур), которые можно использовать при разработке своих собственных HTML-документов.
Другим часто используемым вариантом является фоновое изображение в виде бледного рельефного логотипа. Такая графика ясно идентифицирует сайт и не мешает восприятию материала.

Для задания цвета фона употребляется параметр BGCOLOR тега <BODY>, а фоновое изображение включается в документ при помощи параметра BACKGROUND. В качестве значения параметра BGCOLOR указывается название цвета или его составляющие в шестнадцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG.

Приведем пример записи тэга <BODY> с указанием фонового цвета и фонового изображения:
<BODY background="texture.gif" bgcolor="gray">

Заметим, что одновременное задание параметров background и bgcolor вовсе не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать.

Встраивание изображений в HTML-документы

Для встраивания изображений в HTML-документ следует исмпользовать тэг <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Этот параметр указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием picture.gif в определенное место html-страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
<IMG SRC=picture.gif>

Если графика и страница расположены в разных каталогах, то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге site, в этом же каталоге расположен подкаталог images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать так:
< img src="images/picture.gif">

Помимо обязательного параметра SRC у тега IMG есть еще несколько необязательных параметров. Рассмотрим их подробнее:

width — ширина изображения в пикселах или процентах;

height — высота изображения в пикселах или процентах.

Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится. Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя).
Например:
< img src="picture.gif" width="50" height="20">
или
< img src="picture.gif" width="10%" height="5%">

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG>. Возможные значения этого параметра:

Значение параметра ALIGN	Действие параметра
ТОР	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
ТЕХТТОР	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения посередине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны

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

Для тега <IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно, по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.
Например:
<IMG SRC=spb.gif ALIGN=left HSPACE=20 VSPACE=20>

Рамки вокруг изображений

Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тега <IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселах. По умолчанию рамка вокруг изображений не рисуется. Исключением из этого правила является случай, когда изображение является ссылкой.
Например:
<IMG SRC=map.gif BORDER=1>

Альтернативный текст

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

При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT.

Современные браузеры будут также отображать альтернативный текст в качестве подсказки (tooltip) при помещении курсора мыши в область изображения.
Например:
<IMG SRC=moscow.gif ALT="Герб Москвы">

<<Назад Вперед>>

Все для сайта

Графика

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

Встраивание изображений в HTML-документы

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

Рамки вокруг изображений

Альтернативный текст