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

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

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

Пример

Давайте на примере посмотрим, как сделать абзац в HTML коде.

Одно или несколько предложений.

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

Форматирование

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

Включение таких параметров приведет к отступу первой строки на 15 пикселей от левого края. Если такие изменения следует применить для всех тегов P, то в файле CSS, который подключается к страницам сайта, можно прописать код, показанный ниже.

Лично я обычно не делаю красные строки при редактировании кода в блокноте или другом редакторе.

Я просто включаю отступы между текстовыми блоками. Для этого в CSS нужно прописать специальные параметры.

p{margin-bottom:25px;}

Если использовать данную конструкцию, то после каждого абзаца появится отступ в 25 пикселей.

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

Хотите узнать больше? Возможно, окажутся полезными мои прошлые публикации на следующие темы:

На этом статью буду завершать и, думаю, теперь сделать абзацы в HTML и красиво их оформить при помощи специальных тегов будет не сложно.

Желаю вам огромных успехов в освоение программирования. Кстати, не задумывались о заработке на информационных некоммерческих сайтах? Просто шикарную информацию предоставил специального для своих читателей в .

Нормальная работа и финансы в сети являются ключевыми темами этого блога. С отдельными перспективами в сети можете ознакомиться прямо сейчас из опубликованных материалов. Я продолжаю подготовку и публикацию нового, а главное реально полезного контента. Подписывайтесь на обновления Workip на свою электронную почту. До связи.

Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.

Все теги форматирования можно разделить на три группы:

1. Теги заголовков (h1-h6 ).

2. Теги оформления основного текста ( , , ,

, 
 и т. д.).
3. Теги группировки (

, 

, 

)

Теги заголовков
Превращают обычный текст в заголовок определённого уровня. Тег 

 создаёт заголовок первого уровня - самый большой и главный (обычно название статьи на странице), 

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

 должен идти 

, и никак не наоборот.

Чтобы понять, как это работает, впишите в html-файл следующий код:
 
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня

Выглядеть в браузере это будет вот так:
Теги оформления основного текста
Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.
Жирный шрифт
Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.
Отвечают за жирное начертание теги 
 и .

Верхний и нижний индексы
Могут использоваться в формулах, уравнениях, обозначении некоторых величин.
За создание нижних индексов отвечает тег 
, для верхних используется тег 
.
X1=32 м2
Уменьшение размера
Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег 

Обычный текст. Уменьшенный текст.
Подчёркивание
Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.
Обычный текст. Подчёркнутый текст.
Зачёркивание
Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег 
.
Курсив
Нужен, чтобы акцентировать на тексте внимание, и может создаваться тегом 
 или 
.

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

   таким образом  a, b, c, вот результат выполнения
программы , а это –  введённый пользователем текст 
отображается примерно так
.

Цитаты и определения
Программный код будет выглядеть 
таким образом 
, переменные обозначаются так: 
a, b, c
, вот 
результат выполнения программы
, а это – 
введённый пользователем текст
. Сохранение исходного форматирования 
отображается примерно так 

.

 
Цитата в теге blockquote.
Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное
определение.Аббревиатура (НПО, ИП).

Общий пример
Чтобы лучше понять, за что какой тег отвечает и как работает, посмотрите нижеследующий код и результат его выполнения.
 
Жирный текст можно сделать тегами strong и b. За курсив отвечают em и
i.
Теги sub и sup используются для создания нижних (x1…xn) и
верхних (42=16) индексов. Del зачёркивает, ins - подчёркивает.
Теги code, kbd, var и samp используются редко и нужны для отображения листинга
программ
 abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат
(Уж небо осенью дышало)
Тег pre сохраняет изначальное форматирование текста, не удаляя пробелы и переносы строк.

Браузер интерпретирует этот код так:

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


Тег 

 осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).

 позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width
, size
, color
, align
 и noshade
 задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.
 
Строка над линией. 
Строка под линией.

списки
изображения
ссылки
таблицы
формы
видео
аудио
Справочник HTML
Справочник CSS
Вёрстка сайта
С заголовком страницы H1 и абзацем P мы частично познакомились в первом уроке о структуре документа html. Теперь рассмотрим теги логической разметки: заголовки, абзацы, списки, видимых элементов элемента Body, и теги физического форматирования подробнее. Для этого слегка изменим нашу страницу-пример или наберем ее заново:
 
В нашей учебной html-странице добавились (отмечены стрелками, однократно): заголовок 2-го уровня - тег H2, два заголовка 3-его уровня - тег H3, еще один абзац - тег P, маркированный список - Ul и несколько тегов физического форматирования. Откроем страницу в браузере:
 

 
Теги H1-H3 обозначают заголовки различного уровня - их всего шесть. Заголовок самого нижнего уровня, соответственно - H6. Использовать заголовки необходимо логически, а заголовок верхнего уровня H1 должен встречаться на странице один раз. Заголовок H1 отображается браузерами крупным шрифтом, а размер шрифта в заголовках следующих уровней - уменьшается соответственно.
 
Поисковые боты придают большое значение содержимому заголовков верхнего уровня. А пользователям легче ориентироваться на странице с логически правильно выстроенными заголовками.
 
Т
еги физического форматирования
 
На странице видно горизонтальную полосу, после второго абзаца - ее создает элемент Hr, не имеющий закрывающего тега. Тег Br означает перевод строки на новую, он тоже не парный - без закрывающего тега. При форматировании текста можно использовать несколько идущих подряд элементов Br - каждый следующий добавит новую пустую строку.
 
Теперь обратим внимание на слово «body» во втором абзаце, заключенное в парный тег B, который задает слову полужирное начертание. А фраза «оформлять текст» отображается курсивом - это достигается с помощью тега I. Тег U задает подчеркивание (его нет в нашем примере).
 

 
Кроме этих тегов, выделяющих фрагменты текста, в HTML существуют еще тег Strong - выделяет важный по значению фрагмент (жирное начертание). И тег Em - чуть менее важный (курсив). Поисковые боты обращают более пристальное внимание на эти два тега, указывающие на важные по логическому смыслу фразы. Целесообразно заключать в них ключевые слова , но перебарщивать с этим не стоит. Это же касается и заголовков.
 
Вот еще несколько тегов физического форматирования текста: Q - выделяет цитату в строке. Блочный элемент Blockquote - в этот тег можно помещать несколько абзацев.
 
Тег Code служит для разметки фрагментов кода, его необходимо использовать с переносами строк Br и неразрывными пробелами: для их обозначения используется спец. символ (первый знак - амперсанд
: клавиша 7 с зажатой Shift в английской раскладке). А вот тег Pre отображает программный код, как есть, с пробелами и столько строк, сколько их в коде.
 
Это наиболее употребимые элементы оформления текста, об остальных тегах форматирования и специальных символах смотрите в Справочнике HTML , расположенного на этом же сайте - в нем удобная навигация по алфавиту.
 
С
оздание списков html
 
Осталось рассмотреть создание списков, у нас он маркированный, и задан парным тегом Ul, а его элементы, или пункты тегом Li (1-ый скриншот). При помощи атрибута type, как для тега Ul, так и для тега Li, мы можем поменять тип маркера. По умолчанию, т.е. если атрибут не указан, его значение равно «disk» - кружок. Можно задать атрибут type со значением «circle» - окружность. Или так: 
 - мы получим список с маркерами-квадратиками.

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

 
Откроем страницу в браузере, наглядно видим: нумерованный список с вложенным в него маркированным списком, для которого значение «square» атрибута type задает маркеры-квадратики.