Тег абзаца html: Тег p, параграф — Структура HTML-документа — HTML Academy

Leave a Comment / Html / By /

Разметка абзацев (практические сведения о языке HTML):ИнфоБлог


Начало абзаца (paragraph) задает тег <Р>. Закрывающий тег </Р> тоже воз­можен, но необязателен, и на практике им не пользуются[1].

Обычные концы абзацев, которые ставят текстовые редакторы, здесь не дей­ствуют: браузеры их просто не замечают. Мы сможем нажимать Enter в HTML-редакторе для своего удобства, а для браузера приберегать тег Р. 


Текст в абзаце может быть выровнен влево, вправо, по обоим краям и по центру. Для этого применяют атрибут ALIGN (выравнивание):

<Р ALIGN =»LEFT»> — выравнивание влево;

 <Р ALIGN=»RIGHT»> — выравнивание вправо;

<Р ALIGN=»CENTER»> — выравнивание по центру;

<Р ALIGN=»JUSTIFY»> — выравнивание по обоим краям.

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

[2].

Каждый следующий тег абзаца отменяет форматирование предыдущего. При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой. Если вам нужно, чтобы абзацы шли без пустой строки, и чтобы вырав­нивание распространялось и на следующий абзац, вместо нового абзаца ставьте тег обрыва строки (break): <BR>. Например, строки стихотворения надо  отделять друг от друга разрывом строки, а четверостишия — двумя разрывами или одним абзацем. Тег BR — непарный.

Для форматирования абзацев можно пользоваться также тегом раздела (division) <DIV>. Он работает точно так же, как Р, в нем можно использовать атрибут выравнивания ALIGN, но между двумя соседними разделами не оставляется пустая строка. Здесь закрывающий тег необходим — </DIV>.

Раздел считается главнее абзаца — новый абзац, для которого не указан способ выравнивания, не отменяет оформления раздела, и текст выравнивается так, как задано в теге раздела <DIV ALIGN=». ..»>.

Для центровки текста есть специальный тег <CENTER>…</CENTER>. Центру­ется не только текст, а вообще все, что лежит внутри этого контейнера: рисунок, таблица, линия, текст.

Шесть стандартных тегов предусмотрено для оформления заголовков: <Н1>, <Н2>,…, <Нб>. Причем у Н1 — самый крупный шрифт, у Н6 — самый мелкий. Все они тоже могут иметь атрибут выравнивания ALIGN.

Код прописан в Блокноте

<HTML>

 <HEAD>

     <TITLE> Заголовки </TITLE>

 </HEAD>

 <BODY>

<h2 align=center> Это заголовок первого уровня </h2>

<h3> Это заголовок второго уровня </h3>

<h4> Это заголовок третьего уровня </h4>

<h5> Это заголовок четвертого уровня </h5>

<H5> Это заголовок пятого уровня </H5>

<H6> Это заголовок шестого уровня </H6>

 </BODY>

</HTML>

Результат такой разметки в браузере

Есть также особое оформление для цитат — тег <BLOCKQUOTE>.

Все, что рас­положено между открывающим и закрывающим тегом, будет сдвинуто вправо и отделено от предыдущего и последующего текста пустой строкой.

А как сделать абзацный отступ? — продолжает свой допрос любитель тек­стовых редакторов.

Не думайте, что я опять вам это запрещу! Но вопрос не такой простой, как можно подумать.

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

Что же делать?

Поставить вместо простых пробелов неразрывные (non breaking space), которые и создадут абзацный отступ. Неразрывный пробел в HTML записывается такой последовательностью из пяти символов: &shy — непременно строчными буквами. Ставите пять-семь таких кучерявых объектов в начале абзаца и имеете абзацный отступ. Кто спорит, это неудобно да и увеличивает объем файла. Но американцы, разрабатывавшие стандарты, к оформлению текста абзацными отступами не привыкли, а музыку заказывают они.  Ну, и кроме того, в любом хо­рошем редакторе HTML вы сможет сделать простенькую макрокомандочку, которая будет вам сразу ставить нужное число этих штуковин.

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

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

Код прописан в Блокноте

<!doctype html>

<html>

  <head>

    <style>

      p { text-indent: 25px; }

    </style>

  <head>

  <body>

      Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым <br>

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

<br>

      Однако надо понимать, что любая запятая несет в себе как эстетическую, так <br>

      и смысловую нагрузку, а не только является данью правилам грамматики – это<br>

      касается и форматирования.

  </body>

</html>

Результат такой разметки в браузере

Чтобы сдвинуть абзац от левой границы экрана, можно воспользоваться те­гами <UL> или <ОL>. Каждый такой UL или ОL сдвигает левую границу абзаца вправо. Два UL’a — вдвое больший сдвиг, три — соответственно еще больше. За­крывающие теги </UL> и </ОL> сдвигают левую границу на одну позицию назад, влево.

Вообще-то, ОL и UL предназначены для создания нумерованных и ненумеро­ванных списков. Но их можно использовать и таким вот образом. Кроме того, сдвиг левой границы текста можно сделать и с помощью одного или нескольких тегов <BLOCKQUOTE > (выделение цитат).

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

Литература:

А.Левин. Самоучитель полезных программ.Питер. 2008



[1] При работе со стилевыми таблицами CSS вам придется все-таки закрывать контейнеры Р.

[2] Кстати, обращаю ваше внимание на то, что и вручную делать переносы нельзя: вы нико­гда не знаете, на  какую ширину экрана растянется ваш текст (экраны у людей очень уж разные), а значит, не удастся угадать, на какие слова попадут концы строк. Есть, правда, в языке HTML специфический объект — выражение, состоящее из пяти символов: &shy; Если эту бяку вставить в середину слова, она будет воспринята как значок мягкого (то есть, видимого только когда попадает на конец строки) переноса.

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


теги форматирования абзацев и текста в html

Цель урока: изучение основных тегов для форматирования текста html и абзацев.

Содержание:

  • Элементы форматирования текста
    • Заголовки
    • Блочная цитата
    • Преформатированный текст
    • Курсив, жирность, подчеркивание и другие теги
    • Горизонтальная линия
    • Горизонтальная линия
  • Атрибуты тегов
    • Атрибуты тега body
  • Теги логического форматирования текста
  • Элементы форматирования абзацев
    • Цвет и гарнитура шрифта
    • Специальные символы

Элементы форматирования текста

Заголовки

  • Для размещения заголовков существует тег <h> с номером уровня заголовка.

    • <h2></h2>

  • Самый крупный заголовок соответствует тегу <h2>, соответственно заголовок самого низкого уровня (самый мелкий размер шрифта) —
    <h6>    .
  • Базовый размер шрифта на странице соответствует заголовку <h4>:
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Блочная цитата

<blockquote></blockquote>

Для размещения в тексте цитаты используется тег <blockquote>:

Преформатированный текст

<pre></pre>

Для того, чтобы сохранить в тексте все пробельные символы, необходимо использовать тег <pre>. Но при этом следует учесть, что для содержимого данного тега невозможно задать стиль шрифта:

<pre>
Вот иду я,
	заморский страус,
		в перьях строф, 
			размеров и рифм.
 
 
Спрятать голову, 
	глупый, 
		стараюсь,
			в оперенье звенящее врыв.
Вот иду я,
	заморский страус,
		в перьях строф, 
			размеров и рифм.
Спрятать голову, 
	глупый, 
		стараюсь,
			в оперенье звенящее врыв.

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

Горизонтальная линия

<hr>

Данный элемент служит для разделения некоторых структурных элементов текста друг от друга. Либо может быть использован просто как эстетический элемент оформления документа:

<h4>Горизонтальная линия</h4>
<hr>
<p>Lorem ipsum dolor sit amet.</p>

Горизонтальная линия

Lorem ipsum dolor sit amet.

Атрибуты тегов

  • Для уточнения действия некоторых тегов они дополняются атрибутами.
  • Так, у рассмотренного тега горизонтальной линии есть дополнительные свойства, выраженные в атрибутах
    • size — ширина линии,
    • width — длина линии,
    • align — выравнивание линии

    и другие.

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

Атрибуты тега body

Для начала рассмотрим два основных атрибута тега body:

  • bgcolor — задний фон страницы и
  • text — цвет текста на всей странице.

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

<body text="#00ff00">

или

<body text="green">


Перед указанием цвета в 16-й системе обязательно ставится символ «шарп» — #
Для подбора подходящего цвета перейдите на страницу палитры цветов онлайн.

Теги логического форматирования текста

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

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

Элементы форматирования абзацев

  • Для перехода на другую строку текста служит пустой элемент <br>.
  • Тогда как для выделения в тексте абзаца служит элемент <p>, содержимое которого и является сам абзац. Перед абзацем и после него добавляются отступы, но красная строка при этом не предусмотрена.

Пример совместного использования тегов <br> и <p>:

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

Текст: Файл задания 1.

Желаемый результат:

Цвет и гарнитура шрифта

Для форматирования шрифта существует тег <font>. Однако, тег уже практически не используется.

<font></font>

Тег используется только со своими атрибутами:

  • size — размер шрифта, от 1 до 7 (3 — базовый размер, 6 — размер заголовка h2)
  • face — семейство шрифта (serif — с засечками, sans-serif — рубленый или без засечек, monospace — моноширинный)
  • color — цвет

Пример:

<font size="4" color="#ff0000" face="Arial, Verdana, sans-serif">
Текст красного цвета, шрифт без засечек
</font>

Результат а браузере:


Текст красного цвета, шрифт без засечек

Специальные символы


        код html
©	 &cоpy;	  Копирайт
®	 &rеg;	  Знак зарегистрированной торговой марки
™        &trаde;  Знак торговой марки
	 &shу;	  Мягкий перенос
×	 &timеs;  Умножить
÷	 &dividе; Разделить
±	 &рlusmn; Плюс/минус
≤	 &lе;	  Меньше или равно
≥	 &gе;	  Больше или равно

Задание html 2:
Скачайте файл с текстом для задания и изображение. При помощи редактора или блокнота выполните форматирование документа, сделав результат максимально похожим с картинкой.

Задание html 3:
Скачайте файл с текстом для задания. Откройте файл в редакторе кода (например, notepad++). Выполните подряд все задания, указанные в комментариях html. Протестируйте результат в браузере.

Как использовать тег в HTML

В HTML абзацы определяются тегом HTML

. Элемент абзаца в документе HTML состоит из содержимого — текста, изображений или другого содержимого, например полей формы, — которое появляется между открывающим тегом

и закрывающим тегом

.

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

В этом посте мы объясним, как использовать тег

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

Тег абзаца в HTML Пример

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

Вот простой пример использования тега

 в HTML.

Как видите, после закрытия тега

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

Как использовать тег

в HTML

Теперь, когда мы предоставили пример, давайте рассмотрим, как использовать этот тег в HTML.

Что означает

в HTML?

— HTML-тег абзаца. Добавление

в документ HTML, за которым следует текст, создаст абзац на вашей странице. Добавление тега

завершит абзац.

Категория HTML

Элементы HTML сгруппированы в категории содержимого в зависимости от их назначения.

Элемент

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

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

Категория потокового контента имеет несколько подкатегорий:

  • Элементы заголовков, например

    ,

     до
  • Элементы секционирования, такие как
    ,
     и  
  • Фразовые элементы, такие как ,   и
  • Встраиваемые элементы, например