Презентация в формате HTML: как создать и показать

Презентация в формате HTML — это веб-страница со слайдами. Её открывает любой браузер: на ноутбуке, планшете и телефоне. PowerPoint не нужен ни автору, ни зрителю.

Такие презентации делают нейросети, собирают reveal.js и Marp, экспортирует Keynote. Ниже — четыре способа создать HTML-презентацию, шаблон без библиотек, который мы проверили на четырёх ширинах экрана, и путь от файла до ссылки.

Коротко

• Презентация в формате HTML — один файл .html или папка с index.html. Слайды в ней — блоки разметки, вид задаёт CSS, листает JavaScript.
• Сделать её можно четырьмя путями: попросить нейросеть, собрать в reveal.js, Marp или Slidev, написать по шаблону, экспортировать из Keynote.
• В новых версиях PowerPoint презентацию нельзя сохранить как веб-страницу — так пишет Microsoft. Для ссылки презентацию PowerPoint выкладывают в OneDrive или сохраняют в PDF и публикуют.
• Открывается такая презентация двойным кликом. PDF получается печатью из браузера. По слайду на страницу — когда в CSS для печати заданы размер листа @page и разрыв страницы между слайдами.
• Ссылку даёт публикация: перетащи файл или папку на htmlkin.ru и получи адрес вида deck.htmlkin.ru.

Что такое презентация в формате HTML?

Это веб-страница, разбитая на слайды. Каждый слайд — отдельный блок разметки. Внешний вид задаёт CSS, переключение по стрелкам и свайпу — JavaScript. Браузер показывает такую страницу по одному слайду на экран.

Простая презентация помещается в один файл .html: текст, стили и скрипт лежат внутри. Если на слайдах есть фотографии, шрифты или видео, презентация становится папкой — index.html и файлы рядом с ним.

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

Как создать презентацию в формате HTML: четыре способа

Четырьмя способами: попросить нейросеть, собрать во фреймворке, написать по шаблону или экспортировать из редактора. Выбор зависит от того, что у тебя на руках: тема и тезисы, текст в Markdown или готовые слайды в другом редакторе.

1. Попросить нейросеть. Любая нейросеть, которая пишет код, соберёт слайды одним HTML-файлом, если сказать об этом прямо: «сделай презентацию на 8 слайдов одним HTML-файлом, все стили и скрипты внутри». Claude показывает результат окном рядом с диалогом — как забрать оттуда файл, разобрано в статье HTML-презентация из Claude. ChatGPT присылает код блоком в ответе, готовый промпт — в статье как сделать презентацию в ChatGPT.
2. Собрать во фреймворке. Движок слайдов берёт на себя навигацию, темы и печать. Три фреймворка, которые выдают готовый HTML, — в таблице ниже.
3. Написать по шаблону. Для 5–10 слайдов хватит шаблона на 88 строк: каждый новый слайд — ещё один блок <section>. Шаблон — в следующем разделе.
4. Экспортировать из редактора. Keynote на Mac сохраняет презентацию в HTML: «Файл» → «Экспортировать в» → HTML. Готовая презентация открывается файлом index.html, анимации экспортируются вместе с ней (Apple Support). Google Презентации публикуют файл в интернете: получаешь ссылку или код для вставки на сайт. Сама презентация остаётся на серверах Google (Справка Google Документов).

• reveal.js — открытый фреймворк HTML-презентаций. Для базовой установки хватает браузера: скачай архив, замени пример в index.html своим текстом и открой файл (reveal.js, Installation).
• Marp превращает Markdown в HTML, PDF, PowerPoint или картинки. HTML-файл собирает команда npx @marp-team/marp-cli@latest slides.md -o slides.html (Marp CLI).
• Slidev собирает слайды командой slidev build в одностраничное приложение, файлы ложатся в папку dist (Slidev, Building and Hosting).

Версии на 21 сентября 2026 года: reveal.js 6.0.2, Marp CLI 4.5.1, Slidev 53.0.0. Marp CLI и Slidev запускаются через Node.js.

PowerPoint в этом списке нет. В новых версиях программы, от 2016 до Microsoft 365, «презентацию нельзя сохранить в виде веб-страницы напрямую» (Microsoft Support). В PowerPoint 2010 пункта «Веб-страница» в окне «Сохранить как» уже не было (Microsoft Learn). Что делать с файлом .pptx — в разделе вопросов ниже.

Шаблон презентации на HTML, CSS и JavaScript

Шаблон ниже — готовая презентация на три слайда в одном файле, без библиотек. Сохрани код в файл index.html и открой его двойным кликом: слайды листаются стрелками, пробелом и свайпом. Как он выглядит, видно по ссылке html-prezentaciya.htmlkin.ru: это ровно код ниже, опубликованный на htmlkin как есть.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Презентация в формате HTML</title>
<style>
  html, body { margin: 0; height: 100%; }
  body { background: #faf9f5; color: #1f1e1b; font-family: system-ui, sans-serif; overflow: hidden; }
  /* Каждый слайд занимает весь экран: на проекторе, ноутбуке и телефоне */
  section { position: fixed; inset: 0; display: none; flex-direction: column;
            justify-content: center; padding: 6vmin 8vmin; box-sizing: border-box; }
  section.active { display: flex; }
  h1 { font-size: clamp(28px, 7vmin, 72px); line-height: 1.1; margin: 0 0 .4em; color: #b0432e; }
  p, li { font-size: clamp(17px, 3.4vmin, 34px); line-height: 1.4; margin: .2em 0; }
  img { max-width: 100%; max-height: 55vh; object-fit: contain; }
  .counter { position: fixed; right: 3vmin; bottom: 2vmin; font-size: 14px; opacity: .6; }
  /* Печать и «Сохранить как PDF»: один слайд — одна страница */
  @page { size: 1280px 720px; margin: 0; }
  @media print {
    html { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* фон тоже в PDF */
    body { overflow: visible; }
    section { position: relative; display: flex; height: 100vh; }
    section + section { break-before: page; }
    .counter { display: none; }
  }
</style>
</head>
<body>

<section>
  <h1>Презентация в формате HTML</h1>
  <p>Листай стрелками, пробелом или свайпом</p>
</section>

<section>
  <h1>Что умеет шаблон</h1>
  <ul>
    <li>Стрелки на ноутбуке, свайп на телефоне</li>
    <li>Номер слайда в адресе: ссылка с #3 открывает третий</li>
    <li>Клавиша F — полный экран</li>
    <li>Печать в PDF — один слайд на страницу</li>
  </ul>
</section>

<section>
  <h1>Замени текст на свой</h1>
  <p>Каждый слайд — отдельный блок section. Добавь блок — появится слайд</p>
</section>

<div class="counter"></div>

<script>
  const slides = document.querySelectorAll("section");
  const counter = document.querySelector(".counter");
  let current = 0;

  function show(n) {
    current = Math.max(0, Math.min(n, slides.length - 1));
    slides.forEach((slide, i) => slide.classList.toggle("active", i === current));
    counter.textContent = `${current + 1} / ${slides.length}`;
    history.replaceState(null, "", `#${current + 1}`); // номер слайда в адресе
  }

  document.addEventListener("keydown", (e) => {
    if (["ArrowRight", "ArrowDown", "PageDown", " "].includes(e.key)) show(current + 1);
    if (["ArrowLeft", "ArrowUp", "PageUp"].includes(e.key)) show(current - 1);
    if (e.key === "Home") show(0);
    if (e.key === "End") show(slides.length - 1);
    if (e.code === "KeyF" && !e.ctrlKey && !e.metaKey) { // F — полный экран, и в русской раскладке
      document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen();
    }
  });

  // Свайп на телефоне и планшете
  let startX = 0;
  document.addEventListener("touchstart", (e) => { startX = e.touches[0].clientX; });
  document.addEventListener("touchend", (e) => {
    const dx = e.changedTouches[0].clientX - startX;
    if (Math.abs(dx) > 40) show(current + (dx < 0 ? 1 : -1));
  });

  const fromHash = () => show(parseInt(location.hash.slice(1), 10) - 1 || 0);
  window.addEventListener("hashchange", fromHash); // ссылки вида #3 внутри слайдов
  fromHash();
</script>
</body>
</html>

Что внутри:

• Слайды — блоки <section>. Новый блок — новый слайд, порядок в файле — порядок показа.
• Размеры подстраиваются под экран. Слайд занимает весь экран, шрифты заданы через clamp() и vmin: заголовок — от 28 пикселей на телефоне до 72 на экране Full HD.
• Навигация с клавиатуры и свайпом. Стрелки, пробел, PageUp и PageDown, Home и End, свайп длиннее 40 пикселей. Клавиша F включает полный экран и в русской раскладке: скрипт смотрит на физическую клавишу через e.code. Ctrl + F и ⌘ + F остаются поиском по странице.
• Номер слайда в адресе. После каждого перехода адрес заканчивается на #2, #3 и так далее. Ссылка с #3 открывает сразу третий слайд, обновление страницы оставляет тебя на месте. Внутри слайда ссылка <a href="#3"> тоже переключает на третий — так собирается слайд-оглавление.
• Печать по слайду на страницу. Правило @page задаёт лист 1280 × 720 пикселей (MDN, @page). При печати все слайды становятся видимыми, и break-before: page начинает каждый следующий с новой страницы.

Наш опыт: шаблон проверили в Playwright на ширинах 320, 390, 768 и 1440 пикселей — горизонтальной прокрутки нет ни на одной. Стрелки, пробел, Home, End, свайп и ссылка с #3 сработали, печать дала PDF на три страницы. На тёмном фоне всплыла поломка: с правилом print-color-adjust на body фон в PDF пропадал и страница выходила белой. Правило на html сохраняет фон в Chrome, даже если в настройках печати фон выключен, — оно и стоит в шаблоне.

Как открыть и показать HTML-презентацию?

Двойным кликом по файлу: он откроется в браузере по умолчанию. Для показа включи полный экран: F11 в Chrome на Windows, Fn + F на Mac (Справка Chrome). На Mac работает и общее сочетание macOS Control + Command + F (Apple Support). В шаблоне выше и в reveal.js полный экран включает клавиша F (reveal.js, Fullscreen).

У фреймворков есть режим докладчика:

• reveal.js: S открывает окно заметок с превью следующего слайда. При открытии с диска заметкам нужен локальный веб-сервер (reveal.js, Speaker View). Esc или O включает обзор всех слайдов (reveal.js, Overview).
• Marp: P открывает окно докладчика, O или Esc — обзор, F или F11 — полный экран (Marp CLI).

Сборку Slidev двойным кликом не открыть. Slidev собирает слайды на Vite. Скрипты Vite-сборки, открытой с диска, браузер блокирует по правилам CORS (Vite, Troubleshooting). Такую папку смотрят через npx vite preview или сразу публикуют.

PDF для рассылки. Нажми Ctrl + P (на Mac ⌘ + P) и выбери принтер «Сохранить как PDF». В шаблоне лист и разрывы страниц уже заданы. В reveal.js добавь ?print-pdf к адресу презентации, в печати выбери альбомную ориентацию, поля «Нет» и включи фоновую графику — так документация советует делать в Chrome (reveal.js, PDF Export). В Marp PDF собирается с флагом --pdf.

Как отправить HTML-презентацию ссылкой?

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

1. Один файл. Перетащи .html в форму — ссылка вида deck.htmlkin.ru появится сразу.
2. Папка со слайдами, картинками и шрифтами. Перетащи папку целиком или ZIP-архив. Входной страницей станет index.html в корне. Если его нет — первый HTML-файл в корне. Одна папка-обёртка внутри архива снимается автоматически.
3. Только код в буфере. Открой вкладку «Вставить HTML», вставь код и опубликуй.

Сроки и лимиты

Без аккаунта ссылка действует 24 часа. На бесплатном тарифе сайт живёт, пока на него заходят: после 30 дней без посещений он уходит в архив, ещё через 30 — удаляется. На платных тарифах сайт хранится бессрочно.

На бесплатном тарифе внизу страницы виден промо-баннер htmlkin. На платных зритель видит только слайды.

Размер сайта — до 10 МБ на бесплатном тарифе и до 200 МБ на «Бизнесе», файлов — до 500. Презентацию с внутренними цифрами закрывают PIN-кодом на тарифах «Оптимальный» и «Бизнес». Свой домен подключается на любом тарифе, включая бесплатный. Исправил слайды — обнови сайт в личном кабинете, адрес останется прежним.

Что загружать из фреймворка

Почему Slidev нужен routerMode: hash. По умолчанию Slidev пишет номер слайда в путь адреса: …/5 (Slidev, Customizations). Статический хостинг ищет файл с таким именем, не находит и отдаёт 404 — так ведут себя htmlkin и любой хостинг без правил перенаправления. Режим hash переносит номер за решётку, …/#/5, и ссылка на слайд открывается где угодно. На том же приёме держится шаблон выше.

Заметки докладчика из публичной сборки убирает флаг --without-notes (Slidev, Building and Hosting).

Сценарий целиком — показ с телефона, QR-код для зала, закрытие PIN-кодом — разобран на странице опубликовать HTML-презентацию по ссылке. GitHub Pages тоже публикует статику. Путь там длиннее: аккаунт, репозиторий, коммит и ожидание сборки — сравнение в статье как опубликовать HTML-сайт без git.

Что проверить перед отправкой ссылки?

Открой ссылку с телефона и пролистай все слайды. Типичные поломки и что с ними делать:

Частые вопросы

Как сохранить презентацию PowerPoint в формате HTML?

Напрямую — никак: в PowerPoint для Microsoft 365, 2024, 2021, 2019 и 2016 презентацию нельзя сохранить как веб-страницу. Microsoft предлагает два обходных пути: сохранить слайды картинками в документ Word и уже его — в HTML, либо выложить презентацию в OneDrive и поделиться ссылкой.

Путь без аккаунта Microsoft — PDF: сохрани презентацию в PDF и перетащи файл на htmlkin.ru. Анимации пропадут. Слайды откроются на любом устройстве.

Чем открыть презентацию в формате HTML?

Любым браузером: Chrome, Яндекс Браузером, Safari, Firefox или Edge. Дважды щёлкни по файлу — он откроется в браузере по умолчанию. Если файл открылся в редакторе кода, щёлкни по нему правой кнопкой, выбери «Открыть с помощью» (на Mac — «Открыть в программе») и браузер. Исключение — сборки Slidev и других Vite-проектов: их открывают через локальный сервер или по ссылке после публикации.

Как сохранить HTML-презентацию в PDF?

Печатью из браузера: Ctrl + P (на Mac ⌘ + P), принтер «Сохранить как PDF». Чтобы каждый слайд лёг на свою страницу, в CSS нужны правило @page с размером листа и разрыв страницы между слайдами — в шаблоне из этой статьи они уже есть. В reveal.js добавь ?print-pdf к адресу и печатай из Chrome, в Marp используй флаг --pdf.

Можно ли показывать HTML-презентацию без интернета?

Да, если все файлы лежат в папке презентации: картинки, шрифты, скрипты. Шаблон из этой статьи работает без сети целиком. Библиотеки и шрифты, подключённые по ссылке с чужого сервера, без интернета не загрузятся — их заранее скачивают в папку.

Что запомнить

HTML-презентацию делает нейросеть, собирают reveal.js, Marp и Slidev, экспортирует Keynote. Для 5–10 слайдов хватает шаблона из этой статьи.

Показывают её с ноутбука, телефона или проектора: двойной клик, полный экран — и слайды листаются стрелками или свайпом. Отправляют ссылкой: опубликуй файл или папку как сайт, и у презентации появится свой адрес.

Перед отправкой открой ссылку с телефона и пролистай до последнего слайда.

Источники

• reveal.js, «Installation», «Fullscreen», «Speaker View», «Overview», «PDF Export», получено 2026-09-21, https://revealjs.com/installation/
• reveal.js, Releases (6.0.2 от 10 сентября 2026), получено 2026-09-21, https://github.com/hakimel/reveal.js/releases
• Marp CLI, README и Releases (4.5.1 от 6 сентября 2026), получено 2026-09-21, https://github.com/marp-team/marp-cli
• Slidev, «Building and Hosting», получено 2026-09-21, https://sli.dev/guide/hosting
• Slidev, «Customizations» (routerMode), получено 2026-09-21, https://sli.dev/custom/
• Slidev, Releases (53.0.0 от 16 сентября 2026), получено 2026-09-21, https://github.com/slidevjs/slidev/releases
• Vite, «Troubleshooting» (Built file does not work because of CORS error), получено 2026-09-21, https://vite.dev/guide/troubleshooting
• Microsoft Support, «Публикация презентации в Интернете», получено 2026-09-21, https://support.microsoft.com/ru-ru/powerpoint/publish-your-presentation-to-the-web
• Microsoft Learn, «The options to save a presentation as a webpage are not available in the Save As dialog box in PowerPoint 2010», получено 2026-09-21, https://learn.microsoft.com/en-us/previous-versions/troubleshoot/microsoft-365/microsoft-365-apps/powerpoint/save-presentation-as-webpage-unavailable
• Apple Support, «Экспорт в PowerPoint или другой формат в Keynote на Mac», получено 2026-09-21, https://support.apple.com/ru-ru/guide/keynote/tana0d19882a/mac
• Справка Google Документов, «Как опубликовать документ, таблицу, презентацию или форму Google», получено 2026-09-21, https://support.google.com/docs/answer/183965?hl=ru
• Справка Google Chrome, «Быстрые клавиши в Chrome», получено 2026-09-21, https://support.google.com/chrome/answer/157179?hl=ru
• Apple Support, «Сочетания клавиш Mac», получено 2026-09-21, https://support.apple.com/ru-ru/102650
• MDN Web Docs, «@page», получено 2026-09-21, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page