Как создать сайт на HTML: структура страницы, теги, CSS и публикация

Из чего состоит HTML-страница: doctype, head и body#

HTML это язык разметки: текст оборачивают в теги, а браузер по ним понимает, где заголовок, абзац, ссылка и картинка. Тег пишут в угловых скобках, у большинства есть открывающая и закрывающая часть: <p>текст</p>.

<!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>
    <h1>Кофейня Зерно</h1>
    <nav><a href="menu.html">Меню</a> <a href="kontakty.html">Контакты</a></nav>
  </header>
  <main>
    <p>Свежая обжарка и завтраки каждый день.</p>
    <img src="cup.jpg" alt="Чашка кофе на столе" width="600" height="400">
    <ul>
      <li>Эспрессо</li>
      <li>Капучино</li>
    </ul>
  </main>
  <footer>Открыто ежедневно</footer>
</body>
</html>

Как оформить HTML-страницу через CSS: файл style.css#

CSS описывает внешний вид. Правило состоит из селектора (какой элемент красим) и свойств в фигурных скобках. Файл style.css лежит рядом с index.html и подключается строкой link в разделе head, как в примере выше.

body { font-family: Arial, sans-serif; max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { color: #5b3a1e; }
nav a { margin-right: 12px; }
img { max-width: 100%; height: auto; }

Чего чистый HTML не умеет: формы, база данных и общие блоки#

Когда страниц становится больше десятка или нужен блог, переходят на CMS или конструктор.

Как мы проверяли

Источники цифр на этой странице: Конструктор сайтов Таймвеб, timeweb.com/ru/services/constructor, проверено 24 октября 2026; Виртуальный хостинг Таймвеб, timeweb.com/ru/services/hosting, проверено 24 октября 2026; Домены Таймвеб, timeweb.com/ru/services/domains, проверено 24 октября 2026; MDN Web Docs: HTML, developer.mozilla.org/ru/docs/Web/HTML, проверено 24 октября 2026; MDN Web Docs: CSS, developer.mozilla.org/ru/docs/Web/CSS, проверено 24 октября 2026; W3C Markup Validation Service, validator.w3.org, проверено 24 октября 2026.

Что посмотреть дальше