Тег абзаца. Урок четвертый. Учебник HTML - Параграфы и заголовки Html расстояние после параграфа

Оставьте комментарий 6,950

Задача

Добавить отступ к первой строке каждого абзаца.

Решение

Когда требуется установить абзацный отступ, который ещё называется красной строкой, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается заданной изначально. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Пример 1. Отступ первой строки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Отступ первой строки

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

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

Результат данного примера показан на рис. 1.

Оглавление:

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки .

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Добро пожаловать на наш сайт!

Добро
пожаловать на наш сайт!

Добро пожаловать
на наш
сайт!

Исключение составляет тег

, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.

Теперь перейдем к рассмотрению структурных элементов текста в разметке html.

Абзацы в языке HTML

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

. Синтаксис создания абзацев следующий:

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

А это уже второй абзац

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег

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

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

Сайт об автомобилях.

Классификация автомобилей

Легковой;

Грузовой;

Внедорожник;

Багги;

Пикап;

Спортивный;

Гоночный.

При открытии данного файла будет примерно такая картина:

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег

Поддерживает атрибут align. Он может принимать одно из четырех значений:

left — выравнивание текста по левому краю;
center — выравнивание текста по центру;
right — выравнивание текста по правому краю;
justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

Этот текст в абзаце на html странице будет выровнен по левому краю!

Этот текст в браузере отобразится по центру страницы!

Этот текст будет выровнен по правому краю!

А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!

И так это отобразится в браузере:

Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег