Вставка графики
Графика играет важную роль в оформлении Web-страниц. Найти страницу не содержащую графику практически невозможно. Гораздо легче обнаружить страницу, которая не содержит текст. Непосредственно в HTML документ графика не вставляется. Документ содержит специальные теги со ссылками на изображения, которые вставляются броузером при открытии страницы. Поэтому графические файлы загружаются отдельно и помещаются на страницу броузером.
В Web (где на счету каждый байт) загрузка должна осуществляться быстро. Желательно поместить максимальное количество информации в минимальном количестве байтов. Несмотря на большое количество графических форматов, доступных сегодня, в Web преобладают два из них
• JPEG (Joint Photograph Expert Group)
• GIF (Graphics Interchange Format)
Эти форматы сжимают графические файлы до приемлемого размера. Файлы JPEG можно сжать в несколько раз (хотя с потерей некоторых деталей), но они обеспечивают хорошее качество изображения. Проблемы возникают при увеличении сжатого изображения, но графика на Web страницах предполагает просмотр в контексте собственной Web страницы GIF формат является одним из самых старых форматов, поддерживает изображения только в 256 цветах, но имеет несколько достоинств. Это единственный формат, поддерживающий прозрачность изображения, коэффициент его сжатия достаточно хорош.
Чтобы вставить изображение в текущий документ, используют тег <IMG> с атрибутом SRC, определяющим размещение изображения на экране. Страница с простым изображением, центрированным на странице, показана на рис. 19.3.
Рис. 19.3. Вставка простого графического файла
Исходный HTML-код для показанной страницы приведен ниже.
<HTML>
<HEAD>
<TITLE>Graphics on the Web pages</TITLE>
</HEAD>
<BODY>
<CENTER>
<Hl>Placing an Image on a Web page</Hl>
<IMG SRC="earthl.jpg"><BR>
Our small planet, centered on the page
</CENTER>
</BODY>
</HTML>
Тег <IMG> имеет следующий синтаксис:
<IMG SRC="picture.jpg">
Тег <IMG> распознает дополнительные атрибуты, но необходимо включить атрибут SRC, который задает место нахождения файла изображения на сервере или URL в Web. Большинство дизайнеров использует изображения из того же каталога, что и остальные файлы Web-узла, или из отдельной папки, предназначенной для хранения изображений. Если изображения находятся на том же сервере, что и документ, то используйте относительную ссылку так, чтобы перенести весь проект в другую папку или сервер без редактирования HTML-файла.
При использовании следующих атрибутов с тегом
<IMG> броузер может манипулировать изображением несколькими способами:
• ALIGN — выравнивает изображение по левому краю, по правому, по центру, верхнему и нижнему краям или середине экрана;
• WIDTH и HEIGHT — задают ширину и высоту изображения;
• BORDER — добавляет к изображению обрамление, видимое, если изображение является гиперссылкой,
• VSPACE и HSPACE — очищают место по вертикали или горизонтали: пустое пространство задается в пикселях;
• ALT — включает текстовое сообщение, отображающееся на экране, когда пользователь отключает графику;
• USEMAP — вставляет растровое изображение.
Броузер может распознавать размеры изображения, но только после того, как оно будет загружено. Задание высоты и ширины изображения ускоряет воспроизведение, поскольку броузеру нет необходимости переставлять элементы, уже размещенные на странице. Помимо основного назначения атрибутов
WIDTH и HEIGHT, их можно использовать для изящных трюков.
Если нужно изменить размер изображения, то можно задать его размер атрибутами WIDTH и HEIGHT, и броузер изменит размер изображения из существующего файла. Например, чтобы создать прямую вертикальную линию шириной в два пикселя, используется квадрат изображения со сторонами в два пикселя и устанавливаются значения <IMG WIDTH=2 and HEIGHT=200 SRC= "pictures.jpg">. Высота изображения будет 200 пикселей. Следует помнить существует опасность искажения изображения атрибутами WIDTH и HEIGHT.
Атрибут BORDER задает ширину рамки вокруг изображения. Рамки шириной в два пикселя автоматически обрамляют любое изображение, используемое для гиперсвязи. Можно исключить автоматическое обрамление атрибутом BORDER==none или задать размер обрамления изображения, включая атрибут BORDER со значением ширины в пикселях. Обрамление на экране не появится, пока изображение не станет гиперссылкой.
Один из аспектов, влияющих на вид изображения, особенно когда вокруг изображения размещается текст, - это наличие свободного пространства между изображением и текстом. Это пространство создается атрибутами
VSPACE и HSPACE. Задайте его размеры по вертикали и горизонтали в пикселях, например, VSPACE=20 или HSPACE=10.
Атрибут ALT отображает на экране альтернативный текст для пользователей, отключающих в броузере изображения (многие отключают вывод изображений на экран, чтобы ускорить загрузку страницы). Атрибут ALT= "Логотип компании" сообщает пользователю, что изображение не отображается на экране броузера, а его место занимает надпись "Логотип компании". Если по каким-то причинам изображение не передано, то пользователь может сам связаться с конкретным Web-узлом и получить рисунок.
