Что такое маркированный нумерованный список. Практика работы со списками

Доброго времени суток!

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

Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.

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

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

Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:

А вот так выглядит в браузере:

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

1.3 Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (""), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

Ошибка будет следующая:

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

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

В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике:

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

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

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

2.2 Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start" . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

Вот как это будет отображаться на реальном сайте:

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

Ну а сейчас перейдем к вложенным спискам HTML.

3. Как сделать многоуровневый (вложенный) список в HTML

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

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

Обратите внимание, как выглядит многоуровневый список в браузере:

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

). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута "type" мы можем переопределить маркеры (лучше задавать ).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <head > <title > Нумерованные, маркированные и многоуровневые списки в HTML</ title > </ head > <body > <ul > <li > Первая группа тюльпанов <ol > <li > Первый класс <ul > <li > Простые ранние тюльпаны</ li > </ ul > </ li > <li > Второй класс <ul > <li > Махровые тюльпаны</ li > </ ul > </ li > </ ol > </ li > </ ul > </ body > </ html >

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

Смотрим его вид в браузере:

Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1 Как сделать список HTML в строку

Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее ):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5 Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

Многоуровневый список — это список, в котором содержатся элементы с отступами разных уровней. В программе Microsoft Word присутствует встроенная коллекция списков, в которой пользователь может выбрать подходящий стиль. Также, в Ворде можно создавать новые стили многоуровневых списков самостоятельно.

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



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



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



4. Введите элементы списка. Для изменения уровней иерархии элементов, представленных в списке, нажмите “TAB” (более глубокий уровень) или “SHIFT+TAB” (возвращение к предыдущему уровню.



Создание нового стиля

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

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

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



2. Выберите .



3. Начиная с уровня 1, введите желаемый формат номера, задайте шрифт, расположение элементов.





4. Повторите аналогичные действия для следующих уровней многоуровневого списка, определив его иерархию и вид элементов.



Примечание: Определяя новый стиль многоуровневого списка, в этом же списке вы можете использовать и маркеры и номера. К примеру, в разделе “Нумерация для этого уровня” вы можете пролистать перечень стилей многоуровневого списка, выбрав подходящий стиль маркера, который и будет применен к конкретному уровню иерархии.



5. Нажмите “ОК” для принятия изменения и закрытия диалогового окна.



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

Для перемещения элементов многоуровневого списка на другой уровень, воспользуйтесь нашей инструкцией:

1. Выберите элемент списка, который нужно переместить.



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



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



4. Кликните по тому уровню иерархии, на который нужно переместить выбранный вами элемент многоуровневого списка.



Определение новых стилей

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

Параметр “Определить новый многоуровневый список” крайне удобно использовать в случаях, когда нужно создать и сохранить новый стиль списка, который в дальнейшем не будет изменяться или же будет использоваться только в одном документе.

Ручная нумерация элементов списка

В некоторых документах, содержащих нумерованные списки, необходимо обеспечить возможность ручного изменения нумерации. При этом, необходимо, чтобы MS Word правильно изменял номера следующих элементов списка. Один из примеров документов такого типа — юридическая документация.

Для ручного изменения нумерации необходимо воспользоваться параметром “Задание начального значения” — это позволит программе корректно изменить нумерацию следующих элементов списка.

1. Кликните правой кнопкой мышки по тому номеру в списке, который нужно изменить.



2. Выберите параметр “Задать начальное значение” , а затем выполните необходимое действие:







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



Вот, собственно, и все, теперь вы знаете, как создавать многоуровневые списки в Ворде. Инструкция, описанная в данной статье, применима ко всем версиям программы, будь то Word 2007, 2010 или его более новые версии.

Здесь рассмотрим создание многоуровневых списков в Word , нумерованных и маркированных списков , форматирование списков в Word . Рассмотрим, как работать со списками Word – переносить один уровень списка в другой, добавлять или убавлять пункты, уровни в список.
Списки в Word можно сделать двумя способами:
а) Сначала написать список, затем, оформить его;
б) Сразу настроить Word и, затем, писать список. Он будет сразу оформляться.
Виды списков в Word.
Список можно оформить маркерами – разными галочками, точками. Этот вид списка называется «Маркированный».
«Нумерованный список» – когда стоят числа, буквы у пунктов списка.
«Многоуровневый список» - когда создается структура списка, несколько уровней, разделов, т.д., выделенных отступами.
Рассмотрим все виды списков и как работать с ними. На закладке «Главная» в разделе «Абзац» есть три кнопки. Создание маркированного списка в Word.
Ставим курсор в то место страницы Word, где будет начало списка. На закладке «Главная» в разделе «Абзац» нажимаем на кнопку «Создание маркированного списка». В Word 2007 – кнопка «Маркеры».
Кнопка на верхнем изображении обведена красным цветом.
Мы выбрали маркер – галочку. Эта галочка появилась в том месте, где стоял курсор. Все, Word настроен, осталось написать список.
Внимание!
Новый пункт списка будет писаться тогда, когда мы нажмем на клавишу «Enter».
В этом списке мы нажали на клавишу «Enter» после точки за словом словами: «арбуз», « т.д.», «груша». В этом списке видно, что, пока, не нажмем клавишу «Enter» строчка в списке будет переходить ниже.
Можно настроить свой вид маркера, нажав на кнопку «Определить новый маркер» в диалоговом окне «Библиотека маркеров». Здесь можно выбрать другой символ в качестве маркера, картинку или шрифт. Например, мы выбрали маркер «Звездочку».Список получился такой.
Чтобы отменить маркер, например, закончили писать список, нажимаем кнопку «Нет» в диалоговом окне «Библиотека маркеров». Курсор должен стоять на той строчке, у которой нужно убрать маркер.
Или, ставим курсор после маркера перед словом, где маркер нужно убрать (например, перед словом «Груша») или на новой строке, и нажимаем клавишу на клавиатуре «Backspase» или нажимаем кнопку «Создание маркированного маркера».
Если нужно сделать из списка Word простой текст , убрать все маркеры списка сразу, то выделяем список и нажимаем кнопку «Создание маркированного списка».
Или нажимаем на стрелочку у кнопки «Создание маркированного списка» и выбираем из диалогового окна кнопку функции «Нет». Все маркеры удалятся, список приобретет вид простого текста.
Когда мы отключим маркер списка, то останется большой отступ от края строки. Чтобы убрать этот отступ, нажимаем на кнопку «Уменьшить отступ» (на изображении кнопка выделена фиолетовым цветом).
Как создать нумерованный список в Word.
Действуем, как в первом варианте, только нажимаем кнопку функции «Создание нумерованного списка». В Word 2007 –кнопка «Нумерация». Здесь можно выбрать цифры или буквы для списка.
Создание многоуровневых списков в Word.
Многоуровневый список отличается от простого разными отступами пунктов списка.
Первый способ.
Сначала рассмотрим, как сразу при наборе текста создавать многоуровневый список.
Ставим курсор в то место страницы Word, где будем писать список. На закладке «Главная» в разделе «Абзац» нажимаем на кнопку «Создание многоуровневого списка». В Word 2007 кнопка называется - «Многоуровневый список». В появившемся окне нажимаем на тот вид списка, который нам нужен. Мы выбрали такой вариант.
Теперь пишем список.
В первой строке пишем название раздела списка – первый уровень. Мы написали слово «Фрукты». Получилось так.
Теперь, в списке, нам нужно во втором уровне списка перечислить эти фрукты.
Нажимаем клавишу «Enter». Появилась цифра «2)». Нам она не нужна. Чтобы написать второй уровень списка, мы увеличим отступ (создадим структуру), нажав на клавишу «Tab» или на кнопку «Увеличить отступ». Она находится на закладке «Главная» рядом с кнопками создания списков.
Про кнопку «Tab» и функцию табуляции, как изменить шаг табуляции, читайте в статье «Табуляция в Word ».
Курсор передвинулся вправо, появился бо́льший отступ и буква «а)». Это второй уровень списка.
Теперь пишем слово «яблоко». Нажимаем «Enter». Курсор перейдет на следующую строку второго уровня списка с буквой «b)». Пишем слово «Груша». Получилось так.
Чтобы перейти на первый уровень списка, нажимаем сочетание клавиш «Shift» + «Tab» или кнопку «Уменьшить отступ» на закладке «Главная». Вот так, меняя отступы у уровней списка, составляем список.
Если нужно сделать три уровня списка, то после второго уровня, для третьего уровня снова делаем отступ. Так, можно сделать много уровней в списке.
Если нужно перейти с третьего уровня на первый, то уменьшаем отступ два раза, пока не попадем на первый уровень.
Второй способ.

У нас есть такой текст, общий список.
Нам нужно сделать двухуровневый список. Первый уровень - поставить название раздела (Фрукты, овощи). Во втором уровне перечислить фрукты (яблоко, груша) и овощи (морковь, свекла). Принцип такой. Настраиваем каждый уровень отдельно, устанавливая отступы и нажимая кнопку функции списка.
Выделяем слова, которые будут первым уровнем. Можно выделить сразу все слова будущего первого уровня списка. Делается это так. Выделяем первое слово, фразу. Нажимаем и удерживаем нажатой, клавишу «Ctrl» и выделяем все другие слова. Мы выделили слова «Фрукты», «Овощи».
Нажимаем на кнопку «Многоуровневый список», нажимаем на кнопку нужного вида списка. Получится так.
Появился первый уровень списка. Теперь выделяем слова второго уровня. Нажимаем клавишу «Tab». Появился отступ.
Нажимаем кнопку «Многоуровневый список». Получится второй уровень списка.
Так можно делать много уровней, выделяя их все сразу или отдельно каждый.
Внимание!
Можно настраивать уровни списка не только кнопкой «Многоуровневый список», но и другими кнопками списка (маркированный или нумерованный список).
Форматирование списков в Word.
Чтобы корректировать список, достаточно поставить курсор в нужное место списка и кнопками списков и отступами можно менять, удалять, добавлять пункты списков.
Чтобы передвинуть часть списка на другой уровень, добавляем отступ (если сделать следующий уровень списка) или убавляем отступ (чтобы передвинуть на уровень выше). Но, сначала ставим курсор перед словом того пункта, которое хотим передвинуть. Если передвинуть нужно несколько пунктов, то сначала выделяем их, затем передвигаем.
Можно создать свой стиль списка Word , нажимаем на кнопку создания списков и выбираем соответствующую функцию «Определить новый маркер» в маркированных списках, «Определить новый формат номера» в нумерованных списках, «Определить новый стиль списка» или «Определить новый многоуровневый список» для многоуровневых списков. Там можно настроить величину отступа, т.д.
В Word можно пронумеровать не только списки, но и строки, столбцы в таблицею Смотрите статью "

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

Как сделать маркированный список

1. Выделите текст, который вы хотите сделать в виде списка .

Как сделать список в Word - Выделение текста для создания маркированного списка

1. На вкладке «Главная» нажмите стрелку раскрывающегося списка рядом с командой «Маркеры ». Появится меню стилей маркеров.



Как сделать список в Word - Маркеры

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



Как сделать список в Word - Создание маркированного списка

1. Текст будет отформатирован как маркированный список .



Как сделать список в Word - Маркированный список

Как сделать нумерованный список

Если вам необходимо сделать нумерованный список в ворде , то вы можете использовать несколько вариантов нумерации: список с цифрами, буквами или римскими цифрами.

1. Выберите текст, который вы хотите отформатировать в виде списка .

Как сделать список в Word - Выделение текста для преобразования его в список

1. На вкладке «Главная » щелкните стрелку раскрывающегося списка рядом с командой «Нумерация ». Появится меню библиотеки нумерации.



Как сделать список в Word - Нумерация

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



Как сделать список в Word - Создание нумерованного списка

1. Текст будет преобразован как нумерованный список .



Как сделать список в Word - Нумерованный список

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

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

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



Как сделать список в Word - Выделение текста, который необходимо представить в виде многоуровневого списка

1. На вкладке «Главная » щелкните стрелку раскрывающегося списка рядом с командой «Многоуровневый список ». Появится меню библиотеки списков.



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



Как сделать список в Word - Создание многоуровневого списка

1. После этого текст приобретет вид обычного нумерованного списка .



Как сделать список в Word - Список

1. Далее установите курсор в начало строки пункта, который вы хотите изменить на уровень ниже.



Как сделать список в Word - Курсор на месте изменения уровня

1. Нажмите клавишу Tab , чтобы изменить уровень. Теперь данный пункт относится ко второму уровню и имеет нумерацию 1.1.



Как сделать список в Word - Изменение уровня

Если вам необходимо изменить на несколько уровней,например, сделать список 1.1 или 1.2, то нажимайте клавишу Tab до тех пор, пока не будет достигнут желаемый уровень. А для того чтобы вернуться на один уровень выше нажмите клавишу Backspace .

Примечание . Вы также можете увеличить или уменьшить уровни текста, используя команды «Увеличить отступ » или «Уменьшить отступ » на вкладке «Главная ».



Как сделать список в Word - Увеличить, уменьшить отступ

1. После всех изменений уровней, мы получили следующий многоуровневый список в ворде :



Как сделать список в Word - Многоуровневый список

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

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

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

• и
. Вот пример:


• Первый элемент


• Второй элемент


• Третий элемент



Вот результат примера приведенного выше:

• Первый элемент
• Второй элемент
• Третий элемент

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

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

. Параметр type может принимать следующие значения: disc , circle и square .

Ниже показаны маркеры в виде окружности и квадрата.



• Первый элемент


• Второй элемент


• Третий элемент






• Первый элемент


• Второй элемент


• Третий элемент



А вот как это выглядит:

• Первый элемент
• Второй элемент
• Третий элемент
• Первый элемент
• Второй элемент
• Третий элемент

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

• и
. Например:


1. Первый элемент


2. Второй элемент


3. Третий элемент



И выглядит это вот так:

1. Первый элемент
2. Второй элемент
3. Третий элемент

Тип маркера также задается с помощью параметра type тега

.В качестве маркирующих элементов могут выступать:
• арабские числа (1, 2, 3, ...) - type="1" ;
• римские числа в верхнем регистре (I, II, III, ...) - type="I" ;
• римские числа в нижнем регистре (i, ii, iii, ...) - type="i" ;
• прописные латинские буквы (A, B, C, ...) - type="A" ;
• строчные латинские буквы (a, b, c, ...) - type="a" ;

С помощью параметра start тега

можно задать стартовое значение маркера. Ниже приведен пример списка с использованием римских чисел начинающихся с 8.


5. Первый элемент


6. Второй элемент


7. Третий элемент



Выглядит это:

1. Первый элемент
2. Второй элемент
3. Третий элемент

Список определений. Список определений состоит из терминов и их определений. Такой список задается с помощью тегов

и

. Термины в таком списке задается тегом
, а его определение
. Ниже приведена структура списка определений.


Первый элемент


Описание первого элемента


Второй элемент


Описание второго элемента


Третий элемент


Описание третьего элемента


И выглядит он так:
Первый элемент Описание первого элемента Второй элемент Описание второго элемента Третий элемент Описание третьего элемента