Какие способы создания списков вы знаете

Списки и таблицы

Вячеслав Крысин Нетология

Вячеслав Крысин

Front-end developer в Нетология-групп

План занятия

Списки

Список в типографике — способ оформления различного рода перечислений или перечней. Каждый элемент списка начинается с маркера списка или номера-буквы и весь текст списка не должен выступать влево за них.

Разновидности списков

• Упорядоченные или неупорядоченные. Если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то такой список является неупорядоченным. Если же от перестановки перечисленных элементов изменяется смысл, то такой список называется упорядоченным;
• Нумерованные и ненумерованные. Каждый элемент нумерованного списка начинается с порядкового номера или буквы в алфавитном порядке. Элемент ненумерованного списка начинается c маркера списка;
• Одноуровневые (простые) или многоуровневые.

Виды списков в HTML

• Маркированные списки;
• Нумерованные списки;
• Списки описаний.

Синтаксис

Общее

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

Пример разметки списка

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

Родительский парный тег UL (англ. Unordered List — неупорядоченный список). Список начинается открывающимся тегом <ul> и заканчивается закрывающим тегом </ul>

Парный тег пункта списка LI (англ. List Item — элемент списка). Каждый пункт списка начинается с тега <li> и заканчивается закрывающим тегом </li>

Задача

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

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

Цепочка рассуждения

• Как оформим перечень вещей? Списком
• Какой список выбрать? Маркированный
• С чего начинается список? <ul>
• Какие теги используем для оформления пунктов? <li></li>
• Что должно стоять в конце списка? </ul>

Решение

Набор вещей: Компас, Палатка, Сменная одежда, Спальник

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

Родительский парный тег OL (англ. Ordered List — упорядоченный список). Список начинается открывающимся тегом <ol> и заканчивается закрывающим тегом </ol>

Парный тег пункта списка LI (англ. List Item — элемент списка). Каждый пункт списка начинается с тега <li> и заканчивается закрывающим тегом </li>

Задача

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

Обязательно ставить прививки и собирать справки в строгой последовательности.

Цепочка рассуждения

• Какой список выбрать, если последовательность важна? Нумерованный
• С чего начинается нумерованный список? <ol>
• Какие теги используем для оформления пунктов? <li></li>
• Что должно стоять в конце списка? </ol>

Решение

Перечень прививок и справок: Прививка от кори, Прививка от клещевого энцефалита, Прививка от оспы, Справка от педиатра

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

Родительский парный тег DL (англ. Description List — список описаний). Список начинается открывающимся тегом <dl> и заканчивается закрывающим тегом </dl>

Парный тег, в котором располагается сам термин — DT (англ. Definition Term — термин).

Парный тег, внутрь которого помещается расшифровка, определение термина — DD (англ. Description — описание).

Задача

Переходим к заполнению страницы с маршрутом.

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

Цепочка рассуждения

• Какой список выбрать, если должны быть даны термины и расшифровки? Список определений
• С чего начинается список определений? <dl>
• Какие теги используем для оформления терминов? <dt></dt>
• Какие теги используем для оформления расшифровок? <dd></dd>
• Что должно стоять в конце списка? </dl>

Решение

Задача

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

Текст примечания: «С момента проведения вакцинации должно пройти не больше 3 месяцев.»

Примечание относится к прививке от энцефалита.

Вариант решения

Можем ли мы сделать так?

Нет! В список должны быть вложены только пункты списка.

Изменяем начало нумерации

Изменяем первую цифру с помощью HTML-атрибута start

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

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

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

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

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

Задача

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

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

Решение

Задача

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

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

Таблицы

Синтаксис

Таблица всегда состоит из строк, а строки — из ячеек.

Создаем таблицу при помощи парного родительского тега table .

Затем внутрь таблицы помещается необходимое количество строк при помощи парного тега TR (англ. table row — строка таблицы)

В каждой строке может лежать любое (нужное нам) количество ячеек.

Ячейка создается при помощи парного тега TD (англ. table data cells — ячейка данных таблицы).

Ячейки формируют колонки данных.

Задача

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

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

Организаторы похода прислали вам данные о каждом ребенке. Всего в поход ходили 8 детей.

Цепочка рассуждения

• Как создать таблицу? <table>
• Сколько строк должно быть в таблице? 8
• Как создать строку? <tr></tr>
• Сколько ячеек должно быть в строке? 3
• Как создать ячейку? <td></td>
• Какой тег стоит в конце таблицы? </table>

Решение

Решение

Заголовки

Чтобы создать строку с заголовками колонок и отделить эту строку от основных данных таблицы используется парный тег THEAD (англ. table head — «голова» таблицы).

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

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

Должен идти в разметке сразу после тега table . Внутрь вкладывается тег ряда — tr , а в него теги ячеек — td .

Задача

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

Решение

Тело таблицы

После thead должен идти основной контент таблицы. Его так же группируют по смыслу, для этого используется парный тег TBODY (англ. table body — «тело» таблицы)

Тел таблицы может быть несколько.

Задача

Взять данные одной команды и разбить их по дням, проведенным в походе.

Решение

Итого

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

Для строк ИТОГО используется парный тег TFOOT (англ. table footer — «подвал» таблицы).

Синтаксис его использования ничем не отличается от предыдущих логических элементов thead и tbody .

Задача

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

Решение

Пустые ячейки

В строках с днями недели у нас есть пустые ячейки. Таже ситуация в последней строке ИТОГО.

Почему бы не объединить пустые ячейки?

Так таблица станет более читаемой и аккуратной.

Горизонтальное объединение ячеек

HTML-атрибут colspan (англ. span — охват).

Указывается для тега ячейки — td .

Значением этих атрибутов может быть только целое положительное число.

Синтаксис

Важно! Следите за суммарным количеством ячеек в строках с учетом охвата.

Задача

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

Решение

Вертикальное объединение ячеек

Можно общединять ячейки не только по горизонтали, но и по вертикали.

Для этого используется атрибут rowspan .

Он так же применяется к тегу ячейки — td .

Задача

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

Решение

Обратите внимание

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

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

Задача

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

Figure

figure

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

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

Тег figure — парный родительский тег. Внутрь него вложен парный тег figcaption .

figcaption является не обязательным — фигура может сущестовать и без описания.

Задача

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

Вопрос29: Текстовый процессор: виды списков и операции с ними.

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

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

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

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

выделить несколько абзацев текста, предназначенных для оформления в виде списка;

на вкладке ленты «Главная» в подменю «Абзац» Выбрать разделённую кнопку «Маркеры» или «Нумерация»;

в открывшемся диалоговом окне выбрать вид маркера из представленных образцов стрелками и нажать Enter.

Для продолжения списка необходимо поместить курсор в конце последнего абзаца списка и нажать клавишу Enter. Создаётся пустая строка с маркером и можно продолжать перечисление.

Второй способ создания списков может быть следующим: для генерации признака нумерованного списка выводят на первую позицию строки арабскую или римскую цифры или буквы латинского алфавита с последующей точкой или правой круглой скобкой; для маркированного списка ставят звёздочку в первой позиции или нажимают клавиатурную команду создания маркированного списка Ctrl+Shift+L.

Третий способ создания списков заключается в активизации разделённых кнопок «Маркеры» или «Нумерация» из контекстного меню. В этом случае сразу создаётся пустая строка с маркером по умолчанию без возможности выбора вида маркера.

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

Для завершения любого списка достаточно дважды быстро нажать Enter. Также снять признак списка можно нажатием BackSpace в начале строки с маркером.

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

Элементы списков можно сортировать по алфавиту, выполнив следующие действия:

выделить элементы списка;

активизировать кнопку «Сортировка» на вкладке ленты «Главная» из подменю «Абзац»;

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

Многоуровневый список (команда Главная – Абзац – Многоуровневый список – Определить новый многоуровневый список) – это список, который содержит вложенные списки. В многоуровневых списках может быть несколько уровней вложенности. Пользователь может изменить свойства многоуровневого списка: для каждого уровня выбрать обозначение пунктов, изменить формат номера (шрифт, размер, цвет, начертание), положение обозначения пункта каждого уровня списка, положение текста.

Операции: 1) Можно передвигать весь список влево или вправо. Щелкните маркер или цифру в списке и перетащите на новое место. Весь список переместится за указателем. Уровни нумерации не изменятся.

2) Можно увеличить расстояние между строками всех списков, сняв соответствующий флажок.

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

Какие списки существуют в текстовом редакторе

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

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

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

Есть также сложные списки, или контекстные, которые состоят из подпунктов, специальных знаков, курсива, жирного или цветного шрифта. Они помогают выделить основные и дополнительные характеристики, неоднородную информацию.

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

Определение и особенности списков

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

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

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

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

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

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

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

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

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

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

1. Способы связи с техподдержкой:
   1. По телефону;
   2. Через электронную почту;
   3. Через форму обратной связи на сайте.
   1. Подключите Wi-Fi роутер к электросети;
   2. Включите компьютер и найдите сеть Wi-Fi;
   3. Введите пароль для подключения.
   1. Уменьшение времени на выполнение задач;
   2. Уменьшение риска ошибок;
   3. Повышение качества работы.

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

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

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

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

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

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

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

   • Элемент 1. Краткое описание элемента 1
   • Элемент 2. Краткое описание элемента 2
   • Элемент 3. Краткое описание элемента 3

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

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

   Создание списков

   В Wordимеется три вида списков:

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

   одинаковый маркер для всех элементов списка.

   2) Нумерованный 1) имя 1

   3) Многоуровневый 1. Глава 1 (1 ый уровень)

   1.1 первый подпункт (2 ой уровень)

   1.2 второй подпункт (2 ой уровень)

   1.2.1 подпункт 3 го уровня

   1.3 третий подпункт (2 ой уровень)

   2. Глава 2 (1 ый уровень)

   Для создания списков существует несколько возможностей.

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

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

   Чтобы отказаться от списка надо еще раз нажать Enter.

   2 способ. Создание списка командой Формат — Список

   В ней имеются 3 вкладки по типам спискам. На каждой вкладке имеются варианты оформления соответствующего типа списка.

   Рис. 17 — Окно команды "Формат-Список"

   Для выбора типа списка надо щелкнуть на соответствующей вкладке. Появляются варианты оформления для списков соответствующего типа. Выбираем нужный вариант и ОК

   Для выбранного варианта можно изменить тип маркера или тип номера. Для этого надо нажать кнопку Изменить

   3 способ. Создание списка нажатием кнопки на панели форматирования: или

   Создание многоуровневого списка имеет особенность. Для каждого элемента списка надо указать его уровень вложенности. Для изменения уровня элемента можно использовать: а) кнопки или
   б) комбинацию клавиш Shift+ALT+→ или Shift+ALT+←

   
   

   Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:

   Похожие публикации:

   1. Как затемнить фото в фотошопе
   2. Как изменить доставку на авито
   3. Как отключить рекламу в майкрософт edge
   4. Как удалить все записи со стены в вк сразу