Работа с графикой

Вставка графики

Для размещения в документе картинки используется тег IMG с параметром SRC.

Параметр задаёт расположение файла, содержащего изображение. Кавычки желательны. Сам графический файл при этом должен находится по указанному адресу.

Пример:
<IMG SRC="IMG/myfile.jpg">

Наиболее часто используются два формата графических файлов- JPEG и GIF.

Формат GIF

GIF- это формат, который поддерживает максимально 256 цветов. Поддерживается прозрачный фон. Не вносит в изображение искажений. Используется для графиков, схем, текста.

Использование прозрачного фона можно продемонстрировать на следующем примере:

Непрозрачный фон		Прозрачный фон

Формат JPEG

JPEG- это формат файлов, который обычно использует 16 млн. цветов. Файлы формата JPEG характеризуются высокой степенью сжатия, занимают мало места. JPEG использует сжатие с потерей данных, мелкие детали теряются. Используется для фотографий.

Демонстрация потери качества при использовании формата JPEG (высокое сжатие)

Нормальный размер		При увеличении

Параметры

ALT		параметр, задающий альтернативный текст. Например, если картинка не найдена или ползователь не загружает графику, данный текст отображается вместо изображения. Принято также отображать указанный текст как всплывающую подсказку. Пример отображения рисунка, в который не загружена графика :
ALIGN		параметр выравнивания по горизонтали. Значения: LEFT (слева), MIDDLE (посередине), RIGHT (справа).
WIDTH		можно задать ширину рисунка. Если задать реальную ширину и высоту рисунка, то гипертекстовый документ чуть быстрее загружается, не настолько теряется внешний вид документа, если файлы графики отсутствуют. При задании уменьшенной (увеличенной) велины, изображение масштабируется.
HEIGHT		высота рисунка.
BORDER		рамка вокруг рисунка. Задавая этот параметр можно менять, например, расстояние от рисунка до текста. Когда рисунок служит ссылкой, параметр BORDER определяет ширину цветной рамки вокруг рисунка. Для отключения этой рамки используется BORDER=0.
VSPACE, HSPACE		HSPACE задаёт отсупы справа и слева от рисунка, VSPACE задаёт отсупы до и после. Т.е. использование этих двух параметров имеет большую гибкость по сравнению с BORDER, который задаёт одинаковые отсупы и по горизонтали, и по вертикали.

Масштабирование изображений

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

Пример:
Исходный размер изображения 100 (ширина) на 200 (высота).

A Нужно, чтобы изображение было высотой 50.
<IMG SRC="IMG/myfile.gif" HEIGHT=50>, без искажений.

B Задаём два параметра произвольными
<IMG SRC="IMG/myfile.gif" WIDTH=300 HEIGHT=50>
300/100=3
200/50=4
Нарушена пропорциональность изображения, произойдёт искажение.

Использование колонок

Допустима организация, когда рисунок и текст расположены в двух колонках.

Это достигается использованием у рисунка параметра ALIGN со значением LEFT / RIGHT.

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

Произвольный текст, расположенный на одном уровне с рисунком.

"Досрочно" снять разбиение можно, используя команду разметки BR (одиночный тег) с параметром CLEAR = LEFT / RIGHT / ALL. Значение параметра означает сторону, в которой находился рисунок. Во всех случаях можно использовать параметр ALL. После этой команды текст опять отображается во всю ширину окна.

Лучше всего использовать для разбиения на колонки таблицу из одной строки и трёх столбцов, поскольку, например, Internet Explorer вместо разбиения на колонки использует обтекание текстом изображения.