Абзац в HTML
Что такое абзац? Набор из одного или нескольких предложений, связанных обсуждаемым контекстом - вот какое определение абзаца вы знали, не так ли? А в MS Word? Параграф - это блок текста до нажатия клавиши "Enter" или текст между двумя знаками абзаца.
Абзац средствами HTML
Чтобы выделить абзац в HTML, мы используем не «Enter», а тег <р>. Абзац начинается с открывающегося тега и заканчивается закрывающимся тегом </p>.
Введите следующий HTML-код в редактор «Блокнот» и сохраните файл с именем para-example.html.
<!Doctype html>
<html>
<head> <title>Иллюстрация параграфа 1</title></head>
<body>
Это блок текста, написанного в том же контексте. Он может содержать только одно предложение или больше. Иногда, он может состоять всего из одной строки, иногда - из нескольких.
HTML-абзац начинается с <p> и заканчивается </p>. Все, что размещается между этими тегами, считается абзацем.
</body>
</html>Теперь откройте этот файл в браузере.
Открывается ли этот файл в браузере при двойном клике по нему? Если нет, убедитесь, что вы задали расширение файла ".html" и выбрали опцию "Все файлы (*. *)".
Если этот файл открылся в браузере, сколько абзацев вы видите? Вы заметили в HTML-коде (в блокноте) <p> и </p>? Сбиты с толку тем, что видите в браузере <р> и </р>?
HTML поддерживает некоторые &-коды для получения в браузере символов. < дает символ меньше, > дает символ больше. Точно так же вы можете написать ©, чтобы получить символ копирайта. Одним из часто используемых кодов является - неразрывный пробел. Когда у вас нет никакого контента и нужно создать где-нибудь пробел, вы можете использовать код .
Но существует одна проблема.
Мы создали два абзаца HTML, а в браузере был выведен только один. Теперь добавьте теги <р> и </р>, чтобы разделить абзацы, как показано ниже:
<!Doctype html>
<html>
<head><title>Paragraph Illustration 1</title></head>
<body>
<p>This is a block of text written in same context. There can be only one sentense or more than one. Sometimes, there can be only one line and some times there can be multi line.</p>
<p>The HTML paragraph begin with a <p> and ends at </p> Anything in between these two tags is considered a paragraph.</p>
</body>
</html>Сохраните файл и перезагрузите его в браузере (нажмите клавишу F5, находясь в браузере, чтобы обновить данные).
Вы видите два абзаца, не так ли? Теперь вы должны понимать, что пробелы не имеют ничего общего с форматом HTML.
Последовательные пробелы (более одного пробела) рассматривается, как один пробел. Поэтому вы не можете создавать блоки текста, добавив несколько пробелов, как в Блокноте. Кажется, что в Блокноте блоки разделены, но когда они загружаются в браузере, пробелы исчезают.
Выравнивание абзацев
В следующем примере я использую выравнивание по центру, выравнивание по левому краю, распределение и выравнивание по правому краю. Рассмотрите внимательно следующий пример использования тега абзаца HTML:
<!Doctype html>
<html>
<head> <title>Paragraph with Allignment</title></head>
<body>
<p align="center">XYZ Trading Company <br>
Paknajol, Kathmandu</p>
<p align="left">To,<br>
The Secretary<br>
Ministry of Information and Communications</p>
<p align="justify">In reference to your letter dated 15 October 2015 we have attached the MOE between XYZ Trading Company, Paknajol, Kathmandu and ZTE Communications, Xiang, China for your kind reference. We expect positive response from your side in the earliest possible date.</p>
<p>Thanking You.</p>
<p align="right">Yours Sincerely<br>
Managing Director<br>
XYZ Trading Company</p>
<p align="right"> Date: 25 October 2015</p>
</body>
</html>Сохраните файл и загрузите его в браузере.
Вы заметили, как абзацы выравниваются по левому краю, по центру, по правому краю и по ширине? Что заставило их выровняться должным образом?
Атрибут align. Атрибут align=”left” тега <p> приводит к тому, что абзац выравнивается по левому краю. Значения атрибута align “center”, “right” и “justify” заставляет их выровнять соответствующим образом.
Примечание: В HTML5 не поддерживается align=”left”, потому что по умолчанию для тега <p> задано выравнивание по левому краю.
Обратите внимание на использование тега
. Он используется в HTML, чтобы создать разрыв строки, как Shift + Enter разбивает строку в текстовых процессорах (MS Word).
Что следует помнить перед тем, как сделать абзац в HTML:
- В HTML тег <p> используется для разметки абзацев веб-страницы. Абзац начинается с тега <p> и заканчивается тегом ;
- Тег <p> является парным тегом, так как с ним связан закрывающийся тег;
- Вы не можете нажать «Enter», чтобы разделить абзацы. В Блокноте они будут разделены, но в браузере они выводятся вместе;
- Пробелы (Enter, пробел, несколько раз нажатая клавиша Tab, чтобы создать пробел) удаляются при отображении в браузере. Это не является методом форматирования абзацев;
- Если вам нужно вывести отступ, вставьте неразрывный пробел ( );
- HTML поддерживает некоторые коды, такие как < (меньше), > (больше), © (символ копирайта);
- Когда вам нужно перезагрузить страницу после того, как исходный код был изменен, нажмите клавишу F5, чтобы обновить данные в браузере;
- Абзац в HTML может выравниваться с помощью атрибута align. align=”right” выравнивает абзац по правому краю. Также поддерживаются значения align=”center”, aling=”justify”;
- Атрибут align=”left” не является обязательным, поэтому не поддерживается в HTML 5. Абзац автоматически выравнивается по левому краю по умолчанию;
- Если вам нужно перенести текст на новую строку в этом же абзаце, вы можете вставить тег <br>. Это создаст новую строку, и она будет принадлежать этому же абзацу;
- <br> - это одиночный тег, поэтому тега </br> не существует. Тем не менее, если вы хотите использовать подход XHTML, вы можете вставить <br />, чтобы указать открытие и закрытие того же тега.