11 минутЯзык разметки HTML и язык стилей CSS были созданы почти 30 лет назад, но до сих пор лежат в основе современного интернета. Это удобные и простые инструменты, которые позволяют создавать веб-страницы даже новичкам.
Если описывать принцип их работы простым языком, то HTML говорит браузеру, что лежит на странице: картинки, текст, видео и в каком порядке. А CSS, в свою очередь, описывает, каким образом расположены эти элементы: их размеры, цвет, прозрачность и даже анимационные эффекты. У этого пирога есть еще третий слой: JavaScript ― язык программирования, описывающий поведение элементов страницы в зависимости от действий пользователя.
В этой статье подробно поговорим о верстке и подскажем, как с помощью нейросетей упростить себе работу.
Что такое верстка сайта и из чего она состоит
Верстка сайта — это перенос идеи дизайнера из графического изображения в код HTML и CSS. Сначала дизайнер создает прототип будущей страницы в одной из графических программ. Сейчас самая популярная из них ― Figma (потому что простая и бесплатная). Далее в дело вступает верстальщик, который разбивает макет на блоки и прописывает их в виде кода, чтобы они отображались на странице пользователя именно так, как задумал дизайнер.
Основные этапы верстки:
Верстальщик изучает макет, чтобы понять, какие элементы он будет использовать для верстки — можно ли обойтись там чистым HTML и CSS или надо будет подключать сторонние плагины.
Пишет HTML-код, который отражает текстовое наполнение, картинки и блоки, в которые они объединены.
Далее на CSS описывает то, как элементы выглядят на странице: шрифты, размеры, отступы элементов и их позиция на странице.
Добавляет код на JavaScript, который отвечает за интерактивность элементов ― кнопки, слайдеры и анимацию.
После окончания верстки проверяет, как страница будет выглядеть на разных устройствах и в разных браузерах, и исправляет ошибки, если есть.
Для тех, кто хочет глубоко погрузиться в веб-разработку и освоить ключевые инструменты, в онлайн-школе ProductStar есть курсы по программированию. С их помощью вы быстро освоите профессию и найдете первую работу в этой сфере.
Верстка макетов страниц сайтов для начинающих
Что нужно знать, чтобы начать верстать сайты:
Основы 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: каждая ячейка содержала информацию о каком-либо элементе, который в ней находился, — картинке, тексте, видео. То, как расположены элементы на сайте, определяется его расположением в таблице.
Это был простой способ структурировать элементы на сайте. Но у него есть множество недостатков: невозможно изменить структуру сайта без переделки всей таблицы и нельзя адаптировать страницу под разные экраны. Также поисковики с трудом индексируют такие сайты.
Табличные сайты — отголосок прошлого, поэтому сделаем акцент на блочной верстке, которую считают стандартом современной верстки: она гибкая, понятная и оптимизирована под разные устройства.
Блочная верстка сайта
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 ― редактор кода, созданный с прицелом на веб-разработку, что делает его незаменимым для начинающих разработчиков.
2. Программы для визуальной верстки
Adobe Dreamweaver ― профессиональный инструмент, который позволяет создавать сайт, просто вырисовывая его в редакторе. Там же можно добавлять необходимый код для работы сайта.
BlueGriffon ― этот редактор позволяет также рисовать элементы сайта и получать готовый код. Он бесплатный и подходит для начинающих.
CoffeeCup HTML Editor ― еще один удобный инструмент для визуальной верстки.
3. Программы для дизайна
Adobe Photoshop ― главный инструмент для профессиональных дизайнеров, который умеет не только работать с графикой, но и имеет множество функций для ее экспорта в код.
Adobe Illustrator ― выбирают для создания векторной графики.
Sketch ― дизайнерская программа с фокусом на веб-разработку.
Figma ― оптимальное на данный момент решение для разработки дизайна веб-страниц. Позволяет сразу экспортировать рисунок в код, а также имеет множество плагинов, упрощающих этот процесс.
4. Дополнительные инструменты
Emmet ― это библиотека, которая ускоряет работу по написанию HTML- и CSS-кода.
BrowserSync ― расширение для браузеров, которое позволяет в режиме реального времени видеть, какие изменения вы внесли в код без сохранения файла с кодом и перезагрузки страницы.
Chrome DevTools ― это набор инструментов для браузера Google Chrome, с помощью которых можно просматривать элементы любого сайта и тестировать свои веб-страницы.
5. Сервисы для хостинга
GitHub ― главный сервис для хранения написанного вами кода, который позволяет создавать разные версии и откатываться к предыдущим состояниям кода, если что-то пошло не так.
Netlify ― проект, где вы можете создать свой статический сайт и автоматически его развернуть.
Vercel- ― хостинг для динамических сайтов, который обладает широким функционалом для оптимизации кода.
Главные теги HTML: фундамент веб-страницы
Теги ― это слова, заключенные в угловые скобки (< >), они показывают браузеру, каким образом отображать содержимое страницы. Не забывайте, что каждый тег должен быть закрыт в конце таким же тегом, но уже со слэшем ― (</ >)
1. <html> — с этого элемента начинается любой сайт. Он говорит браузеру, что далее он будет считывать HTML-код.
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) показывает браузеру, какие свойства есть у определенных элементов на странице: шрифт текста, размер изображений и блоков.
Пример CSS-стиля
h1 { font-family: "Arial", sans-serif; font-size: 32px; color: #333; text-align: center; margin-bottom: 20px; }
Этот код позволяет установить для заголовков H1 на странице шрифт Arial, размером 32 пикселя, темно-коричневого цвета, отцентрованный посередине и с отступом снизу в 20 пикселей.
Этот код описывает кнопку белого цвета с зеленой подложкой, с отступами 10 и 20 пикселей, без обводки по краю, а при наведении на нее курсор превращается в указатель.
Как сверстать веб-страницу: инструкция
Подготовка
Сделайте дизайн сайта в графическом редакторе, например, Sketch, Figma. Или возьмите его у дизайнера.
Выберите инструменты, с помощью которых вы будете работать. Рекомендуем воспользоваться редактором кода 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, чтобы структурировать это содержимое.
Стилизация CSS
В файле index.html подключите стили с помощью тега <link> в секции <head>.
Затем опишите стили каждого из ваших блоков. Используйте атрибуты:
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. Найти ее можно здесь.
Вот что нейросеть выдала нам в ответ на запрос:
<!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, а дополняет его. Чтобы поменять нужные вам параметры, все равно нужно понимать, где добавить пикселей и какой параметр изменить на нужный. Но зато теперь вы можете не тратить время на написание тегов, а уделить больше времени дизайну сайта, чтобы создавать действительно впечатляющие страницы.
