HTML и CSS: руководство по созданию современных веб-страниц

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 55

Для кого эта статья:

Новички в веб-дизайне, желающие освоить основы HTML и CSS
Опытные веб-дизайнеры, заинтересованные в улучшении своих навыков и методах
Студенты и желающие пройти курс веб-дизайна для карьерного роста в этой области
HTML и CSS — фундамент, на котором строится современный веб. Пока новички путаются в терминах и бесконечных возможностях, опытные веб-дизайнеры уверенно используют эти инструменты, создавая визуально привлекательные и функциональные сайты. В этом руководстве я раскрою суть HTML и CSS, расскажу о ключевых тегах, селекторах и приемах верстки — всё с примерами кода, которые вы сможете применить уже сегодня. Готовы превратить пустой текстовый документ в полноценный веб-сайт? 🚀

Если вы хотите структурированно освоить веб-дизайн от основ до продвинутого уровня, Курс веб-дизайна от Skypro — идеальное решение. За 9 месяцев вы не только изучите HTML и CSS, но и освоите UX/UI дизайн, научитесь работать с Figma и создадите портфолио из реальных проектов. Наши студенты получают первые заказы уже во время обучения, а команда менторов помогает с трудоустройством.

Что такое HTML и CSS: основа работы веб-страниц

HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) — два взаимодополняющих языка, которые формируют внешний вид и структуру каждой веб-страницы, которую вы посещаете. Представьте, что HTML — это скелет сайта, а CSS — его одежда и макияж. 🦴👔

HTML отвечает за содержимое страницы — тексты, изображения, ссылки, формы и другие элементы. Он определяет, что будет отображаться на странице. Язык состоит из тегов — специальных маркеров, которые указывают браузеру, как интерпретировать и отображать содержимое.

CSS, в свою очередь, определяет, как это содержимое будет выглядеть — цвета, шрифты, отступы, расположение элементов и другие визуальные аспекты. Без CSS большинство сайтов выглядели бы как простой текст без оформления.

Характеристика	HTML	CSS
Назначение	Структура и содержимое	Стиль и оформление
Расширение файла	.html	.css
Базовый синтаксис	`<тег>содержимое</тег>`	селектор { свойство: значение; }
Год создания	1993	1996

Взаимодействие HTML и CSS происходит через систему селекторов и правил. Веб-браузер читает HTML-документ, создает DOM (Document Object Model) — древовидное представление страницы, а затем применяет CSS-стили к соответствующим элементам.

Алексей Петров, ведущий веб-дизайнер
Когда я только начинал карьеру веб-дизайнера, я совершил классическую ошибку новичка — сосредоточился на изучении графических редакторов, игнорируя HTML и CSS. Я создавал красивые макеты в Photoshop, но не понимал, как они будут реализованы на практике.
Всё изменилось, когда мой первый клиент, владелец небольшого ресторана, попросил внести "небольшие правки" на уже готовый сайт. Я был в панике — макет отлично выглядел в портфолио, но я не мог изменить даже текст на странице! Пришлось срочно погружаться в изучение HTML и CSS.
Этот опыт стал поворотным моментом. Понимание того, как код формирует дизайн, позволило мне создавать проекты, которые не только красиво выглядят, но и эффективно работают. Сегодня я рассматриваю знание HTML и CSS как суперспособность веб-дизайнера, которая отличает профессионала от дилетанта.

Структура HTML-документа и базовые теги для верстки

Каждый HTML-документ имеет стандартную структуру, которая служит основой для построения веб-страницы. Понимание этой структуры — первый шаг к успешной верстке. 📝

Базовая структура HTML-документа выглядит так:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Название страницы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Содержимое страницы -->
<h1>Привет, мир!</h1>
<p>Это мой первый веб-сайт.</p>
</body>
</html>

Рассмотрим ключевые компоненты:

<!DOCTYPE html> — объявление типа документа, сообщающее браузеру версию HTML
<html> — корневой элемент, содержащий все остальные элементы страницы
<head> — содержит метаданные и ссылки на внешние ресурсы
<meta charset="UTF-8"> — указывает кодировку документа
<title> — заголовок страницы, отображаемый на вкладке браузера
<link> — связывает документ с внешними ресурсами, например, CSS-файлами
<body> — содержит все видимое содержимое страницы

Теперь рассмотрим наиболее важные HTML-теги для структурирования содержимого:

Категория	Теги	Назначение
Заголовки	`<h1>` — `<h6>`	Определяют иерархию заголовков на странице
Текстовые блоки	`<p>`, `<div>`, `<span>`	Группируют текст и другие элементы
Списки	`<ul>`, `<ol>`, `<li>`	Создают маркированные и нумерованные списки
Ссылки и изображения	`<a>`, `<img>`	Добавляют гиперссылки и изображения
Семантические элементы	`<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`	Определяют смысловые разделы документа

Использование семантических тегов — важный аспект современной верстки. Они не только делают код более понятным для разработчиков, но и улучшают доступность сайта и его SEO-характеристики.

Вот пример использования семантических тегов для создания типичного макета страницы:

HTML

Скопировать код

<body>
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Наши услуги</h2>
<article>
<h3>Веб-дизайн</h3>
<p>Описание услуги...</p>
</article>
<article>
<h3>Разработка</h3>
<p>Описание услуги...</p>
</article>
</section>
</main>

<footer>
<p>© 2023 Мой сайт. Все права защищены.</p>
</footer>
</body>

Селекторы и свойства CSS для оформления элементов

CSS преображает HTML-страницу, превращая сухую разметку в визуально привлекательный интерфейс. Для этого используются селекторы, позволяющие "нацеливаться" на определенные HTML-элементы, и свойства, задающие их внешний вид. 🎨

Базовый синтаксис CSS выглядит так:

CSS

Скопировать код

селектор {
свойство1: значение1;
свойство2: значение2;
}

Существует несколько типов селекторов, позволяющих выбирать элементы с разной степенью точности:

Селектор по тегу — выбирает все элементы с указанным тегом: p { color: blue; }
Селектор по классу — выбирает элементы с указанным классом: .button { background-color: green; }
Селектор по ID — выбирает элемент с указанным ID: #header { height: 80px; }
Селектор по атрибуту — выбирает элементы с указанным атрибутом: input[type="text"] { border: 1px solid gray; }
Комбинированные селекторы — позволяют создавать сложные условия выбора: header .navigation li a { text-decoration: none; }

Псевдоклассы и псевдоэлементы расширяют возможности селекторов, позволяя стилизовать элементы в определенных состояниях или их части:

:hover — стили при наведении курсора: button:hover { background-color: darkblue; }
:focus — стили при получении фокуса: input:focus { border-color: blue; }
:first-child — первый дочерний элемент: li:first-child { font-weight: bold; }
::before, ::after — создают псевдоэлементы до или после содержимого: p::first-letter { font-size: 2em; }

Основные категории CSS-свойств, которые должен знать каждый веб-дизайнер:

Текстовые свойства — управляют отображением текста:
- font-family — шрифт
- font-size — размер шрифта
- font-weight — жирность
- color — цвет текста
- text-align — выравнивание
- line-height — высота строки
Блочные свойства — определяют размеры и отступы:
- width, height — ширина и высота
- margin — внешние отступы
- padding — внутренние отступы
- border — границы
- box-sizing — модель расчета размеров
Фоновые свойства — задают оформление фона:
- background-color — цвет фона
- background-image — фоновое изображение
- background-position — позиция фона
- background-size — размер фона

Пример использования селекторов и свойств CSS для создания стилизованной кнопки:

CSS

Скопировать код

.button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
font-family: 'Arial', sans-serif;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button:hover {
background-color: #2980b9;
}

.button:active {
transform: scale(0.98);
}

Специфичность селекторов определяет, какие стили будут применены, если несколько правил конфликтуют. Правила с более высокой специфичностью имеют приоритет:

Inline-стили (style="..." в HTML) — 1000 баллов
ID-селекторы (#header) — 100 баллов за каждый ID
Селекторы по классу, атрибуту или псевдоклассу — 10 баллов за каждый
Селекторы по тегу — 1 балл за каждый

Мария Соколова, UX/UI дизайнер
Помню свой первый коммерческий проект — лендинг для местной кофейни. Я потратила недели на создание идеального дизайна в Figma, но когда пришло время реализации, возникла проблема — мне нужно было объяснить разработчику, как именно должен выглядеть каждый элемент.
Мы говорили на разных языках. Я описывала визуальные эффекты, а он спрашивал о селекторах и свойствах CSS. Раздосадованная задержками, я решила освоить CSS самостоятельно.
Поворотным моментом стало понимание каскадности и специфичности. Я обнаружила, что некоторые мои дизайнерские решения были практически невозможны из-за ограничений CSS, а другие, наоборот, можно было реализовать намного элегантнее, чем я предполагала.
Теперь, создавая дизайн, я всегда думаю о его CSS-реализации. Это не только ускоряет процесс разработки, но и делает мои макеты более реалистичными. Мой совет начинающим веб-дизайнерам: изучайте CSS одновременно с графическими инструментами — это сэкономит вам месяцы разочарований.

Позиционирование и адаптивная верстка на CSS

Позиционирование элементов — ключевой аспект создания современных веб-интерфейсов. CSS предлагает несколько методов расположения элементов, каждый со своими преимуществами. 📏

Основные методы позиционирования в CSS:

Стандартный поток документа — элементы располагаются в соответствии с их порядком в HTML
Свойство position — позволяет точно расположить элементы, вынося их из обычного потока:
- static — стандартное положение (по умолчанию)
- relative — позиционирование относительно исходного положения
- absolute — позиционирование относительно ближайшего позиционированного родителя
- fixed — позиционирование относительно окна браузера
- sticky — гибрид между relative и fixed
Flexbox (гибкая верстка) — мощный способ размещения элементов в одномерном пространстве
Grid (сетка) — двумерная система расположения элементов

Вот пример использования Flexbox для создания навигационного меню:

CSS

Скопировать код

.nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 15px 20px;
}

.nav-list {
display: flex;
list-style: none;
gap: 20px;
}

.nav-item a {
color: white;
text-decoration: none;
}

Адаптивная верстка позволяет сайту корректно отображаться на устройствах с разными размерами экрана. Ключевые инструменты адаптивной верстки:

Media queries — позволяют применять стили в зависимости от характеристик устройства:

CSS

Скопировать код

@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
}

Относительные единицы измерения — масштабируются в зависимости от размеров родительского элемента или окна браузера:
% — процент от размера родителя
em — относительно размера шрифта родителя
rem — относительно корневого элемента html
vw, vh — процент от ширины или высоты окна браузера
Гибкие изображения — автоматически адаптируются под размер контейнера:

CSS

Скопировать код

img {
max-width: 100%;
height: auto;
}

Распространенные подходы к адаптивной верстке:

Подход	Описание	Преимущества
Mobile First	Сначала создается мобильная версия, затем добавляются стили для больших экранов	Фокус на важном контенте, лучшая производительность на мобильных устройствах
Desktop First	Сначала создается версия для десктопа, затем адаптируется под мобильные устройства	Проще начать с более сложного дизайна, удобнее для сложных интерфейсов
Отзывчивый дизайн	Элементы плавно адаптируются к любой ширине экрана	Универсальность, поддержка любых размеров экрана
Адаптивный дизайн	Создаются отдельные макеты для определенных диапазонов размеров экрана	Более точный контроль над внешним видом на конкретных устройствах

Пример комплексной адаптивной сетки с использованием CSS Grid:

CSS

Скопировать код

.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}

.header {
grid-column: 1 / -1; /* Занимает все 12 колонок */
}

.main-content {
grid-column: 1 / 9; /* Занимает 8 из 12 колонок */
}

.sidebar {
grid-column: 9 / -1; /* Занимает 4 из 12 колонок */
}

.footer {
grid-column: 1 / -1;
}

@media (max-width: 768px) {
.main-content, .sidebar {
grid-column: 1 / -1; /* На маленьких экранах занимают всю ширину */
}
}

Практические кейсы использования HTML и CSS в веб-дизайне

Теоретические знания HTML и CSS обретают ценность только при их практическом применении. Рассмотрим несколько реальных кейсов, демонстрирующих мощь этих технологий в веб-дизайне. 💼

1. Создание отзывчивой карточки продукта

Карточки продуктов — распространенный элемент интернет-магазинов. Вот пример простой, но эффективной карточки:

HTML

Скопировать код

<!-- HTML структура -->
<div class="product-card">
<div class="product-badge">Новинка</div>
<img src="product.jpg" alt="Продукт" class="product-image">
<h3 class="product-title">Беспроводные наушники Model X</h3>
<p class="product-price">5 990 ₽</p>
<p class="product-description">Высококачественный звук, 40 часов автономной работы.</p>
<button class="product-button">В корзину</button>
</div>

<!-- CSS стили -->
<style>
.product-card {
position: relative;
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.product-badge {
position: absolute;
top: 10px;
right: 10px;
background-color: #ff5722;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
}

.product-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 6px;
}

.product-title {
margin-top: 15px;
font-size: 18px;
}

.product-price {
font-size: 20px;
font-weight: bold;
color: #333;
}

.product-button {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.product-button:hover {
background-color: #388E3C;
}

@media (max-width: 768px) {
.product-card {
width: 100%;
}
}
</style>

2. Многоуровневое выпадающее меню

Навигация — критически важный компонент сайта. Вот пример создания многоуровневого меню:

HTML

Скопировать код

<!-- HTML структура -->
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item"><a href="#">Главная</a></li>
<li class="nav-item has-dropdown">
<a href="#">Каталог <span class="dropdown-arrow">▼</span></a>
<ul class="dropdown">
<li><a href="#">Электроника</a></li>
<li class="has-dropdown">
<a href="#">Одежда <span class="dropdown-arrow">▶</span></a>
<ul class="dropdown dropdown-right">
<li><a href="#">Мужская</a></li>
<li><a href="#">Женская</a></li>
<li><a href="#">Детская</a></li>
</ul>
</li>
<li><a href="#">Книги</a></li>
</ul>
</li>
<li class="nav-item"><a href="#">О нас</a></li>
<li class="nav-item"><a href="#">Контакты</a></li>
</ul>
</nav>

<!-- CSS стили -->
<style>
.main-nav {
background-color: #333;
}

.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.nav-item {
position: relative;
}

.nav-item a {
display: block;
padding: 15px 20px;
color: white;
text-decoration: none;
}

.nav-item a:hover {
background-color: #555;
}

.dropdown {
position: absolute;
top: 100%;
left: 0;
display: none;
min-width: 200px;
background-color: #444;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 100;
}

.dropdown-right {
left: 100%;
top: 0;
}

.has-dropdown:hover > .dropdown {
display: block;
}

.dropdown-arrow {
font-size: 10px;
margin-left: 5px;
}

@media (max-width: 768px) {
.nav-list {
flex-direction: column;
}

.dropdown, .dropdown-right {
position: static;
display: none;
width: 100%;
box-shadow: none;
background-color: #555;
}

.has-dropdown.active > .dropdown {
display: block;
}
}
</style>

3. Модальное окно без JavaScript

С помощью только CSS можно создать интерактивное модальное окно:

HTML

Скопировать код

<!-- HTML структура -->
<div class="modal-container">
<input type="checkbox" id="modal-toggle" class="modal-toggle">
<label for="modal-toggle" class="modal-btn">Открыть модальное окно</label>

<div class="modal-backdrop">
<div class="modal-content">
<label for="modal-toggle" class="modal-close">×</label>
<h2>Заголовок модального окна</h2>
<p>Здесь может быть размещена любая информация, форма для заполнения или другой контент.</p>
<button>Подтвердить</button>
</div>
</div>
</div>

<!-- CSS стили -->
<style>
.modal-toggle {
display: none;
}

.modal-btn {
display: inline-block;
padding: 10px 15px;
background-color: #3498db;
color: white;
border-radius: 4px;
cursor: pointer;
}

.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}

.modal-content {
width: 80%;
max-width: 500px;
background-color: white;
padding: 30px;
border-radius: 8px;
position: relative;
transform: translateY(-50px);
transition: transform 0.3s;
}

.modal-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #999;
}

.modal-toggle:checked ~ .modal-backdrop {
opacity: 1;
visibility: visible;
}

.modal-toggle:checked ~ .modal-backdrop .modal-content {
transform: translateY(0);
}

button {
padding: 8px 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}
</style>

Эти примеры демонстрируют, как с помощью HTML и CSS можно создавать интерактивные и визуально привлекательные компоненты веб-интерфейса. Ключевые принципы успешного использования этих технологий в веб-дизайне:

Семантическая разметка — используйте теги, отражающие смысл контента
Модульный CSS — разбивайте стили на независимые блоки
Прогрессивное улучшение — обеспечьте базовую функциональность, затем добавляйте "украшения"
Отзывчивый дизайн — тестируйте на различных устройствах
Оптимизация производительности — минимизируйте количество селекторов и сложность стилей

Помните, что хороший веб-дизайн — это баланс между эстетикой и функциональностью. HTML и CSS — ваши основные инструменты для достижения этого баланса. 🌟

Освоение HTML и CSS — это не просто изучение синтаксиса двух языков, а понимание философии веб-дизайна. Эти технологии дают вам прямой контроль над тем, как пользователи воспринимают и взаимодействуют с вашим продуктом. Начните с малого — создайте простую страницу, добавьте стили, экспериментируйте с макетами. Каждый новый проект будет расширять ваши возможности и понимание. В мире, где визуальные редакторы приходят и уходят, фундаментальные знания HTML и CSS остаются неизменной ценностью, превращающей веб-дизайнера из ремесленника в настоящего архитектора цифрового пространства.

Читайте также

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой тег HTML используется для создания заголовков?

1 / 5

Свежие материалы

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

Как установить и настроить Swift на Linux

6 сентября 2024

История и развитие HTTP и HTTPS

6 сентября 2024

HTML и CSS: руководство по созданию современных веб-страниц

Что такое HTML и CSS: основа работы веб-страниц

Структура HTML-документа и базовые теги для верстки

Селекторы и свойства CSS для оформления элементов

Позиционирование и адаптивная верстка на CSS

Практические кейсы использования HTML и CSS в веб-дизайне

Загрузка...