HTML-код с ChatGPT: как сделать простую страницу

В этой статье

Попросите ChatGPT подготовить один полный index.html, сохраните код в UTF-8 и откройте файл в браузере. Для небольшого объявления этого достаточно: сервер, установка пакетов и сборка не нужны. Разберём весь путь на вымышленном книжном обмене.

Как сформулировать запрос

В запросе нужно зафиксировать содержимое страницы и формат ответа. Иначе вместе с объявлением можно получить стили, скрипты и блоки, которых в задаче не было. Скопируйте в чат:

Создай полный файл index.html на русском языке для вымышленного книжного обмена.

На странице должны быть:
- заголовок «Книжный обмен»;
- дата и время: 18 октября 2026 года, 12:00–14:00;
- место: клуб «Лист», улица Лесная, 5;
- список того, что взять с собой: до трёх книг в хорошем состоянии и сумку;
- условие: вход свободный, предварительная запись не нужна.

Используй только чистый HTML. Не добавляй CSS, JavaScript, фреймворки,
изображения и сетевые зависимости. Не добавляй форму, кнопку отправки
или выдуманные контакты.

Верни только полный код файла, начиная с <!doctype html>, без Markdown-ограждений
и пояснений до или после кода. Укажи язык ru и кодировку UTF-8.
В документе должен быть ровно один h1.

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

Такой текстовый запрос доступен в бесплатном ChatGPT с ограничениями использования. Покупка для выполнения примера не нужна. Если вы уже выбираете платный тариф для дальнейшей работы, в Amber Market есть месячная подписка ChatGPT: Go, Plus, PRO x5 или PRO x20.

Готовый полный файл

Ниже — готовая заготовка для этой задачи. Её можно сохранить как index.html, чтобы пройти проверку даже без обращения к модели.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Книжный обмен</title>
  </head>
  <body>
    <main>
      <h1>Книжный обмен</h1>

      <p>18 октября 2026 года, 12:00–14:00</p>
      <p>Клуб «Лист», улица Лесная, 5</p>

      <h2>Что взять с собой</h2>
      <ul>
        <li>До трёх книг в хорошем состоянии</li>
        <li>Сумку</li>
      </ul>

      <p>Вход свободный, предварительная запись не нужна.</p>
    </main>
  </body>
</html>

<!doctype html> задаёт современный режим обработки HTML. Внутри корневого html находятся служебный head и видимый body: title задаёт название вкладки, а h1 — заголовок на самой странице. Устройство документа и правила вложения элементов описаны в руководстве MDN по базовому синтаксису HTML.

HTML — язык разметки: здесь он задаёт заголовок, абзацы и список. Без CSS браузер покажет их со стандартным оформлением. Формы в примере нет, данные никуда не отправляются.

Как сохранить результат без ошибки расширения

  1. Скопируйте код без строк с тройными обратными кавычками. Если ChatGPT добавил пояснение, оставьте только часть от <!doctype html> до </html>.
  2. Вставьте код в редактор обычного текста, например Блокнот, и выберите «Сохранить как».
  3. Укажите имя index.html и кодировку UTF-8. Она должна совпадать с meta charset="utf-8" в коде, чтобы русские буквы отображались правильно.
  4. Если редактор предлагает тип «Текстовый документ», выберите «Все файлы». В проводнике включите отображение расширений и проверьте полное имя: нужен index.html, а не index.html.txt.

Как проверить локальную страницу

Откройте файл index.html в браузере — например, перетащите его в окно браузера. В адресной строке появится локальный путь, начинающийся с file:///. Страница открыта на вашем компьютере; в интернете она от этого не появляется.

Сверьте содержимое страницы с заданием:

  • На странице есть заголовок «Книжный обмен», а на вкладке — такое же название.
  • Дата и время: 18 октября 2026 года, 12:00–14:00.
  • Место: клуб «Лист», улица Лесная, 5.
  • В списке два пункта: до трёх книг в хорошем состоянии и сумка.
  • Есть фраза «Вход свободный, предварительная запись не нужна».

Русский текст должен читаться без искажений. Если вместо страницы открылся исходный код, проверьте расширение файла и то, что вы открыли его именно в браузере. Если видны нечитаемые символы, снова сохраните файл в UTF-8.

Для доработки укажите участок и нужное изменение. Например:

В этом HTML измени только заголовок h2: вместо «Что взять с собой» напиши
«Что принести на обмен». Сохрани остальные элементы, тексты и данные без изменений.
Верни полный обновлённый HTML-файл.

Сохраните обновлённый код в тот же файл и обновите вкладку браузера. Проверьте, что поменялся заголовок списка, а дата, адрес и остальные данные остались прежними. Когда структура готова, можно отдельно попросить ChatGPT исправить ошибки в тексте объявления.

Источники

Есть следующая задача?Ещё по теме «Программирование» →