Не хватает картинок

Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.

Какой графический формат можно использовать

Браузеры “понимают” 3 графических формата GIF, JPEG и PNG. Мы остановимся на GIF и JPEG

Формат GIF

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

GIF-формат имеет три дополнительные возможности:

• Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, “зациклить кино” или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия картинок и разная настроечная информация.

  В HTML нет различия между заданием вывода на экран простого GIF или анимированного. О том, что картинка “живая” — браузер узнает в момент загрузки GIF-файла (с диска или сети) и поступает соответственно. Обычные картинки он просто размещает на экране и “забывает” про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF.

   

  Обычный GIF	Анимированный GIF

  
  
    

• Прозрачная графика. В GIF-формате один или несколько цветов можно объявить прозрачными. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом.

  Прозрачные цвета задаются в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в графический редактор и снова записать на диск, указав прозрачные цвета.

   

  Обычный GIF	Прозрачный GIF

  
  
    

• Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,... строки исходного изображения. Вторая — 2, 6, 10,... Третья — 3, 7, 11,... Четвёртая — 4, 8, 12,...

  Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвёртую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю еще до загрузки всех частей получить представление об изображении — ведь части строятся браузером по мере их поступления на компьютер. Если картинка загружается не из Интернета, то различия в выводе на экран обычного GIF и чересстрочного практически незаметны.

Формат JPEG

Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.

Конечно, высокое качество отражается на размере файла. Но формат JPEG имеет одну особенность: в графическом редакторе при записи на диск можно указать нужную степень качества и, тем самым, сбалансировав качество и размер файла, достичь нужного компромисса.

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

Формат JPEG поддерживает режим, похожий на чересстрочную развертку GIF. Но, в отличие от GIF, деление на части происходит не по строкам, а по специальному алгоритму выделения из картинки полноформатных частей. При этом качество каждой следующей части выше, чем у предыдущей. Формат JPEG с таким свойством называется прогрессивным.

Пример JPEG-графики

Как кодировать картинки

Теги, расположенные в теле HTML-программы, можно разделить на два класса:

• Теги, которые разделяют неформатированный текст документа на структурные единицы — выполняют разметку для отображения текста на экране. Такие теги всегда парные (<ТЕГ>элемент</ТЕГ>).
   
• Теги, которые создают новые элементы (этим элементам ничего не соответствует в исходном тексте). Такие теги — обычно непарные (<ТЕГ>).

Из всех тегов, которые мы рассматривали ранее, только один тег <HR> создавал новый элемент (горизонтальную линию), в то время как все остальные теги размечали исходный текст документа.

Понятно, что тег, предназначенный для вывода на экран картинки из файла, относится ко второму классу. Этот тег непарный, и он имеет имя IMG.

Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного “знака” нужно воспользоваться тегом <IMG>. У этой команды нет парного закрывающего тега, но есть много атрибутов.

Атрибут src = "имя файла"

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (HTML-файлами). Тогда команда вывода графики будет иметь вид: <IMG src="./pic/img.gif">

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg   alt="Страшный зверь">

Атрибут alt рекомендуется использовать всегда. Alt-надпись может озвучить синтезатор речи, её смогут прочитать пользователи, которые отключают графику ради экономии денег или работают в текстовых браузерах.

Если картинка построена браузером, то содержимое alt-надписи выводится на экран при зависании мышиного курсора над изображением (если не задан атрибут title, иначе выводится значение атрибута title). Проверьте это на следующей картинке:

<IMG src=./pic07/cat7.gif   alt="Аватарка jsnbrn">

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.

Если атрибуты не заданы, картинка рисуется в естественных размерах.

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

Рекомендуется всегда записывать эти атрибуты и указывать в них реальные размеры картинки. Если размеры указываются неверно — картинка выводится браузером с искажением. Если указание размеров вовсе опущено — на экране происходит маленькое землетрясение в момент прихода картинки из сети. Ведь, не зная размеров картинки, браузер оставляет под неё на экране стандартный прямоугольник, продолжая строить остальные элементы. Когда картинка загружена, браузеру приходится полностью перересовывать экран.

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.

При отсутствии атрибута, или при значении n=0 рамка не рисуется.

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. Можно использовать следующие значения атрибута:

Давайте зададим небольшой текстовый абзац и разместим внутри него картинку:

<P>
<img border="0" src="../img/fc.gif" width="129" height="144">

Посмотрите на картинку. 

</P>

Пример

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

Очень легко заставить работать картинку как гиперссылку. Достаточно вложить команду IMG внутрь команды A:

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

Для картинки с часами не задан атрибут border. Тем не менее, мы видим рамку. Эта рамка появляется потому, что картинка является гиперссылкой.

Часто рамка вокруг картинки нежелательна, даже когда она означает ссылку. Ведь о ссылке однозначно говорит изменение формы курсора, а если картинка — прозрачный GIF, рамка смотрится некрасиво. Избавиться от рамки, даже когда картинка — ссылка, можно явным заданием border=0.

Эти ссылки заданы так:

<a href="pr/401u1.htm">
<img border="0" src="img/clock.gif" width="100" height="105"></a> 
</td>
<td>
<p align="center"><a href="pr/401u1.htm">
<img src="img/clock.gif" width="100" height="105"></a>

>Назад<