Продолжаем публикацию статей про использование chatGpt в работе разработчика. На этот раз попробуем генерировать html код через нейросети.
Первый запрос
напиши html код в котором будет 3 выпадающих списка, первый со значением: Екатеринбург, второй множественный со значениями: Услуга 1, Услуга 2, третий множественный со значениями: Тариф 1, Тариф 2
Ответ chatGpt
Вот пример HTML кода с тремя выпадающими списками:
<label for="city">Выберите город:</label>
<select id="city">
<option value="ekaterinburg">Екатеринбург</option>
</select>
<br>
<label for="services">Выберите услуги:</label>
<select id="services" multiple>
<option value="service1">Услуга 1</option>
<option value="service2">Услуга 2</option>
</select>
<br>
<label for="tariffs">Выберите тарифы:</label>
<select id="tariffs" multiple>
<option value="tariff1">Тариф 1</option>
<option value="tariff2">Тариф 2</option>
</select>Этот код создает три выпадающих списка: первый с выбором города (Екатеринбург), второй с множественным выбором услуг (Услуга 1, Услуга 2) и третий с множественным выбором тарифов (Тариф 1, Тариф 2).
Второй запрос
напиши html код в котором будет 9 блоков, блоки должны быть расположены по 3 блока в один ряд, всего 3 ряда. Размер одного блока 150 пикселей. Примени стиль css grid
Ответ chatGpt
Конечно, вот пример HTML кода с использованием CSS Grid для создания 9 блоков
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 150px);
gap: 5px;
}
.block {
width: 150px;
height: 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>Этот код создаст 9 блоков, каждый из которых будет иметь размер 150x150 пикселей и будет расположены по 3 в ряд, используя свойство `grid` в CSS для создания сетки. Каждый блок будет иметь черную границу толщиной 1 пиксель и небольшой отступ для разделения блоков.
Ответ GigaChat
GigaChat сгенерировал точно такой же html код, даже атрибуты такие же как у chatGpt, поэтому чтобы не занимать место дублировать информацию не будем.
Вывод
С помощью генерации html кода через chatGpt и другие нейросети, можно быстро создать прототип страницы или просто заготовку для дальнейшей доработки. Удобно, что нейросеть сама добавляет атрибуты для элементов, что упрощает дальнейшее использование.
Как видно из примеров можно генерировать не только чистый html, но и добавлять css стили.
Присылайте свои примеры использования нейросетей в комментариях . Это будет полезно для всех нас, ведь так мы сможем узнать что-то новое и расширить свой кругозор