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



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

 

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

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

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

Значение для TYPE Пример обозначения списка
A A, B, C,..
a a, b, c, …
I I, II, III,…
i i , ii, iii,…
1 1, 2, 3, …

 

 

атрибут 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.

 

 


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

< 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) Самостоятельно создайте свои два элемента списка определений.

                                                                          


Дата добавления: 2022-06-11; просмотров: 25; Мы поможем в написании вашей работы!

Поделиться с друзьями:






Мы поможем в написании ваших работ!