10.4. Списки в HTML-документе

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

Использование тегов списков как элементов форматирования абзацев создают висячие отступы. Для описания списков существуют специальные теги (Таблица 2.3).

Таблица 0.3. Теги списков

   

Вид списка

Формат тега

Атрибуты

Назначение

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

<UL>список</UL>

TYPE=стиль маркера

Значения:

DISK, CIRCLE , SQUARE

Заключают весь маркированный список

Нумерованный

<OL>список</OL>

TYPE=формат нумерации

Значения:

A, a, I, i, 1

START=n

- начало отсчета

Заключают весь нумерованный список

Маркированный и нумерованный

<LI>элемент </LI>

Ограничивают каждый элемент списка

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

<DL>список </DL>

Заключают весь список определений

<DT>термин</DT

Ограничивают элемент-термин

<DD>определение

</DD>

Ограничивают элемент-определение

Тег <UL> имеет атрибут TYPE, назначающий стиль маркера. Его значениями могут быть: CIRCLE (незакрашенный кружок), DISC (диск, используется по умолчанию) или SQUARE (квадрат).

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

Тэг нумерованного списка <OL> может иметь атрибуты TYPE и START. Атрибут TYPE задает формат нумерации:

A - прописные латинские буквы (A,B,C...)

a - строчные латинские буквы (a,b,c...)

I - большие римские цифры (I,II,III...)

i - маленькие римские цифры (i,ii,iii...)

1 - арабские цифры (1,2,3...)

По умолчанию используются арабские цифры.

Атрибут START задает начало отсчета нумерации. Например, тег <OL TYPE=I START=3> задает нумерацию списка в виде больших римских цифр, первый элемент списка будет иметь номер III.

Пример использования нумерованных и маркированных списков приведен в Пример 10.8, «Документ 6. Файл economics.html»

Пример 10.8. Документ 6. Файл economics.html


<HTML>
<HEAD>
<TITLE> ИНФОРМКнига - "ЭКОНОМИКА </TITLE>
</HEAD>
<BODY BGCOLOR="#C0C0C0">
<H3 ALIGN = RIGHT> ОАО "ИНФОРМЭкономика" </H3>
<H1 ALIGN = CENTER> <FONT COLOR = "#804040"> ЭКОНОМИКА </FONT> </H1>
<HR>
<A HREF="index.html"> Добро пожаловать! </A>
<H2> Мы хотим Вам сказать, что: </H2>
<P> Количество клиентов компании увеличилось за последний месяц в два раза и составило 1000 000 человек. 
<P> Поставщиками продукции для нашей фирмы стали 100 лучших издательств России.
<P>Посетите наши тематические разделы:</P>
<P>КНИГИ </P>
<P>ПУБЛИКАЦИИ </P>
<P>ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ </P>
<HR>
<UL TYPE=square> 
<LI>Список КНИГ </LI>
<OL>
<LI> Куртер Дж., Маркви А.Microsoft Office 2000: учебный курс - СПб: Питер,2000.-640с.: ил.</LI> 
<LI> Новиков Ф.А., Яценко А.Д. Microsoft Office 2000 в целом. - СПб.: БХВ - Санкт-Петербург, 2000. - 728 с. ил.</LI>
<LI> Проектирование интерактивных Web-приложений: Учебное пособие - М.: Горячая линия,2001.-272 с.: ил.</LI> 
</OL>
<LI> Список ПУБЛИКАЦИЙ </LI>
<LI> ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ </LI>
</UL>
</BODY>
</HTML>

При просмотре файла economics.html с помощью браузера вы увидите страницу, представленную на рис. Рисунок 10.5, «Списки на странице Экономика»

Введите список ПУБЛИКАЦИЙ и ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ в текст документа economics.html и просмотрите полученные результаты.

Рисунок 10.5. Списки на странице Экономика

Списки на странице Экономика