Списки - упорядоченные (нумерованные), неупорядоченные (маркированные) и списки определений. Теги <OL>,<UL>, <LI>,<DL>, <DT>,<DD>. Параметры TYPE, START, value.
Типы списков HTML и соответствующие им теги:
- упорядоченный (нумерованный) список <OL>
- неупорядоченный список (маркированный) <UL>
- список определений <DL>
- список элементов меню (выглядит, как неупорядоченный список, но используется редко) <MENU>
- список элементов каталогов (выглядит, как неупорядоченный список, но используется редко) <DIR>
Из пяти вышеперечисленных типов чаще всего используются три: упорядоченные списки, неупорядоченные списки и списки определений.
Списки меню и каталогов - это вариации неупорядоченных списков и при отображении в большинстве броузеров они ни чем не отличаются от обычных, неупорядоченных списков.
Маркированные списки
Самым распространенным типом списка, использующегося в Web, является неупорядоченный или маркированный список. Маркированные списки применяются для перечисления неупорядоченной информации. В таком списке каждый новый элемент выделяется маркером (отсюда и название списка).В маркированных списках, в отличии от нумерованных, порядок следования элементов не имеет особого значения, т.е. если элемент стоит в списке первым, это не значит, что он имеет более высокий приоритет, чем элемент, стоящий вторым или третьим.
Тег <UL> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <LI>. Если к тегу <UL> применяется таблица стилей, то элементы <LI> наследуют эти свойства. Закрывающий тег </UL> обязателен.
Синтаксис
<ul><li> Первый элемент
<li> Второй элемент
<li> Третий элемент
<ul>
Каждый тег <LI> служит для определения одного элемента списка. Использовать закрывающий тег </LI> нежелательно. Тег <LI> является для броузера сигналом о том,что нужно начать новую строку.
К тексту элементов любых списков можно применять средства HTML по форматированию текста. В каждом элементе списка могут содержаться другие HTML-элементы, а также дополнительные вложенные списки.
Параметр тега <UL>
-type - устанавливает вид маркера спискаЧтобы изменить тип маркера для всего списка, воспользуйтесь синтаксисом <UL TYPE=тип>, а для одного элемента списка - <LI TYPE=тип>, где параметр тип - это одно из значений приведенных ниже:
<ul type="disc/circle/square">...</ul>Тип ! Рекомендуемый внешний вид (зависит от броузера)
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
disk Круг с заливкой
square Заполненный квадратик
circle Круг без заливки
Пример HTML-кода маркированного списка
<title> Маркированные списки </title>
<body>
Список с закрашенными круглыми маркерами
<li> Первый элемент
<li> Второй элемент
<li> Третий элемент
</ul>
Список с круглыми незакрашенными маркерами
<li> Первый элемент
<li> Второй элемент
<li> Третий элемент
</ul>
Список с квадратными маркерами
<li> Первый элемент
<li> Второй элемент
<li> Третий элемент
</ul>
Список с разными маркерами элементов
<li type="circle">Окружность
<li> Закрашенный круг
<li type="square"> Квадрат
</ul>
</body>
Нумерованные списки
Прежде всего нужно отметить, что упорядоченные и нумерованные списки - это одно и то же. Эти термины являются взаимозаменяемыми. Нумерованные списки применяются для упорядочения приводимых данных. При нумерации элементов таких списков могут быть использованы как арабские (по умолчанию), так и римские цифры, буквы алфавита (строчные и прописные). Использовать буквы русского алфавита в упорядоченных списках HTML нельзя.
Тег <OL> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <LI> (который расшифровывается как list item - элемент списка). Если к тегу <OL> применяется таблица стилей, то элементы <LI> наследуют эти свойства. Закрывающий тег </OL> обязателен.
Синтаксис
<ol>
<li> Первый элемент списка
<li> Второй элемент списка
...
<li> Последний элемент списка
</ol>
Каждый тег <LI> служит для определения одного элемента списка. Теоретически список может содержать произвольное количество элементов. Но, с точки зрения здравого смысла, совершенно ясно, что список не должен быть слишком длинным. Длинные списки, во-первых, долго загружаются, а во-вторых, усложняют восприятие материала.
Тег <LI> - это контейнер. Но его конечный дескриптор </LI> является необязательным и поэтому как правило, не используется.
Параметры тега <LI>:
type - устанавливает вид маркера нумерованного и маркерованного списка
Синтаксис
<li type="disk/circle/square">
<li type="A/a/I/i/1"
value - число, с которого будет начинаться нумерованный список
Синтаксис
<li value="число">
Пример HTML-кода нумерованного списка
<html>
<head>
<title> Упорядоченный список <title>
</head>
<body>
<ol>
<li> Красный
<li> Оранжевый
<li> Желтый
<li> Зеленый
<li> Голубой
<li> Синий
<li> Фиолетовый
</ol>
</body>
</html>
В итоге на экране монитора мы получим следующий результат:
Упорядоченный список
1. Красный
2. Оранжевый
3. Желтый
4. Зеленый
5. Голубой
6. Синий
7. Фиолетовый
Вообще списки могут содержать любые элементы, логически связанные между собой: текст, изображения, гипертекстовые ссылки и любые другие элементы HTML. Упорядоченный список может представлять собой, например, поэтапное описание или пошаговую инструкцию процесса наклейки обоев в квартире.
Если вы вставите в середину списка новый элемент, то броузер перенумерует весь список. Поэтому в случае необходимости можно без проблем добавлять и удалять элементы списка.
Каждый тег <LI> является для броузера сигналом о том, что нужно начать новую строку. Поэтому нет никакой необходимости делать перевод строки с использованием тега <BR>. Его использование оправдано только в том случае если текст элемента необходимо разместить в нескольких строках. В списках можно использовать практически все элементы форматирования HTML.
Параметры тега <OL>:
- type - устанавливает вид маркера списка;
- start - число, с которого будет начинаться нумерованный список
Параметр TYPE
<ol type=тип>
Параметр тип может принимать следующие значения:
Таблица 1
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Тип ! Стиль
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1 Стардартный способ нумерации с помощью арабских цифр
а Строчные буквы алфавита
А Прописные буквы алфавита
i Строчные римские цифры
I Прописные римские цифры
Параметр START
<ol type=значение>
Нумерацию списка с помощью цифр и букв можно начать с любой цифры или буквы. Для этого используется атрибут start: <ol start=значение>. Параметр значение - это число. Таким образом, код <ol start=7> означает, что нумерация элементов списка будет начинаться с числа 7. Чтобы начать нумерацию с некоторой буквы или римской цифры необходимо воспользоваться атрибутами type и start. Синтаксис выглядит следующим образом: <ol type=тип start=значение>. Парметр тип принимает значения приведенные в таблице 1, а параметр значение - это число. Таким образом, код <ol type=A start=4> означает, что нумерация списка будет начинаться с четвертой буквы английского алфавита, т.е. с буквы D. Для изменения нумерации внутри списка используется атрибут value тега <li>. Код <li value=5> означает, что дальнейшая нумерация будет начинаться с цифры 5.
Возможность изменять схему нумерации очень полезна в случае создания страницы, содержащей множество заголовков и подзаголовков.
Пример HTML-кода нумерованного списка
<title> Нумерованные списки </title>
<body>
Нумерация арабскими цифрами
<ol>
<li> Первый элемент
<li> Второй элемент
</ol>
Продолжение нумерации, но большими римскими цифрами
<ol type="I" start=3>
<li> Третий элемент
<li> Четвертый элемент
</ol>
Новый список, нумерация большими латинскими буквами
<ol type="A">
<li> Первый элемент
<li>Второй элемент
</ol>
</body>
В результате получим следующее:
Нумерация арабскими цифрами
1. Первый элемент
2. Второй элемент
Продолжение нумерации, но большими римскими цифрами
III.Третий элемент
IV.Четвертый элемент
Новый список, нумерация большими латинскими буквами
A. Первый элемент
B. Второй элемент
Значение атрибута type можно отдельно указать для любого элемента списка. Кроме того, для элементов нумерованного списка можно задать значение атрибута value. Его действие аналогично атрибуту start элемента OL с тем лишь отличием, что изменяет нумерацию, начиная с того элемента, для которого указано значение атрибута value.
Пример HTML-кода изменяющий нумерацию списка
<title> Изменение нумерации </title>
<body>
<ol>
<li> Первый элемент
<li value=10> Второй элемент
<li>Третий элемент
<li value4=20 type "A"> Четвертый элемент
<li type="A"> Пятый элемент
</ol>
</body>
В результате получится следующее:
1. Первый элемент
10.Второй элемент
11. Третий элемент
T. Четвертый элемент
U. Пятый элемент
Если задать нумерацию буквами такого длинного списка, на элементы которого не хватит всех букв латинского алфавита, то в нумерации с 27 элемента будут использоваться две латинские буквы (например, AA, AB, AC и т.д.), с 703 элемента будут использоваться три латинские буквы и т.д.
СПИСКИ ОПРЕДЕЛЕНИЙ
Интересной разновидностью списков является списки определений. Они чем-то напоминают толковые словари, так как каждому термину соответствует абзац определения, расположенный с отступом. Это средство незаменимо в том случае, если нужно создать список элементов с их подробным описанием.
Список определений задается внутри HTML - элемента DL. Тег <DL> входит в тройку элементов <DL>, <DT>, <DD>, предназначенных для создания списка определений. Каждый такой список начинается с контейнера <DL>, куда входит тег <DT> создающий термин и тег <DD> задающий определения этого термина. Закрывающий тег </DL> обязателен. Параметры отсутствуют. Для тегов <DT> и <DD> закрывающий тег необязателен.
Синтаксис
<dl>
<dt> Термин 1
<dd> Определение термина 1
<dt> Термин 2
<dd> Определение термина 2
</dl>
Важно отметить, что с помощью списков определений можно подать информацию более четко и ясно. Кроме того, создается впечатление профессионально выполненной работы. Необходимо ьтакже следить за тем, чтобы содержимое каждого тега <DT> размещалось в одной строке. В противном случае текст перейдет на новую строку без отступа, что будет выглядеть неприглядно.
Вложение и комбинирование списков
При желании можно комбинировать различные типы списков, а также вкладывать их друг в друга независимо от того, к одному или к разным типам они относятся.
Комментариев нет:
Отправить комментарий