И так, мы идем дальше, как создавать параграфы и заголовки мы рассмотрели и следующий момент который мы изучим это Упорядоченные списки. Для создания в HTML упорядоченных списков используются отдельные теги, это <ol> </ol> которые создают некий контейнер для списка и указывают тип списка. Тег <ol> это сокращение с английского языка Ordered List и в переводе означает Упорядоченный список. Все элементы списка находятся между тегами <li> </li>, который в свою очередь находится в контейнере <ol>. Упорядоченный список в HTML используется достаточно часто, поэтому первый урок про списки начнем именно, про него.
1. Упорядоченный список.
Суть упорядоченного списка состоит в том, что элементы <li>, заключенные в список автоматически будут обладать маркерами в виде цифр, букв, либо римских цифр. И первый тег, который необходимо для этого знать это тег <ol>. Этот тег создает контейнер и показывает браузеру, что мы будем делать именно упорядоченный список. Тег <ol> имеет парный обязательный закрывающийся тег </ol>. Внутри тегов <ol> расположены элементы списка, которые заключаются в теги <li>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
</body> </html>
На примере выше мы видим, что сформировался нумерованный список от 1 до 4. Если в списке не указать ни каких атрибутов для тега <ol>, то по умолчанию нумерованный список создается с арабскими цифрами. Если же для тега <ol> задать атрибут type то можно изменить маркеры нумерации списка.
В качестве маркеров могут применятся следующие элементы.
- Арабские цифры (1, 2, 3, ...);
- Заглавные латинские буквы (A, B, C, ...);
- Строчные латинские буквы (a, b, c, ...);
- Прописные римские цифры (I, II, III, ...);
- Строчные римские цифры (i, ii, iii, ...).
Так же есть возможность начать нумерацию элементов списка с определенного значения (не с единицы). Реализуется это с помощью другого атрибута start в теге <ol>. Использование атрибута start не зависит от указанного типа списка type.
Ниже мы создадим пример всех вариантов нумерованных списков, а вид их Вы сможете просмотреть в демо.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
Нумерованный список по умолчанию без указания, каких-либо атрибутов
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="1". Использовать маркеры в виде Арабских цифр.
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="A". Использовать маркеры в виде Прописных букв латинского алфавита.
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="a". Использовать маркеры в виде Строчных букв латинского алфавита.
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="I". Использовать маркеры в виде Римских цифр в верхнем регистре.
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="i". Использовать маркеры в виде Римских цифр в нижнем регистре.
- Я 1-й элемент у списка
- Я 2-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
Указываем атрибут type="I" и start="4". Использовать маркеры в виде Римских цифр в верхнем регистре и начинается счет в списке с 4.
- Я 1-й элемент у списка
- Я 3-й элемент у списка
- Я 4-й элемент у списка
- Я 5-й элемент у списка
</body>
</html>
Вот мы и рассмотрели варианты нумерованных списков. Вы можете также изменить значения в атрибутах, чтобы лучше понять, как это работает, а мы переходим к следующим урокам, в котором рассмотрим другие 2 типа списков ненумерованный список и список определений.
CSS