HTML Цитаты

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

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

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

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

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

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

Тег <abbr>

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

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

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

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

Тег <address>

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

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

HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
email@mywebsite.ru

Теги <cite> и <dfn>

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

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

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

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

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

Тег <bdo>

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

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

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

Этот текст написан справа налево.

Задачи


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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Длинная цитата</title>  
 </head>
 <body>
  Характеристикой быстроты и направления движения служит физическая величина — скорость.
 </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>

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

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

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






Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌