# Работа с инструментом HTML-блок

*Время чтения: 5 минут*

{% hint style="info" icon="file-html" %}
HTML - блок - это тип блока в конструкторе урока, который позволяет вставлять и отображать внутри урока произвольный HTML-код.\
С его помощью можно создавать не только стандартные текстовые или медиа-элементы, но и кастомные интерактивные блоки: карточки, слайдеры, схемы, тренажёры, калькуляторы, интерактивные инструкции, квизы и другие форматы, которые не покрываются базовыми блоками платформы.
{% endhint %}

## Как работает инструмент HTML - блок <a href="#h_2978b91a44" id="h_2978b91a44"></a>

### Как вставить код в блок?

Делается это очень просто:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2Fal4IaTVGsAFD3lNj5xoK%2F%D0%97%D0%B0%D0%BF%D0%B8%D1%81%D1%8C-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2026-04-08-%D0%B2-10.54.34.gif?alt=media&#x26;token=32696ef1-a9c7-46da-93c9-9f9811813fd3" alt=""><figcaption><p>Создание HTML - блока в курсе</p></figcaption></figure>

1. Перейдите в урок и перетащите **HTML - блок** на страницу
2. Кликните на кнопку **Вставить код**
3. Вставьте или напишите код
4. Проверьте в предпросмотре справа все ли корректно
5. Кликните на кнопку **Сохранить**

Отлично, блок заполнен!

{% hint style="warning" %}
**Обратите внимание, что:**

1. Если блок пустой, он не отображается студентам.&#x20;
2. Если код содержит ошибки и не может быть корректно воспроизведён, такой блок также не будет отображаться студентам. &#x20;
3. **Максимальный размер** HTML-кода составляет 64 000 символов
   {% endhint %}

## Применение инструмента HTML - блок <a href="#h_4111ded2d7" id="h_4111ded2d7"></a>

{% hint style="info" %}
**HTML-блок** применяется для создания в уроке кастомных элементов, которые невозможно или неудобно собрать с помощью стандартных блоков конструктора. Давайте рассмотрим основные сценарии применения:
{% endhint %}

1. **Визуальная подача учебного материала**

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

* карточек с тезисами;
* блоков сравнения;
* таймлайнов;
* схем и этапов;

Например:&#x20;

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2F9rodfc94GvhKEe4XjJpk%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202026-04-08%20%D0%B2%2016.42.40.png?alt=media&#x26;token=dac4c341-8990-4b0f-b8f2-728d3a1b3ac3" alt=""><figcaption><p>Блок с карточками и акцентами на ключевых тезисах</p></figcaption></figure>

2. **Интерактиыные элементы в уроке**

HTML-блок подходит для размещения интерактивных учебных механик, которые вовлекают пользователя в изучение материала.\
Например:

* переворачивающиеся карточки;
* кнопки с показом ответа;
* интерактивные подсказки;
* простые тренажёры и мини-сценарии.

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2FJ4gvZgmTnbFqq4jjJxhK%2F2.gif?alt=media&#x26;token=6534d689-b0eb-41dc-9fc5-025e7d8c74ab" alt=""><figcaption><p>Флип карточки</p></figcaption></figure>

3. **Формирование практических навыков**

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

* мини-кейсы;
* визуальные тренажёры;
* сценарии выбора и анализа вариантов;
* обучающие калькуляторы и практические инструменты.

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2FnCAxRLDtGJEogUycZEn2%2F3.gif?alt=media&#x26;token=475d3f7d-b318-48ee-8fae-e5ae64e38863" alt=""><figcaption><p>Мини-тренажер</p></figcaption></figure>

4. **Оформление длинных текстов и лонгридов**

Когда материал слишком объёмный для обычного текстового блока, HTML-блок позволяет сделать его более читабельным. С его помощью длинный текст можно превратить в:

* структурированный лонгрид;
* статью с визуальными акцентами;
* блок с выделенными цитатами и тезисами;
* материал с внутренней навигацией.&#x20;

Например:

<figure><img src="https://291055316-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP3Ys5RYQvMMCdr8qMKQR%2Fuploads%2F9nDVShY3WWzhuT69xtRf%2F4.gif?alt=media&#x26;token=5a36a94a-7654-4255-9d68-7aec86157ff3" alt=""><figcaption><p>Лонгрид</p></figcaption></figure>

## Особенности использования

{% hint style="success" %}
Данный раздел будет пополняться небольшими советы, как можно улучшить ваш HTML-блок.&#x20;
{% endhint %}

<table><thead><tr><th>Проблема</th><th valign="middle">Решение</th><th>Пример</th></tr></thead><tbody><tr><td><ol><li>Ссылка в HTML-блоке на сторонний сервис открывает этот сервис в этом же блоке?</li></ol></td><td valign="middle">Добавьте target="_blank" к ссылкам, если хотите, чтобы они открывались в браузерной вкладке, а не внутри блока</td><td></td></tr><tr><td><ol start="2"><li>В предпросмотре результата ничего не вывелось?</li></ol></td><td valign="middle">Прежде всего проверьте высоту блока. <strong>Системно</strong> высота блока зависит от высоты содержимого, но бывает такое, что в блоке код, где высота содержимого зависит от высоты экрана и для такого кода <strong>нужно</strong> задавать фиксированную высоту у блока</td><td>Например: calc(100vh - 50px)</td></tr></tbody></table>