<< ПредыдущаяОглавлениеСледующая >>


ГЛАВА 2. СПИСКИ

В HTML-документах часто используется конструкция, представляющая собой список тех или иных данных. Например, это может быть список марок автомобилей, или знаков зодиаков, или рецептов блюд и т.п. Организовать такие списки можно, используя уже известные (из гл. 1) теги HTML. Однако гораздо более удобным и гибким инструментом являются специальные теги для представления списков в документе. В данной главе будут рассмотрены основные теги, позволяющие задавать списки различных типов.

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

Наиболее простым в представлении является маркированный список, задаваемый тегом-контейнером <ul>. С его помощью формируются списки, у которых в качестве маркеров используются «отвлеченные» обозначения в виде квадратов, кружков, треугольников и др.

Для создания элементов списка используется тег <li>, записанный внутри тегов <ul> … </ul>. Тег <li> не требует закрывающего тега </li>, но его использование не возбраняется спецификацией языка HTML. Обычно браузер сам определяет где заканчивается один тег <li> и начинается другой. Кроме того, при определении элементов списка нет необходимости выполнять принудительный перенос строк с помощью тега <br> или тега <p>, эту задачу выполняет тег <li>, который четко структурирует элементы, образуя из них вид списка в окне браузера. Ниже представлен пример HTML-документа, использующий маркированный список для представления знаков зодиаков.

<!—пример маркированного списка знаков зодиаков -->
<html>
<head>
<title>Пример маркированного списка знаков зодиаков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
<p>Знаки зодиаков:
<ul>
<li>Овен
<li>Телец
<li>Близнецы
<li>Рак
</ul>
</body>
</html>

Рис. 2.1. Пример маркированного списка

Как видно из рис. 2.1. тег <ul> осуществляет отступ сверху и снизу, а также слева от края документа, выделяя таким образом список в тексте документа. Тег <li> в свою очередь обеспечивает вывод каждого элемента с новой строки, образуя список.

Тег <ul> имеет необязательный параметр type, позволяющий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки (некоторые браузеры используют другие маркеры по умолчанию). Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:

disk – закрашенные кружки;
circle – незакрашенные кружки;
square – закрашенные квадратики.

Например, если в записанном выше примере переписать тег <ul> в виде

<ul type=square>

то получим следующий вид списка (рис. 2.2):

Рис. 2.2. Маркированный список с параметром type=square

Следует отметить, что внутри тега <ul> могут находиться любые другие теги языка HTML, в том числе и вложенные теги <ul>, образуя таким образом более сложный вид списков. Например, можно создать список сотрудников, с вложенным списком возраста, места работы, образования:

<html>
<head>
<title>Пример вложенных списков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
<ul>
<b>Список сотрудников</b>
<li>Иванов Иван Иванович
<ul>
<li>Возраст: 22
<li>Место работы: УлГТУ
<li>Образование: высшее
</ul>
<li>Петров Петр Петрович
<ul>
<li>Возраст: 27
<li>Место работы: УлГУ
<li>Образование: высшее
</ul>
</ul>
</body>
</html>

Рис. 2.3. Пример вложенных списков

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



<< ПредыдущаяОглавлениеСледующая >>