Работаем со списком — FAQ по HTML

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

Списки вносят свой вклад для облегчения нам этой процедуры.

Списки бывают:

• Маркированные;
• Нумерованные списки;
• Список определений;
• Вложенные списки.

Начнем с рассмотрения маркированного списка. Для того чтобы его создать существуют теги ul и li.

Конструкция построения списка такова:

1
2
3
4
5

<ul>
  <li>Первая строка списка</li>
  <li>Вторая строка списка</li>
  <li> . . . . . . . . . .</li>
</ul>

Как видите, все теги требуют обязательного закрытия. По умолчанию в качестве маркера используется круг. Так же маркер может принимать значение окружность и квадрат (circle и square).

Для этого необходимо в теге ul прописать параметр type.

1
2
3

<ul type=disc>
  <li> . . . . . . . . . .</li>
</ul>

Так же с помощью css можно изменить маркер, вставив за место него свой рисунок. Для этого необходимо прописать атрибут list-style-image.

Пример оформление стиля:

1
2
3
4
5

<style type="text/css">
  ul{
     list-style-image:(img/marker.gif);
    }
</style>

Этот код необходимо разместить в метатеге head.

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

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

• арабские цифры; (параметр type="1")
• заглавные латинские буквы; (параметр type="A")
• строчные латинские буквы; (параметр type="a")
• заглавные римские цифры; (параметр type="I")
• строчные римские цифры; (параметр type="i")

Если вам необходимо начать список с определенной цифры, то необходимо записать так:

1
2
3
4
5

<ol type="I" start="3">
  <li>Первый список</li>
  <li>Второй список</li>
  <li>.............</li>
</ul>

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

Структура списка определений следующая.

Термин 1

Определение термина 1

Термин 2

Определение термина 2

Такой список задается с помощью контейнера dl, термин — тегом dt, а его определение — с помощью тега dd.

1
2
3
4
5
6

<dl>
  <dt>Термин 1</dt>
  <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
  <dd>Определение термина 2</dd>
</ul>

Вложенные списки представляют сложную иерархической структуры текста. Что бы вы поняли, о чем я говорю, посмотрите на пример такой структуры.

1. Тема 1

1. Пункт 1.1

2. Пункт 1.2

2. Тема

1. Пункт 2.1

2. Пункт 2.1

Создать такую структуру можно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<ol>
  <li>Тема 1
  <ol>
  <li>Пункт 1.1</dd>
  <li>Пункт 1.2</li>
  </ol>
  </li> 
  <li>Тема 2</li>
  <ol>
  <li>Пункт 2.1</li>
  <li>Пункт 2.2</li>
  </ol>
  </li>
</ul>

Вот и все что вам необходимо знать про списки.

С уважением, Алексей Фомичёв

Из жизни веб-мастеров:
Разница в белых, серых, черных методах продвижения:
Черные методы – вас забанит Яндекс сразу же
Серые методы – вас забанит Яндекс
Белые методы – вас забанит Яндекс. Чуть позже.

Содержание FAQ по HTML:
Что такое HTML или история возникновения гипертекстовой разметки
Введение
Форматирование текста
Учимся делать ссылки
Работаем со списком
Изучаем таблицы
Форма, как средство взаимодействия с пользователем сайта