Абзацы в документе

Оформление абзацев

Роли абзацев

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

Форматирование — изменение формы, внешнего вида документа. Для чего же после написания мы пытаемся изменить его внешний вид? На этот счёт у каждого может быть своя точка зрения: от «а чтоб было красиво», до «так лучше».

Причём объяснить, что такое «красиво» и кому «станет лучше» многие затрудняются. И не удивительно. Народная мудрость гласит: «на вкус и цвет — все фломастеры разные», поэтому то, что для одного красиво, для другого может быть неприемлемо.

Рисунок 1. Примеры форматирования текста.

Документы оформляют разными способами (рисунок 1). Например, первый — привычный или стандартный. Здесь мы чётко видим основной заголовок, вводную часть и заголовок темы со списком.

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

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

Рисунок 2. Одинаково форматированные абзацы.

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

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

Рисунок 3. Типовые роли абзацев.

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

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

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

В коде веб-страницы абзацы размечают элементами HTML. За их внешний вид отвечает браузер. Автору достаточно только правильно определить роль абзаца и подобрать блочный элемент HTML, соответствующий этой роли.

Структура документа

Абзацы и их роли

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

Рисунок 4. Гражданский кодекс Российской Федерации.

В юридических документах любая ошибка в оформлении — нарушение государственного стандарта (ГОСТ Р 6.30-2003. Унифицированная система организационно-распорядительной документации). Даже неверный размер полей у документа может стать причиной признания его не имеющим юридической силы. А это приведёт к отмене действия документа, и одна из сторон может проиграть дело в суде.

Возьмём для рассмотрения Гражданский Кодекс РФ. Причём, обращать внимание будем на его форму. Попробуем понять, как это содержание может выглядеть на бумаге.

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

Всё наглядно и просто.

Рисунок 5. Война и Мир (Лев Николаевич Толстой).

Теперь проанализируем художественное произведение, например, роман Л. Н. Толстого «Война и Мир». Размер его основателен — свыше тысячи страниц текста. Изначально произведение разделено на четыре тома. Каждый том состоит из некоторого количества частей. Каждая часть — из глав… И так далее до абзацев.

Рисунок 6. Структуры документов.

Что мы наблюдаем на экране? Структуры двух документов. Можно предположить, что все документы имеют структуру. Давайте в этом убедимся.

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

Вывод. Каждый документ имеет структуру.

`
Рисунок 6. Структуры документов.

Вот пример двух писем (рисунок 6.). Одно личное, а другое деловое. Задумайтесь над вопросом: «Для чего нужна структура»? Вы от кого-то получили письмо. Ещё до прочтения, хотелось бы знать, кто вам его написал. На какое место листа вы обратите внимание в первую очередь?

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

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

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

Структура нужна для быстрого поиска.

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

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

Построение структуры

Берём в руки книгу (рисунок 7). Перед нами одна из 456 страниц книги «Делопроизводство…» (в ней описан ГОСТ Р 6.30-2003 с объяснениями и примерами его соблюдения). Это не художественное произведение, которое читают от корки до корки, хотя такой подход работает во всех книгах. Не зная структуры книги, отдельной статьи в ней очень сложно ориентироваться.

На странице ниже образец статьи «…технологии оформления документов».

Рисунок 7. Опубликованный документ.

Рассмотрим эту страницу как пример. Абзацу с ролью Заголовок раздела по оформлению подчиняется группа абзацев Основной текст. Все они имеют одинаковый внешний вид, оформленный, как и описано в статье: «…при подготовке данного издания для оформления абзацев основного текста применялся стиль под названием Обычный».

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

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

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

Но давайте сами рассмотрим семантику абзацев и определим их роли (рисунок 8).

Рисунок 8. Анализ структуры документа.
  • Первый абзац содержит краткое объявление того, о чём пойдёт речь далее. Его роль определена правильно — Заголовок.
  • Следующий абзац — содержит основной текст документа. Его роль так и называется Основной текст. Он расположен внутри раздела объявленного заголовком. Пока ошибки в оформлении нет, а вот дальше…
  • Три текстовых фрагмента далее начинаются с приставки «Во»: «Во-первых…», «Во-вторых…» и «В-третьих…». Это уже не основной текст. Каждый из них раскрывает объявленные в первом абзаце «…дополнительные возможности…». Они тоже подчиняются Заголовку, но у них совершенно другая роль — они Элементы списка дополнительных возможностей.

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

    Ни дополнительные значки для выделения первой строки этих абзацев, ни их порядковые номера использовать не обязательно. Эту роль будут выполнять приставки «Во-». Чтобы чётче обозначить элементы списка добавим интервал перед абзацами.

  • Второй элемент списка («Во-вторых…»), в свою очередь, имеет группу подчинённых абзацев. В них содержится перечень свойств и значений абзаца основной текст. Их роль — Описание свойств.

    Эта группа тоже Список, но уже свойств. И подчиняется он не заголовку раздела, а второму элементу списка возможностей. В структуре список свойств занимает другой уровень и строки нужно сдвигать ещё правее.

    Абзац «При вводе текста…» элементом списка свойств не является. Но со своим отступом первой строки, равным сдвигу элементов списка, «прикинулся» ещё одним пунктом. Это тоже не способствует лёгкому пониманию при прочтении текста.

    Каждая строка списка свойств состоит из двух частей: имя свойства и значение свойства. Их текст стоит разместить в двух колонках. Это упростит чтение. И у заголовка нужно отказаться от абзацного отступа, сдвинув его к левому полю документа. Так он будет возвышаться над всеми абзацами раздела как их «хозяин».

Рисунок 9. Сравнение обычного и семантического форматирования.

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

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

У автора существует два способа передачи структуры документа читателю.

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

А теперь можно написать три правила форматирования документов.

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

Правило форматирования 2. Если абзацы в документе имеют разные роли и (или) находятся в структуре на разных уровнях, в их внешнем виде должно что-нибудь отличаться.

Правило форматирования 3. Если абзацы в документе имеют одну роль и в структуре находятся на одном уровне — они должны выглядеть одинаково.

Вернёмся к самому первому вопросу, с которого начались рассуждения: для чего форматируют документы? Документ форматируют для передачи его структуры читателю (рисунок 10).

Рисунок 10. Вывод.

Да простят меня учителя русского языка и литературы: основную информационную нагрузку в документе (не в тексте!) несёт его внешний вид. Если документ оформлен плохо («тяп-ляп») или написан почерком «курица лапой», то каким бы важным и полезным ни было его содержание, его вряд ли станут читать.

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

Практическая работа

Разминка

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

В папке task_01 создайте файл с именем poem.htm из копии шаблона в рабочей папки. Документe в нём измените название с шаблон на Рифмы. Дальнейшую работу выполняйте в этом документе.

Для абзацев-заголовков существует отдельная группа элементов. Эти элементы называются H… первая буква английского слова Header. Заголовки бывают разных уровней. Им вместо многоточий добавляют номер уровня, начиная от самого главного: заголовок статьи H1 заголовок раздела статьиH2 заголовок подраздела H3 и так далее до самого младшего заголовка H6

Разметим элементами HTML маленький стишок.

Стишок Винни-пуха по пути к мосту Не странно ли, что Волки Не могут жить на ёлке? Живут на ёлках Белки -- Хоть ёлки и не елки!

Теги элемента BODY изначально сдвинуты на один структурный отступ (2 пробела) вправо, потому что он находится внутри элемента HTML. А так как главный заголовок H1 размещён внутри него, то его теги нужно сдвинуть вправо ещё на 1 структурный отступ (4 пробела).

Открывающий тег блочного элемента записывается в отдельной строке с учётом структурных отступов (на один больше чем у родительского элемента). Закрывающий тег в другой строке с тем же структурным отступом.

За заголовком идут обычные абзацы основного текста P. Они рядом с H1 и как он тоже помещены в BODY. И их теги тоже должны быть сдвинуты вправо на 2 структурных отступа (4 пробела). Пробелы в примере обозначены точками, и выглядеть это будет так:

··BODY
····H1
Стишок по пути к мосту
····/H1
····P
Не странно ли, что MARKВолки/MARKBR
Не могут жить MARKна ёлке/MARK?
····/P
····P
Живут на ёлках MARKБелки/MARK —BR
Хоть ёлки и MARKне елки!/MARK
····/P
··/BODY
Вот так абзацы выглядят в коде

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

Если разметить строки стиха тегами P/P, браузер добавит после каждой ещё одну пустую. Но стихотворные строчки в строфе принято располагать рядом. В стихотворениях тегами абзаца размечают только строфы.

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

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

Осталось выделить рифмованные слова элементом маркер mark. Заменить сдвоенную чёрточку типографским длинным тире, записав его юникод и приклеив его к предыдущему слову неразрывным пробелом.

Вот так выглядит код на странице. Можете записать код в файле HTML и убедиться в этом.

Стишок по пути к мосту

Не странно ли, что Волки
Не могут жить на ёлке?

Живут на ёлках Белки —
Хоть ёлки и не елки!

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

Вёрстка дайджеста

Если у вас получилось разметить стишок правильно, то теперь вы готовы выполнить большую серьёзную работу самостоятельно.

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

Скопируйте шаблон из рабочей папки в папку task_01. Переименуйте копию в language.htm, дайте ему название Нерусский язык и скопируйте в него предложенный ниже текст.

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

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

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

  1. Первый материал из далёкого прошлого.

    Взгляд на русскую литературу 1847 года Виссарион Григорьевич Белинский. Нет сомнения, что охота пестрить русскую речь иностранными словами без нужды, без достаточного основания противна здравому смыслу и здравому вкусу, но она вредит не русскому языку... У языка есть хранитель надёжный и верный — это его собственный дух, гений. Вот почему из множества вводимых иностранных слов удерживаются только немногие, а остальные сами собой исчезают...

  2. Второй — басня на ту же тему из настоящего.

    Собачий разговор (басня о заимствовании слов из иностранных языков) Пёс городской провёл в деревне лето, Вернувшись, другу рассказал об этом: "Му-му ква-ква хрю-хрю кукареку Га-га бе ме кар мяу и ку-ку!" На это друг сказал ему, вздыхая: "Прости, ни слова я не понимаю! Ты или по-собачьи говори, Иль попусту мне в уши не ори!" И в наш язык вливают непрестанно Потоки слов и мыслей иностранных, Но, чтобы нам друг друга понимать, Не их, а свой язык нам надо знать. (с) Олеся Емельянова. 2009 г.

  3. Третий — с взглядом в будущее.

    Русский язык: великий и могучий? Фрагмент беседы на радио, Эхо Москвы, март 2010 г. Ведущая: Ольга Бычкова. Гость: Дмитрий Львович Быков, журналист и писатель. О. Бычкова: Когда мы говорим о научных достижениях, мы пользуемся английскими и какими-нибудь ещё. Д. Быков: Далеко не только. Понимаете, в конце концов, мы же любим Перельмана (Перельман, Григорий Яковлевич, российский математик, доказавший гипотезу Пуанкаре.) не только за то, что он доказал гипотезу Анри Пуанкаре, но и за то, что он вернул русскую научную школу в центр внимания, да? И мне, например, когда я бываю в западных университетах, отрадно слышать большое количество русской речи. И больно, с одной стороны — я бы желал её в России слышать...

  4. И последнее. Вы уверены, что это не про вас?

    Из резюме об устройстве на работу. Свободно говорю по-английски. Неправильно, но свободно.

Анализ материала

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

Тема одна, и весь материал — одна статья. Элемент HTML с именем ARTICLE мы и поместим в BODY.

У статьи всегда есть заголовок. Самый главный заголовок на этой странице — элемент H1 от английского слова Header. Но кроме него добавим ещё и подзаголовок. Статья, собранная из фрагментов других документов, называется дайджест. Это слово упакуем в обычный абзац P, роль которого будет подзаголовок.

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

Что у нас получилось? В тело документа помещена статья с шапкой, в которой расположены заголовок с подзаголовком. В нашем случае подзаголовок поместим над заголовком. Запишем структуру документа с учётом структурных отступов: 1 отступ — 2 пробела.

··BODY (тело документа)
····ARTICLE (статья документа)
······HEADER (шапка статьи)
········P (абзац-подзаголовок шапки статьи)
········H1 (заголовок шапки статьи)

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

··BODY
····ARTICLE
······HEADER
········P
········H1
······SECTION (раздел в статье)
······SECTION (раздел в статье)
······SECTION (раздел в статье)
······SECTION (раздел в статье)

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

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

Роль элемента HEADER (шапка) — объединять различные сведения о документе, о статье, о разделе и т. п.

Явные абзацы нужно обязательно помещать в элементы P. Размеченный раздел должен выглядеть примерно так:

······SECTION (раздел в статье)
········HEADER  (шапка раздела)
··········H2 (заголовок в шапке раздела)
··········P (абзац-подзаголовок в шапке раздела)
········P (обычный абзац основного текста раздела)

Структура документа HTML для веб-страницы построена. Теперь опишите её в коде HTML тегами выбранных элементов с соблюдением структурных отступов. Самостоятельно оцените, нужна ли каждому разделу шапка. А если какому-то нет, то объясните почему. Обратите внимание, что текст басни для раздела &8470; 2 написан в стихах.

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

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

  • многоточие это не три отдельные точки, которые занимают три знакоместа, а один символ из трёх точек в одном знакоместе и его нужно записывать кодом unicode;
  • код тире записывается приклеенным неразрывным пробелом к предыдущему слову;
  • кавычки это парные знаки препинания. В русской типографике традиционно используются кавычки-ёлочки. закрывающая записывается последним символом слова, как обычный знак препинания, а открывающая — с точностью до наоборот, как первый символ слова записанного в кавычках;
  • (c) копирайт — знак авторского права он тоже кодируется либо числовым, либо буквенным (мнемоника) кодом unicode и к следующему слову приклеивается неразрывным пробелом.

Домашнее задание

Справочник
Блочные элементы HTML 5

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

В HTML 5 элементов разметки и группировки абзацев блочных элементов всего 28. Все, кроме одного, имеют семантические роли напрямую связанные с ролями абзацев в документе.

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

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

Таблица 2. Блочные элементы для оформления и группировки абзацев.
Имя элемента Полное имя Семантическая роль
Н1 header 1 абзац-заголовок первого уровня (заголовок статьи)
H2 header 2 абзац-заголовок второго уровня (заголовок раздела)
P paragraph абзац основного текста документа

Выполнение работы

Для экспериментов с блочными элементами из рабочей папки скопируйте шаблон sample.htm в папку task_01. Переименуйте копию в para.htm с названием Блочные элементы и добавьте в него произвольный текст из нескольких абзацев. Произвольный текст можно взять на сайте Яндекс.Рефераты. Но сначала познакомьтесь с текстом на его титульной странице.

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

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

В этой же папке task_01 создайте ещй один файл в котором будете формировать таблицу по образцу предложенному выше. Это может быть обычный текстовый документ: TXT, документ Microsoft Word: DOC(x), документ OpenOffice Write: ODT или любой другой, с которым вы умеете работать. Файл назовите inline.

Полезные ссылки:

  • для тех, кто любит русский язык Справочник HTML В. Мержевича.
  • для тех, кто не боится английского языка «4.4 Grouping content» стандартные элементы HTML 5 для группировки контента — абзацы с различными ролями и «4.3 Sections» для группировки самих абзацев.

Так же можете пользоваться имеющейся у вас литературой и знакомыми ресурсами.