Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Апрель, 2017

Вложенные списки

Вложенные списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. Реально на веб-странице нельзя автоматически вести многоуровневую нумерацию, вроде использования подпунктов типа 1.1 или 2.1.3. Поэтому приходится вводить числа самостоятельно или упрощать отображение списка. Так, в примере 1 пункты и подпункты списка обозначаются числами.

Пример 1. Создание вложенного нумерованного списка

     

  1. Пункт 1 
         

    1. Подпункт 1.1   
    2. Подпункт 1.2 

     

  2. Пункт 2  
         

    1. Подпункт 2.1   
    2. Подпункт 2.2  

Результат данного примера показан ниже. Обратите внимание, что у подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка, как это обычно бывает у тега

    .

    1. Пункт 1
      1. Подпункт 1.1
      2. Подпункт 1.2
    2. Пункт 2
      1. Подпункт 2.1
      2. Подпункт 2.2

    Аналогично можно использовать и маркированные списки. При этом во вложенном списке автоматически меняется вид маркеров (пример 2).

    Пример 2. Создание вложенного маркированного списка

    • Пункт 1
    •  

          

      • Подпункт 1.1
      •   

      • Подпункт 1.2
      •  

    • Пункт 2
    •  

          

      • Подпункт 2.1
      •   

      • Подпункт 2.2
      •  

    Результат данного примера показан ниже.

    • Пункт 1
      • Подпункт 1.1
      • Подпункт 1.2
    • Пункт 2
      • Подпункт 2.1
      • Подпункт 2.2

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

Список определений представляет собой текст, состоящий из двух взаимосвязанных наборов — списка с терминами и списка определений терминов. Вначале указывается первый термин, ниже него идет его определение, затем следующий термин с определением и т.д.

Структура списка определений следующая.

Термин 1 Определение термина 1 Термин 2 Определение термина 2

Сам список задается с помощью контейнера , термин — тегом , а его определение — с помощью тега . Вложение тегов для создания списка определений продемонстрировано в примере 1.

Пример 1. Общая структура списка определений

Термин 1 Определение термина 1 Термин 2 Определение термина 2

Использование списка определений показано в примере 2.

Пример 2. Создание списка определений

Лев Хищное животное из семейства кошачьих. Характеризуется длинным хвостом с кисточкой на конце и гривой. Обитает в Африке. Клетка Инструмент для поимки льва. Представляет собой большую коробку, боковые стенки которой сделаны из стальных прутков.

Результат данного примера показан ниже.

Лев Хищное животное из семейства кошачьих. Характеризуется длинным хвостом с кисточкой на конце и гривой. Обитает в Африке. Клетка Инструмент для поимки льва. Представляет собой большую коробку, боковые стенки которой сделаны из стальных прутков.

Нумерованные списки

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега

    , который и используется для создания списка. В качестве маркеров могут быть следующие значения:

    • арабские цифры;
    • заглавные латинские буквы;
    • строчные латинские буквы;
    • заглавные римские цифры;
    • строчные римские цифры;

    В табл. 1 приведены различные параметры тега

      и результат их применения.Табл. 1. Варианты нумерованных списков

      Код HTML Пример
      1. текст
      2. текст
      3. текст

      Нумерованный список с параметрами по умолчанию:

        Нумерованный список начинающийся с пяти:

          Нумерованный список с заглавными буквами латинского алфавита:

            Нумерованный список с прописными буквами латинского алфавита:

              Нумерованный список с римскими цифрами:

                Нумерованный список с прописными римскими цифрами:

                  Нумерованный список с арабскими цифрами:

                    Список с римскими цифрами начинающийся с семи:

                    В примере 1 показано создание списка с использованием римской нумерации.

                    Пример 1. Создание нумерованного списка

                       

                    1. Король Магнум XLIV 
                    2. Король Зигфрид XVI 
                    3. Король Сигизмунд XXI 
                    4. Король Хусбрандт I

                    Результат примера показан ниже.

                    1. Король Магнум XLIV
                    2. Король Зигфрид XVI
                    3. Король Сигизмунд XXI
                    4. Король Хусбрандт I

                    Обратите внимание, что до и после списка автоматически добавляются вертикальные отступы, это является особенностью тега

                      .

                Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность. С учетом того, что восприятие текста с экрана монитора хуже, чем с его печатного варианта, это является весьма полезным приемом.

                Для установки маркированного списка используются теги

                  и

                • (пример 1).

                  Пример 1. Создание маркированного списка

                  Что следует учитывать при тестировании сайта:

                     

                  • работоспособность всех ссылок
                  •  

                  • поддержку разных браузеров
                  •  

                  • читабельность текста

                  Ниже показан результат примера 1.

                  Что следует учитывать при тестировании сайта:

                  • работоспособность всех ссылок
                  • поддержку разных браузеров
                  • читабельность текста

                  Обратите внимание, что у маркированного текста появляются отступы сверху и снизу. Чтобы от них избавиться, к тегу

                    следует добавить параметр style=»margin:0″ (пример 2).

                    Пример 2. Создание маркированного списка без отступов

                    Что следует учитывать при тестировании сайта:

                       

                    • работоспособность всех ссылок
                    •  

                    • поддержку разных браузеров
                    •  

                    • читабельность текста

                    Ниже показан результат данного примера.

                    Что следует учитывать при тестировании сайта:

                    • работоспособность всех ссылок
                    • поддержку разных браузеров
                    • читабельность текста

                    Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=»…» тега

                      . Вместо многоточия подставляется одно из трех значений указанных в табл. 1.Табл. 1. Виды маркеров

                      Код HTML Пример
                        Что следует учитывать при тестировании сайта:

                        • работоспособность всех ссылок
                        • поддержку разных браузеров
                        • читабельность текста
                          Что следует учитывать при тестировании сайта:

                          • работоспособность всех ссылок
                          • поддержку разных браузеров
                          • читабельность текста
                            Что следует учитывать при тестировании сайта:

                            • работоспособность всех ссылок
                            • поддержку разных браузеров
                            • читабельность текста

                            В примере 3 показано создание маркированного списка, маркеры в котором принимают вид окружности.

                            Пример 3. Изменение вида маркера

                            Коктейли на основе текилы

                               

                            • Старинный мексиканский
                            •  

                            • Голубая луна
                            •  

                            • Храбрый бык
                            •  

                            • Съерра Маргарита

                            Результат примера показан ниже.

                            Коктейли на основе текилы

                            • Старинный мексиканский
                            • Голубая луна
                            • Храбрый бык
                            • Съерра Маргарита

                            С помощью CSS этот список можно расширить и вместо встроенных символов использовать в качестве маркера рисунки. С этой целью применяется стилевой атрибут list-style-image, значением которого выступает путь к изображению. Его надо добавить внутри ключевого слова url, как показано в примере 4.

                            Пример 4. Использование стилей для добавления рисунков к маркерам

                            UL { list-style-image: url(images/square.gif) }

                            • Заголовок должен быть короче трех строк;
                            • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
                            • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.

                            Результат данного примера показан ниже.

                            • Заголовок должен быть короче трех строк;
                            • При названии разделов используйте уже устоявшиеся термины, такие как гостевая книга, чат, ссылка, главная страница и другие;
                            • Перед использованием специального термина или слова, решите, будет ли оно понятно читателю.