Виды HTML элементов: блочные элемент и строчные HTML элементы
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
HTML параграфы и HTML абзацы: их назначение и использование в документах
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Речь в ней пойдет про параграфы и абзацы в HTML. Любому владельцу СДЛ сайта должно быть важно, чтобы его посетитель чувствовал себя комфортно, а информация на странице была доступна. И понятно, что сплошной текст было бы неудобно читать, поэтому его стоит делить на маленькие части, которые мы называем параграфами или абзацами.
HTML параграфы и HTML абзацы: их назначение и использование в документах
В это записи вы узнаете все про абзацы и параграфы в HTML, начиная с назначения и применения абзацев в HTML документах и заканчивая примерами использования параграфов в HTML, так же вы найдете информацию о том, как сделать выравнивание текста внутри параграфов при помощи специального HTML атрибута align.
Содержание статьи:
Назначение абзацев и параграфов в HTML документе
В предыдущих записях мы очень часто использовали HTML тэг <p> не очень вдаваясь в то, как этот тэг работает и для чего он нужен в HTML документе. Данная запись исправит этот недочет, здесь мы разберемся для чего нужны абзацы в HTML и как браузер понимает, где начинается HTML параграф и где он заканчивается.
Итак, абзацы в HTML нужны для того, чтобы разбить большой текст на небольшие фрагменты. Обычно абзац состоит из нескольких предложений, которые связаны между собой по смыслу. Абзац это смысловая единица текста, которая больше, чем предложение, но меньше, чем глава (документ можно делить на главы и разделы при помощи HTML заголовков). А ниже приведем определение абзаца из Википедии.
Абза́ц — отрезок письменной речи, состоящий из одного или нескольких предложений. Абзац, обозначая своего рода «цезуру», является единицей членения текста, промежуточной между фразой и главой, и служит для группировки однородных единиц изложения, исчерпывая один из его моментов (тематический, сюжетный и т. д.). Выделение фразы в особый абзац усиливает падающий на неё смысловой акцент. Абзац способствует правильному и быстрому восприятию текста.
В принципе, ни браузер, ни уж тем более интерпретатор HTMLне знают смысла абзаца и никак не помогут вам определиться с тем, где абзац начинается и где заканчивается, но в HTMLесть специальный тэг <p>или HTMLпараграф, который предназначен для того, чтобы разбивать текст внутри HTMLдокумента на абзацы.
HTML элемент P относится к блочным HTML элементам. Тэг <p>является парным HTML тэгом, а закрывающий тэг </p> опциональный. В том случае, если вы не указали закрывающий тэг для абзаца, браузер определит его границу самостоятельно по наличию следующего блочного HTML элемента.
Абзацы в HTML разделяются между собой отбивкой (небольшими отступами), величиной отбивки можно управлять при помощи каскадных таблиц стилей. Для тэга HTML абзаца доступны все универсальные HTML атрибуты и атрибуты событий.
Примеры использования HTML абзацев и параграфов
Мы сказали всё, что нужно знать про абзацы и их особенности в HTML, теперь давайте попробуем создать несколько абзацев в HTML документе и посмотрим все особенности не на словах, а на деле. Откройте редактор (рекомендую вам попробовать HTML редактор Notepad++ или CSS редактор Brackets, оба они бесплатные, имеют автодополнение кода и подсветку синтаксиса) и напишите следующий код:
[php]
<!DOCTYPEhtml>
<htmllang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Параграфыиабзацыв HTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Пример к параграфы и абзацы в HTML</h1>
<p>Абзац в HTML создается при помощи специального тэга <p> и
служит для деления текста на фрагменты, в которых предложения
логически связаны между собой.</p>
<p>HTML элемент P является блочным элементом. А HTML тэг <p> относится к
группе парных HTML тэгов с опциональным закрывающим тэгом
<p>Если закрывающий тэг </p> не указан, то
браузер определяет конец абзаца по наличию следующего
блочного элемента
</body>
</html>
[/php]
Сохраните код, как файл index.html, а затем откройте его в браузере. После того, как браузер создаст HTML страницы, проанализировав документ, мы увидим примерно следующее:
Пример отображения HTML абзацев в браузере
Как видите, между абзацами на HTML странице есть отступы, абзацы в HTML занимают всю доступную область, а в тех параграфах, где мы не указали закрывающий тэг </p>, браузер это сделал за нас.
Выравнивание текста внутри HTML абзаца
Но это еще не всё, что можно сказать про абзацы в HTML. Дело всё в том, что есть разные языки и, соответственно, должно быть разное выравнивание внутри HTML параграфов. Для этих целей, для целей выравнивания текста внутри HTML абзацев есть специальный атрибут align, который позволяет задать то, как будет выровнен текст внутри параграфа.
Атрибут align используется не только с тэгом <p>, но и с некоторыми другими HTMLтэгами. Но, с каким бы тэгом данный атрибут не использовался, он может принимать четыре значения, если говорить про наш случай, то эти значения влияют на то, как будет выровнен текст внутри абзаца:
- Значение left выравнивает текст по левой границе HTML документа и является значение по умолчанию для браузера. Хотя, может, в какой-нибудь Саудовской Аравии значением по умолчанию является right.
- Значение right выравнивает текст внутри HTML абзаца по правой границе.
- Значение center выравнивает текст внутри HTML параграфа по центральной оси области просмотра или же по центральной оси того элемента, в который вложен HTML абзац.
- Значение justify выравнивает текст внутри HTML абзаца по ширине.
Давайте посмотрим на примере, как браузер будет выравнивать текст внутри HTML абзаца. Откройте редактор (хорошо, если редактор будет многофункциональным и с подстветкой синтаксиса, например JavaScript редактор Sublime Text 3 или IDE NetBeans редакции PHP):
[php]
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Параграфыиабзацыв HTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Пример к статье параграфы и абзацы в HTML</h1>
<p align="left">По левому краю.</p>
<p align="right">По правому краю.
<p align="center">Поцентру.
<p align="justify">Чтобы было заметно выравнивание по ширине нужно, чтобы в
браузере абзац отображался в несколько строк. Поэтому в этом
абзаца так много текста.</p>
</body>
</html>
[/php]
Не забывайте использовать символы переноса строк и табуляцию для форматирования HTML кода. Сохраним HTML код и посмотрим, как браузер будет выравнивать текст внутри абзаца:
Пример выравнивание текста внутри HTML параграфа
Стоит пояснить принцип выравнивания justify. Обратите внимание: последний HTML абзац имеет ровные края и справа и слева, браузер добивается такого эффекта за счет того, что добавляет пробелы между словами.
Теперь вы знаете всё что нужно про параграфы и абзацы в HTML для их успешного использования в создаваемых вами документах.
Выберете удобный для себя способ, чтобы оставить комментарий