Что такое верстка сайта и из чего она состоит
Верстка сайта — это перенос идеи дизайнера из графического изображения в код HTML и CSS. Сначала дизайнер создает прототип будущей страницы в одной из графических программ. Сейчас самая популярная из них ― Figma (потому что простая и бесплатная). Далее в дело вступает верстальщик, который разбивает макет на блоки и прописывает их в виде кода, чтобы они отображались на странице пользователя именно так, как задумал дизайнер.
Основные этапы верстки:
- Верстальщик изучает макет, чтобы понять, какие элементы он будет использовать для верстки — можно ли обойтись там чистым HTML и CSS или надо будет подключать сторонние плагины.
- Пишет HTML-код, который отражает текстовое наполнение, картинки и блоки, в которые они объединены.
- Далее на CSS описывает то, как элементы выглядят на странице: шрифты, размеры, отступы элементов и их позиция на странице.
- Добавляет код на JavaScript, который отвечает за интерактивность элементов ― кнопки, слайдеры и анимацию.
- После окончания верстки проверяет, как страница будет выглядеть на разных устройствах и в разных браузерах, и исправляет ошибки, если есть.
Верстка макетов страниц сайтов для начинающих
Что нужно знать, чтобы начать верстать сайты:
Основы HTML и CSS
- Теги: <html>, <head>, <body>, <h1>, <p>, <a>, <img>, <table> для создания элементов страницы.
- Атрибуты тегов: href — для ссылок, src — для изображений, alt — для описания изображений.
- Селекторы CSS: id, class, tag, attribute, pseudo-classes.
- Свойства CSS: font-family, font-size, color, background-color, padding, margin, width, height, border, position, display, float, text-align.
- Значения CSS: px, em, %, hex-код, RGB-код.
Основы верстки
- Важно изучить, как работает блочная верстка и как использовать блоки div, а также CSS-свойства display: block, float, flexbox и grid.
- Основы адаптивного дизайна, чтобы ваш сайт открывался на разных платформах без проблем с отображением.
Работа с инструментами
- Выберите редактор кода, в котором будете работать. В основном новички используют Visual или пишут код прямо в «Блокноте».
- Необходимо знать, как использовать инструменты разработчика в браузерах для отладки кода.
- Также пригодится умение использовать валидаторы кода HTML Validator и CSS Validator для проверки на ошибки вашего кода.
Виды верстки сайтов
В раннем интернете все сайты имели табличную верстку. Это значит, что строились они примерно как таблица в Excel: каждая ячейка содержала информацию о каком-либо элементе, который в ней находился, — картинке, тексте, видео. То, как расположены элементы на сайте, определяется его расположением в таблице.
Это был простой способ структурировать элементы на сайте. Но у него есть множество недостатков: невозможно изменить структуру сайта без переделки всей таблицы и нельзя адаптировать страницу под разные экраны. Также поисковики с трудом индексируют такие сайты.
Табличные сайты — отголосок прошлого, поэтому сделаем акцент на блочной верстке, которую считают стандартом современной верстки: она гибкая, понятная и оптимизирована под разные устройства.
Это был простой способ структурировать элементы на сайте. Но у него есть множество недостатков: невозможно изменить структуру сайта без переделки всей таблицы и нельзя адаптировать страницу под разные экраны. Также поисковики с трудом индексируют такие сайты.
Табличные сайты — отголосок прошлого, поэтому сделаем акцент на блочной верстке, которую считают стандартом современной верстки: она гибкая, понятная и оптимизирована под разные устройства.
Блочная верстка сайта
В ней все элементы страницы разбиты на блоки. Каждый блок оформлен тегами div, header, footer, section, article и т. д. Блок начинается с открывающего тега, например, <div> и заканчивается закрывающим тегом </div>.
Блоки могут вкладываться один в другой и иметь атрибуты: название, айди и другие. По этим атрибутам их можно будет конфигурировать в CSS — задавать им цвет, размер, форму.
Также CSS определяет, каким образом блоки будут расположены по отношению друг к другу.
Для этого используют свойства:
А для описания самих блоков подойдут следующие CSS-свойства:
Блоки могут вкладываться один в другой и иметь атрибуты: название, айди и другие. По этим атрибутам их можно будет конфигурировать в CSS — задавать им цвет, размер, форму.
Также CSS определяет, каким образом блоки будут расположены по отношению друг к другу.
Для этого используют свойства:
- display: block ― блок по умолчанию располагается по всей ширине страницы.
- display: inline ― блок располагается в линию с другими блоками.
- float ― располагает блоки рядом друг с другом.
- flexbox ― гибкая компоновка блоков на странице.
- grid ― создает сетку для упорядочивания блоков.
А для описания самих блоков подойдут следующие CSS-свойства:
- margin — отступы между блоками.
- padding — отступы внутри блока.
- width — ширина блока.
- height — высота блока.
- background-color — цвет фона блока.
- border — граница блока.
Кроме того, блочная структура позволяет пользоваться сайтами людям с ограниченными возможностями, которые выставляют свои настройки для отображения интернет-страниц.
Вишенка на торте — блочные сайты лучше индексируются поисковиками и в отличие от табличных сайтов занимают в поисковой выдаче первые места.
Вишенка на торте — блочные сайты лучше индексируются поисковиками и в отличие от табличных сайтов занимают в поисковой выдаче первые места.
Инструменты и программы для верстки сайтов
- Редакторы кода
Visual Studio Code ― это редактор кода от Microsoft, который использует большинство разработчиков. Он бесплатный и позволяет установить множество плагинов для упрощения работы. Идеальная система для начинающих специалистов.
Sublime Text ― это платный редактор кода для продвинутых разработчиков. Когда возможностей Visual Studio Code не хватает, на помощь приходит именно он.
Atom ― еще один бесплатный редактор кода, который отличается возможностью использовать множество пакетов.
Brackets ― редактор кода, созданный с прицелом на веб-разработку, что делает его незаменимым для начинающих разработчиков.
Sublime Text ― это платный редактор кода для продвинутых разработчиков. Когда возможностей Visual Studio Code не хватает, на помощь приходит именно он.
Atom ― еще один бесплатный редактор кода, который отличается возможностью использовать множество пакетов.
Brackets ― редактор кода, созданный с прицелом на веб-разработку, что делает его незаменимым для начинающих разработчиков.
2. Программы для визуальной верстки
Adobe Dreamweaver ― профессиональный инструмент, который позволяет создавать сайт, просто вырисовывая его в редакторе. Там же можно добавлять необходимый код для работы сайта.
BlueGriffon ― этот редактор позволяет также рисовать элементы сайта и получать готовый код. Он бесплатный и подходит для начинающих.
CoffeeCup HTML Editor ― еще один удобный инструмент для визуальной верстки.
BlueGriffon ― этот редактор позволяет также рисовать элементы сайта и получать готовый код. Он бесплатный и подходит для начинающих.
CoffeeCup HTML Editor ― еще один удобный инструмент для визуальной верстки.
3. Программы для дизайна
Adobe Photoshop ― главный инструмент для профессиональных дизайнеров, который умеет не только работать с графикой, но и имеет множество функций для ее экспорта в код.
Adobe Illustrator ― выбирают для создания векторной графики.
Sketch ― дизайнерская программа с фокусом на веб-разработку.
Figma ― оптимальное на данный момент решение для разработки дизайна веб-страниц. Позволяет сразу экспортировать рисунок в код, а также имеет множество плагинов, упрощающих этот процесс.
Adobe Illustrator ― выбирают для создания векторной графики.
Sketch ― дизайнерская программа с фокусом на веб-разработку.
Figma ― оптимальное на данный момент решение для разработки дизайна веб-страниц. Позволяет сразу экспортировать рисунок в код, а также имеет множество плагинов, упрощающих этот процесс.
4. Дополнительные инструменты
Emmet ― это библиотека, которая ускоряет работу по написанию HTML- и CSS-кода.
BrowserSync ― расширение для браузеров, которое позволяет в режиме реального времени видеть, какие изменения вы внесли в код без сохранения файла с кодом и перезагрузки страницы.
Chrome DevTools ― это набор инструментов для браузера Google Chrome, с помощью которых можно просматривать элементы любого сайта и тестировать свои веб-страницы.
BrowserSync ― расширение для браузеров, которое позволяет в режиме реального времени видеть, какие изменения вы внесли в код без сохранения файла с кодом и перезагрузки страницы.
Chrome DevTools ― это набор инструментов для браузера Google Chrome, с помощью которых можно просматривать элементы любого сайта и тестировать свои веб-страницы.
5. Сервисы для хостинга
GitHub ― главный сервис для хранения написанного вами кода, который позволяет создавать разные версии и откатываться к предыдущим состояниям кода, если что-то пошло не так.
Netlify ― проект, где вы можете создать свой статический сайт и автоматически его развернуть.
Vercel- ― хостинг для динамических сайтов, который обладает широким функционалом для оптимизации кода.
Netlify ― проект, где вы можете создать свой статический сайт и автоматически его развернуть.
Vercel- ― хостинг для динамических сайтов, который обладает широким функционалом для оптимизации кода.
Главные теги HTML: фундамент веб-страницы
Теги ― это слова, заключенные в угловые скобки (< >), они показывают браузеру, каким образом отображать содержимое страницы. Не забывайте, что каждый тег должен быть закрыт в конце таким же тегом, но уже со слэшем ― (</ >)
1. <html> — с этого элемента начинается любой сайт. Он говорит браузеру, что далее он будет считывать HTML-код.
2. <head> — заголовок, в котором содержатся важные данные о странице. Например:
3. <body> — за этим тегом начинается основное содержание страницы, которое будет отображаться на сайте.
4. <header> — это заголовок сайта, в котором чаще всего есть логотип, название сайта и контакты.
5. <nav> — тег для создания навигации сайта для перехода на другие его страницы.
6. <main> — средняя часть сайта, где лежит основной контент страницы.
7. <article> — определяет, что далее будет независимая часть контента. Например: новость, пост или статья.
8. <aside> — дополнительный контент страницы. Например: боковая панель меню или реклама.
9. <footer> — нижняя часть сайта, где обычно располагаются контакты и другая информация.
10. <h1> — <h6> — заголовки разного размера для выделения текста.
11. <p> — абзац, который переносит текст на следующую строку.
12. <ul> и <ol> — неупорядоченные (<ul>) и упорядоченные (<ol>) списки.
13. <li> — элемент списка.
14. <a> — ссылка для перехода на другие страницы.
15. <img> — картинка на странице.
16. <table> — таблица для представления структурированных данных.
17. <form> — форма, где можно запросить у пользователя имя, телефон или комментарий.
18. <input> — поле ввода, куда пользователь может вписать дату или текст.
19. <button> — кнопка, которая может выполнять функцию JavaScript или перенаправлять пользователя на другую страницу.
2. <head> — заголовок, в котором содержатся важные данные о странице. Например:
- <title>: название страницы, которое будет отражено во вкладке браузера.
- <meta>: метаданные, которые важны для поисковых систем — описание страницы, ключевые слова, которые на ней встречаются, и кодировка текста.
- <link>: список подключенных к странице внешних стилей CSS, файлов favicon и RSS-каналов.
- <script>: внутри этого тега прячется код на JavaScript, который позволяет оживить страницы, сделав их интерактивными.
3. <body> — за этим тегом начинается основное содержание страницы, которое будет отображаться на сайте.
4. <header> — это заголовок сайта, в котором чаще всего есть логотип, название сайта и контакты.
5. <nav> — тег для создания навигации сайта для перехода на другие его страницы.
6. <main> — средняя часть сайта, где лежит основной контент страницы.
7. <article> — определяет, что далее будет независимая часть контента. Например: новость, пост или статья.
8. <aside> — дополнительный контент страницы. Например: боковая панель меню или реклама.
9. <footer> — нижняя часть сайта, где обычно располагаются контакты и другая информация.
10. <h1> — <h6> — заголовки разного размера для выделения текста.
11. <p> — абзац, который переносит текст на следующую строку.
12. <ul> и <ol> — неупорядоченные (<ul>) и упорядоченные (<ol>) списки.
13. <li> — элемент списка.
14. <a> — ссылка для перехода на другие страницы.
15. <img> — картинка на странице.
16. <table> — таблица для представления структурированных данных.
17. <form> — форма, где можно запросить у пользователя имя, телефон или комментарий.
18. <input> — поле ввода, куда пользователь может вписать дату или текст.
19. <button> — кнопка, которая может выполнять функцию JavaScript или перенаправлять пользователя на другую страницу.
Основные параметры CSS
CSS (Cascading Style Sheets) показывает браузеру, какие свойства есть у определенных элементов на странице: шрифт текста, размер изображений и блоков.
1. font-family: шрифт текста.
font-family: «Arial»; шрифт Arial для текста.
2. font-size: устанавливает размер шрифта.
font-size: 16px; размер текста 16 пикселей.
3. color: устанавливает цвет текста.
color: #333; hex-код для цвета.
color: rgb(51, 51, 51); RGB-код для цвета.
color: black; просто название цвета.
4. background-color: цвет фона элемента.
background-color: #f0f0f0; светло-серый цвет фона.
5. padding: отступы внутри элемента.
padding: 10px; отступ 10 пикселей со всех четырех сторон.
padding-top: 10px; отступ 10 пикселей сверху.
6. margin: отступы снаружи элемента.
margin: 10px; отступ 10 пикселей со всех четырех сторон.
margin-bottom: 20px; отступ 20 пикселей снизу.
7. width: ширина элемента.
width: 500px; ширина 500 пикселей.
8. height: высота элемента.
height: 300px; высота 300 пикселей.
9. border: граница по краю элемента.
border: 1px solid black; граница толщиной 1 пиксель, сплошная линия, черный цвет.
10. display: способ отображения элемента.
display: block; элемент отображается как блок.
display: inline; элемент отображается в строку.
display: inline-block; блочный элемент в строке.
11. float: элемент становится плавающим и может располагаться рядом с другим.
float: left; элемент плавает слева.
float: right; элемент плавает справа
12. text-align: выравнивание текста.
text-align: left; выравнивание текста по левому краю.
text-align: center; выравнивание текста по центру.
text-align: right; выравнивание текста по правому краю.
13. position: позиция элемента на странице.
position: static; стандартное позиционирование.
position: relative; относительное позиционирование.
position: absolute; абсолютное позиционирование.
position: fixed; фиксированное позиционирование.
14. top, right, bottom, left: отступы элемента от его родительского элемента.
top: 10px; отступ 10 пикселей сверху.
right: 20px; отступ 20 пикселей справа.
15. transform: трансформация элемента.
transform: translate(10px, 20px); элемент перемещается на 10 пикселей вправо и на 20 пикселей вниз.
transform: scale(1.5); элемент увеличивается в 1,5 раза.
transform: rotate(45deg); элемент поворачивается на 45 градусов.
16. transition: анимация элемента.
transition: all 0.5s ease; все свойства анимируются за 0,5 секунды с плавным переходом.
17. animation: зацикленная анимация.
animation: myAnimation 3s linear infinite; анимация с именем myAnimation длительностью 3 секунды, линейным переходом и бесконечным повтором.
18. font-weight: это свойство управляет толщиной шрифта.
font-weight: bold; сделать текст жирным
19. text-decoration: это свойство используется для украшения текста, такого как подчеркивание, зачеркивание и т. д.
text-decoration: underline; подчеркнуть текст ссылки.
20. line-height: это свойство управляет высотой строки текста.
line-height: 1.5; увеличить высоту строки в 1,5 раза относительно размера шрифта.
21. letter-spacing: это свойство управляет интервалом между буквами текста.
Оно может быть задано в пикселях, em или других единицах измерения.
letter-spacing: 2px; увеличить интервал между буквами на 2 пикселя.
22. opacity: это свойство управляет прозрачностью элемента. Значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный).
opacity: 0.5; полупрозрачный элемент.
23. cursor: это свойство управляет формой курсора при наведении на элемент.
cursor: pointer; изменить курсор на указатель при наведении.
24. z-index: это свойство устанавливает порядок наложения элементов по оси Z. Большее значение `z-index` помещает элемент выше в иерархии отображения.
z-index: 10; элемент будет выше других с меньшим z-index.
font-family: «Arial»; шрифт Arial для текста.
2. font-size: устанавливает размер шрифта.
font-size: 16px; размер текста 16 пикселей.
3. color: устанавливает цвет текста.
color: #333; hex-код для цвета.
color: rgb(51, 51, 51); RGB-код для цвета.
color: black; просто название цвета.
4. background-color: цвет фона элемента.
background-color: #f0f0f0; светло-серый цвет фона.
5. padding: отступы внутри элемента.
padding: 10px; отступ 10 пикселей со всех четырех сторон.
padding-top: 10px; отступ 10 пикселей сверху.
6. margin: отступы снаружи элемента.
margin: 10px; отступ 10 пикселей со всех четырех сторон.
margin-bottom: 20px; отступ 20 пикселей снизу.
7. width: ширина элемента.
width: 500px; ширина 500 пикселей.
8. height: высота элемента.
height: 300px; высота 300 пикселей.
9. border: граница по краю элемента.
border: 1px solid black; граница толщиной 1 пиксель, сплошная линия, черный цвет.
10. display: способ отображения элемента.
display: block; элемент отображается как блок.
display: inline; элемент отображается в строку.
display: inline-block; блочный элемент в строке.
11. float: элемент становится плавающим и может располагаться рядом с другим.
float: left; элемент плавает слева.
float: right; элемент плавает справа
12. text-align: выравнивание текста.
text-align: left; выравнивание текста по левому краю.
text-align: center; выравнивание текста по центру.
text-align: right; выравнивание текста по правому краю.
13. position: позиция элемента на странице.
position: static; стандартное позиционирование.
position: relative; относительное позиционирование.
position: absolute; абсолютное позиционирование.
position: fixed; фиксированное позиционирование.
14. top, right, bottom, left: отступы элемента от его родительского элемента.
top: 10px; отступ 10 пикселей сверху.
right: 20px; отступ 20 пикселей справа.
15. transform: трансформация элемента.
transform: translate(10px, 20px); элемент перемещается на 10 пикселей вправо и на 20 пикселей вниз.
transform: scale(1.5); элемент увеличивается в 1,5 раза.
transform: rotate(45deg); элемент поворачивается на 45 градусов.
16. transition: анимация элемента.
transition: all 0.5s ease; все свойства анимируются за 0,5 секунды с плавным переходом.
17. animation: зацикленная анимация.
animation: myAnimation 3s linear infinite; анимация с именем myAnimation длительностью 3 секунды, линейным переходом и бесконечным повтором.
18. font-weight: это свойство управляет толщиной шрифта.
font-weight: bold; сделать текст жирным
19. text-decoration: это свойство используется для украшения текста, такого как подчеркивание, зачеркивание и т. д.
text-decoration: underline; подчеркнуть текст ссылки.
20. line-height: это свойство управляет высотой строки текста.
line-height: 1.5; увеличить высоту строки в 1,5 раза относительно размера шрифта.
21. letter-spacing: это свойство управляет интервалом между буквами текста.
Оно может быть задано в пикселях, em или других единицах измерения.
letter-spacing: 2px; увеличить интервал между буквами на 2 пикселя.
22. opacity: это свойство управляет прозрачностью элемента. Значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный).
opacity: 0.5; полупрозрачный элемент.
23. cursor: это свойство управляет формой курсора при наведении на элемент.
cursor: pointer; изменить курсор на указатель при наведении.
24. z-index: это свойство устанавливает порядок наложения элементов по оси Z. Большее значение `z-index` помещает элемент выше в иерархии отображения.
z-index: 10; элемент будет выше других с меньшим z-index.
Пример CSS-стиля
h1 {
font-family: "Arial", sans-serif;
font-size: 32px;
color: #333;
text-align: center;
margin-bottom: 20px;
}
Этот код позволяет установить для заголовков H1 на странице шрифт Arial, размером 32 пикселя, темно-коричневого цвета, отцентрованный посередине и с отступом снизу в 20 пикселей.
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}Этот код описывает кнопку белого цвета с зеленой подложкой, с отступами 10 и 20 пикселей, без обводки по краю, а при наведении на нее курсор превращается в указатель.
Как сверстать веб-страницу: инструкция
Подготовка
Сделайте дизайн сайта в графическом редакторе, например, Sketch, Figma. Или возьмите его у дизайнера.
Выберите инструменты, с помощью которых вы будете работать. Рекомендуем воспользоваться редактором кода Visual Studio Code, браузером Chrome, валидатором HTML Validator.
Создайте в редакторе кода папку с названием проекта и три файла:
index.html ― тут будет HTML-код сайта.
style.css ― здесь будут прописаны стили элементов.
script.js ― в этом файле в дальнейшем вы сможете добавить JavaScript-код для сайта.
Также понадобится отдельная папка для хранения картинок.
Выберите инструменты, с помощью которых вы будете работать. Рекомендуем воспользоваться редактором кода Visual Studio Code, браузером Chrome, валидатором HTML Validator.
Создайте в редакторе кода папку с названием проекта и три файла:
index.html ― тут будет HTML-код сайта.
style.css ― здесь будут прописаны стили элементов.
script.js ― в этом файле в дальнейшем вы сможете добавить JavaScript-код для сайта.
Также понадобится отдельная папка для хранения картинок.
Верстка HTML
Пропишите теги элементов, которые вы будете использовать на странице. Начните с тега <html> ― корневого элемента документа.
В теге <head> пропишите заголовок сайта и его стили.
В теге <title> укажите заголовок страницы.
В теге <body> перечислите содержимое страницы.
Укажите <header> ― заголовок сайта.
В теге <nav> добавьте элементы навигации
В теге <main> укажите основное содержимое
И в финале в теге <footer> напишите содержимое нижней части сайта.
В соответствующих блоках разместите текст и изображения. Используйте теги <h1>, <h2>, <h3>, p, ul, li, a, img, article, section, чтобы структурировать это содержимое.
В теге <head> пропишите заголовок сайта и его стили.
В теге <title> укажите заголовок страницы.
В теге <body> перечислите содержимое страницы.
Укажите <header> ― заголовок сайта.
В теге <nav> добавьте элементы навигации
В теге <main> укажите основное содержимое
И в финале в теге <footer> напишите содержимое нижней части сайта.
В соответствующих блоках разместите текст и изображения. Используйте теги <h1>, <h2>, <h3>, p, ul, li, a, img, article, section, чтобы структурировать это содержимое.
Стилизация CSS
В файле index.html подключите стили с помощью тега <link> в секции <head>.
Затем опишите стили каждого из ваших блоков. Используйте атрибуты:
font-family, font-size, color, background-color, padding, margin, width, height, border, display, float, flexbox, grid.
В итоге у вас может получиться примерно такой код:
Затем опишите стили каждого из ваших блоков. Используйте атрибуты:
font-family, font-size, color, background-color, padding, margin, width, height, border, display, float, flexbox, grid.
В итоге у вас может получиться примерно такой код:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<img src="image.jpg" alt="Картинка">
<p>Привет, мир!</p>
</div>
<script src="script.js"></script>
</body>
</html>
Как сверстать страницу с помощью нейросетей
Нейросети позволяют верстальщикам не прописывать большинство параметров страницы в виде кода — они могут это сделать за вас. Останется только вставить этот код в редактор и запустить, чтобы увидеть результат.
Для начала нужно составить промпт, то есть запрос к нейросети. Следует очень подробно описать будущий сайт со всеми параметрами, например:
— Напиши код для сайта, на котором будет верхнее меню с навигацией: главная страница, контакты, о нас. Добавь картинку 500 на 500 пикселей с изображением кота. Затем надпись на весь экран: «Добро пожаловать на наш сайт».
Этот запрос мы отправляем любой генеративной нейросети. В нашем случае используем последнюю модель от Яндекса ― Yandex GPT 4 Pro RC. Найти ее можно здесь.
Вот что нейросеть выдала нам в ответ на запрос:
Для начала нужно составить промпт, то есть запрос к нейросети. Следует очень подробно описать будущий сайт со всеми параметрами, например:
— Напиши код для сайта, на котором будет верхнее меню с навигацией: главная страница, контакты, о нас. Добавь картинку 500 на 500 пикселей с изображением кота. Затем надпись на весь экран: «Добро пожаловать на наш сайт».
Этот запрос мы отправляем любой генеративной нейросети. В нашем случае используем последнюю модель от Яндекса ― Yandex GPT 4 Pro RC. Найти ее можно здесь.
Вот что нейросеть выдала нам в ответ на запрос:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Добро пожаловать на наш сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Верхнее меню -->
<nav>
<ul>
<li><a href="#">Главная страница</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
<!-- Изображение кота -->
<div class="cat-image">
<img src="cat.jpg" alt="Кот">
</div>
<!-- Надпись на весь экран -->
<p class="welcome-message">Добро пожаловать на наш сайт!</p>
<!-- Основной контент -->
<main>
<!-- Здесь будет основной контент вашего сайта -->
</main>
</body>
</html>
Теперь можно скопировать этот код в любой редактор и посмотреть, что получилось.
Умение использовать нейросети для верстки сайта вовсе не освобождает от необходимости знать теги HTML и свойства CSS, а дополняет его. Чтобы поменять нужные вам параметры, все равно нужно понимать, где добавить пикселей и какой параметр изменить на нужный. Но зато теперь вы можете не тратить время на написание тегов, а уделить больше времени дизайну сайта, чтобы создавать действительно впечатляющие страницы.
Поделиться
