Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / HTML /
Параграфы и выравнивание текста в HTML
С некоторыми простыми возможностями HTML мы уже познакомились. Пришло время начать разбираться с основным элементом HTML-страницы - с текстом.
Итак, чтобы текст смотрелся на странице красиво и удобно читался, его лучше разбить на параграфы (абзацы). Однако браузер не воспринимает обычный перевод строки, отступы и т.п., как вы видите это в редакторе. И если не принять мер, то браузер выведет текст как одну сплошную неразрывную строку.
Параграфы в HTML
Параграф - это мелкое подразделение текста внутри главы или раздела.
Абзац - это отрезок письменной речи, состоящий из одного или нескольких предложений.
То есть строго говоря, параграф и абзац - это не одно и тоже (в параграфе может быть несколько абзацев). Однако очень часто мы, говоря “параграф” и “абзац” не делаем каких-то различий. И в любом случае в HTML параграф - это то же, что и абзац. То есть для выделения абзаца в HTML существует парный тег <p>, что является сокращением от слова paragraph, но, если опять же строго придерживаться терминологии, то это тег абзаца. Пример:
<p>
Здесь текст абзаца.
</p>
<p>
А это второй абзац. При использовании тега абзаца между абзацами будет просвет (вертикальный отступ).
</p>
Кроме того, абзацы можно формировать с помощью тега перевода строки <br>, например, так:
Здесь текст абзаца.
<br><br>
А это второй абзац. Два тега перевода строки также сделают отступ между абзацами.
Есть ещё тег <div> (тоже парный), с помощью которого также можно разбить текст на блоки. Однако <div>, в отличие от <p>, не делает увеличенного вертикального отступа между блоками текста, и если вы хотите, чтобы между абзацами был просвет, то придётся принимать дополнительные меры (например, устанавливать отступы или просто использовать <br>).
И ещё - параграф в HTML не может содержать в себе другие параграфы, а также тег <div>. Но тег <div> может содержать в себе как параграфы, так и другие теги <div>.
Вообще об этом ещё можно много рассказывать, но всему своё время. А пока разберёмся с тем, как выполнить выравнивание текста внутри тегов <div> и <p>. Также можно в неограниченном количестве использовать тег <br> там, где вам вздумается.
Выравнивание текста в HTML
Иногда задают вопрос: какие есть теги HTML для выравнивания текста. Вопрос поставлен неправильно, потому что таких тегов нет. Но есть атрибуты выравнивания текста, которые работают почти со всеми тегами.
Большинство браузеров автоматически выравнивают текст по левому краю. Однако иногда возникает необходимость выровнять текст по правому краю, по центру или растянуть по всей ширине. Для этого можно использовать атрибут align. Выравнивание будет распространяться до того места, где браузер обнаружит следующий тег <p> или </p> (либо другой тег разбивки текста на блоки, например, <div>).
Атрибут может принимать одно из следующих значений: left (выравнивание текста по левому краю), right (выравнивание текста по правому краю), center (выравнивание текста по середине) или justify (растянуть на всю ширину).
Пример использования:
<p>
Это параграф (абзац), созданный с помощью тега Р.
</p>
Это параграф (абзац), созданный с помощью тега BR.
<br><br>
<div>
Это параграф (абзац), созданный с помощью тега DIV.
</div>
<div>
Это параграф (абзац), также созданный с помощью тега DIV.
</div>
<p>
Выравнивание текста по левому краю. Можно не использовать атрибут
align, так как текст по умолчанию выравнивается по левому краю.
</p>
<p align="right">
Выравнивание текста по правому краю.
</p>
<p align="center">
Выравнивание текста центру.
</p>
<p align="justify">
Равномерное распределение текста по всей ширине страницы.
Равномерное распределение текста по всей ширине страницы.
Равномерное распределение текста по всей ширине страницы.
Равномерное распределение текста по всей ширине страницы.
</p>
На этом пока закончим с выравниванием, хотя есть и другие способы. Ну а если вам не терпится изучить все премудрости вёрстки сайтов прямо сейчас, то решение здесь.