HTML-блок — элемент, который показывает на флипе HTML-страницу: макет, прототип интерфейса, отчёт или письмо. Страница отображается со своей вёрсткой и стилями рядом со схемами и заметками, а её код можно открыть и изменить прямо на флипе
Как добавить HTML-блок
На панели инструментов выберите «HTML-блок»
Если инструмента нет на панели, откройте «Все инструменты» — он находится в разделе «Форматы»
Кликните по флипу — появится пустой блок с подсказкой «Перетащите или добавьте сюда HTML файл.»
Нажмите «Добавить HTML» внутри блока и выберите файл .html или .htm. Файл можно и перетащить прямо в пустой блок
Блок заполнится страницей, а его размер подстроится под вёрстку: блок увеличится вправо и вниз
Чтобы вставить код вместо файла, выделите пустой блок, нажмите «Редактировать HTML» в меню над ним и вставьте код в редактор — подробнее в разделе «Как изменить HTML» ниже
Как добавить HTML-файл или код без инструмента
- Перетащите файл .html или .htm на флип или добавьте его через «Загрузить»
- Скопируйте код HTML-документа целиком — он начинается с
<!DOCTYPE html>или<html>— и вставьте его на свободное место флипа. Фрагменты HTML без этих тегов вставляются как обычно
flip спросит, как добавить документ:
- «Создать как HTML-блок» — страница появится на флипе в HTML-блоке
- «Создать как код-блок» — исходный текст документа появится в блоке кода
Отметьте нужный вариант и нажмите «Выбрать». Чтобы закрыть окно без добавления, нажмите «Отмена»
Если файлов несколько, в заголовке окна указано их количество, а выбранный вариант применяется ко всем файлам: HTML-блоки выстраиваются в ряд слева направо. Названием блока, созданного из файла, становится имя файла
Как работать со страницей в блоке
- Пока блок не выделен, прокрутка и жесты над ним управляют флипом: блок можно перетащить, как любой другой элемент
- Выделите блок, чтобы прокручивать страницу внутри него
- Чтобы передвинуть флип, когда курсор находится над блоком, зажмите правую кнопку мыши и перетащите
- Если сильно отдалить флип, вместо страницы в блоке показывается её упрощённое превью
На телефоне и планшете в блоке сначала видно превью страницы. Чтобы открыть саму страницу, нажмите на значок глаза в блоке или выделите блок и нажмите «Показать» в меню над ним. Чтобы закрыть страницу, нажмите «Остановить». Одновременно открыта только одна страница: если открыть другой HTML-блок или iFrame, предыдущий закроется
Как изменить HTML
Выделите блок и нажмите «Редактировать HTML» в меню над ним — справа откроется панель с кодом страницы
Измените код — правки сразу видны в блоке на флипе и сохраняются автоматически
Чтобы закрыть панель, нажмите на крестик в её заголовке
Над кодом в панели:
- Счётчик размера кода, например «12.5 КБ / 2 МБ». При наведении на значок «?» появляется подсказка «Максимальный размер HTML-блока»
- «Выбрать элемент в HTML-блоке» — наведите курсор на страницу в блоке, и элемент под курсором подсветится. Кликните по нему — в редакторе выделится его открывающий тег. Чтобы выйти из режима выбора, нажмите Esc
- «Поиск по коду» — открывает поле «Найти» для поиска по коду
- «Копировать код» — копирует весь код в буфер обмена, появится уведомление «HTML скопирован»
Размер блока при правке кода не меняется. Если удалить весь код, блок снова станет пустым
Название и скачивание
- Название блока показано в меню над ним. Кликните по названию и введите новое — до 120 символов. Блок, созданный инструментом или вставкой кода, получает название «HTML-блок» с номером
- «Скачать» в меню блока сохраняет код страницы файлом .html, имя файла берётся из названия блока
- В фильтре по типу выделенных элементов HTML-блоки отображаются как «HTML-блок» — подробнее в статье Поиск по флипу и фильтр по типу
Требования
- Создавать HTML-блоки, загружать в них файлы и редактировать код могут участники пространства, вошедшие в аккаунт. У остальных пользователей HTML-файл и вставленный HTML-документ сразу добавляются как блок кода, без выбора
Ограничения
- Размер HTML — не больше 2 МБ. Блок из файла или кода большего размера не создаётся, появится уведомление «HTML больше 2 МБ — блок не создан». Правки, после которых код больше 2 МБ, не сохраняются — «HTML больше 2 МБ — изменения не сохранены»
- Пустой файл не добавляется — появится уведомление «HTML-файл пуст»
- В блоке страница показывается без интерактивности: скрипты страницы не выполняются, анимации и переходы отключены, ссылки и формы не работают, видео и аудио не запускаются автоматически, вложенные фреймы не отображаются. Исходный код при этом не меняется — он полностью сохраняется в редакторе и в скачанном файле
- Изображения, стили и шрифты по внешним ссылкам загружаются, а внешние видео и аудио — нет
- На телефоне нет редактора кода и переименования блока, а в мобильном приложении — кнопки «Скачать»
- Меню с редактированием и скачиванием доступно, когда выделен один блок