Что такое маркированный список

Списки встречаются везде. Они используются для:

• разбивки больших сегментов текста на части;
• выделения важных моментов;
• изложения «плана действий» и перечня мероприятий (нумерованный список в HTML).

Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?

Маркированные списки (или ненумерованные списки)

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

Ненумерованные списки — тег <ul>

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:

Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):

Элементы списка — тег <li>

Каждый элемент в списке обворачивают в отдельную пару тегов <li> </ li>. Часто можно обойтись и без <li>, но я бы рекомендовал придерживаться этого правила.

Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:

Отступ маркированного списка

Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.

Упорядоченный / нумерованный список — тег <ol>

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

что на выходе дает нам:

A. Элемент 1
B. Элемент 2
C. Элемент 3

Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.

Начало нумерованного списка с определенного номера

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

Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!

К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:

Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть

Обратный порядок

Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed:

В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.

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

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

Что дает нам:

• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня

Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.

1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня

Используйте нумерованные списки HTML на своих страницах.

www.internet-technologies.ru

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

Инструменты списков обычно находятся на общей панели инструментов в программе.

Начало работы с маркерами:

1. Убедитесь, что курсор находится в начале строки.
2. Нажмите кнопку «Маркеры».
3. Чтобы продолжить перечисление, введите нужные данные в первом пункте и нажмите «Enter». Программа по умолчанию проставит следующий элемент списка.

Внешний вид маркеров можно менять в зависимости от стиля текста:

1. Нажмите стрелку рядом с кнопкой «Маркеры».
2. Выберите нужный символ из библиотеки.
3. Если среди символов нет нужного, создайте свой стиль маркеров. Для этого ниже библиотеки нажмите кнопку «Определить новый маркер».
4. Нажмите кнопку «Символ» или «Рисунок» и выберите элемент из выпавшего списка.

На заметку! Необязательно нажимать на все стили для выбора между ними. При наведении курсора на 1 из вариантов, он отражается на списке в режиме предварительного просмотра.

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

Чтобы удалить список вместе с содержимым, выделите текст в списке и зажмите кнопку «Delete», после чего нажмите кнопку «Маркеры».

Важно! Перечисленные действия возможны в программе, установленной на операционной системе Windows.

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

1. Поставьте курсор в начале строчки.
2. В разделе «Главная» нажмите на стрелку рядом с маркерами.
3. Найдите нужный стиль и начните работу.

Форматирование перечня также предполагает возможность изменения расстояния между элементами списка.

1. Выделите все пункты списка.
2. На панели инструментов выберите «Абзац».
3. Во вкладке «Отступы и интервалы» всплывшего окна выберите значение интервалов из стандартных или введите необходимые параметры.

На заметку! Кроме того, увеличить отступ можно сняв флажок в графе «Не добавлять интервал между абзацами одного стиля» в этой же вкладке.

Видео — Делаем маркированный список в Microsoft Word

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

Читайте также подробную информацию в новой статье — «Как работать в Word для начинающих».

Автоматическая функция маркирования упрощает задачу писателю, экономит время на выполнение лишних действий.

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

1. Нажмите кнопку «Файл» и выберите параметры. В версии Word 2007 года вместо «Файл» находится кнопка «Office».
2. Во вкладке «Правописание» нажмите на «Параметры автозамены».
3. Найдите раздел «Применять при вводе» и выберите стили маркированных списков.
4. Подтвердите действие нажатием «ОК».

Для начала автоматического списка:

1. Установите курсор на месте будущего списка.
2. Поставьте пробел или звездочку.
3. Нажмите пробел.

Единоразовая отмена функции возможна при нажатии выпадающей панели «Параметры автозамены».

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

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

Работа с числовыми перечнями полностью повторяет оформление маркеров. Разница заключается только в кнопке, которая запускает данную функцию. Она называется «Нумерация» и находится справа от маркеров.

Как изменить номер в списке:

1. Нажмите на стрелку справа от «Нумерации».
2. Выберите определение нового формата чисел.
3. Измените настройки в нужной строке, после чего нажмите «ОК».

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

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

Настройка автоматического режима нумерованного списка аналогична работе с маркированным.

Для ввода числового перечня:

1. Поставьте курсор в начале строки.
2. Установите 1.
3. Подтвердите действие пробелом.

Многоуровневый список: способы создания

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

Чтобы начать работу над многоуровневым перечислением, достаточно нажать стрелку справа от кнопки «Многоуровневый список» и выбрать нужный стиль маркеров или нумерации.

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

1. Правой кнопкой мыши выберите маркер или номер пункта, уровень которого нужно сменить.
2. Нажмите стрелку возле кнопки «Маркер» или «Нумерация» в соответствии с типом обозначения.
3. Нажмите на графу «Изменить уровень списка» и в выпавшем окне выберите новый стиль обозначения.

На заметку! Еще один вариант изменения уровня графы в списке – установить курсор в начале текста графы и нажать кнопку «Tab». Чем ниже уровень вам нужен, тем больше раз нужно нажимать данную кнопку. Чтобы вернуть необходимую графу на уровень выше, нажмите кнопку «Backspace».

В уже существующем списке из нескольких категорий легко сменить стиль обозначений:

1. Щелкните по стрелке возле кнопки «Многоуровневый список».
2. Из выпавшего меню выберите нужный стиль и нажмите на него.
3. Если в библиотеке нет подходящего списка, можно создать свой, выбрав графу «Определить новый многоуровневый список». Во всплывшем окне выберите нужное значение для каждой категории.

На заметку! Примечательно, что в одном многоуровневом списке могут присутствовать как символы, так и числа.

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

Как сделать список из готового текста?

Готовый текст при необходимости легко преобразовать в список:

1. Убедитесь, что все элементы будущего перечня находятся на разных строках.
2. Выделите строки с нужной информацией.
3. Нажмите кнопку «Маркеры».

Работа со списком завершается двумя нажатиями кнопки «Enter».

Сортировка списков в Word

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

1. Выделите все элементы перечня.
2. Нажмите на кнопку «Сортировка» на панели инструментов.
3. Во всплывшем окне введите параметры сортировки. В зависимости от того, каким образом должен быть представлен алфавит – в прямом или обратном порядке, выберите «по возрастанию» или «по убыванию».

Читайте также статью  — «Как сделать нумерацию страниц в Ворде с 3 страницы».

pc-consultant.ru

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

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

Закрывающий тег </li> необязателен, но советую его всегда добавлять для четкого разделения элементов списка. Закрывающий тег </ul> обязателен. Внутри элемента списка можно помещать ссылки, параграфы, изображения, другие списки, переносы строк, и др.

Маркеры списка могут быть трех видов: закрашенный круг, окружность и квадрат. Тип маркера задается с помощью параметра type тега <ul>. Параметр type может принимать следующие значения: disc, circle и square.

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

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

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

Тип маркера также задается с помощью параметра type тега <ol>.В качестве маркирующих элементов могут выступать:

• арабские числа (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 тега <ol> можно задать стартовое значение маркера. Ниже приведен пример списка с использованием римских чисел начинающихся с 8. Выглядит это:

html.svoymaster.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы 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 на практике:

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

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

Больше практикуйтесь!

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru

Вид маркера

Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

• disc — маркеры в виде закрашенного кружка;
• circle — маркеры в виде незакрашенного кружка;
• square — квадратные маркеры.

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

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Списки</title>   <style>   ul {   list-style: square; /* Квадрат в качестве маркера */   }   </style>   </head>   <body>   <ul>   <li>Сепульки</li>   <li>Сепулькарии</li>   <li>Сепуление</li>   </ul>   </body>  </html>

В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к <li> не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым <li> добавляем свой собственный символ с помощью псевдоэлемента ::before. В примере 2 в качестве такого маркера выступает треугольник.

Пример 2. Использование ::before

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Списки</title>   <style>   li {   list-style: none; /* Скрываем маркеры списка */   text-indent: -1em; /* Сдвигаем элементы списка влево */   }   li::before {   content: '25ba'; /* Добавляем маркер в шестнадцатеричном формате*/   padding-right: 5px; /* Расстояние от маркеров до текста */   color: red; /* Маркеры красного цвета */   }   </style>   </head>   <body>   <ul>   <li>Сепульки</li>   <li>Сепулькарии</li>   <li>Сепуление</li>   </ul>   </body>  </html>

Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача — переместить текст левее на один символ.

Рис. 2. Произвольные маркеры в списке

Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

Рис. 3. Выбор символа в LibreOffice

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

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

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

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Списки</title>   <style>   ul {   list-style-image: url(/example/image/bullet.png);   }   </style>   </head>   <body>   <ul>   <li>Сепульки</li>   <li>Сепулькарии</li>   <li>Сепуление</li>   </ul>   </body>  </html>

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

Рис. 4. Рисунок в качестве маркера

Применение list-style-image обладает некоторыми недостатками:

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

Этих недочётов можно избежать с помощью свойства background, оно устанавливает фоновое изображение. Для каждого элемента списка <li> мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

Пример 4. Использование background

ul {   margin-left: -1em;  }  li {   list-style: none;   background: url(images/bullet.png) no-repeat 0 2px;   padding-left: 20px;  }

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

Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).

inside	outside

Рис. 5. Размещение маркеров относительно текста

Чтобы управлять положением маркеров, применяется свойство list-style-position. Оно имеет два значения: outside — маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside — маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

Пример 5. Изменение положения маркеров

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Списки</title>   <style>   ul {   list-style-position: inside;   }   </style>   </head>   <body>   <ul>   <li>Перед началом работы проверьте наличие оборудования, входящего   в комплект 3BM.</li>   <li>При отсутствии одного или нескольких периферийных устройств   следует сразу же обратиться к техническому персоналу ВЦ.</li>   <li>После осмотра визуальными методами своего рабочего места можно   осторожно включить питание 3BM.</li>   </ul>   </body>  </html>

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

Рис. 6. Маркеры в тексте

webref.ru

Как всегда, во всем виновато SEO

Как и многие другие корявости, искаженное представление о пользе списков пришло в копирайтинг из SEO. Фраза «использовать в тексте маркированные списки и подзаголовки» присутствует в 95% тех.заданий на текст.

Да, верно, поисковики «любят» списки. Как и подзаголовки, для них это косвенный признак качества текста.

Структурированный текст, разбитый на небольшие логические блоки, читать (просматривать) легче, чем «серебряное полотно» сплошного набора. И кто с этим поспорит?

Разве что классики, имевшие привычку начинать предложение вверху страницы и заканчивать его где-то посередине листа.

«Заставь дурака молиться, так он и лоб расшибет»

Косвенный признак качества стал одним из основных.

Если в тексте есть списки, он хорошо читается.

Правда? Точно?

Давайте смотреть.

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

Можно предположить, что здесь список играет роль скорее риторическую – интонацией подчеркнуть важные моменты. Но разнобой в пунктах лишает его убедительности. Представьте себе, как вы думаете: «Я буду делать это, потому что хочу впустую потратить время».

Увидел перечисление – сделай список. Рефлекс, от которого чертовски трудно избавиться.

О, этот копирайтинг прямого попадания…

Но не будем вешать всех собак на SEO. Есть еще одна область, где список — вернее, число – является стержнем, основой, мощным приемом продаж. Я говорю о копирайтинге прямого отклика, или продающем копирайтинге.

58 способов добиться успеха на первом свидании.

298 советов начинающим копирайтерам.

3 тополя на Плющихе. Ой, это мимо.

7 способов зарабатывать, торгуя воздухом.

10 вещей, которые вы не знали о кондиционерах.

Ну вы поняли, о чем я.

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

Хорошо ли это?

В меру, с умом – конечно, хорошо.

Но задумайтесь: 298 советов. Какова вероятность, что вы прочтете 172-й совет?

Или: вы знаете 4 способа получить грин-карту на халяву. Но 4 – число «некрасивое». Надо срочно выдумать 5-й способ. Или умолчать о 4-м.

• Список ради списка — ловушка даже для маститых авторов.

Предназначение списков

Можно понять юристов, которые нумеруют статьи договора, доходя до 5 уровней вложенности. Не станешь спорить, когда читаешь пошаговую инструкцию из 38 пунктов с подпунктами. Есть и другие виды текстов, где список — не просто отличный, но прямо-таки необходимый прием. Например, список ингредиентов в рецепте или оглавление в книге.

Но в этих примерах сам контент требует организации.

Еще один повод сделать список был упомянут выше: интонационный акцент. Зачастую список заменяет житейское загибание пальцев. Как это было в «Пигмалионе»:

Дулиттл (меланхолическим речитативом). Дайте мне слово сказать, хозяин, и я вам все объясню. Я могу вам все объяснить. Я хочу вам все объяснить. Я должен вам все объяснить.

Хиггинс. Пикеринг, у этого человека природные способности оратора. Обратите внимание на ритм и конструкцию: «Я могу вам все объяснить. Я хочу вам все объяснить. Я должен вам все объяснить». Сентиментальная риторика! Вот она, примесь уэльской крови. Попрошайничество и жульнические замашки отсюда же.

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

Итак, списки: как правильно их готовить

Список — это способ донести до читателя что-то по-настоящему важное. Впечатать сообщение в сознание. Оставить там четкую картинку: раз, два, три, пли!

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

• нумерованные статьи в договоре или другом официальном документе;
• инструкции и другие структурированные материалы;
• ингредиенты в рецепте;
• оглавление в книге;
• перечень последовательных шагов;
• перечень альтернатив;
• перечень предметов или признаков…

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

Основная характеристика сущностей, составляющих список — однородность.

Например, я видела список:

1. 3 мастер-класса;
2. 20 докладчиков;
3. 1000 участников;
4. единая цена на билет 2000 рублей.

А сейчас вопрос из теста на IQ: какой пункт здесь лишний?

Списки бывают:

• нумерованные
• и маркированные.

Третьего пункта нет.

Нумерованный список используется тогда (и только тогда), когда его элементы связаны последовательно. Когда никакие два пункта не могут поменяться местами.

1. Начало.
2. Середина.
3. Конец.

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

В сущности, маркированный список – отличный инструмент оформления текста.

А еще в списке может быть один-единственный пункт. Просто потому что одинокий маркер – это уже акцент.

Еще одна роль, которую легко сыграет список, это – подзаголовок.

Представьте статью «7 способов заменить перегоревшую лампочку». Очевидно, что каждый способ придется описать, причем не одной фразой. А список сделать хочется. ОК, кто нам запретит?

7 способов заменить перегоревшую лампочку

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

2. Влезьте сами.
   У вас же есть стремянка? Отлично. Это повод получить массу удовольствия. Во-первых, вы целую неделю будете ходить в героинях, укоряя сильную половину одним лишь видом. Во-вторых… впрочем, хватит и во-первых.

3. Вызовите 5 прапорщиков.
   Инсценируйте наконец этот тупой анекдот.

4. И т.д.

Как видите, список присутствует, но отягощен довольно большими порциями текста.

А что делать, если у вас на самом деле накопилось 298 советов начинающим заводчикам французских бульдогов?

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

Во-первых, любой большой список может быть разбит на несколько более однородных списков.

• Во-вторых, есть такая полезная штука, как уровни списка.
  • Всегда можно сделать список, состоящий из 3 основных пунктов,
    • у каждого из которых есть 2-3 подпункта.

В-третьих, кто вам сказал, что вы обязаны вообще делать список? Сделайте таблицу! Таблица – еще один инструмент, который делает информацию более доходчивой.

Какова оптимальная длина списка?

Список из 2 пунктов несколько вялый. Это «или/или», выполненное в самой унылой манере, никакого драматизма.

3 пункта – на мой взгляд – идеальный вариант. Красивы также списки из 5 пунктов.

7 и 9 – это уже предел. Найдите список из 9 пунктов и попробуйте вспомнить 4-ю позицию. Недаром в американских «желтых страницах» позиции в начале и конце списка стоят дороже, чем места внутри перечня.

Говорят, больше 7 (плюс-минус 2) предметов не удерживает человеческая память. Это отличное оправдание для сокращения любых списков, которые попадаются вам под руку!

Так все же: списки – зло или добро?

Один хороший фотограф сказал: снимать может и коробка с дыркой, какая разница? Главное знать, чего хочешь.

Вы можете использовать списки и можете пренебрегать ими.

Если вы делаете этот выбор сознательно, то все в порядке.

Открою небольшой секрет: этот совет можно применить к огромному списку (!) разных инструментов и приемов.

www.cmsmagazine.ru

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

<ul>  <li>Первый пункт</li>  <li>Второй пункт</li>  <li>Третий пункт</li> </ul>

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Маркированный список</title>  </head>  <body>  <hr>  <ul>  <li>Чебурашка</li>  <li>Крокодил Гена</li>  <li>Шапокляк</li>  <li>Крыса Лариса</li>  </ul>  <hr>  </body> </html>

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>Маркированный список</title>  </head>  <body>  <p><strong>Изменение убеждений</strong></p>  <ul type="square">  <li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).   Специальное предложение - иудаизм и мусульманство вместе;</li>  <li>изменение веры в непогрешимость любимой партии;</li>  <li>убеждение в том, что инопланетяне существуют;</li>  <li>предпочтение политического строя, как самого лучшего в своем роде   (на выбор: феодализм, социализм, коммунизм, капитализм).</li>  </ul>  </body> </html>

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

Рис. 11.2. Вид списка с квадратными маркерами

htmlbook.ru

ГЛАВА 2. СПИСКИ

В HTML-документах часто используется конструкция, представляющая собой список тех или иных данных. Например, это может быть список марок автомобилей, или знаков зодиаков, или рецептов блюд и т.п. Организовать такие списки можно, используя уже известные (из гл. 1) теги HTML. Однако гораздо более удобным и гибким инструментом являются специальные теги для представления списков в документе. В данной главе будут рассмотрены основные теги, позволяющие задавать списки различных типов.

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

Наиболее простым в представлении является маркированный список, задаваемый тегом-контейнером <ul>. С его помощью формируются списки, у которых в качестве маркеров используются «отвлеченные» обозначения в виде квадратов, кружков, треугольников и др.

Для создания элементов списка используется тег <li>, записанный внутри тегов <ul> … </ul>. Тег <li> не требует закрывающего тега </li>, но его использование не возбраняется спецификацией языка HTML. Обычно браузер сам определяет где заканчивается один тег <li> и начинается другой. Кроме того, при определении элементов списка нет необходимости выполнять принудительный перенос строк с помощью тега <br> или тега <p>, эту задачу выполняет тег <li>, который четко структурирует элементы, образуя из них вид списка в окне браузера. Ниже представлен пример HTML-документа, использующий маркированный список для представления знаков зодиаков.

<!—пример маркированного списка знаков зодиаков -->
<html>
<head>
<title>Пример маркированного списка знаков зодиаков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
<p>Знаки зодиаков:
<ul>
<li>Овен
<li>Телец
<li>Близнецы
<li>Рак
</ul>
</body>
</html>

Рис. 2.1. Пример маркированного списка

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

Тег <ul> имеет необязательный параметр type, позволяющий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки (некоторые браузеры используют другие маркеры по умолчанию). Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:

disk – закрашенные кружки;
circle – незакрашенные кружки;
square – закрашенные квадратики.

Например, если в записанном выше примере переписать тег <ul> в виде

<ul type=square>

то получим следующий вид списка (рис. 2.2):

Рис. 2.2. Маркированный список с параметром type=square

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

<html>
<head>
<title>Пример вложенных списков</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
<ul>
<b>Список сотрудников</b>
<li>Иванов Иван Иванович
<ul>
<li>Возраст: 22
<li>Место работы: УлГТУ
<li>Образование: высшее
</ul>
<li>Петров Петр Петрович
<ul>
<li>Возраст: 27
<li>Место работы: УлГУ
<li>Образование: высшее
</ul>
</ul>
</body>
</html>

Рис. 2.3. Пример вложенных списков

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

sernam.ru

Лучшие статьи читаем:

Виды списков Текст поверх картинки html Ширина ячейки таблицы html Что такое списки