Как встроить HTML 5 проект в WEB страницу или блог.

Возможно вы купили красивую HTML анимацию или создали интерактивный web-контент в программе типа Adobe Animate или Saola. А теперь ищете вариант как отобразить их на своем сайте? Эта инструкция покажет Вам как вставить HTML5 проект в веб станицу вашего сайта ли блога.

Загрузка проекта.

Первый и необходимый шаг – загрузка проекта на ваш веб сервер в корневой каталог.
Картинка ниже показывает пример как выглядит путь размещения проекта на локальном сервере :

Пример: в корне сайта создана папка для проектов – “HTML”, в ней размещена папка готового проекта “wine-bunner-1” , вы видите файлы проекта из этой папки.

Чтобы перенести все файлы с локального компьютера на веб сервер, обычно используют Filezilla. Либо можно воспользоваться файловым менеджером в личном кабинете вашего хостинга.

Используем iframe для встраивания проекта HTML5

Самый простой способ встроить проект HTML5 в вашу веб-страницу – это использовать iframe (встроенный фрейм). Iframe – это просто очень простой HTML-код, который используется для отображения контента из другого источника на веб-странице. Если вы умеете копировать и вставлять, вы можете это сделать.

Если быть более точным, это строка кода, которую вы можете скопировать на свою веб-страницу:

<div style="width:100%; padding-bottom:56.25%; position:relative;">
  <iframe src="https://ваш путь/HTML file" style="position:absolute; top:0px; left:0px; 
  width:100%; height:100%; border: none; overflow: hidden;"></iframe>
</div>

Атрибут src указывает URL (веб-адрес) страницы встроенного фрейма.

1 .Итак вы разместили файлы проекта в корне сайта. Кликните по файлу с расширением .html и ваш проект откроется в новой странице браузера. Скопируйте путь из верхней строчки браузера и вставьте в код между кавычками после src=”…”

Внешний div в приведенном выше коде используется со стилем заполнения внизу. Это важно для сохранения соотношения сторон содержимого iframe. Вам необходимо обновить его стиль в зависимости от соотношения сторон вашего контента. Для этого воспользуйтесь сторонним калькулятором CSS перейдя по ссылке. Вставьте размеры проекта в поля и получите процентное соотношение. Результат вставьте в padding-bottom: ….% в коде

Пример: Допустим размер нашего проекта 1024×576. Мы вставляем размеры для расчета и получаем 56.25%. Вставляем в код.

2. Можно также использовать код с фиксированными размерами, которые вы укажете.

<iframe src= "https://ваш путь/HTML file"   style="width:100%; height:100%;">
</iframe>

или

<iframe width="600" height="600" src="https://ваш путь/HTML file">
</iframe>

Сформированный вами код с помощью блока “произвольный HTML” редактора Gutenberg или аналогичного в другом конструкторе уже можно вывести на любую страницу или блог, или в карточку товара как здесь.

Вот и все! Я надеюсь, что этот учебник помог вам узнать, как встроить проект HTML5 на любую веб-страницу. Попробуйте сами создать самый креативный проект и внедрить его на свой сайт прямо сейчас!