---
url: https://flip-chart.ru/knowledge-base/html-block.md
description: >-
  HTML-блок показывает на флипе HTML-страницу с её вёрсткой и стилями: создайте
  блок инструментом «HTML-блок», загрузите в него файл .html или вставьте код и
  редактируйте HTML в боковой панели
---

# Как добавить HTML-блок

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

## Как добавить HTML-блок

1. На панели инструментов выберите «HTML-блок»

   Если инструмента нет на панели, откройте «Все инструменты» — он находится в разделе «Форматы»

2. Кликните по флипу — появится пустой блок с подсказкой «Перетащите или добавьте сюда HTML файл.»

   ![Пустой HTML-блок с кнопкой «Добавить HTML»](/images/kb/html-block/1.png)

3. Нажмите «Добавить HTML» внутри блока и выберите файл .html или .htm. Файл можно и перетащить прямо в пустой блок

   Блок заполнится страницей, а его размер подстроится под вёрстку: блок увеличится вправо и вниз

Чтобы вставить код вместо файла, выделите пустой блок, нажмите «Редактировать HTML» в меню над ним и вставьте код в редактор — подробнее в разделе «Как изменить HTML» ниже

## Как добавить HTML-файл или код без инструмента

* Перетащите файл .html или .htm на флип или добавьте его через «Загрузить»
* Скопируйте код HTML-документа целиком — он начинается с `<!DOCTYPE html>` или `<html>` — и вставьте его на свободное место флипа. Фрагменты HTML без этих тегов вставляются как обычно

flip спросит, как добавить документ:

* «Создать как HTML-блок» — страница появится на флипе в HTML-блоке
* «Создать как код-блок» — исходный текст документа появится в [блоке кода](/code-block)

Отметьте нужный вариант и нажмите «Выбрать». Чтобы закрыть окно без добавления, нажмите «Отмена»

![Окно «Как добавить HTML-документ?»](/images/kb/html-block/2.png)

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

## Как работать со страницей в блоке

* Пока блок не выделен, прокрутка и жесты над ним управляют флипом: блок можно перетащить, как любой другой элемент
* Выделите блок, чтобы прокручивать страницу внутри него
* Чтобы передвинуть флип, когда курсор находится над блоком, зажмите правую кнопку мыши и перетащите
* Если сильно отдалить флип, вместо страницы в блоке показывается её упрощённое превью

На телефоне и планшете в блоке сначала видно превью страницы. Чтобы открыть саму страницу, нажмите на значок глаза в блоке или выделите блок и нажмите «Показать» в меню над ним. Чтобы закрыть страницу, нажмите «Остановить». Одновременно открыта только одна страница: если открыть другой HTML-блок или iFrame, предыдущий закроется

## Как изменить HTML

1. Выделите блок и нажмите «Редактировать HTML» в меню над ним — справа откроется панель с кодом страницы

   ![Панель редактора HTML-блока](/images/kb/html-block/3.png)

2. Измените код — правки сразу видны в блоке на флипе и сохраняются автоматически

3. Чтобы закрыть панель, нажмите на крестик в её заголовке

Над кодом в панели:

* Счётчик размера кода, например «12.5 КБ / 2 МБ». При наведении на значок «?» появляется подсказка «Максимальный размер HTML-блока»
* «Выбрать элемент в HTML-блоке» — наведите курсор на страницу в блоке, и элемент под курсором подсветится. Кликните по нему — в редакторе выделится его открывающий тег. Чтобы выйти из режима выбора, нажмите Esc
* «Поиск по коду» — открывает поле «Найти» для поиска по коду
* «Копировать код» — копирует весь код в буфер обмена, появится уведомление «HTML скопирован»

Размер блока при правке кода не меняется. Если удалить весь код, блок снова станет пустым

## Название и скачивание

* Название блока показано в меню над ним. Кликните по названию и введите новое — до 120 символов. Блок, созданный инструментом или вставкой кода, получает название «HTML-блок» с номером
* «Скачать» в меню блока сохраняет код страницы файлом .html, имя файла берётся из названия блока
* В фильтре по типу выделенных элементов HTML-блоки отображаются как «HTML-блок» — подробнее в статье [Поиск по флипу и фильтр по типу](/search-and-selection-filter)

![Меню HTML-блока](/images/kb/html-block/4.png)

## Требования

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

## Ограничения

* Размер HTML — не больше 2 МБ. Блок из файла или кода большего размера не создаётся, появится уведомление «HTML больше 2 МБ — блок не создан». Правки, после которых код больше 2 МБ, не сохраняются — «HTML больше 2 МБ — изменения не сохранены»
* Пустой файл не добавляется — появится уведомление «HTML-файл пуст»
* В блоке страница показывается без интерактивности: скрипты страницы не выполняются, анимации и переходы отключены, ссылки и формы не работают, видео и аудио не запускаются автоматически, вложенные фреймы не отображаются. Исходный код при этом не меняется — он полностью сохраняется в редакторе и в скачанном файле
* Изображения, стили и шрифты по внешним ссылкам загружаются, а внешние видео и аудио — нет
* На телефоне нет редактора кода и переименования блока, а в мобильном приложении — кнопки «Скачать»
* Меню с редактированием и скачиванием доступно, когда выделен один блок