Списки определений
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги <dl></dl>. Каждый термин заключается в теги <dt></dt>, а их определения - в теги <dd></dd>. Пример кода списка определений:
<html>
<head>
<title>Списки определений</title>
</head>
<body>
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
</body>
</html>
Результат:
Вложенные списки
Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков. Пример кода многоуровневого списка:
<html>
<head>
<title>Вложенные списки</title>
</head>
<body>
<ul>
<li>Животные
<ol>
<li>кошки</li>
<li>собаки</li>
</ol>
</li>
<li>Растения
<ol>
<li>деревья</li>
<li>цветы</li>
</ol>
</li>
</ul>
</body>
</html>
Результат:
Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы рассмотрим работу с изображениями.
Списки списков
Списки бывают разными. И оформлены они могут быть тоже по-разному. Напротив каждого элемента списка может стоять цифра, хоть арабская, хоть римская, даже кренделек, нарисованный вашей умелой рукой может там стоять. А может кружочек, квадратик или шарик. Список может быть и компактным, он может быть и как меню. Списки могут быть вложенными один в один. Да и наконец, элементы списка могут быть гиперссылками, или как я их называю просто ссылками.
Так что не такое это простое дело - списки. Вы представляете, как было бы скучно возле каждого пункта списка писать цифру или кружочки вручную? Замучаешься. Но вы плохо знаете HTML, если так думаете! Есть тут и теги и дескрипторы, которые позволяют нам весело и беззаботно пройти этот урок. А старые друзья нашего умного выросшего Козла нам в этом помогут.
Для удобства я все возможные списки внесла в одну таблицу. Я опускаю в коде HTML описание кода html, body, head, title, чтобы не загромождать основные моменты. Также я немного сдвинула в коде все <LI>, чтобы вы могли с легкостью ориентироваться и не заблудиться в списках.
Каждый элемент списка обозначается дескриптором LI - List Item (Элемент Списка), заголовок списка - LH - List Header (Заголовок Списка).
Пояснение |
Код в HTML |
В окне браузера |
|
Для создания нумерованного списка существует дескриптор <OL> (Ordered List - Нумерованный Список). Он имеет закрывающийся тег </OL> |
<OL> <LI>Козленок <LI>Теленок <LI>Корова <LI>Бык <LI>Конь </OL> |
|
|
Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута<TYPE>: TYPE=1 - Числа TYPE=A - Прописные буквы TYPE=a - Cтрочные буквы TYPE=I - Прописные римские буквы TYPE=i- Строчные римские буквы |
<OL> <LI TYPE=1>Козленок <LI TYPE=1>Теленок <LI TYPE=A>Корова <LI TYPE=A>Бык <LI TYPE=a>Конь <LI TYPE=a>Свинья <LI TYPE=I>Кот <LI TYPE=I>Пес <LI TYPE=i>Баран <LI TYPE=i>Петух </OL> |
|
|
Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <OL> на <UL> |
<UL> <LI>Козленок <LI>Теленок <LI>Корова <LI>Бык <LI>Конь </UL> |
|
|
Мы можем изменить форму маркера на круг, квадрат или диск с помощью атрибута TYPE: TYPE=circle TYPE=square TYPE=disc |
<UL> <LI TYPE=circle >Козленок <LI TYPE=circle >Теленок <LI TYPE=square >Корова <LI TYPE=square >Бык <LI TYPE=disc >Конь <LI TYPE=disc >Свинья </UL> |
|
|
Списки могут быть вложенными один в другой по принципу матрешки |
<UL> <LI>Первый урок <LI>Второй урок <LI>Третий урок <UL> <LI>Знакомство с графикой <LI>Обрезка изображения <LI>Оптимизация для web </UL> <LI>Четвертый урок <LI>Пятый урок </UL> |
|
|
Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <MENU> <MENU> |
<MENU> <LI>Козлятина <LI>Телятина <LI>Говядина <LI>Конина <LI>Свинина <LI>Кошатина <LI>Собачатина <LI>Баранина <LI>Курятина </MENU> |
Козлятина Телятина Говядина Конина Свинина Кошатина Собачатина Баранина Курятина |
|
Вместо маркеров можно подставить любое изображение. Помните, в предыдущем уроке я нарисовала симпатичный домик и назвала егоhome.gif? . Так вот я могу спокойно пустить его вместо маркера! |
<UL> <IMG src="home.gif"> Козленок<br> <IMG src="home.gif"> Теленок<br> <IMG src="home.gif"> Корова<br> <IMG src="home.gif"> Конь<br> <IMG src="home.gif"> Свинья<br> </UL> |
Козленок Теленок Корова Конь Свинья |
|
Ну, и конечно, можно сделать элементы списка - ссылками, если представить, что все эти друзья имеют свои странички в Интернете. |
<UL> <LI><A href="kid.html">Козленок</A> <LI><A href="calf.html">Теленок</A> <LI><A href="cow.html">Корова</A> <LI><A href="pig.html">Свинья</A> <LI><A href="goose.html">Гусь</A> </UL> |
|
|
Иногда возникает необходимость начать список не с единицы, а с другого числа. В этом нам поможетSTART, которому нужно дать указание, с какого числа нужно начинать отсчет. |
<OL START=5> <LI>Козленок <LI>Теленок <LI>Поросенок </OL> |
|
|
Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу UL или OL атрибут compact. Вот так: <UL=compact> или так: <OL=compact>