Элементы цитирования и направление текста. HTML Цитаты

Здравствуйте, друзья!

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

Так вот, одним из недостатков выбранной мною темы было невыразительное выделение цитаты. Она выделялась только дополнительным отступом слева. Пришлось дорабатывать CSS-стили, чтобы этот элемент текста стал более заметным и красивым.

Назову три причины:

1. Вы показываете читателям, что данная часть текста является цитатой. Это необходимо для соблюдения авторских прав того человека, которого вы цитируете. С другой стороны, ссылка на авторитетного автора придает вес и вашей статье.
2. Поисковые системы «любят» уникальные тексты, и, если не будет правильно оформлена цитата, это будет засчитано как плагиат, и рейтинг сайта будет снижен, его позиции в поиске опустятся.
3. Особый вид цитат делает текст внешне более разнообразным и привлекательным. Его легче читать.

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

Редактирование CSS-стилей

Первым и наиболее правильным способом оформления цитаты следует считать использование тега blockquote и его стилей. Хотя с помощью CSS-правил можно выделить любой фрагмент (я об этом писал в статье ), только тег blockquote дает знать поисковым системам, что этот фрагмент является цитатой, и он не может быть уникальным.

Именно этот тег ставится в код, если мы используем кнопку в

Но, как я уже отметил, не всегда стили этого тега такие, как нам хочется. Чтобы их отредактировать, нужно найти соответствующий код в файле style.css и заменить правила, прописанные для тега blockquote , на свои.

Этот файл можно редактировать двумя способами:

1. Скачать его с помощью FTP-клиента с сервера на свой компьютер, открыть в , внести изменения и снова закачать. Файл style.css находится по адресу wp-content/themes/ваша_тема/style.css .
2. Можно воспользоваться встроенным в WordPress редактором кода. Чтобы его открыть в панели управления WP выбираем Внешний вид – Редактор . К сожалению, этот редактор не показывает номера строк, что затрудняет поиск.

Прежде, чем вносить изменения в файл style.css , отредактируйте код с помощью в браузере Google Chrome или аналогичном в браузере Mozilla Firefox . С помощью этих средств можно сразу визуально увидеть, как будет выглядеть цитата на вашем сайте.

Примеры оформления цитат

Цитата с символом «кавычки»

Этот символ считается общепринятым для обозначения цитат, поэтому применяется чаще всего. Кавычки можно вставить, используя рисунок, что встречается чаще, а можно это сделать, применив код символа «\201C» , что и показано в приведенном примере.

Вот изображение

А вот соответствующий код

blockquote { background: none repeat scroll 0 0 #fea; color: #009a82; font-family: Georgia,serif; font-size: 18px; font-style: italic; line-height: 1.45; padding: 1.25em 50px; position: relative; width: 750px; } blockquote:before { color: #009a82; content: "\201C"; display: block; font-size: 60px; left: 1px; position: absolute; top: 1px; }

• В этом коде во второй строке #fea – цвет фона, можно заменить на свой,
• 3 строка – цвет шрифта,
• 4, 5, 6, 7 – параметры шрифта,
• 8, 9 – положение фрагмента,
• 10 – ширина блока, ее можно указать в процентах, например, 90%.

• 13 – цвет,
• 16 – размер,
• 17-19 – положение.

Выделение рамкой

Вот пример:

А вот простой CSS-код для него:

blockquote { color: #333; font-family: Verdana, Geneva, sans-serif; border: 1px dashed #999; background: #F8F4AB; padding: 10px 20px; }

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

Плагин WP-Note для оформления фрагментов текста на блоге

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

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

Теги плагина WP-Note

Редактирование плагина

Если варианты оформления, установленные по умолчанию, вам не нравятся, или они не гармонируют с дизайном вашего сайта, их можно изменить. Но для этого уже придется вносить изменения в файл стилей. Найти его можно по адресу wp-content/plugins/wp-note/style.css.

Можно также использовать и встроенный редактор WordPress. Для этого в панели управления выбираем Плагины – Редактор , потом справа в выпадающем списке находим Wp-note и нажимаем кнопку Выбрать , появится список всех файлов плагина.

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

До скорой встречи!

Цель

Представить (в типовом варианте - длинную) цитату, как блок цитирования (в противоположность коротким цитатам, вставленным в текст абзаца).

Типичное отображение

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

Основной синтаксис

текст цитаты

Возможные атрибуты

Допустимый контекст

Содержимое

Примеры

The original context of the saying O tempora, o mores is the following:

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum.

Cicero, Oratio in Catilinam Prima, 2

Примечания

Цитирование - это точное копирование чьих-то слов. Если Вы излагаете чью-то речь собственными словами - это уже не цитирование, и должно быть представлено как простой текст (без какой-либо специальной разметки).

Когда описывается человеко-машинное взаимодействие , используйте специальные элементы CODE , SAMP и KBD для цитирования программного кода, листингов программ или ввода с клавиатуры.

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

Хорош тоном считается специфицировать источник цитирования, иногда это даже требуется законом (копирайт). Поэтому, если это возможно, обеспечьте связь к источнику документа на Web в добавление к спецификации источника в тексте.

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

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

При цитировании Вам может понадобиться удалить некоторые слова из содержимого цитаты, тогда Вы должны четко обозначить опущенное (нотация вида - и... и - наиболее распространенный способ сделать это). Совершенно неуместно в таких случаях избирательно приводить чьи-то цитаты, так, что кому-то может показаться, что сказано нечто совершенно отличное от того, что в действительности имелось в виду, может быть даже совсем противоположное. Когда Вам требуется добавить к цитируемому тексту разъясняющие слова в качестве пояснений, наиболее применимо добавление таких разъяснений другим шрифтом, например, курсивом . Также Вы должны четко показать, что пояснения не являются частью оригинала, и лучший способ сделать это - разместить свой текст в квадратных скобках.

На сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме .
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина: . Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS : сделать рамочку или просто отделить текст пунктирной границей.
Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS кода.

Пример 1:

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

CSS код:

blockquote { border:solid #999; border-width:3px 0; margin:10px 40px; padding:15px; font-size:14px; color:#999; }

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

Пример 2:

Блок сразу заметен в тексте благодаря яркой границе слева.

CSS код:

blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д...

Пример 3:

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

CSS код:

blockquote { border: 3px 0 solid #000; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px "Arial Black"; }

Пример 4:

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

Раскаяться никогда не поздно, а согрешить можно и опоздать.

CSS код:

blockquote { border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; } blockquote p{ border-left: solid #666 1px; margin:0; padding:15px; color:#333; font:16px "Times New Roman"; }

Пример 5:

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

” Бог у всех один – провайдеры разные.“

CSS код:

blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }

Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .css При написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.

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

С Уважением, Андрей

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

Тег

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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