Тег цитата – Учебник HTML 5. Статья «Элементы цитирования и направление текста»

Содержание

HTML Цитаты



Для создания цитат в языке HTML используются два элемента: блочный элемент <Ыockquote> и строчный элемент <q>. Тег <Ыockquote> используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.

Элемент <q> используется для коротких цитат, являющихся частью текущего абзаца. Как правило, браузеры заключают содержимое элемента <q> в кавычки. Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня.

Для обоих элементов может быть указан атрибут CITE, значением которого является URL-aдpec цитируемоrо фраrмента.

Пример: длинные и короткие цитаты

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

Как сказал А. А. Милн, некоторые люди говорят с животными.

<!-- Длинная цитата -->
<blockquote cite="http://www.world.org/zenit/index.html"> Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.</blockquote> <!-- Короткая цитата --> <p>Как сказал А. А. Милн, <q>некоторые люди говорят с животными.</q><p>

Тег <abbr>

Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.). При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом <abbr>. С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.

Пример: Аббревиатура

NАSА проводит несколько невероятных космических экспериментов.

Пp. Стивен Хокинг — физик-теоретик и космолог.

<!-- Аббревиатура -->
<abbr title="Национальное агентство по аэронавтике и исследованию
космического пространства">NАSА</abbr> проводит несколько невероятных
космических экспериментов.</p> <p><abbr title="Пpoфeccop">Пp. </abbr> Стивен Хокинг — физик-теоретик и космолог.</p>

Тег <address>

Тег <address> используется для указания контактной информации, адреса и телефонов. Он может содержать почтовый адрес, а также адрес электронной почты или номер телефона. Большинство браузеров отображают содержимое элемента <address> шрифтом с курсивным начертанием.

Пример: Адрес

HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
[email protected]
<!-- Адрес -->
<address> HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
<a href="mailto:[email protected]">[email protected]</a></address>

Теги <cite> и <dfn>

Тег <cite> используется при оформлении ссылки на какой-то первоисточник, например на книгу, веб-сайт или научную работу, для обозначения упоминаемого источника. Часто используется в списках литературы, при указании aвторских прав или упоминании имени владельца ресурса. Браузеры отображают содержимое элемента <cite> шрифтом с курсивным начертанием.

Тег <dfn> используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент <dfn> можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.

Пример: Источники и определения

Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.

Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости

<!-- Источник -->
<p>Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма <cite>Красный дракон</cite> Стивена Хопкинса.</p> <!-- Определение --> <p><dfn>Импульс тела</dfn> — векторная величина, направление её вектора совпадает
с направлением скорости</p>

Тег <bdo>

Тег <bdo> управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).

Пример: Направление текста

Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)

Этот текст написан справа налево.
<!-- Направление текста -->
<p>Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)</p>
<bdo dir="rtl">Этот текст написан справа налево.</bdo></p>

Задачи


Итоговое задание [14-18]

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Короткая цитата

Используя логический элемент HTML, добавьте кавычки вокруг слова: "Теория".

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Короткая цитата</title>  
 </head>
 <body>
  <p>Теория предсказывает новые явления и новые законы.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 <title>Короткая цитата</title>  
 </head>
 <body>
  <p><q>Теория<q> предсказывает новые явления и новые законы.</p>
 </body>
</html>

Длинная цитата

Поместите нижеприведенный текст внутрь такого элемента, который сделает его цитатой с отступом слева. Задайте URL ресурса, откуда взята эта цитата: "http://www.world.org".

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Длинная цитата</title>  
 </head>
 <body>
  Характеристикой быстроты и направления движения служит физическая величина — скорость.
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Длинная цитата</title>  
 </head>
 <body>
  <blockquote cite="http://www.world.org"> Характеристикой быстроты и направления движения
служит физическая величина — скорость.</blockquote> </body> </html>

Аббревиатура

Используя элемент HTML сделайте так, чтобы при наведении указателя мыши на аббревиатуру WWW появиласья подсказка, coдержащая ее расшифровку: "World Wide Web".

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Аббревиатура</title>  
 </head>
 <body>
  <p>Стремительное развитие WWW началось в ceредине 90-x годов ХХ века.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Аббревиатура</title>  
 </head>
 <body>
  <p>Стремительное развитие  <abbr title="World Wide Web">WWW</abbr> началось в ceредине 90-x годов ХХ века.</p>
 </body>
</html>

Направление текста

С помощью элемента HTML измените направление текста справа-налево.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Направление текста</title>  
 </head>
 <body>
  <p>Путь — величина скалярная.</p>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Направление текста</title>  
 </head>
 <body>
  <p><bdo dir="rtl">Путь — величина скалярная.</bdo></p>
 </body>
</html>






Please enable JavaScript to view the comments powered by Disqus.

Учебник HTML 5. Статья "Элементы цитирования и направление текста"

В этой статье мы с Вами рассмотрим как на языке 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">.

Ниже приведён пример, как это отображается в браузере:

Рис. 23 Пример использования коротких цитат в HTML.

Длинные цитаты

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">.

Ниже приведён пример, как это отображается в браузере:

Рис. 23а Пример использования длинных цитат в HTML.

HTML название произведения

HTML тег <cite> (HTML Citation Element) предназначен для выделения названия произведений. Он должен включать название работы или ссылку на творчество (URL-адрес). По умолчанию, браузеры отображают элементы <cite> курсивом.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <cite><title>
	</head>
	<body>
		<cite>«Горе от ума»</cite> — комедия в стихах А. С. Грибоедова. Первый показ 1825 г.
	</body>
</html>

В браузере это выглядит следующим образом:

Рис. 23б Пример использования названий произведений в 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>

Результат примера:

Рис. 24 Пример использования тега <bdo> с атрибутом dir (направление текста в HTML).

В HTML 5 тег <bdi> изолирует фрагмент текста, который должен отображаться в другом направлении письма и позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью письма.

Например:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <bdi></title>
	</head>
	<body>
		<h4>Победители европейского забега: </h4>
		<p>Участник № 1 <bdi>ماقسيم</bdi> 99 баллов – 1 место </p>
		<p>Участник № 2 <bdi>دميتري</bdi> 97 баллов – 2 место </p>
		<p>Участник № 3 John Connor 96 баллов – 3 место </p>
	</body>
</html>

Результат нашего примера:

Рис. 25 Пример использования разнонаправленных языков.

Обращаю Ваше внимание, что браузеры 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>

Результат нашего примера:

Рис. 26 Использование фуриган в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующую HTML страницу:

Практическое задание № 18.

Подсказка: чтобы достичь такого ровного текста, его необходимо выровнять по ширине.

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


Как сделать цитату в HTML

Как сделать цитату в HTML

Всем привет. У меня тут к Вам есть небольшое предложение - а давайте немного отойдём от темы и кого-нибудь процитируем. Никто не против? Отлично.

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

Нашли? Тогда поехали. Начнём с того, что есть несколько тегов, которые позволяют в HTML создать цитаты.

Тег <blockquote>. Он применяется, когда речь идет о больших цитатах, в которых абзацев два и более. Визуально такая цитата будет выглядеть в окне браузера, как отдельный текстовый блок, в котором будут присутствовать все необходимые отступы.

Тег <q>. С его помощью можно выделить небольшую по своим размерам цитату, присутствующую прямо в предложении. Текст, выделенный этим тегом, на странице будет отображаться в кавычках.

Тег <cite>. С его помощью при создании страницы в HTML осуществляется выделение источника, откуда взята цитата. Например, название книги или имя автора.

Например:

<blockquote>Запомни эту простую фразу: всё будет, но не сразу.</blockquote>
<cite>Паблик ВКонтакте</cite>

Результат:
Как сделать цитату в HTML

А теперь давайте покидаем понравившиеся Вам цитаты в комментариях к этому уроку! Посмотрим, что нравится людям, изучающим HTML. Интересно, не так ли?

loader


Раздел, цитируемый из другого источника:

Пример

<blockquote cite="http://www.worldwildlife.org/who/index.html">
За 50 лет, Всемирный Фонд Дикой Природы защищатет будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах и поддерживается 1,2 миллионов членов в Соединенных Штатах и около 5 миллионов во всем мире.
</blockquote>

Попробуйте сами »

Определение и использование

Tег <blockquote> указывает цитату, заключенную в кавычки из другого источника.

Браузеры обычно использует отступы элемента <blockquote>.


Поддержка браузеров

Элемент
<blockquote> Да Да Да Да Да

Советы и примечания

Совет: Использовать тег <q> для встроенных (коротких) предложений.


Различий между HTML 4.01 и HTML5

В HTML 4.01, тег <blockquote> определяет длинное предложение.

В HTML5, тег <blockquote> указывает раздел, заключенный в кавычки из другого источника.


Различия между HTML и XHTML

Примечание: Для проверки элемент <blockquote> в XHTML, он должен содержать только другие элементы уровня блока:

<blockquote>
<p>Длинная цитата.</p>
</blockquote>


Атрибуты

Атрибут Значение Описание
cite URL Указывает источник цитаты

Глобальные атрибуты

Tег <blockquote> также поддерживает Глобальные атрибуты в HTML.


Атрибуты событий

Tег <blockquote> также поддерживает Атрибуты событий в HTML.


Связанные страницы

Справочник HTML DOM: Объект blockquote


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <blockquote> со следующими значениями по умолчанию:

Пример

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

Попробуйте сами »

Вставляем цитаты при помощи HTML

Серёжа Сыроежкин

Серёжа СыроежкинКопирайтер

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

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   blockquote:before, blockquote:after {
    font-size: 2.5em;
    color: red;
   }
   blockquote:before {
    content: '«';
    float: left;
   }
   blockquote:after {
    content: '»';
    float: right;
   }
   blockquote p {
    margin: 0.8em 2.5em;
   }
  </style>
 </head>
 <body>
  <p>Хочу привести следующую цитату:</p>
    <hr />
  <blockquote>
   <p align="center">Что бы такого ещё съесть, чтобы похудеть?</p>
  </blockquote>
    <hr />
 </body>
</html>

В данном примере цитата обрамляется кавычками (blockquote:before и blockquote:after) и горизонтальными разделителями сверху и снизу.

Помимо приведенного тега, цитату в тексте можно выделить при помощи тега q:

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL (тег q) - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   q {
    font-family: Serif;
    color: blue;
    font-style: italic, bold;
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>К сожалению, актуальна и по сей день фраза: <q>Он ее одел, а она его обула.</q></p>
  <p><cite>http://nubex.ru</cite></p>
 </body>
</html>

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

В тегах <cite></cite> можно дополнительно указать источник цитаты, ссылку или сноску на другой документ.

В конструкторе сайтов "Нубекс" есть возможность добавления красивых цитат при помощи визуального редактора.

Смотрите также:

Цитаты и элементы цитирования HTML уроки для начинающих академия


Предложения

Вот цитата из сайта WWF:

В течение 50 лет WWF защищает будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах и поддерживается 1 200 000 членов в Соединенных Штатах и близко к 5 000 000 в глобальном масштабе.

HTML <q> для коротких котировок

Элемент HTML <q> определяет краткое предложение.

Обозреватели обычно вставляют кавычки вокруг элемента <q>.

Пример

<p>WWFs goal is to: <q>Build a future where people live in harmony with nature.</q></p>


HTML <blockquote> для предложений

Элемент HTML <blockquote> определяет раздел, который цитируется из другого источника.

Браузеры добавляют отступ <blockquote> элементов.

Пример

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>



HTML <abbr> для сокращений

Элемент HTML <abbr> определяет аббревиатуру или акроним.

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

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>


HTML <address> для контактной информации

Элемент HTML <address> определяет контактную информацию (автора/владельца) докуме

HTML | Тег цитаты | Портал информатики для гиков

Тег <blockquote> в HTML используется для отображения длинных цитат (раздел, который цитируется из другого источника). Это меняет выравнивание, чтобы сделать его уникальным среди других. Он содержит открывающие и закрывающие теги.

Синтаксис:

<blockquote> Contents... </blockquote>

Атрибут: он содержит один атрибут cite, который используется для указания источника цитаты.

Примечание. Тег <blockquote> в HTML4.1 определяет длинную цитату, т.е. цитаты, которые занимают несколько строк. Но в HTML5 тег <blockquote> определяет раздел, который цитируется из другого источника.

Пример 1:

<!DOCTYPE html>

<html>

    <head>

        <title>blockquote Tag</title>

        <style>

            body {

                text-align:center;

            }

            h2 {

                color:green;

            }

        </style>

    </head>

    <body>

        <h2>GeeksforGeeks</h2>

        <h3><blockquote> Tag</h3>

        <blockquote>GeeksforGeeks: A computer science portal 

        for geeks</blockquote>

    </body>

</html>                    

Выход:

Пример 2:

<!DOCTYPE html>

<html>

    <head>

        <title>blockquote Tag</title>

        <style>

            body {

                text-align:center;

            }

            h2 {

                color:green;

            }

        </style>

    </head>

    <body>

        <h2>GeeksforGeeks</h2>

        <h3><blockquote> Tag</h3>

        <blockquote cite = "www.geeksforgeeks.org">

         GeeksforGeeks:A computer science portal for geeks

        </blockquote>

    </body>

</html>                    

Выход:

Поддерживаемый браузер: браузер, поддерживаемый тегом <blockquote>, перечислены ниже:

  • Гугл Хром
  • Internet Explorer
  • Fire Fox
  • Сафари
  • опера

Рекомендуемые посты:

HTML | Тег цитаты

0.00 (0%) 0 votes

Отправить ответ

avatar
  Подписаться  
Уведомление о