А вот что вы увидите, после обработки написанного кода:

Блочные элементы оформления текста — заголовки

-

, абзац

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

,

,...,

. Вот как выглядят все заголовки в обработанном виде:

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

А теперь поговорим про тег выделения абзаца

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

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

В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.

Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!

– в процессе создания сайта, нам много приходится работать с текстовыми блоками, или текстовыми фразами. Однажды, мне нужно было добавить текстовую фразу, таким образом, чтобы перед этой текстовой фразой был некоторый отступ текста от края 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 код, который демонстрирует работу данного способа:

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

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

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

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