Краткий конспект по HTML

Что такое HTML

HTML (HyperText Markup Language) — язык разметки, которым описывают структуру веб-страницы. Браузер получает HTML от сервера и отображает его. Django в итоге почти всегда отдаёт именно HTML, а шаблоны Django — это HTML со вставками.

HTML состоит из тегов:

<p>Это абзац текста.</p>

• <p> — открывающий тег, </p> — закрывающий.
• Всё вместе (тег + содержимое) называют элементом.
• Некоторые теги не имеют пары: <br>, <img>, <input>.

Атрибуты

Атрибуты задают дополнительные свойства элемента:

<a href="https://djangoproject.com" target="_blank">Сайт Django</a>
<img src="/static/logo.png" alt="Логотип">

Самые частые: href, src, alt, class, id, name, type, value.

Структура документа

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Мой блог</title>
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <header>Шапка сайта</header>
  <main>
    <h1>Последние посты</h1>
    <article>...</article>
  </main>
  <footer>© 2026</footer>
</body>
</html>

• <head> — служебная информация: кодировка, заголовок вкладки, подключение стилей.
• <body> — всё, что видит пользователь.
• Семантические теги <header>, <main>, <article>, <footer>, <nav> описывают смысл блоков.

В Django этот «скелет» обычно выносят в базовый шаблон base.html, а каждая страница наследует его и заполняет только свою часть. Это мы разберём в уроках про шаблоны.

Текст и заголовки

<h1>Заголовок первого уровня</h1>
<h2>Второго уровня</h2>
<p>Абзац с <strong>важным</strong> и <em>выделенным</em> текстом.</p>

Заголовки бывают от <h1> до <h6>. На странице обычно один <h1>.

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

<a href="/posts/5/">Читать пост</a>
<img src="/media/cat.jpg" alt="Кот" width="300">

Путь, начинающийся с /, считается от корня сайта. Именно такие пути будут обрабатывать URL-маршруты Django.

Списки

<ul>            <!-- маркированный -->
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>            <!-- нумерованный -->
  <li>Установить Django</li>
  <li>Создать проект</li>
</ol>

В шаблонах Django списки часто генерируются циклом {% for %}.

Таблицы

<table>
  <thead>
    <tr><th>Имя</th><th>Email</th></tr>
  </thead>
  <tbody>
    <tr><td>Анна</td><td>anna@example.com</td></tr>
  </tbody>
</table>

<tr> — строка, <th> — ячейка заголовка, <td> — обычная ячейка.

Блочные контейнеры

<div> — универсальный блочный контейнер, <span> — строчный. Сами по себе ничего не значат, но к ним удобно привязывать стили через class:

<div class="card">
  <span class="badge">Новое</span>
</div>

Формы — самое важное для Django

Формы — способ отправить данные на сервер:

<form method="post" action="/comments/add/">
  <label for="name">Имя</label>
  <input type="text" id="name" name="name" required>

  <label for="body">Комментарий</label>
  <textarea id="body" name="body"></textarea>

  <select name="rating">
    <option value="5">Отлично</option>
    <option value="3">Нормально</option>
  </select>

  <input type="checkbox" name="subscribe" value="1"> Подписаться

  <button type="submit">Отправить</button>
</form>

Ключевые моменты:

• action — куда отправить данные (по умолчанию — на текущий адрес).
• method — get или post.
• name у поля — ключ, под которым значение придёт на сервер. Без name поле не отправится!
• В Django к POST-формам обязательно добавляют {% csrf_token %} — защиту от подделки запросов.

Немного о CSS

HTML отвечает за структуру, CSS — за внешний вид:

<style>
  .card { padding: 16px; border: 1px solid #ddd; border-radius: 8px; }
</style>

Позже вместо написания CSS с нуля мы подключим Bootstrap 5.

Итог

• HTML описывает структуру страницы тегами и атрибутами.
• Документ состоит из <head> и <body>.
• Ссылки — <a href>, картинки — <img src>, списки — <ul>/<ol>/<li>, таблицы — <table>.
• Формы отправляют данные на сервер; у каждого поля должен быть name.