7.1. Типовое задание

Пример 1. Сформируйте Web-страницу со списками следующего вида:

Списки

МАРКИРОВАННЫЙ СПИСОК

•Пункт 1 списка

•Пункт 2 списка

•Пункт 3 списка

НУМЕРОВАННЫЙ СПИСОК

(использован атрибут value = 4, нумерация осуществляется римскими числами)

IV. Пункт 1

V. Пункт 2

VI. Пункт 3

VII. Пункт4

ВЛОЖЕННЫЙ СПИСОК

■Пункт 1

1.Пункт 1.1

2.Пункт 1.2

■Пункт 2

1.Пункт 2.1

2.Пункт 2.2

■Пункт 3

1.Пункт 3.1

2.Пункт 3.2

СПИСОК С ОПРЕДЕЛЕНИЯМИ

Пункт 1 Определение пункта 1

Другое определение пункта 1 Пункт 2

87

Определение пункта 2 Пункт 3

Определение пункта 3

ДВА СПОСОБА ПЕРЕОПРЕДЕЛЕНИЯ СТИЛЯ В МАРКИРОВАННОМ СПИСКЕ

•Пункт 1

•Пункт 2

оПункт 1 списка

оПункт 2 списка

оПункт 3 списка

Пример 2. Разберите и проанализируйте алгоритм в кодах HTML.

<Html>

<Head>

<Тitle>Построение списков </title>

<Meta http-equiv="Content-Type" content="text/html; сharset=windows-1251"> <Style type="text/css">

OL.c01 {list-style-type: square} </style>

</head>

<! цвет фона светло-зеленый> <Body bgcolor=lime> <Center>

<Font size=7 colors "purple ">c</font> <Font size=6 Color="blue">n</font><Font size=5 color ="green">u</font> <Font size=4 color-"maroon">c</font><Font size=3 color="fuchsia">к</font><Font size=2 color="orange">u</font> </center>

<! горизонтальная линия>

<Hr align-center size=6 color=orange> <Center>

<Font color=red><H3>МАРКИРОВАННЫЙ СПИСОК<М> </font>

</center>

<UL>

<Li>Пункт 1 списка <Li>Пункт 2 списка

88

<Li>Пункт 3 списка

</ul> <Нr> <Center>

<Font со1оr=red><НЗ>НУМЕРОВАННЫЙ СПИСОК <Вr>

(использован атрибут value =4, нумерация осуществляется римскими числами)</HЗ>

</font>

</center> <OL type="I">

<Li value = 4>Пункт 1 <Li>Пункт 2 <Li>Пункт 3 </Li>Пункт 4

</ol> <Нr> <Center>

<Font color=red><H3> ВЛОЖЕННЫЙ СПИСОК</hЗ> </font>

</center>

<UL> <Li>Пункт 1 <OL> <Li>Пункт 1.1 <Li>Пункт 1.2 </ol>

<Li>Пункт2 <OL> <Li>Пункт 2.1 <Li>Пункт 2.2 </ol>

<Li>Пункт3 <OL> <Li>Пункт 3.1 <Li>Пункт 3.2 </ol>

</ul> <Нr> <Center>

<Font color=red><H3>CПИCOK С ОПРЕДЕЛЕНИЯМИ</HЗ> </font>

</center> <Dt>Пункт1

<Dd> Определение пункта 1 <Dd> Другое определение пункта 1 <Dt> Пункт2

89

<Dd> Определениепункта2 <Dt>Пункт 3 <Dd>Определение пункта 3 </dl>

<Hr>

<Center>

<Font color =red><H3>ДВА СПОСОБА ПЕРЕОПРЕДЕЛЕНИЯ СТИЛЯ В МАРКИРОВАННОМ СПИСКЕ</HЗ>

</font>

</center>

<OL class="c01"> <Li> Пункт 1 <Li> Пункт 2 </ol>

<Нr>

<UL type=circle> <Li>Пункт 1 списка <Li>Пункт 2 списка <Li>Пункт 3 списка

</ul> <Нr> </Body> </Html>

7.2.Контрольные вопросы

1.Виды списков, размещаемых на Web-страницах.

2.Построение нумерованного, маркированного списков.

3.Построение иерархического списка.

4.Каков шаблон списка с определениями в HTML кодах.

5.Каково назначение атрибута class

7.3. Контрольные задания

Сформируйте списки следующих видов:

Вариант 1

Пункт 1

A.Пункт 1.1

♦Пункт 1.1.1

90

♦Пункт 1.1.2

♦Пункт 1.1.3 B. Пункт 1.2

оПункт 1.2.1

оПункт 1.2.2

Пункт 2 2.Пункт 1

1. Пункт 2.1.1

2. Пункт 2.1.2

3. Пункт 2.1.3

3.Пункт 2

• Пункт 2.2.1

• Пункт 2.2.2

• Пункт 2.2.3

Пункт 3 Определение пункта 3

Другое определение пункта 3

Вариант 2

◦Пункт 1

■Пункт 1.1

3.Пункт 1.1.1

4.Пункт1.1.2

5.Пункт 1.1.3

■Пункт1.2 Пункт 1.2.1

Определение пункта 1.2.1 Другое определение пункта 1.2.1

Пункт 1.2.2 Определение пункта 1.2.2

Другое определение пункта 1.2.2 Пункт 1.2.3

Определение пункта 1.2.3

◦Пункт 2

C.Пункт 2.1

D.Пункт 2.2

◦Пункт 3

•Пункт 3.1

•Пункт 3.2

91

Вариант 3

III.Пункт1

◦Пункт 1.1

◦Пункт 1.2

◦Пункт 1.3 IV. Пункт 2

1.Пункт 2.1 Пункт 2.1.1

Определение пункта 2.1.1 Пункт 2.1.2

Определение пункта 2.1.2 Другое определение пункта 2.1.2

Пункт 2.1.3 Определение пункта 2.1.3

2.Пункт 2.2

■Пункт 2.2.1

B.Пункт 2.2.1.1

C.Пункт 2.2.1.2

■Пункт 2.2.2

V. Пункт 3

оПункт 3.1

оПункт 3.2

Вариант 4

5.Пункт 1 Пункт 1.1

Определение пункта 1.1 Пункт 1.2

Определение пункта 1.2 Пункт 1.3

Определение пункта 1.3 Другое определение пункта 1.3

6.Пункт 2

■Пункт 2.1

1.Пункт 2.1.1

•Пункт2.1.1.1

•Пункт 2.1.1.2

•Пункт 2.1.1.3

2.Пункт 2.

92

III.Пункт 2.1.2.1

■Пункт 2.2

оПункт 2.2.1

оПункт 2.2.2

7.Пункт 3

Вариант 5

■Пункт 1

3.Пункт 1.1 Пункт 1.1.1

Определение пункта 1.1.1 Другое определение пункта 1.1.1

Пункт 1.1.2 Определение пункта 1.1.2

Пункт 1.1.3

А Пункт 1.1.3.1

ВПункт 1.1.3.2 4.

4.Пункт 1.2

оПункт 1.2.1

оПункт 1.2.2

■Пункт 1.2.2.1

■Пункт 1.2.2.2

■Пункт 2

A.Пункт 2.1

B.Пункт 2.2

• Пункт 2.2.1

• Пункт 2.2.2

• Пункт 2.2.3

■Пункт 3

Вариант 6

Пункт 1

оПункт 1.1

A.Пункт 1.1.1

■Пункт 1.1.1.1

■Пункт 1.1.1.2

■Пункт 1.1.1.3

B.Пункт 1.1.2

оПункт 1.2

93

Пункт 1.2.1 Определение пункта 1.2.1

Другое определение пункта 1.2.1 Пункт 1.2.2

Определение пункта 1.2.2 Пункт 1.2.3

Пункт 2

III.Пункт 2.1

•Пункт 2.1.1

•Пункт 2.1.2 IV. Пункт 2.2

A.Пункт 2.2.1

B.Пункт 2.2.2

C.Пункт 2.2.3

94

− upper-alpha (маркер имеет вид прописных латинских букв – A, B, C,

…);

−lower-roman (маркер имеет вид римских цифр, представленных строчными буквами – i, ii, iii, …);

−upper-roman (маркер имеет вид римских цифр, представленных прописными буквами – I, II, III, …).

2. Положение блока маркера

Синтаксис:

<ul style=”list-style-position: положение”>

Блок маркера может находиться за пределами главного структурного блока (outside) или в первом строковом блоке (inside).

Втабл. 8.1 перечислены свойства элементов, предназначенных для создания и изменения списков.

Поскольку тег <LI> наследует стилевые свойства тега <OL> или <UL>, который выступает в качестве его родителя, то можно устанавливать стиль как

96

для селектора UL, так и для селектора LI. Так, в примере 1 используется селектор UL, для него и задаются стилевые параметры.

Пример 1. Создание маркированного списка

list-style-position: outside; /* Маркеры размещаются за пределами текстового

<body>

<ul>

<li>Заголовок должен быть короче трех строк.</li>

<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>

<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>

<ul>

</body>

</html>

В данном примере используются квадратные маркеры и их внешнее размещение относительно текста. Цвет − темно-синий.

Чтобы установить свое собственное изображение в качестве маркера применяется параметр list-style-image, как показано в примере 2.

Пример 2. Использование изображений в качестве маркера

<html>

<head>

<style type="text/css"> LI {

list-style-image: url('images/check.gif') /* Путь к файлу с маркером */

}

97

</style>

</head>

<body>

<ul>

<li>Заголовок должен быть короче трех строк.</li>

<li>При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие.</li>

<li>Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.</li>

</ul>

</body>

</html>

Результат данного примера показан ниже. В качестве маркеров используется маленькая картинка.

Некоторые примеры создания различных списков приведены в табл. 8.2.

98