3.4. Списки
Информацию на HTML-странице можно представлять в виде маркированных, нумерованных списков и списков определений.
Маркированные и нумерованные списки оформляются одинаково, они создаются с помощью парных тегов <OL>…</OL> для нумерованного списка и <UL>…</UL> для маркированного списка. Элементы списка начинаются с тега <LI>.
Шаблон маркированного списка:
<UL>
<LI>Пункт1
<LI>Пункт2
<LI>Пункт3
</UL>
Тег <UL> может иметь атрибут TYPE, определяющий вид маркера. Его значениями могут быть: CIRCLE (кружок), DISC (диск, используется по умолчанию) или SQUARE (квадрат). Например, тег <UL type="SQUARE"> задает маркер списка – квадрат.
Шаблон нумерованного списка:
<OL>
<LI>Пункт1
<LI>Пункт2
<LI>Пункт3
</OL>
Тэг нумерованного списка <OL> может иметь атрибуты TYPE и START. Атрибут TYPE задает способ нумерации, значения атрибута TYPE представлены в таблице 3.3. По умолчанию атрибут TYPE=1.
Таблица 3.3. Атрибуты тегов нумерованного списка
Type |
Способ нумерации |
TYPE=1 |
1,2,3,4,... |
TYPE=i |
i,ii,iii,iv,...
|
TYPE=I |
I,II,III,IV,...
|
TYPE=a |
a,b,c,d,...
|
TYPE=A |
A,B,C,D,... |
Атрибут START задает начало отсчета нумерации. Например, тег <OL TYPE=А START=3> задает нумерацию списка в виде прописных латинских букв, первый элемент списка будет иметь номер С.
Для создания сложных списков используется принцип вложения. Каждый элемент, определяющий пункт списка, может содержать еще один список.
<OL> <LI>Пункт1
<UL>
<LI>Пункт1.1
<LI>Пункт1.2
</UL> <LI>Пункт2
<UL TYPE="SQUARE">
<LI>Пункт2.1
<LI>Пункт2.1
</UL>
<LI>Пункт3
<UL TYPE="CIRCLE">
<LI>Пункт3.1
<LI>Пункт3.2
</UL> </OL>
Списки определений применяются для создания словарей или глоссариев, в которых после каждого элемента термина следует описательный абзац. Список определений задаётся парным тегом <DL>. Каждый термин спис-ка начинается тегом <DT>, а определение термина тегом <DD>. Каждый абзац текста, указанный при помощи тега <DD> автоматически размещается с новой строки.
<DL>
<DT>Пункт1
<DD>Определение пункта1
<DT>Пункт2
<DD>Определение пункта2
<DT>Пункт3
<DD>Определение пункта3
</DL>
Пример создания списков на Web-странице:
<HTML>
<HEAD>
<TITLE>Кафедра ВИТ</TITLE>
</HEAD>
<BODY BGCOLOR="#E6E6FA">
<H2><FONT COLOR="#330099">Преподаватели кафедры ВИТ</FONT> </H2>
<OL>
<LI>доцент Рыбанов А.А.
<LI>доцент Лясин Д.Н.
<LI>доцент Свиридова О.В.
<LI>ст.преп. Савченко В.Ф.
<LI>ст.преп. Александрова В.О.
<LI>ст.преп. Макушкин И.А.
</OL>
<H2><FONT COLOR="#330099">Дисциплины, преподаваемые на
кафедре ВИТ</FONT></H2>
<OL>
<LI>Рыбанов А.А.
<UL TYPE="CIRCLE">
<LI>Основы трансляции
<LI>Базы данных
</UL>
<LI>Лясин Д.Н.
<UL TYPE="CIRCLE">
<LI>Программирование на ЯВУ
<LI>Методы и средства защиты компьютерной информации
</UL>
<LI>Свиридова О.В.
<UL TYPE="CIRCLE" >
<LI>Методы оптимизации
<LI>Основы теории управления
<LI>Теория принятия решений
</UL>
</OL>
<H2><FONT COLOR="#330099">Лаборатории кафедры ВИТ</FONT> </H2>
<DL>
<DT><I><B>В-212</B></I>
<DD>Компьютерный класс, корпус "В", ул. Камская д.6
<DT><I><B>В-202</B></I>
<DD>Компьютерный класс, корпус "В", ул. Камская д. 6
<DT> <I><B>Б-110</B></I>
<DD>Компьютерный класс, корпус "Б", Химкомплекс
</DL>
</BODY>
</HTML>
В результате просмотра этого файла в браузере получится изображение, представленное на рисунке 3.4.
Рис. 3.4. Списки на странице Кафедра ВИТ
Задание №4
В новом документе введите один из списков, предложенных в примере.
Название страницы должно быть как в примере – "Кафедра ВИТ".
Сохраните файл с именем spisok.html и просмотрите его в браузере.