- 4.5 out of 5 based on 2 votes

Очень часто определенную информацию на сайте необходимо представить в виде списков.

Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.

Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.

Маркированный список.

Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов

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

  Код маркированного списка будет выглядеть так:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:

  

  Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега

  есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:
  • disc - круг;
  • circle - окружность;
  • square - квадрат.

  Значение disc используется по умолчанию.

  Пример создания маркированного списка с маркерами в виде окружности:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  В результате список примет, следующий вид:

  

  Создание маркированного списка с маркерами в виде квадратиков:

  • Вариант такой
  • Вариант сякой
  • Вариант эдакий

  Список будет иметь вид:

  

  Атрибут type можно применять не только к тегу

  , но и к тегу
  • . Таким образом можно создать список с разнообразными маркерами.
    • Вариант такой
    • Вариант сякой
    • Вариант эдакий

    В результате получится следующее:

    

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

    Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега

    и вложенных в его тегов

    1. 1. Первая строчка
       2. Вторая строчка
       3. Третья строчка

       Выглядит такой список следующим образом:

       

       По умолчанию нумерация производится арабскими цифрами. Но у тега

       есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type="A") или строчными (type="a") латинскими буквами, римскими цифрами в верхнем (type="I") и нижнем (type="i") регистре.

       Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.

       Вид списка:

       Вид списка:

       

       Нумерация строчными буквами латинского алфавита:

       Вид списка:

       

       Вид списка:

       

       Вид списка:

       

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

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

       . Тег

       создает контейнер для списка, тег

       устанавливает термин, а тег

       описание или определение термина.

       Записывается данный список следующим образом:

       Термин 1

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

       Термин 2

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

       Термин 3

       Определение термина 3

       В результате получится следующий список:

       

       Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения.

       Вложенные или многоуровневые списки в HTML.

       Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.

       Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.

       • Вариант такой
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка
       • Вариант сякой
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка
       • Вариант эдакий
         1. Первая строчка
         2. Вторая строчка
         3. Третья строчка

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

       , а каждый пункт списка начинается с тега
       • , как показано ниже.
         • Первый пункт
         • Второй пункт
         • Третий пункт

         В списке непременно должен присутствовать закрывающий тег

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

       В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

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

       ---

       • Чебурашка
       • Крокодил Гена
       • Шапокляк
       • Крыса Лариса

       ---

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

       Рис. 11.1. Вид маркированного списка

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

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

       . Допустимые значения приведены в табл. 11.1
       Табл. 11.1. Стили маркеров списка

       Тип списка	Код HTML	Пример
       Список с маркерами в виде круга		Первый Второй Третий
       Список с маркерами в виде окружности		Первый Второй Третий
       Список с квадратными маркерами		Первый Второй Третий

       Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.

       Создание списка с квадратными маркерами показано в примере 11.2.

       Пример 11.2. Вид маркеров

       Изменение убеждений

       • изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
       • изменение веры в непогрешимость любимой партии;
       • убеждение в том, что инопланетяне существуют;
       • предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).

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

       Списки - важная составляющая контента, так как они помогают упорядочить информацию. Текст в списках лучше воспринимается и проще запоминается.

       Самый простой - перед каждым его элементом стоит маркер - кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.

       Чтобы его создать, нужно использовать всего два тега:

       и
       • .
         - это контейнер, содержащий список, элементы которого задаются тегом
         • .
           • Камень
           • Ножницы
           • Бумага

           По умолчанию в качестве маркера списка используется чёрный кружок (disk ). Добавив в тег

           атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle ) или чёрный квадрат (square ).

           От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.

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

           и
           1. . Контейнер
              определяет начало и конец списка, тег
              1. задаёт начало и конец его элемента - всё, как в маркированном списке, только
                 заменено на
                 .
                 1. Камень
                 2. Ножницы
                 3. Бумага

                 

                 Так как с нумерованными списками не всегда всё так просто, для тега

                 создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):

                 1. type . Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).

                 2. start . Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение - номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.

                 3. reversed . Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.

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

                 1. атрибут :

                 2. Сорок пятый элемент после тридцать восьмого

                 Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов - отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.

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

                 Не такой известный тип списка, как рассмотренные выше. Состоит из терминов и их определений. Создаётся с помощью тегов:

                 - контейнер, содержащий список.

                 - тег термина.

                 - тег определения

                 Область применения списков определений - глоссарии, справочники, тесты, словари и другие ёмкие перечисления вида «Термин - объяснение».

                 Вот пример списка определений:

                 Дескриптор

                 Основная единица языка разметки, известная всем как "Тег".

                 Атрибут

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

                 Метка

                 Одиночный тег, который не нужно закрывать.

                 

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

                 Вот пример многоуровневого списка:

                 Языки программирования делятся на:

                 • Структурные
                 1. Pascal
                 2. Oberon
                 1. Limbo
                 • Объектно-ориентированные
                 1. Java
                 • Функциональные
                 1. Lisp
                 2. Python

                 Создать список в Microsoft Word можно довольно просто, достаточно сделать всего несколько кликов. Кроме того, программа позволяет не только создавать маркированный или нумерованный список по ходу набора текста, но и преобразовать в список текст, который уже был набран.

                 В этой статье мы детально рассмотрим то, как сделать список в Ворде.

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

                 1. Установите курсор в начале строки, в которой должен находиться первый пункт списка.

                 

                 2. В группе “Абзац” , которая расположена во вкладке “Главная” , нажмите кнопку “Маркированный список” .

                 

                 3. Введите первый пункт нового списка, нажмите “ENTER” .

                 

                 4. Введите все последующие пункты маркированного списка, нажимая в конце каждого из них “ENTER” (после точки или точки с запятой). Когда закончите вводить последний пункт, дважды нажмите “ENTER” или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания маркированного списка и продолжить обычный набор текста.

                 

                 Преобразование готового текста в список

                 Очевидно, что каждый пункт будущего списка должен находиться в отдельной строке. Если ваш текст еще не разделен на строки, сделайте это:

                 1. Установите курсор в конце слова, фразы или предложения, которое должно быть первым пунктом в будущем списке.

                 

                 2. Нажмите “ENTER” .

                 

                 3. Повторите это же действие для всех следующих пунктов.

                 

                 4. Выделите фрагмент текста, который должен стать списком.

                 

                 5. На панели быстрого доступа во вкладке “Главная” нажмите кнопку “Маркированный список” (группа “Абзац” ).

                 

                 Совет: Если после созданного вами маркированного списка еще нет текста, дважды нажмите “ENTER” в конце последнего пункта или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания списка. Продолжите обычный набор текста.

                 

                 Если вам необходимо создать нумерованный список, а не маркированный, нажмите кнопку “Нумерованный список” , расположенную в группе “Абзац” во вкладке “Главная” .

                 

                 Изменение уровня списка

                 Созданный нумерованный список можно сместить влево или вправо, изменив таким образом его “глубину” (уровень).

                 1. Выделите созданный вами маркированный список.

                 

                 “Маркированный список” .

                 

                 3. В выпадающем меню выберите пункт “Изменить уровень списка” .

                 

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

                 

                 Примечание: С изменением уровня изменится и маркировка в списке. О том, как изменить стиль маркированного списка (вид маркеров, в первую очередь), мы расскажем ниже.

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

                 Примечание: Красной стрелкой на скриншоте показана начальная позиция табуляции для маркированного списка.

                 

                 Выделите список, уровень которого нужно изменить, выполните одно из следующих действий:

                 
                 

                 

                 Примечание: Одно нажатие клавиши (или клавиш) смещает список на одну позицию табуляции. Комбинация “SHIFT+TAB” будет работать только в том случае, если список находится на расстоянии хотя бы в одну позицию табуляции от левого поля страницы.

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

                 При необходимости вы можете создать многоуровневый маркированный список. Более детально о том, как это сделать, вы можете узнать из нашей статьи.

                 Изменение стиля маркированного списка

                 Помимо стандартного маркера, устанавливаемого в начале каждого пункта списка, для его маркировки вы можете использовать и другие знаки, доступные в MS Word.

                 1. Выделите маркированный список, сnиль которого необходимо изменить.

                 

                 2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список” .

                 

                 3. Из выпадающего меню выберите подходящий стиль маркера.

                 

                 4. Маркеры в списке будут изменены.

                 

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