Списком называется взаимосвязанный набор отдельных фраз или предложений, которые
начинаются с маркера или цифры. Списки предоставляют возможность упорядочить
и систематизировать разные данные и представить их в наглядном и удобном для
пользователя виде.
Любой список представляет собой контейнер <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>
Результат выполнения примера показан ниже.
- Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diem nonummy nibh euismod
tincidunt ut lacreet dolore magna aliguam
erat volutpat.
- Ut wisis enim ad minim
veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
- Duis te
feugifacilisi.
- Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы
добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность
и квадрат. Для выбора стиля маркера используется параметр 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. Панель для изменения стиля маркера
Нумерованный список
Нумерованные списки представляют собой набор элементов с их порядковыми номерами.
Вид и тип нумерации зависит от параметров тега <OL>,
который и применяется для создания списка. В качестве нумерующих элементов могут
выступать следующие значения:
- арабские цифры (1, 2, 3, ...);
- прописные латинские буквы (A, B, C, ...);
- строчные латинские буквы (a, b, c, ...);
- римские цифры в верхнем регистре (I, II, III, ...);
- римские цифры в нижнем регистре (i, ii, iii, ...).
Для указания типа нумерованного списка применяется параметр 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>
Результат примера показан ниже.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.
- Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Duis te feugifacilisi.
- Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
Создание нумерованного списка в Nvu напоминает создание списка маркированного.
Но для этого вида списка используется кнопка
на панели инструментов. Для изменения стиля нумерации выберите пункт меню Формат >
Список > Свойство списка... и укажите желаемые параметры в
открывшемся окне (рис. 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> дважды.
Для превращения в список определений уже существующий текст рекомендуется проделать
следующее. Выделите желаемый текст и нажмите на кнопку ,
после чего все абзацы превращаются в определения. Теперь ставите курсор на ту
строку, которая должна быть термином и нажимаете на кнопку .
Можно сделать и наоборот, вначале установить весь текст как термины, а затем
для отдельных строк указать что они являются определениями.
Источник: http://www.htmlbook.ru |