Лабораторная работа №3 по HTML

Тема: Списки (нумерованные и маркированные).

Нумерованные

<OL>, </OL> - обозначение начала и конца списка

<LI>, </LI> - разбиение на отдельные элементы списка

Значение для TYPE Пример обозначения списка
A A, B, C,..
a a, b, c, …
I I, II, III,…
i i, ii, iii,…
1, 2, 3, …
Лабораторная работа №3 по HTML - student2.ru атрибут TYPE=? – стиль списка, вместо знака ? проставьте одно из значений таблицы (по умолчанию type=1).

Атрибут START=? в теле тега <OL> - определяет начальный элемент списка, ¹1

Атрибут VALUE=? В теле тега <OL> или <LI> – назначает любому элементу списка требуемый номер

Задание 1:

1) Создайте HTML – документ под названием spisky.html, содержащий следующий текст (без тегов абзаца, переноса строк и форматирования):

Ивановы

Петровы

Сидоровы

Ольшанские

Кочетовы

2) Результат просмотрите в браузере.

3) Введите тег <ol>непосредственно над текстом и тег </ol> непосредственно под текстом.

4) Каждую фамилию (элемент списка) предварите тегом <li> (закрывающий тег </li> необязателен).

5) Сохраните и просмотрите результат в браузере.

6) Задайте атрибут START=4 для фамилии Ивановы.

7) Задайте атрибут VALUE=10 для фамилии Ольшанские.

8) Просмотрите результат в браузере.

9) Самостоятельно переопределите номера элементов данного списка.

10) Задайте начало нового списка непосредственно после слова Ивановы тегом <ol type=a>.

11) Задайте новые элементы списка при помощи тега <li >:

Иванов Сергей

Иванова Лидия

Иванов Алексей

12) Результат просмотрите в браузере.

13) Задайте тег конца списка </ol> непосредственно после слова Алексей.

14) Переопределите тип значка списка для Ивановой Лидии на A

15) Результат просмотрите в браузере.

16) Самостоятельно достройте список для фамилии Ольшанские с типом списка I.

 
  Лабораторная работа №3 по HTML - student2.ru

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

<UL>, </UL> - начало и конец списка

<LI>, </LI> - отдельные элементы списка

Атрибут TYPE в теле тега <LI> – значок списка (по умолчанию type=disc)



TYPE значок
circle o
disc ·
square

Задание 2:

1) В исходном документе spisky.html создайте еще один список (без форматирования и разбиения на строки):

Яблоки

Груши

Гранат

Апельсины

2) Просмотрите результат в браузере.

3) Введите тег <ul> непосредственно над словом Яблоки и тег </ul> непосредственно под словом Апельсины.

4) Определите элементы маркированного списка при помощи тега <li>

5) Результат просмотреть в браузере

6) Задайте тег нового вложенного нумерованного списка <ol> непосредственно после слова Яблоки.

7) Введите элементы списка (тег <li>):

Ростовские

Московские

С Кавказа

8) Закройте список тегом </ol>

9) Результат просмотрите в браузере.

10) Задайте новый вложенный маркированный список (тег <ul type=circle>) после слова Ростовские.

11) Запишите элементы этого списка (тег <li>):

Зимние

Летние

Осенние

Весенние

12) Закройте список.

13) Просмотрите и проанализируйте результат в браузере.

14) Самостоятельно придумайте трехуровневый список со значками различных типов.

Лабораторная работа №3 по HTML - student2.ru

Списки определений.

<DL> - начало списка определений

<DT>, <DD> - начало текста термина и поясняющей его статьи.

Задание 3:

1) Скопируйте исходный код в конец тела страницы (перед тегом </body>):

Лабораторная работа №3 по HTML - student2.ru

2) Сохраните и просмотрите результат в браузере.

3) Самостоятельно создайте свои два элемента списка определений.

Наши рекомендации