Цитаты и блоки цитат (q, blockquote, cite) [Модуль 2: Форматирование текста]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

"В этом блоке заданий мы сосредоточимся на правильном оформлении цитат в HTML. Вы узнаете разницу между короткими встроенными цитатами и большими блочными цитатами, а также научитесь семантически корректно указывать их источник. Умение правильно использовать теги `q`, `blockquote` и `cite` не только улучшает внешний вид текста, но и повышает доступность вашего сайта и его рейтинг в поисковых системах. Задания построены от самых основ к более сложным комбинациям, что позволит вам последовательно закрепить материал на практике. Вам предстоит вписывать недостающие теги, атрибуты и их значения, чтобы完成ть код и увидеть результат своих действий.

Список тем

Простая встроенная цитата

id: 37793_quotes-1

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

CSS

p {
  font-family: sans-serif;
  line-height: 1.6;
  color: #333;
}

q {
  color: #005a8d;
  font-style: italic;
}

                     <p>Перед началом работы он сказал: <input1>Давайте сделаем это качественно!</input1> и мы приступили.</p>

HTML

<p>Перед началом работы он сказал: <input1>Давайте сделаем это качественно!</input1> и мы приступили.</p>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создание блока с цитатой

id: 37793_quotes-2

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

CSS

blockquote {
  font-family: serif;
  border-left: 4px solid #ccc;
  padding-left: 15px;
  margin-left: 0;
  margin-right: 0;
  color: #555;
}

                     <input1>
  <p>Единственный способ делать великие дела — любить то, что вы делаете.</p>
</input1>

HTML

<input1>
  <p>Единственный способ делать великие дела — любить то, что вы делаете.</p>
</input1>

Для длинных цитат, которые должны отображаться как отдельный блок, используется тег `blockquote`. Он создаст блочный элемент.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Указание автора цитаты

id: 37793_quotes-3

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

CSS

blockquote {
  border-left: 4px solid #ccc;
  padding-left: 15px;
  margin: 1em 0;
  background: #f9f9f9;
}

cite {
  font-style: normal;
  font-weight: bold;
  color: #333;
}

                     <blockquote>
  <p>Успех — это способность двигаться от одной неудачи к другой, не теряя энтузиазма.</p>
  <footer>— <input1>Уинстон Черчилль</input1></footer>
</blockquote>

HTML

<blockquote>
  <p>Успех — это способность двигаться от одной неудачи к другой, не теряя энтузиазма.</p>
  <footer>— <input1>Уинстон Черчилль</input1></footer>
</blockquote>

Чтобы семантически обозначить имя автора или название произведения (источника), используется тег `cite`. Он часто помещается в `<footer>` внутри `<blockquote>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Ссылка на источник в атрибуте

id: 37793_quotes-4

Добавьте к блоку цитаты URL-адрес источника. Эта информация не будет видна на странице, но она важна для поисковых систем и программ чтения с экрана. Вам нужно вписать правильное имя атрибута.

CSS

blockquote {
  border-left: 4px solid #007bff;
  padding: 10px 15px;
  background: #f0f8ff;
  margin: 1em 0;
  quotes: "«" "»";
}

blockquote p::before {
  content: open-quote;
}

blockquote p::after {
  content: close-quote;
}

                     <blockquote input1="https://ru.wikiquote.org/wiki/Альберт_Эйнштейн">
  <p>Есть только два способа прожить жизнь. Первый — будто чудес не существует. Второй — будто кругом одни чудеса.</p>
</blockquote>

HTML

<blockquote input1="https://ru.wikiquote.org/wiki/Альберт_Эйнштейн">
  <p>Есть только два способа прожить жизнь. Первый — будто чудес не существует. Второй — будто кругом одни чудеса.</p>
</blockquote>

Теги `<blockquote>` и `<q>` поддерживают атрибут `cite`, значением которого является URL, указывающий на источник цитаты.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комплексная разметка: теги и атрибут

id: 37793_quotes-5

Соберите полную конструкцию. У вас есть цитата, её автор и ссылка на источник. Используйте тег для блока цитаты, атрибут для ссылки и тег для имени автора.

CSS

blockquote {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  margin: 1em 0;
  background: #fff;
}

footer {
  text-align: right;
  margin-top: 10px;
}

cite {
  font-style: italic;
  color: #005a8d;
}

                     <input1 input2="https://ru.wikipedia.org/wiki/Гейтс,_Билл">
  <p>Будьте добры к ботаникам. Скорее всего, вы будете работать на одного из них.</p>
  <footer>
    — <input3>Билл Гейтс</input3>
  </footer>
</input1>

HTML

<input1 input2="https://ru.wikipedia.org/wiki/Гейтс,_Билл">
  <p>Будьте добры к ботаникам. Скорее всего, вы будете работать на одного из них.</p>
  <footer>
    — <input3>Билл Гейтс</input3>
  </footer>
</input1>

Основную цитату оберните в `<blockquote>`. У этого тега укажите атрибут `cite` со ссылкой. Имя автора оберните в тег `<cite>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вложенная цитата

id: 37793_quotes-6

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

CSS

blockquote {
  font-family: serif;
  border-left: 4px solid #4CAF50;
  padding-left: 15px;
  margin-left: 0;
  color: #555;
}

q {
  color: #d84315;
  font-weight: bold;
  quotes: '`' '`';
}

                     <input1>
  <p>В своей лекции профессор отметил: <input2>Главное — это постоянная практика</input2>. И я с ним полностью согласен.</p>
</input1>

HTML

<input1>
  <p>В своей лекции профессор отметил: <input2>Главное — это постоянная практика</input2>. И я с ним полностью согласен.</p>
</input1>

Для внешней, большой цитаты используйте `<blockquote>`. Для внутренней, короткой цитаты, которая находится внутри текста, используйте тег `<q>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Карточка с цитатой и изображением

id: 37793_quotes-7

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

CSS

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  max-width: 320px;
}
.card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  float: left;
  margin-right: 15px;
}
.card blockquote {
  margin: 0;
  padding: 0;
  border: none;
}
.card footer {
  margin-top: 10px;
  text-align: right;
  font-size: 0.9em;
  color: #777;
}
.card cite {
  font-weight: bold;
}

                     <div class="card">
  <img src="https://naytikurs.ru/img/8.png" alt="Фото автора">
  <input1>
    <p>Если вы можете это представить, вы можете этого добиться.</p>
    <footer>— <input2>Уолт Дисней</input2></footer>
  </input1>
</div>

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/8.png" alt="Фото автора">
  <input1>
    <p>Если вы можете это представить, вы можете этого добиться.</p>
    <footer>— <input2>Уолт Дисней</input2></footer>
  </input1>
</div>

Оберните текст цитаты и подпись в `<blockquote>`. Имя автора в подписи выделите тегом `<cite>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку