|
Списки |
|
|
В языке HTML возможно создание списков:
ненумерованных (маркированных), нумерованных, вложенных и списков определений,
которые организуются нижеследующим образом.
Ненумерованные (маркированные) списки:
<ul>
<li> элемент списка - 1 </li>
<li> элемент списка - 2 </li>
<li> элемент списка - 3 </li>
<li> элемент списка - 4 </li>
</ul>
Возможные атрибуты тега <ul>:
compact - уменьшает
абзацный отступ элементов списка (компактный список)
type - определяет тип
используемого маркера:
disc - маркер в виде заполненной цветом окружности (по умолчанию)
square - маркер в виде заполненного цветом квадратика
circle - маркер в виде полой окружности
Помещая атрибут type в теге <ul>, вы определяете тип маркера для всех
элементов списка. Также возможно определение конкретного маркера для
определенного элемента списка, в этом случае атрибут type должен находится в
теге <li>.
Примечание: при создании компактного списка, в некоторых случаях, уже
нельзя определить тип используемого маркера для всего списка, но возможно для
каждого элемента списка (для браузеров Internet Explorer). А браузер Netscape
6, почему то вообще не поддерживает компактных списков.
Пример маркированного списка:
<ul="compact"
type="disc">
<li> яблоки </li>
<li> груши </li>
<li> апельсины </li>
<li type="square"> сливы </li>
</ul>
Будет создан компактный маркированный список,
с маркерами в виде закрашенных окружностей, кроме последнего элемента списка,
маркер которого - заполненный цветом квадратик. При написании html-кода
советуем теги, определяющие новый элемент списка, писать с новой строки,
немного сместив их пробелами, для того чтобы вы наглядно видели элементы
списка.
Нумерованные списки:
<ol>
<li> элемент списка - 1 </li>
<li> элемент списка - 2 </li>
<li> элемент списка - 3 </li>
<li> элемент списка - 4 </li>
</ol>
Возможные атрибуты тега <ol>:
type - определяет тип
нумерации:
1 - обычные арабские числа 1, 2, 3 и т. д. (по умолчанию)
I - римские заглавные цифры I, II, III, IV и т. д.
i - римские строчные цифры i, ii, iii и т. д.
A - латинские заглавные буквы A, B, C и т. д.
a - латинские строчные буквы a, b, c и т. д.
start - позволяет задать
значение, с которого следует начать нумерацию.
Примечание: довольно интересен атрибут start: какой бы тип нумерации не был
выбран, значение, с которого следует начать нумерацию определяется арабской
цифрой. Например, если type имеет значение "A" (выбран тип нумерации:
латинские заглавные буквы), а нумерацию необходимо начать с "D", то
значение атрибута start равно 4 (start="4"), потому что "D"
- четвертая буква латинского алфавита. Следует заметить, что использование
атрибута start недопустимо внутри тега <li>. А использование атрибута
type внутри тега <li> позволяет определить тип нумерации для конкретного
элемента списка.
Пример маркированного списка:
<ol type="I"
start="3">
<li> яблоки </li>
<li type="1"> груши </li>
<li> апельсины </li>
<li> сливы </li>
</ol>
Будет создан нумерованный список с типом
нумерации - "римские заглавные цифры". Нумерация начнется с цифры три
(III). Нумерация второго элемента осуществлена с помощью арабской цифры
(поскольку нумерация начата с трех, то значение второго элемента списка в
арабский цифрах равно "4").
Вложенные списки:
Иногда необходимо совместить нумерованный и маркированный
список. Например, необходимо создать такой список:
- Фрукты:
- Апельсины
- Мандарины
- Яблоки
- Груши
- Овощи:
- Помидоры
- Огурцы
- Картофель
- Морковь
- Другое
В этом случае необходимо создать, так
называемый, вложенный список, реализуемый посредством размещения, тегов
маркированного списка внутри тегов нумерованного списка:
<ol
type="I">
<li> Фрукты: </li>
<ul type="disc">
<li> Апельсины </li>
<li> Мандарины </li>
<li> Яблоки </li>
<li> Груши </li>
</ul>
<li> Овощи: </li>
<ul type="disc">
<li> Помидоры </li>
<li> Огурцы </li>
<li> Картофель </li>
<li> Морковь </li>
</ul>
<li> Другое </li>
</ol>
Примечание: возможно создание, как маркированного
списка внутри нумерованного, так и нумерованного списка внутри маркированного.
Это реализуется путем вложения тегов, отвечающих за соответствующие списки.
Списки с описаниями (список определений или терминов):
<dl>
<dt> Термин - 1 </dt>
<dd> Определение термина - 1 </dd>
<dt> Термин - 2 </dt>
<dd> Определение термина - 2 </dd>
<dt> Термин - 3 </dt>
<dd> Первое определение термина - 3 </dd>
<dd> Второе определение термина - 3 </dd>
</dl>
Как вы могли заметить, допускается несколько
определений термина. Кроме того теги <dt> и <dd> (вместе с их
соответствующими закрывающими тегами) могут использоваться самостоятельно:
<dt> - для отображения терминов;
<dd> - для определений термина.
Пример:
<dt> Собака </dt>
<dd>
друг человека </dd>
Ну, вот, пожалуй, и все, что касается создания
различных списков на HTML.
