Красная строка в хтмл. Форматирование HTML-абзаца

Итак, приступаем непосредственно к изучению языка HTML. Напоследок еще пару слов не по теме.

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

Если дела обстоят очень уж туго, и вы пользуетесь обыкновенным блокнотом, то для просмотра необходимо сохранить исходный текст с расширением.htm или.html, а затем просмотреть сохраненный файл браузером. Если у вас стоит Windows, то браузер Internet Explorer встраивается автоматически при инсталляции системы.

Ну вот, кажется, и все.

Приступим к делу.

Обязательные тэги (теги)

Существует несколько основных тэгов (тегов) HTML, которые должны присутствовать в тексте любой Вэб-страницы. Каждая Вэб-страница обязана содержать тэг (тег) , располагаемый в самом начале. Этот тэг (тег) описывает ваш документ как Вэб-страницу, выполненную в формате HTML. Непосредственно за дескриптором обычно следует тэг (тег) , который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней.

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

Затем следует тэг (тег) , который указывает на начало собственно "тела" Веб-страницы. В этом разделе размещаются весь остальной текст, графика, таблицы и другие элементы содержимого страницы, которые увидит посетитель, обратившийся к вашему сайту.

Пример:

Online обучение: HTML Текст сайта

Нормальный HTML-редактор уже имеет набор вышеуказанных тэгов (тегов) при создании новой страницы. Следует сказать, что к выбору наименований Вэб-страниц следует отнестись со всей серьезностью, т.к. они используются поисковыми системами для формирования каталогов Веб-страниц. Поисковая система - это сайт, помогающий пользователям быстро находить интересующую их информацию. Ваша страница с большей вероятностью окажется найденной поисковой системой, которой задан определенный набор ключевых слов поиска, если эти слова присутствуют в названии страницы. Среди самых популярных поисковых систем следует назвать Yandex, Google, Aport, Yahoo, Rambler.

Создание абзаца, символов пробела, заголовка

Веб-браузеры обычно не принимают во внимание те символы перевода строки, которые вносятся в текст пользователем на этапе ее формирования. Для начала нового абзаца служит тэг (тег)

.

После открытия страницы в окне Веб-браузера все абзацы ее текста, помеченные тэгом (тегом)

, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

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

Пример:

HTML-код: абзац выровнен влево... абзац выровнен вправо... абзац выровнен по центру... абзац выровнен по ширине...

Отображение в браузере: абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине

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

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

Основное использование этого тэга (тега) - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен, также, в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы.

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

Абзац 1

Абзац 2

Каждый абзац начинается с тега

И заканчивается необязательным закрывающим тегом

.

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

В примере 7.1 показано применение абзацев для создания отступов между строками.

Пример 7.1. Использование абзацев

Применение абзацев

В одних краях ещё февраль, в других - уже апрель.

Проходит время, вечный счёт: год за год, век за век...

Во всём - его неспешный ход, его кромешный бег.

В году на радость и печаль по двадцать пять недель.

Мне двадцать пять недель февраль, и двадцать пять - апрель.

По двадцать пять недель в туман уходит счёт векам.

Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

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

Рис. 7.1. Отступы на веб-странице при использовании абзацев

Как видно из рисунка, при использовании тега

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

Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).

Пример 7.2. Тег

Переносы в тексте

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

М. Щербаков

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

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

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

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

P {
text-indent: 10px;
}

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

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

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Комментарии (9 ):

31.05.2013 13:10:03

Здравствуйте Михаил, помогите решить проблему со следующим css-кодом: .bam { border: 1px solid black; border-radius: 8px; margin-bottom: 4%; text-align: left; width: 84%; } .bam .author { background-color: White; border-bottom: 1px solid black; border-top-right-radius: 8px; border-top-left-radius: 8px; font-weight: bold; padding:4px; } .bam .text { background-color: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; } Необходимо, чтобы внутри ".bam .text" переносился текст на другую строчку, если он не умещается на одной строке. Но почему-то он не переносится, а вылезает за пределы блока. Помогите решить эту проблему.

Ответить

06.06.2013 22:42:20

Здравствуйте Михаил, вы случайно не знаете, как найти выход из следующей ситуации: есть блок, а внутри него еще один блок, и в этот блок, что внутри записывается текст (длина текста заранее не известна). Так вот, как сделать так, чтобы высота блока-родителя зависела от высоты блока внутри него (с текстом)? А то у меня почему-то получается что высота блока-родителя меньше чем высота внутреннего.

Ответить

Admin 06.06.2013 23:32:40

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

Ответить

07.06.2013 11:11:09

а вы посмотрите: http://progbase.ru/about.php

Ответить

Admin 07.06.2013 21:54:37

Надо использовать - поставьте данный блок в разные места и смотрите, что меняется. Как только всё станет в порядке, там его и оставьте.

Ответить

13.09.2013 21:39:34

Здравствуйте! Помогите, пожалуйста,в окне этой подсказки при наведении сделать отступы,да и другие стили текста.Чуть-чуть что-то не получается и все.Спасибо заранее. .podskazka{ background-color: #FF6600; padding:0px; border:3px solid #66FFFF; position:absolute; margin: 3px; width: 200px; min-height: 50px; max-height: auto; white-space: normal; border-bottom: 1px dashed #000080; } function podskazka() { this.show = function(text,x,y) { var div = document.createElement("div"); div.className = "podskazka"; div.id = "metka"; div.innerHTML = text; var koordx = x + 0; var koordy = y + 20; div.style.left = koordx + "px"; div.style.top = koordy + "px"; document.body.appendChild(div); } this.hide = function() { var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); } } var vsplil = new podskazka(); подсказка Подсказка и далее по тексту

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

Итак, , способ первый - самый, естественный и простой. Чтобы сделать отступ перед текстом, добавим перед текстом html код пробела - Добавить html код пробела можно в любом html редакторе.

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

HTML отступ текста слева , используем код пробела

В данном примере, перед выбранным нами текстом код пробела - & nbsp ; добавлен четыре раза, в результате, получим нужный нам отступ.

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

Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

Но у данного способа есть существенный недостаток. Для того, чтобы сделать отступ для текста достаточно большой по длине, в html код, перед текстом придется добавить большое количество знаков пробела, что может выглядеть не красиво, громоздко и не профессионально.

Одним из вариантов решения этой проблемы, является следующий способ задания отступа.

HTML отступ текста , способ второй - этот способ основан на свойствах тега blockquote. Данный тег задает отступ примерно 40 пикселей слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования данного способа приведен ниже:

слева, используем тег blockquote

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

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

HTML отступ текста , способ третий.

Здесь мы воспользуемся свойством параметра text-indent каскадных таблиц стилей CSS.

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

Мы рассматриваем, пример с коротки текстовым блоком, поэтому свойства text-indent вполне подходят для нашего случая.

Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent разные значения аргументов, мы можем изменять величину отступа текста:

HTML отступ текста , работает стиль CSS - text-indent

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

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

В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

слева, используем изображение

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

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

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

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

Тег

В HTML позволяет задать абзацы, а атрибут align выравнивает их по левому краю, по правому краю, по центру или по ширине. Помимо них мы будем использовать глобальный атрибут style .

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

Можно выровнять абзац, используя атрибут align со следующими значениями:

text-align: left|right|center|justify|initial|inherit;

Скопируйте следующий код в файл .html .

Выравнивание абзаца с помощью атрибута Style

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

Этот абзац выровнен по правому краю

Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.

В окне браузера HTML код абзаца выглядит следующим образом.

Интервалы между строками

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height . Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода , который выводит абзацы с различными междустрочными интервалами:

Установка междустрочного интервала с помощью атрибута Style

В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине.

Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой.

Ниже приведено несколько различных способов использования значения line-height для атрибута style :

: Устанавливает межстрочный интервал 13 пикселей;

: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта;

: Устанавливает высоту строки 14 пикселей.

Отступы

Я использовал термин »отступы «, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding , чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

Отступы абзацев с помощью атрибута Style

Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.

Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.

А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.

Отступы между абзацами (отступ перед и отступ после абзаца)

В HTML или CSS нам это не нужно. Мы можем просто указать стиль padding для элемента

Padding-top и padding-bottom задают пустое пространство до и после абзаца, которое работает, как отступ сверху или снизу. Посмотрите на приведенный ниже пример тега

Я установил для первого абзаца HTML отступ 10 пикселей перед вторым и 50 пикселей после второго абзаца:

Отступы между абзацами с помощью атрибута Style

Для этого абзаца не заданы отступы до или после. Это обычный абзац, выровненный по ширине. Как вы уже знаете, мы можем выровнять абзац по ширине с помощью кода style=”text-align:justify” внутри тега.

Этот абзац выронен по ширине. Он также имеет отступ в 10 пикселей перед абзацем и 50 пикселей после. Внутри тега я задал 3 стиля.

Это обычный абзац без отступов и с выравниванием по умолчанию.

Что следует помнить

• Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align ;
• HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
• Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
• Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
• Стили могут быть заданы тремя различными способами — встроенные (внутри тегов ), внутренние (внутри того же HTML-файла с помощью элемента ) и внешние (в отдельном файле );
• Лучшей практикой при разработке веб-сайтов считается использование внешнего файла CSS . Таким образом, мы можем разделить контент и представление;
• Style является глобальным атрибутом, поэтому его можно использовать с любыми другими элементами, а не только с элементом

  ;

• Стиль text-align выравнивает абзац по левому краю, по центру, по правому краю или по ширине;
• Междустрочный интервал для абзаца можно задать с помощью стиля line-height . Он может принимать различные значения;
• Вы можете указать для line-height кратные значения (1 для одинарного междустрочного интервала, 1,5 для полуторного, 2 для двойного, 3 для тройного и так далее ), а также пиксели, проценты и т.д.;
• Отступ для абзаца в HTML можно задать с помощью стиля padding-left или padding-right . Может принимать значения в пикселях, процентах и т.д.;
• Интервалы между абзацами в HTML можно задать с помощью стилей padding-top или padding-bottom . Для этого также допустимы значения в пикселях, процентах и т.д.

Перевод статьи «HTML Paragraph Formatting » был подготовлен дружной командой проекта