Верхний и нижний индекс (sup, sub) [Модуль 2: Форматирование текста]: Тренажер HTML

Степень для x

id: 37792_sup-basic-x2

Преобразуйте запись так, чтобы у символа x появилась степень 2. Должен получиться привычный математический вид, где двойка отображается над строкой, а сам символ остаётся на базовой линии текста. Результат должен хорошо читаться в компактном блоке.

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; line-height: 1.6; }
.formula { font-size: 22px; }
.formula sup { vertical-align: super; font-size: 0.75em; }
.formula sub { vertical-align: sub; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">x<input1>2</input2></p>
</div>

HTML

<div class="wrap">
  <p class="formula">x<input1>2</input2></p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Химическая формула воды

id: 37792_sub-water

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; line-height: 1.6; }
.formula { font-size: 22px; letter-spacing: 0.5px; }
.formula sub { vertical-align: sub; font-size: 0.75em; }
.formula sup { vertical-align: super; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">H<input1>2</input2>O</p>
</div>

HTML

<div class="wrap">
  <p class="formula">H<input1>2</input2>O</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Формула энергии

id: 37792_sup-energy-mc2

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 20px; }
.formula sup { vertical-align: super; font-size: 0.75em; }
.formula sub { vertical-align: sub; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">E = mc<input1>2</input2></p>
</div>

HTML

<div class="wrap">
  <p class="formula">E = mc<input1>2</input2></p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Комбинация: нижний и верхний индексы

id: 37792_mix-sub-sup-sequence

В одном выражении необходимо корректно оформить индексы для двух переменных: у них есть и нижние индексы (номера), и степени. В результате записи должны выглядеть аккуратно и одинаково оформлены.

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; line-height: 1.5; }
.formula { font-size: 19px; }
.formula sup { vertical-align: super; font-size: 0.75em; }
.formula sub { vertical-align: sub; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">x<input1>i</input2><input3>2</input4> + y<input5>j</input6><input7>3</input8></p>
</div>

HTML

<div class="wrap">
  <p class="formula">x<input1>i</input2><input3>2</input4> + y<input5>j</input6><input7>3</input8></p>
</div>

Для номера элемента используйте нижний индекс, для степени — верхний. Каждая часть оборачивается своей парой тегов. Следите за порядком: сначала нижний индекс возле символа, затем степень.

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

Результат

Сообщения

Выполнить

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

Логарифмы с основанием

id: 37792_sub-log-base

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 18px; margin: 6px 0; }
.formula sub { vertical-align: sub; font-size: 0.75em; }
.formula sup { vertical-align: super; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">log<input1>2</input2> 8 = 3</p>
  <p class="formula">log<input3>10</input4> 1000 = 3</p>
</div>

HTML

<div class="wrap">
  <p class="formula">log<input1>2</input2> 8 = 3</p>
  <p class="formula">log<input3>10</input4> 1000 = 3</p>
</div>

Основание логарифма оформляется нижним индексом сразу после «log». Оберните цифры оснований парой тегов нижнего индекса, не затрагивая остальную часть выражения.

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

Результат

Сообщения

Выполнить

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

Сноска в тексте

id: 37792_sup-footnote

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

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: Arial, sans-serif; line-height: 1.6; }
.note { font-size: 14px; color: #555; margin-top: 8px; }
.wrap sup { vertical-align: super; font-size: 0.7em; }

                     <div class="wrap">
  <p>Термин «HTML» широко используется<input1>1</input2>.</p>
  <p class="note">1 — условная сноска для примера.</p>
</div>

HTML

<div class="wrap">
  <p>Термин «HTML» широко используется<input1>1</input2>.</p>
  <p class="note">1 — условная сноска для примера.</p>
</div>

Сноски помечают верхним индексом непосредственно после слова или знака препинания. Оберните номер сноски парой тегов верхнего индекса.

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

Результат

Сообщения

Выполнить

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

Число Авогадро и единицы измерения

id: 37792_sup-sub-avogadro

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 18px; }
.formula sup { vertical-align: super; font-size: 0.72em; }
.formula sub { vertical-align: sub; font-size: 0.72em; color: #333; }

                     <div class="wrap">
  <p class="formula">N<input5>A</input6> = 6.022 × 10<input1>23</input2> моль<input3>-1</input4></p>
</div>

HTML

<div class="wrap">
  <p class="formula">N<input5>A</input6> = 6.022 × 10<input1>23</input2> моль<input3>-1</input4></p>
</div>

Часть с показателем степени запишите верхним индексом. Отрицательную степень в единице измерения оформите так же верхним индексом. Индекс у символа оформите нижним индексом сразу после соответствующей буквы.

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

Результат

Сообщения

Выполнить

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

Кинематика: начальная скорость и квадрат времени

id: 37792_motion-v0-t2

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 18px; }
.formula sup { vertical-align: super; font-size: 0.72em; }
.formula sub { vertical-align: sub; font-size: 0.72em; }

                     <div class="wrap">
  <p class="formula">S = v<input1>0</input2> t + (a · t<input3>2</input4>) / 2</p>
</div>

HTML

<div class="wrap">
  <p class="formula">S = v<input1>0</input2> t + (a · t<input3>2</input4>) / 2</p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Единицы измерения: площадь и объём

id: 37792_units-area-volume

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

CSS

.wrap { max-width: 360px; margin: 10px auto; font-family: Arial, sans-serif; }
.formula { font-size: 18px; margin: 6px 0; }
.formula sup { vertical-align: super; font-size: 0.72em; }

                     <div class="wrap">
  <p class="formula">Площадь: 9 м<input3>2</input4></p>
  <p class="formula">Объём: 15 см<input1>3</input2></p>
</div>

HTML

<div class="wrap">
  <p class="formula">Площадь: 9 м<input3>2</input4></p>
  <p class="formula">Объём: 15 см<input1>3</input2></p>
</div>

Для единиц измерения степени записываются верхним индексом сразу после обозначения единицы. Оберните соответствующие цифры парными тегами верхнего индекса.

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

Результат

Сообщения

Выполнить

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

Комплексная формула с двумя веществами

id: 37792_chem-co2-nh3

Оформите сразу две химические формулы в одной строке так, чтобы индексы стояли корректно под символами. Результат должен соответствовать привычной записи химических веществ.

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 18px; }
.formula sub { vertical-align: sub; font-size: 0.75em; }

                     <div class="wrap">
  <p class="formula">CO<input1>2</input2> + NH<input3>3</input4></p>
</div>

HTML

<div class="wrap">
  <p class="formula">CO<input1>2</input2> + NH<input3>3</input4></p>
</div>

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

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

Результат

Сообщения

Выполнить

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

Фигура с подписью формулы

id: 37792_figure-caption-h2o

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

CSS

figure { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
img { width: 100%; height: auto; display: block; border-radius: 6px; }
figcaption { font-size: 16px; text-align: center; margin-top: 6px; }
figcaption sub { vertical-align: sub; font-size: 0.8em; }

                     <figure>
  <img src="https://naytikurs.ru/img/2.png" alt="Вода">
  <figcaption>Молекула воды: H<input1>2</input2>O</figcaption>
</figure>

HTML

<figure>
  <img src="https://naytikurs.ru/img/2.png" alt="Вода">
  <figcaption>Молекула воды: H<input1>2</input2>O</figcaption>
</figure>

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

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

Результат

Сообщения

Выполнить

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

Комбинация индексов: xᵢ² и yⱼ³

id: 37792_combo-xi2-yj3

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

CSS

.wrap { max-width: 360px; margin: 8px auto; font-family: Arial, sans-serif; }
.formula { font-size: 20px; }
.formula sup { vertical-align: super; font-size: 0.72em; }
.formula sub { vertical-align: sub; font-size: 0.72em; }

                     <div class="wrap">
  <p class="formula">x<input1>i</input2><input3>2</input4>, y<input5>j</input6><input7>3</input8></p>
</div>

HTML

<div class="wrap">
  <p class="formula">x<input1>i</input2><input3>2</input4>, y<input5>j</input6><input7>3</input8></p>
</div>

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

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

Результат

Сообщения

Выполнить

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