Виды маркированных списков в html. Маркированный список в HTML

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

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

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

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

В приложении Word можно автоматически создавать маркированные и нумерованные списки при вводе либо можно быстро добавить маркеры или нумерацию к существующим строкам текста.

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

Введите знак * (звездочка), чтобы начать маркированный список, или 1. , чтобы начать нумерованный список, а затем нажмите клавишу ПРОБЕЛ или TAB.

Введите текст.

Нажмите клавишу ВВОД, чтобы добавить следующий элемент списка.

В приложении Word будет автоматически вставлен следующий маркер или номер.

Чтобы завершить ввод списка, дважды нажмите клавишу ВВОД. Чтобы удалить последний маркер или номер в списке, нажмите клавишу BACKSPACE.

Действия в ситуации, когда маркеры или числа не проставляются автоматически

Откройте вкладку Файл и нажмите кнопку Параметры .

Нажмите кнопку Параметры автозамены и откройте вкладку Автоформат при вводе .

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

Добавление маркеров и нумерации в список

Выделите элементы, к которым необходимо добавить маркеры или нумерацию.

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

Нумерация

Примечания

Различные стили маркеров и форматы нумерации можно найти, щелкнув стрелку рядом с полями Маркеры или Нумерация на вкладке Главная в группе Абзац .

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

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

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

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

7. Параметры форматирования списков.

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

 списки с нумерацией;

 списки с пометками.

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

Для создания списка нужно выбрать те абзацы, которые Вы хотите сделать элементами списка, или установить курсор ввода в тот абзац, с которого будет начинаться список. Затем выполните команду Список из меню Формат .

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

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

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

Что такое маркированный список? Это специальный список, который не содержит в себе каких-либо упорядоченных действий, но тем не менее содержит схожие по смыслу элементы. И выделяются такие списочки какими либо значками, например маркерами, дефисами и т.д. Вот у меня на блоге они у меня представлены в виде указательного пальца и использую я его, когда перечисляю что-либо. Давайте посмотрим не примере.

Компьютерные комплектующие:

Материнская плата
Оперативная память
Жесткий диск
Видеокарта
И т.д.

Давайте теперь посмотрим как это всё воспроизвести в html

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

- — list item (пункт списка). В эти теги заключается каждый элемент списка.
На деле процедура создания маркированного списка очень легкая и я покажу вам на примере:
- Peugeot
- Opel
При сохранении документа и открытии его в браузере, список будет выглядеть следующим образом. Посмотрите сами, попробуйте.

Атрибуты

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

Атрибут type ставится для того, чтобы изменить вид маркера, но как я и говорил в сегодняшних реалиях его уже не принято ставить, хотя он всё равно является рабочим.
- - - Попробуйте сами посмотреть, как это работает и вы увидите все изменения.
      
      Вложенный список
      
      Бывают моменты, когда единым списком сыт не будешь и тогда нам просто необходимо сделать вложенный список, чтобы всё правильно распределить. Давайте возьмем наш пример с машинами. В предыдущих примерах я делал просто список автомобилей, а теперь в каждую марку положим еще по несколько моделей.
      
      Сделать это абсолютно несложно, просто в тот тег
    - , который мы хотим расширить добавляем новый контейнер списка
      - между которыми и будут написаны модели автомобилей. Все понятно? Если нет, то смотрим, как это выглядит в коде.
        
        Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.
        
        Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.
        
        Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.
        
        С уважением, Дмитрий Костин.
        
        Маркированные списки позволяют разбить большой текст на отдельные блоки, каждый из которых начинается с маркера - обычно в его качестве выступает небольшая точка. Это привлекает внимание читателя к тексту и повышает его читабельность.
        С элементом
        связаны следующие особенности:
        в том месте, где встречается
        , браузер автоматически добавляет перенос строки;
        у списка имеются отступы сверху и снизу;
        маркеры по умолчанию отображаются в виде закрашенного кружка;
        каждый элемент списка сдвигается вправо по отношению к основному тексту.
        
        На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.
        Рис. 1. Вид маркированного списка
        Вид маркера
        Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:
        disc - маркеры в виде закрашенного кружка;
        circle - маркеры в виде незакрашенного кружка;
        square - квадратные маркеры.
        
        Пример 1. Изменение вида маркера
        Списки
        
        Сепульки
        
        Сепулькарии
        
        Сепуление
        
        В примере показано создание маркированного списка, где в качестве значка маркера используется небольшой однотонный квадрат. Хотя количество значений ограничено тремя, это не значит, что в нашем распоряжении всего три вида маркера. Существует множество спецсимволов, которые с успехом могут выступать в качестве значка маркера. «Прикрутить» их непосредственно к
        не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
        добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.
        Пример 2. Использование::before
        Списки
        
        Сепульки
        
        Сепулькарии
        
        Сепуление
        
        Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.
        Рис. 2. Произвольные маркеры в списке
        Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).
        Рис. 3. Выбор символа в LibreOffice
        Список с рисованными маркерами
        Стили позволяют установить в качестве маркера любое подходящее изображение через свойство list-style-image . В качестве значения используется относительный или абсолютный путь к графическому файлу, как показано в примере 3.
        Пример 3. Использование изображения в качестве маркера
        Списки
        
        Сепульки
        
        Сепулькарии
        
        Сепуление
        
        Рисунок лучше всего выбирать небольшого размера, чтобы не превращать элементы списка в подрисуночные подписи. На рис. 4 показан результат действия примера по использованию в качестве маркеров небольших картинок.
        Рис. 4. Рисунок в качестве маркера
        Применение list-style-image обладает некоторыми недостатками:
        рисунок нельзя сдвинуть вверх или вниз;
        в разных браузерах положение рисунка относительно текста может отличаться.
        
        Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка
        мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через 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. Изменение положения маркеров
        Списки
        
        Перед началом работы проверьте наличие оборудования, входящего в комплект 3BM.
        
        При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ.
        
        После осмотра визуальными методами своего рабочего места можно осторожно включить питание 3BM.
        
        Результат данного примера показан на рис. 6.
        
        Сегодня любой человек должен иметь навыки работы с компьютером и владеть хотя бы минимальным набором программ. К стандартным и наиболее популярным можно отнести Microsoft Word. Работая в Word, пользователи сталкиваются с необходимостью выделять для наглядности определенные диапазоны текста. Очень часто в документ необходимо вставить перечень. Это может быть маркированный список или нумерованный - пользователь имеет возможность ориентироваться по ситуации.
        Программа позволяет создавать любые документы, письма и проекты, используя широкие возможности для Чтобы изучить все функции Microsoft Word, нужно потратить время, но результат того стоит.
        Списки необходимы для того, чтобы сделать текст понятным и выразительным. Нумерованный и маркированный список одного уровня применяется в большинстве документов. В диссертациях и научных работах используется многоуровневый список.
        Нумерация и маркеры
        В первую очередь необходимо выделить абзацы, которые должны быть оформлены как список. Это можно сделать с помощью мыши или просто установить курсор в начало той строки, с которой будет начинаться список.
        В MS Word существует вкладка «Главная», в которой в группе «Абзац» можно выбрать необходимую вставку. Пользователь нажимает кнопки «Нумерация» или «Маркеры», затем с помощью линейки выставляет отступы. Этот способ очень прост и понятен, но неопытный пользователь может столкнуться со скрытыми сложностями. Вставляя маркированные и нумерованные списки повторно, отступы придется редактировать заново.
        В том случае, когда требуется форматировать каждый список в отдельности и изменять параметры шрифта, не каждый пользователь программы сможет сделать текст корректным, к тому же на это нужно будет потратить много времени и сил.
        Списки с нумерацией
        Каждый элемент списка выделяется цифрой, нумерация автоматически корректируется. Чтобы создавать и редактировать списки, существует кнопка «Нумерация» в группе «Абзац». Также можно воспользоваться функцией «Нумерация» контекстного меню выбранного абзаца.
        Параметры списка:
        Формат номера определяет, какой символ будет находиться возле каждого элемента.
        Стиль нумерации можно выбирать в зависимости от особенностей конкретного документа: арабские или римские цифры, прописные или и т. д.
        Поле «Начальное значение» позволяет выбрать цифру, с которой будет начинаться список.
        В том случае, когда необходимо создать аналогичный список, но пронумеровать его заново, удобно воспользоваться функцией «Начать новый список». Нужно выделить элементы и задать все параметры.
        
        Вставлять нумерованный список можно автоматически. Для этого необходимо выполнить следующие действия:
        В начале абзаца, перед вводом текста, нужно поставить "1.", затем «Пробел» или Tab. Абзац оформится как первый пункт списка.
        Поставив перед абзацем "1)", а затем нажав «Пробел» или Tab, пользователь создаст список другого типа.
        По аналогии оформляются списки с буквами. В строках нужно ввести с точкой или скобкой. После каждого абзаца необходимо нажимать «Пробел» или Tab.
        
        Создание маркированного списка в автоматическом режиме
        Вставить маркированный список в «Ворде» можно следующим образом:
        В начале абзаца необходимо ввести звездочку или знак «больше», а затем нажать «Пробел» или Tab.
        Автоматически создать маркированный список. Можно включить его, перейдя во вкладку «Файл» и выбрав группу «Параметры». Во вкладке «Правописание» нужно выбрать «Параметры автозамены». В разделе «Автоформат» необходимо установить флажки напротив стилей.
        
        Можно создать маркированный список следующих типов:
        Многоуровневый список
        Маркированные и нумерованные списки являются элементами Их стоит настроить так, как нужно пользователю в конкретном случае. Структуру можно редактировать с помощью функции «Определить многоуровневый список». Проверять, как отображаются все перечни, удобно в группе «Списки в документах». Чтобы изменить параметры шрифта каждого в отдельности, многоуровневый список связывается со стилями абзаца.
        Ключевые параметры настройки многоуровневого списка
        Настраивая перечень, который состоит из нескольких уровней, необходимо обратить внимание на следующие параметры:
        Выбор уровня и пример его оформления.
        Определение параметров настройки шрифта, при необходимости можно задать постоянную часть номера.
        Выбор типа нумерации: символ, рисунок, буквы и прочие варианты.
        Определение уровня, на котором обновляется нумерация.
        Определение отступов и расположения текста.
        Дополнительные возможности для редактирования.
        Соответствие стиля абзаца и многоуровневого списка.
        
        Настройки, которые были созданы однажды, в автоматическом режиме можно применить к последующим спискам. Но если возникнет необходимость в редактировании, придется работать с каждым списком в отдельности. Это неудобство может показаться незначительным, но если перечней в тексте большое количество, на форматирование уйдет много времени.
        Как изменить стиль маркера?
        Нажав на кнопку «Маркеры», можно выбрать тот вариант, который подходит в данном случае. Для этого нужно перейти в область «Библиотека» и кликнуть на ней. Аналогично выбирается и тип нумерации: в области «Библиотека нумерации».
        Для того чтобы превратить нумерованный или маркированный список в Word в текст, достаточно просто отжать соответствующую кнопку.
        Каждый элемент текста может выделяться специальным маркером. Чтобы форматировать список согласно требованиям конкретного документа, необходимо выбрать команду «Определить новый маркер».
        После освоения всех возможностей программы Microsoft Word работа с документами будет приносить удовольствие, к тому же не придется тратить много времени на форматирование текста. Маркированный список, как и нумерованный, входит практически в любой документ и часто применяется, поэтому пользователю программы будет полезно ознакомиться с созданием перечней различного вида.
        
        Одним из типов списков, реализованных в языке HTML, является маркированный список. Иначе списки такого типа называют ненумерованными или неупорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тега
        , с помощью которого и организуются списки такого типа в HTML-документах (UL - Unordered List, неупорядоченный список).
        
        В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка (часто их называют буллетами, что является формальным озвучением английского термина bullet - пуля). Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.
        Теги
        и
        
        Для создания маркированного списка необходимо использовать тег-контейнер , внутри которого располагаются все элементы списка. Открывающий и закрывающий теги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа, поэтому здесь нет необходимости использовать теги абзаца
        
        .
        Каждый элемент списка должен начинаться тегом
        (LI - List Item, элемент списка). Тег
        не нуждается в соответствующем закрывающем теге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
        Приведенных сведений достаточно для построения элементарного маркированного списка. Приведем пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 2.1.
        Пример маркированного списка
        Знаки зодиака:
        Овен
        Телец
        Близнецы
        Дева
        Весы
        Скорпион
        Стрелец
        К озерог
        Водолей
        Рыбы
        
        Рис. 2.1. Отображение браузером маркированного списка
        Заметим, что кроме элементов списка, отмечаемых тегом
        , могут присутствовать и другие HTML-элементы. В приведенном выше примере одним из таких элементов является обычный текст, не являющийся пунктом списка, а играющий роль его заголовка.
        Примечание
        В некоторых учебниках по языку HTML встречается указание, что для задания заголовка списка следует применять тег-контейнер (LH - List Header, заголовок списка). В настоящее время этот тег не распознается ни одним из распространенных браузеров и не входит в спецификацию HTML. Таким образом, его применение становится бессмысленным, хотя и не приведет к каким-либо ошибкам.
        В теге
        могут быть указаны два параметра: COMPACT и TYPE.
        Параметр COMPACT записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде. Например, может быть уменьшен шрифт или расстояние между строчками списка и т. д.
        Примечание
        В настоящее время наличие параметра COMPACT в теге
        никак не влияет на отображение списков ведущими браузерами. Поэтому применение данного параметра бессмысленно, тем более что его употребление не рекомендуется спецификацией HTML 4.0 .
        Параметр TYPE может принимать следующие значения: disc, circle и square. Этот параметр используется для принудительного задания вида маркеров списка. Конкретный вид маркера будет зависеть от используемого браузера. Типичными вариантами отображения являются следующие:
        TYPE = disc - маркеры отображаются закрашенными кружками; TYPE = circle - маркеры отображаются не закрашенными кружками; TYPE = square - маркеры отображаются закрашенными квадратиками. Пример записи:
        .
        Значением, используемым по умолчанию, является TYPE = disc. Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором - circle, на третьем и далее - square. Именно так делается в последних версиях браузеров Netscape и Internet Explorer. Заметим, что иные браузеры могут иначе отображать маркеры. Например, в спецификации HTML 4.0 для вида маркера, отображаемого при значении TYPE = square, указывается незакрашенный квадратик (square outline).
        Параметр TYPE с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в теге элемента списка
        .
        Пример записи:
        .
        Примечание
        Браузеры по-разному интерпретируют указание вида маркера для отдельного элемента списка. Браузер Netscape изменяет вид маркера для данного и всех последующих, пока не встретится очередное переопределение вида маркера. Браузер Internet Explorer изменяет вид маркера только для данного элемента.
        Графические маркеры списка
        
        В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.
        Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тег списка
        (как, впрочем, и теги списков других типов, рассматриваемых ниже) выполняет единственную задачу - указывает браузеру, что вся информация, располагаемая после данного тега должна отображаться со сдвигом вправо (отступом) на некоторую величину. Теги
        , указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.
        Если же нам требуется построить список с графическими маркерами, то можно вообще обойтись без тегов
        . Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать теги абзаца
        Или принудительного перевода строки
        . Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 2.2, показан ниже:
        который будет передан только один раз. Размеры файла, содержащего маленькое изображение, также крайне незначительны.
        Примечание
        Методы создания списков с графическими маркерами обсуждаются в свою очередь в главе 8.