Списки

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

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

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

Атрибут start

Атрибут start определяет номер, с которого должен начинаться нумерованный список. По умолчанию списки начинаются с 1, однако могут возникнуть ситуации, когда список должен начинаться с 30 или с другого числа. Когда мы используем атрибут start для элемента <ol>, то можем точно определить, с какого номера должен начинаться отсчёт нумерованного списка.

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

Атрибут reversed

Атрибут reversed при добавлении к элементу <ol> позволяет списку отображаться в обратном порядке. Список из пяти пунктов пронумерованных от 1 до 5 может быть задан обратно и нумероваться от 5 до 1.

Атрибут reversed является логическим атрибутом и как таковой он не принимает никакого значения. Он может быть истиной, либо ложью. Ложь является значением по умолчанию, значение становится истинным, когда атрибут reversed появляется у элемента <ol>.

Атрибут value

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

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

Урок 8Списки HTML

Содержание урока

Списки HTML

Списки HTML

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

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

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

Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега <ol> нужно задать атрибут start и дать ему значение 5.

* С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги, входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.

По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега <ol> атрибут type, которому можно задавать значения 1, A, a, I, i.

1 - 1, 2, 3, 4... (задается по умолчанию)
A - A, B, C, D... 
a - a, b, c, d... 
I - I, II, III, IV... 
i - i, ii, iii, iv...

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

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

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

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

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

disc — ● (задается по умолчанию)

circle — ○

square — ■

Теперь давайте создадим список используя для маркировки черные квадратики (square).

Многоуровневый список html.

Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.

Каждый отдельный элемент списка находиться между тегами

и

Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один списокБез наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список, открывающийся тегом <ol> и закрывающийся тегом </ol>. Первый элемент нашего нумерованного списка открывается тегом <li>, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом </li>, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом </li>. Затем уже идут следующие элементы нашего основного нумерованного списка.

Список определений.

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

Список определений открывается тегом <dl> и закрывается тегом </dl>. Каждый отдельный термин заключается между <dt> и </dt>. Далее пишется определение к термину, оно находится между тегами <dd> и </dd>.

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

Сохраняем изменения и смотрим результат в браузере:

* Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.

Следующая страница Списки HTML.mp4

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Маркированный список</title>
</head>
<body>
<p>Текст до списка.</p>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
<p>Текст после списка.</p>
</body>
</html>

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

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

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

Внутри <li> не обязательно размещать только текст, это могут быть и другие элементы, вроде абзацев <p>.

<li>
<p>Айвенго</p>
<p>Локсли</p>
</li>

Кроме того, один список <ul> можно вкладывать в другой, опять же, внутрь <li> (пример 2).

Пример 2. Вложенные списки

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Маркированный список</title>
</head>
<body>
<p>Романы Майн Рида</p>
<ul>
<li>В
<ul>
<li>В поисках белого бизона</li>
<li>Всадник без головы</li>
</ul>
</li>
<li>Ж
<ul>
<li>Жена-девочка</li>
</ul>
</li>
<li>О
<ul>
<li>Охотники за растениями</li>
<li>Оцеола, вождь семинолов</li>
</ul>
</li>
</ul>
</body>
</html>

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

Рис. 2. Вложенные списки

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

Способ №2: Нумерованный список для нескольких столбцов

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

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

1. В нумерованном списке видно, что маркер продублировал цифровое значение «1» по всем строкам. Что делать в этом случае? Для этого в правом нижнем углу можно найти инструмент «Параметры автозаполнения». Кликнув по пиктограмме в углу блока, откроется выпадающий список, где нужно выбрать «Заполнить».

1. В результате нумерованный список заполнится автоматически правильным набором цифр.

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

1. Впишите в первые две ячейки столбца цифры 1 и 2 соответственно.
2. Маркером заполнения выделите все ячейки и произойдет автоматическое заполнение оставшихся строк.

Также ту же самую работу можно выполнить используя функцию автозаполнения: =СТРОКА(). Рассмотрим пример заполнения строк нумерованным списком используя функцию:

1. Активируйте верхнюю ячейку, откуда будет начинаться нумерованный список.
2. В строке формул поставьте знак равенства «=» и пропишите самостоятельно функцию «СТРОКА» или найдите ее в инструменте «Вставить функцию».
3. В конце формулы установите открывающиеся и закрывающиеся скобки для автоматического определения строки.

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

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

Чтобы создать нумерованный список используйте теги <ol> и <li>. Тег ol — это контейнер нумерованного списка. Тег li — элемент списка.

1. Выучить HTML
2. Добавить CSS
3. Освоить JavaScript

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

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type. Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

type=»I» Первый Второй Третий

type=»i» Первый Второй Третий

type=»1″ Первый Второй Третий

type=»A» Первый Второй Третий

type=»a» Первый Второй Третий

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

Списки

Последнее обновление: 08.04.2016

Для создания списков в HTML5 применяются элементы (нумерованный список) и (ненумерованный список):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Списки в HTML5</title>
	</head>
	<body>
		<h2>Нумерованный список</h2>
		<ol>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ol>
		<h2>Ненумерованный список</h2>
		<ul>
			<li>iPhone 6S</li>
			<li>Galaxy S7</li>
			<li>Nexus 5X</li>
			<li>Lumia 950</li>
		</ul>
	</body>
</html>

В нумерованном списке для нумерации элементов по умолчанию используется стандартные цифры от 1. В ненумерованном списке каждый элемент предваряется черной точкой.

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

• : десятичные числа, отсчет идет от 1

• : десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99

• : строчные римские цифры, например, i, ii, iii, iv, v

• : заглавные римские цифры, например, I, II, III, IV, V…

• : строчные римские буквы, например, a, b, c…, z

• : заглавные римские буквы, например, A, B, C, … Z

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

<h2>list-style-type = decimal</h2>
<ol style="list-style-type:decimal;" start="3">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ol>
<h2>list-style-type = upper-roman</h2>
<ul style="list-style-type:upper-roman;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = lower-alpha</h2>
<ul style="list-style-type:lower-alpha;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ul>

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

• : черный диск

• : пустой кружочек

• : черный квадратик

Например:

<h2>list-style-type = disc</h2>
<ul style="list-style-type:disc;">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>
<h2>list-style-type = circle</h2>
<ul style="list-style-type:circle;">
	<li>iPhone 6S Plus</li>
	<li>Galaxy S7 Edge</li>
	<li>Nexus 6P</li>
	<li>Lumia 950 XL</li>
</ul>
<h2>list-style-type = square</h2>
<ul style="list-style-type:square;">
	<li>LG G 5</li>
	<li>Huawei P8</li>
	<li>Asus ZenFone 2</li>
</ul>

Еще одну интересную возможность по настройке списков предоставляет стиль list-style-image. Он задает изображение, которое будет
отображаться рядом с элементом списка:

<ul style="list-style-image:url(phone_touch.png);">
	<li>iPhone 6S</li>
	<li>Galaxy S7</li>
	<li>Nexus 5X</li>
	<li>Lumia 950</li>
</ul>

Стиль в качестве значения принимает , где «phone_touch.png» — это название файла изображения.
То есть в данном случае предполагается, что в одной папке с веб-страницей index.html у меня находится файл изображения phone_touch.png.

Горизонтальный список

Одним из распространенных способов стилизации списков представляет создание горизонтального списка. Для этого для всех элементов списка надо
установить стиль :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Горизонтальный список в HTML5</title>
		<style>
			ul#menu li {
				display:inline;
			}
		</style>
    </head>
    <body>
        <ul id="menu">
			<li>Главная</li>
			<li>Блог</li>
			<li>Форум</li>
			<li>О сайте</li>
		</ul>
    </body>
</html>

НазадВперед

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

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

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

, но уже с текстом: «». Показывает то, как мы можем изменить порядок нумерации HTML списка при помощи атрибуты reversed :

И третья часть примера хорошо демонстрирует, :

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

Список определений в HTML. HTML атрибуты списков определений

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

Список определений создается при помощи специального HTML тэга

Виды маркеров

Виды маркеров нумерованного списка можно изменить с помощью атрибута . Данный атрибут поддерживает пять видов маркеров:

Значение	Описание
1	Десятичные числа (1, 2, 3..)
a	Список в алфавитном порядке, строчные буквы (a, b, c..)
A	Список в алфавитном порядке, заглавные буквы (A, B, C..)
i	Римские цифры, строчные (i, ii, iii, iv..)
I	Римские цифры, заглавные (I, II, III, IV..)

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

Изменение маркеров у списков:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>	
  <body>

    <h4>Нумерованный список c атрибутом type="a":</h4>
    <ol type="a">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>

    <h4>Нумерованный список c атрибутом type="I":</h4>
    <ol type="I">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ol>
	
	<h4>Виды маркеров маркированных списков:</h4>
	
    <ul style="list-style-type: circle;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>
	
	<ul style="list-style-type: square;">
      <li>Яблоки</li><li>Бананы</li><li>Лимоны</li>
    </ul>

  </body>
</html>

Попробовать »

CSS свойство , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

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

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

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

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

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

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

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

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

Интернет

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

Сайт

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

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

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

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

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

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

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

<html>
  <body>

    <h4>Нумерованный список:</h4>
    <ol>
      <li>Кофе</li>
      <li>Чай</li>
      <li>Молоко</li>
    </ol>

  </body>
</html>

Попробовать »

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

Как сделать списки в Ворде

Итак, как сделать списки в Ворде? Чтобы их успешно создать, будем придерживаться простой инструкции:

• пишете текст в Ворде;
• далее, наводите курсор компьютерной мыши перед любым словом в тексте;
• нажимаете на раздел «Главная» и выбираете виды списков левой кнопки мыши чуть ниже раздела «Рецензирование». Или через меню правой кнопки мыши;
• после этого появятся нужные Вам списки, которые можно установить.

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

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

В первую очередь создадим маркированный список. Открываете документ Word с текстом. Далее, нажимаете один раз перед текстом левой кнопкой мыши. Например, в начале предложения. И выбираете правой кнопкой мыши «Маркированный список» (Скрин 1).

На панели управления Ворд он отображается первым из других списков. После его нажатия Вы увидите в тексте точки перед словами (Скрин  2).

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

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

Текст можно изменить в список без использования списков Word. Если у Вас слова написаны в документе сплошным текстом, их можно разделить. Для этого нажимаете один раз мышкой перед словом, которого нужно опустить (Скрин 3).

Далее, жмёте кнопку «Enter» на клавиатуре, чтобы слово опустилось вниз и превратилось в список. Также Вы можете вручную проставить цифры в начале слова или английские буквы.

Как поменять стиль маркированного списка (внешний вид)

Маркированный список можно изменить на другой вид. Чтобы это сделать, нужно выделить текст с маркированным списком. Далее, нажмите на него вверху панели управления списков и выберите подходящий вид списка (Скрин 4).

Там есть разные виды маркированного списка:

1. Список в виде галочки.
2. Круг.
3. Квадрат.
4. Множество квадратов.
5. Стрелка.

И другие доступные варианты. Если нажать на кнопку «Определить новый маркированный список», в другом окне можно установить параметры списка и загрузить свою картинку с компьютера. Нажимаете на раздел «Рисунок» и загружаете новый вид списка.

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

Приступим к созданию нумерованного списка в тексте. Снова выделяете место в тексте, где нужно установить нумерованный список. Далее, нажимаете вверху текстового редактора Word на нумерованный список (Скрин 5).

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

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

Разберём порядок работы с нумерованным списком. Когда Вы его установили, у Вас появится одна цифра в списке. Чтобы проставить все, необходимо нажать поочерёдно перед каждым словом левой кнопкой мыши и нажимать по нумерованному списку. После этого, все слова будут пронумерованы цифрами от 1 до 5 и больше.

После каждой фразы в тексте, можно нажимать кнопку «Enter», чтобы появилась цифра на следующей строке. И после неё написать какое-либо слово, предложение – цифра появится автоматически.

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

Изменить номер в списке Ворд довольно просто. Выделяете нумерованный список. Далее, его открываете (Скрин 6).

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

1. Изменить уровень списка.
2. Определить новый формат номера.
3. Задать начальное значение.

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

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

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

Выделяем в документе заранее заготовленный текст. Далее, нажимаем на раздел «Многоуровневый список» и устанавливаем необходимый список (Скрин 7).

Создать многоуровневый список можно вручную. Устанавливаем курсор мыши в самом начале предложения и нажимаем клавишу на клавиатуре – «TAB» и стрелку вправо. После их нажатия, слова будут разделены на разные уровни. Вместе с тем, многоуровневый список будет выглядеть по-другому.

Чтобы вернуть текст или список в исходное состояние, выделите текст левой кнопкой мыши. И нажмите несколько раз горячие клавиши – «CTRL+Z». Все изменения со списком исчезнут и Вы можете заново начать с ним работу.

Как сделать списки в Ворде по алфавиту

В Ворде создаются списки по алфавиту. Они помогут сортировать списки по возрастанию и убыванию. Опять выделяем список в документе. Далее, нажимаем на функцию – «Сортировка» Параметры —  «Абзац» и «Текст» оставляем без изменений (Скрин 8).

Затем, выбираете другие значения — «По возрастанию» или «По убыванию». После чего, нажимаем «ОК». Тогда Ваш список будет отсортирован по алфавиту.

Применение

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

Текст — это основная информация, получаемая пользователем, ради которой он переходит с одной страницы на другую

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

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

Удачным приемом считается объединение длинных перечислений в списки. А при раскрытии сложной для понимания темы часто приходится использовать вложенные списки. Приняв свое решение, будущие веб-программисты будут обязаны подчиняться воле заказчика, и им придется верстать страницу по предоставленному макету. Приемы подачи текстовой информации легки для усвоения и рекомендованы для использования.

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

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

Как изменить тип списка и цвет маркеров или нумерации

Как изменить тип списка

1. Откройте файл в Google Документах или Презентациях на компьютере.
2. Нажмите на маркер или номер пункта в списке.
3. В верхней части экрана выберите Формат Маркеры и нумерация.
4. Выберите тип списка.
   • Стили списка. Чтобы выбрать маркер из коллекции символов, нажмите Другие маркеры.
   • Нумерованный список.
   • Маркированный список.

Как изменить цвет маркеров или нумерации

1. Откройте файл в Google Документах или Презентациях на компьютере.
2. Нажмите на число, маркер или галочку (только в Google Документах).
3. Нажмите на значок «Цвет текста» на панели инструментов.
4. Выберите цвет.

Как начать заново нумерацию списка в Документах и Презентациях

1. Откройте файл в Google Документах или Презентациях на компьютере.
2. Дважды нажмите на номер первого пункта в списке.
3. В верхней части экрана выберите Формат Маркеры и нумерация.
4. Нажмите Стили списка Начать нумерацию заново.
5. Введите номер, с которого должен начинаться список.
6. Нажмите ОК.

Как продолжить нумерацию списка в Документах

1. Откройте файл в Google Документах на компьютере.
2. Дважды нажмите на номер первого пункта в списке.
3. В верхней части экрана выберите Формат Маркеры и нумерация.
4. Выберите Стили списка Продолжить нумерацию предыдущего списка.
5. Нажмите ОК.

Резюме

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

Подводя итоги, в этом уроке мы рассмотрели следующее:

• как создать маркированный, нумерованный список и список описаний;
• как правильно вкладывать одни списки внутрь других;
• как изменить стиль маркера списка и его положение;
• как использовать фоновое изображение вместо маркера списка;
• как горизонтально отобразить список через display и float.

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

Структурированность

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

• подзаголовки, разделяющие текст на смысловые блоки;
• списки: нумерованные или маркированные;
• выделение курсивом или жирным (умеренное).

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

Это основные моменты, на которых автор и хотел акцентировать внимание в текущем блоке

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

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

Уловили бы вы главную мысль, запомнили бы что-то из объяснения, изложенного в последнем примере текста копирайтера? А главное, сколько бы времени потратили на изучение даже самого простого материала, изложенного в виде подобной сплошной «простыни»?

Списки описания

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

Создание списка описания в HTML происходит с помощью блочного элемента <dl>. Вместо использования элемента <li> для разметки пунктов списка, список описания требует два блочных элемента: <dt> для термина и <dd> для описания.

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

При добавлении списка описания элемент

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

По умолчанию, элемент <dl> включает вертикальные отступы, подобно элементам <ul> и <ol>. Кроме того, элемент <dd> включает в себя по умолчанию левый margin.

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

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

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

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

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

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

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

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

Интернет

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

Сайт

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

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

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