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

Какие бывают списки в HTML?

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

Вы начинающий вебмастер? Тогда Вам просто необходимо знать сервис, который поможет создать и продвинуть сайт с нуля – http://profi-site.info/sozdanie-sajtov-v-adlere.html

Разделяются все списки по классам или видам на:

1. Маркированные списки в html2. Нумерованные списки в html3. Выпадающие списки в html4. Списки определений в html

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

Как делают маркированные списки в html?

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

Для того, чтобы создать такой список необходимо заключить его в открывающийся тег <ul> и соответственно, закрывающийся тег </ul>. Например создадим вот такого вида маркированный список:

<ul> <li>Строка маркированного списка в html первая</li> <li>Строка маркированного списка в html вторая</li> <li>Строка маркированного списка в html третья</li> <li>Строка маркированного списка в html четвертая</li> </ul>

Теперь давайте посмотрим пример того, что из этого у нас с вами выйдет, когда мы его поместим на сайт:

• Строка маркированного списка в html первая
• Строка маркированного списка в html вторая
• Строка маркированного списка в html третья
• Строка маркированного списка в html четвертая

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

Как делают нумерованные списки в html?

Для этих списков используется другой тег. За вывод списка отвечает тег ol. Соответственно открывающийся <ol> и закрывающийся </ol>. За каждый отдельный пункт в нумерованном списке в ответе тег li. Как Вы уже наверное сами догадались, также этот тег должен иметь свою пару. Отрывающийся <li> и закрывающийся </li> теги.

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

<ol> <li>Строка нумерованного списка в html первая</li> <li>Строка нумерованного списка в html вторая</li> <li>Строка нумерованного списка в html третья</li> <li>Строка нумерованного списка в html четвертая</li> </ol>

А вот, что из этого получается, когда мы вставляем данный список в html на свой сайт:

1. Строка нумерованного списка в html первая
2. Строка нумерованного списка в html вторая
3. Строка нумерованного списка в html третья
4. Строка нумерованного списка в html четвертая

Получилась замечательная нумерация!

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

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

Вот пример создания выпадающего списка в html:

Строка выпадающего списка в html перваяСтрока выпадающего списка в html втораяСтрока выпадающего списка в html третьяСтрока выпадающего списка в html четвертая

Правда замечательный выпадающий список получился?! Оказывается все не так уж и сложно!

И теперь последний на сегодня вид из все рассматриваемых списков в html …

Узнаем как сделать список определений в html?

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

<dl> <dt>Автор блога:</dt> <dd>Валерий Бородин</dd> <dt>Посетители:</dt> <dd>Друзья</dd> <dd>Гости</dd> </dl>

А вот так получилось после вставки на сайт в текстовом режиме:

Автор блога:

Валерий Бородин

Посетители:

Друзья

Гости

Если Вам вдруг потребуется редактор кода html, то посмотрите вот этот материал. Думаю, что он Вам точно пригодится?!

На этом все на сегодня. Всем удачи и благополучия! До новых встреч!

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

Для создания маркированного списка используются теги <ul> и <li>. Тег ul — это контейнер маркированного списка. Тег li — элемент списка.

• Яблоки
• Абрикосы
• Бананы
• Сливы

Исходный код простого маркированного списка:

Типы маркеров

Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type. Тип маркера может быть задан, как для списка в целом (свойство применяется к <ul>), так и для конкретного элемента (свойство применяется к <li>).

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

• Disc — закрашенный круг, точка.
• Circle — окружность, пустая внутри.
• Square — квадрат.

Исходный код списка с разными типами маркеров:

Положение маркера в списке

HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position. Положение может быть задано, как для списка в целом, так и для отдельного элемента.

Пример списка с разным положением маркеров:

Текст страницы.

• Маркер внутри (inside)
• Маркер снаружи (outside)

Текст страницы.

Исходный код списка с разным положением маркеров:

Свой маркер в HTML списке

Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image.

Пример списка со своей картинкой в роли маркера:

1. Дизайн
2. Верстка
3. Интеграция

Исходный код списка со своим маркером — картинкой:

Как задать нужное начальное значение

Более редкий пример – когда нужно в списке определить новое начальное значение для какого-то из элементов. Например, у нас есть список:

Нужно вместо четвертого элемента поставить 17-й и продолжить счет. Нажимаем на этом номере правой кнопкой мыши и выбираем «Задать начальное значение».

Задаем нужный номер и нажимает Ок. Вот, что у нас получилось:

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

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

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

Многоуровневый список — это список, в котором содержатся элементы с отступами разных уровней. В программе 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 или его более новые версии.

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

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

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

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

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

• Результат
• HTML-код
• Попробуй сам »

Всемирная паутина

— от англ. World Wide Web (WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.

Интернет

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

Сайт

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

По-умолчанию, текст термина прижимается к левому краю окна браузера, а описание термина располагается ниже и сдвигается вправо.

	Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

Стилизация пунктов списка

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

Свойство list-style-type

Свойство list-style-type используется для установки содержимого маркера пунктов списка. Доступные значения находятся в диапазоне от квадратиков и десятичных чисел до армянской нумерации и стиль в CSS может быть добавлен к элементам <ul>, <ol> или <li>.

Любое значение свойства list-style-type может быть добавлено к маркированному или нумерованному списку. Имея это в виду, можно использовать нумерацию в маркированном списке и не числовые маркеры в нумерованном списке.

HTML

CSS

Демонстрация свойства list-style-type

Значения list-style-type

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

Значение list-style-type	Содержимое
none	Нет пунктов списка
disc	Однотонный кружок
circle	Пустая окружность
square	Однотонный квадрат
decimal	Десятичные числа
decimal-leading-zero	Десятичные числа начинающиеся с нуля
lower-roman	Строчные римские числа
upper-roman	Заглавные римские числа
lower-greek	Строчные греческие числа
lower-alpha / lower-latin	Строчные латинские буквы
upper-alpha / upper-latin	Заглавные латинские буквы
armenian	Традиционная армянская нумерация
georgian	Традиционная грузинская нумерация

Использование изображения в качестве маркера списка

Может наступить время, когда значений по умолчанию для свойства list-style-type не хватит и мы пожелаем задать свой собственный маркер списка. Чаще всего это делается путём размещения фонового изображения для каждого элемента <li>.

Процесс включает в себя удаление любого значения свойства list-style-type по умолчанию и добавление фонового изображения и полей для элемента <li>.

Подробнее — значение none свойства list-style-type удалит существующие маркеры списка. Свойство background задаст фоновое изображение вместе с его положением и повтором, если необходимо. А свойство padding обеспечит пространство слева от текста для фоновой картинки.

HTML

CSS

Свойство list-style-position

По умолчанию маркеры списка располагаются слева от содержимого в элементе <li>. Такой стиль позиционирования описывается как outside, это означает, что всё содержимое будет отображаться непосредственно справа, за пределами маркера списка. С помощью свойства list-style-position мы можем изменить значение по умолчанию outside на inside или inherit.

Значение outside размещает маркер списка слева от элемента <li> и не позволяют любому содержимому обтекать ниже этот маркер. Значение inside (которое редко используется и можно увидеть) размещает маркер списка в первой строке элемента <li> и позволяет содержимому обтекать маркер при необходимости.

HTML

CSS

Свойства списка, которые мы недавно обсудили, list-style-type и list-style-position, могут быть объединены в одно универсальное свойство list-style. В этом свойстве мы можем использовать одно или все значения свойств списка одновременно. Порядок этих значений должен быть: list-style-type, затем идёт list-style-position.

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

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

Трюк с вложением списков заключается в том, что следует знать, где начинается и заканчивается каждый список и пункт списка. Говоря конкретно о маркированных и нумерованных списках, единственным элементом, который может находиться непосредственно внутри <ul> и <ol> является элемент <li>. Повторим — единственным элементом, который мы можем поставить как прямой потомок элементов <ul> и <ol>, является <li>.

Тем не менее, внутри элемента <li> может быть добавлен стандартный набор элементов, включая любые элементы <ul> или <ol>.

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

Демонстрация вложенных списков

Поскольку вложенные списки могут немного запутать и отобразить нежелательные стили, если они сделаны неправильно — давайте быстро их просмотрим. Элементы <ul> и <ol> могут содержать только элементы <li>. Элемент <li> может содержать любой обычный элемент, какой пожелаете. Однако элемент <li> должен быть прямым потомком либо элемента <ul>, либо <ol>.

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

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

Общие правила оформления списков:

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

2Первые слова пунктов не должны повторяться. Заменяйте их синонимы, перефразируйте.

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

4Пункты списка должны быть примерной одинаковыми по длине. «Прыгающие» строки выглядят неряшливо.

5В списке должно быть больше двух пунктов, иначе он будет смотреть куце. Если же нужно сделать только 2 пункта, то они должны быть объёмными.

6Если пункты состоят из нескольких предложений, первое можно выделить жирным шрифтом.

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

Итак, список — это хороший прием структурирования текста. Пользуйтесь нумерованными и маркированными перечнями в своих материалах на сайте — это визуально обогатит текст и привлечет читателей.

Как создать списки в Word 2007, 2010, 2013: маркированный, нумерованный, многоуровневый

Для создания списка в Word необходимо на вкладке «Главная» в группе «Абзац» нажать на одну из кнопок, соответствующей виду списка: маркированному, нумерованному, многоуровневому.

Как создать маркированный список в Word?

Для создания маркированного списка нажмите кнопку «Маркеры» — в тексте появится маркер, либо установленный по умолчанию (черный круг), либо последний из использованных вами. Для выбора типа маркере необходимо нажать на стрелку рядом с кнопкой «Маркеры». В открывшемся окне нужно выбрать интересующий вас тип маркера. Также, при необходимости, вы можете определить новый маркер, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе символа одного из шрифтов, либо на основе рисунка.

Наиболее оригинальные маркеры могут быть заданы на основе рисунка. Нажмите кнопку «Рисунок», затем выберите в списке понравившийся вариант и нажмите «ОК» в этой и следующей форме.

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

Для создания нумерованного списка нажмите кнопку «Нумерация» — в тексте появится элемент нумерации, либо установленный по умолчанию (число), либо последний из использованных вами. Для выбора типа нумерации необходимо нажать на стрелку рядом с кнопкой «Нумерация». В открывшемся окне нужно выбрать интересующий вас тип нумерации. Также, при необходимости, вы можете определить новый формат номера, нажав на соответствующую кнопку.

Новый маркер может быть задан на основе чисел, букв или слов. В поле «Формат номера» вы можете адаптировать формат номера под свои нужды — заменить точку на тире или убрать ее.

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

Для создания многоуровневого списка нажмите кнопку «Многоуровневый список» — откроется список основных вариантов построения многоуровневой нумерации. Вы можете выбрать один из них, или определить новый многоуровневый список, нажав на соответствующую кнопку.

В открывшейся форме создания нового многоуровневого списка вы можете последовательно пройти интересующие вас уровни и задать необходимые вам параметры — вы сможете увидеть весь набор параметров, нажав на кнопку «Больше» в левом нижнем углу. В частности, вы можете связать уровень списка со стилем заголовка (это удобно, если вы делаете структуру разделов документа и собираетесь затем автоматически собрать оглавление), или другой стиль.

Как работать с многоуровневым списком?

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

Источник

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

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

Меньше плохих сайтов, больше хороших, качественных и полезных. Вы спросите, а причем тут вообще html списки и все эти «словобуквы» выше? Отвечу просто, они нужны для лучшего восприятия информации как человеками, так и роботами, которые любят, чтоб все было структурно, лаконично, грамотно и правильно.

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

И тут самое время упомянуть про списки. Их существует 3 вида: маркированные, нумерованные и в виде определений. Я решил не объединять их всех в этой статье, позже объясню почему.

Атрибуты

Ну и конечно я не могу не рассказать вам про атрибуты, относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.

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

• <ul type=»disc»> — это значение стоит по умолчанию, так что его вообще нет смысла прописывать. Маркеры выглядят как черные закрашенные кружочки;
• <ul type=»circle»> — благодаря этому значению маркер останется круглым, но будет уже не закрашенным;
• <ul type=»square»> — в данном случаем маркеры превратятся в маленькие черные квадратики.

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

Вопросы и задачи по теме

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

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (два HTML файла и изображение) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующие HTML страницы:
Практическое задание № 18.Продвинутое задание:
Практическое задание № 19.

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

Текстовая тень в CSS

Блочная и строчная модель CSS

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Итог

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

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

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

Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.