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

Основы HTML и CSS: первый HTML-файл, основные теги, селекторы, блочная модель, Flexbox, адаптация под телефон, бесплатный хостинг и практический проект.

Сайты, которые вы открываете каждый день, — новости, интернет-магазин, страница школы — начинаются с обычных текстовых файлов. Чтобы научиться их писать, не нужны ни дорогой компьютер, ни специальное образование: хватит бесплатной программы, браузера и нескольких вечеров практики. В этом руководстве разберём, как браузер показывает страницу, какие инструменты нужны, как написать первый HTML-файл, основные теги и атрибуты, семантическую разметку и доступность, подключение CSS, селекторы, цвета и шрифты, блочную модель и основы Flexbox, адаптацию под телефон и публикацию страницы в интернете. Затем шаг за шагом соберём «личную страницу-визитку» с полным кодом, разберём частые ошибки, а в конце дадим практическое задание и чек-лист.

Как браузер показывает страницу

Когда вы вводите адрес, браузер загружает с сервера несколько файлов, читает их и рисует на экране страницу. Веб-сайт — это набор таких страниц. Каждая страница состоит из трёх слоёв, и их удобно сравнить с домом:

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

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

Нужные инструменты

Всё бесплатно:

Текстовый редактор. Код — это обычный текст, но писать его в Word нельзя: он добавляет скрытое форматирование. Удобнее всего бесплатный Visual Studio Code (VS Code): он подсвечивает код цветом, сам закрывает теги и подсказывает ошибки. Если компьютер слабый, подойдёт и Notepad++.
Браузер. Chrome, Firefox или Edge. Результат полезно проверять в двух разных браузерах.
DevTools (инструменты разработчика). Встроены в браузер. Нажмите F12 или щёлкните правой кнопкой по любому элементу страницы и выберите Inspect (в русском интерфейсе — «Просмотреть код»; на macOS — Cmd + Option + I). На вкладке Elements виден HTML-код страницы, а справа — CSS, применённый к выбранному элементу. Значения можно менять прямо там и сразу видеть результат: после перезагрузки страницы изменения исчезнут, исходный файл не пострадает.

Начните с порядка: создайте в «Документах» (Documents) папку tanishuv и откройте её в VS Code через File → Open Folder. Все файлы будут лежать в ней.

Первый HTML-файл и основные теги

Создайте в папке файл index.html. Имя index выбрано не случайно: при открытии папки сервер ищет именно этот файл. Напишите в нём:

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

Сохраните (Ctrl + S) и перетащите файл в окно браузера или дважды щёлкните по нему. Что делает каждая строка:

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

Большинство тегов парные: открывающий <p> и закрывающий </p>, между ними содержимое. Некоторые, например <img> и <meta>, не закрываются.

Основные теги

<h1>Заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<h3>Подраздел</h3>
<p>Обычный абзац текста.</p>
<a href="https://example.com">Текст ссылки</a>
<img src="images/samarqand.jpg" alt="Площадь Регистан вечером">
<ul>
  <li>Пункт маркированного списка</li>
</ul>
<ol>
  <li>Пункт нумерованного списка</li>
</ol>
<button type="button">Кнопка</button>

h1–h3 — уровни заголовков. h1 на странице один.
p — абзац; a — ссылка; img — изображение.
ul — неупорядоченный (маркированный), ol — упорядоченный (нумерованный) список; пункты в обоих — li.
div — «коробка» без смысла: для группировки и оформления элементов.
button — кнопка. А для перехода на другую страницу используется a.

Атрибуты

Атрибут — дополнительная информация внутри открывающего тега: имя="значение". Чаще всего встречаются href (адрес ссылки), src (файл изображения), alt (описание изображения), class (имя для CSS), id (уникальное имя на странице) и lang. Значение всегда пишите в двойных кавычках.

Семантическая разметка и доступность

Всё можно собрать из div, но это неправильно. Семантические теги передают смысл: header — начало страницы или раздела, nav — меню, main — основное содержимое, section — тематический раздел, footer — нижняя часть. Они помогают поисковым системам и программам экранного доступа, которыми пользуются незрячие люди, понять страницу.

Правила доступности:

У каждого содержательного изображения должен быть alt: не «картинка1», а то, что на ней изображено. Для чисто декоративной картинки оставьте alt="".
Не нарушайте порядок заголовков: после h1 идёт h2, после него h3. Не выбирайте заголовок ради крупного шрифта — это задача CSS.
Текст ссылки должен быть понятным: не «нажмите сюда», а «Список программ».

CSS: подключение, селекторы, цвета и шрифты

Правильнее всего писать стили в отдельном файле style.css: один файл оформляет все страницы. Добавьте внутрь head:

<link rel="stylesheet" href="style.css">

Правило CSS состоит из трёх частей: селектора (к какому элементу), свойства и значения:

p {
  color: #333333;
  font-size: 18px;
}

.izoh {
  background-color: #fff4d6;
}

#asosiy-rasm {
  width: 100%;
}

Селектор тега (p) применяется ко всем абзацам.
Селектор класса (.izoh) — к любому элементу с class="izoh". Один класс можно дать многим элементам.
Селектор id (#asosiy-rasm) — только к одному элементу.

На практике отдавайте предпочтение классам: их можно переиспользовать, а id слишком «сильный» и потом мешает менять оформление. Имена классов пишите латиницей и без пробелов: skills-list или konikmalar.

Цвета задаются названием (red), шестнадцатеричным кодом (#1c3d86) или rgb(28, 61, 134). Между текстом и фоном должен быть достаточный контраст: светло-серый текст на светло-сером фоне никто не прочитает.

Шрифты задаются через font-family, в конце — запасное семейство: font-family: Arial, Helvetica, sans-serif;. Если первого шрифта нет на компьютере, берётся следующий. Для текста удобны размер 16–18px и межстрочный интервал около line-height: 1.5.

Блочная модель и основы Flexbox

Блочная модель

Для браузера каждый элемент — прямоугольная коробка. Её слои изнутри наружу:

Content — сам текст или изображение.
Padding — внутренний отступ между содержимым и рамкой.
Border — линия рамки.
Margin — внешний отступ от коробки до соседних элементов.

.card {
  padding: 20px;
  border: 1px solid #dddddd;
  margin-bottom: 16px;
}

По умолчанию padding и border прибавляются к ширине элемента, и расчёты запутываются. Чтобы этого избежать, в начале файла пишут * { box-sizing: border-box; } — теперь width означает ширину всей коробки. На вкладке Computed в DevTools блочная модель показана цветной схемой.

Flexbox

Flexbox выстраивает элементы в строку или столбец. Например, пункты меню рядом друг с другом:

.menu {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

display: flex превращает родителя во flex-контейнер, и его прямые потомки выстраиваются в одну строку.
gap — расстояние между потомками (не нужно возиться с margin).
justify-content — расположение вдоль главной оси: flex-start, center, space-between.
align-items — выравнивание по поперечной оси; center ставит по центру элементы разной высоты.
flex-direction: column выстраивает элементы столбцом; flex-wrap: wrap переносит их на следующую строку, если не хватает места.

Адаптация под телефон и публикация в интернете

Основы media query

Многие открывают сайты с телефона, поэтому страница должна быть удобной и на узком экране. Первый шаг — мета-тег viewport, о котором говорилось выше. Второй — media query: дополнительные правила для экранов уже определённой ширины:

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

Для проверки нажмите в DevTools значок телефона (Toggle device toolbar, Ctrl + Shift + M) и выберите разные размеры экрана. Адаптации помогает и использование max-width и процентов вместо жёстко заданной ширины.

Публикация

Чтобы показать готовую страницу друзьям по ссылке, нужен хостинг. Для статических страниц есть сервисы с бесплатной возможностью размещения:

GitHub Pages. Вы создаёте репозиторий на GitHub, загружаете файлы, затем в разделе Settings → Pages выбираете ветку main в поле Branch и нажимаете Save. Через несколько минут страница откроется по адресу imya-polzovatelya.github.io/imya-repozitoriya/. Работе с Git посвящена наша статья «Основы Git».
Netlify. Достаточно зарегистрироваться и перетащить папку в окно сайта — сервис выдаст адрес со временным именем.

В обоих случаях файл главной страницы обязательно должен называться index.html.

Практический проект: личная страница-визитка

Наша условная героиня — Азиза Юсупова из Намангана. Она работала в библиотеке, сейчас изучает фронтенд и хочет сделать страницу о себе, чтобы отправлять её работодателям. Вы подставите свои данные.

Шаг 1. Структура папки. В папке tanishuv: index.html, style.css и папка images, а в ней портрет aziza.jpg, названный строчными буквами. Если фото нет, удалите строку с img.

Шаг 2. HTML. Напишите в index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Азиза Юсупова - страница-визитка</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <img class="hero-photo" src="images/aziza.jpg" alt="Портрет Азизы Юсуповой">
    <div>
      <h1>Азиза Юсупова</h1>
      <p class="hero-role">Начинающий фронтенд-разработчик, Наманган</p>
    </div>
  </header>
  <main>
    <section class="card">
      <h2>Обо мне</h2>
      <p>Два года работала в районной библиотеке. Сейчас учусь создавать веб-страницы: моя цель - сделать удобный сайт для читателей.</p>
    </section>
    <section class="card">
      <h2>Мои навыки</h2>
      <ul class="skills">
        <li>HTML</li>
        <li>CSS</li>
        <li>Flexbox</li>
        <li>Основы Git</li>
      </ul>
    </section>
    <section class="card">
      <h2>Контакты</h2>
      <p>Если у вас есть предложение или вопрос, напишите:</p>
      <a class="button" href="mailto:aziza@example.com">Написать письмо</a>
    </section>
  </main>
  <footer class="footer">
    <p>2026, Азиза Юсупова</p>
  </footer>
</body>
</html>

При нажатии на ссылку mailto: открывается почтовая программа. Вместо example.com укажите свой адрес.

Шаг 3. CSS. Напишите в style.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #1f2937;
  background-color: #f7f5f0;
}

.hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px 24px;
  background-color: #1c3d86;
  color: #ffffff;
}

.hero-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
}

.hero h1 {
  margin: 0;
  font-size: 32px;
}

.hero-role {
  margin: 4px 0 0;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.card {
  background-color: #ffffff;
  border: 1px solid #e5e0d6;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.card h2 {
  margin-top: 0;
  color: #1c3d86;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.skills li {
  padding: 4px 14px;
  border-radius: 999px;
  background-color: #e0f2f1;
  color: #0b5f5c;
}

.button {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: #0e8581;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.button:hover {
  background-color: #0b6b68;
}

.footer {
  text-align: center;
  padding: 16px;
  color: #6b7280;
}

@media (max-width: 600px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero h1 {
    font-size: 26px;
  }
}

Шаг 4. Разбор. .hero h1 означает «h1 внутри .hero». max-width и margin: 0 auto у main ставят содержимое по центру и не дают строкам слишком растягиваться на широком экране. Список навыков с помощью Flexbox превратился в «значки», а flex-wrap переносит их на новую строку на узком экране. :hover — состояние при наведении мыши. Media query на телефоне располагает фото и имя друг под другом.

Шаг 5. Проверка и публикация. Проверьте вид на телефоне в DevTools, затем разместите страницу на GitHub Pages или Netlify. Готовую ссылку можно добавить в резюме — подробнее об этом в статье «Как создать портфолио».

Частые ошибки

Незакрытый тег. Если забыть </p> или </section>, следующие элементы «проваливаются» внутрь, и страница выглядит неожиданно. Аккуратные отступы (команда Format Document в VS Code) помогают найти ошибку.
Ошибка в пути к файлу. src и href указывают расположение файла относительно HTML-файла. Если картинка лежит в папке images, нужно писать images/aziza.jpg, а не просто aziza.jpg. Если изображение не появилось, поищите сообщение «404» на вкладке Console в DevTools.
Заглавные буквы в имени файла. Windows считает Aziza.JPG и aziza.jpg одним и тем же, а сервер хостинга — нет: картинка, которая работала на компьютере, пропадает в интернете. Называйте файлы и папки строчными латинскими буквами без пробелов.
Кеш. Вы изменили CSS, а страница прежняя. Браузер запомнил старый файл: обновите страницу полностью сочетанием Ctrl + F5 или Ctrl + Shift + R.
Мелкие ошибки в CSS. Забытая точка с запятой, имя класса без точки (card вместо .card) или несовпадение class="card" в HTML и .cards в CSS. В DevTools неверное правило отображается зачёркнутым или со значком предупреждения.
Забыли сохранить файл. Белый кружок на вкладке VS Code означает, что файл не сохранён. Можно включить File → Auto Save.

Практическое задание и чек-лист

Адаптируйте проект под себя:

Напишите своё имя, город и 3–4 предложения о себе.
Добавьте в список навыков не меньше пяти пунктов.
После «Обо мне» добавьте новый раздел с заголовком h2: «Мои интересы» или «Курсы, которые я прохожу».
Смените основной цвет: замените #1c3d86 на другой и проверьте, что текст читается.
Добавьте в «Контакты» вторую ссылку (например, на профиль в соцсети) и поставьте обе ссылки рядом с помощью Flexbox.
Посмотрите страницу в DevTools при ширине 375px.
Разместите страницу на бесплатном хостинге, отправьте ссылку близкому человеку и попросите открыть её с телефона.

Чек-лист

DOCTYPE, lang, charset и viewport на месте.
На странице один h1, заголовки идут по порядку.
У каждого содержательного изображения понятный alt.
Стили в отдельном файле style.css, с селекторами классов.
Имена файлов строчными буквами, пути верные.
На телефоне не появляется горизонтальная прокрутка.
Все ссылки работают, страница открывается в интернете.

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

Если хотите системно изучать веб-разработку с преподавателем, познакомьтесь с бесплатным направлением «Программирование» и другими учебными программами нашей ассоциации. Когда будете готовы, оставьте заявку — наши специалисты свяжутся с вами.