Маркированные списки

Другим распространенным способом структуризации информационных данных является создание маркированных списков. Маркированный список представляет собой ненумерованный или неупорядоченный (Unordered List) перечень элементов, для заголовка которых используются специальные мар­керы. В качестве маркеров выступают специальные символы, называемые буллетами (bullets).

Для создания маркированных списков применяется тег-контейнер < ul>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками, используется тег < LI>).

Пример нумерованного списка (HTML-код и его интерпретация браузером):

< HTML>

< HEAD>

< ТIТLЕ> Пример маркированного списка< /ТIТLЕ>

< /HEAD>

< BODY BGCOLOR=" #FFFFFF" TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00" VLINK=" blue" >

< НЗ> Пример маркированного списка< /НЗ>

< HR ALIGN=" center" NOSHADE WIDTH=" 98%" >

< FONT FАСЕ=" Таhomа" > < В> Популярные редакторы векторной графики: < /B> < /FONT>

< UL>

< LI> CorelDRAW

< LI> Adobe Illustrator

< LI> Macromedia FreeHand

< /UL>

< /BODY>

< /HTML>

Параметры тега < UL>

Тег маркированного списка < ul> может содержать параметр type, который отвечает за форму отображаемого браузером маркера. Всего существует три возможных значения данного параметра:

Задание 4. Напишите HTML-код для страницы, отображенной браузером в следующем виде:

Часто информация имеет сложную разветвленную структуру, которую, с од­ной стороны, трудно отобразить в виде одного списка, с другой — нельзя разбивать на несколько отдельных списков. В этом случае используются так называемые вложенные списки, имеющие иерархическое строение и содер­жащие в себе другие списки (как нумерованные, так и маркированные).

Пример использования вложенных списков:

< HTML>

< HEAD>

< TITLE> Пример использования вложенных списков< /TITLE>

< /HEAD>

< BODY BGCOLOR=" #FFFFFF" TEXT=" black" LINK=" #00FF00" ALINK=" #00FF00" VLINK=" blue" >

< UL TYPE=" square" >

< FONT SIZE=" 4" > < B> Редакторы компьютерной графики: < /B> < /FONT>

< LI> Векторные редакторы

< UL TYPE=" disc" >

< LI> CorelDRAW

< OL>

< LI> CorelDRAW

< LI> Corel PhotoPaint

< LI> Corel R.A.V.E.

< /OL>

< /UL>

< LI> Растровые редакторы

< UL TYPE=" disc" >

< LI> Adobe Photoshop

< OL>

< LI> Adobe Photoshop

< LI> Adobe ImageReady

< /OL>

< /UL>

< /UL>

< /BODY>

< /HTML>

Задание 5. Наберите этот HTML-код в редакторе Блокнот и посмотрите, как браузер отобразит вложенные списки на экране.

При составлении сложных вложенных списков особое внимание следует уделять корректному указанию закрывающих тегов < /UL> и < /OL>.