HTML-письмо

Текст NEWS-01 уже объясняет место нового урока и сохраняет обещание подписки. HTML добавит визуальную иерархию, но не должен менять содержание или делать письмо зависимым от картинки. В этом уроке подготовим полный файл newsletter.html: заголовок, объяснение, основной переход и управление подборкой. Он остаётся локальным образцом, не отправленным сообщением.

Файл в lesson-08 архива серии использует вымышленный домен и не подключает внешние ресурсы. Просмотр в почтовых клиентах не выполнялся. Поэтому мы не называем верстку проверенной во всех приложениях и не выдаём обычный браузерный файл за подтверждённый результат доставки.

Содержание до оформления

Основной текст переносим без нового обещания. Тема материала — источник итогового адреса, предпосылка — различие пути и исходника, результат — понимание расхождения. Первое заметное действие ведёт к уроку, второе к оглавлению. Настройки и остановка находятся в отдельном нижнем абзаце. Если дизайнер заменит точный заголовок рекламной фразой, HTML перестанет представлять исходное письмо.

Выберем одну колонку и ограниченную ширину. Для учебного образца это таблица с role="presentation", шириной 100% и max-width:640px. Таблица служит расположению, не представлению данных. Смысловые абзацы и заголовок остаются внутри обычными элементами. Конкретная совместимость такого решения требует просмотра в выбранных клиентах; наличие таблицы само по себе не гарантирует одинаковую выдачу.

Ниже фрагмент основного перехода; полный файл приложен отдельно.

<p>
  <a href="https://professorweb.example/articles/route-source.html"
     style="color:#6d28d9;text-decoration:underline;">Открыть разбор адреса страницы</a>
</p>

Подпись ссылки называет назначение. Она понятна вне соседнего абзаца и не использует неопределённое «нажмите здесь». Ссылка остаётся обычным текстовым переходом. У нас нет изображения кнопки, JavaScript или формы внутри письма. Это выбранное упрощение учебного макета, которое уменьшает зависимость содержания от возможностей почтового интерфейса.

Стили и ограничения

Основные стили записаны рядом с элементами. Фон светлый, текст тёмный, фиолетовый акцент связан с ProfessorWeb. Шрифт выбирается из обычной системной цепочки, внешняя загрузка отсутствует. Такие решения помогают сохранять читаемое базовое содержание, но не доказывают качество во всех режимах. Реальная рецензия должна учитывать размер экрана, отключённые стили и особенности выбранного приложения.

Для Gmail существует собственный список поддерживаемых CSS-свойств и запросов; неподдерживаемые свойства могут игнорироваться. Это документированное ограничение именно Gmail, а не общий закон всех клиентов. На дату подготовки, 11 октября 2026 года, сверяем его по документации CSS Gmail. В нашем файле нет сложной анимации или поведения, требующего отдельного скрипта.

Не переносите весь CSS сайта в письмо. Хедер каталога, интерактивный поиск и меню разделов решают другую задачу. Письмо должно быть понятным как отдельное сообщение. В образце есть только название проекта, результат главы и два основных перехода. Это не уменьшает полноту технического урока: подробное объяснение остаётся на назначенной странице.

Образы и логотипы могут улучшить узнаваемость, но не должны хранить единственный заголовок. В нашем макете изображений нет. Если они появятся в будущей версии, понадобятся корректный источник, размеры и текстовое описание. Их реальная доступность и способ отображения проверяются отдельно. Нельзя объявлять изображение загруженным только потому, что в HTML появилась строка src.

Управление сообщениями

Нижний абзац объясняет, почему письмо подготовлено: выбранная подборка web по PROMISE-v1. Затем идут настройки и остановка. Демо-ссылки не являются рабочими обработчиками, что явно написано в файле. Они задают требование к будущей интеграции. Обычная ссылка в теле также не реализует автоматически механизм one-click в почтовых заголовках; это будет разобрано отдельно.

Персонализация минимальна. В HTML нет выдуманного имени, полученного из части адреса, и нет заявления, что человек уже прочёл предыдущую главу. Если контакту неизвестно имя, письмо остаётся естественным без приветствия по имени. Подстановка неподтверждённых личных сведений не делает сообщение полезнее. Данные содержания и данные получателя следует соединять по явному назначению.

При будущем шаблонизаторе текстовые значения нужно экранировать в соответствующем контексте. В текущем образце все строки статические и не принимают пользовательский ввод. Поэтому файл не демонстрирует готовую защиту динамической генерации. Если заменить заголовок переменной, потребуется отдельное техническое решение, а не простое соединение строк. Этот предел важно сохранить при использовании приложения.

Не добавляем скрытый пиксель открытия и внешние шрифты. В нашей учебной задаче они не нужны для объяснения верстки. Если будущий проект решит измерять реакцию, назначение, условия и ограничения такого наблюдения должны быть описаны отдельно. HTML-макет не должен незаметно превращаться в интеграцию аналитики только потому, что это удобно исполнителю.

Предметная рецензия

Проверьте макет чтением без оформления. Последовательность текста должна сохраняться: предмет, предпосылка, переход, объяснение подписки, управление. Если удалить все стили, ни один существенный смысл не исчезнет. Это ожидаемое свойство структуры, а не результат реального просмотра. Файл ещё не проходил инструментальную или клиентскую проверку.

Другой вариант — представить узкое окно. Длинные URL не выведены как большие строки в основных абзацах; ссылки имеют понятные подписи. Основной текст остаётся одной колонкой. При настоящей рецензии нужно увидеть, не возникает ли горизонтальная прокрутка и как обрабатывается максимальная ширина. Сейчас такие результаты не выдумываем, а записываем предмет будущей проверки.

Сравните HTML с текстом NEWS-01 по существенным фразам. Если в оформленной версии исчезло условие непроверенного исполнения, читатель получит более сильное обещание. Если исчезла причина получения, письмо потеряет связь с подпиской. Если основной переход заменён красивой, но неопределённой надписью, действие станет менее ясным. Такие расхождения можно обнаружить редакторским чтением ещё до просмотра в клиентах. Однако оно не заменяет клиентскую проверку: структура может быть точной, а отображение всё же различаться. В журнале следует хранить обе категории готовности отдельно. В нашем образце содержание подготовлено локально, отображение и доставка остаются непроверенными. Это позволяет продолжать работу над текстовой версией без выдуманного успешного почтового результата.

В after.json добавлен HTML-01 со статусом prepared_local, отсутствие внешних ресурсов и непроверенные клиенты. newsletter.html — полный документ содержания, но не готовый MIME-конверт для отправки. Получатели, заголовки доставки и провайдер не подключены. Следующая глава создаст равнозначную текстовую версию, чтобы смысл не зависел от HTML-оформления.