htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > HTML по шагам > Списки

Этот материал устарел, рекомендую Самоучитель HTML

Шаг 10. Списки

Влад Мержевич

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

Любой список представляет собой контейнер <UL>, который устанавливает маркированный список, или <OL>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <LI>.

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

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. В этом смысле все пункты списка идентичны по своему оформлению. Для установки маркированного списка используются теги <UL> и <LI> (пример 10.1).

Пример 10.1. Создание маркированного списка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li>
<li>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
<li>Duis te feugifacilisi.</li>
<li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li>
</ul>
</body>
</html>

Результат выполнения примера показан ниже.

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

Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>. Допустимые значения приведены в табл. 10.1

Табл. 10.1. Стили маркеров списка
Тип списка Код HTML Пример
Маркированный список с маркерами в виде круга <ul type="disc">
<li>...</li>
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
Маркированный список с маркерами в виде окружности <ul type="circle">
<li>...</li>
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
Маркированный список с квадратными маркерами <ul type="square">
<li>...</li>
</ul>
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Для создания нового маркированного списка в Nvu, предназначена кнопка на панели инструментов. Предварительно требуется выделить текст, который вы желаете сделать списком, после чего нажать указанную кнопку. Можно также воспользоваться меню Формат > Список > Маркированный. Не обязательно делать списком существующий текст. Можно нажать на кнопку маркированного списка () и вводить желаемый текст. Нажатие на клавишу <Enter> создаст новый элемент списка, еще одно нажатие на <Enter> отменяет работу со списком и позволяет вводить обычный форматированный текст.

Для изменения стиля маркеров выберите пункт меню Формат > Список > Свойство списка... и в открывшемся окне укажите желаемый стиль (рис. 10.1).

Рис. 10.1. Панель для изменения стиля маркера

Рис. 10.1. Панель для изменения стиля маркера

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

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и применяется для создания списка. В качестве нумерующих элементов могут выступать следующие значения:

Для указания типа нумерованного списка применяется параметр type тега <OL>. Его возможные значения приведены в табл. 10.2

Табл. 10.2. Типы нумерованного списка
Тип списка Код HTML Пример
Нумерованный список с арабскими цифрами <ol type="1">
<li>...</li>
</ol>
1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Нумерованный список с прописными буквами латинского алфавита <ol type="A">
<li>...</li>
</ol>
A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Нумерованный список со строчными буквами латинского алфавита <ol type="a">
<li>...</li>
</ol>
a. Чебурашка
b. Крокодил Гена
c. Шапокляк
Нумерованный список с римскими цифрами в верхнем регистре <ol type="I">
<li>...</li>
</ol>
I. Чебурашка
II. Крокодил Гена
III. Шапокляк
Нумерованный список с римскими цифрами в нижнем регистре <ol type="i">
<li>...</li>
</ol>
i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк

В примере 10.2 показано создание списка с использованием римских цифр в верхнем регистре.

Пример 10.2. Создание нумерованного списка

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<ol type="I">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</li>
<li>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
<li>Duis te feugifacilisi.</li>
<li>Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</li>
</ol>
</body>
</html>

Результат примера показан ниже.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  2. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  3. Duis te feugifacilisi.
  4. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.

Создание нумерованного списка в Nvu напоминает создание списка маркированного. Но для этого вида списка используется кнопка на панели инструментов. Для изменения стиля нумерации выберите пункт меню Формат > Список > Свойство списка... и укажите желаемые параметры в открывшемся окне (рис. 10.2).

Рис. 10.2. Панель для изменения свойств нумерованного списка

Рис. 10.2. Панель для изменения свойств нумерованного списка

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

Список определений состоит из двух элементов ? термина и его определения. Сам список задается с помощью контейнера <DL>, термин ? тегом <DT>, а его определение ? с помощью тега <DD>. Вложение тегов для создания списка определений продемонстрировано в примере 10.3.

Пример 10.3. Общая структура списка определений

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

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

Пример 10.4. Создание списка определений

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<dl>
<dt>Тег</dt>
<dd>Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида.</dd>
<dt>HTML-документ</dt>
<dd>Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.</dd>
<dt>Сайт</dt>
<dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd>
</dl>
</body>
</html>

Результат примера показан ниже.

Тег
Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др. и для изменения их вида.
HTML-документ
Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.
Сайт
Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.

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

Создать список определений в Nvu достаточно просто. Для этого имеется две похожих кнопки на панели инструментов.

— устанавливает термин (тег <DT>).

— устанавливает описание термина (тег <DD>).

Контейнер <DL> формируется автоматически, и заботиться об этом теге нет необходимости.

Если списка и текста для него еще нет, нажмите на кнопку , а затем набирайте текст первого термина. После нажатия на клавишу <Enter> редактор сам установит, что следующая строка должна быть определением. Еще одно нажатие на <Enter> добавляет очередной термин. Таким образом, использование перевода строки по очереди позволяет вводить термин и его определение. Когда требуется прекратить редактирование списка и начать ввод обычного текст, нажмите на <Enter> дважды.

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

Статья опубликована: 14.08.2005 Последнее обновление: 06.11.2006
HTML по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru