Структура книги
Глава 1 знакомит с ChatGPT в целом и в частности с использованием ИИ для генерации кода веб-страниц. Вы узнаете, какие типы страниц можно создать с помощью ChatGPT, и получите общее представление о процессе.
Глава 2 описывает создание и размещение в интернете вашей первой веб-страницы с помощью ChatGPT. Вы научитесь отправлять ИИ промт для генерации кода, копировать этот код и сохранять его в отдельный файл. Затем вы протестируете код в веб-браузере и бесплатно разместите его в интернете.
Глава 3 показывает, как с помощью ChatGPT настроить использование конкретных шрифтов, цветов и заголовков разделов на веб-странице. Вы узнаете, как попросить ChatGPT предложить вам варианты заголовков первого уровня и подзаголовков для вашего сайта, а также удачные сочетания шрифтов и цветов. Затем вы соберете все инструкции в один промт, на основе которого ChatGPT сгенерирует код для вашей личной страницы.
Глава 4 посвящена структуре веб-страницы. Вы узнаете о шапках, подвалах, границах, внутренних и внешних отступах, а также научитесь добавлять на страницу изображения и ссылки на социальные сети. Глава завершается промтом ChatGPT для создания страницы книжного клуба.
Глава 5 описывает процесс публикации постов на странице, а также использования ИИ для преобразования текстовых промтов в изображения. Все это будет собрано в один промт, на основе которого ChatGPT сгенерирует код для страницы онлайн-журнала.
Глава 6 посвящена ссылкам и навигации. Вы узнаете, как работает код для ссылок, научитесь создавать их вручную, чтобы не всегда полагаться только на ChatGPT. Вы также узнаете, как написать промт для создания панели навигации со ссылками на другие страницы сайта. Проект этой главы — информационный сайт.
Глава 7 рассматривает способность ChatGPT генерировать текст. Вы узнаете, как попросить ИИ предложить идеи для текста, рекомендации по написанию и советы по изучению темы. Вы также узнаете, как лучше всего сформулировать промт, чтобы ChatGPT сгенерировал текст в вашем собственном стиле. В конце главы вы составите промт для написания кода страницы, посвященной какому-либо увлечению или хобби.
Глава 8 рассказывает, как написать промт, чтобы ChatGPT сгенерировал код форм для веб-страниц, включающих текстовые поля, чекбоксы, радиокнопки, выпадающие списки и другие элементы. Вы также узнаете, как зарегистрироваться в сервисе, который позволит получать данные формы по электронной почте. Все это вы объедините в один промт, на основе которого ChatGPT напишет код для страницы регистрации на мероприятие.
Глава 9 знакомит с двумя распространенными элементами веб-страниц: маркированными и нумерованными списками. Вы научитесь писать промты для создания таких списков и узнаете различные способы их настройки в соответствии с вашими потребностями. Глава завершается промтом ChatGPT для генерации кода страницы с рецептами.
Глава 10 дает более подробное представление о работе с изображениями на веб-странице. Вы научитесь кодировать картинки вручную, использовать изображения-плейсхолдеры и работать с миниатюрами рисунков. Проектом этой главы является проработанная страница фотогалереи.
Глава 11 знакомит с одним из наиболее популярных шаблонов веб-страниц — карточкой, которую можно использовать для демонстрации таких элементов, как произведения искусства, хобби, люди или события. Вы сможете применить полученные знания на практике, когда попросите ChatGPT создать для вас проект этой главы — страницу портфолио.
Глава 12 представляет полное руководство по использованию тегов разметки веб-страниц, а также показывает, как выделять важные слова и делать на них акценты. Вы также узнаете полезную технику для лучшего отображения страниц на маленьких экранах. Проект этой главы — страница с длинной статьей и боковой панелью.
Глава 13 знакомит с интерактивными веб-страницами, на которых большая часть контента формируется из отдельного файла данных. Сначала вы узнаете, как попросить ChatGPT создать файл данных из таблицы Excel, а затем — как предоставить пользователям сайта возможность взаимодействовать с этими данными: фильтровать, сортировать и выполнять поиск по ним. Проект этой главы — каталог онлайн-курсов для вымышленного университета.
Приложение A предоставляет полезную информацию о том, что понадобится для начала работы над веб-страницами с использованием ChatGPT. Вы узнаете, как настроить аккаунт ChatGPT, как проверять код и работать с файлами веб-страниц.
Приложение B посвящено размещению вашего кода в интернете. Вы узнаете, как это можно сделать на двух бесплатных сервисах: Netlify и Cloudflare, а также на других сайтах.