Внесение в документ изображений, как правило, существенно улучшает его внешний вид и делает его привлекательным для просмотра. Файлы рисунков можно использовать как фон для основной информации или же включать в документ как самостоятельные объекты. В Интернете обычно используют изображения в формате GIF и JPEG (файлы с расширениями .gif и .jpg). Современные броузеры понимают и другие форматы графических файлов (например, .png). Все они хорошо сжимают изображение, но в то же время прилично сохраняют его цветовую гамму и детали.
Чтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге <BODY> (см. п. 2.3) и табличных тегах <TABLE>, <TR>, <TH>, <TD> (см. п. 2.8). Если размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта, т. е. заданное изображение используется как кафельная плитка.
Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом <IMG> (IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением.
Внимание! URL обязательно надо выделять двойными кавычками и следить, чтобы пробелы и регистры букв в названиях папок и файлов в точности соответствовали оригиналу.
Примеры.
<IMG SRC="picture.gif"> – рисунок picture.gif находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> – из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
<IMG SRC="../images/picture.gif"> – подняться в родительский каталог, оттуда перейти в каталог images и взять там рисунок picture.gif;
– указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.
Остальные атрибуты тега <IMG>, перечисленные ниже, оговаривают размеры и положение рисунка на странице, а также то, где должен располагаться поясняющий текст:
BORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах. При n = 0 (значение по умолчанию) рамка не рисуется;
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана броузера (тогда после n следует знак %). По умолчанию – естественная ширина;
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана. По умолчанию – естественная высота;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным). По умолчанию 0;
VSPACE=n – вертикальный отступ от картинки в пикселах. По умолчанию 0;
ALIGN=BOTTOM – по умолчанию. Сопровождающий текст выравнивается по нижнему краю рисунка справа от него. Другие значения атрибута ALIGN, приводящие к выравниванию текста справа от рисунка по его высоте: TOP – по верхнему краю рисунка, CENTER или MIDDLE – по центру рисунка. Чтобы текст обтекал рисунок, используются значения LEFT или RIGHT. Рисунок прижимается соответственно к левому или правому краю экрана, а остальное пространство рядом с ним занимает текст;
ALT="какой-то текст" – альтернативный текст. Текст, который появляется вместо картинки, если по какой-либо причине загрузка изображения не состоялась.
Пример:
<IMG SRC="picture.gif" ALT="Здесь должен быть рисунок"> – рисунок picture.gif находится в том же каталоге, что и текущий документ. В том случае, если его не удается найти или открыть, в рамку, отведенную под рисунок, будет выдан текст: Здесь должен быть рисунок
Замечание. Для более аккуратного выравнивания текста около рисунка можно использовать табличные теги без атрибута BORDER. Например, если создать таблицу, состоящую из одной строки и двух ячеек в ней, то в одну можно поместить изображение, а в другую – пояснительный текст. Другие варианты придумайте сами.
