Как делать абзацы в html
Перейти к содержимому

Как делать абзацы в html

  • автор:

28. Что такое абзац в HTML (тег P)?

Что такое абзац в HTML? Абзац – это единица группировки текста. В HTML абзац означает то же самое, что и абзац на листе бумаги. Абзац в HTML выделяется тегом

. Каждый абзац в HTML начинается с новой строки и сопровождается отступом после.

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

Рассмотрим пример создания трех абзацев в HTML:

Это первый абзац


Это второй абзац


А это третий абзац

Кстати, чтобы сделать «красную строку» у абзаца, можно написать вот такое свойство CSS (тега

):

Как сделать красную строку

p text-indent: 20px;
>

Абзацы

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

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

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

Начнём с простейшего тега

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

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Абзацы

Абзац — отрезок письменной речи, состоящий из нескольких предложений.

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

HTML: Абзац и красная строка

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

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

Абзац

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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

Абзац

Другой абзац

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

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

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

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

   p   

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

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

 

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

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

С этой темой смотрят:

  • HTML заголовки, линии и комментарии
  • HTML перенос строки
  • HTML теги для текста
  • Выравнивание текста
  • Как изменить шрифт
  • Стиль и размер шрифта

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Абзацы

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

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



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



До самого вечера тело с варежками .


будет показана на экране так:

Выравнивание абзацев

У тэга есть параметр ALIGN , который может принимать значения:

  • LEFT — выровнять по левой границе
  • RIGHT — выровнять по правой границе
  • CENTER — выровнять по центру
  • JUSTIFY — выровнять по ширине (левая и правая границы)

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


Этот текст выровнен по центру.



Этот текст выровнен по ширине.

В заголовках тоже можно указывать тип выравнивания, например так:


Заголовок, выровненный по центру

Линия-разделитель

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

  • SIZE — толщина линии в пикселях
  • WIDTH — ширина линии в пикселях или в процентах от ширины окна
  • ALIGN — выравнивание ( LEFT, RIGHT или CENTER )

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

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

Добавить комментарий

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