Маркированный и нумерованный список в программе Word пакета Microsoft Office создается очень легко. Более того, программа распознает введение некоторых символов, и нумерованный или маркированный список начинает создаваться автоматически.
Создавая и редактируя текстовые документы, часто приходится составлять новые списки или придавать списочный вид готовому тексту. Какой список использовать в каждом конкретном случае решать автору текста, обычно нумерованный список применяется в тех случаях, когда важна определенная последовательность составных частей списка. Если же имеем дело с простым перечислением, без определенного порядка, то можно обойтись маркированным списком.
Инструменты для создания различных списков находятся во вкладке «Главная» в разделе «Абзац». В MS Word есть возможность создания разных видов списков.
Для создания маркированного списка нужно нажать на кнопку «маркеры» в вышеназванном меню, при этом не имеет значения, где в этот момент расположен курсор, в начале строки или в ее середине. В любом случае маркером будет отмечен весь абзац, в котором располагался курсор в это время.
При нажатии стрелочки справа от кнопки «маркеры» появляется выпадающее меню, в котором отображаются последние использованные маркеры, библиотека маркеров и маркеры, используемые в документах по умолчанию. Определение нового маркера возможно здесь же. Под этим понимается выравнивание маркера и знак маркера, в качестве которого можно использовать символы и различные рисунки (при необходимости нужные маркеры можно загрузить из разных источников).
Для создания нумерованного списка предназначена следующая кнопка «Нумерация» блока инструментов создания списков. Работает эта кнопка также как и кнопка «Маркер», достаточно установить курсор в нужном месте текста или в начале нового абзаца.
Определение формата номера списка делается точно также как и для маркеров, то есть нажатием стрелочки справа от значка «Нумерация». В библиотеке нумерации представлены нумерация арабскими и римскими цифрами, а также буквенная нумерация. Изменить формат нумерации, здесь возможно только изменяя параметры шрифта.
Если маркированный или нумерованный список уже создан, то в окне «Определение формата …» появляется возможность изменить его уровень, так как становится активной соответствующая кнопка в выпадающем меню. Для создания многоуровневого списка предназначена третья кнопка меню списков, при нажатии на которую, выпадает меню с различными стилями многоуровневых списков. Задать определенный уровень списка можно следующим способом: установить курсор в нужную строку и в выпадающем меню и нажать на «Изменить уровень списка». Среди появившихся вариантов нужно выбрать требуемый, и кликнуть по нему мышкой.
Если создается список из уже готового текста, то этот текст необходимо выделить и нажать на кнопку «Маркеры» или «Нумерация». Здесь нужно помнить, что нумерация или маркировка будет произведена по отдельным абзацам.
Каждый, пробовавший набирать текст в MSWord, наверное замечал, что если в начале нового абзаца вставить звездочку * или знак единицы с точкой 1., то программа автоматически создает маркированный или нумерованный список. Так в программе реализовано автоматическое создание списка.
Таким образом, в программе Word Office имеется возможность создания маркированных и нумерованных списков, а также многоуровневых списков. Создание списков при помощи специальных инструментов, а не вручную, позволяет сохранить форматирование текста, которое иногда нарушается при открытии файла в других версиях тестового редактора.
В языке разметки html различают 3 вида списков - упорядоченные (нумерованные), неупорядоченные (ненумерованные) и списки определений (definition list).
Для построения такого списка нужны 2 вида элементов: ‘ul’ (сокращение от unordered list, т.е. неупорядоченный список) и ‘li’ (элемент списка). Все, что написано внутри ‘li’, помечается маркером.
Внешним видом такого списка можно управлять, задавая типы маркеров.
Есть специальный атрибут type, который ставится в обоих элементах списка. Это тип вашего маркера. Всего 3 типа: окружность, диск и квадрат:
В зависимости от того, где указать тип маркера, можно поменять его у всего списка или у конкретного элемента.
Для построения списка также нужно 2 элемента: ‘ol’ и ‘li’ (элемент списка). Маркеры заменяются на цифры с точкой. Пример простого списка:
Внешним видом упорядоченного списка можно управлять, задавая разные типы нумерации.
Есть специальный атрибут type, который ставится в элементе ‘ol’ или ‘li’. Это тип вашего списка. Всего 5 типов:
В зависимости от того, где указать тип нумерации, можно поменять ее у всего списка или у конкретного элемента.
Список определений был разработан для словарных статей.
Есть общий контейнер ‘dl’. Внутри него стоят ‘dt’ (definition termin - термин) и ‘dd’ (definition description - описание). Простейший пример:
Все элементы всех списков - блочные. Но внутри элемента ‘dt’ можно ставить только строчные элементы. В элементы ‘dd’ и ‘li’ можно ставить все, что угодно. Отсюда появляются вложенные списки.
Это многоуровневые списки, внутри которых есть иерархия. Часто такие списки применяются при построении карты сайта. Пример:
Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.
Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.
Что такое маркированный список? Это специальный список, который не содержит в себе каких-либо упорядоченных действий, но тем не менее содержит схожие по смыслу элементы. И выделяются такие списочки какими либо значками, например маркерами, дефисами и т.д. Вот у меня на блоге они у меня представлены в виде указательного пальца и использую я его, когда перечисляю что-либо. Давайте посмотрим не примере.
Компьютерные комплектующие:
Давайте теперь посмотрим как это всё воспроизвести в html
Чтобы делать такие списки, нам нужно будет использовать два парных .
На деле процедура создания маркированного списка очень легкая и я покажу вам на примере:
При сохранении документа и открытии его в браузере, список будет выглядеть следующим образом. Посмотрите сами, попробуйте.
Ну и конечно я не могу не рассказать вам про , относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.
Атрибут type ставится для того, чтобы изменить вид маркера, но как я и говорил в сегодняшних реалиях его уже не принято ставить, хотя он всё равно является рабочим.
Попробуйте сами посмотреть, как это работает и вы увидите все изменения.
Бывают моменты, когда единым списком сыт не будешь и тогда нам просто необходимо сделать вложенный список, чтобы всё правильно распределить. Давайте возьмем наш пример с машинами. В предыдущих примерах я делал просто список автомобилей, а теперь в каждую марку положим еще по несколько моделей.
Сделать это абсолютно несложно, просто в тот тег
Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.
Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.
Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.
С уважением, Дмитрий Костин.
Доброго времени суток!
В этой статье вы узнаете о всех возможностях списков, поймете как сделать нумерованный список, освоите теги, которые помогут сделать из простого маркированного списка более интересный и заметный с произвольными маркерами. После прохождения урока у вас придет понимание того, где применяются списки и при каких обстоятельствах их можно использовать.
Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:
Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.
В каждой части статьи создание тех или иных списков будет сопровождаться подробными пояснениями по вставке того или иного списка.
Данный вид списков используется для перечисления в тексте набора похожих по значению элементов. Это может быть перечисление ссылок, которые связаны одной тематикой, подробное объяснение для отдельных частей текста. Но давайте посмотрим как в коде выглядит маркированные списки:
А вот так выглядит в браузере:
Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузереНа изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:
Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:
| <html > <head > <title > Пример маркированного списка с маркером в виде пустого круга</ title > </ head > <body > <p > Звезды:</ p > <ul type = "circle" > <li > Сириус</ li > <li > Арктур</ li > <li > Поллукс</ li > <li > Бетельгейзе</ li > <li > Солнце</ li > </ ul > </ body > </ html > |
Сразу смотрим как этот код будет выглядеть в браузере:
Рис. 1.2. Вид маркера для списка в виде окружности в браузереПосмотрим также и последний пример с квадратным маркером для HTML списка:
Обратите внимание на маркер, он стал квадратным:
Рис. 1.3. Вид маркера для списка в виде квадрата в браузереВажное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.
Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 (""), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .
Ошибка будет следующая:
Рис. 1.4. Ошибка на валидаторе при использовании атрибута "type" у спискаС маркированными списками разобрались. Сейчас перейдем к нумерованным, а затем рассмотрим вложенные списки и несколько готовых примеров, которые используются чаще всего на реальных сайтах.
В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега . Как это выглядит на практике:
Пример нумерованного списка:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <head > <title > Пример стандартного нумерованного списка</ title > </ head > <body > <p > От одного до пяти:</ p > <ol > <li > Первый</ li > <li > Второй</ li > <li > Третий</ li > <li > Четвертый</ li > <li > Пятый</ li > </ ol > </ body > </ html > |
Таким образом выглядит нумерованный список со стандартными настройками в браузере:
Рис. 2.1. Нумерованный список в браузере со стандартными настройкамиКак и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.
Здесь у нас есть выбор не из трех видов маркеров, а из пяти:
| Название маркера | Значение атрибута "type" | Пример списка |
|---|---|---|
| Маркеры в виде арабских чисел | 1 |
|
| Маркеры в виде строчных латинских букв | a |
|
| Маркеры в виде заглавных латинских букв | A |
|
| Маркеры в виде римских цифр в нижнем регистре | i |
|
| Маркеры в виде римских цифр в верхнем регистре | I |
|
Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start" . Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <head > <title > Произвольная нумерация для нумерованного списка</ title > </ head > <body > <p > Начинаем нумерацию с двенадцати:</ p > <ol type = "a" start = "12" > <li > Двенадцать</ li > <li > Тринадцать</ li > <li > Четырнадцать</ li > <li > Пятнадцать</ li > <li > Шестнадцать</ li > </ ol > </ body > </ html > |
Вот как это будет отображаться на реальном сайте:
Рис. 2.2. Нумерация с произвольного числа в нумерованном спискеНа изображении выше мы пронумеровали список начиная с двенадцати, при этом сделали маркеры в виде строчных латинских букв. Сейчас, я думаю, стало понятно как использовать данные атрибуты в своих проектах.
Ну а сейчас перейдем к вложенным спискам HTML.
Многоуровневые списки используются на сайте в построении меню. Это меню чаще всего выглядит выпадающим либо вниз (урок по ), либо выпадающим влево или вправо. Такие меню позволяют хранить в себе другие элементы меню в компактном виде.
На примере моделей автомобилей мы построим многоуровневый список в HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html > <head > <title > Вложенный маркированный список HTML</ title > </ head > <body > <ul > <li > Citroen <ul > <li > Berlingo</ li > <li > C1</ li > <li > C2</ li > <li > C3 Picasso</ li > <li > C4 Grand Picasso</ li > </ ul > </ li > <li > KIA</ li > <li > Toyota</ li > <li > Audi</ li > <li > Lexus</ li > </ ul > </ body > </ html > |
Обратите внимание, как выглядит многоуровневый список в браузере:
Рис. 3.1. Пример многоуровневого списка в HTMLМы делали многоуровневый список с помощью маркированного (тег
Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:
| 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. Пример многоуровневого нумерованного списка в маркированный список в браузереЗдесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).
Сделать список HTML в строку может понадобиться при создании горизонтального меню. Сделать его очень просто:
За это отвечает свойство list-style-type в CSS (подробнее ):
Элемент списка — это блочный элемент, поэтому по центру его необходимо выравнивать с помощью внешних отступов. Но есть один важный момент — мы должны явно указать ширину, чтобы выравнивание сработало:
Достаточно лишь одного свойства CSS list-style-image . Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:
В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome ). Тогда можно сделать любую иконку вместо стандартного маркера:
Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:
На видео ниже вы можете увидеть всю работу со списками HTML на практике:
- 4.5 out of 5 based on 2 votes
Очень часто определенную информацию на сайте необходимо представить в виде списков.
Списки позволяют упорядочить и систематизировать различную информацию и представить ее для посетителя в удобном виде.
Списки в HTML могут быть трех разновидностей: маркированные списки, нумерованные списки и списки определений. Рассмотрим, как их создавать по порядку.
Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов
Код маркированного списка будет выглядеть так:
Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:
Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега
Значение disc используется по умолчанию.
Пример создания маркированного списка с маркерами в виде окружности:
В результате список примет, следующий вид:
Создание маркированного списка с маркерами в виде квадратиков:
Список будет иметь вид:
Атрибут type можно применять не только к тегу
В результате получится следующее:
Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега
Выглядит такой список следующим образом:
По умолчанию нумерация производится арабскими цифрами. Но у тега
Ниже приведены сокращенные варианты кода, и вид нумерации который может быть в том или ином случае.
Вид списка:
Вид списка:
Нумерация строчными буквами латинского алфавита:
Вид списка:
Вид списка:
Вид списка:
Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов
Записывается данный список следующим образом:
В результате получится следующий список:
Как вы можете видеть, при этом создаются соответствующие отступы для термина и текста определения.
Иногда необходимо в один элемент определенного вида списка вложить другой список. В HTML есть возможность неограниченно влаживать одни списки в элементы других списков.
Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.
