пятница, 22 февраля 2019 г.

Разметка абзацев (практические сведения о языке 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>
<H1 align=center> Это заголовок первого уровня </H1>
<H2> Это заголовок второго уровня </H2>
<H3> Это заголовок третьего уровня </H3>
<H4> Это заголовок четвертого уровня </H4>
<H5> Это заголовок пятого уровня </H5>
<H6> Это заголовок шестого уровня </H6>
<HR>
<HR>

 </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>

    <p>
      Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым <br>
      некоторые относят и красную строку, считая, что употребление ее не так уж и важно.<br>
      Однако надо понимать, что любая запятая несет в себе как эстетическую, так <br>
      и смысловую нагрузку, а не только является данью правилам грамматики – это<br>
      касается и форматирования.
    </p>

  </body>
</html>

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

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





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

Комментариев нет :

Отправить комментарий

Номер страницы