Який тег міститься блок цитати. Оформлення цитат на WordPress за допомогою CSS та плагіна
У цій статті ми з Вами розглянемо як на мові HTMLоформити дослівну витримку з будь-якого тексту, або одним словом "цитата", розглянемо нюанси роботи з різноспрямованим текстом та східно-азіатськими символами.
Відповідно до чинного законодавства Російської Федераціїдопускається без згоди автора чи іншого правовласника та без виплати винагороди, але з обов'язковою вказівкою імені автора, твір якого використовується, та джерела запозичення: цитування в оригіналі та у перекладі у наукових, полемічних, критичних чи інформаційних ціляхправомірно оприлюднених творів обсягом, виправданим метою цитування, включаючи відтворення уривків з газетних і журнальних статей у вигляді оглядів друку.
Цитування та цитата з висловлювання будь-якої авторитетної людини, оформлена у вигляді прямої мови в інформаційному, публіцистичному або аналітичному матеріалі- це спосіб зробити текст об'єктивним, серйозним і більш довіри, що викликає, у читача. Давайте розглянемо як силами HTML оформлюються короткі та довгі цитати.
Короткі цитати
HTML тег (HTML Quote Element) використовується для виділення коротких цитат(маленька цитата). Як правило, всі сучасні браузери автоматично встановлюють лапки, що відкриваються і закриваються на початку і в кінці виділеного тексту.
Перейдемо до розгляду прикладу:
Атрибут cite cite = "http://сайт/html/tag_q.php">
cite = "tag_q.php" >.
Довгі цитати
HTML тег
(HTML Block Quotation Element) використовується визначення в документі блокової цитати (довга цитата всередині документа). Текст всередині цього тега відображається як вирівняний блок з відступами ліворуч та праворуч (за замовчуванням 40 пікселів).</span>Приклад використання елемента <blockquote><span> Тут інформація з сайту «Вікіпедія»:
"https://ua.wikipedia.org/wiki/Pecunia_non_olet"> Гроші не пахнуть - крилате латинський вираз. Слова, що приписуються імператору Веспасіану, нібито вимовлені ним після отримання грошей від податку на громадські вбиральні Риму і звернені до його сина Тита, який висловив незадоволення з цього приводу.
За аналогією з тегом
атрибут cite тегавказує URL-адресу ресурсу, з якого була запозичена цитата. Для користувача цей атрибут не відображається (не видно його застосування). Він може використовуватися пошуковими машинами та в статистичних цілях під час роботи скриптів на стороні сервера. Допускається вказувати як абсолютні адреси (наприклад:cite = "http://сайт/html/tag_blockquote.php"> ), так і відносні (наприклад:cite = "tag_blockquote.php" >.Нижче наведено приклад, як це відображається у браузері:
Мал. 23а Приклад використання довгих цитат у HTML.
HTML назва твору
HTML тег (HTML Citation Element) призначений виділення назви творів. Він повинен включати назву роботи або посилання на творчість (URL-адреса). За промовчанням браузери відображають елементи курсивом.
Приклад використання:
Приклад використання елемента <cite><span><title> </head> <body> <cite> </span>"Горе від розуму"</cite>- Комедія у віршах А. С. Грибоєдова. Перший показ 1825<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> <p>У браузері це виглядає так:</p> <h2>Напрямок виведення тексту</h2> <p>Тег <bdo> (<i>HTML bidirectional override element</i>) використовується для перевизначення поточного напрямку тексту (встановлює напрямок виведення тексту і переважно призначений для використання з мовами, де читання відбувається праворуч, наприклад - арабська мова).</p> <p>Тег <bdo>застосовується з атрибутом dir і значеннями ltr (left-to-right), або rtl (right-to-left), що задають напрямок тексту зліва направо або праворуч наліво.</p> <span><!DOCTYPE html> <html> <head> <title> </span>Приклад використання тега <bdo><span> dir = "ltr" > Напрямок тексту зліва направо.
Напрямок тексту праворуч наліво.
Результат прикладу:
HTML 5 тег ізолює фрагмент тексту, який має відображатися в іншому напрямі листа та дозволяє браузерам коректно обробляти двонаправлений текст. Цей елемент корисно використовувати для відображення тексту з різною спрямованістю листа.
Наприклад:
</span>Приклад використання тега <bdi><span> Переможці європейського забігу:
Учасник №1 ماقسيم 99 балів – 1 місце
Учасник №2 دميتري 97 балів – 2 місце
Учасник №3 John Connor 96 балів – 3 місце
Результат нашого прикладу:
Мал. 25 Приклад використання різноспрямованих мов.
Звертаю Вашу увагу, що браузери Internet Explorer і Edgeне підтримують тег .
Нюанси східноазіатських символів.
У HTML присутні елементи ,
На сьогоднішній день є невід'ємною частиною будь-якого більш-менш серйозного інтернет проекту, та й односторінкові сайтики ні-ні та й вставлять що-небудь таке у формі.
Вставити, це ми всі здатні, у багатьох виникає проблема з оформленням цитат. Насамперед мета цитування — це привернути увагу відвідувача. розумну думку, свою чи чужу.
Хтось обходиться просто похилим текстом, хтось використовує готові шаблони. Найпоширеніший вид цитати – це похилий текст або фон у вигляді лапки. Тут усе залежить від невгамовної фантазії «людей».
У WordPress цитати оформляються автоматично та обумовлені стилем Вашого шаблону. Або з допомогою відмінного плагіна: . Якщо у вас тематичний блог і ви хочете підкреслити свою думку в статті, то таке виділення слів за допомогою цього плагіна, безсумнівно, приверне увагу читача, та й виглядає це красиво.
З 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; ) 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: #fcfcf 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 ") 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; 16px "Times New Roman" ; ) 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 ) blockquote ( margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee )
Подивились приклади, тепер робіть вибір і вперед. Код CSS відповідно додайте у свій файл стилів .cssПри написанні якоїсь нетлінної думки, просто обнесіть її тегами blockquote і задоволені собою милуйтеся результатом.
Розкажіть, а як ви оформляєте цитати у блозі, чи вам достатньо того, як вони були оформлені спочатку у шаблоні вашої теми?
З повагою Андрій
Ціль
Уявити (у типовому варіанті- довгу) цитату, як блок цитування (на противагу коротким цитатам, вставленим у текст абзацу).
Типове відображення
Як окремий абзац (або послідовність абзаців). Часто з відступом (можливим як ліворуч, так і праворуч). Часто - шрифтом, відмінним від простого текстузазвичай - курсивом.
Основний синтаксис
текст цитати
Можливі атрибути
Допустимий контекст
Вміст
Приклади
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, так що Ви повинні використовувати окремий елементІ у кожному абзаці.
При цитуванні Вам може знадобитися видалити деякі слова з вмісту цитати, тоді Ви повинні чітко позначити опущене (нотація виду - і... і найпоширеніший спосіб зробити це). Цілком недоречно в таких випадках вибірково наводити чиїсь цитати, так що комусь може здатися, що сказано щось зовсім відмінне від того, що насправді мало на увазі, можливо навіть зовсім протилежне. Коли Вам потрібно додати до цитованого тексту роз'яснювальні слова як пояснення, найбільш застосовним є додавання таких роз'яснень іншим шрифтом, наприклад, курсивом. Також Ви повинні чітко показати, що пояснення не є частиною оригіналу, та кращий спосібзробити це – розмістити свій текст у квадратних дужках.
Було змінено визначення елементів
і . У статті розповідається, що це означає для розробників.Зміни у визначенні
Елемент
представляє контент, що є цитатою з іншого джерела, можливо, що включає згадування цього джерела, яке повинно бутирозміщено всередині елементів
