Язык HTML и CSS: что это такое и как работает

🎯 Введение

Привет, будущие создатели веб-сайтов! Сегодня мы отправимся в увлекательное путешествие в мир HTML и CSS — двух самых важных технологий для создания красивых и интересных веб-страниц.

Важное уточнение: HTML и CSS не являются языками программирования. HTML — это язык разметки, а CSS — язык стилей. Они не выполняют вычисления и не содержат логики, но являются фундаментом любого веб-сайта!

Представьте, что мы строим дом: HTML — это каркас, стены и комнаты, а CSS — это краска, обои, мебель и весь декор! Вместе они создают красивый и функциональный веб-сайт.

🏗️ Что такое HTML?

HTML расшифровывается как HyperText Markup Language (Язык разметки гипертекста). Звучит сложно? На самом деле всё просто! HTML — это как конструктор LEGO для веб-страниц.

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

💡 Интересный факт: Первая веб-страница была создана в 1991 году Тимом Бернерсом-Ли. Она была очень простой и содержала только текст и ссылки!

📄 Структура HTML-документа

Каждый HTML-документ имеет базовую структуру. Это как скелет, на который мы надеваем всё остальное. Вот как выглядит минимальный HTML-документ:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая веб-страница!</p>
</body>
</html>

Давайте разберём каждую часть:

<!DOCTYPE html> — это объявление типа документа. Оно говорит браузеру, что это HTML5 документ.
<html> — корневой элемент, который содержит весь HTML-код. Атрибут lang="ru" указывает язык страницы.
<head> — «голова» документа. Здесь находится служебная информация, которая не отображается на странице.
<meta charset="UTF-8"> — указывает кодировку, чтобы правильно отображались русские буквы.
<title> — название страницы, которое показывается во вкладке браузера.
<body> — «тело» документа. Здесь находится весь видимый контент страницы.

🏷️ Основные HTML-теги

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

Заголовки

<h1>Самый важный заголовок</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Самый маленький заголовок</h6>

Текст и параграфы

<p>Это обычный параграф текста.</p>
<strong>Жирный текст</strong>
<em>Курсивный текст</em>
<br> <!-- Перенос строки -->

Ссылки и изображения

<a href="https://example.com">Это ссылка</a>
<img src="котик.jpg" alt="Милый котик">

⚠️ Важно: Всегда добавляй атрибут alt к изображениям! Он описывает картинку для людей с нарушениями зрения и показывается, если изображение не загрузилось.

Списки

<!-- Маркированный список -->
<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

<!-- Нумерованный список -->
<ol>
    <li>Шаг один</li>
    <li>Шаг два</li>
    <li>Шаг три</li>
</ol>

Контейнеры и семантические теги

<div>Универсальный контейнер</div>
<span>Встроенный контейнер</span>

<!-- Семантические теги (HTML5) -->
<header>Шапка сайта</header>
<nav>Навигационное меню</nav>
<main>Основной контент</main>
<article>Статья</article>
<section>Раздел</section>
<aside>Боковая панель</aside>
<footer>Подвал сайта</footer>

Формы и кнопки

<button>Нажми меня!</button>

<form>
    <input type="text" placeholder="Введи своё имя">
    <input type="email" placeholder="Твой email">
    <button type="submit">Отправить</button>
</form>

Таблица основных тегов

Тег	Назначение	Пример
<h1>	Самый большой заголовок	<h1>Заголовок</h1>
<p>	Параграф текста	<p>Текст</p>
<a>	Ссылка	<a href="url">Ссылка</a>
<img>	Изображение	<img src="pic.jpg" alt="Описание">
<div>	Блочный контейнер	<div>Контент</div>
<ul>/<li>	Маркированный список	<ul><li>Пункт</li></ul>

🎨 Волшебство CSS

CSS означает Cascading Style Sheets (Каскадные таблицы стилей). Если HTML — это скелет твоего сайта, то CSS — это его красивая одежда, причёска и макияж! С помощью CSS ты можешь изменять цвета, размеры, шрифты, расположение элементов и создавать анимации.

CSS можно подключить тремя способами:

Внешний файл — самый правильный способ (рекомендуется)
В теге <style> внутри <head>
Inline-стили — прямо в HTML-теге (не рекомендуется)

Подключение внешнего CSS-файла

<!-- В файле index.html, внутри <head> -->
<link rel="stylesheet" href="style.css">

/* Файл style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333333;
}

h1 {
    color: #2c3e50;
    font-size: 36px;
}

🎯 CSS-селекторы и свойства

Типы селекторов

Селекторы — это способ «выбрать» элементы на странице, чтобы применить к ним стили.

/* Селектор по тегу - выбирает ВСЕ параграфы */
p {
    color: blue;
}

/* Селектор по классу - выбирает элементы с class="special" */
.special {
    background-color: yellow;
    font-weight: bold;
}

/* Селектор по ID - выбирает элемент с id="header" */
#header {
    font-size: 48px;
    text-align: center;
}

/* Множественный селектор */
h1, h2, h3 {
    font-family: 'Georgia', serif;
}

/* Вложенный селектор */
div p {
    margin: 10px;
}

Основные CSS-свойства

Свойство	Описание	Пример
color	Цвет текста	color: red;
background-color	Цвет фона	background-color: #ffcc00;
font-size	Размер шрифта	font-size: 20px;
font-family	Семейство шрифта	font-family: Arial;
margin	Внешние отступы	margin: 20px;
padding	Внутренние отступы	padding: 15px;
border	Рамка	border: 2px solid black;
width	Ширина	width: 300px;
height	Высота	height: 200px;

Псевдоклассы

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

/* При наведении мыши на ссылку */
a:hover {
    color: red;
    text-decoration: underline;
}

/* При нажатии на кнопку */
button:active {
    transform: scale(0.95);
}

/* Первый дочерний элемент */
li:first-child {
    font-weight: bold;
}

/* Каждый второй элемент */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

Flexbox — современные макеты

Flexbox делает создание гибких макетов невероятно простым:

.container {
    display: flex;
    justify-content: space-between; /* Распределение по горизонтали */
    align-items: center; /* Выравнивание по вертикали */
    gap: 20px; /* Промежутки между элементами */
}

.item {
    flex: 1; /* Элементы растягиваются равномерно */
}

Адаптивный дизайн

Медиа-запросы позволяют создавать сайты, которые отлично выглядят на любых устройствах:

/* Стили для экранов меньше 768px (планшеты и телефоны) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    h1 {
        font-size: 24px;
    }
}

/* Стили для больших экранов */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Этот блок изменяется при наведении курсора благодаря CSS-свойствам transition и :hover! 🎨

🚀 Практический проект: создаём визитку

Давай создадим твою первую веб-визитку! Следуй этим шагам:

Шаг 1: Создай HTML-файл

Создай файл index.html и добавь базовую структуру:

<!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="style.css">
</head>
<body>
    <div class="card">
        <header class="card-header">
            <h1>Иван Петров</h1>
            <p class="subtitle">Начинающий веб-разработчик</p>
        </header>
        
        <main class="card-content">
            <section class="about">
                <h2>Обо мне</h2>
                <p>Привет! Я учусь создавать сайты и очень люблю программирование.</p>
            </section>
            
            <section class="skills">
                <h2>Мои навыки</h2>
                <ul>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JavaScript (изучаю)</li>
                </ul>
            </section>
            
            <section class="contact">
                <h2>Контакты</h2>
                <p>Email: ivan@example.com</p>
                <p>GitHub: github.com/ivan</p>
            </section>
        </main>
        
        <footer class="card-footer">
            <button>Связаться со мной</button>
        </footer>
    </div>
</body>
</html>

Шаг 2: Создай CSS-файл

Создай файл style.css в той же папке:

/* Общие стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Карточка визитки */
.card {
    background-color: white;
    max-width: 500px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Шапка карточки */
.card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    text-align: center;
}

.card-header h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 16px;
    opacity: 0.9;
}

/* Содержимое карточки */
.card-content {
    padding: 30px;
}

.card-content section {
    margin-bottom: 25px;
}

.card-content h2 {
    color: #667eea;
    font-size: 20px;
    margin-bottom: 15px;
    border-bottom: 2px solid #667eea;
    padding-bottom: 5px;
}

.card-content ul {
    list-style: none;
    padding-left: 0;
}

.card-content li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

.card-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

/* Подвал карточки */
.card-footer {
    padding: 20px 30px;
    background-color: #f8f9fa;
    text-align: center;
}

.card-footer button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card-footer button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

.card-footer button:active {
    transform: translateY(0);
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    .card-header h1 {
        font-size: 24px;
    }
    
    .card-content {
        padding: 20px;
    }
}

Шаг 3: Открой в браузере

Просто дважды кликни на файл index.html или перетащи его в окно браузера. Вуаля! Твоя визитка готова! 🎉

✅ Поздравляем! Ты только что создал свой первый полноценный веб-проект! Теперь можешь изменять цвета, текст и добавлять новые разделы.

🛠️ Инструменты разработчика

Редакторы кода

Для создания веб-сайтов тебе понадобится хороший редактор кода. Вот лучшие варианты:

Visual Studio Code (VS Code) — самый популярный бесплатный редактор. Имеет подсветку синтаксиса, автодополнение и тысячи расширений. Рекомендуется для начинающих!
Sublime Text — быстрый и легковесный редактор с чистым интерфейсом.
Atom — бесплатный редактор от GitHub с множеством плагинов.
Notepad++ — простой редактор для Windows, хорош для начала.

Онлайн-песочницы

Хочешь быстро протестировать код без установки программ? Используй онлайн-песочницы:

CodePen (codepen.io) — отличная площадка для экспериментов с HTML, CSS и JavaScript
JSFiddle (jsfiddle.net) — ещё одна популярная песочница
CodeSandbox (codesandbox.io) — для более сложных проектов
Replit (replit.com) — полноценная IDE в браузере

Инспектор браузера

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

Нажми F12 или Ctrl+Shift+I (Cmd+Option+I на Mac)
Или кликни правой кнопкой мыши на элементе и выбери «Просмотреть код»

С помощью инспектора ты можешь:

Просматривать HTML-структуру любой страницы
Изменять CSS в реальном времени и сразу видеть результат
Проверять, какие стили применены к элементу
Тестировать адаптивность на разных размерах экрана

💡 Совет профессионала: Изучай код любимых сайтов через инспектор! Это лучший способ учиться на примерах.

⚠️ Частые ошибки начинающих

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

1. Незакрытые теги


<p>Это текст
<div>Ещё текст


<p>Это текст</p>
<div>Ещё текст</div>

2. Неправильная вложенность


<p><div>Текст</div></p>


<div><p>Текст</p></div>

3. Забытые точки и решётки в CSS

/* ❌ Неправильно */
header {  /* Это выберет ВСЕ теги <header> */
    color: red;
}

/* ✅ Правильно для класса */
.header {  /* Это выберет элементы с class="header" */
    color: red;
}

/* ✅ Правильно для ID */
#header {  /* Это выберет элемент с id="header" */
    color: red;
}

4. Неправильные пути к файлам


<img src="/images/photo.jpg">


<img src="photo.jpg">  <!-- Если в той же папке -->
<img src="images/photo.jpg">  <!-- Если в папке images -->

5. Использование устаревших тегов


<font color="red">Текст</font>
<center>Текст</center>


<p style="color: red;">Текст</p>
<p style="text-align: center;">Текст</p>

6. Отсутствие DOCTYPE и мета-тегов

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Название страницы</title>
</head>

🚀 Следующие шаги в обучении

Поздравляю! Ты освоил основы HTML и CSS. Вот что изучать дальше:

JavaScript — оживи свои сайты!

JavaScript — это настоящий язык программирования, который добавляет интерактивность: кнопки, анимации, формы, игры и многое другое. С JavaScript твои сайты станут по-настоящему живыми!

CSS-фреймворки

Bootstrap — самый популярный CSS-фреймворк с готовыми компонентами
Tailwind CSS — современный подход с utility-классами
Foundation — профессиональный фреймворк для сложных проектов

Препроцессоры CSS

Sass/SCSS и Less — это расширения CSS, которые делают написание стилей проще и удобнее с помощью переменных, вложенности и функций.

Системы контроля версий

Изучи Git и GitHub — это стандарт в индустрии для хранения кода и совместной работы над проектами.

Дорожная карта веб-разработчика

Уровень 1: HTML + CSS (ты здесь! 🎉)
Уровень 2: JavaScript (основы программирования)
Уровень 3: DOM-манипуляции и работа с API
Уровень 4: Фреймворки (React, Vue, Angular)
Уровень 5: Backend (Node.js, Python, PHP)
Уровень 6: Базы данных (SQL, MongoDB)
Уровень 7: Full-stack разработка

Полезные ресурсы для обучения

MDN Web Docs (developer.mozilla.org) — лучшая документация по HTML, CSS и JavaScript
freeCodeCamp — бесплатные интерактивные курсы
CSS-Tricks — множество статей и примеров по CSS
Frontend Mentor — практические проекты для портфолио
YouTube — каналы типа Traversy Media, Web Dev Simplified

🎯 Главный совет: Практика важнее теории! Создавай проекты, экспериментируй и не бойся ошибок. Каждый великий разработчик когда-то был новичком.

📖 Глоссарий терминов

HTML (HyperText Markup Language)

Язык разметки гипертекста — используется для создания структуры веб-страниц.

CSS (Cascading Style Sheets)

Каскадные таблицы стилей — язык для описания внешнего вида веб-страниц.

Тег

Элемент HTML, заключённый в угловые скобки, например <p> или <div>.

Атрибут

Дополнительная информация о теге, например href в <a href="url">.

Селектор

Способ выбора HTML-элементов для применения CSS-стилей.

Класс (class)

Атрибут для группировки элементов. В CSS обозначается точкой: .myClass

ID (идентификатор)

Уникальный атрибут элемента. В CSS обозначается решёткой: #myID

Семантическая разметка

Использование HTML-тегов по их смысловому назначению (<header>, <nav>, <article>).

Flexbox

Современная система создания гибких макетов в CSS.

Адаптивный дизайн (Responsive)

Подход к дизайну, при котором сайт хорошо выглядит на всех устройствах.

Медиа-запросы

CSS-техника для применения разных стилей на разных размерах экрана.

Box Model

Модель представления элементов: content, padding, border, margin.

❓ Часто задаваемые вопросы

Сколько времени нужно, чтобы выучить HTML и CSS?

Основы можно освоить за 2-4 недели при регулярных занятиях по 1-2 часа в день. Но настоящее мастерство приходит с практикой — создавай проекты и экспериментируй!

Нужно ли знать математику для HTML/CSS?

Нет! Для HTML и CSS не нужна сложная математика. Достаточно базовых знаний о числах и процентах. Это один из самых доступных способов начать карьеру в IT.

Какой браузер лучше использовать для разработки?

Google Chrome или Mozilla Firefox — оба имеют отличные инструменты разработчика. Chrome немного популярнее среди разработчиков, но выбор за тобой!

Можно ли создать сайт только на HTML и CSS?

Да! Многие простые сайты (визитки, портфолио, лендинги) можно создать только на HTML и CSS. Для более сложных функций понадобится JavaScript.

Нужно ли устанавливать специальные программы?

Технически нет — достаточно Блокнота и браузера. Но рекомендуется использовать редактор кода типа VS Code — он сильно упростит жизнь с подсветкой синтаксиса и автодополнением.

Как проверить, правильно ли написан мой код?

Используй валидаторы: validator.w3.org для HTML и jigsaw.w3.org/css-validator для CSS. Они найдут ошибки и подскажут, как их исправить.

Где можно разместить свой сайт бесплатно?

GitHub Pages, Netlify, Vercel, Neocities — все эти платформы позволяют бесплатно разместить статические сайты на HTML/CSS.

Устарели ли HTML и CSS?

Нет! HTML и CSS постоянно развиваются. HTML5 и CSS3 — современные стандарты, которые активно используются. Это фундаментальные технологии веба, которые никуда не денутся.

🌟 Истории успеха

Многие известные разработчики начинали именно с HTML и CSS. Например, создатель первого браузера Тим Бернерс-Ли разработал HTML в 1991 году, и эта технология до сих пор является основой интернета!

Сегодня веб-разработчики создают потрясающие сайты для компаний по всему миру. По данным исследований, средняя зарплата junior веб-разработчика в России — от 60 000 рублей, а с опытом может достигать 200 000+ рублей.

💼 Где применяются HTML и CSS: разработка сайтов, мобильных приложений, email-рассылок, веб-приложений, интерфейсов программ и даже электронных книг!

🎓 Готов начать своё обучение?

Ты только что прошёл комплексный курс по основам HTML и CSS! Теперь у тебя есть все знания, чтобы создавать свои первые веб-страницы. Помни: лучший способ учиться — это практика.

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

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

Всё о языках программирования HTML и CSS для детей