Лабораторная работа №3 по HTML
Тема: Списки (нумерованные и маркированные).
Нумерованные
<OL>, </OL> - обозначение начала и конца списка
<LI>, </LI> - разбиение на отдельные элементы списка
|
Атрибут 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.
Маркированные списки
<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) Самостоятельно придумайте трехуровневый список со значками различных типов.
Списки определений.
<DL> - начало списка определений
<DT>, <DD> - начало текста термина и поясняющей его статьи.
Задание 3:
1) Скопируйте исходный код в конец тела страницы (перед тегом </body>):
2) Сохраните и просмотрите результат в браузере.
3) Самостоятельно создайте свои два элемента списка определений.