Изображения, которые демонстрируются браузером при просмотре веб-страницы, хранятся в отдельных файлах формата gif, jpg (jpeg) или png, а в коде страницы делается ссылка на нужный файл. Для этого используется непарный тег <IMG>, имеющий один обязательный и ряд необязательных атрибутов..
Обязательный атрибут:
SRC = url
Адрес графического файла (относительный или абсолютный)
Основные необязательные атрибуты:
ALT = текст
Альтернативный текст, выводимый в режиме браузера без загрузки изображений (обязательно заключается в кавычки)
BORDER = значение
Толщина обрамляющей рамки в пикселях, 0 означает отсутствие рамки (по умолчанию)
BORDERCOLOR = цвет
Задает цвет обрамляющей рамки
HEIGHT = значение
Высота изображения в пикселях (по умолчанию оригинальная) либо в процентах от высоты окна браузера
WIDTH = значение
Ширина изображения в пикселях (по умолчанию оригинальная) либо в процентах от ширины окна браузера
HSPACE = значение
Свободное пространство слева и справа от изображения в пикселях
VSPACE = значение
Свободное пространство сверху и снизу от изображения в пикселях
ALIGN = значение
Выравнивание изображения по горизонтали.
Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали, задание этих значений обеспечивает обтекание изображения текстом
Рассмотрим подробнее абсолютный и относительный способы адресации файла.
Адресация в абсолютной форме используется при ссылках на ресурсы, находящиеся на других серверах. Универсальный адрес, определяющий местонахождение информационного ресурса, носит название URL(Uniform Resource Locator - унифицированный адрес ресурса). URL состоит из двух частей, разделенных двоеточием. Первая часть указывает на тип сетевого протокола, который зависит от типа ресурса. Например, если ресурс располагается на WWW-сервере, это протокол http. Вторая часть включает в себя имя компьютера (сервера) в доменной системе имен и (если требуется) путевое имя файла. При записи путевого имени названия каталогов разделяются прямой косой чертой (символ /), в именах файлов и каталогов различаются прописные и строчные буквы, пробелы не допускаются. Вот примеры URL:
http://www.vshu.kirov.ru/site/images/picture1.jpg
http://195.21.123.13:8110
ftp://everything.com/soft/prog.zip
mailto:Ivanov@hotmail.com
Последний URL, указывающий на протокол mailto и адрес электронной почты, не ссылается ни на какой информационный ресурс; это единственный тип URL, при записи которого не ставятся после двоеточия две косые черты.
Адресация рисунков в абсолютной форме при создании веб-сайта практически не используется.
Адресация в относительной форме используется при ссылках на ресурсы, находящиеся на том же сервере. При записи пути к файлу названия каталогов разделяются прямой косой чертой (символ /), переход по каталогам файловой системы на один уровень вверх обозначается двумя точками (символы .. ). Чтобы было понятнее, представим себе компьютер, например, с такой структурой каталогов, содержащих HTML-файлы:
В этом случае возможны, например, такие варианты записи тега IMG:
ü <IMG SRC=Picture.jpg> (изображение Picture.jpg располагается на страничке Index.htm)
ü <IMG SRC=Images/Pict1.jpg> (изображение Pict1.jpg располагается на страничке Index.htm)
ü <IMG SRC=../Picture.jpg> (изображение Picture.jpg располагается на страничке Page1.htm)
ü <IMG SRC=../Images/Pict1.jpg> (изображение Pict1.jpg располагается на страничке Page1.htm)
Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо указывать и альтернативный текст (атрибут ALT), так как многие работают с браузером в режиме без загрузки изображений.
Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов width и height в пикселях или в процентах к размеру экрана. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Применение только одного из атрибутов изменяет оба размера рисунка. Если задать явно оба атрибута, то рисунок будет масштабироваться по двум осям в соответствии с заданными размерами. Атрибуты height и width меняют не время загрузки изображения, а только его вид (размер) на экране.
