HTML Списки

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

• <ol> – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
• <ul> – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
• <dl> – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

<ol>
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ol>

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

<p><strong>Пошаговая инструкция</strong></p>
<ol>
  <li>Достать ключ</li>
  <li>Вставить ключ в замок</li>
  <li>Повернуть ключ на два оборота</li>
  <li>Достать ключ из замка</li>
  <li>Открыть дверь</li>
</ol> 

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

<ol type="A|a|I|i|1">

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

<ol type="I" start="49">
  <li>Перепела</li>
  <li>Фазаны</li>
  <li>Куропатки</li>
  <li>Павлины</li>
</ol>

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

<li value="7">

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

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

<ol type="1">
  <li>Первый пункт списка</li>
  <li value="7">Второй пункт списка</li>
  <li>Третий пункт списка</li>
</ol>

В этом примере "Первый пункт списка" будет иметь номер 1, "Второй пункт списка" – номер 7, а "Третий пункт списка" – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ol style="list-style-type:lower-roman">

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

<ol style="list-style-type:lower-roman">
<li>первый пункт списка</li>
<li>второй пункт списка</li>
<li>третий пункт списка</li>
</ol>

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

<ul>
  <li>Первый пункт </li>
  <li>Второй пункт </li>
  <li>Третий пункт </li>
</ul>

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

<ul>
  <li> Windows Movie Maker</li>
  <li> Pinnacle VideoSpin</li>
  <li> AviSynth</li>
  <li> Avidemux</li>
</ul>

Внутри тега <li> не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

Вложенные списки

<ul> 
  <li> Понедельник 
    <ol> 
      <li>Отправить почту</li> 
      <li>Визит к редактору
      <ul> 
        <li>Выбор темы</li> 
        <li>Дкаративное оформление</li> 
        <li>Заключительный отчет</li> 
      </ul> 
      </li> 
      <li>Вечерний просмотр сообщений</li> 
    </ol> 
  </li> 
  <li> Вторник  
    <ol> 
      <li>Пересмотреть график</li> 
      <li>Отправить изображения</li> 
    </ol> 
  </li> 
  <li> Среда  
... 
</ul> 

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ul style="list-style-type:square">

В следующем примере рассмотрены различные стили оформления маркированных списков:

<p><strong>Disc:</strong></p>
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<p><strong>Circle:</strong></p>
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<p><strong>Square:</strong></p>
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<p><strong>None:</strong></p>
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

<ul style="list-style-image: url(images/Star.png);">

<p><strong> Знаки зодиака </strong></p>
<ul style="list-style-image: url(images/Star.png);"> 
  <li>Овен</li>
  <li>Телец</li>
  <li>Близнeцы</li>  
</ul>

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

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

<dl>
  <dt>Первый термин</dt>
  <dd>Описание первого термина</dd>
  <dt>Второй термин</dt>
  <dd>Описание второго термина</dd>
</dl>

В следующем примере показано одно из возможных использований списка определений:

<dl>
<dt>Всемирная паутина</dt>
<dd>— от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.</dd>
<dt>Интернет</dt>
<dd>— совокупность сетей, применяющих единый протокол обмена для передачи информации.</dd>
<dt>Сайт</dt>
<dd>— набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd>
</dl>

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

Задачи