Работа с инструментом HTML-блок
Время чтения: 5 минут
HTML - блок - это тип блока в конструкторе урока, который позволяет вставлять и отображать внутри урока произвольный HTML-код. С его помощью можно создавать не только стандартные текстовые или медиа-элементы, но и кастомные интерактивные блоки: карточки, слайдеры, схемы, тренажёры, калькуляторы, интерактивные инструкции, квизы и другие форматы, которые не покрываются базовыми блоками платформы.
Как работает инструмент HTML - блок
Как вставить код в блок?
Делается это очень просто:
Перейдите в урок и перетащите HTML - блок на страницу
Кликните на кнопку Вставить код
Вставьте или напишите код
Проверьте в предпросмотре справа все ли корректно
Кликните на кнопку Сохранить
Отлично, блок заполнен!
Обратите внимание, что:
Если блок пустой, он не отображается студентам.
Если код содержит ошибки и не может быть корректно воспроизведён, такой блок также не будет отображаться студентам.
Максимальный размер HTML-кода составляет 64 000 символов
Применение инструмента HTML - блок
HTML-блок применяется для создания в уроке кастомных элементов, которые невозможно или неудобно собрать с помощью стандартных блоков конструктора. Давайте рассмотрим основные сценарии применения:
Визуальная подача учебного материала
HTML-блок позволяет оформить информацию в более удобном и понятном виде, чем обычный текстовый блок. Он может использоваться для:
карточек с тезисами;
блоков сравнения;
таймлайнов;
схем и этапов;
Например:
Интерактиыные элементы в уроке
HTML-блок подходит для размещения интерактивных учебных механик, которые вовлекают пользователя в изучение материала. Например:
переворачивающиеся карточки;
кнопки с показом ответа;
интерактивные подсказки;
простые тренажёры и мини-сценарии.
Например:
Формирование практических навыков
HTML-блок может использоваться не только для подачи теории, но и для формирования умений. С его помощью можно создавать:
мини-кейсы;
визуальные тренажёры;
сценарии выбора и анализа вариантов;
обучающие калькуляторы и практические инструменты.
Например:
Оформление длинных текстов и лонгридов
Когда материал слишком объёмный для обычного текстового блока, HTML-блок позволяет сделать его более читабельным. С его помощью длинный текст можно превратить в:
структурированный лонгрид;
статью с визуальными акцентами;
блок с выделенными цитатами и тезисами;
материал с внутренней навигацией.
Например:
Особенности использования
Данный раздел будет пополняться небольшими советы, как можно улучшить ваш HTML-блок.
Ссылка в HTML-блоке на сторонний сервис открывает этот сервис в этом же блоке?
Добавьте target="_blank" к ссылкам, если хотите, чтобы они открывались в браузерной вкладке, а не внутри блока
В предпросмотре результата ничего не вывелось?
Прежде всего проверьте высоту блока. Системно высота блока зависит от высоты содержимого, но бывает такое, что в блоке код, где высота содержимого зависит от высоты экрана и для такого кода нужно задавать фиксированную высоту у блока
Например: calc(100vh - 50px)
Создание HTML-блока с помощью ИИ
HTML-блок можно заполнить не только вручную, но и с помощью ИИ. Это удобно, если нужно быстро оформить учебный материал в виде карточек, схемы, слайдера, таймлайна, интерактивного задания или другого визуального блока.
ИИ помогает сгенерировать готовый HTML-код по вашему описанию. После генерации результат можно проверить в предпросмотре, отредактировать и сохранить в уроке.
Как создать HTML-блок с помощью ИИ
Добавьте в урок HTML-блок и нажмите «Создать с ИИ». Эту же функцию можно открыть через значок ИИ на блоке.
После этого откроется окно выбора шаблона. Выберите, какой блок хотите создать: например, карточки, слайдер, таймлайн, раскрывающийся список, схему или задание для самопроверки.
Когда шаблон выбран, справа появится панель настройки. В ней нужно заполнить поле «Задача для ИИ» — опишите, какой материал нужно оформить и что должно быть внутри блока.
ИИ распознаёт ссылки на изображения из Reezonly Cloud. Если хотите использовать фото в сгенерированном HTML-блоке, вставьте ссылку на изображение прямо в задачу для ИИ.
Как проходит генерация
После нажатия на «Создать с ИИ» откроется окно выбора шаблона.
Шаблон — это тип будущего блока. Например: карточки, слайдер, таймлайн, раскрывающийся список или задание для самопроверки.
Сначала выберите подходящий шаблон. После выбора справа появится панель настройки. В ней можно будет написать задачу для ИИ и выбрать стиль оформления.
При генерации HTML-блока можно выбрать готовый шаблон. Он помогает ИИ понять, какой формат нужен: карточки, слайдер, схема, список или интерактивное задание.
Генерация обычно занимает 8-15 секунд
Шаблоны для генерации
Перед генерацией выберите шаблон. Он помогает ИИ понять, в каком формате нужно оформить материал: как карточки, слайдер, схему, список, цитату или интерактивное задание.
Шаблон не ограничивает вас полностью: его можно использовать как основу, а в поле «Задача для ИИ» подробно описать, что именно должно быть внутри блока.
Без шаблона
Выбирайте этот вариант, если среди готовых шаблонов нет подходящего формата. Например, если нужен нестандартный интерактив, необычная структура, мини-калькулятор, визуальная инструкция или блок со своей логикой.
В этом случае просто опишите задачу своими словами: что должно быть в блоке, как он должен работать и какой результат должен увидеть студент.
Например:
Сделай интерактивный блок, где студент выбирает цель тренировки, а ниже получает короткую рекомендацию.
Оформить верстку текста
Подходит, если у вас уже есть текст, но он выглядит слишком просто или тяжело читается. ИИ поможет разбить материал на смысловые части, добавить заголовки, списки, акценты и сделать текст удобнее для восприятия.
Этот шаблон хорошо использовать для инструкций, теории, методических материалов, описаний процессов и длинных объяснений.
Например:
Оформи этот текст как аккуратный учебный блок: добавь заголовки, выдели главное и сделай список с ключевыми выводами.
Презентация со слайдером
Используйте этот шаблон, если материал лучше показывать не одним большим блоком, а по частям. Слайдер подходит для короткой презентации внутри урока, обзора темы, пошагового объяснения или материала с изображениями.
Такой формат удобен, когда студенту нужно постепенно изучить несколько связанных идей.
Например:
Сделай слайдер из 5 слайдов про этапы подготовки к тренировке: разминка, основная часть, контроль техники, заминка и восстановление.
Группа карточек
Подходит для информации, которую удобно разложить на отдельные смысловые блоки. Это могут быть правила, преимущества, ошибки, этапы, функции, термины или короткие рекомендации.
Карточки помогают быстро просмотреть материал и не потеряться в длинном тексте.
Например:
Сделай 4 карточки с главными правилами безопасной тренировки. В каждой карточке должен быть заголовок и короткое объяснение.
Флип-карточки
Флип-карточки — это карточки с двумя сторонами. На лицевой стороне можно разместить термин, вопрос или короткую фразу, а на обратной — ответ, объяснение или расшифровку.
Шаблон хорошо подходит для самопроверки, запоминания терминов, повторения материала и формата «вопрос — ответ».
Например:
Сделай 4 флип-карточки про спорт: на лицевой стороне название понятия, на обратной — простое объяснение.
Таймлайн
Таймлайн нужен, когда важно показать порядок событий или этапов во времени. Это может быть история развития темы, план проекта, маршрут обучения, этапы внедрения или последовательность изменений.
Выбирайте этот шаблон, если у каждого пункта есть дата, период или этап.
Например:
Сделай таймлайн из 5 этапов: от первой тренировки до стабильного тренировочного режима.
Степпер
Степпер подходит для пошаговых инструкций. Он показывает, что нужно сделать сначала, что потом и каким должен быть следующий шаг.
Такой шаблон удобно использовать для алгоритмов, процессов, настройки сервиса, выполнения задания или объяснения последовательности действий.
Например:
Сделай степпер: 1 — выберите цель тренировки, 2 — подберите упражнения, 3 — выполните разминку, 4 — зафиксируйте результат.
Раскрывающийся список
Раскрывающийся список помогает компактно разместить большой объём информации. Студент видит только заголовки пунктов и открывает подробности по необходимости.
Этот шаблон хорошо подходит для FAQ, пояснений, дополнительных материалов, подсказок и длинных списков с описаниями.
Например:
Сделай раскрывающийся список с частыми ошибками новичков в зале. В каждом пункте укажи ошибку и короткое пояснение.
Схема
Схема помогает показать связи между элементами. Используйте её, если материал сложно объяснить обычным текстом или списком.
Шаблон подходит для структуры системы, логики процесса, иерархии, маршрута пользователя, причинно-следственных связей или взаимосвязи нескольких понятий.
Например:
Сделай схему: цель тренировки → выбор нагрузки → выполнение упражнений → обратная связь → корректировка плана.
Цитата
Шаблон нужен для красивого оформления цитаты, имени автора и, при необходимости, изображения. Его удобно использовать, чтобы выделить важную мысль, экспертное мнение или смысловой акцент внутри урока.
Цитата не должна заменять основной материал, но хорошо работает как визуальная пауза или усиление ключевой идеи.
Например:
Оформи цитату тренера о важности восстановления после тренировок. Добавь имя автора и место для фото.
Так же имеется возможность прикрепления фото по ссылке из Reezonly Cloud
Информационная панель
Информационная панель нужна, чтобы выделить важное сообщение отдельно от основного текста. Это может быть предупреждение, совет, вывод, напоминание или короткая справка.
Такой блок помогает обратить внимание студента на то, что нельзя пропустить.
Например:
Сделай информационную панель с предупреждением: если во время тренировки появилась боль, нужно остановиться и сообщить тренеру.
Верно/Неверно
Этот шаблон показывает два варианта рядом: ошибочный и правильный. Он помогает быстро объяснить разницу между неправильным и корректным действием.
Подходит для разбора ошибок, сравнения подходов, демонстрации «как не надо» и «как правильно».
Например:
Сделай блок «Верно/Неверно» про технику приседа: слева частая ошибка, справа правильное выполнение.
Последовательность
Последовательность показывает порядок действий или элементов, но без привязки ко времени. В отличие от таймлайна, здесь не нужны даты или периоды.
Шаблон подходит для алгоритмов, учебных цепочек, порядка выполнения задания или логики процесса.
Например:
Сделай последовательность из 5 шагов: подготовка, разминка, основная часть, заминка, отметка результата
Найти пару
Это интерактивный шаблон для сопоставления элементов. Студент должен соединить элементы из левой и правой колонки.
Подходит для терминов и определений, вопросов и ответов, ситуаций и правильных действий, понятий и примеров.
Например:
Сделай задание «Найти пару»: слева виды тренировок, справа их описание. Используй только те пары, которые я передам.
Редактирование HTML-блока с помощью ИИ
Иногда сгенерированный блок почти подходит, но хочется немного изменить результат. Например:
заменить текст;
добавить ещё одну карточку;
убрать лишний пункт;
изменить цвет;
сделать блок компактнее;
переписать объяснение проще;
поменять стиль;
исправить поведение интерактивного элемента.
Для этого не обязательно вручную искать нужный фрагмент кода. Можно попросить ИИ отредактировать уже готовый HTML-блок.
В поле инструкции напишите, что нужно изменить.
Например:
Замени заголовок «Основы тренировок» на «Базовые элементы тренировки». Остальной текст не меняй.
Или:
Сделай карточки более компактными и уменьши отступы. Текст и порядок карточек оставь без изменений.
После этого ИИ обновит HTML-блок. Проверьте результат в предпросмотре и сохраните изменения, если всё отображается корректно.
Примеры, где HTML-блок особенно полезен
Для красивой подачи теории
Если тема сложная или объёмная, HTML-блок помогает сделать её легче для восприятия.
Например, вместо большого сплошного текста можно сделать:
карточки с главными тезисами;
информационные панели с важными выводами;
схему процесса;
раскрывающиеся пункты с подробностями.
Так студент быстрее понимает структуру материала и не теряется в тексте.
Для интерактива
HTML-блок можно использовать, чтобы студент не просто читал урок, а взаимодействовал с материалом.
Например:
открывал подсказки;
переворачивал карточки;
нажимал кнопки;
проходил мини-задание;
выбирал варианты;
сравнивал правильный и неправильный ответ.
Такой формат делает урок более живым и помогает удерживать внимание.
3. Для практики
HTML-блок можно использовать как небольшой тренажёр.
Например, в курсе по спорту можно сделать блок, где студент выбирает цель тренировки, а затем видит подходящий тип нагрузки.
В курсе по продажам — мини-сценарий общения с клиентом.
В курсе по безопасности — интерактивный разбор правильных и неправильных действий.
То есть HTML-блок подходит не только для оформления, но и для тренировки навыков.
4. Для длинных материалов
Если в уроке много текста, HTML-блок помогает превратить его в более удобный формат.
Например:
добавить подзаголовки;
разбить текст на смысловые части;
выделить цитаты;
сделать внутренние акценты;
добавить навигацию;
спрятать подробности в раскрывающиеся блоки.
Такой материал легче читать, особенно если студент проходит урок с телефона.
Last updated