Глава 1.6. Гиперссылки, объекты и графические образы

1.6.1. Гиперссылки и закладки: элемент A

Хотя HTML содержит большое количество средств для форматирования текста и структурирования документов, его основной особенностью является возможность создания гипертекстовых документов. Гипертекстовыми являются документы, которые содержат гиперссылки на другие ресурсы Веб.

Гиперссылка — это связка между двумя анкерами: анкер источника, содержащийся в данном HTML-документе, указывает на анкер цели, который может быть HTML-документом или закладкой в нем, а также графическим файлом, аудиофайлом, видеоклипом или программой.

Для создания анкеров в языке HTML используется элемент A.

Синтаксис: <A>…</A> (текстовый элемент)
Атрибуты:  id, class, style, title, lang, dir, события
           name = CDATA (название закладки)
           href = URI (URI ссылки)
           rel = типы ссылок (прямая ссылка)
           rev = типы ссылок (обратная ссылка)
           type = тип файла (тип файла, на который указывает ссылка)
           target = фрейм (фрейм для отображения ссылки)
           hreflang = код языка (язык ссылки)
           charset = кодировка (кодировка ссылки)
           accesskey = символ (имя клавиши быстрого доступа)
           tabindex = число (номер в порядке нажатия табуляции)
           shape = rect | circle | poly | default (область в карте ссылок)
           coords = координаты (координаты в карте ссылок)
           onfocus = сценарий (при получении элементом фокуса)
           onblur = сценарий (при потере элементом фокуса)

Поддержка:  Атрибуты type, hreflang, charset, shape, coords игнорируются;
              клавиша, заданная в accesskey, должна нажиматься вместе с Alt (5.0+)
            Атрибуты rel, rev, type, hreflang, charset, coords, tabindex и
              accesskey игнорируются (4.0+)

Элемент A (anchor) определяет положение анкера в документе. Он применяется для создания закладок и для создания гиперссылок. Его содержимым могут быть любые текстовые элементы, кроме A.

Для создания закладок (т. е. анкеров цели) используется атрибут name. Например, следующий элемент в документе mydoc.html определяет закладку myheading:

<H1><A name="myheading">Мой заголовок</A></H1>

Для создании гиперссылки на нее из того же документа используется анкер:

<A href="#myheading">…</A>

а из другого документа — анкер:

<A href="mydoc.html#myheading">…</A>

Примечания.

1. Элемент A не может быть вложен в другой элемент A, поэтому следите, чтобы анкеры закладок не содержали анкеров гиперссылок. Во избежании этого можно использовать в одном элементе A и атрибут name, и атрибут href.
2. Стандарт HTML рекомендует использовать вместо атрибута name атрибут id. Современные обозреватели поддерживают эту возможность, однако это может вызвать трудности в динамических страницах из-за несовместимости обозревателей.

Для создания гиперссылок (т. е. анкеров источника) используется атрибут href. Его значением должен быть URI ресурса, на который указывает гиперссылка. Анкер гиперссылки может иметь следующие необязательные атрибуты:

• Атрибут title задает краткое описание анкера цели и отображается как "подсказка".
• Атрибут target используется только во фреймовых документах и задает имя фрейма, в котором должна отображаться цель гиперссылки.
• Атрибуты hreflang и charset указывают на язык и кодировку ссылки.
• Атрибут accesskey задает символ Unicode в качестве клавиши быстрого перехода по гиперссылке.
• Значением атрибута tabindex должно быть целое число в диапазоне от 0 до 32767. Это число задает номер данной гиперссылки при движении по Веб-странице нажатиями клавиши Tab. Если tabindex равно 0 или не задано, то данный элемент получит фокус после всех элементом с положительным значением tabindex. При совпадении значений tabindex у нескольких элементов первым получает фокус тот, который раньше встречается в документе.
• Атрибуты rel и rev имеют то же назначение, что и у элемента LINK.
• Атрибуты shape и coord используются только в картах ссылок и описаны в п. 6.6.1.

Примеры:

&ltA href="album.html">Мой фотоальбом</A>

<A href="../images/me.jpg">Моя фотография</A>

<A href="sounds/yester.mid" type="audio/midi" accesskey="Y">Yesterday (MIDI-файл)</A>

<A href="section2.html" title="Таблицы стилей" rel="next"
  target="_blank">Раздел 2</A>

<A href="mailto:myname@mail.com" title="Сообщите Ваше мнение">myname@mail.com</A>

<A href="http://babel.alis.com:8080/langues/iso639.zh.htm" charset="big5"
  hreflang="zh">ISO 639 (китайский язык)</A>

Помимо базовых событий, элемент A допускает обработку еще двух событий:

• onfocus — происходит, когда гиперссылка получает фокус;
• onblur — происходит, когда гиперссылка теряет фокус.

1.6.2. Введение в объекты, образы и аплеты

Если бы HTML-документы состояли только из текста, WWW не приобрел бы и сотой доли своей сегодняшней популярности. К счастью, разработчики языка поняли это достаточно быстро и добавили к стандарту поддержку графических образов (т. е. рисунков и фотографий), аплетов (т. е. программ, которые автоматически загружаются и исполняются на компьютере-клиенте), мультимедийных объектов (т. е. аудиофайлов и видеоклипов) и других HTML-документов. Предыдущие версии языка HTML позволяли авторам включать в HTML-документы графические образы (в виде элемента IMG) и аплеты языка Java (в виде элемента APPLET). Эти элементы имели достаточно серьезные ограничения по использованию, поэтому в HTML 4.0 появился новый элемент OBJECT, который обеспечивает включение в документы любых объектов, типы которых известны обозревателю. Следующая таблица показывает, как возможности элемента OBJECT соотносятся с возможностями старых элементов:

Из таблицы видно, что

• для включения в документ графических образов используются элементы IMG или OBJECT;
• для включения в документ мультимедийных файлов и аплетов следует использовать только элемент OBJECT;
• для включения в документ других HTML-документов используются элементы IFRAME или OBJECT.

Следует отметить, что с графическими образами и другими включаемыми в документ объектами, также как и с любым текстовым элементом, могут быть связаны гиперссылки (см. описание элемента A). Но, помимо стандартного механизма гиперссылок, с графическими образами могут быть связаны и т. н. карты ссылок, позволяющие разбить графический образ на несколько областей и связать с каждой областью свою гиперссылку. В следующих параграфах этой главы мы рассмотрим все механизмы, которые язык HTML предоставляет авторам для включения в документы различных объектов и для создания карт ссылок.

1.6.3. Вставка образа: элемент IMG

Синтаксис: <IMG> (содержимого и конечного тега нет)
Атрибуты:  id, class, style, title, lang, dir, события
           src = URI (URI графического файла)
           alt = текст (альтернативный текст)
           longdesc = URI (URI подробного описания образа)
           name = CDATA (название образа)
           width = размер (ширина образа)
           height = размер (высота образа)
           usemap = URI (URI клиентской карты ссылок)
           ismap = ismap (серверная карта ссылок)

Поддержка:  Атрибут longdesc игнорируется (5.0+)
            Атрибут longdesc игнорируется (4.0+)

Элемент IMG (image) включает в документ графический образ. Он может содержаться в любых текстовых и блочных элементах, кроме PRE. Обязательный атрибут src указывает на местоположение файла, в котором хранится соответствующее изображение; этот файл должен быть в одном из трех форматов, поддерживаемых обозревателями (GIF, JPEG или PNG). Обязательный атрибут alt задает альтернативный текст, который выводится обозревателем вместо образа, если вывод графических изображений отключен или не поддерживается. Все остальные атрибуты являются необязательными.

• Атрибут longdesc содержит ссылку на подробное описание данного образа. Это описание должно дополнять краткое описание, заданное атрибутом alt. Он особенно полезен, если с образом связана карта ссылок; в этом случае он должен содержать пояснения к карте.
• Атрибут name содержит название образа, на которое можно ссылаться в таблицах стилей и сценариях. Этот атрибут сохраняется только в целях совместимости со старыми обозревателями; в настоящее время рекомендуется использовать вместо него атрибут id.
• Атрибуты width и height задают размеры образа на экране по горизонтали и вертикали соответственно. Эти атрибуты полезнее всего, когда они указывают точные размеры образа в пикселях. Их задание позволяет обозревателю зарезервировать пространство для образа при загрузке документа и тем самым несколько ускорить его отображение. Помните, однако, что многие обозреватели выделяют пространство для образа на основе этих атрибутов даже тогда, когда они отображают не образ, а альтернативный текст. Это может привести к тому, что альтернативный текст будет виден не полностью (если размеры образа малы или текст достаточно велик). Разумеется, размеры образа можно указать и в процентах от размера экрана (не от размера образа!), но образы, масштабированные обозревателями обычно выглядят удручающе, поэтому подобной практики следует по возможности избегать.
• Атрибут usemap указывает на клиентскую карту ссылок, определенную элементом MAP. Его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP.
• Атрибут ismap указывает на серверную карту ссылок. Если элемент IMG содержит этот атрибут, и пользователь щелкает мышью на отображении образа, обозреватель передает координаты точки щелчка серверу, а тот передает обозревателю соответствующий документ.

Пример:

<IMG src="http://www.somecompany.com/People/Yury/family.jpg"
  alt="Фотография моей семьи на отдыхе">

Тот же эффект может быть достигнут с помощью элемента OBJECT:

<OBJECT data="http://www.somecompany.com/People/Yury/family.jpg" type="image/jpeg">
  Фотография моей семьи на отдыхе
</OBJECT>

1.6.4. Вставка объекта: элемент OBJECT

Синтаксис: <OBJECT>…</OBJECT> (блочный элемент)
Атрибуты:  id, class, style, title, события
           classid = URI (URI кода объекта)
           data = URI (URI данных объекта)
           archive = CDATA (список архивных файлов)
           codebase = URI (базовый URI для classid, data, archive)
           width = размер (ширина объекта)
           height = размер (высота объекта)
           usemap = URI (URI клиентской карты ссылок)
           name = CDATA (название объекта для форм)
           codetype = тип файла (тип кода объекта)
           type = тип файла (тип данных объекта)
           standby = текст (сообщение, отображаемое при загрузке объекта)
           tabindex = число (номер в порядке нажатия табуляции)
           declare = declare (декларация объекта, а не вызов его)

Поддержка:  Атрибуты archive, usemap, standby и declare игнорируются (5.0+)
            Атрибуты archive, usemap, codetype, standby, tabindex и declare
              игнорируются (4.0+)

Элемент OBJECT обеспечивает включение в документ различных объектов. Он может содержаться в заголовке документа и любых текстовых и блочных элементах, кроме PRE. Его содержимым являются элементы PARAM, за которыми могут следовать текстовые или блочные элементы. При этом все элементы, следующие за элементами PARAM, задают альтернативное содержание, которое должно отображаться, если обозреватель не поддерживает данный тип объектов.

Стандарт поясняет назначение элемента OBJECT следующим образом. Обозреватели содержат встроенные механизмы для отображения данных определенных типов, например текста и графических образов в формате GIF и JPEG. Для отображения данных, которые они не умеют отображать сами, обозреватели могут вызывать внешние приложения. Например, для выполнения Java-аплета обозреватель должен передать имя этого аплета и параметры его вызова виртуальной Java-машине и отобразить результаты ее работы в своем окне. Элемент OBJECT позволяет авторам указывать обозревателю тип объекта, включаемого в документ, с тем, чтобы обозреватель принял решение: будет он его отображать сам или передаст исполнение внешней программе.

В самом общем случае автор должен передать обозревателю следующую информацию об объекте:

1. Тип и местоположение включаемого объекта (например, расположение файла, содержащего исполняемый код аплета).
2. Тип и местоположение данных для объекта (например, формат и расположение файла, содержащего графический образ).
3. Дополнительные параметры (например, начальные значения параметров аплета).

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

Графические образы

Для включения в документ графического образа мы должны указать только два его атрибута: type, задающий формат графического файла, и data, указывающий его URI. Пример:

<OBJECT type="image/png" data="http://www.somecompany.com/Images/family.png">
  Фотография моей семьи на отдыхе
</OBJECT>

Java-аплеты

Для включения в документ аплета на языке Java мы должны указать его тип (codetype), местоположение (classid) и, возможно, тип (type) и местоположение (data) данных, которыми он пользуется. Кроме того, для запуска аплета может потребоваться задание начальных значений его параметров (см. ниже описание элемента PARAM). Пример:

<OBJECT codetype="application/java" classid="java:EmblazeVideo.class">
  Ваш обозреватель не поддерживает Java-аплеты.
</OBJECT>

Управляющие элементы ActiveX

Для включения в документ управляющего элемента ActiveX мы должны указать только его GUID (classid). Иногда нужно также указать, где находится соответствующая динамическая библиотека(codebase). Кроме того, для запуска элемента ActiveX может потребоваться задание начальных значений его параметров (см. ниже описание элемента PARAM). Подробнее об элементах ActiveX и их использовании см. п. 3.13.1. Примеры:

<OBJECT id="browserIcons" classid="clsid:EAB22AC3-30C1-11CF-A7EB-0000C05BAE0B">
<PARAM name="AlignLeft" value="0">
<PARAM name="AutoSize" value="1">
  Элемент ActiveX не найден!
</OBJECT>

<OBJECT id="menuView" classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
  codebase="http://activex.microsoft.com/controls/iexplorer/btnmenu.ocx">
</OBJECT>

Теперь мы можем описать назначение каждого атрибута.

• Атрибут classid указывает местоположение исполняемого кода объекта (например, файла класса для Java-аплетов) или его GUID (для элементов ActiveX). Способ задания его значений ясен из приведенных выше примеров.
• Атрибут data задает URI файла данных, необходимых для включения объекта.
• Атрибут archive может содержать список URI архивных файлов, разделенных пробелами. Он позволяет обозревателю при загрузке Веб-страницы произвести загрузку всех необходимых архивов (например, библиотек, используемых Java-аплетом) и тем самым уменьшить время отображения объекта. Для файлов Java стандартным форматом архивов является формат JAR.
• Атрибут codebase задает базовый URI для ресурсов, указанных в атрибутах classid, data и archive. Если местоположение этих ресурсов задано относительными URI, то их полные URI разрешаются с помощью значения codebase. Этот же атрибут используется для задания местоположения динамических библиотек, используемых управляющими элементами ActiveX.
• Атрибуты width и height задают размеры окна для отображения объекта по горизонтали и вертикали соответственно. Большинство обозревателей требуют, чтобы эти атрибуты задавались всегда, т. к. они не могут вычислить необходимый размер окна автоматически.
• Атрибут usemap указывает на клиентскую карту ссылок, определенную элементом MAP. Его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. В отличие от карт ссылок, заданных элементом IMG, элемент OBJECT позволяет задать полную текстовую альтернативу карте ссылок в случае, если обозреватель не отображает графику. Кроме того, в данном случае элемент MAP может быть помещен внутрь элемента OBJECT и тогда не будет отображаться.
• Атрибут name задает название объекта и используется только в тех случаях, когда данный объект является частью формы.
• Атрибут codetype указывает тип объекта, заданного атрибутом classid. Этот атрибут является необязательным, но рекомендуемым. Если он не задан, то его значением по умолчанию считается значение атрибута type.
• Атрибут type указывает тип данных, заданных атрибутом data. Этот атрибут является необязательным, но рекомендуемым.
• Атрибут standby задает текст, который может отображаться обозревателем во время загрузки объекта.
• Значением атрибута tabindex должно быть целое число в диапазоне от 0 до 32767. Это число задает номер данного элемента при движении по Веб-странице нажатиями клавиши Tab. Если tabindex равно 0 или не задано, то данный элемент получит фокус после всех элементом с положительным значением tabindex. При совпадении значений tabindex у нескольких элементов первым получает фокус тот, который раньше встречается в документе.
• Задание атрибута declare означает, что данный элемент является только декларацией объекта, а инициализация этого объекта будет произведена другим элементом, ссылающимся на id данного объекта. Это позволяет загружать объект через гиперссылку, кнопку или другой объект, например:

  <OBJECT id="video" codetype="application/java"
    classid="java:EmblazeVideo.class" declare="declare">
  </OBJECT>
  ...
  <P>Вы готовы к <A href="#video">просмотру видеоклипа</A>?</P>

1.6.5. Инициализация объекта: элемент PARAM

Синтаксис: <PARAM> (содержимого и конечного тега нет)
Атрибуты:  id
           name = CDATA (название параметра)
           value = CDATA (значение параметра)
           valuetype = data | ref | object (тип значения)
           type = тип файла (тип файла ресурса)

Поддержка:  Атрибуты id, valuetype и type игнорируются (5.0+)
            Атрибуты id, valuetype и type игнорируются (4.0+)

Элемент PARAM (parameter) используется только в начале элемента OBJECT для задания начальных значений параметров объекта. Обязательный атрибут name задает название параметра, значение которого задается данным элементом, а атрибут value задает значение этого параметра. Атрибут valuetype задает тип атрибута value; он может принимать следующие значения:

Современные обозреватели поддерживают только параметры типа data.

Все остальные синтаксические свойства названий и значений параметров определяются типом объекта, к которому они относятся. Примеры использования элемента PARAM приведены выше.

1.6.6. Карты ссылок

Помимо текстовых гиперссылок, HTML-документы могут содержать т. н. карты ссылок, позволяющие разбить графический образ на несколько активных областей и связать с каждой областью определенное действие (загрузить другой документ, запустить какую-либо программу и т. п.). При активизации области щелчком мыши обозреватель выполняет соответствующее действие. Существуют два типа карт ссылок:

Клиентские карты ссылок

Когда пользователь активирует какую-либо область графического образа, координаты пикселя, на который пришелся щелчок мыши, интерпретируются обозревателем, который определяет к какой области образа относится данный пиксель и осуществляет переход по соответствующей гиперссылке.

Серверные карты ссылок

Когда пользователь активирует какую-либо область графического образа, координаты пикселя, на который пришелся щелчок мыши, передаются Веб-серверу, который определяет к какой области образа относится данный пиксель и выполняет соответствующее действие.

При этом клиентские карты предпочтительнее по двум причинам:

• они доступны пользователям, чьи обозреватели не поддерживают графику;
• пользователь может сразу видеть по форме курсора мыши, указывает ли мышь на активную область.

1.6.6.1. Клиентские карты: элементы MAP и AREA

Синтаксис: <MAP>…</MAP> (блочный элемент)
Атрибуты:  id, class, style, title, lang, dir, события
           name = CDATA (название карты)

Поддержка:  Соответствует стандарту (5.0+)
            Соответствует стандарту (4.0+)

Синтаксис: <AREA> (содержимого и конечного тега нет)
Атрибуты:  id, class, style, title, lang, dir, события
           shape = rect | circle | poly | default (область в карте ссылок)
           coords = координаты (координаты в карте ссылок)
           href = URI (URI ссылки)
           nohref = nohref (неактивная область)
           alt = текст (альтернативный текст)
           target = фрейм (фрейм для отображения ссылки)
           accesskey = символ (имя клавиши быстрого доступа)
           tabindex = число (номер в порядке нажатия табуляции)
           onfocus = сценарий (при получении элементом фокуса)
           onblur = сценарий (при потере элементом фокуса)

Поддержка:  Соответствует стандарту; клавиша, заданная в accesskey, должна
              нажиматься вместе с Alt (5.0+)
            Атрибуты alt, accesskey и tabindex не поддерживаются (4.0+)

Элемент MAP применяется для создания клиентских карт ссылок. Его содержимым могут быть либо элементы AREA, либо любые блочные элементы. MAP употребляется совместно с элементами IMG, OBJECT или INPUT, загружающими графический образ, карту которого он определяет. При этом обязательный атрибут name содержит название карты, которое используется как имя закладки в атрибуте usemap ассоциированного с картой ссылок. Пример:

<MAP name="mymap">
  <AREA href="reference.htm" alt="Справочник по HTML и CSS" coords="5,5,95,195">
  <AREA href="design.htm" alt="Введение в Веб-дизайн" coords="105,5,195,195">
  <AREA href="tools.htm" alt="Инструментарий" coords="205,5,295,195">
</MAP>
<IMG src="sitemap.gif" alt="Карта узла" usemap="#mymap" width="300" height="200">

В этом примере содержимым элемента MAP являются три элемента AREA, определяющие активные области графического образа. Такой элемент MAP не отображается обозревателями; его присутствие в документе обнаруживается только по подсказкам, заданным в атрибутах alt элементов AREA. Но, как отмечено выше, элемент MAP может содержать и блочные элементы, которые, в свою очередь, должны содержать анкеры, определяющие активные области образа и соответствующие гиперссылки. В этом случае только что приведенный пример мог бы выглядеть так:

<MAP name="mymap">
  <P>Выберите раздел:
  <A href="reference.htm" coords="5,5,95,195">Справочник по HTML и CSS</A>
  <A href="design.htm" coords="105,5,195,195">Введение в Веб-дизайн</A>
  <A href="tools.htm" coords="205,5,295,195">Инструментарий</A>
  </P>
</MAP>
<OBJECT data="sitemap.gif" type="image/gif" usemap="#mymap" width="300" height="200">
</OBJECT>

В этом случае содержимое элемента MAP отображается как набор текстовых гиперссылок. Если мы хотим скрыть его, то элемент следует перенести внутрь ассоциированного c ним элемента OBJECT. Отметим, что при наличии в MAP каких-либо элементов помимо AREA, обозреватели игнорируют все элементы AREA.

Теперь рассмотрим подробнее строение элемента AREA, который определяет активную область карты ссылок и соответствующую гиперссылку. Атрибуты shape и coord задают соответственно форму активной области и ее координаты относительно левого верхнего угла графического образа; они могут принимать следующие значения:

Атрибут href определяет URI гиперссылки, связанной с данной активной областью. Если он не задан или элемент AREA содержит атрибут nohref, то данная область не является активной. Обязательный атрибут alt задает альтернативный текст, который выводится обозревателем вместо образа, если вывод графических изображений отключен или не поддерживается. Этот же текст выводится обозревателем в качестве подсказки при попадании курсора мыши на активную область. Все остальные атрибуты являются необязательными.

• Атрибут target используется только во фреймовых документах и задает имя фрейма, в котором должна отображаться цель гиперссылки.
• Атрибут accesskey задает символ Unicode в качестве клавиши быстрого перехода по гиперссылке.
• Значением атрибута tabindex должно быть целое число в диапазоне от 0 до 32767. Это число задает номер данного элемента при движении по Веб-странице нажатиями клавиши Tab. Если tabindex равно 0 или не задано, то данный элемент получит фокус после всех элементом с положительным значением tabindex. При совпадении значений tabindex у нескольких элементов первым получает фокус тот, который раньше встречается в документе.
• Атрибут onfocus задает сценарий, который выполняется, когда активная область получает фокус.
• Атрибут onblur задает сценарий, который выполняется, когда активная область теряет фокус.

1.6.6.2. Серверные карты

Серверные карты используются в тех случаях, когда карта ссылок слишком сложна для клиентской карты. Серверные карты могут создаваться только для образов, заданных элементом IMG или INPUT, который должен находиться внутри анкера гиперссылки и иметь атрибут ismap. Пример:

<A href="http://www.acme.com/cgi-bin/topresult.cgi">
  <IMG src="game.gif" ismap="ismap" alt="Результаты игр"></A>

При щелчке мыши по этому образу обозреватель формирует запрос к серверу, с которого загружен текущий HTML-документ. Этот запрос формируется в соответствии с интерфейсом CGI, который подробно описан в Части VI, по следующим правилам:

• Обозреватель запоминает координаты щелчка мыши в пикселях относительно левого верхнего угла графического образа. Если обозреватель не поддерживает экранные координаты (например, это синтезатор речи), координаты принимаются равными 0, 0.
• На основе этих координат формируется URI запроса к серверу на запуск сценария; для этого к URI сценария, заданному атрибутом href гиперссылки, добавляется запрос вида ?x,y. Если, например, координаты мыши были равны 15 и 24, то в приведенном выше примере будет сформирован следующий запрос: http://www.acme.com/cgi-bin/topresult.cgi?15,24.
• Сервер принимает строку запроса и исполняет указанный сценарий с указанными параметрами.

1.6.7. Форматы графических файлов

Число форматов, в которых сохраняются графические данные, очень велико. Однако, в WWW их количество сводится всего к трем форматам: GIF, JPEG и PNG. Исторически ситуация сложилась так, что первые Веб-обозреватели поддерживали форматы GIF и JPEG, поэтому эти два формата стали стандартом de facto для хранения графики в Веб. Затем специально для сетевой графики был разработан формат PNG, который должен составить конкуренцию формату GIF. В этом разделе мы приводим краткую характеристику каждого из перечисленных форматов и даем рекомендации по их применению.

Поддержка:  Поддерживает все три формата
            Поддерживает все три формата

1.6.7.1. Формат GIF

Формат GIF (Graphics Interchange Format) был первоначально разработан для пользователей сети CompuServe и существует в двух вариантах: GIF87a и GIF89a. Наше описание относится ко второму из них.

Формат GIF обеспечивает сжатие данных, которое обычно варьируется от 3:1 до 5:1. Графика, сохраняемая в этом формате, ограничивается 256 цветами (8 бит на пиксель), поэтому он не пригоден для хранения полноцветных фотографий, но идеально подходит для хранения значков, эмблем и других искусственно созданных изображений с ограниченным количеством цветов.

Стандарт GIF89a поддерживает три эффекта, полезных при создании Веб-страниц:

• Черезстрочный показ (interlaced images). При таком показе сначала отображается каждая восьмая строка образа, затем каждая четвертая и т. д. В результате, по мере загрузки графического файла обозревателем изображение "проявляется" на экране в несколько проходов. Это может быть полезно пользователям, работающих с медленными модемами, т. к. они могут понять, что изображено на рисунке, не дожидаясь его полной загрузки.
• Прозрачность (transparency). В прозрачном GIF-изображении один из цветов обозначается как прозрачный, что позволяет фону документа проступать сквозь него. В результате рисунок отображается не прямоугольником, наложенным на фон документа, а как бы вырастает из этого фона.
• Анимация (animation). Анимированный GIF-файл содержит несколько изображений, которые отображаются обозревателем, последовательно сменяя друг друга. Кроме того, в нем содержится информация о промежутках времени между сменой изображений и о количестве повторений цикла их прокрутки. В частности, анимированные GIF-файлы применяются для создания рекламных заставок (banners), которыми сегодня кишат все коммерческие Веб-страницы.

1.6.7.2. Формат JPEG

Формат JPEG (Joint Photographic Expert Group) предназначен для хранения полноцветных изображений (24 бита на пиксель, т. е. 16,7 млн. цветов). Он использует мощный метод сжатия данных, который, однако, может привести к потере качества изображения. Тем не менее, часто можно сжимать изображения с коэффициентом 10:1 и даже 20:1 без заметной для глаза потери качества. Этот формат следует использовать для хранения полноцветных фотографий и не следует использовать для хранения изображений, уже приведенных к 256-цветовой палитре. Кроме того, JPEG не годится для изображений с резким переходом между цветами — это объясняется особенностями его алгоритма сжатия.

Аналогом черезстрочных GIF-файлов являются т. н. прогрессивные JPEG-файлы (p-JPEG), которые также отображаются с постепенной прорисовкой. Прозрачность в JPEG-образах не поддерживается.

1.6.7.3. Формат PNG

Формат PNG (Portable Network Graphics) — это новый графический стандарт, разработанный W3C и призванный заменить GIF, однако пока он используется не слишком широко. Особенности формата PNG:

• более высокая степень сжатия изображения, чем у GIF;
• поддержка 1-, 2-, 4-, 8-, 16-, 24- и 32-битовых изображений;
• черезстрочный показ изображения;
• несколько уровней прозрачности;
• встроенная гамма-коррекция изображений.