Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Лабораторная работа 4. Создание списков




 

Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные или маркированные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы - буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.

Элементы:

1) UL-создает неупорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.

Пример1:

<UL>

<LI> Первый пункт списка </LI>

<LI> Второй пункт списка </LI>

<LI> Третий пункт списка </LI>

</UL>

2) OL-создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка. Атрибуты:

· START – определяет первое число, с которого начинается нумерация пунктов (только целые числа)

· TYPE – определяет стиль нумерации пунктов (по умолчанию <UL TYPE="1">). Может иметь значения:

o "A" – заглавные буквы A, B, C ...

o "a" – строчные буквы a, b, c ...

o "I" – большие римские числа I, II, III ...

o "i" – маленькие римские числа i, ii, iii ...

o "1" – арабские числа 1, 2, 3 ...

o "disk" - кружок

o “circle” – окружность

o “square” - квадрат.

Пример2:

<OL TYPE="I" START="2">

<LI> Пункт два </LI>

<LI> Пункт три </LI>

<LI> Пункт четыре </LI>

</OL>

Пример3:

<BODY>
<OL TYPE="i" START="3">
<LI>Информатика
<LI>Математика
<LI>Физика
</OL>
</BODY>

3) LI-cоздает пункт в списке. Располагается внутри элементов OL или UL. Атрибуты:

· VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

Пример4:

<OL TYPE="A" START="2">

<LI> Пункт, озаглавленный буквой B. </LI>

<LI VALUE="6"> Пункт, озаглавленный буквой F. </LI>

<LI> Пункт, озаглавленный буквой G. </LI>

</OL>

4) DL - открывает и закрывает список определений. Так называются списки-словари, в которых приводятся определения понятий и терминов. Каждый элемент такого списка содержит две записи — сам термин и его толкование. Нумерация отсутствует. Каждый термин списка начинается с непарного тега <DT> (от английского definition term — определяемый термин), после которого записывают его название. Вслед за термином записывают его определение, которое начинается с непарного тега <DD> (от английского definition description — описание определения). Список заканчивается закрывающим тегом </DL>.

Пример5:

<BODY>
<DL>
<DT>компьютер
<DD>устройство для обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный диск
</DL>
</BODY>

Создание вложенных списков

Списки могут быть вложенными, то есть внутри элемента списка может быть еще один список (любого типа). На каждом уровне могут быть списки любых типов (нумерованные, маркированные, определения).

Ниже приведен пример простейшего вложенного списка:

Пример6:

BODY>
<UL>
<LI>Города России
<OL>
<LI>Москва
<LI>Санкт-Петербург
</OL>
<LI>Города Украины
<OL>
<LI>Киев
<LI>Одесса
</OL>
</UL>
</BODY>

 

Практическая часть

 

Задание 4.1.

Проделайте примеры 1-6, приведенные в тексте. В случае необходимости дополните примеры нужными тегами и другой информацией. Каждый пример разместите на отдельной странице браузера.

Задание 4.2.

Создать файл Pr_3_1.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:

Задание 4.3.

Создать файл Pr_3_2.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:

Задание 4.4.

Создать файл Pr_3_3.html в текстовом редакторе Блокнот, чтобы при просмотре документа в браузере получилось содержимое рисунка:





Воспользуйтесь поиском по сайту:



©2015- 2022 megalektsii.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.