Шаг 2 - Содержание

Блок контента HTML-код

Через этот инструмент можно выводить блоки html-верстки. Даже если вы не обладаете навыками верстки и не знаете html и css, вы можете вставить сюда блок, найденный в интернете или сгенерированный ИИ по вашему запросу.

Обратите внимание! Есть существенные ограничения на добавляемый в этот блок код.

Допускается:

  1. Любые теги, относящиеся непосредственно к верстке визуального контента.
  2. Inline-стили. То есть в тегах можно прописывать стили типа style="color:red". Параметры типа class и id будут проигнорированы

Не допускается (просто будут удалены):

  1. Любые теги не относящиеся к визуальной верстке, например, мета-теги, теги <script>, <style>, <link>, <head> и прочие. Все эти блоки будут удалены из кода.
  2. JS-скрипты и css-стили. Если нужно стилизовать контент, используйте inline-стили.
  3. Подключение css, js и любых других файлов.

Примеры использования

Здесь перечислены очевидные примеры, для чего вы можете использовать этот блок.

Встройка видео

Если у вас есть ссылка на видеофайл, вы можете вывести плеер в приложении, чтобы его можно было проигрывать. Для этого используется тег <video>. 

Пример:

<video controls>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=video/mp4>
</video>

Обратите внимание! Ссылка должна быть именно на видеофайл, загруженный на сторонний ресурс. Не пытайтесь вывести ссылку на YouTube или другой видеохостинг. Для этого есть другие инструменты, которые также можно использовать в данном блоке.

Встройка аудио

Аналогичным образом встраивается аудиоплеер со ссылкой на аудиофайл. Для этого используется тег <audio>.

Пример:

<audio controls src="https://webaudioapi.com/samples/audio-tag/chrono.mp3"></audio>
Встройка ресурсов через iframe

С помощью тега iframe можно выводить любые ресурсы, которые допускают такую возможность. Например, видеохостинги предоставляют код для встройки видео на страницу сайта. Он так же будет работать и в приложении. Вы можете найти такой код в функции Поделиться под видео.

Пример:

<iframe width="720" height="405" src="https://rutube.ru/play/embed/e49093fa7bd3216dc81463bccbdc7bcd/" frameBorder="0" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Стилизованные таблицы

К сожалению, ни один инструмент не позволяет создать нормальную таблицу для вывода в приложении. Вы можете сверстать любую таблицу в желаемом стиле через этот блок контента.

Пример:

<table style="border-collapse: collapse; width: 400px; text-align: center;">
       <tr>
           <th style="border: 1px solid black; padding: 8px; background-color: #f2f2f2;">Фрукт</th>
           <th style="border: 1px solid black; padding: 8px; background-color: #f2f2f2;">Цвет</th>
           <th style="border: 1px solid black; padding: 8px; background-color: #f2f2f2;">Сезон</th>
       </tr>
       <tr>           <td style="border: 1px solid black; padding: 8px;">Яблоко</td>
           <td style="border: 1px solid black; padding: 8px;">Красный</td>
           <td style="border: 1px solid black; padding: 8px;">Осень</td>
       </tr>
       <tr>
           <td style="border: 1px solid black; padding: 8px;">Апельсин</td>
           <td style="border: 1px solid black; padding: 8px;">Оранжевый</td>
           <td style="border: 1px solid black; padding: 8px;">Зима</td>
       </tr>
       <tr>
           <td style="border: 1px solid black; padding: 8px;">Банан</td>
           <td style="border: 1px solid black; padding: 8px;">Жёлтый</td>
           <td style="border: 1px solid black; padding: 8px;">Лето</td>
       </tr>
</table>