1.3 Графика и мультимедиа на Web-страницах

1.3.1 Основной цветовой набор Web-страницы. Варианты описания цвета

Выбор различных цветов для оформления Web-страницы может значительно улучшить внешний вид и "читабельность" документа.

Основной цветовой набор HTML-документа указывается через атрибуты тега <BODY>. Это такие атрибуты, как:

BGCOLOR="цвет"	цвет фона документа,
TEXT="цвет"	цвет текста,
LINK="цвет"	цвет непосещенных ссылок,
ALINK="цвет"	цвет активной (нажатой в данный момент) ссылки,
VLINK="цвет"	цвет посещенных пользователем ссылок

Цвета можно указывать через их имена, либо через шестнадцатиричные коды. В первом случае имена цветов такие же, как в большинстве языков программирования. Все браузеры поддерживают стандартный цветовой набор Windows. На рисунке 8 приведены примеры некоторых цветов, поддерживаемых языком HTML.

Рисунок 8 - Некоторые цвета Windows, поддерживаемые браузерами

Aqua	Black	Blue	Fuchsia	Gray	Green	Lime
Navy	Olive	Purple	Red	Silver	Teal	Yellow

С полным вариантом таблицы цветов, вы можете ознакомиться в Приложении А.

Кроме того, цвета можно вводить, указывая информацию о яркости, красной, зеленой и синей компонент в шестнадцатиричном коде. В этом случае перед кодом цвета ставится символ #. Коды компонент могут принимать значения от 00 до FF включительно. Так, белому цвету соответствует код #FFFFFF, черному - #000000, красному - #FF0000, зеленому - #00FF00, синему - #0000FF и т.д. Для того, чтобы цвета документа корректно отображались различными браузерами и при 256-цветном режиме монитора, следует использовать только интенсивности компонент, равные 00, 33, 66, 99, CC и FF. Всего насчитывается 216 таких цветов. Впрочем, 256-цветных мониторов остается все меньше, и это требование постепенно теряет актуальность.

Пример указания цветов в теге <BODY>:

< BODY BGCOLOR="white" TEXT="black" LINK="#009900" ALINK="#006600" VLINK="#003300">

Указывая код цвета любым из перечисленных способов, можно изменять цвет любой части текста, заключая ее в тег вида <FONT COLOR="цвет">часть текста</FONT>.

1.3.2 Подготовка и размещение графических изображений на Web-страницах

Web-страницы становятся привлекательными, благодаря размещениям на них разнообразных графических объектов. Графические иллюстрации в большинстве случаев являются неотъемлемой частью Web- документов. Чтобы встроить изображение в HTML-документ, нужно заранее подготовить рисунок или фотографию в файлах с расширениями - .GIF , .JPG или PNG.

Формат .GIF - Graphics Interchange Format – графический формат обмена -обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации ("мультипликация" на Web-страницах, графические кнопки, "украшения"). Кроме того, формат .GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект - возможность черезстрочной загрузки изображения GIF - то есть, изображение может постепенно "проявляться" по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.

Формат .JPG - Joint Photographic Experts Group – объединенная группа экспертов фотографии - используется для хранения полноцветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16.7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы .JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web-страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате .BMP, а в .GIF или .JPG конвертировать только окончательный вариант картинки.

Формат .PNG - Portable Network Graphics – переносимая сетевая графика – имеет все преимущества формата GIF, делает файлы компактными. Но пока еще поддерживается не всеми браузерами.

Из доступных приложений эффективно управлять файлами в перечисленных форматах позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw. Для подготовки изображений можно использовать любой графический редактор, позволяющий сохранять файлы в этих форматах (например, графический редактор Paint).

Рисунки хранятся на Web - узлах в отдельных файлах, но отображаются как элементы Web- страниц. Для вставки рисунка используется текстовый элемент, задаваемый тегом <IMG>, который обязательно должен содержать атрибут SRC, задающий адрес файла, содержащего рисунок.

Например,

<IMG SRC="picture1.gif">.

При отображении рисунка браузер использует его реальные размеры. Если же рисунок нужно отмасштабировать, применяют атрибуты WIDTH= и HEIGHT=, задающие ширину и высоту рисунка в пикселах.

Примечание: Задавать эти атрибуты лучше всегда, так как в этом случае еще до загрузки рисунка, браузер выделяет для его отображения нужное место, что ускоряет процесс загрузки.

Например,

<IMG SRC="picture1.gif" WIDTH="120" HEIGHT="50">.

Внешний вид Web - страницы зависит от того, как именно располагается рисунок на странице. Так как рисунок задается как текстовый элемент, находящийся внутри какого-то абзаца, по умолчанию он рассматривается как встроенное изображение, включаемое в строку текста. Чтобы изображение задавалось автономно, его включают в отдельный абзац. Для изображения рисунка используются атрибуты, названия и назначения которых собраны в таблице 4.

Таблица 4 - Атрибуты изображения рисунка

Название атрибута	Значения атрибута	Назначение атрибута
1	2	3
ALIGN= (атрибут взаимодействия рисунка с текстом)	BOTTOM MIDDLE TOP LEFT RIGHT	Нижняя граница изображения совмещается с основанием строки. Середина изображения совмещается с серединой текстовой строки. Верхняя граница изображения совмещается с верхним краем строки. Изображение размещается у левого края страницы, а последующий текст размещается справа от него. Изображение размещается у правого края страницы, а последующий текст размещается слева от него.
HSPACE=	Любое число	Величина промежутка между изображением и текстом (в пикселах) по горизонтали.
VSPACE=	Любое число	Величина промежутка между изображением и текстом (в пикселах) по вертикали.
		3
ALT=	Нужный текст	Отображение альтернативного текста для изображения. Атрибут используется для тех случаев, если картинка не может быть загружена, т.е. нет средства для ее просмотра. Альтернативный текст отображается в виде всплывающей подсказки, появляющейся при наведении на картинку указателя мыши.

Еще один способ применения изображений на Web-страницах состоит в использовании их в качестве фонового рисунка. Фоновый рисунок задается с помощью атрибута BACKGRAUND= в теге <BODY>. Значением этого атрибута является адрес файла с изображением.

Например, если вы используете в теге <BODY> следующий атрибут

<BODY BACKGRAUND= "aaa.gif" TEXT="YELLOW"> ,

то фоном Web-страницы будет являться файл aaa.gif, а текст на этом фоне выводится желтым цветом.

Рисунок может также являться и гиперссылкой. В этом случае он будет заключен в синюю рамку, и курсор мыши, попадая на него, изменит свою форму со стрелки на ладонь с вытянутым указательным пальцем, а при нажатии на любую часть рисунка произойдет загрузка той страницы, адрес которой прописан во внутренней ей части. Таким образом, рисунок будет являться внешней частью гиперссылки. Для того, чтобы сделать рисунок гиперссылкой, необходимо тег вставки рисунка вставить в качестве внешней части гиперссылки. Например,

<A HREF=" www.rambler.ru"><IMG SRC="picture1.gif"> </A>