раздел 01

Из чего состоит HTML-презентация

Чтобы ставить агенту задачу и понимать, что он вернул, полезно знать устройство файла. Оно простое: четыре части в одном документе.

Стили

Тег style в начале файла. Цвета, шрифты, размеры, раскладка слайда. Всё оформление в одном месте.

Слайды

Каждый слайд - секция section. Заголовок, текст, картинка или схема внутри. Порядок секций - порядок показа.

Навигация

Скрипт в конце файла: стрелки клавиатуры, пробел, клик, свайп на телефоне, Home и End, счётчик слайдов.

Масштаб

Холст 1920x1080 и transform: scale под размер окна. Пропорции 16:9 одинаковые на любом экране.

Стили

В начале файла стоит тег style, а внутри него CSS: какой шрифт, какие цвета фона и текста, где лежит заголовок, какой отступ у списка. Хорошая практика, о которой стоит попросить агента сразу: вынести цвета и шрифт в переменные CSS. Тогда «сделай акцентный цвет синим» - это правка одной строки, а не двадцати.

Слайды

Каждый слайд - это секция <section> с содержимым. Заголовок, два-три абзаца или список, справа схема. Агент ориентируется по номеру секции, поэтому правки формулируются просто: «слайд 6 - убери второй пункт списка».

Главное ограничение здесь не техническое, а смысловое: на слайде не больше шести строк текста, размер шрифта на холсте не меньше 24 пикселей. Иначе с проектора не прочитать. Об этом агенту нужно сказать прямо, сам он норовит уместить весь абзац из исходника.

Скрипт в конце файла делает три вещи: показывает одну секцию, прячет остальные и слушает события. Стрелка вправо, пробел, клик по правой половине экрана, свайп влево на телефоне - следующий слайд. Стрелка влево, свайп вправо - предыдущий. Home и End - первый и последний. В углу счётчик вида «7 / 24».

Масштаб

Слайд верстается на фиксированном холсте 1920 на 1080 пикселей. Скрипт измеряет окно браузера, считает, во сколько раз холст нужно уменьшить или увеличить, чтобы он влез целиком, и применяет transform: scale. Поэтому на ноутбуке с экраном 1366 пикселей и на проекторе Full HD слайд выглядит одинаково, только размер разный. Без этого приёма текст на маленьком экране вылезает за край - это самая частая поломка, о ней в главе Типовые проблемы.

Печать в PDF

Отдельный блок стилей @media print говорит браузеру, как печатать: каждая секция на своей странице, альбомная ориентация, без полей, фоны включены. Тогда Ctrl+P превращает презентацию в аккуратный PDF. Подробнее в главе Показать, отдать, распечатать.

Требования, которые проговариваете агенту

Этот список копируется в каждое ТЗ. Он короткий, но без любого из пунктов результат приходится переделывать.

Один файл HTML, стили и скрипт внутри, без внешних библиотек и без шрифтов из сети.
Пропорции 16:9, базовый холст 1920x1080, масштабирование под размер окна.
Навигация: стрелки, пробел, клик, свайп, Home и End, счётчик слайдов.
Картинки только как inline-SVG или встроенные data-URI. Никаких ссылок на файлы и на сайты.
Иллюстрации и схемы рисовать SVG кодом. Без эмодзи.
Шрифт на холсте не меньше 24 пикселей, на слайде не больше шести строк текста.
Цвета и шрифты в переменных CSS.
Режим печати: каждый слайд на отдельной странице.

Скелет кода

Ориентир, чтобы узнать структуру в файле, который вернёт агент. Не шаблон и не полный код: здесь нет масштабирования, свайпов и печати.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<style>
  :root { --bg: #0f172a; --fg: #f8fafc; --accent: #38bdf8; --font: system-ui, sans-serif; }
  body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); }
  section { display: none; width: 1920px; height: 1080px; padding: 120px; box-sizing: border-box; }
  section.active { display: block; }
  h1 { font-size: 72px; margin: 0 0 40px; }
  p, li { font-size: 36px; line-height: 1.4; }
  #counter { position: fixed; right: 24px; bottom: 16px; font-size: 18px; opacity: .6; }
</style>
</head>
<body>
<section class="active"><h1>Заголовок</h1><p>Подзаголовок</p></section>
<section><h1>Проблема</h1><ul><li>Тезис один</li><li>Тезис два</li></ul></section>
<section><h1>Решение</h1><p>Одна мысль на слайд</p></section>
<div id="counter"></div>
<script>
  const slides = [...document.querySelectorAll('section')];
  let i = 0;
  function show(n) {
    i = Math.max(0, Math.min(slides.length - 1, n));
    slides.forEach((s, k) => s.classList.toggle('active', k === i));
    document.getElementById('counter').textContent = (i + 1) + ' / ' + slides.length;
  }
  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight' || e.key === ' ') show(i + 1);
    if (e.key === 'ArrowLeft') show(i - 1);
    if (e.key === 'Home') show(0);
    if (e.key === 'End') show(slides.length - 1);
  });
  show(0);
</script>
</body>
</html>

Что здесь видно. Переменные в :root - палитра и шрифт. Секции скрыты, показывается одна с классом active. Скрипт переключает класс по клавишам и обновляет счётчик. Всё остальное, что делает агент, надстраивается над этой схемой.

Если хочется разобраться, что такое теги, классы и селекторы, курс Основы веба даёт это за один вечер. Для работы с презентациями достаточно знать, где в файле стили, где слайды и где скрипт.