Содержание
Вы открываете VS Code, создаёте новую папку и видите перед собой пустое пространство. Куда класть HTML? Куда складывать картинки? Нужен ли отдельный файл для CSS или можно писать всё в одном месте? Эти вопросы возникают у каждого, кто впервые собирает веб-проект.
Минимальная структура
Откройте любой студенческий репозиторий с веб-плакатом, и вы увидите примерно одну и ту же картину. Вот как выглядит типичная структура проекта:
my-poster/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── img/
│ ├── background.webp
│ ├── illustration.png
│ └── sprite-sheet.png
├── fonts/
│ ├── MyFont-Regular.woff2
│ └── MyFont-Bold.woff2
└── README.md
Выглядит просто, и это намеренно. Веб-плакат — это одностраничный проект, и ему не нужна архитектура большого приложения. Но даже в рамках одной страницы порядок в файлах экономит время и нервы. Разберём каждый элемент.
Точка входа в проекте
Файл index.html — это ваш плакат. Когда кто-то открывает ссылку на проект, браузер ищет именно этот файл. Название index — не случайное, а конвенциональное. Веб-серверы (включая GitHub Pages, на котором вы будете размещать плакат) автоматически отдают файл с таким именем при обращении к корневой папке проекта.
Внутри index.html происходит подключение всех остальных файлов. CSS подключается в секции <head> через тег <link>. JavaScript подключается перед закрывающим тегом </body> через тег <script>. Изображения вставляются через <img> или используются как background-image в CSS. Всё сходится в одной точке.
Обратите внимание на два мета-тега в <head>. Первый (charset="UTF-8") обеспечивает корректное отображение кириллицы. Второй (viewport) говорит мобильным браузерам отображать страницу в реальном масштабе, а не сжимать десктопную версию до ширины телефона. Без этого тега ваш адаптивный дизайн на мобильном просто не сработает.
<!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="css/style.css">
</head>
<body>
<!-- Здесь содержимое плаката -->
<script src="js/script.js"></script>
</body>
</html>
Подключение стилей
Можно ли писать CSS прямо внутри HTML, в теге <style> Можно. Будет ли это работать? Будет. Стоит ли так делать? В большинстве случаев — нет.
Отдельный CSS-файл проще редактировать, потому что вы работаете с одним типом кода за раз. Его проще отлаживать, потому что DevTools в браузере покажет вам, из какого именно файла пришло каждое правило. И его проще переиспользовать, если вы вдруг решите создать второй HTML-файл (например, страницу-заглушку или альтернативную версию плаката).
Для большинства веб-плакатов одного файла style.css достаточно. Если стилей становится очень много (больше 300–400 строк), можно разделить их на несколько файлов по логическим блокам и подключить каждый отдельным тегом <link />.
Порядок внутри CSS-файла тоже имеет значение. Хорошая практика — начинать с общих правил (сброс стилей, шрифты, переменные), затем описывать крупные блоки сверху вниз по порядку появления на странице, а анимации (@keyframes) группировать в конце файла. Так вы всегда будете знать, где искать нужное правило.
Подключаем скрипты
Та же логика, что и с CSS. JavaScript можно впрямо в HTML через тег <script>, но лучше вынести в отдельный файл. Обратите внимание, что скрипт подключается перед закрывающим </body>, а не в <head>. К моменту выполнения скрипта все HTML-элементы уже должны существовать на странице, иначе JavaScript не сможет их найти и обработать.
Если ваш плакат статичный (только HTML и CSS, без интерактивности), папка js/ вам не нужна. Не создавайте пустых файлов на всякий случай. Это только засоряет проект.
Куда кладем картинки
Папка img/ — это склад всех растровых изображений проекта. Здесь живут фотографии, иллюстрации, спрайтовые листы, фоновые текстуры. SVG-файлы тоже можно хранить здесь, хотя некоторые разработчики выделяют для них отдельную папку svg/.
Самая частая ошибка — называть файлы как попало. IMG_20240315_001.jpg, Снимок экрана 2024-03-15.png, фон (копия) (2).webp — всё это реальные примеры из студенческих репозиториев. Через неделю вы не вспомните, что в каком файле, и будете открывать каждый по очереди.
Называйте файлы по содержанию, на латинице, через дефис. Например: hero-background.webp, robot-illustration.png, toaster-sprite.png, snow-element-01.svg. Никаких пробелов, кириллицы и спецсимволов в именах — они могут вызвать проблемы на сервере.
Подключение шрифтов
Подключение шрифтов — одна из тех вещей, которая кажется простой, но на которой спотыкаются снова и снова. Давайте разберём оба способа, чтобы у вас был готовый шаблон, который можно скопировать и адаптировать под свой проект.
Способ 1: локальные шрифты через @font-face
Если вы скачали файлы шрифта (например, с Google Fonts или fontsquirrel.com), положите их в папку fonts/ и подключите через @font-face в самом начале вашего CSS-файла:
@font-face {
font-family: 'AeonikPro';
src: url('../fonts/AeonikPro-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AeonikPro';
src: url('../fonts/AeonikPro-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
Несколько моментов, на которых обычно спотыкаются. Путь ../fonts/ начинается с двух точек, потому что CSS-файл лежит в папке css/, и чтобы добраться до папки fonts/, нужно сначала выйти на уровень выше. Если бы CSS лежал в корне проекта рядом с fonts/, путь был бы просто fonts/AeonikPro-Regular.woff2. Свойство font-family — это имя, которое вы придумываете сами. Оно может быть любым, но должно совпадать с тем, что вы потом используете в стилях.
Свойство font-weight различает начертания одного и того же шрифта. Если вы подключите и Regular (400), и Bold (700) под одним font-family, браузер сам подберёт нужное начертание, когда вы напишете font-weight: bold в CSS. Свойство font-display: swap говорит браузеру сначала показать текст системным шрифтом, а потом подменить кастомным, когда тот загрузится. Без этого текст может быть невидимым, пока шрифт грузится.
После подключения шрифт используется как обычно:
body {
font-family: 'AeonikPro', Arial, sans-serif;
}
h1 {
font-family: 'AeonikPro', Arial, sans-serif;
font-weight: 700;
}
Обратите внимание на запасные шрифты после 'AeonikPro'. Если кастомный шрифт по какой-то причине не загрузится, браузер отобразит текст в Arial, а если и его нет — в любом системном sans-serif. Никогда не оставляйте font-family с одним значением.
Способ 2: Google Fonts через <link />
Если шрифт доступен на Google Fonts, подключить его можно одной строкой в HTML, без скачивания файлов и без @font-face:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
Первые два тега preconnect ускоряют загрузку, заранее устанавливая соединение с серверами Google. Третий тег подключает сам шрифт. В параметре family указано название шрифта и нужные начертания (400 и 700), а display=swap работает так же, как font-display: swap в @font-face.
После подключения шрифт используется в CSS:
body {
font-family: 'Inter', Arial, sans-serif;
}
Сделайте README.md
Файл README.md — это текстовое описание проекта, которое GitHub отображает на главной странице репозитория. Он не влияет на работу плаката, но важен для всех, кто откроет ваш репозиторий: преподавателей, будущих работодателей, других студентов.
Хороший README для веб-плаката включает название проекта и краткое описание концепции, ссылку на живой плакат (GitHub Pages), автора и год создания. Это занимает пять минут, но делает репозиторий профессиональным.
Чего не должно быть в проекте
Несколько вещей, которые стоит убрать из репозитория перед публикацией.
- Файлы Figma, PSD и другие макеты. Они тяжёлые и не имеют отношения к работающему плакату. Храните их отдельно.
- Папка .DS_Store (на macOS) и Thumbs.db (на Windows). Это системные файлы, которые создаются автоматически. Добавьте их в .gitignore, чтобы они не попадали в репозиторий.
- Неиспользуемые файлы. Если вы экспериментировали с картинкой, которая в итоге не вошла в плакат, удалите её. Каждый файл в проекте должен быть подключён и использоваться.
- Скриншоты и превью в корне проекта. Если нужны картинки для README, создайте для них подпапку docs/ или screenshots/.
