Каждый сайт, который вы видите в интернете, состоит из двух фундаментальных технологий: HTML и CSS. Они работают вместе, как архитектор и дизайнер при строительстве дома. HTML определяет структуру страницы («где будет заголовок, текст, кнопки»), а CSS отвечает за внешний вид («какой цвет у кнопки, какой шрифт у текста»). В этой статье вы узнаете, как эти технологии превращают код в визуальные и функциональные веб-страницы.
HTML: Скелет веб-страницы
Что такое HTML?
HTML (HyperText Markup Language) — язык разметки, который сообщает браузеру, как отображать контент. Он состоит из тегов, которые окружают элементы страницы. Например, тег <h1> обозначает заголовок первого уровня, а <p> — абзац.
Пример 1:
<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый абзац.</p>
</body>
</html>
Этот код создаст страницу с заголовком и текстом.
Основные элементы HTML5
Современный HTML5 включает семантические теги, которые делают структуру страницы понятной не только браузеру, но и поисковым системам:
<header>: Шапка сайта.<nav>: Навигационное меню.<main>: Основное содержимое.<article>: Независимый контент (например, блог-пост).<footer>: Подвал сайта.
Пример 2:
Семантическая разметка для блога:
<body>
<header>
<h1>Мой блог о путешествиях</h1>
<nav>
<a href="/">Главная</a>
<a href="/about">Обо мне</a>
</nav>
</header>
<main>
<article>
<h2>Как я покорил Эверест</h2>
<p>Это было незабываемое приключение...</p>
</article>
</main>
<footer>
<p>© 2025. Все права защищены.</p>
</footer>
</body>CSS: Одежда для сайта
Что такое CSS?
CSS (Cascading Style Sheets) — язык стилей, который преобразует «голый» HTML в визуально привлекательную страницу. Он управляет:
- Цветами и шрифтами.
- Расположением элементов.
- Адаптацией под разные устройства.
Пример 3:
h1 {
color: #2c3e50;
font-family: Arial, sans-serif;
text-align: center;
}
Этот код сделает все заголовки <h1> темно-синими, выровняет их по центру и задаст шрифт Arial.
Селекторы и свойства
- Селекторы указывают, к каким элементам применять стили (например,
p,.class,#id). - Свойства определяют конкретные параметры (
margin,padding,background-color).
Пример 4:
.button {
background-color: #3498db;
padding: 12px 24px;
border-radius: 8px;
color: white;
}
Этот стиль можно применить к любой кнопке с классом button:
<button class="button">Нажми меня</button>Как HTML и CSS работают вместе?
Подключение CSS к HTML
Стили можно добавить тремя способами:
- Inline-стили (не рекомендуется для больших проектов):
<p style="color: red;">Это красный текст.</p>- Внутренние стили (в теге
<style>внутри<head>):
<head>
<style>
p { font-size: 16px; }
</style>
</head>- Внешние файлы (наиболее правильный подход):
<head>
<link rel="stylesheet" href="styles.css">
</head>Пример 5:
Файл styles.css:
nav {
background-color: #f8f9fa;
padding: 20px;
}
nav a {
text-decoration: none;
margin-right: 15px;
}
Этот код стилизует навигационное меню, убирая подчеркивание у ссылок и добавляя отступы.
Современные практики верстки (2025)
Адаптивный дизайн
Сайты должны корректно отображаться на всех устройствах: от смартфонов до широкоформатных мониторов. Для этого используются:
- Медиа-запросы (
@media). - Относительные единицы (%, vw, rem).
- Flexbox и CSS Grid.
Пример 6:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
Этот код создает адаптивную сетку, которая превращается в один столбец на мобильных устройствах.
CSS-переменные
Переменные позволяют хранить значения (цвета, размеры) для повторного использования.
Пример 7:
:root {
--primary-color: #3498db;
--spacing: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing);
}Почему семантика и доступность важны?
Для поисковых систем (SEO)
Семантические теги (<article>, <section>) помогают поисковикам понять структуру контента. Это улучшает ранжирование сайта.
Для пользователей с ограниченными возможностями
Правильная разметка позволяет скринридерам (программам для слабовидящих) корректно озвучивать содержимое.
Пример 8:
Использование ARIA-ролей:
<nav aria-label="Основное меню">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
</ul>
</nav>Вопросы для самоконтроля
- Чем отличается
<div>от<article>? - Как сделать текст красным с помощью CSS?
- Зачем нужны медиа-запросы?
- Как подключить внешний CSS-файл к HTML-документу?
- Что такое CSS Grid и для чего он используется?
- Почему семантическая верстка важна для SEO?
- Как создать адаптивную кнопку, которая меняет цвет при наведении?
- Какие ARIA-атрибуты вы знаете и зачем они нужны?
Практические задания
- Создайте структуру сайта-портфолио:
- Используйте семантические теги:
<header>,<nav>,<section>. - Добавьте CSS-стили для фона, шрифтов и отступов.
- Сверстайте адаптивную галерею:
- Реализуйте сетку из 3 колонок на ПК и 1 колонки на мобильных.
- Добавьте hover-эффект для изображений (например, затемнение).
Заключение
HTML и CSS — основа веб-разработки. Они позволяют создавать структурированные, визуально привлекательные и адаптивные сайты. В 2025 году эти технологии продолжают развиваться: появляются новые методы верстки, инструменты для автоматизации и стандарты доступности. В следующей статье мы разберем, как установить редактор кода и начать писать свой первый HTML-документ.