- Шульга Е. В.
- Уроки по HTML (основы)
- Просмотров: 4477
HTML. Списки
Иногда для структурирования данных используют списки. Для их создания существуют тэги <OL>, <UL> и <LI>. Рассмотрим их подробнее.
Возьмем за основу текст:
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
Речные рыбы
Морские рыбы
Рыбы Мирового океана
</BODY>
</HTML>
Создание маркированного списка
Чтобы создать маркированный список, нужно перечисление видов рыб разместить между тэгами <UL> … </UL>. А перед каждым элементом списка поставим тэг <LI>.
Получим код
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<UL>
<LI>Речные рыбы
<LI>Морские рыбы
<LI>Рыбы Мирового океана
</UL>
</BODY>
</HTML>
А в браузере:
Выбор вида маркера
Маркер может иметь вид незаполненного круга, черного круга и черного квадрата. Чтобы изменить вид маркера используют атрибут TYPE, а маркеры имеют имена круг – CIRCLE, черный круг – DISC, квадрат – SQUARE.
Чтобы установить вид маркера квадрат, нужно записать
<UL TYPE = “SQUARE”>
Получим
Создание нумерованного списка
Если в списке нужна нумерация, то используется тэг <OL> и перед каждым элементом также указывается тэг <LI>.
Пример
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<OL>
<LI>Речные рыбы
<LI>Морские рыбы
<LI>Рыбы Мирового океана
</OL>
</BODY>
</HTML>
Результат
Изменение начального номера нумерованного списка
Когда нумерация не должна начинаться с 1, а, предположим, с 4, то код примет вид:
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<OL START="4">
<LI>Речные рыбы
<LI>Морские рыбы
<LI>Рыбы Мирового океана
</OL>
</BODY>
</HTML>
Где атрибут START="4" показывает с какого числа начинать нумерацию.
Результат
Выбор вида номера
Нумерация в HTML может иметь вид не только арабских цифр (1,2,3), но и римских (I, II, III), маленьких римских (I,ii,iii), больших латинских (A,B,C) и маленьких латинских (a,b,c) букв. Чтобы изменить вид маркера у тэга OL есть атрибут TYPE.
Чтобы установить нумерацию большими римскими цифрами, нужно записать следующее:
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<OL TYPE="I">
<LI>Речные рыбы
<LI>Морские рыбы
<LI>Рыбы Мирового океана
</OL>
</BODY>
</HTML>
Результат:
Создание вложенного списка (многоуровневый список)
Иногда нужно на странице расположить многоуровневый список, создать его в HTML можно используя вложенность списков один в другой. Так, например, мы дополнить наш список:
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<OL TYPE="I">
<LI>Речные рыбы
Язь
Ерш
Налим
Лещ
Чехонь
<LI>Морские рыбы
Сельдь
Лосось
Акула
Тунец
Палтус
<LI>Рыбы Мирового океана
Кобия
Каранкс
Сарган
Ланцетфиш
Крылатка
</OL>
</BODY>
</HTML>
У нас есть уже один список, который нумерует виды рыб. Перед названием самих рыб давайте поставим маркеры. Кодбудет выглядеть так:
<HTML>
<HEAD>
<TITLE>
Виды рыб
</TITLE>
</HEAD>
<BODY>
Виды рыб
<OL TYPE="I">
<LI>Речные рыбы
<UL>
<LI>Язь
<LI>Ерш
<LI>Налим
<LI>Лещ
<LI>Чехонь
</UL>
<LI>Морские рыбы
<UL>
<LI>Сельдь
<LI>Лосось
<LI>Акула
<LI>Тунец
<LI>Палтус
</UL>
<LI>Рыбы Мирового океана
<UL>
<LI>Кобия
<LI>Каранкс
<LI>Сарган
<LI>Ланцетфиш
<LI>Крылатка
</UL>
</OL>
</BODY>
</HTML>
А вбраузере мы увидим:
Замечание. Обратите внимание, что нумерованный список открывается перед всем перечислением, а закрывается в конце всего списка, тогда как маркированный список вложен в нумерованный.