Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
Цель работы: изучить принципы создания нумерованного и маркированного списка, изучения тега OL и результатов их применения.
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега OL, который и используется для создания списка. В качестве маркеров могут быть следующие значения: арабские цифры заглавные латинские буквы прописные латинские буквы заглавные римские цифры прописные римские цифры.
Ниже, в таблице приведены различные параметры тега OL и результат их применения.
Таблица 4.1 – Параметры тега OL
Код HTML | Пример |
<ol> <li>текст</li> <li>текст</li> <li>текст</li> </ol> | Нумерованный список с параметрами по умолчанию: 1. текст 2. текст 3. текст |
<ol start="5"> | Нумерованный список начинающийся с пяти: 5. текст 6. текст 7. текст |
<ol type="A"> | Нумерованный список с заглавными буквами латинского алфавита: A. текст B. текст C. текст |
<ol type="a"> | Нумерованный список с прописными буквами латинского алфавита: a текст b текст c текст |
<ol type="I"> | Нумерованный список с римскими буквами: I. текст II. текст III. текст |
<ol type="i"> | Нумерованный список с прописными римскими буквами: i. текст ii. текст iii. текст |
<ol type="1"> | Нумерованный список с арабскими цифрами: 1. текст 2. текст 3. текст |
<ol type="I" start="7"> | Список с римскими цифрами начинающийся с семи: IV. Текст
|
1. Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом худшего восприятия текста с экрана монитора, чем печатного варианта, это является весьма полезным приемом.
Для установки маркированного списка используется тег UL и LI (Пример 1)
Пример 1. Создание маркированного списка
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<ul>
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</ul>
</body>
</html>
Ниже показан результат примера 1.
Что следует учитывать при тестировании сайта:
работоспособность всех ссылок
поддержку разных браузеров
читабельность текста
2. Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, список можно делать без тега UL. При этом исчезнут и отступы текста перед маркерами.
Пример 2. Создание маркированного списка без отступов
<html>
<head>
<body>
Что следует учитывать при тестировании сайта:
<li>работоспособность всех ссылок</li>
<li>поддержку разных браузеров</li>
<li>читабельность текста</li>
</body>
</html>
Ниже показан результат примера 2.
Что следует учитывать при тестировании сайта:
работоспособность всех ссылок
поддержку разных браузеров
читабельность текста
3. Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type="... " тега UL. Вместо многоточия подставляется одно из трех значений указанных в таблице.
Таблица 4.2 – Параметры тега UL, используемые для создания маркированного списка
Код HTML | Пример |
<ul type="disc"> | Что следует учитывать при тестировании сайта: • работоспособность всех ссылок • поддержку разных браузеров • читабельность текста |
<ul type="circle"> | Что следует учитывать при тестировании сайта: □ работоспособность всех ссылок □ поддержку разных браузеров □ читабельность текста |
<ul type="square"> | Что следует учитывать при тестировании сайта: ■ работоспособность всех ссылок ■ поддержку разных браузеров ■ читабельность текста |
С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунок.
Задание: Создать маркированный текст.
Контрольные вопросы:
Нумерованный список?
Установка маркированного списка.
Тег для установки списка?
Параметры тега UL, используемые для создания маркированного списка.
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6 Тема: Создание Web-сайтов средствами ms Office.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах