Графика на Веб-странице
Изображения в сети ИнтернетПодавляющее большинство Веб-страниц содержат графические изображения, которые либо улучшают внешний вид, либо несут в себе какую-либо информацию. Фотографии, таблицы и графики разнообразят страницу. «Голый» текст не может долго удерживать внимание посетителя страницы, поэтому следует использовать изображения для того, чтобы немного разбить текст или просто сделать страницу более привлекательной.
Когда речь идёт об изображениях в Сети, то речь, на самом деле, идёт о файлах определённого формата. В Интернете используются форматы: JPEG, GIF, PHG. Эти форматы были выбраны из соображений совместимости.
Перед вставкой изображений на Веб-страничку, необходимо их подобрать и оптимизировать. То есть изображения должны удовлетворять нескольким требованиям:
? Быть интересными;
? Полезными в данном контексте;
? Привлекательными;
? Разумно минимального размера.
Обои на Веб-странице
«Обои» - это фон, на котором будет располагаться вся информация. Они представляют собой графический файл формата JPEG или GIF. Иногда «обои» рисуются специально с изображением логотипа или названием фирмы. Графический файл «обоев» не должен занимать больше 5 Кбайт. Конечно же, не стоит делать фоном огромную картинку с фотографией.
Вставить «обои» в HTML-документ можно с помощью параметра background тега <BODY>.
Вставка графических изображений
Вставка изображения выполняется с помощью тега:
<IMG SRC=”URL-адрес графического файла”>
Размещение текста и изображений
Данный тег может иметь несколько необязательных параметров:
? ALIGN – взаимное размещение текста и изображения;
? WIDTH – ширина изображения в пикселях или процентах;
? HEIGHT – высота изображения в пикселях или процентах;
? ALT - альтернативный текст;
? BORDER – толщина рамки изображения в пикселях;
? VSPACE – вертикальный отступ от изображения в пикселях;
? HSPACE – горизонтальный отступ от изображения в пикселях.
Значения параметра ALIGN используют для задания обтекания изображения текстом:
Для выравнивания изображения по центру используется другой непарный тег DIV. Пример HTML –кода:
<DIV align=center><IMG SRC="kengo.gif">
<p>Кенгуру обитает в Австралии.</p>
Альтернативный текст
Альтернативный текст заменяет изображение в случае невозможности его вывода на экран. Текст выводится в отдельном прямоугольном окошечке, а также во всплывающей подсказке при загруженном изображении.
Пример двух разных отображений изображения в браузере одного того же HTML-кода:
<IMG SRC="kengo.gif" align=left alt="На рисунке изображён кенгуру">
<p>Кенгуру обитает в Австралии.</p>
Размеры изображения
Параметры WIDTH и HEIGHT отвечают за ширину и высоту изображения. Для чего они нужны? Большинство браузеров перед загрузкой страницы пытаются сами спланировать размещение текста, рисунков, таблиц и не отображают рисунки до тех пор, пока не узнают его размеры. Для того чтобы браузер сразу начинал выводить текст по мере его получения, стоит указывать фактические размеры рисунков. Пользователь сможет прочитать всё, что ему нужно, и, не дожидаясь полной загрузки страницы, перейти по ссылкам в нужное место. Это очень важно при работе по коммутируемому доступу в Интернет. Золотое правило web-мастера - всегда
явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера ещё до загрузки изображения.
Этими же атрибутами можно изменять реальный размер изображений, то есть взять картинку размером 300х150 пикселей и вывести её же, уменьшив размер до 150х75. Но при этом размер файла не изменится! Этим же способом можно исказить изображение. И ещё один интересный момент. Если текст на Веб-странице не помещается в окне браузера, то появляются полосы прокрутки. То же самое происходит и в случае, если в окне не помещается картинка. Но, если размеры задать в процентах, то размеры картинки будут меняться в зависимости от размера окна браузера.
Рамка и отступы
Параметр BORDER определяет ширину рамки вокруг изображения в пикселях. Рамка толщиной в 2 пикселя возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю, так как это часто выглядит неаккуратно и не к месту.
Как в полиграфии, так и на веб-сайтах, не принято текст располагать близко прижатым к рисунку. Вокруг изображения всегда принято задавать отступы. Для этого предназначен параметр HSPACE, который определяет размер свободного места в пикселях слева и справа от изображения, улучшает внешний вид страницы, отделяя изображение от текста. Параметр VSPACE определяет размер свободного места в пикселях сверху и снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста.
Гиперссылки с использованием изображений
Картинки могут служить гиперссылками. Как указывалось выше, рисунок-ссылка отличается от обычного изображения наличием рамки толщиной 2 пикселя. Это далеко не всегда выглядит эстетично. Поэтому в теге IMG параметр BORDER необходимо обнулять. Например:
<A HREF=”picture.htm”><IMG SRC=”pic.gif” alt=”Увеличить изображение” border=0></A>
Карта ссылок
Карта ссылок представляет собой изображение, разные фрагменты которого служат ссылками на различные объекты. Карта может выглядеть как настоящая географическая карта: щелчок на кружочке, обозначающем город, может отправить на виртуальную экскурсию. Она также может представлять собой набор кнопок или значков или список пунктов меню.
В HTML есть средство, позволяющее разметить картинку, разделив её на области с закрепляемыми за ними гиперссылками. Именно для разделения изображения на зоны, каждой из которых поставлена в соответствие гиперссылка, применяется карта ссылок. Зоны определяются по двум координатам: x и y, где 0,0 – это левый верхний угол изображения. При создании области изображения, необходимо указывать форму зоны и её координаты.
Единственная трудность состоит в том, чтобы правильно определить эти координаты. Для создания карты изображения используется парный тег MAP и вложенный в него одиночный тег AREA .Единственным параметром тега MAP является name. Благодаря этому параметру карте присваивается уникальное имя, которое потом указывается в теге IMG при вставке самого изображения. При ссылке на конкретную карту, перед её именем ставится символ # в параметре usemap, например:
<MAP name=”gorod”>
<AREA параметры первой области>
<AREA параметры второй области>
</MAP>
<IMG SRC=minsk.jpg usemap=#gorod border=0>
В параметрах shape и coords тега AREA указываются:
? Форма области изображения;
? Координаты области;
? URL-адрес на другой ресурс.