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

Списки в HTML

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

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

• маркированный (или неупорядоченный) список,
• нумерованный (или упорядоченный) список,
• список определений.

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

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

1. Нарезать картошку.
2. Посолить.
3. Поставить аквариум на огонь.

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

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

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

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

• рыбка,
• картошка,
• соль по вкусу.

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

1. Нарезать картошку
2. Посолить.
3. Поставить аквариум на огонь.

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

Маркированный список определяется с помощью элемента 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>

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

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

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