Цель работы:изучить принципысоздания нумерованного и маркированного списка, изучения тега OLи результатов их применения.
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL,который и используется для создания списка. В качестве маркеров могут быть следующие значения: арабские цифры заглавные латинские буквы прописные латинские буквы заглавные римские цифры прописные римские цифры.
Ниже, в таблице приведены различные параметры тега OLи результат их применения.
Нумерованный список с параметрами по умолчанию:
1. текст
2. текст
3. текст
<ol start="5">
Нумерованный список начинающийся с пяти:
5. текст
6. текст
7. текст
<ol type="A">
Нумерованный список с заглавными буквами латинского алфавита:
A. текст
B. текст
C. текст
<ol type="a">
Нумерованный список с прописными буквами латинского алфавита:
a текст
b текст
c текст
<ol type="I">
Нумерованный список с римскими буквами:
I. текст
II. текст
III. текст
<ol type="i">
Нумерованный список с прописными римскими буквами:
i. текст
ii. текст
iii. текст
<ol type="1">
Нумерованный список с арабскими цифрами:
1. текст
2. текст
3. текст
<ol type="I" start="7">
Список с римскими цифрами начинающийся с семи:
IV. Текст
V. текст
VI. текст
1. Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом худшего восприятия текста с экрана монитора, чем печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используется тег UL иLI(Пример 1)
Пример 1. Создание маркированного списка
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<ul>
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</ul>
</body>
</html>
Ниже показан результат примера 1.
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
2. Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, список можно делать без тега UL. При этом исчезнут и отступы текста перед маркерами.
Пример 2. Создание маркированного списка без отступов
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</body>
</html>
Ниже показан результат примера 2.
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
3. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="... "тега UL.Вместо многоточия подставляется одно из трех значений указанных в таблице.
Таблица 4.2 – Параметры тега UL,используемые для создания маркированного списка
Код HTML
Пример
<ul type="disc">
Что следует учитывать при тестировании сайта:
• работоспособность всех ссылок
• поддержку разных браузеров
• читабельность текста
<ul type="circle">
Что следует учитывать при тестировании сайта:
□ работоспособность всех ссылок
□ поддержку разных браузеров
□ читабельность текста
<ul type="square">
Что следует учитывать при тестировании сайта:
■ работоспособность всех ссылок
■ поддержку разных браузеров
■ читабельность текста
4. С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунок.
Задание:Создать маркированный текст.
Контрольные вопросы:
1. Нумерованный список?
2. Установка маркированного списка.
3. Тег для установки списка?
4. Параметры тега UL,используемые для создания маркированного списка.
