БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

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>
 

А вбраузере мы увидим:

многоуровневый список

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

Добавить комментарий
  • Комментарии не найдены
 
DMC Firewall is developed by Dean Marshall Consultancy Ltd