03. Кодирование картинок

На этой странице:

• Элемент IMG
  • Атрибут src="путь_к_файлу"
  • Атрибут alt="текст"
  • Атрибут title="текст"
  • Атрибуты width=n и height=m
  • Атрибут border=n
  • Атрибуты hspace=n и vspace=m
  • Атрибут align
• Картинка как ссылка
• Хвостатая ссылка
• Визуальные атрибуты и CSS

Элемент IMG

Для вывода картинки на гипертекстовую страницу используют элемент IMG. Элемент задаётся одиночным тегом <IMG> и является строчным элементом, то есть ни до, ни после него перевод строки не выполняется. Таким образом, элемент IMG, помещённый внутрь абзаца, ведёт себя подобно обычному текстовому символу.

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

Атрибут src="путь_к_файлу"

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

<IMG src="img.gif"> 

заставит браузер отобразить на экране содержимое графического файла img.gif из текущего каталога.

Обычно графические файлы не смешивают с кодами, а помещают в отдельную папку pic — подкаталог основного каталога. Команда вывода графики будет в этом случае иметь вид:

<IMG src="pic/img.gif"> 

В качестве адреса картинки можно указывать URL Интернета. Можно написать:

<IMG src="http://www.botik.ru/~robot/pic/rulogo.gif"> 

и вы увидите логотип Роботландского университета с сайта Роботландии:

Но вы можете и не увидеть эту картинку, если сайт Роботландии “переехал”, разработчик изменил его структуру, сервер поломался или встал на профилактику. Если вам не нужны “дыры” на страницах вместо картинок, то не делайте ссылок в “чужой” Интернет, уж больно он непредсказуем и быстро меняется.

Одна распространенная ошибка связана с тем, что на сервере, который работает, как правило, под Unix или Linux, регистр для имени файла имеет значение. Если записать ссылку на логотип Роботландского университета так:

<IMG src="http://www.botik.ru/~robot/PIC/RULOGO.GIF">

то картинку вы не увидите.

Чтобы упростить себе жизнь, записывайте имена всех своих файлов и ссылки на них только в одном регистре, например, нижнем.

Атрибут alt="текст"

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

Например, выполняя команду

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

браузер, не найдя картинку на диске, выведет на экран изображение, показанное на рисунке:

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

Кроме того, альтернативная надпись появится на экране ещё до загрузки картинки, и пользователь сможет получить по ней представление о самой картинке.

Понятно, что мало написать какой-то текст в качестве значения атрибута alt. Сообщение нужно тщательно продумать, принимая во внимание, что пользователь будет читать или слышать его, не видя изображения.

Сообщение “Это картинка” совсем не годится для альтернативного текста. Текст “Фото школьного здания. Четырехэтажная кирпичная постройка с липовой аллеей.” хорошо подходит для изображения, которое любят размещать на главной странице школьные сайты.

Представьте, что человек не видит картинки, а только слушает альтернативный текст. Слова “Это картинка” вызовут раздражение. Короткое “Школа” — информативнее, а текст с липовой аллеей вызовет ещё и положительную ассоциацию:

Если картинка большая, то и альтернативное сообщение может быть достаточно большим. А вот на маленьких картинках длинные тексты обрезаются (браузер Firefox альтернативные тексты не обрезает):

Часто на Web-страницах неверно используют атрибут alt как всплывающую подсказку для сообщения пользователю дополнительной информации. Для этой цели нужно использовать атрибут title.

Атрибут title="текст"

Атрибут title позволяет снабжать элементы (не только картинки) комментариями.

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

Если в теге <IMG> записаны оба атрибута, то значение alt записывается на место картинки, а значение title всплывает на экран при наезде мышиным курсором (не зависимо от того, есть картинка на экране или нет).

<IMG src="pic/mouse.jpg" 
     alt="Мышка"
     title="Страшный зверь"> 

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

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

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

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

Вывод: нужно обязательно записывать размерные атрибуты и указывать в них реальные размеры картинки.

<IMG src="pic/wowa.gif" 
     width=182 height=144
     alt="Вова Бякин"
     title="Мысли о сложностях сайтостроения"> 

Атрибут border=n

Этот атрибут позволяет задать рамку вокруг иллюстрации толщиной в n пикселов. При отсутствии атрибута или при значении n=0 рамка не рисуется.

Рамка картинке, показанной на рисунке с котом, совсем ни к чему. Но рамка полезна для отделения рисунка с фоном от страницы:

Ниже показ пример кода и соответствующая ему иллюстрация.

<IMG src="pic/1280.jpg" 
     width=309 height=400
     border=1
     alt="Shopping (Kim Anderson)"
     title="Фото с сайта www.kim-arts.com"> 

Атрибуты hspace=n и vspace=m

Атрибуты hspace и vspace определяют свободное пространство слева и справа (hspace), над и под (vspace) картинкой. Ниже, на иллюстрации, показана страничка с картинкой для которой указаны свойства hspace=0 vspace=0.

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

Атрибут align

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

• align=top — вертикальное выравнивание по верхнему краю;
• align=middle — вертикальное выравнивание по центру;
• align=bottom — вертикальное выравнивание по нижнему краю;
• align=left — горизонтальное выравнивание по левому краю;
• align=right — горизонтальное выравнивание по правому краю.

Посмотрите, что происходит с изображением и окружающим его текстом при разных значениях атрибута align.

Значения left и right заставляют окружающий текст обтекать картинку, соответственно справа и слева.

Для прекращения обтекания нужно использовать элемент BR с атрибутом clear:

Возникает вопрос: как выравнивать картинки по горизонтали без обтекания?

Решить эту задачу можно, поместив картинку в блочный элемент (например, абзац или элемент DIV). Для блока указываем нужное выравнивание соответствующим атрибутом (align) или соответствующим стилевым свойством (text-align).

Эта картинка

выровнена по правому краю без обтекания при помощи кода:

  
<P align=right>                   
  <IMG src="pic/12114.gif" 
       width=160 height=131 border=0
       hspace=0 vspace=0 
       alt="Картинка выровнена справа без обтекания">

А эта картинка

выровнена по центру при помощи кода:

  
<P style="text-align:center">                   
  <IMG src="pic/12115.gif" 
       width=201 height=201 border=0
       hspace=0 vspace=0 
       alt="Картинка выровнена по центру">

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

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

  
<A href="переход"><IMG src="файл"></A>

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

Ссылка на этой картинке задана следующим образом:

  
<A href="dog.htm"><IMG src="dog.gif" 
   width=200 height=200 alt="Собака"></A>

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

Ссылка на этой картинке задана следующим образом:

  
<A href="dog.htm"><IMG src="dog.gif" border=0
   width=200 height=200 alt="Собака"></A>

Избавиться от рамки можно и при помощи стилевого свойства border:none, заданного для картинки.

Хвостатая ссылка

Попробуйте запустить в браузере такой HTML-код:

  
<HTML>
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <TITLE>Хвостатая ссылка</TITLE>
  </HEAD>
  <BODY bgcolor=white text=black link=blue
        alink=red vlink=purple>
    <P>
Почему ссылка &laquo;хвостатая&raquo;?
    <P>
      <A href="00.htm">
         <IMG src="pic/1286.gif" border=0
              width=195 height=128
              alt="Испытатель"
              title="При щелчке появляется хвост">
      </A>
  </BODY>
</HTML>

В момент щелчка на ссылке вы обнаружите, что пунктирный прямоугольник, указывающий на то, что ссылка получила фокус, — “хвостатый”:

Откуда же берётся “хвост”, и как с ним бороться?

“Хвост” — это часть гиперссылки. Он появляется от пробела или конца строки за кодом картинки. Нет разделителя — нет “хвоста”:

  
<A href="00.htm"><IMG 
   src="pic.gif" border=0 alt="Здесь хвоста нет!"></A>

Визуальные атрибуты и CSS

Ниже приводится список визуальных атрибутов элемента IMG и свойства CSS, которые им соответствуют.

Разработчик должен стараться не использовать визуальные атрибуты в HTML-коде.

Более подробно о вертикальном и горизонтальном выравнивании смотрите в материалах темы 2 в разделе Cтилевые свойства. Текст.