> For the complete documentation index, see [llms.txt](https://wiki.reezonly.ru/space/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.reezonly.ru/space/obuchenie/produkty/vkladka-soderzhanie-produkta-kursa/kak-rabotayut-instrumenty-v-konstruktore-kontenta/rabota-s-instrumentom-html-blok.md). # Работа с инструментом HTML-блок *Время чтения: 5 минут* {% hint style="info" icon="file-html" %} HTML - блок - это тип блока в конструкторе урока, который позволяет вставлять и отображать внутри урока произвольный HTML-код.\ С его помощью можно создавать не только стандартные текстовые или медиа-элементы, но и кастомные интерактивные блоки: карточки, слайдеры, схемы, тренажёры, калькуляторы, интерактивные инструкции, квизы и другие форматы, которые не покрываются базовыми блоками платформы. {% endhint %} ## Как работает инструмент HTML - блок ### Как вставить код в блок? Делается это очень просто:

Создание HTML - блока в курсе

1. Перейдите в урок и перетащите **HTML - блок** на страницу 2. Кликните на кнопку **Вставить код** 3. Вставьте или напишите код 4. Проверьте в предпросмотре справа все ли корректно 5. Кликните на кнопку **Сохранить** Отлично, блок заполнен! {% hint style="warning" %} **Обратите внимание, что:** 1. Если блок пустой, он не отображается студентам. 2. Если код содержит ошибки и не может быть корректно воспроизведён, такой блок также не будет отображаться студентам. 3. **Максимальный размер** HTML-кода составляет 64 000 символов {% endhint %} ## Применение инструмента HTML - блок {% hint style="info" %} **HTML-блок** применяется для создания в уроке кастомных элементов, которые невозможно или неудобно собрать с помощью стандартных блоков конструктора. Давайте рассмотрим основные сценарии применения: {% endhint %} 1. **Визуальная подача учебного материала** HTML-блок позволяет оформить информацию в более удобном и понятном виде, чем обычный текстовый блок. Он может использоваться для: * карточек с тезисами; * блоков сравнения; * таймлайнов; * схем и этапов; Например:

Блок с карточками и акцентами на ключевых тезисах

2. **Интерактиыные элементы в уроке** HTML-блок подходит для размещения интерактивных учебных механик, которые вовлекают пользователя в изучение материала.\ Например: * переворачивающиеся карточки; * кнопки с показом ответа; * интерактивные подсказки; * простые тренажёры и мини-сценарии. Например:

Флип карточки

3. **Формирование практических навыков** HTML-блок может использоваться не только для подачи теории, но и для формирования умений. С его помощью можно создавать: * мини-кейсы; * визуальные тренажёры; * сценарии выбора и анализа вариантов; * обучающие калькуляторы и практические инструменты. Например:

Мини-тренажер

4. **Оформление длинных текстов и лонгридов** Когда материал слишком объёмный для обычного текстового блока, HTML-блок позволяет сделать его более читабельным. С его помощью длинный текст можно превратить в: * структурированный лонгрид; * статью с визуальными акцентами; * блок с выделенными цитатами и тезисами; * материал с внутренней навигацией. Например:

Лонгрид

## Особенности использования {% hint style="success" %} Данный раздел будет пополняться небольшими советы, как можно улучшить ваш HTML-блок. {% endhint %}
ПроблемаРешениеПример
  1. Ссылка в HTML-блоке на сторонний сервис открывает этот сервис в этом же блоке?
Добавьте target="_blank" к ссылкам, если хотите, чтобы они открывались в браузерной вкладке, а не внутри блока
  1. В предпросмотре результата ничего не вывелось?
Прежде всего проверьте высоту блока. Системно высота блока зависит от высоты содержимого, но бывает такое, что в блоке код, где высота содержимого зависит от высоты экрана и для такого кода нужно задавать фиксированную высоту у блокаНапример: calc(100vh - 50px)
## Создание HTML-блока с помощью ИИ HTML-блок можно заполнить не только вручную, но и с помощью ИИ. Это удобно, если нужно быстро оформить учебный материал в виде карточек, схемы, слайдера, таймлайна, интерактивного задания или другого визуального блока. ИИ помогает сгенерировать готовый HTML-код по вашему описанию. После генерации результат можно проверить в предпросмотре, отредактировать и сохранить в уроке.
### Как создать HTML-блок с помощью ИИ Добавьте в урок **HTML-блок** и нажмите **«Создать с ИИ»**. Эту же функцию можно открыть через значок ИИ на блоке. После этого откроется окно выбора шаблона. Выберите, какой блок хотите создать: например, карточки, слайдер, таймлайн, раскрывающийся список, схему или задание для самопроверки. Когда шаблон выбран, справа появится панель настройки. В ней нужно заполнить поле **«Задача для ИИ»** — опишите, какой материал нужно оформить и что должно быть внутри блока. {% hint style="success" %} ИИ распознаёт ссылки на изображения из **Reezonly Cloud**. Если хотите использовать фото в сгенерированном HTML-блоке, вставьте ссылку на изображение прямо в задачу для ИИ. {% endhint %} {% embed url="" %} ### Как проходит генерация После нажатия на **«Создать с ИИ»** откроется окно выбора шаблона. Шаблон — это тип будущего блока. Например: карточки, слайдер, таймлайн, раскрывающийся список или задание для самопроверки. Сначала выберите подходящий шаблон. После выбора справа появится панель настройки. В ней можно будет написать задачу для ИИ и выбрать стиль оформления. При генерации HTML-блока можно выбрать готовый шаблон. Он помогает ИИ понять, какой формат нужен: карточки, слайдер, схема, список или интерактивное задание. {% hint style="warning" %} Генерация обычно занимает 8-15 секунд {% endhint %} {% embed url="" %} ## Шаблоны для генерации Перед генерацией выберите шаблон. Он помогает ИИ понять, в каком формате нужно оформить материал: как карточки, слайдер, схему, список, цитату или интерактивное задание. Шаблон не ограничивает вас полностью: его можно использовать как основу, а в поле **«Задача для ИИ»** подробно описать, что именно должно быть внутри блока.
Без шаблона Выбирайте этот вариант, если среди готовых шаблонов нет подходящего формата. Например, если нужен нестандартный интерактив, необычная структура, мини-калькулятор, визуальная инструкция или блок со своей логикой. В этом случае просто опишите задачу своими словами: что должно быть в блоке, как он должен работать и какой результат должен увидеть студент. Например: > Сделай интерактивный блок, где студент выбирает цель тренировки, а ниже получает короткую рекомендацию.
Оформить верстку текста Подходит, если у вас уже есть текст, но он выглядит слишком просто или тяжело читается. ИИ поможет разбить материал на смысловые части, добавить заголовки, списки, акценты и сделать текст удобнее для восприятия. Этот шаблон хорошо использовать для инструкций, теории, методических материалов, описаний процессов и длинных объяснений. Например: > Оформи этот текст как аккуратный учебный блок: добавь заголовки, выдели главное и сделай список с ключевыми выводами.
Презентация со слайдером Используйте этот шаблон, если материал лучше показывать не одним большим блоком, а по частям. Слайдер подходит для короткой презентации внутри урока, обзора темы, пошагового объяснения или материала с изображениями. Такой формат удобен, когда студенту нужно постепенно изучить несколько связанных идей. Например: > Сделай слайдер из 5 слайдов про этапы подготовки к тренировке: разминка, основная часть, контроль техники, заминка и восстановление.
Группа карточек Подходит для информации, которую удобно разложить на отдельные смысловые блоки. Это могут быть правила, преимущества, ошибки, этапы, функции, термины или короткие рекомендации. Карточки помогают быстро просмотреть материал и не потеряться в длинном тексте. Например: > Сделай 4 карточки с главными правилами безопасной тренировки. В каждой карточке должен быть заголовок и короткое объяснение.
Флип-карточки Флип-карточки — это карточки с двумя сторонами. На лицевой стороне можно разместить термин, вопрос или короткую фразу, а на обратной — ответ, объяснение или расшифровку. Шаблон хорошо подходит для самопроверки, запоминания терминов, повторения материала и формата «вопрос — ответ». Например: > Сделай 4 флип-карточки про спорт: на лицевой стороне название понятия, на обратной — простое объяснение.
Таймлайн Таймлайн нужен, когда важно показать порядок событий или этапов во времени. Это может быть история развития темы, план проекта, маршрут обучения, этапы внедрения или последовательность изменений. Выбирайте этот шаблон, если у каждого пункта есть дата, период или этап. Например: > Сделай таймлайн из 5 этапов: от первой тренировки до стабильного тренировочного режима.
Степпер Степпер подходит для пошаговых инструкций. Он показывает, что нужно сделать сначала, что потом и каким должен быть следующий шаг. Такой шаблон удобно использовать для алгоритмов, процессов, настройки сервиса, выполнения задания или объяснения последовательности действий. Например: > Сделай степпер: 1 — выберите цель тренировки, 2 — подберите упражнения, 3 — выполните разминку, 4 — зафиксируйте результат.
Раскрывающийся список Раскрывающийся список помогает компактно разместить большой объём информации. Студент видит только заголовки пунктов и открывает подробности по необходимости. Этот шаблон хорошо подходит для FAQ, пояснений, дополнительных материалов, подсказок и длинных списков с описаниями. Например: > Сделай раскрывающийся список с частыми ошибками новичков в зале. В каждом пункте укажи ошибку и короткое пояснение.
Схема Схема помогает показать связи между элементами. Используйте её, если материал сложно объяснить обычным текстом или списком. Шаблон подходит для структуры системы, логики процесса, иерархии, маршрута пользователя, причинно-следственных связей или взаимосвязи нескольких понятий. Например: > Сделай схему: цель тренировки → выбор нагрузки → выполнение упражнений → обратная связь → корректировка плана.
Цитата Шаблон нужен для красивого оформления цитаты, имени автора и, при необходимости, изображения. Его удобно использовать, чтобы выделить важную мысль, экспертное мнение или смысловой акцент внутри урока. Цитата не должна заменять основной материал, но хорошо работает как визуальная пауза или усиление ключевой идеи. Например: > Оформи цитату тренера о важности восстановления после тренировок. Добавь имя автора и место для фото. Так же имеется возможность прикрепления фото по ссылке из Reezonly Cloud
Информационная панель Информационная панель нужна, чтобы выделить важное сообщение отдельно от основного текста. Это может быть предупреждение, совет, вывод, напоминание или короткая справка. Такой блок помогает обратить внимание студента на то, что нельзя пропустить. Например: > Сделай информационную панель с предупреждением: если во время тренировки появилась боль, нужно остановиться и сообщить тренеру.
Верно/Неверно Этот шаблон показывает два варианта рядом: ошибочный и правильный. Он помогает быстро объяснить разницу между неправильным и корректным действием. Подходит для разбора ошибок, сравнения подходов, демонстрации «как не надо» и «как правильно». Например: > Сделай блок «Верно/Неверно» про технику приседа: слева частая ошибка, справа правильное выполнение.
Последовательность Последовательность показывает порядок действий или элементов, но без привязки ко времени. В отличие от таймлайна, здесь не нужны даты или периоды. Шаблон подходит для алгоритмов, учебных цепочек, порядка выполнения задания или логики процесса. Например: > Сделай последовательность из 5 шагов: подготовка, разминка, основная часть, заминка, отметка результата
Найти пару Это интерактивный шаблон для сопоставления элементов. Студент должен соединить элементы из левой и правой колонки. Подходит для терминов и определений, вопросов и ответов, ситуаций и правильных действий, понятий и примеров. Например: > Сделай задание «Найти пару»: слева виды тренировок, справа их описание. Используй только те пары, которые я передам.
## Редактирование HTML-блока с помощью ИИ Иногда сгенерированный блок почти подходит, но хочется немного изменить результат. Например: * заменить текст; * добавить ещё одну карточку; * убрать лишний пункт; * изменить цвет; * сделать блок компактнее; * переписать объяснение проще; * поменять стиль; * исправить поведение интерактивного элемента. Для этого не обязательно вручную искать нужный фрагмент кода. Можно попросить ИИ отредактировать уже готовый HTML-блок. В поле инструкции напишите, что нужно изменить. Например: > Замени заголовок «Основы тренировок» на «Базовые элементы тренировки». Остальной текст не меняй. Или: > Сделай карточки более компактными и уменьши отступы. Текст и порядок карточек оставь без изменений. После этого ИИ обновит HTML-блок. Проверьте результат в предпросмотре и сохраните изменения, если всё отображается корректно. {% embed url="" %} ## Примеры, где HTML-блок особенно полезен 1. Для красивой подачи теории Если тема сложная или объёмная, HTML-блок помогает сделать её легче для восприятия. Например, вместо большого сплошного текста можно сделать: * карточки с главными тезисами; * информационные панели с важными выводами; * схему процесса; * раскрывающиеся пункты с подробностями. {% hint style="success" %} Так студент быстрее понимает структуру материала и не теряется в тексте. {% endhint %}
2. Для интерактива HTML-блок можно использовать, чтобы студент не просто читал урок, а взаимодействовал с материалом. Например: * открывал подсказки; * переворачивал карточки; * нажимал кнопки; * проходил мини-задание; * выбирал варианты; * сравнивал правильный и неправильный ответ.
{% hint style="success" %} Такой формат делает урок более живым и помогает удерживать внимание. {% endhint %} 3\. Для практики HTML-блок можно использовать как небольшой тренажёр. Например, в курсе по спорту можно сделать блок, где студент выбирает цель тренировки, а затем видит подходящий тип нагрузки. В курсе по продажам — мини-сценарий общения с клиентом. В курсе по безопасности — интерактивный разбор правильных и неправильных действий. То есть HTML-блок подходит не только для оформления, но и для тренировки навыков.
4\. Для длинных материалов Если в уроке много текста, HTML-блок помогает превратить его в более удобный формат. Например: * добавить подзаголовки; * разбить текст на смысловые части; * выделить цитаты; * сделать внутренние акценты; * добавить навигацию; * спрятать подробности в раскрывающиеся блоки.
{% hint style="success" %} Такой материал легче читать, особенно если студент проходит урок с телефона. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://wiki.reezonly.ru/space/obuchenie/produkty/vkladka-soderzhanie-produkta-kursa/kak-rabotayut-instrumenty-v-konstruktore-kontenta/rabota-s-instrumentom-html-blok.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.