Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Цитаты и обрыв строки

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

Тег <BLOCKQUOTE> или выделяем длинные цитаты

Тег <BLOCKQUOTE>...</BLOCKQUOTE> используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега BLOCKQUOTE</title>
</head>
<body>
 <p>Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:</p>
 <blockquote>
  <p>Очень часто тег BLOCKQUOTE используют не по прямому назначению -
     выделение цитируемого текста. А только ради боковых отступов, которые
     он создает. В принципе, подобное применение этого тега не противоречит
     синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все
     же лучше подобным образом его не использовать, так как BLOCKQUOTE
     предназначен именно для выделения длинных цитат.</p>
 </blockquote>
</body>
</html>

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

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

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

Тег <Q> или выделяем небольшие цитаты

А вот тег <Q>...</Q> используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, <Q> — это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.

Пример выделения цитат

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Выделяем цитаты в тексте</title>
</head>
<body>
<p><q>Для изучения языка гораздо важнее свободная любознательность,
   чем грозная необходимость.</q> Августин Аврелий.</p>
<p><q>Чему бы ты ни учился, ты учишься для себя.</q> Петроний.</p>
</body>
</html>

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

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

Чему бы ты ни учился, ты учишься для себя. Петроний.

Тег <BR> или принудительный обрыв строки

Иногда требуется, чтобы строка текста не продолжалась во всю ширину доступного пространства, а оборвалась в нужном нам месте и продолжилась на следующей строке. Но как вы помните — браузеры игнорируют простые переводы строк в HTML-коде, как будто их нет. В таких случаях нам поможет тег <BR>, который и осуществляет принудительный обрыв строки в месте его установки.

Тег <BR> тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента <BR> нет закрывающего тега, то есть он является пустым, потому что не может иметь содержимого.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Тег BR, обрыв строки</title>
</head>
<body>
<p>Цель творчества — самоотдача,<br>А не шумиха, не успех.<br>
Позорно, ничего не знача,<br>Выть притчей на устах у всех.<br>
<strong>Б. Пастернак.</strong></p>
</body>
</html>

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

Цель творчества — самоотдача,
А не шумиха, не успех.
Позорно, ничего не знача,
Выть притчей на устах у всех.
Б. Пастернак.

Вы вполне можете спросить: «А зачем мне использовать тег <BR>, если я могу просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег <P> создает сверху и снизу поля пустого пространства, а тег <BR> этого не делает. Кроме этого параграфы на то и существуют, чтобы в каждом из них содержались осмысленные и законченные выражения, а не куски текста.

Кстати, довольно часто на сайтах можно увидеть, что <BR> используют лишь для того, чтобы создать несколько пустых строк. Да, если его указать подряд несколько раз (<BR><BR><BR>...), то можно сделать вертикальные отступы любых размеров. Но, хотя это и не противоречит синтаксису HTML, я не рекомендую вам так поступать, так как данный тег для этого не предназначен.

Домашнее задание.

  1. Сделайте так, чтобы фон страницы был черного цвета, а текст — белого.
  2. Создайте заголовок статьи и двух ее разделов. Укажите для них шрифт Verdana и пусть второй подзаголовок располагается по центру страницы.
  3. Напишите под первым и вторым заголовком по параграфу, а под третьим — цитату, состоящую из двух параграфов.
  4. Выделите в первом параграфе две цитаты и пусть одна будет написана жирным шрифтом, а вторая — курсивом.
  5. Сделайте в самом последнем параграфе пять обрывов строки и пусть текст в нем располагается по центру страницы.
Выравнивание содержимого← Содержание →Что такое спецсимволы HTML?
Учебник HTML