Списки и изображения в HTML

Списки в HTML

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

В HTML используется три типа списков:

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

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

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

*.doc
   файлы, созданные Microsoft Word 
*.xls
  файлы, созданные Microsoft Excel
*.ppt
  файлы, созданные Microsoft PowerPoint

Списки могут вкладываться друг в друга, причем допускается вложение списков одного типа в списки другого типа. Следующий рецепт приготовления ухи демонстрирует список определений, в который вложены маркированный и нумерованный списки:

Ингредиенты:

Способ приготовления:

Маркированный список

Маркированный список определяется с помощью элемента UL. Каждый элемент списка должен начинаться с элемента LI и быть вложенным в элемент UL. Если к элементу UL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше маркированный список выглядит на языке HTML следующим образом:

<UL>
  <LI>маркированный (или неупорядоченный) список,</LI>
  <LI>нумерованный (или упорядоченный) список,</LI>
  <LI>список определений.</LI>
</UL>

Маркированные списки могут выводиться с использованием одного из трех видов маркеров: закрашенного кружка (по умолчанию), не закрашенного кружка и закрашенного квадрата. Вид маркера можно изменить с помощью атрибута type, установив его значение disk, circle и square соответственно. Однако этот атрибут не рекомендуется Спецификацией HTML 4.01. Изменить маркер на один из нескольких используемых по умолчанию стилей, использовать свое собственное изображение или даже вывести список без маркеров можно с помощью соответствующих свойств CSS list-style или list-style-type.

Нумерованный список

Нумерованный список устанавливается с помощью элемента OL. Каждый элемент списка должен начинаться с элемента LI, как и в случае маркированного списка. Если к элементу OL применяется свойства CSS, то элементы LI наследуют эти свойства. Приведенный выше нумерованный список выглядит на языке HTML следующим образом:

<OL>
  <LI>Нарезать картошку.</LI>
  <LI>Посолить.</LI>
  <LI>Поставить аквариум на огонь.</LI>
</OL>

Нумерованные списки могут выводиться с помощью одной из нескольких цифровых или алфавитных систем. По умолчанию, в большинстве браузеров используются десятичные числа, но имеется большее количество возможностей, например, заглавные и строчные латинские буквы, заглавные и строчные римские цифры и многое другое. Выбор маркера и в данном случае осуществляется с помощью параметра type элемента OL. Однако, как было отмечено выше, данный параметр является не рекомендуемым, а для осуществления аналогичной функциональности рекомендуется использовать свойства CSS list-style или list-style-type.

Начинать список допускается с любого номера. Для этой цели применяется атрибут start элемента OL или атрибут value элемента LI. В качестве значения атрибутов start и value задается любое целое положительное число. При этом неважно, какой тип нумерации установлен, даже если в качестве списка используются латинские буквы. Если одновременно для списка применяются атрибуты start и value, то последний имеет преимущество, и нумерация отображается с числа (или символа), указанного аргументом value. Следуем отметить, что эти атрибуты являются фактически исключенными в Спецификации HTML 4.01. Это может показаться странным, так как эти атрибуты имеют смысл и не имеют эквивалента в CSS. Поэтому, использовать данные атрибуты или нет, решает только разработчик.

Список определений

Для создания списка определений используются три элемента: DL, DT и DD. Каждый такой список начинается с контейнера DL, куда входит элемент DT, создающий термин, и элемент DD, задающий определение этого термина. Закрывающий тег </DT> не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги. Приведенный выше список определений может быть реализован следующим образом:

<DL>
  <DT>*.doc</DT>
  <DD>файлы, созданные Microsoft Word</DD>
  <DT>*.xls</DT>
  <DD>файлы, созданные Microsoft Excel</DD>
  <DT>*.ppt</DT>
  <DD>файлы, созданные Microsoft PowerPoint</DD>
</DL>

Стандарт не исключает возможности давать несколько определений одного термина или одно определение нескольким терминам, как показано в следующих примерах:

кофе 
         напиток, приготовленный из кофейных зерен 
         один из оттенков цвета коричневого цвета
      
Кока-Кола
Фанта
Колокольчик 
          Сладкий, насыщенный углекислым газом напиток

Обычно не принято связывать несколько терминов с одним определением, но полезно знать, что это возможно, если возникнет такая необходимость.

Изображения в HTML

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

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

Большинство браузеров поддерживает только три графических формата: GIF, JPEG и PNG. Наиболее широкое распространение получили GIF и JPEG. Долгое время они являлись практически стандартами веб-изображений. Формат PNG появился достаточно недавно, и его популярность значительно уступает форматам GIF и JPEG. Распространение формата PNG сдерживается старыми версиями браузеров, а также недостаточной и неполной поддержкой возможностей PNG в новых версиях.

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

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

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

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

Формат JPEG (Joint Photographic Experts Group - объединенная группа экспертов в области фотографии) поддерживает 24-битные цвета (т.е. около 16 миллионов цветов) и сохраняет яркость и оттенки цветов изображений. Формат предполагает сжатие с потерями: JPEG-сжатие основано на разложении изображений на составляющие, близкие к тем, которые используются в человеческом зрении при отбрасывании информации, не сказывающейся на зрительном восприятии образа. За счет этого достигается высокое сжатие изображений при незначительном ухудшении качества. Степень сжатия и качество изображений находятся в обратной зависимости: чем сильнее сжато изображение, тем ниже его качество (и, соответственно, размер графического файла). В отличие от форматов GIF и PNG формат JPEG не поддерживает прозрачность: при сохранении изображения в данном формате, прозрачные пикселы заполняются определенным цветом. Формат JPEG поддерживает технологию, известную под названием прогрессивный JPEG, при которой версия рисунка с низким разрешением появляется в окне просмотра до полной загрузки самого изображения.

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

Формат PNG (Portable Network Graphics - переносимая сетевая графика), призванный заменить формат GIF, является относительно новым. Формат PNG существует в двух вариантах: PNG-8 и PNG-24.

PNG-8 практически полностью аналогичен формату GIF, за исключением улучшенного сжатия и отсутствия возможности анимации. PNG-8 хорошо подходит для текста, логотипов, иллюстраций с четкими краями и изображений с градиентной прозрачностью.

PNG-24 аналогичен PNG-8, но использует 24-битную палитру цвета и, подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. А подобно GIF и формату PNG-8, сохраняет детали изображения как, например, в логотипах или иллюстрациях. Формат PNG-24 обладает рядом дополнительных преимуществ, таких как применение улучшенного сжатия, наличие альфа-прозрачности и гамма-коррекции и др.

PNG-24 рекомендуется выбирать для полноцветных изображений с четкими краями и мелкими деталями, изображений с мелким текстом, а также для изображений с прозрачными областями. При использовании формата PNG-24 для сжатия полноцветных изображений, он проигрывает формату JPEG в размере созданного файла, т.к. использует сжатие без потерь.

Включение изображений в HTML

Для вставки изображения в HTML-документ используется элемент IMG, имеющий два обязательных атрибута src и alt.

Атрибут alt содержит так называемый альтернативный текст, который будет отображаться, если по каким-либо причинам изображение недоступно. Кроме того, люди с недостатками зрения используют вспомогательные технологии для чтения веб-страниц. Эти технологии считывают содержимое атрибутов alt элементов IMG. Поэтому важно написать хороший альтернативный текст для описания содержимого изображения и поместить его в атрибут alt. Такой текст позволяет также получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображения происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. По мере же загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение. В качестве значения параметра alt служит любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки. Этот атрибут крайне полезен как для доступности, так и для оптимизации поисковых машин.

Атрибут src задает адрес графического файла, который будет отображаться на веб-странице. В качестве значения принимается абсолютный или относительный адрес файла. К абсолютному адресу относится полный путь к ресурсу, включая протокол передачи данных, наименование сервера, а также имена всех каталогов, ведущих к файлу, например http://www.somewhere.com/images/image.jpg. Относительные адреса описывают местоположение файла относительно текущего каталога (например, "../../images/image.jpg") или корня каталогов сервера (например, "/images/image.jpg"). Если требуемый графический файл находится в том же каталоге, что и HTML-документ, его использующий, то в качестве значения аргумента src допустимо указать просто имя требуемого графического файла.

Фрагмент кода, использующий описанные аргументы, представлен ниже:

<IMG src="http://www.somewhere.com/images/beatles.jpg"
  alt="Группа Beatles: Пол, Ринго, Джордж и Джон">

Результат выполнения данного кода представлен на рисунке 7.

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

Описание изображения: атрибут longdesc

Если изображение является очень сложным, как, например, график, можно предложить более длинное его описание, используя атрибут longdesc, чтобы люди, использующие считыватель экрана или при отключенном выводе изображений, могли, тем не менее, получить доступ к информации, содержащейся в изображении. Этот атрибут содержит URL, который указывает на документ, содержащий эту же самую информацию. Например, если имеется график, показывающий множество данных, можно соединить его с таблицей данных с той же информацией с помощью longdesc. Атрибут longdesc может быть задан следующим образом:

<img src="diagramma.jpg" alt="Диаграмма использования поисковых систем в Рунете" longdesc="data.html">

Размеры изображения: атрибуты height и width

Атрибуты height и width дают указание браузеру выделить необходимое пространство для изображений до их загрузки. В этом случае выводится свободное пространство с заданными размерами, пока изображение не загрузится и не займет свое место. Кроме того, данные атрибуты используются для изменения размеров изображения средствами HTML. Ширину и высоту изображения можно менять как в меньшую, так и в большую сторону. Допускается использовать значения в пикселах или процентах относительно родительского элемента (контейнера, в который помещен элемент IMG), или окна браузера. Добавление только одного атрибута width или height сохраняет пропорции изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину. Задание размеров изображения несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения.

В следующем примере ширина и высота изображения задаются равными 300 и 200 пикселов соответственно.

<IMG src="http://www.somewhere.com/images/image.jpg"
  alt="Какая-то фотография" width="300" height="200">

Карты-изображения: атрибуты ismap и usemap

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

Атрибут usemap указывает на клиентскую карту ссылок, определенную элементом MAP. Его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. Применение данного атрибута будет более подробно рассмотрено в следующей лекции.

Практическое занятие 1

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

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

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

Слушателю предлагается создать новый HTML-документ (например, с именем page2.html) и разместить в нем фрагмент текста, представленный в Приложении 2. При верстке необходимо обратить внимание на "ЗАКОНЫ ПРИКЛАДНОЙ ПУТАНИЦЫ", в котором используется маркированный список, вложенный в нумерованный. Слушателю также рекомендуется самостоятельно продумать и организовать список определений, с вложенными в него маркированным и нумерованным списками, как описано в лекции 7.