Когда-то создание сайтов было делом для программистов, которые очень хорошо разбирались в сложных языках. Все изменилось сегодня. Благодаря появлению умных языковых моделей, таких как ChatGPT, все стали доступны. Даже если вы полный новичок, вы можете прямо разговаривать с искусственным интеллектом, чтобы шаг за шагом собрать свой веб-ресурс.
Этот метод не требует технических знаний. Вы говорите свои идеи и цели простыми словами, а не пишете код вручную. ChatGPT будет вашим личным консультантом и помощником. Он может предложить идеи для дизайна, предложить структуру сайта и даже создать фрагменты кода, которые вы можете использовать.
В этой статье мы разберем, как создать рабочий сайт с помощью диалога с нейросетью. Вы увидите, что это не фантастика, а простой и доступный инструмент, который экономит время и усилия. Даже если вы никогда раньше не занимались чем-то подобным, у вас есть все шансы на успех.
Создание сайта с помощью ChatGPT гораздо проще, чем кажется. Он помогает в написании текстов, создании описаний и формировании структуры страниц, а также предоставляет примеры кода, если нужно внести правки. Вам не нужно быть программистом; достаточно просто сказать, какой сайт вы хотите, и ИИ подскажет, с чего начать, какие блоки включить и как организовать все. Все это делает процесс быстрее и помогает быстрее запустить рабочий сайт, особенно с простыми конструкторами вроде Tilda или Wix.
Важная информация
Попyлярная нейросеть ChatGPT может использоваться для создания кода так же, как и для написания текстов. И если это так, нельзя ли использовать ChatGPT при создании веб-сайтов? Поскольку это зависит от того, какой именно сайт нужно создать, ответ на этот вопрос может быть как «да», так и «нет». Да, нейросеть вполне справится с такой задачей, если это просто статический сайт. Даже в этом случае необходимо иметь базовые знания HTML и CSS, поскольку ChatGPT может не понять, что они хотят. Тогда нужно будет вручную исправлять код.
Когда речь идет о динамических сайтах на PHP с использованием баз данных SQL и скриптов, ChatGPT не имеет большой пользы. Вы можете использовать их только для создания небольших фрагментов кода, только если вы понимаете, как этот код работает. Поскольку эта нейросеть не предназначена для создания полноценных динамических сайтов, использование ChatGPT невозможно. Для этого существуют специальные программы, например CMS-системы, такие как WordPress или Joomla. Таким образом, все, что описано ниже, касается только создания простого HTML-сайта.
Кроме того, следует отметить, что одной нейросети будет недостаточно для создания сайта с помощью ChatGPT. Сайт состоит не только из кода и текста, но и из изображений, для которых могут потребоваться графические редакторы. Кроме того, будет полезно иметь под рукой текстовый редактор с поддержкой языков программирования, например Notepad++, а также современный браузер, если необходимо тестировать созданные веб-страницы. Веб-мастера, имеющие опыт работы с локальным сервером, могут его использовать.
Кроме того, прочитайте: Выбор среды разработки для программирования
Этап 1: Визуализация структуры
Перед началом работы с ChatGPT необходимо придумать и представить структуру сайта в любом графическом редакторе или даже на бумаге. Это облегчает процесс создания текстового описания, которое будет использоваться при создании кода. В частности, необходимо изучить следующие компоненты:
- Ширина сайта, его цвет, а также цвет элемента «body».
- Количество веб-страниц и их содержимое.
- Высота, структура и фон шапки сайта. Фоном шапки сайта может служить однотонная заливка или изображение.
- Расположение, ширина, высота, цвет и количество пунктов меню.
- Количество и расположение текстовых блоков, цвет их фона.
- Высота, структура и фон футера (подвала сайта).
- Гарнитура, размер и цвет шрифта.
- Размер и расположение различных графических элементов: иконок, превью, кнопок, текстовых форм, чекбоксов и так далее.
Для изменения цвета кода можно использовать готовые таблицы цветов HTML, доступные в Интернете.
Этап 2: Создание каркаса сайта
Принимая во внимание созданный каркас веб-страницы, составьте техническое задание ChatGPT, включающее примерно следующее:
Представьте себе, что вы веб-разработчик и вам нужно создать несложный сайт. Сделайте код веб-страницы с структурой, представленной ниже, используя языки разметки HTML5 и CSS3:
- Сайт должен иметь ширину 790px и 750px в высоту.
- Шапка сайта должна состоять из двух вертикально расположенных блоков. Верхний - высотой 50px и цветом #B0E0E6, второй - высотой 106px и цветом #87CEEB.
- Заголовок сайта размести в левой части верхнего блока шапки.
- В нижней части нижнего блока создай горизонтальное меню из пяти элементов. Фон элементов меню по умолчанию #AFEEEE, а при наведении на них курсора мыши #40E0D0.
- Для фона сайта используй цвет #F8F8F8.
- Футер сайта должен иметь высоту 30px и цвет #B0E0E6.
Перейдите к созданному запросу ChatGPT. Нейросеть создает код страницы. Этот метод может включать стили прямо в код HTML, но может быть и так, что стили будут представлены отдельным блоком. Не используйте слишком сложные формулировки при составлении запросов. Вероятность того, что нейросеть сделает ошибку, снижается с более простым описанием. Позже дополнительные детали будут добавлены. Далее выполните следующее:
- Создайте на компьютере папку и дайте ей название сайта, например «site.com».
- Создайте в папке «Блокнотом» или Notepad++ текстовый файл, скопируйте сгенерированный ChatGPT HTML-код и вставьте его в документ.
- Сохраните файл с именем и расширением «index.html».
- Если код стилей был создан отдельно, тут же в папке «site.com» создайте еще один простой текстовый файл, скопируйте код CSS, вставьте его в документ и сохраните с именем и расширением, которые указаны в строке
<link rel="stylesheet" href="styles.css">кода HTML. В данном примере это файл с именем «styles.css». 
Чтобы увидеть результат, используйте любой современный браузер, чтобы открыть созданный файл «index.html».
Этап 3: Коррекция кода каркаса
Поскольку ChatGPT не может понимать мысли веб-мастера, неясно, как все будет выглядеть. В этом примере нейросеть совершила несколько ошибок, а именно:
- Заголовок разместила в нижней части шапки.
- Меню разместила под шапкой, а не в ней, к тому же оно располагается справа, а не слева.
Укажите название формирующего тега и название CSS-класса, если он используется, чтобы ChatGPT не ошибался и знал, в какие блоки ему нужно внести изменения. Ниже приведен пример такого запроса.
- Перемести заголовок в блок <div class="top-header">. Сделай отступ для заголовка слева на 20px, задай размер шрифта 30px.
- Задай высоту меню 30px и перемести его в левую нижнюю часть блока <div class="bottom-header">.
- Задай цвет #F8F8F8 для блока с контентом, а для элемента задай белый цвет. Если блок для контента отсутствует, создай его. Он должен располагаться между шапкой и подвалом сайта.
И снова ошибка. Блок для основного контента создан, но он оказался глубоко внизу, что стало очевидным после заполнения блока текстом-рыбой. Причина оказалась проста – ChatGPT ошибся при создании каркаса сайта, включив в блок <header> только шапку, причем в стилях для этого блока была указана фиксированная высота.
В данном примере эта неточность была устранена путем перемещения закрывающего тега </header> под блок с контентом.
Также потребовалось заменить значение определяющего высоту сайта элемента height: 750px; на height: auto; в классе «header».
Это наглядный пример, почему так важно знать хотя бы основы HTML и CSS. Однако все же будет лучше избегать ручных правок, а указать ChatGPT, что нужно сделать. Если попросить ChatGPT заменить весь код отредактированным вручную, высока вероятность, что нейросеть где-то ошибется. После внесения изменений в код структура была исправлена и каркас принял надлежащий вид.
Этап 4: Работа с блоком контента
Теперь можно перейти к работе с блоком контента. Чтобы ChatGPT не напутал, лучше всего действовать по шагам, формируя 2-3 команды за раз. создание трех текстовых блоков, расположенных горизонтально. Поначалу можно создать один блок, чтобы использовать этот запрос.
- Создай внутри блока <div class="content"> блок с внешним отступом 10px сверху.
- Перемести в него текст-рыбу.
- Фон блока задай #E8E8E8. Текст оформи как абзац с внутренним отступом 10px.
Нейронесер может создавать код только для одного блока, если ей дают команду изменить его. ChatGPT создал блок с текстовым наполнителем и классом «текстовый блок». Теперь необходимо создать в нем блок с заголовком в более темном сером цвете. Для этого использовался запрос, указанный ниже:
- Создай в блоке <div class="text-block"> еще один блок высотой 25px, без отступов и размести его над абзацем.
- Используй для блока цвет #B0B0B0.
- В созданный блок добавь заголовок H3 белого цвета, размером 14px, c отступом слева 10px. Сверху и снизу добавь внутренний отступ 3px.
- Добавь блоку нижнюю границу темно-серого цвета толщиной 1px.
Было решено попросить ChatGPT трижды продублировать блок.
Этап 5: Работа с изображениями
После завершения работы над структурой сайта можно будет заняться дизайном, в частности включением изображений. При создании графики необходимо подготовить заранее, чтобы учитывать размеры блоков, в которые она будет вставляться.
- Создайте в каталоге с названием сайта отдельную папку с произвольным английским названием, к примеру «img».
- Скопируйте в нее изображения, которые будут использоваться для оформления сайта.
Предположим, что вам нужно установить изображение в шапке сайта. Сформируйте команду ChatGPT, используя название блока, фоновое изображение и папку. Запрос будет выглядеть так:
Используйте изображение navigation.jpg из папки img в корне сайта в качестве фона блока <div class="bottom-header">.
Если код создан отдельно, он должен быть включен в HTML- или CSS-файл. В данном случае ChatGPT создал блок CSS-кода, который необходимо было добавить к классу «bottom-header», который уже существовал. При этом ChatGPT допустил ошибку, добавив относительный слэш в начало изображения, который необходимо было удалить вручную. Таким образом, фон в нижней части главной страницы был изменен. Для футера, меню и верхней части шапки также добавляется фоновое изображение. Если для фона используется небольшое изображение, которым нужно заполнить всю область, следует будет попросить ChatGPT не растягивать картинку и разрешить ее дублирование. Вид шапки сайта после добавления фонового изображения для нового блока.
Если вам нужно вставить изображение в текстовый блок, вы должны знать, с какой стороны текст будет обтекать изображение и какие отступы будут использоваться. Это делается с помощью запроса:
- Вставь в первый блок с текстом изображение cpu.png из папки img. Изображение должно располагаться в левой части, а текст – в правой.
- Сделай для изображения отступ 3px справа.
ChatGPT создал HTML-код вместе со стилями, но опять при этом допустил ошибки, разместив картинку не в начале, а выборочно внутри текста, не в первом, а во втором блоке. Ошибка была исправлена вручную.
Так как в области контента имеются три блока, нужно будет вставить в текст еще два других изображения аналогичным образом. Поскольку расположение и отступы те же, просить нейросеть повторить операцию для других блоков не обязательно, гораздо проще скопировать сгенерированный код и вставить его в другие блоки вручную по уже имеющемуся образцу. Единственное, что надо будет сделать, – это заменить названия изображений, если они отличаются.
По завершении основной работы можно добавить или скорректировать детали. В данном примере в футер сайта были добавлены его название и дата создания, заменен тайтл и заголовок в шапке. Для этого использовались следующие запросы:
- Добавь в футер сайта название сайта «Компьютерное железо и периферия», дату и год создания сайта. Используй шрифт 13px белого цвета.
- Замени title и заголовок сайта H1 на «Компьютерное железо и периферия», размер шрифта задай 25px, цвет текста установи #4169E1.
Таким образом, разработка самого простого одностраничного сайта с помощью ChatGPT может быть завершена. Вы должны создать несколько страниц веб-сайта, используя файл «index.html» как шаблон. При этом ChatGPT потребуется немного, в основном для изменения области контента. Специальные страницы, такие как страница с формой обратной связи, создание которой описано ниже, не включены.
Этап 6: Добавление ссылок
Перед созданием дополнительных страниц на основе файла «index.html» необходимо указать ссылки на файлы, которые будут использоваться. Допустим, их папки «home.html», «about.html», «services.html», «portfolio.html» и «contacts.html» будут иметь соответствующие названия. Пожалуйста, создайте следующий запрос в ChatGPT:
Свяжи эти элементы главного меню со следующими файлами, расположенными в корне сайта:
- «Главная» с файлом index.html
- «Услуги» с файлом services.html
- «Портфолио» с файлом portfolio.html
- «Контакты» с файлом contacts.html
- «О нас» с файлом about.html
Замените соответствующий фрагмент кода в созданном HTML-файле. Создайте вышеупомянутые файлы, используя шаблон файла index.html. Они должны находиться в той же папке, что и индексный файл. Проверьте работоспособность ссылок. Далее предстоит отредактировать файлы. В этом примере содержимое блока <div class="content"> было заменено. Все новое содержимое было помещено в отдельный блок с новыми стилями, которые создавали отступы справа и слева от текста.
Таким образом, ChatGPT — отличный способ быстро получить готовые фрагменты кода и генерировать идеи для создания сайтов. Этот прибор работает как умный и быстрый помощник, который всегда под рукой. Это может значительно ускорить процесс, особенно на этапах планирования и написания основной разметки.
Тем не менее, важно помнить, что ИИ — это помощник, а не волшебная палочка. Хотя он может предложить код, вам всегда придется проверять, тестировать и, возможно, вручную дорабатывать то, что создал чат-бот. Это означает, что вы должны иметь контроль и творческий подход, чтобы гарантировать, что он работает правильно и хорошо.
Следовательно, этот метод идеально подходит для новичков, которые хотят изучить основы, или для опытных разработчиков, которые хотят автоматизировать рутину. Главное, чтобы вы не боялись экспериментировать, задавать уточняющие вопросы нейросети и сочетать ее возможности с собственными знаниями. У вас обязательно получится уникальный и функциональный сайт.
