Элементы цитирования и направление текста
В этой статье мы с Вами рассмотрим как на языке HTML оформить дословную выдержку из какого-либо текста, или одним словом "цитата", рассмотрим нюансы работаты с разнонаправленным текстом и Восточно-азиатскими символами.
В соответствии с действующим законодательством Российской Федерации допускается без согласия автора или иного правообладателя и без выплаты вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования: цитирование в оригинале и в переводе в научных, полемических, критических или информационных целях правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати.
Цитирование и цитата из высказывания какой-либо авторитетного человека, оформленная в виде прямой речи в информационном, публицистическом или аналитическом материале - это способ сделать текст объективным, серьезным и вызывающим больше доверия у читателя. Давайте рассмотрим как силами HTML оформляются короткие и длинные цитаты.
Короткие цитаты
HTML тег <q> (HTML Quote Element) используется для выделения коротких цитат (строчная цитата). Как правило, все современные браузеры автоматически устанавливают открывающиеся и закрывающиеся кавычки в начале и в конце выделенного текста.
Перейдем к рассмотрению примера:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <q></title> </head> <body> <p><q cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p> </body> </html>
Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <q cite = "http://basicweb.ru/html/tag_q.php">), так и относительные (например: <q cite = "tag_q.php">.
Ниже приведён пример, как это отображается в браузере:
Длинные цитаты
HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).
Пример:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <blockquote></title> </head> <body> <p>Здесь информация с сайта «Википедия»:</p> <blockquote cite = "https://ru.wikipedia.org/wiki/Pecunia_non_olet"> Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану, якобы произнесенные им после получения денег от налога на общественные уборные Рима и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote> </body> </html>
По аналогии с тегом <q> атрибут cite тега <blockquote> указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: <blockquote cite = "http://basicweb.ru/html/tag_blockquote.php">), так и относительные (например: <blockquote cite = "tag_blockquote.php">.
Ниже приведён пример, как это отображается в браузере:
HTML название произведения
HTML тег <cite> (HTML Citation Element) предназначен для выделения названия произведений. Он должен включать название работы или ссылку на творчество (URL-адрес). По умолчанию, браузеры отображают элементы <cite> курсивом.
Пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <cite><title> </head> <body> <cite>«Горе от ума»</cite> — комедия в стихах А. С. Грибоедова. Первый показ 1825 г. </body> </html>
В браузере это выглядит следующим образом:
Направление вывода текста
Тег <bdo> (HTML bidirectional override element) используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например - арабский язык).
Тег <bdo> применяется с атрибутом dir и значениями ltr (left-to-right), или rtl (right-to-left), задающими направление текста слева направо, либо справа налево.
<!DOCTYPE html> <html> <head> <title>Пример использования тега <bdo></title> </head> <body> <p><bdo dir = "ltr">Направление текста слева направо.</bdo></p> <p><bdo dir = "rtl">Направление текста справа налево.</bdo></p> </body> </html>
Результат примера:
В HTML 5 тег <bdi>
изолирует фрагмент текста, который должен отображаться в другом направлении письма и позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью письма.
Например:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <bdi></title> </head> <body> <h3>Победители европейского забега: </h3> <p>Участник № 1 <bdi>ماقسيم</bdi> 99 баллов – 1 место </p> <p>Участник № 2 <bdi>دميتري</bdi> 97 баллов – 2 место </p> <p>Участник № 3 John Connor 96 баллов – 3 место </p> </body> </html>
Результат нашего примера:
Обращаю Ваше внимание, что браузеры Internet Explorer и Edge не поддерживают тег <bdi>.
Нюансы восточно-азиатских символов.
В HTML присутствуют элементы <ruby>, <rt> и <rp>, которые используются для добавления фуриган (фонетические подсказки в японском и восточно-азиатских языках, их также называют - руби или ёмигана).
Фуриганы, как правило, отображаются мелким шрифтом над иероглифами (основным текстом) и содержат подсказки по их произношению и переводу. В элементе <ruby> полезный текст фуриганы обозначается элементом <rt>.
Тег <rp> определяет, что отображать браузеру, который не поддерживает тег <ruby>. Если браузер поддерживает тег <ruby>, то текст, который находится внутри тега <rp> не отобразится для пользователя.
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <rp></title> </head> <body> <ruby> <rp>Ваш браузер не поддерживает отображение фуриган</rp> 地球<rt>ふるさと</rt> </ruby> </body> </html>
Результат нашего примера:
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующую HTML страницу:
Подсказка: чтобы достичь такого ровного текста, его необходимо выровнять по ширине.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.