Работаем со списком — FAQ по HTML
Списки прекрасный инструмент, который позволяет привлекать внимание читателя к тексту и повышается его читабельность. Вы, наверное, ощутили уже на себе как трудно читать текст с экранов мониторов.
Списки вносят свой вклад для облегчения нам этой процедуры.
Списки бывают:
- Маркированные;
- Нумерованные списки;
- Список определений;
- Вложенные списки.
Начнем с рассмотрения маркированного списка. Для того чтобы его создать существуют теги ul и li.
Конструкция построения списка такова:
1 2 3 4 5 | <ul> <li>Первая строка списка</li> <li>Вторая строка списка</li> <li> . . . . . . . . . .</li> </ul> |
Как видите, все теги требуют обязательного закрытия. По умолчанию в качестве маркера используется круг. Так же маркер может принимать значение окружность и квадрат (circle и square).
Для этого необходимо в теге ul прописать параметр type.
1 2 3 | <ul type=disc> <li> . . . . . . . . . .</li> </ul> |
Так же с помощью css можно изменить маркер, вставив за место него свой рисунок. Для этого необходимо прописать атрибут list-style-image.
Пример оформление стиля:
1 2 3 4 5 | <style type="text/css"> ul{ list-style-image:(img/marker.gif); } </style> |
Этот код необходимо разместить в метатеге head.
Переходим плавно к нумерованным спискам, которые необходимы для обозначение строк по порядковым номерам. Для создания нумерованного списка применяют тег ol.
Так же как и в маркированных списках, маркер нумерованных может принимать следующие значения:
- арабские цифры; (параметр type="1")
- заглавные латинские буквы; (параметр type="A")
- строчные латинские буквы; (параметр type="a")
- заглавные римские цифры; (параметр type="I")
- строчные римские цифры; (параметр type="i")
Если вам необходимо начать список с определенной цифры, то необходимо записать так:
1 2 3 4 5 | <ol type="I" start="3"> <li>Первый список</li> <li>Второй список</li> <li>.............</li> </ul> |
Нет необходимости применять списки определений и вложенные списки если вы конечно не создаете сложный документ, в котором они просто необходимы.
Структура списка определений следующая.
Термин 1
Определение термина 1
Термин 2
Определение термина 2
Такой список задается с помощью контейнера dl, термин — тегом dt, а его определение — с помощью тега dd.
1 2 3 4 5 6 | <dl> <dt>Термин 1</dt> <dd>Определение термина 1</dd> <dt>Термин 2</dt> <dd>Определение термина 2</dd> </ul> |
Вложенные списки представляют сложную иерархической структуры текста. Что бы вы поняли, о чем я говорю, посмотрите на пример такой структуры.
1. Тема 1
1. Пункт 1.1
2. Пункт 1.2
2. Тема
1. Пункт 2.1
2. Пункт 2.1
Создать такую структуру можно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ol> <li>Тема 1 <ol> <li>Пункт 1.1</dd> <li>Пункт 1.2</li> </ol> </li> <li>Тема 2</li> <ol> <li>Пункт 2.1</li> <li>Пункт 2.2</li> </ol> </li> </ul> |
Вот и все что вам необходимо знать про списки.
С уважением, Алексей Фомичёв
Из жизни веб-мастеров:
Разница в белых, серых, черных методах продвижения:
Черные методы – вас забанит Яндекс сразу же
Серые методы – вас забанит Яндекс
Белые методы – вас забанит Яндекс. Чуть позже.
Содержание FAQ по HTML:
Что такое HTML или история возникновения гипертекстовой разметки
Введение
Форматирование текста
Учимся делать ссылки
Работаем со списком
Изучаем таблицы
Форма, как средство взаимодействия с пользователем сайта