{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "64903cf7",
   "metadata": {},
   "source": [
    "# 22-02 · Структура HTML и стили CSS\n",
    "\n",
    "Практика к разделам [«HTML: структура веб-страницы»](../../site/chapters/glava-22/22-02-html.html) и [«CSS: оформление и расположение элементов веб-страницы»](../../site/chapters/glava-22/22-03-css.html)."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d07cde20",
   "metadata": {},
   "source": [
    "## Цель\n",
    "\n",
    "Увидеть, как HTML-теги превращаются в структуру страницы, а CSS меняет её внешний вид — прямо внутри ноутбука."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "4cd6b17b",
   "metadata": {},
   "source": [
    "## Рабочий пример — HTML без стилей"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "982af2e0",
   "metadata": {},
   "outputs": [],
   "source": [
    "from IPython.display import HTML, display\n",
    "\n",
    "html_bez_stilej = \"\"\"\n",
    "<h1>Привет, мир!</h1>\n",
    "<p>Это мой первый сайт на HTML.</p>\n",
    "<ul>\n",
    "  <li>Учу Python</li>\n",
    "  <li>Учу HTML</li>\n",
    "</ul>\n",
    "\"\"\"\n",
    "\n",
    "display(HTML(html_bez_stilej))\n",
    "print(\"Длина HTML-кода:\", len(html_bez_stilej), \"символов\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "810a59f9",
   "metadata": {},
   "source": [
    "## Проверка результата"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e08692aa",
   "metadata": {},
   "outputs": [],
   "source": [
    "assert \"<h1>\" in html_bez_stilej\n",
    "assert \"<li>Учу Python</li>\" in html_bez_stilej\n",
    "print(\"Верно: страница содержит заголовок и оба пункта списка.\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6b859edd",
   "metadata": {},
   "source": [
    "## Эксперимент — та же страница со стилями CSS"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a522d119",
   "metadata": {},
   "outputs": [],
   "source": [
    "html_so_stilyami = \"\"\"\n",
    "<style>\n",
    "  .demo-blok { font-family: sans-serif; background: #f7f7fb; padding: 12px; }\n",
    "  .demo-blok h1 { color: #4a2fbd; }\n",
    "  .demo-blok p { line-height: 1.6; }\n",
    "</style>\n",
    "<div class=\"demo-blok\">\n",
    "  <h1>Привет, мир!</h1>\n",
    "  <p>Теперь у страницы есть цвет, фон и аккуратные отступы.</p>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "display(HTML(html_so_stilyami))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3fd64da4",
   "metadata": {},
   "source": [
    "## Задание ★ Базовая практика\n",
    "\n",
    "Добавьте в CSS ещё одно правило — измените цвет текста внутри <li> на зелёный, — и убедитесь, что строка появилась в коде."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2d6bb408",
   "metadata": {},
   "outputs": [],
   "source": [
    "html_svoj_stil = \"\"\"\n",
    "<style>\n",
    "  .demo-blok2 li { color: green; }\n",
    "</style>\n",
    "<div class=\"demo-blok2\">\n",
    "  <ul><li>Зелёный пункт списка</li></ul>\n",
    "</div>\n",
    "\"\"\"\n",
    "\n",
    "display(HTML(html_svoj_stil))\n",
    "\n",
    "assert \"color: green\" in html_svoj_stil\n",
    "print(\"Верно: правило для зелёного текста добавлено.\")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Cartesian Python 3.14",
   "language": "python",
   "name": "cartesian-python314"
  },
  "language_info": {
   "name": "python",
   "version": "3.14.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}