На этом шаге мы рассмотрим вопрос создания маркированного списка.
Для создания маркированного (ненумерованного, неупорядоченного) списка используется тэг–контейнер <UL> (Unordered List – неупорядоченный список), внутри которого располагаются все элементы списка. Каждый элемент списка начинается тэгом <LI> (List Item - элемент списка).
Приведем пример HTML–документа с маркированным списком, изображение которого показано на рисунке 1.
<HTML>
<HEAD>
<TITLE> Пример маркированного списка. </TITLE>
</HEAD>
<BODY>
<UL> <!-- Начало списка. -->
<B> Знаки зодиака: </B>
<LI> Овен <!-- Элементы списка.-->
<LI> Телец
<LI> Близнецы
<LI> Рак
<LI> Лев
<LI> Дева
<LI> Весы
<LI> Скорпион
<LI> Стрелец
<LI> Козерог
<LI> Водолей
<LI> Рыбы
</UL> <!-- Конец списка. -->
</BODY>
</HTML>
Рис.1. Пример маркированного списка.
Как видно из текста приведенного примера для тэга <LI> можно не записывать соответствующий ему закрывающий тэг </LI>. Отметим также, что кроме элементов списка между тэгами <UL> и </UL> могут располагаться другие элементы языка HTML. В приведенном примере таким элементом является текст, выделенный жирным шрифтом и выполняющий роль заголовка списка.
Тэг <UL> имеет параметр TYPE, задающий внешний вид маркера.
Замечание. Cледует помнить, что конкретный вид маркера будет зависеть от используемого браузера.
Перечислим возможные значения этого параметра:
- disc (значение по умолчанию) – маркеры отображаются закрашенными кружками;
- circle - маркеры отображаются не закрашенными кружками;
- square – маркеры отображаются закрашенными квадратиками.
Замечание.
- При задании значений параметра TYPE используйте только маленькие буквы (регистр имеет значение)!
- Если используются вложенные (о них разговор пойдет позже) маркированные списки, то на первом уровне по умолчанию используется значение disc, на втором – circle, на третьем и далее – square.
- Параметр TYPE может использоваться с тэгом <LI> для задания внешнего вида отдельных маркеров.
Задание 1. Измените текст HTML-документа примера так, чтобы маркером был
не закрашенный кружок. Решение и комментарии вы можете посмотреть здесь.
Задание 2. Измените текст HTML-документа примера так, чтобы для всех
нечетных элементов списка маркером был закрашенный квадрат, а для всех четных – не
закрашенный кружок. Решение и комментарии вы можете посмотреть здесь.
На следующем шаге рассмотрим еще один вид ссылок - изображения.
