Аббревиатуры и определения (abbr, dfn) [Модуль 2: Форматирование текста]: Тренажер HTML

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

В этом блоке заданий мы сосредоточимся на двух важных семантических тегах: `<abbr>` и `<dfn>`. Эти теги помогают сделать ваш контент более понятным не только для пользователей, но и для поисковых систем и вспомогательных технологий, таких как программы для чтения с экрана. Тег для аббревиатур позволяет добавить полную расшифровку сокращения, которая появляется при наведении курсора. Тег для определений семантически выделяет термин в тексте в момент его первого введения и объяснения. Правильное использование этих элементов улучшает семантику и доступность вашей веб-страницы. Вам предстоит на практике закрепить использование этих тегов, заполняя пропуски в готовом HTML-коде.

Список тем

Создание простой аббревиатуры

id: 37796_html-abbr-1

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

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

                     <p>Мы изучаем <input1 title="HyperText Markup Language">HTML</input1>.</p>

HTML

<p>Мы изучаем <input1 title="HyperText Markup Language">HTML</input1>.</p>

Для создания аббревиатуры используется тег `<abbr>`. Полная расшифровка указывается в атрибуте `title`.

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

Результат

Сообщения

Выполнить

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

Определение термина

id: 37796_html-dfn-1

В этом параграфе впервые вводится термин 'CSS'. Оберните его в специальный тег, который семантически обозначает, что это определяемый термин.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
dfn {
  font-style: italic;
  font-weight: bold;
}

                     <p>Для стилизации веб-страниц используется <input1>CSS</input1> (Cascading Style Sheets).</p>

HTML

<p>Для стилизации веб-страниц используется <input1>CSS</input1> (Cascading Style Sheets).</p>

Для семантического выделения определяемого термина используется тег `<dfn>`. Он сообщает браузеру и поисковым системам, что здесь дается определение.

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

Результат

Сообщения

Выполнить

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

Аббревиатура: пропущен атрибут

id: 37796_html-abbr-2

В коде уже есть тег аббревиатуры для 'JS'. Вам нужно добавить атрибут, в котором будет храниться полная расшифровка 'JavaScript', чтобы она отображалась при наведении.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
abbr[title] {
  text-decoration: underline dotted #007bff;
  cursor: help;
}

                     <p>Современные сайты немыслимы без <abbr input1="JavaScript">JS</abbr>.</p>

HTML

<p>Современные сайты немыслимы без <abbr input1="JavaScript">JS</abbr>.</p>

Всплывающая подсказка с расшифровкой для тега `<abbr>` задается с помощью атрибута `title`.

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

Результат

Сообщения

Выполнить

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

Определение: пропущено значение атрибута

id: 37796_html-dfn-2

Термин 'API' определен с помощью тега `<dfn>`. Дополните тег, вписав его полную расшифровку в атрибут `title`, чтобы предоставить пользователю дополнительную информацию.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
dfn[title] {
  font-style: italic;
  border-bottom: 2px solid #28a745;
}

                     <p>Давайте разберемся, что такое <dfn title="input1">API</dfn>.</p>

HTML

<p>Давайте разберемся, что такое <dfn title="input1">API</dfn>.</p>

Хотя для `<dfn>` атрибут `title` не является обязательным, он может использоваться для хранения расшифровки, как и в `<abbr>`. Впишите в кавычки 'Application Programming Interface'.

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

Результат

Сообщения

Выполнить

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

Несколько аббревиатур в одном тексте

id: 37796_html-abbr-3

В тексте упоминаются две организации: 'W3C' и 'WHATWG'. Оберните обе аббревиатуры в соответствующие теги и добавьте им расшифровки: 'World Wide Web Consortium' и 'Web Hypertext Application Technology Working Group'.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  font-weight: bold;
}

                     <p>Разработкой стандартов веба занимаются <input1 title="World Wide Web Consortium">W3C</input1> и <input2 title="Web Hypertext Application Technology Working Group">WHATWG</input2>.</p>

HTML

<p>Разработкой стандартов веба занимаются <input1 title="World Wide Web Consortium">W3C</input1> и <input2 title="Web Hypertext Application Technology Working Group">WHATWG</input2>.</p>

Вам нужно использовать тег `<abbr>` дважды. Для каждой аббревиатуры укажите свою расшифровку в атрибуте `title`.

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

Результат

Сообщения

Выполнить

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

Определение в списке определений

id: 37796_html-dfn-dl-1

Используется список определений (<dl>) для объяснения термина 'DOM'. Термин находится в теге <dt>. Оберните сам термин 'DOM' в тег определения, чтобы семантически выделить его.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
dl {
  border-left: 3px solid #ccc;
  padding-left: 15px;
}
dt {
  font-weight: bold;
  margin-top: 10px;
}
dfn {
  background-color: #e9ecef;
  padding: 2px 4px;
  border-radius: 3px;
}

                     <dl>
  <dt><input1>DOM</input1></dt>
  <dd>Document Object Model — это программный интерфейс для HTML-документов.</dd>
</dl>

HTML

<dl>
  <dt><input1>DOM</input1></dt>
  <dd>Document Object Model — это программный интерфейс для HTML-документов.</dd>
</dl>

Чтобы обозначить термин 'DOM' как определяемый, его нужно обернуть в тег `<dfn>`. Тег `<dt>` при этом остается на своем месте, а `<dfn>` вкладывается в него.

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

Результат

Сообщения

Выполнить

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

Связь определения и аббревиатуры

id: 37796_html-dfn-abbr-1

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

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
dfn {
  font-style: italic;
}
abbr[title] {
  text-decoration: underline dotted red;
  cursor: help;
}

                     <p>Давайте определим, что такое <input1>SVG</input1> (Scalable Vector Graphics). Графика <input2 title="Scalable Vector Graphics">SVG</input2> широко используется в вебе.</p>

HTML

<p>Давайте определим, что такое <input1>SVG</input1> (Scalable Vector Graphics). Графика <input2 title="Scalable Vector Graphics">SVG</input2> широко используется в вебе.</p>

Первое вхождение термина ('SVG') оберните в тег `<dfn>`. Второе вхождение оберните в тег `<abbr>` и добавьте ему атрибут `title` со значением 'Scalable Vector Graphics'.

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

Результат

Сообщения

Выполнить

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

Определение с идентификатором

id: 37796_html-dfn-id-1

Термин 'URL' определяется в тексте. Добавьте тегу определения атрибут, который позволит ссылаться на это определение из других частей документа. Имя атрибута пропущено.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 15px;
}
dfn[id] {
  font-weight: bold;
  background: #ffc107;
}
a {
 color: #007bff;
}

                     <p>Определение: <dfn input1="def-url">URL</dfn> (Uniform Resource Locator).</p>
<p>Больше информации о <a href="#def-url">URL</a>.</p>

HTML

<p>Определение: <dfn input1="def-url">URL</dfn> (Uniform Resource Locator).</p>
<p>Больше информации о <a href="#def-url">URL</a>.</p>

Чтобы создать 'якорь' для ссылки на определение, используется глобальный атрибут `id`. Придумайте для него любое уникальное значение, например, 'def-url'.

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

Результат

Сообщения

Выполнить

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