Списки

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

Язык HTML позволяет создавать пять видов списков

• маркированный (UL -unordered list - неупорядоченный),
• нумерованный (OL - ordered list - упорядоченный),
• список определений (DL - definition list),
• список меню (menu) и
• список каталогов (DIR - directory).

Последние два вида считаются устаревшими и практически не употребляются.

Списки создаются элементами двух типов: одни определяют общий вид списка (UL, OL, DL, MENU, DIR), а другие задают его внутреннюю структуру (LI – элемент списка, DT – термин, DD – описание термина). Все они оформляются тегами контейнерами.

Допустимы вложенные списки.

Формы записи при создании списков следующие:

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

<UL type=”disc|square|circle”> <LI>Содержание п. 1 </LI> <LI>Содержание п. 2 </LI> <LI>Содержание п. n </LI> </UL>

type=”disc” Содержание п. 1 Сод-е п. 2 Сод-е п. n

type=”square” Содержание п. 1 Сод-е п. 2 Сод-е п. n

type=”circle” Содержание п. 1 Сод-е п. 2 Сод-е п. n

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

<OL type=”1|A|a|I|i” start=”k”> <LI>Сод-е п. 1 </LI> <LI>Сод-е п. 2 </LI> <LI value=”j”>Сод-е п. j </LI> </OL>

type="1"    1.Сод-е п.1 2.Сод-е п.2 3.Сод-е п.j

type="A"   A. Сод-е п.1 B. Сод-е п.2 C. Сод-е п. j

type="a"   a. Сод-е п.1 b. Сод-е п.2 c. Сод-е п.j

type="I" start="10" X. Сод-е п.1 XI. Сод-е п.2 XII. Сод-е п.j

type="i" value="100" i. Сод-е п.1 ii. Сод-е п.2 c. Сод-е п. j

• 1 (арабские цифры),
• А (прописные латинские буквы),
• а (строчные латинские буквы),
• I (прописные римские цифры),
• i (строчные римские цифры).

Атрибут start определяет, с какого номера (k) начинается список.

Атрибут value определяет, с какого номера (j) начинается текущий элемент списка.

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

Список меню

<MENU> <LI>Содержание пункта 1 </LI> <LI>Содержание пункта n </LI> </MENU>

Содержание пункта 1 Содержание пункта n

Список каталогов

<DIR> <LI>Содержание пункта 1 </LI> <LI>Содержание пункта n </LI> </DIR>

Содержание пункта 1 Содержание пункта n

Практическая работа

1. Создать файл list.htm на основе имеемого шаблона:

• открыть шаблон для просмотра в браузере – двойной щелчок по файлу template.htm в месте его сохранения,
• открыть шаблон для редактирования в текстовом редакторе Блокнот - выбрать пункт в меню браузера Вид/ В виде HTML (Просмотр HTML-кода),
• сохранить шаблон под другим именем – Файл/ Сохранить как/ Тип файла – Все файлы/ Указать место сохранения, требуемое имя и расширение .htm/ Сохранить.

2. В созданном файле list.htm создать список сложной формы:

• Откорректировать содержание <title>, записав в него фразу «Списки»,
• В разделе BODY текст «Список сложной формы», оформить заголовком первого уровня с выравниванием по правому краю,

<H1 align=”right”> Список сложной формы </H1>

• Ниже заголовка записать html-код создающий список сложной формы:

<UL>

<LI>Пункт 1

<OL>

<LI>Пункт 1.1</LI>

<LI>Пункт 1.2</LI>

</OL>

<LI>Пункт 2

<OL type=”A” start=”5”>

<LI>Пункт 2.1</LI>

<LI>Пункт 2.2</LI>

</OL>

<LI>Пункт 3

<OL type=”I”>

<LI>Пункт 3.1</LI>

<LI>Пункт 3.2</LI>

<LI value=”10”>Пункт 3.3</LI>

</OL>

</UL>

• Сохранить внесенные в документ изменения и открыть файл для просмотра в браузере – Файл/ Сохранить, а затем двойной щелчок по файлу list.htm в месте его сохранения.

3. Создать список определений:

• Ниже списка сложной формы текст «Список определений» оформить заголовком первого уровня с выравниванием по центру,

<H1 align=”center”> Список определений </H1>

• Ниже заголовка записать html-код создающий список определений:

<DL>

<DT> Гиперссылка</DT>

<DD>это объект Web-страницы обычно выделенный подчеркиванием и цветом и служащий для быстрого доступа к другим документам WWW </DD>

<DT>Браузер </DT>

<DD>программа просмотра ресурсов Интернет</DD>

</DL>

• Сохранить внесенные в документ изменения и просмотреть в браузере сделанные изменения – панель инструментов браузера – щелчок по кнопке Обновить.