День 1 | Знакомимся с дизайном сайта
75 минДобро пожаловать в курс по верстке!
Если вы читаете этот урок, значит вы решили научиться создавать сайты. Это отличное решение! Верстка — это основа веб-разработки, и освоив её, вы сможете создавать красивые и функциональные веб-страницы.
Что такое верстка? Верстка (или вёрстка) — это процесс создания HTML-разметки и CSS-стилей, которые превращают дизайн-макет в работающий веб-сайт. Верстальщик берёт картинку (макет) от дизайнера и "переводит" её на язык, понятный браузеру.
Анализ макета в Figma/Photoshop
Прежде чем начать верстать, нужно понять, что именно мы верстаем. Дизайнеры создают макеты сайтов в специальных программах. Давайте разберёмся, что это за программы и как с ними работать.
Что такое макет?
Макет — это визуальное представление будущего сайта. Это как чертёж для строителя, только для сайта. Макет показывает, как должен выглядеть сайт: где какие элементы, какие цвета, какие шрифты, какие отступы.
Программы для создания макетов
Самые популярные инструменты, которые используют дизайнеры:
- Figma — современный веб-инструмент, работает прямо в браузере. Бесплатный для личного использования. Очень популярен сейчас.
- Adobe Photoshop — классическая программа для работы с изображениями. Многие дизайнеры до сих пор используют её для создания макетов.
- Adobe XD — специальная программа от Adobe именно для дизайна интерфейсов. Удобна для создания макетов сайтов и приложений.
- Sketch — популярен среди дизайнеров на Mac. Платный, но очень удобный.
Для начала вам не нужно устанавливать эти программы! Вам нужно уметь их открывать и извлекать из них информацию. Обычно дизайнер даёт вам либо файл (например, .psd для Photoshop или ссылку на Figma), либо просто картинки (PNG, JPG) с макетом.
Что нужно извлечь из макета?
Когда вы открываете макет, вам нужно обратить внимание на следующие вещи:
- Структура страницы — какие блоки есть на странице? Обычно это: шапка (header), основное содержимое (main), подвал (footer). Могут быть боковые панели, секции с контентом и т.д.
- Размеры — какая ширина у контейнеров? Сколько отступов между элементами? Какой размер у кнопок, карточек? В Figma и Photoshop можно посмотреть точные размеры в пикселях.
- Цвета — какая цветовая палитра используется? Какой цвет у текста, фона, кнопок? В Figma можно скопировать цвет в формате HEX (например, #F36049).
- Шрифты — какие шрифты используются? Какой размер у заголовков, обычного текста? Какой жирности (обычный, жирный)?
- Изображения — какие изображения нужны? Какие у них размеры? Обычно дизайнер даёт изображения отдельно или экспортирует их из макета.
- Интерактивность — что происходит при наведении на кнопку? Как выглядит активное состояние ссылки? Есть ли анимации?
Структура HTML документа
Теперь давайте разберёмся, что такое HTML и как устроен HTML-документ.
Что такое HTML?
HTML (HyperText Markup Language) — это язык разметки гипертекста. Простыми словами, это язык, который говорит браузеру: "Вот здесь должен быть заголовок, вот здесь — параграф текста, вот здесь — картинка".
HTML состоит из тегов (tags). Тег — это специальная команда, которая говорит браузеру, что делать с содержимым. Например, тег <h1> означает "это заголовок первого уровня", а тег <p> означает "это параграф текста".
Базовая структура HTML-документа
Каждый HTML-документ должен иметь определённую структуру. Давайте разберём её по частям:
Разберём каждую часть:
<!DOCTYPE html>— это декларация типа документа. Она говорит браузеру: "Это HTML5 документ". Всегда должна быть первой строкой.<html lang="ru">— это корневой элемент всего документа. Атрибутlang="ru"говорит, что язык документа — русский. Это помогает поисковым системам и программам чтения с экрана.<head>— это "голова" документа. Здесь находится служебная информация, которая не отображается на странице, но важна для браузера и поисковых систем:<meta charset="UTF-8">— указывает кодировку символов. UTF-8 поддерживает все языки, включая русский. Без этого русский текст может отображаться неправильно.<meta name="viewport">— настройка для мобильных устройств. Говорит браузеру, что ширина страницы должна соответствовать ширине экрана.<title>— заголовок страницы, который отображается во вкладке браузера и в результатах поиска.
<body>— это "тело" документа. Здесь находится весь видимый контент страницы: текст, картинки, кнопки и т.д.
Семантические теги HTML5
В HTML5 появились семантические теги — это теги, которые не только форматируют контент, но и описывают его смысл. Например, <header> означает "это шапка сайта", а не просто "блок с классом header".
Зачем это нужно?
- Поисковые системы лучше понимают структуру страницы
- Программы для людей с ограниченными возможностями (скринридеры) могут лучше ориентироваться
- Код становится более понятным и читаемым
Основные семантические теги:
<header>— шапка сайта (обычно содержит логотип и навигацию)<nav>— навигационное меню<main>— основное содержимое страницы (должен быть только один на странице)<section>— логическая секция контента<article>— самостоятельная статья или пост<aside>— боковая панель, дополнительная информация<footer>— подвал сайта
Базовые принципы верстки
1. Блочная модель (Box Model)
Очень важное понятие! Каждый элемент на странице — это прямоугольник, который состоит из нескольких частей:
- Content (содержимое) — сам контент элемента (текст, картинка и т.д.)
- Padding (внутренние отступы) — пространство между содержимым и границей
- Border (граница) — линия вокруг элемента
- Margin (внешние отступы) — пространство за пределами границы, отделяющее элемент от других
Важно! Свойство box-sizing: border-box меняет способ расчёта размеров. По умолчанию браузер считает только content, а padding и border добавляются сверху. С border-box padding и border входят в указанную ширину/высоту. Это очень удобно и рекомендуется всегда использовать.
2. Типы элементов
В HTML есть два основных типа элементов:
- Блочные (block) — занимают всю доступную ширину, начинаются с новой строки. Примеры:
<div>,<p>,<h1> - Строчные (inline) — занимают только необходимое пространство, располагаются в строке. Примеры:
<span>,<a>,<strong>
Практическое задание
Теперь давайте создадим ваш первый HTML-файл:
- Откройте любой текстовый редактор (можно даже Блокнот на Windows или TextEdit на Mac, но лучше использовать специализированные редакторы: VS Code, Sublime Text, Atom)
- Создайте новый файл и сохраните его как
index.html(важно: расширение должно быть именно .html, а не .txt) - Скопируйте базовую структуру HTML из примера выше
- Добавьте свою структуру: header, main с несколькими секциями, footer
- Откройте файл в браузере (просто дважды кликните на файл или перетащите его в окно браузера)
Совет: Для удобной работы с кодом рекомендую установить Visual Studio Code (VS Code) — это бесплатный редактор кода от Microsoft. Он подсвечивает синтаксис, помогает находить ошибки и имеет множество полезных расширений.
Что дальше?
Поздравляю! Вы изучили основы HTML. В следующем уроке мы научимся работать с системой контроля версий Git и GitHub. Это очень важный инструмент для любого разработчика, который позволяет сохранять историю изменений и работать над проектом безопасно.