{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n(продолжение)\n\n","type":"unstyled","key":"b2kos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Глава 9:\nПростые таблицы (для наглядности)","type":"header-three","key":"ev1ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"9.1. Создаём таблицу: теги , (строка),

(ячейка)\n\n","type":"header-three","key":"5oovm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Введение: Организуем данные в стройные ряды и колонки","type":"unstyled","key":"6kuu7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таблицы в HTML — это мощный инструмент для представления структурированной информации. Они идеально подходят для расписаний, прайс-листов, сравнения характеристик и любых данных, которые имеют четкую строковую и столбцовую организацию.","type":"unstyled","key":"dr34f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fjmhc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Часть 1: Базовая структура HTML-таблицы","type":"header-three","key":"9mhbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"e3jgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Основные теги таблицы:","type":"header-three","key":"1f0r6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — контейнер для всей таблицы","type":"unstyled","key":"3e6qn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" (table row) — строка таблицы","type":"unstyled","key":"agj79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

(table data) — ячейка с данными","type":"unstyled","key":"60dbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"f76p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Простейшая таблица 2×2:","type":"header-three","key":"505vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9gkoa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

","type":"unstyled","key":"du8f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"14lbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Часть 2: Визуализация структуры таблицы","type":"header-three","key":"e8vgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fvvvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Как браузер \"видит\" таблицу:","type":"header-three","key":"9927t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"ftv23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ← НАЧАЛО ТАБЛИЦЫ \n ← ПЕРВАЯ СТРОКА \n ← ЯЧЕЙКА A1 \n ← ЯЧЕЙКА Б1 \n ← ЯЧЕЙКА В1 \n ← КОНЕЦ СТРОКИ \n ← ВТОРАЯ СТРОКА \n ← ЯЧЕЙКА A2 \n ← ЯЧЕЙКА Б2 \n ← ЯЧЕЙКА В2 \n ← КОНЕЦ СТРОКИ \n

А1	Б1	В1
А2	Б2	В2

← КОНЕЦ ТАБЛИЦЫ","type":"unstyled","key":"elkd1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fi661"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Часть 3: Практические примеры таблиц","type":"header-three","key":"44c9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6hpm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Пример 1: Расписание полива растений","type":"header-three","key":"857kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"2458h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Растение	Понедельник	Среда	Пятница
Розы	✅ Полить	❌ Не поливать	✅ Полить
Помидоры	✅ Полить	✅ Полить	✅ Полить
Кактусы	❌ Не поливать	❌ Не поливать	✅ Полить

","type":"unstyled","key":"f9rkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"99k2m"},{"data":{"image":{"id":"692596011443433a3808a6c1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5oefl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bbf87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Пример 2: Список покупок для сада","type":"header-three","key":"3ml8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5iem9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

№	Товар	Количество	Цена
1	Удобрение для роз	2 шт.	350 руб.
2	Семена помидоров	1 упаковка	120 руб.
3	Садовые перчатки	1 пара	280 руб.

","type":"unstyled","key":"c7kl1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3h0c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Пример 3: График занятий HTML","type":"header-three","key":"1afl9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"fk4n3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День недели	Тема занятия	Время
Понедельник	Изучение тегов	14:00 - 15:30
Среда	Работа с текстом	14:00 - 16:00
Пятница	Практика: создание страниц	15:00 - 17:00

","type":"unstyled","key":"97avu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"f7dbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Часть 4: Атрибут border — границы таблицы","type":"header-three","key":"2a31m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"403ar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Без границ:","type":"header-three","key":"ei087"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"4q8dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":9,"style":"ITALIC"}],"text":" \n \n

","type":"unstyled","key":"el1i6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9ncqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"С тонкой границей:","type":"header-three","key":"5p0m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"a874i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":20,"style":"ITALIC"}],"text":" \n \n

","type":"unstyled","key":"7jmq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ber2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"С толстой границей:","type":"header-three","key":"8tt4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"6lth8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":20,"style":"ITALIC"}],"text":" \n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Ячейка A1	Ячейка A2	Ячейка A3
Ячейка B1	Ячейка B2	Ячейка B3
Ячейка C1	Ячейка C2	Ячейка C3

Попробуйте изменить содержимое ячеек!

\n \n","type":"unstyled","key":"d9286"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"7khel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Часть 6: Объединение ячеек","type":"header-three","key":"dkv3c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"e5qri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Объединение по горизонтали (colspan):","type":"header-three","key":"517uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"de8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n

Эта ячейка занимает две колонки
Ячейка 1	Ячейка 2

","type":"unstyled","key":"725gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dlo6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Объединение по вертикали (rowspan):","type":"header-three","key":"1ls73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"2mrgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n

Эта ячейка занимает две строки	Ячейка 1
Ячейка 2

","type":"unstyled","key":"d5ec3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"786cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 7: Практическое задание","type":"header-three","key":"b3862"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9pqvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Задание 1: Создайте таблицу распорядка дня","type":"header-three","key":"eo5ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"ejgeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":331,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Время	Понедельник	Вторник	Среда
8:00 - 10:00	Зарядка, завтрак	Зарядка, завтрак	Зарядка, завтрак
10:00 - 12:00	Работа в саду	Изучение HTML	Работа в саду

","type":"unstyled","key":"51okg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"csfke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Задание 2: Таблица любимых книг","type":"header-three","key":"4fro3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"bc7iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":208,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Автор	Название книги	Год прочтения	Оценка
Александр Дюма	Три мушкетера	2023	★★★★★

","type":"unstyled","key":"7cdl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"afjsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Часть 8: Частые ошибки и лучшие практики","type":"header-three","key":"1pll7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"c5bfu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"❌ НЕПРАВИЛЬНО:","type":"header-three","key":"d509o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"dd607"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"ITALIC"},{"length":30,"offset":72,"style":"ITALIC"},{"length":24,"offset":115,"style":"ITALIC"},{"length":30,"offset":194,"style":"ITALIC"}],"text":" \n \n \n

Ячейка без строки

\n\n \n \n \n \n

Ячейка 1 \n

Ячейка 2 \n

","type":"unstyled","key":"85lkh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"✅ ПРАВИЛЬНО:","type":"header-three","key":"1ce5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"eg4t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"ITALIC"},{"length":32,"offset":102,"style":"ITALIC"}],"text":" \n \n \n \n \n \n

Ячейка 1

Ячейка 2

\n\n \n \n \n \n \n \n \n \n \n \n

Заголовок 1	Заголовок 2
Данные 1	Данные 2

","type":"unstyled","key":"8qfii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"lqom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Часть 9: Семантика и доступность","type":"header-three","key":"d30r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"cbr3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Тег

для заголовков:","type":"header-three","key":"4uh3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"cbp5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":36,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n

Название	Цена	Количество
Помидоры	150 руб/кг	2 кг

","type":"unstyled","key":"80nei"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"a5c4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Scope для скринридеров:","type":"header-three","key":"74kp8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5dtc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":47,"style":"ITALIC"},{"length":25,"offset":147,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n

Продукт	Цена
Хлеб	50 руб.

","type":"unstyled","key":"a5ssr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4969l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-three","key":"fj02s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Что Вы теперь умеете:","type":"unstyled","key":"19usj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Создавать базовые HTML-таблицы","type":"unstyled","key":"4h62r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Использовать теги , ,

","type":"unstyled","key":"9vd75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Добавлять границы с помощью атрибута border","type":"unstyled","key":"1rjtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Создавать сложные таблицы с заголовками","type":"unstyled","key":"de4ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Организовывать данные в стройные структуры","type":"unstyled","key":"1p3u3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Ключевые преимущества таблиц:","type":"unstyled","key":"7vi11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCA Структурированность — четкая организация данных","type":"unstyled","key":"fp3sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCB Сравнимость — легко сравнивать значения","type":"unstyled","key":"1jqrr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Наглядность — информация воспринимается легче","type":"unstyled","key":"8lkcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"♿ Доступность — правильная семантика для скринридеров","type":"unstyled","key":"a36s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCF1 Адаптивность — можно сделать отзывчивой","type":"unstyled","key":"1efai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Когда использовать таблицы:","type":"unstyled","key":"ev8u2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Табличные данные (расписания, прайс-листы)","type":"unstyled","key":"1h5j9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Сравнительные характеристики","type":"unstyled","key":"8acne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Статистическая информация","type":"unstyled","key":"c9gkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Структурированные списки","type":"unstyled","key":"ej9od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Когда НЕ использовать таблицы:","type":"unstyled","key":"4281g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Для верстки страницы (используйте CSS)","type":"unstyled","key":"qnhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Для простого расположения элементов","type":"unstyled","key":"f3np3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Когда данные не имеют табличной природы","type":"unstyled","key":"4ib87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Следующие шаги:","type":"unstyled","key":"6frj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попрактикуйтесь с простыми таблицами 2×2 и 3×3","type":"unstyled","key":"bcmh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте таблицу своего недельного расписания","type":"unstyled","key":"71dj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте таблицу на свою главную страницу","type":"unstyled","key":"5g5jf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Экспериментируйте с объединением ячеек","type":"unstyled","key":"4i730"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь Вы можете создавать структурированные таблицы для организации любой информации на Вашем сайте! Это особенно полезно для расписаний, списков, сравнений и других табличных данных.","type":"unstyled","key":"8pjb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\n9.2. Заголовки столбцов в таблице: тег

\n\n","type":"header-three","key":"5a0cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":61,"offset":0,"style":"BOLD"}],"text":"Введение: Делаем таблицы понятными и семантически правильными","type":"unstyled","key":"919ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег

(table header) — это специальный тег для создания заголовков в таблицах. Он не только визуально выделяет заголовки, но и добавляет семантический смысл, помогая браузерам, поисковым системам и скринридерам правильно понимать структуру ваших данных.","type":"unstyled","key":"14unj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"159jb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Часть 1: Что такое тег

и зачем он нужен?","type":"header-three","key":"fqrf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Основное назначение:","type":"header-three","key":"2b6hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— создает ячейку-заголовок для столбца или строки","type":"unstyled","key":"4sqc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

— создает обычную ячейку с данными","type":"unstyled","key":"flbcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"asl2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Визуальная разница:","type":"header-three","key":"25ins"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию браузер отображает

:","type":"unstyled","key":"3jfqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Жирным шрифтом","type":"unstyled","key":"ckgl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Выравниванием по центру","type":"unstyled","key":"be5p0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Семантически как заголовок","type":"unstyled","key":"3iveu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fvj8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Часть 2: Сравнение

","type":"header-three","key":"a7e33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5544e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Без

(неправильно):","type":"header-three","key":"1hc5r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"13ii2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":64,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n

Растение	Полив	Удобрение
Розы	Каждый день	Раз в неделю

","type":"unstyled","key":"5oj5u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"С

(правильно):","type":"header-three","key":"34ore"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5vove"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":49,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n

Растение	Полив	Удобрение
Розы	Каждый день	Раз в неделю

","type":"unstyled","key":"5ru94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"6b63i"},{"data":{"image":{"id":"69259651ea8b2a28787736cc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"akhml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6v4ce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Часть 3: Практические примеры с

","type":"header-three","key":"d22g5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"57cd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Пример 1: Таблица ухода за растениями","type":"header-three","key":"17cgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"6l3dg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Название растения	Частота полива	Лучшее время для полива	Особые указания
Розы	Каждый день	Утро (6:00-8:00)	Не поливать листья
Помидоры	Через день	Вечер (18:00-20:00)	Поливать под корень
Кактусы	Раз в неделю	Утро	Маленькими порциями

","type":"unstyled","key":"adps5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1u9l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Пример 2: Расписание занятий","type":"header-three","key":"5jvbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"2uqv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Время	Понедельник	Среда	Пятница
10:00-11:30	HTML: основы	CSS: стили	Практика
14:00-15:30	Садоводство	Чтение	Отдых

","type":"unstyled","key":"1g9im"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fc7v3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Пример 3: Список покупок для сада","type":"header-three","key":"6os0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"6k96f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

№	Наименование	Количество	Примерная цена	Приоритет
1	Удобрение для роз	2 кг	450 руб.	Высокий
2	Семена огурцов	1 упаковка	85 руб.	Средний
3	Садовые перчатки	1 пара	320 руб.	Низкий

","type":"unstyled","key":"1d5gu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3frbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Часть 4: Атрибут scope — для улучшения доступности","type":"header-three","key":"3nvu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"464se"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Что такое scope:","type":"header-three","key":"4q5dm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Атрибут scope указывает, к чему относится заголовок — к столбцу или строке.","type":"unstyled","key":"622k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"biuf3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"scope=\"col\" — заголовок столбца:","type":"header-three","key":"2655j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"d76mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":61,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n

Растение	Январь	Февраль	Март
Розы	Обрезка	Укрытие	Пробуждение

","type":"unstyled","key":"dgn1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5k1is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"scope=\"row\" — заголовок строки:","type":"header-three","key":"e6cc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"81lu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":138,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n

Месяц	Работы в саду
Январь	Планирование, заказ семян
Февраль	Посев рассады

","type":"unstyled","key":"cmevr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1mt0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Часть 5: Полная страница с семантическими таблицами","type":"header-three","key":"9lnjk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"dpnd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":1267,"style":"ITALIC"},{"length":44,"offset":2253,"style":"ITALIC"},{"length":47,"offset":3099,"style":"ITALIC"},{"length":20,"offset":3953,"style":"ITALIC"},{"length":29,"offset":4611,"style":"ITALIC"}],"text":" \n \n \nСемантические таблицы с тегом<th> \n \n \n \n \n

\uD83C\uDFAF Заголовки таблиц: тег

\n\n

\n\uD83D\uDCA1 Важно: Тег

не только визуально выделяет заголовки, но и добавляет семантический смысл для браузеров и скринридеров. \n \n\n \n

\uD83C\uDF37 Годовой календарь садовода

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Сезон	Основные работы	Посадка	Уход	Сбор урожая
Весна (Март-Май)	Подготовка почвы, посев	Овощи, цветы	Полив, прополка	Редис, салат
Лето (Июнь-Август)	Уход за растениями	Поздние культуры	Подкормка, защита	Огурцы, помидоры
Осень (Сентябрь-Ноябрь)	Уборка, подготовка к зиме	Озимые культуры	Обрезка, укрытие	Яблоки, груши
Зима (Декабрь-Февраль)	Планирование, ремонт	Рассада в доме	Защита от морозов	Хранение урожая

\n\n \n

\uD83C\uDF3F Сравнение сортов помидоров

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Сорт	Срок созревания	Вкус	Урожайность	Устойчивость к болезням	Рекомендации
Бычье сердце	120-130 дней	Отличный	Средняя	Средняя	Для салатов, крупные плоды
Черри	90-100 дней	Сладкий	Высокая	Высокая	Для закусок, консервации
Де Барао	115-125 дней	Кисло-сладкий	Очень высокая	Высокая	Универсальный, для всего

\n\n \n

\uD83D\uDCBB План обучения веб-разработке

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Этап	Технология	Срок изучения	Что изучим	Практический проект	Статус
1	HTML	3-4 недели	Структура, теги, семантика	Личный сайт-визитка	✅ Завершено
2	CSS	4-5 недель	Стили, макет, анимации	Красивое оформление сайта	\uD83D\uDD04 В процессе
3	JavaScript	6-8 недель	Интерактивность, логика	Интерактивные элементы	⏳ В планах

\n\n \n

\uD83D\uDCDD Пример кода с

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n

Растение	Полив	Удобрение
Розы	Каждый день	Раз в неделю

\n\n

\n\uD83C\uDFAF Ключевые моменты: \n

Используйте

для заголовков \n

Добавляйте scope=\"col\" для заголовков столбцов

Добавляйте scope=\"row\" для заголовков строк

Это улучшает доступность для скринридеров

\n \n \n \n\n \n

\uD83C\uDFAF Практическое задание

\n\n

Создайте таблицу своих ежедневных дел:

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Время	Понедельник	Вторник	Среда
8:00-10:00	Завтрак, зарядка	Завтрак, зарядка	Завтрак, зарядка
10:00-12:00	▼ Ваши занятия	▼ Ваши занятия	▼ Ваши занятия
14:00-16:00	▼ Ваши занятия	▼ Ваши занятия	▼ Ваши занятия

\n\n

Задание: Замените \"▼ Ваши занятия\" на свои реальные дела!

\n \n","type":"unstyled","key":"7rmvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"44hp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Часть 6: Стилизация заголовков

","type":"header-three","key":"b0j8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6lt9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Базовые CSS-стили:","type":"header-three","key":"1ot8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"ct9tr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":36,"style":"ITALIC"},{"length":17,"offset":85,"style":"ITALIC"},{"length":18,"offset":134,"style":"ITALIC"},{"length":28,"offset":184,"style":"ITALIC"},{"length":24,"offset":244,"style":"ITALIC"},{"length":13,"offset":300,"style":"ITALIC"}],"text":"th { \nbackground-color: #4CAF50; /* Зеленый фон */ \ncolor: white; /* Белый текст */ \nfont-weight: bold; /* Жирный шрифт */ \ntext-align: center; /* Выравнивание по центру */ \npadding: 12px; /* Внутренние отступы */ \nborder: 1px solid #ddd; /* Граница */ \n}","type":"unstyled","key":"65st3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fvph8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Разные цвета для разных типов заголовков:","type":"header-three","key":"ch30o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"bk8bh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"ITALIC"},{"length":11,"offset":75,"style":"ITALIC"},{"length":21,"offset":92,"style":"ITALIC"},{"length":15,"offset":164,"style":"ITALIC"}],"text":"/* Заголовки столбцов */ \nth[scope=\"col\"] { \nbackground-color: #2196F3; /* Синий */ \n} \n\n/* Заголовки строк */ \nth[scope=\"row\"] { \nbackground-color: #FF9800; /* Оранжевый */ \ntext-align: left; \n}","type":"unstyled","key":"9674b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3t8i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Часть 7: Лучшие практики и частые ошибки","type":"header-three","key":"3s9pn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"✅ ПРАВИЛЬНО:","type":"header-three","key":"17o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"8hptn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n \n \n \n \n \n

Название	Цена	Количество
Помидоры	150 руб/кг	2 кг

","type":"unstyled","key":"2q9ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9ljis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"❌ НЕПРАВИЛЬНО:","type":"header-three","key":"9f9mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"70p4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"ITALIC"},{"length":24,"offset":91,"style":"ITALIC"},{"length":25,"offset":171,"style":"ITALIC"},{"length":29,"offset":236,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n

Название	Цена	Количество

\n\n \n \n \n \n \n \n

Название	Цена

","type":"unstyled","key":"a6vgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"283v1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Часть 8: Доступность для скринридеров","type":"header-three","key":"dhg6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Как скринридеры читают таблицы:","type":"header-three","key":"8bvtq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":1,"offset":8,"style":"BOLD"}],"text":"Без

: \"Таблица с 3 столбцами и 4 строками\"","type":"unstyled","key":"3oiq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":1,"offset":6,"style":"BOLD"}],"text":"С

: \"Таблица: Растение, Полив, Удобрение. Строка 1: Розы, Каждый день, Раз в неделю\"","type":"unstyled","key":"dvsg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"d3jji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Правильная структура для доступности:","type":"header-three","key":"7g03o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5uf67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n

Растение	Полив	Удобрение
Розы	Каждый день	Раз в неделю

","type":"unstyled","key":"68r24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9anch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Часть 9: Практическое задание для закрепления","type":"header-three","key":"78ud1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5s1q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Задание: Создайте таблицу ваших увлечений","type":"header-three","key":"f6347"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"fqkre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Увлечение	Как часто занимаюсь	Любимый аспект	Что планирую изучить
Садоводство	Ежедневно	Выращивание роз	Новые сорта пионов
Веб-разработка	3 раза в неделю	Создание сайтов	CSS и JavaScript
Чтение	Каждый вечер	Исторические романы	Современную литературу

","type":"unstyled","key":"ac7of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"a00rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-three","key":"72bbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Что Вы теперь умеете:","type":"unstyled","key":"dbkec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Использовать тег

для заголовков таблиц","type":"unstyled","key":"dkf88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Различать

по назначению","type":"unstyled","key":"6r1lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Применять атрибут scope для доступности","type":"unstyled","key":"6ols3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Создавать семантически правильные таблицы","type":"unstyled","key":"3dg7g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Стилизовать заголовки для лучшего восприятия","type":"unstyled","key":"3onu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":1,"offset":26,"style":"BOLD"}],"text":"Ключевые преимущества

:","type":"unstyled","key":"s1f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"♿ Доступность — помощь скринридерам","type":"unstyled","key":"do2bh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDD0D SEO — лучшая индексация поисковыми системами","type":"unstyled","key":"ctm3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFA8 Визуальное выделение — понятная структура","type":"unstyled","key":"5p85c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCA Семантика — ясное назначение элементов","type":"unstyled","key":"2dm8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCBB Единообразие — стандартное поведение в браузерах","type":"unstyled","key":"bak3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"},{"length":1,"offset":34,"style":"BOLD"}],"text":"Золотые правила использования

:","type":"unstyled","key":"4f03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"},{"length":15,"offset":23,"style":"BOLD"}],"text":"Всегда используйте

для заголовков","type":"unstyled","key":"cakhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":24,"offset":22,"style":"BOLD"}],"text":"Добавляйте scope=\"col\" для заголовков столбцов","type":"unstyled","key":"2rtt9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":21,"offset":22,"style":"BOLD"}],"text":"Добавляйте scope=\"row\" для заголовков строк","type":"unstyled","key":"e9h72"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"Используйте осмысленные и понятные заголовки","type":"unstyled","key":"8dlou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Тестируйте со скринридерами для проверки доступности","type":"unstyled","key":"fc8lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Помните: Правильное использование

превращает Вашу таблицу из простого набора данных в хорошо структурированную, доступную и профессиональную информацию!","type":"unstyled","key":"9qj5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь Ваши таблицы будут не только красивыми, но и семантически правильными, что особенно важно для пользователей с ограниченными возможностями и для поисковых систем.","type":"unstyled","key":"fl85b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\n9.3. Простая рамка для таблицы\n\n","type":"header-three","key":"74as8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"Введение: Делаем таблицы видимыми и аккуратными","type":"unstyled","key":"a6lfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рамка вокруг таблицы — это не просто декоративный элемент. Она помогает визуально отделить таблицу от остального контента, делает данные более читаемыми и создает четкую структуру. Давайте научимся управлять рамками таблиц!","type":"unstyled","key":"eh0h4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"cmdnv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Часть 1: Базовые способы создания рамки","type":"header-three","key":"5h0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dgd3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Способ 1: Атрибут border (самый простой)","type":"header-three","key":"5eofa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"3emg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n

Растение	Полив
Розы	Каждый день

","type":"unstyled","key":"9g18b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"9q0pc"},{"data":{"image":{"id":"692596aa107d534395307a57"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e629q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d095d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Разные значения border:","type":"header-three","key":"fhlpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"rfu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":20,"style":"ITALIC"},{"length":22,"offset":63,"style":"ITALIC"},{"length":22,"offset":107,"style":"ITALIC"},{"length":18,"offset":151,"style":"ITALIC"}],"text":" \n

","type":"unstyled","key":"6ds7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bga3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Часть 2: CSS-стили для продвинутого оформления","type":"header-three","key":"43o0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9fvem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Способ 2: CSS свойство border","type":"header-three","key":"dv9em"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"eko21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":42,"style":"ITALIC"}],"text":"

\n \n

","type":"unstyled","key":"ah6br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fn1dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Разбор CSS border:","type":"header-three","key":"1887k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"css","type":"unstyled","key":"4ofic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":26,"style":"ITALIC"},{"length":22,"offset":30,"style":"ITALIC"},{"length":31,"offset":54,"style":"ITALIC"},{"length":19,"offset":87,"style":"ITALIC"},{"length":2,"offset":108,"style":"ITALIC"}],"text":"border: 2px solid black; \n/* \n2px - толщина рамки \nsolid - стиль линии (сплошная) \nblack - цвет рамки \n*/","type":"unstyled","key":"cvug3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"c9mcc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Часть 3: Различные стили рамок","type":"header-three","key":"bi9ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"esdm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Сплошная рамка (solid):","type":"header-three","key":"eqva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"76mmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dojnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"rv0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dn4ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"66o00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eodch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"5klp9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сплошная синяя рамка","type":"unstyled","key":"1brij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"16ptv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"avuiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Пунктирная рамка (dashed):","type":"header-three","key":"4gj1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"cvk3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d1252"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"4t1gk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ecu88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"89n5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cgv5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"9c6us"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пунктирная оранжевая рамка","type":"unstyled","key":"266k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"816n1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1e3v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Точечная рамка (dotted):","type":"header-three","key":"c9kos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"escq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"406k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"3at5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eej33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3pjar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4o17c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"eb83i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Точечная зеленая рамка","type":"unstyled","key":"3cdpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"91k19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"e5mu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Двойная рамка (double):","type":"header-three","key":"fdc25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"23j94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2q0d5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Двойная фиолетовая рамка

","type":"unstyled","key":"ee5m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"7prhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Часть 4: Полная страница с примерами рамок","type":"header-three","key":"6jsoj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"e9gqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":770,"style":"ITALIC"},{"length":46,"offset":1184,"style":"ITALIC"},{"length":28,"offset":1754,"style":"ITALIC"},{"length":23,"offset":1857,"style":"ITALIC"},{"length":25,"offset":2109,"style":"ITALIC"},{"length":23,"offset":2372,"style":"ITALIC"},{"length":22,"offset":2629,"style":"ITALIC"},{"length":48,"offset":2894,"style":"ITALIC"},{"length":35,"offset":5000,"style":"ITALIC"},{"length":26,"offset":5108,"style":"ITALIC"},{"length":37,"offset":5648,"style":"ITALIC"},{"length":18,"offset":6167,"style":"ITALIC"}],"text":" \n \n \nРамки для таблиц \n \n \n \n \n

\uD83C\uDFA8 Рамки для HTML-таблиц

\n\n

\n\uD83D\uDCA1 Совет: Рамка делает таблицу более читаемой и визуально привлекательной. Выбирайте стиль, который лучше всего подходит для Вашего контента! \n

\n\n \n

1. Простая рамка через атрибут border

\n\n

\n \n \n \n \n \n \n \n \n \n

Растение	Полив
Розы	Каждый день

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Растение	Полив	Удобрение
Розы	Каждый день	Раз в неделю
Помидоры	Через день	Раз в 2 недели

Растение	Понедельник	Среда	Пятница	Воскресенье
Розы	✅ Полить	❌ Не поливать	✅ Полить	✅ Полить
Помидоры	✅ Полить	✅ Полить	✅ Полить	✅ Полить
Кактусы	❌ Не поливать	❌ Не поливать	❌ Не поливать	✅ Полить

\n\n

\n \n \n \n \n \n \n

Растение

\n\n

\nSolid
сплошная \n

\nDashed
пунктирная \n

\nDotted
точечная \n

\nDouble
двойная \n

\n\n

\n\uD83D\uDCCB Быстрые примеры: \n

border: 1px solid black; - черная сплошная
border: 2px dashed red; - красная пунктирная
border: 3px dotted green; - зеленая точечная
border: 4px double blue; - синяя двойная

\n \n","type":"unstyled","key":"d5g4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5ko1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Часть 5: Важные CSS-свойства для рамок","type":"header-three","key":"3gi8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6pmge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"border-collapse — объединение границ","type":"header-three","key":"tgig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"f0r1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dc9og"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"collapse — границы ячеек объединяются (рекомендуется)","type":"unstyled","key":"bgtij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"separate — границы ячеек разделены (по умолчанию)","type":"unstyled","key":"egs6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"d9grv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Сравнение:","type":"header-three","key":"et8ff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9qi2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"},{"length":34,"offset":172,"style":"ITALIC"}],"text":" \n

\n \n

Ячейка 1

\n\n \n \n \n

Ячейка 1

\n \n

\n \n","type":"unstyled","key":"4qu33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6mcc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Часть 7: Частые ошибки и решения","type":"header-three","key":"76ts6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"59cds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Ошибка 1: Двойные границы","type":"header-three","key":"8767f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"aal6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"}],"text":" \n","type":"unstyled","key":"ds813"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: Используйте либо атрибут, либо CSS, но не оба одновременно.","type":"unstyled","key":"djual"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"47tog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Ошибка 2: Невидимая таблица","type":"header-three","key":"pnkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"c75kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"}],"text":" \n

","type":"unstyled","key":"6dpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: Используйте контрастный цвет.","type":"unstyled","key":"7hh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"a57t5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Ошибка 3: Слишком толстая рамка","type":"header-three","key":"3e4rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"18q03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"45qp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Решение: Для большинства таблиц достаточно 1-3px.","type":"unstyled","key":"35cum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ft41p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Часть 8: Полезные советы","type":"header-three","key":"6bs0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dqt9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Совет 1: Используйте border-collapse","type":"header-three","key":"ajohk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всегда добавляйте border-collapse: collapse; для аккуратного вида:","type":"unstyled","key":"c1mah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"64ljc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"79cbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1hi9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Совет 2: Сочетайте с отступами","type":"header-three","key":"8sd27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"501kv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n \n \n \n

Текст с отступами

","type":"unstyled","key":"a26va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"43l57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Совет 3: Тестируйте на разных устройствах","type":"header-three","key":"e1jf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяйте, как выглядит рамка на:","type":"unstyled","key":"rb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компьютере","type":"unstyled","key":"16b9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Планшете","type":"unstyled","key":"ftpi1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Телефоне","type":"unstyled","key":"5ipfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"dv730"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-three","key":"a3h04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Что Вы теперь умеете:","type":"unstyled","key":"20td0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Создавать простые рамки через атрибут border","type":"unstyled","key":"vnf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Использовать CSS для продвинутых стилей рамок","type":"unstyled","key":"755u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Применять разные типы линий (solid, dashed,dotted, double)","type":"unstyled","key":"62mvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Управлять цветом и толщиной рамок","type":"unstyled","key":"7jd18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Создавать аккуратные таблицы с border-collapse","type":"unstyled","key":"3lm0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Ключевые методы создания рамок:","type":"unstyled","key":"a5c8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — самый простой способ","type":"unstyled","key":"cebcg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"style=\"border: 2px solid black;\" — гибкий CSS-способ","type":"unstyled","key":"1r0da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Комбинация с border-collapse: collapse; — для аккуратного вида","type":"unstyled","key":"2te5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Рекомендации по выбору рамки:","type":"unstyled","key":"8vkin"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFAF Для данных — тонкая сплошная рамка","type":"unstyled","key":"bu722"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFA8 Для акцента — цветная или толстая рамка","type":"unstyled","key":"co357"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCCB Для форм — пунктирная или точечная рамка","type":"unstyled","key":"99ni5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFC6 Для важных таблиц — двойная рамка","type":"unstyled","key":"d5pdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Помните: Хорошо подобранная рамка делает таблицу:","type":"unstyled","key":"38u9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCD6 Более читаемой","type":"unstyled","key":"7rdpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":2,"style":"BOLD"}],"text":"\uD83C\uDFA8 Визуально привлекательной","type":"unstyled","key":"b5bol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":3,"style":"BOLD"}],"text":"\uD83C\uDFD7️ Структурированной","type":"unstyled","key":"aim2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":2,"style":"BOLD"}],"text":"\uD83D\uDCBB Профессиональной","type":"unstyled","key":"40mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Следующие шаги:","type":"unstyled","key":"48d65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попрактикуйтесь с разными стилями рамок","type":"unstyled","key":"e36ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте таблицу с закругленными углами","type":"unstyled","key":"3dv8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэкспериментируйте с тенями вместо рамок","type":"unstyled","key":"7ik81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте рамки на свои реальные проекты","type":"unstyled","key":"3naiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Теперь Ваши таблицы будут не только функциональными, но и визуально привлекательными! Правильно подобранная рамка может значительно улучшить восприятие информации","type":"unstyled","key":"835u9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":82,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\n9.4. Практика: Создаём таблицу \"Расписание моих занятий\" или \"Расходы за неделю\"\n\n","type":"header-three","key":"q991"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Введение: Превращаем данные в удобные таблицы","type":"unstyled","key":"bde31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы закрепим все знания о таблицах на практике! Мы создадим полезные таблицы, которые Вы сможете использовать в повседневной жизни. Выберите тему, которая Вам ближе — расписание занятий или учёт расходов. Мы разберём обе, шаг за шагом.","type":"unstyled","key":"e8ra4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"7bubs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Часть 1: Базовая структура таблицы","type":"header-three","key":"495p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнём с простой таблицы, чтобы вспомнить основные теги.","type":"unstyled","key":"1ncsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"6snjm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n \n \n \n \n \n \n \n \n \n \n

День недели	Время	Занятие
Понедельник	10:00	Йога

","type":"unstyled","key":"beb6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"2ggdd"},{"data":{"image":{"id":"692597198da45f0626026675"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"23rb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2dkmj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Часть 2: Создаём расписание занятий","type":"header-three","key":"bihl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте сделаем полноценное расписание на неделю с временем и примечаниями.","type":"unstyled","key":"3r2e7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9cfni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День недели	Время	Занятие	Место
Понедельник	10:00 - 11:30	Йога для начинающих	Спортзал № 1
Вторник	14:00 - 16:00	Компьютерные курсы	Кабинет 205
Среда	11:00 - 13:00	Танцы	Актовый зал

","type":"unstyled","key":"fsu0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"bagmn"},{"data":{"image":{"id":"692597297a486119914ae089"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"difhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ektp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Часть 3: Создаём таблицу расходов за неделю","type":"header-three","key":"3l2n4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте сделаем таблицу для контроля бюджета с подсчётом итогов.","type":"unstyled","key":"77pl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"edoor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День	Категория расходов	Сумма (руб.)	Примечание
Понедельник	Продукты	1 850	Молоко, хлеб, овощи
Вторник	Коммунальные услуги	5 240	Квитанция №245
Среда	Транспорт	600	Проездной на месяц
ИТОГО за неделю:	7 690	-

","type":"unstyled","key":"stmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Результат:","type":"unstyled","key":"c3ipk"},{"data":{"image":{"id":"6925973cc41f695d38fc4977"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2hjhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9snhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Часть 4: Полная страница с примерами","type":"header-three","key":"58n1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"99g6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":1148,"style":"ITALIC"},{"length":30,"offset":1791,"style":"ITALIC"},{"length":36,"offset":2976,"style":"ITALIC"},{"length":38,"offset":5076,"style":"ITALIC"},{"length":44,"offset":6468,"style":"ITALIC"},{"length":36,"offset":7521,"style":"ITALIC"}],"text":" \n \n \nПрактика: Создаём полезные таблицы \n \n \n \n \n

\uD83D\uDCCA Практика: Создаём полезные таблицы

\n\n

\n\uD83D\uDCA1 Совет: Сегодня мы создадим таблицы, которые Вы сможете использовать в повседневной жизни! Выберите ту, что Вам больше нравится, или создайте обе. \n

\n\n \n

\uD83C\uDF93 Вариант 1: Расписание моих занятий

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День недели	Время	Занятие	Место
Понедельник	10:00 - 11:30	Йога для начинающих	Спортзал №1

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День недели	Время	Занятие	Место
Понедельник	10:00 - 11:30	Йога для начинающих	Спортзал №1
Вторник	14:00 - 16:00	Компьютерные курсы	Кабинет 205
Среда	11:00 - 13:00	Танцы	Актовый зал
Четверг	15:00 - 16:30	Шахматный клуб	Читальный зал

\n\n \n

\uD83D\uDCB0 Вариант 2: Учёт расходов за неделю

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

День	Категория расходов	Сумма (руб.)	Примечание
Понедельник	Продукты	1 850	Молоко, хлеб, овощи

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

День	Категория расходов	Сумма (руб.)	Примечание
Понедельник	Продукты	1 850	Молоко, хлеб, овощи
Вторник	Коммунальные услуги	5 240	Квитанция №245
Среда	Транспорт	600	Проездной на месяц
Четверг	Лекарства	450	Аптека №3
ИТОГО за неделю:	8 140	-

\n\n \n

\uD83C\uDFAF Практическое задание

\n\n

\n\uD83D\uDCDD Задание: Создайте свою собственную таблицу. Вы можете использовать шаблоны ниже или придумать свой вариант. \n

\n\n

Вариант А: Моё личное расписание

\n \n \n \n \n \n \n \n \n \n \n \n \n

День недели	Время	Моё занятие

\n\n

Вариант Б: Мои расходы

\n \n \n \n \n \n \n \n \n \n \n \n \n

Дата	На что потратил(а)	Сумма

\n\n \n

\uD83D\uDCA1 Советы для лучших таблиц

\n\n

\uD83C\uDFA8 Чередуйте строки

Добавляйте разный фон для четных и нечетных строк — так таблицу легче читать.

\nstyle=\"background-color: #f9f9f9;\" \n

\n\n

\uD83D\uDCD0 Выравнивайте числа

Числа в столбцах выравнивайте по правому краю — так их проще сравнивать.

\nstyle=\"text-align: right;\" \n

\n\n

\uD83D\uDCCA Добавляйте итоги

Для таблиц с числами всегда добавляйте строку с итоговой суммой.

\ncolspan=\"2\" \n

\n\n \n

\uD83D\uDCCB Шпаргалка по тегам таблиц

\n\n \n \n \n \n \n \n \n

Тег Описание Пример

 \n \nСоздает таблицу  \n \n \n \n \n... \n \n \n \n \n \n \n \n \n \n \n
Создает строку таблицы 
 \n Заголовок столбца (жирный) День
Обычная ячейка с данными Понедельник
 \n \n \n","type":"unstyled","key":"efeb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4lod6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 8: Что Вы теперь умеете","type":"header-three","key":"fpt5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"},{"length":53,"offset":54,"style":"BOLD"},{"length":40,"offset":111,"style":"BOLD"},{"length":51,"offset":155,"style":"BOLD"},{"length":37,"offset":210,"style":"BOLD"},{"length":39,"offset":251,"style":"BOLD"}],"text":"✅ Создавать полезные таблицы для повседневных нужд\n ✅ Проектировать структуру таблицы под конкретную задачу\n ✅ Добавлять заголовки, данные и примечания\n ✅ Использовать чередование цветов для удобства чтения\n ✅ Вычислять и показывать итоговые суммы\n ✅ Применять colspan для объединения ячеек","type":"unstyled","key":"63tlt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ej2se"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Часть 9: Следующие шаги","type":"header-three","key":"7qal3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Для дальнейшего развития:","type":"unstyled","key":"epn36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• Добавьте в таблицу раскрывающиеся подробности\n• Создайте таблицу с изображениями (расписание с фото преподавателей)\n• Сделайте интерактивную таблицу с возможностью сортировки\n• Добавьте подсветку важных строк (например, самые крупные расходы)","type":"unstyled","key":"di192"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCAA Практикуйтесь!","type":"unstyled","key":"49qdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте таблицу для:\n• Списка дней рождения родных\n• Графика приема лекарств\n• Плана ухода за растениями\n• Расписания телепередач","type":"unstyled","key":"6kvsf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":9,"style":"BOLD"}],"text":"Помните: Лучшая таблица — та, которую Вы действительно используете! \uD83C\uDFAF","type":"unstyled","key":"fc1tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\nЧасть 4:\nВажные мелочи и публикация сайта","type":"header-two","key":"99coq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Глава 10: Комментарии в коде — \"записки для себя\"\n\n","type":"header-three","key":"dachm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"10.1. Что такое комментарий  и зачем он нужен","type":"header-three","key":"1c73v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Введение: Заметки для себя и других разработчиков","type":"unstyled","key":"2ausl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что Вы читаете книгу и делаете пометки на полях: \"важная мысль\", \"вернуться к этому позже\", \"спросить у Марии\". Комментарии в HTML — это такие же пометки, но в Вашем коде! Они не видны посетителям сайта, но очень помогают Вам и другим разработчикам разбираться в структуре страницы.","type":"unstyled","key":"8it2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"2l7tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Часть 1: Базовый синтаксис комментариев","type":"header-three","key":"ci1jc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарий в HTML создается с помощью специальных символов . Все, что находится между ними, браузер игнорирует.","type":"unstyled","key":"evvko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"8f3hl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"9erp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Как это работает:","type":"unstyled","key":"13bt8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" — конец комментария","type":"unstyled","key":"119pq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5np22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Часть 2: Практические примеры комментариев","type":"header-three","key":"6s9mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Пример 1: Однострочный комментарий","type":"unstyled","key":"86js3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"7pen3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"}],"text":" \n \nГлавная \nО нас \nКонтакты \n
","type":"unstyled","key":"evvl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Пример 2: Многострочный комментарий","type":"unstyled","key":"5hv4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"30l6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":42,"offset":7,"style":"ITALIC"},{"length":18,"offset":51,"style":"ITALIC"},{"length":20,"offset":71,"style":"ITALIC"},{"length":3,"offset":93,"style":"ITALIC"}],"text":" \n \nТелефон: +7 (123) 456-78-90
 \n
","type":"unstyled","key":"3fp5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Пример 3: Комментарий в середине строки","type":"unstyled","key":"jjim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"2m450"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":23,"style":"ITALIC"}],"text":"Заголовок страницы 
","type":"unstyled","key":"1q0ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1upog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Часть 3: Основные причины использовать комментарии","type":"header-three","key":"9ijlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте рассмотрим, зачем вообще нужны комментарии, на конкретных примерах.","type":"unstyled","key":"cs1ha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Причина 1: Объяснение сложного кода","type":"unstyled","key":"ah9qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"ddj2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":63,"offset":0,"style":"ITALIC"}],"text":" \n \nБазовая цена: 1000 руб.
 \nСкидка: 15%
 \nИтоговая цена: 850 руб. \n
","type":"unstyled","key":"fsmp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Причина 2: Разметка разделов страницы","type":"unstyled","key":"7b26s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"a7vos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"ITALIC"},{"length":33,"offset":49,"style":"ITALIC"},{"length":31,"offset":119,"style":"ITALIC"},{"length":43,"offset":198,"style":"ITALIC"},{"length":28,"offset":251,"style":"ITALIC"},{"length":25,"offset":322,"style":"ITALIC"},{"length":37,"offset":396,"style":"ITALIC"}],"text":" \n \n \nМой Сайт
 \n\n \n...
 \n
 \n\n \n \n \n...
 \n\n \n...
 \n
 \n\n \n...
","type":"unstyled","key":"9sm5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Причина 3: Временное отключение кода","type":"unstyled","key":"5o6ik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5vblf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":5,"offset":7,"style":"ITALIC"},{"length":27,"offset":14,"style":"ITALIC"},{"length":33,"offset":43,"style":"ITALIC"},{"length":6,"offset":78,"style":"ITALIC"},{"length":3,"offset":86,"style":"ITALIC"}],"text":" \n\n \nГлавная \nНовости \nКонтакты \n
","type":"unstyled","key":"1hsve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Причина 4: Помощь в командной работе","type":"unstyled","key":"668sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"drgbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":27,"offset":7,"style":"ITALIC"},{"length":16,"offset":36,"style":"ITALIC"},{"length":31,"offset":54,"style":"ITALIC"},{"length":16,"offset":87,"style":"ITALIC"},{"length":3,"offset":105,"style":"ITALIC"},{"length":48,"offset":140,"style":"ITALIC"}],"text":" \n \n \n...
 \n
","type":"unstyled","key":"a6a0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8vcmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Часть 4: Полная страница с примерами комментариев","type":"header-three","key":"9hgi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"97fqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":1336,"style":"ITALIC"},{"length":45,"offset":1872,"style":"ITALIC"},{"length":44,"offset":3362,"style":"ITALIC"},{"length":41,"offset":4099,"style":"ITALIC"},{"length":32,"offset":5560,"style":"ITALIC"},{"length":29,"offset":6483,"style":"ITALIC"},{"length":18,"offset":7557,"style":"ITALIC"}],"text":" \n \n \nПрактика: Комментарии в HTML \n \n \n \n \n\uD83D\uDCAC Комментарии в HTML: Ваши заметки в коде
 \n\n \n\uD83D\uDCA1 Основная идея: Комментарии — это заметки в коде, которые видны только разработчикам. Посетители сайта их не увидят, но они помогут Вам и Вашей команде понимать структуру страницы. \n
 \n\n \n \n1. Как выглядят комментарии
 \n\n \n \n\n \n--> \n\n \nЭтот текст увидят пользователи \n \n
 \n
 \n\n \nРезультат в браузере:
 \nЭтот текст увидят пользователи \n
 \n
 \n\n \n \n2. Комментарии в реальном проекте
 \n\n \n \n \n \n \nМой сайт - Главная \n \n \n \n \n \n \n \nМойСайт.ру
 \n\n \n \nГлавная \nО нас \n \nКонтакты \n
 \n
 \n\n \n \n \n \n \nСпециальное предложение!
 \n
 \n\n \n \n \n \nНазвание товара 1
 \nОписание товара
 \n \n1000 руб. \n
 \n\n \n \nНазвание товара 2
 \nОписание товара
 \n1500 руб. \n
 \n
 \n
 \n\n \n \n \n \nТелефон: +7 (123) 456-78-90 \n
 \n \n
 \n \n \n
 \n
 \n\n \n \n3. Временное отключение элементов
 \n\n \n \n \nГлавная \nО нас \nКонтакты \n
 \n\n \n\n \n
 \n\n \n\uD83D\uDCDD Примечание: Закомментированный код не удаляется, а просто временно отключается. Это удобно для тестирования или если Вы хотите сохранить старую версию на случай отката. \n
 \n
 \n\n \n \n4. Комментарии для отладки
 \n\n \n \n \n \n\nПрофиль пользователя
 \n \n \nФото
 \n\n \nИван Петров
 \nivan@example.com
 \n
 \n\n \n \n
 \n
 \n\n \n \nTODO
Запланированная задача \n
 \n \nFIXME
Требуется исправление \n
 \n \nBUG
Обнаруженная ошибка \n
 \n \nNOTE
Важное примечание \n
 \n
 \n
 \n\n \n \n5. Что нельзя делать с комментариями
 \n\n \n⚠️ Внимание! Эти примеры показывают неправильное использование комментариев. \n
 \n\nОшибка 1: Незакрытый комментарий
 \n \n class=\"header\"> \nСодержимое \n
 \n
 \n\nОшибка 3: Вложенные комментарии
 \n \n \nТекст между комментариями \n--> \n
 \n\n \n✅ Правильно: Комментарии должны быть правильно закрыты и не могут быть вложенными. \n
 \n \n\n \n \n\uD83C\uDFAF Практическое задание
 \n\n \n \n \n \n \nМоё расписание \n \n \nМоё ежедневное расписание
 \n\n \n\n \nУтро
 \n \n07:00 - Подъем
 \n07:30 - Завтрак
 \n08:30 - Прогулка
 \n
 \n
 \n\n \nДень
 \n \n12:00 - Обед
 \n13:00 - Компьютерные курсы
 \n15:00 - Чтение
 \n
 \n
 \n\n \nВечер
 \n \n18:00 - Ужин
 \n19:00 - Телевизор
 \n21:00 - Подготовка ко сну
 \n
 \n
 \n \n \n
 \n\n \n\uD83D\uDCDD Задание: Добавьте в код выше комментарии, которые: \n \nОбъясняют структуру страницы
 \nОтмечают наиболее важные дела
 \nПоказывают, какие пункты временные
 \nДобавляют заметки для будущих улучшений
 \n
 \n
 \n
 \n\n \n \n\uD83D\uDCCB Шпаргалка по комментариям
 \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nСинтаксис Назначение Пример
Обычный комментарий 
Многострочный комментарий 
Запланированная задача 
Требуется исправление 
 \n
 \n \n","type":"unstyled","key":"cvu42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9bc8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 6: Что Вы теперь умеете","type":"header-three","key":"fq5fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"},{"length":50,"offset":43,"style":"BOLD"},{"length":55,"offset":97,"style":"BOLD"},{"length":45,"offset":156,"style":"BOLD"},{"length":44,"offset":205,"style":"BOLD"},{"length":48,"offset":253,"style":"BOLD"}],"text":"✅ Понимать назначение HTML-комментариев\n ✅ Создавать однострочные и многострочные комментарии\n ✅ Использовать комментарии для разметки разделов страницы\n ✅ Временно отключать код с помощью комментариев\n ✅ Добавлять напоминания и задачи (TODO, FIXME)\n ✅ Избегать распространенных ошибок с комментариями","type":"unstyled","key":"1r43s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"6o6fd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 7: Итоги и рекомендации","type":"header-three","key":"fe63p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые моменты:","type":"unstyled","key":"9b2ts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии начинаются с ","type":"unstyled","key":"c4879"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они не видны пользователям на странице","type":"unstyled","key":"f6mpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помогают организовать код и работать в команде","type":"unstyled","key":"73jgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Позволяют временно отключать элементы","type":"unstyled","key":"919iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Профессиональные советы:","type":"unstyled","key":"efgqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Комментируйте структуру — разделяйте комментариями основные блоки страницы","type":"unstyled","key":"apq13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Объясняйте сложные моменты — если код делает что-то неочевидное, добавьте комментарий","type":"unstyled","key":"fu7fd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Используйте стандартные пометки — TODO для задач, FIXME для исправлений","type":"unstyled","key":"a3uq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Не переусердствуйте — хороший код часто понятен и без комментариев","type":"unstyled","key":"5pla6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Следите за актуальностью — удаляйте устаревшие комментарии","type":"unstyled","key":"bcpp0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Следующие шаги:","type":"unstyled","key":"34dst"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практикуйтесь добавлять комментарии в свои проекты","type":"unstyled","key":"ace6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте разные типы комментариев (разделители, пояснения, задачи)","type":"unstyled","key":"5qjsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Научитесь быстро комментировать/раскомментировать код в редакторе","type":"unstyled","key":"alsn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучите комментарии в CSS и JavaScript","type":"unstyled","key":"61vdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":9,"style":"BOLD"}],"text":"Помните: Хорошо прокомментированный код — признак заботливого разработчика! \uD83C\uDF1F","type":"unstyled","key":"2qfob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":59,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\n10.2. Как комментарии помогают не запутаться в своём коде\n\n","type":"header-three","key":"f74v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Введение: Спасательный круг в море кода","type":"unstyled","key":"191rk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что Вы открываете старый шкаф с вещами. Если всё аккуратно разложено по полочкам с подписями \"летняя одежда\", \"зимние вещи\", \"документы\" — Вы быстро найдёте нужное. Если же всё свалкой — придётся перерывать каждый угол. Комментарии в коде — это такие же \"подписи на полочках\", которые помогают быстро ориентироваться и не запутаться.","type":"unstyled","key":"10ns4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"b1861"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Часть 1: Проблема — код без комментариев","type":"header-three","key":"73i9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте посмотрим на реальный пример, как легко запутаться в коде без комментариев.","type":"unstyled","key":"fotjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"enkac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \nСайт \n \n \n \n \n \nТекст
 \nДругой текст
 \n
 \n
 \n \nЕщё текст
 \n
 \n \n","type":"unstyled","key":"77fda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Что здесь происходит? Непонятно! Классы с непонятными названиями, непонятная структура. Теперь представим, что этот код написан 3 месяца назад — Вы вообще ничего не вспомните!","type":"unstyled","key":"dgq2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"alflc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Часть 2: Решение — код с комментариями","type":"header-three","key":"apmq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А теперь тот же код, но с комментариями:","type":"unstyled","key":"1mp78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"8ron2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":82,"style":"ITALIC"},{"length":38,"offset":264,"style":"ITALIC"},{"length":25,"offset":376,"style":"ITALIC"},{"length":26,"offset":539,"style":"ITALIC"},{"length":47,"offset":609,"style":"ITALIC"},{"length":23,"offset":789,"style":"ITALIC"}],"text":" \n \n \nСайт компании - Главная \n \n \n \n \n \n \n \niPhone 15
 \n85 000 руб.
 \n
 \n
 \n\n \n \nСкидка 10% на все смартфоны
 \n
 \n \n","type":"unstyled","key":"176gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Теперь всё понятно! Комментарии превратили хаос в порядок.","type":"unstyled","key":"7ci85"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1bfa4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"Часть 3: Конкретные способы как комментарии предотвращают путаницу","type":"header-three","key":"7rgc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"2gu56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Способ 1: Разметка крупных блоков","type":"header-three","key":"2h2l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"59bda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"ITALIC"},{"length":27,"offset":69,"style":"ITALIC"},{"length":23,"offset":171,"style":"ITALIC"},{"length":24,"offset":303,"style":"ITALIC"},{"length":63,"offset":395,"style":"ITALIC"},{"length":21,"offset":468,"style":"ITALIC"},{"length":24,"offset":564,"style":"ITALIC"},{"length":16,"offset":617,"style":"ITALIC"},{"length":39,"offset":660,"style":"ITALIC"},{"length":23,"offset":712,"style":"ITALIC"},{"length":15,"offset":766,"style":"ITALIC"},{"length":57,"offset":813,"style":"ITALIC"},{"length":17,"offset":882,"style":"ITALIC"},{"length":18,"offset":935,"style":"ITALIC"}],"text":" \n \n \n \n \n
 \n\n \n \n \n \n
 \n\n \n \nКорзина (3) \n
 \n
 \n\n \n \n \n \nРаспродажа до 50%
 \n
 \n\n \n \n \n \n \n
 \n\n \n \n \n
 \n
 \n
 \n\n \n \n \n...
 \n\n \n...
 \n
","type":"unstyled","key":"6i1mg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"df1b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Способ 2: Объяснение сложной логики","type":"header-three","key":"d34q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"fhqq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"ITALIC"},{"length":5,"offset":64,"style":"ITALIC"},{"length":16,"offset":71,"style":"ITALIC"},{"length":47,"offset":89,"style":"ITALIC"},{"length":54,"offset":138,"style":"ITALIC"},{"length":3,"offset":194,"style":"ITALIC"},{"length":26,"offset":392,"style":"ITALIC"},{"length":50,"offset":442,"style":"ITALIC"},{"length":5,"offset":549,"style":"ITALIC"},{"length":22,"offset":556,"style":"ITALIC"},{"length":42,"offset":580,"style":"ITALIC"},{"length":38,"offset":624,"style":"ITALIC"},{"length":3,"offset":664,"style":"ITALIC"}],"text":" \n \n \n \nБазовая цена: \n \n\nСкидка %: \n \n
 \n\n \n \n \nИтоговая цена: 900 руб. \n\n \nВыгодно!
 \n
 \n
","type":"unstyled","key":"felrb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"40nqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Способ 3: Отслеживание изменений и версий","type":"header-three","key":"dvst2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"fihio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"},{"length":18,"offset":7,"style":"ITALIC"},{"length":40,"offset":27,"style":"ITALIC"},{"length":42,"offset":69,"style":"ITALIC"},{"length":55,"offset":113,"style":"ITALIC"},{"length":17,"offset":171,"style":"ITALIC"},{"length":24,"offset":190,"style":"ITALIC"},{"length":42,"offset":216,"style":"ITALIC"},{"length":33,"offset":260,"style":"ITALIC"},{"length":3,"offset":295,"style":"ITALIC"},{"length":21,"offset":330,"style":"ITALIC"},{"length":66,"offset":404,"style":"ITALIC"},{"length":39,"offset":532,"style":"ITALIC"},{"length":23,"offset":573,"style":"ITALIC"},{"length":22,"offset":598,"style":"ITALIC"},{"length":22,"offset":622,"style":"ITALIC"},{"length":6,"offset":646,"style":"ITALIC"},{"length":3,"offset":654,"style":"ITALIC"}],"text":" \n \n \n \nАкция недели
 \n \n05:00:00
 \n
 \n\n \n
","type":"unstyled","key":"89g6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bik79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Часть 4: Полная страница с примерами организации кода","type":"header-three","key":"bun4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"5jbl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":1380,"style":"ITALIC"},{"length":43,"offset":2374,"style":"ITALIC"},{"length":34,"offset":5332,"style":"ITALIC"},{"length":44,"offset":7313,"style":"ITALIC"},{"length":29,"offset":8764,"style":"ITALIC"},{"length":18,"offset":10203,"style":"ITALIC"}],"text":" \n \n \nКак не запутаться в коде: Практика комментариев \n \n \n \n \n\uD83E\uDDED Комментарии как навигация: Как не заблудиться в своём коде
 \n\n \n\uD83D\uDCA1 Основная идея: Комментарии — это карта Вашего кода. Без них легко заблудиться, особенно когда Вы возвращаетесь к проекту через несколько месяцев или работаете в команде. \n
 \n\n \n \n1. Превращение хаоса в порядок
 \n\n \n❌ БЕЗ КОММЕНТАРИЕВ — ХАОС: \n
 \n \n \n \nЗаголовок \n \n
 \n
 \n
 \n
 \n \n \n
 \n
 \n
 \n\n \n✅ С КОММЕНТАРИЯМИ — ПОРЯДОК: \n
 \n \n \n \n\n \n \nЗаголовок \n\n \n \n
 \n
 \n
 \n
 \n\n \n \n \n
 \n
 \n
 \n
 \n\n \n \n2. Организация крупного проекта
 \n\n \n \n \n \n \nИнтернет-магазин электроники \n\n \n \n \n \n \n \n \n \nTechStore
 \n
 \n\n \n \n \n \n \n
 \n\n \n \nКорзина (3)
 \nПрофиль
 \n
 \n
 \n\n \n \n\n \n \n \nРаспродажа смартфонов до 40%
 \nТолько до конца недели
 \n
 \n\n \n \n\n \n \n \n \nЦена
 \n \n
 \n\n \nБренд
 \n \n
 \n
 \n\n \n \n \n \n \n \niPhone 15
 \n85 000 руб. \n★★★★☆
 \n \n
 \n\n \n \n \nSamsung Galaxy S24
 \n65 000 руб. \n★★★★★
 \n \n
 \n\n \n
 \n
 \n
 \n\n \n \n \n \n \nКонтакты
 \nТелефон: +7 (123) 456-78-90
 \n
 \n\n \nНавигация
 \nО компании \nДоставка \nГарантия \n
 \n
 \n
 \n \n \n
 \n
 \n\n \n \n3. Система пометок для самоорганизации
 \n\n \n \n✅ TODO
 \nЗадачи на будущее
 \n \n \n
 \n\n \n⚠️ FIXME
 \nТребует исправления
 \n \n \n
 \n\n \n\uD83D\uDC1B BUG
 \nОбнаруженные ошибки
 \n \n \n
 \n\n \n\uD83D\uDCA1 NOTE
 \nВажные заметки
 \n \n \n
 \n
 \n\n \n \n \n \n \n \n\n \n \n \n
 \n\n \n \n \n\n \n \n
 \n
 \n
 \n
 \n\n \n \n4. Управление версиями и экспериментами
 \n\n \n \n \n\nСпособы оплаты
 \n\n \n \n \n \n \nБанковская карта \n
 \n\n \n \n \nPayPal \n
 \n\n \n \n \nСБП \n
 \n
 \n\n \n \n \n \nGoogle Pay \n
 \n\n \n \n \nApple Pay \n
 \n
 \n--> \n\n \n \n \n \nКриптовалюты \n
 \n
 \n--> \n
 \n \n \n\n \n \n\uD83C\uDFAF Практическое задание: Наведите порядок в коде
 \n\n \n \n \n \nСайт \n \n \n \n \n \n \nЛого
 \n \nГлавная
 \nО нас
 \nУслуги
 \nКонтакты
 \n
 \n
 \n
 \n\n \n \nКатегории
 \n \nКатегория 1
 \nКатегория 2
 \nКатегория 3
 \n
 \n
 \n \nЗаголовок
 \nТекст страницы...
 \n
 \n
 \n\n \nТелефон: +7 (123) 456-78-90
 \nEmail: info@site.ru
 \n
 \n
 \n \n \n
 \n\n \n\uD83D\uDCDD Задание: Добавьте комментарии в код выше, чтобы: \n \nРазметить основные разделы страницы
 \nОбъяснить назначение каждого блока
 \nДобавить TODO для улучшений
 \nСоздать систему пометок для будущих изменений
 \n
 \n
 \n
 \n\n \n \n\uD83D\uDCCB Шпаргалка по организации кода
 \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nСитуация Как комментировать Пример
Разделы страницы Разделители с === 
Сложная логика Подробное объяснение 
Будущие задачи TODO пометки 
Проблемы FIXME/BUG пометки 
Временное отключение Закомментировать блок 
 \n
 \n \n","type":"unstyled","key":"aujo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8kh5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 5: Что Вы теперь умеете","type":"header-three","key":"6d5ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"},{"length":50,"offset":50,"style":"BOLD"},{"length":47,"offset":104,"style":"BOLD"},{"length":36,"offset":155,"style":"BOLD"},{"length":39,"offset":195,"style":"BOLD"},{"length":42,"offset":238,"style":"BOLD"}],"text":"✅ Превращать хаотичный код в структурированный\n ✅ Создавать навигацию по коду с помощью комментариев\n ✅ Использовать систему пометок (TODO, FIXME, BUG)\n ✅ Отслеживать историю изменений в коде\n ✅ Временно отключать код без его удаления\n ✅ Объяснять сложную логику для себя и других","type":"unstyled","key":"6rl7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3khoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 6: Итоги и рекомендации","type":"header-three","key":"69q8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые принципы организации кода:","type":"unstyled","key":"cj0c9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Комментируйте разделы — используйте визуальные разделители","type":"unstyled","key":"5vk5l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Объясняйте сложное — если логика неочевидна, добавьте комментарий","type":"unstyled","key":"9j4k2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Отмечайте задачи — используйте TODO для планирования","type":"unstyled","key":"csgvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Фиксируйте проблемы — FIXME и BUG для отслеживания ошибок","type":"unstyled","key":"chl83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Ведите историю — комментарии с датами и авторами изменений","type":"unstyled","key":"fbolt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Профессиональные привычки:","type":"unstyled","key":"bhpdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Комментируйте по мере написания — не откладывайте \"на потом\"","type":"unstyled","key":"e64kn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Обновляйте комментарии — устаревшие комментарии хуже их отсутствия","type":"unstyled","key":"4jpuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Используйте единый стиль — договоритесь о правилах в команде","type":"unstyled","key":"ivib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Не комментируйте очевидное —  у кнопки излишне","type":"unstyled","key":"afsvr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Результат правильного комментирования:","type":"unstyled","key":"e5pro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Возвращаться к коду через месяцы и сразу понимать его","type":"unstyled","key":"6qgp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Работать в команде без лишних вопросов \"а что это?\"","type":"unstyled","key":"2nn95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Быстро находить и исправлять проблемы","type":"unstyled","key":"7ahv8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Экономить время на понимании собственного кода","type":"unstyled","key":"356hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":9,"style":"BOLD"}],"text":"Помните: Хорошо организованный код с комментариями","type":"unstyled","key":"5evpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":104,"offset":0,"style":"BOLD"}],"text":"- * * * -\n\n10.3. Практика: добавляем комментарии в свой код, чтобы объяснить, что делает каждый раздел\n\n","type":"header-three","key":"4a20e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Введение: Превращаем код в понятную инструкцию","type":"unstyled","key":"9hee2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы возьмём реальный HTML-код и превратим его из \"чёрного ящика\" в хорошо документированную инструкцию. Вы научитесь комментировать каждый раздел так, чтобы даже новичок мог понять структуру и назначение всех элементов страницы.","type":"unstyled","key":"8um0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"eqccp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Часть 1: Исходный код без комментариев","type":"header-three","key":"1688o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте начнём с типичной страницы, которая есть у многих пенсионеров — страницы с расписанием и полезными ссылками.","type":"unstyled","key":"5h53r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"et01t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \n \n \nМой ежедневник \n \n \n \n \nМой ежедневник
 \nОрганайзер для пенсионера
 \n
 \n\n \nРасписание \nПолезные ссылки \nКонтакты \n
 \n\n \n \nБлижайшие события
 \n \nПосещение врача - 15:00
 \nВстреча с друзьями - 18:00
 \nПриём лекарств - 20:00
 \n
 \n\nБыстрые заметки
 \n \n
 \n\n \nМоё расписание на неделю
 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nДень Время Занятие Место
Понедельник 10:00-11:30 Йога Спортзал
Вторник 14:00-16:00 Компьютерные курсы Библиотека
Среда 11:00-12:30 Танцы Клуб
 \n\nПолезные ссылки
 \n \nГосуслуги
 \nСоциальные службы
 \nПоликлиника
 \nАптека
 \n
 \n
 \n
 \n\n \nТелефон: +7 (123) 456-78-90 | Email: pensioner@example.com
 \n© 2024 Мой ежедневник. Все права защищены.
 \n
 \n \n","type":"unstyled","key":"1v159"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Проблема: Код работает, но через месяц Вы забудете, зачем создавали каждый блок и как он работает!","type":"unstyled","key":"1f2sh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4h3r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Часть 2: Пошаговое комментирование кода","type":"header-three","key":"1a8v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте превратим этот код в хорошо документированную страницу.","type":"unstyled","key":"e9u38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9642t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":33,"style":"ITALIC"},{"length":36,"offset":40,"style":"ITALIC"},{"length":70,"offset":78,"style":"ITALIC"},{"length":3,"offset":150,"style":"ITALIC"},{"length":5,"offset":239,"style":"ITALIC"},{"length":14,"offset":246,"style":"ITALIC"},{"length":36,"offset":262,"style":"ITALIC"},{"length":49,"offset":300,"style":"ITALIC"},{"length":3,"offset":351,"style":"ITALIC"},{"length":33,"offset":365,"style":"ITALIC"},{"length":33,"offset":442,"style":"ITALIC"},{"length":44,"offset":510,"style":"ITALIC"},{"length":28,"offset":589,"style":"ITALIC"},{"length":22,"offset":652,"style":"ITALIC"},{"length":50,"offset":709,"style":"ITALIC"},{"length":17,"offset":765,"style":"ITALIC"},{"length":36,"offset":829,"style":"ITALIC"},{"length":30,"offset":954,"style":"ITALIC"},{"length":24,"offset":990,"style":"ITALIC"},{"length":24,"offset":1058,"style":"ITALIC"},{"length":36,"offset":1203,"style":"ITALIC"},{"length":32,"offset":1314,"style":"ITALIC"},{"length":31,"offset":1352,"style":"ITALIC"},{"length":38,"offset":1428,"style":"ITALIC"},{"length":34,"offset":1501,"style":"ITALIC"},{"length":32,"offset":1570,"style":"ITALIC"},{"length":20,"offset":1625,"style":"ITALIC"},{"length":22,"offset":1693,"style":"ITALIC"},{"length":28,"offset":1794,"style":"ITALIC"},{"length":25,"offset":1828,"style":"ITALIC"},{"length":28,"offset":1918,"style":"ITALIC"},{"length":24,"offset":2013,"style":"ITALIC"},{"length":29,"offset":2086,"style":"ITALIC"},{"length":26,"offset":2199,"style":"ITALIC"},{"length":30,"offset":2317,"style":"ITALIC"},{"length":49,"offset":2433,"style":"ITALIC"},{"length":18,"offset":2488,"style":"ITALIC"},{"length":16,"offset":2553,"style":"ITALIC"},{"length":29,"offset":2678,"style":"ITALIC"},{"length":19,"offset":2713,"style":"ITALIC"},{"length":23,"offset":2814,"style":"ITALIC"},{"length":62,"offset":2943,"style":"ITALIC"},{"length":5,"offset":3088,"style":"ITALIC"},{"length":21,"offset":3095,"style":"ITALIC"},{"length":25,"offset":3118,"style":"ITALIC"},{"length":22,"offset":3145,"style":"ITALIC"},{"length":8,"offset":3169,"style":"ITALIC"},{"length":3,"offset":3179,"style":"ITALIC"},{"length":63,"offset":3193,"style":"ITALIC"},{"length":5,"offset":3277,"style":"ITALIC"},{"length":27,"offset":3284,"style":"ITALIC"},{"length":44,"offset":3313,"style":"ITALIC"},{"length":3,"offset":3359,"style":"ITALIC"},{"length":63,"offset":3472,"style":"ITALIC"},{"length":67,"offset":3546,"style":"ITALIC"},{"length":5,"offset":3635,"style":"ITALIC"},{"length":38,"offset":3642,"style":"ITALIC"},{"length":38,"offset":3682,"style":"ITALIC"},{"length":3,"offset":3722,"style":"ITALIC"},{"length":37,"offset":3750,"style":"ITALIC"},{"length":5,"offset":3927,"style":"ITALIC"},{"length":16,"offset":3934,"style":"ITALIC"},{"length":53,"offset":3952,"style":"ITALIC"},{"length":31,"offset":4007,"style":"ITALIC"},{"length":3,"offset":4040,"style":"ITALIC"},{"length":24,"offset":4053,"style":"ITALIC"},{"length":5,"offset":4105,"style":"ITALIC"},{"length":35,"offset":4112,"style":"ITALIC"},{"length":52,"offset":4149,"style":"ITALIC"},{"length":58,"offset":4203,"style":"ITALIC"},{"length":3,"offset":4263,"style":"ITALIC"},{"length":5,"offset":4363,"style":"ITALIC"},{"length":28,"offset":4370,"style":"ITALIC"},{"length":46,"offset":4400,"style":"ITALIC"},{"length":3,"offset":4448,"style":"ITALIC"},{"length":26,"offset":4476,"style":"ITALIC"},{"length":5,"offset":4553,"style":"ITALIC"},{"length":18,"offset":4560,"style":"ITALIC"},{"length":42,"offset":4580,"style":"ITALIC"},{"length":41,"offset":4624,"style":"ITALIC"},{"length":3,"offset":4667,"style":"ITALIC"},{"length":20,"offset":4776,"style":"ITALIC"},{"length":16,"offset":4889,"style":"ITALIC"},{"length":14,"offset":5010,"style":"ITALIC"},{"length":5,"offset":5108,"style":"ITALIC"},{"length":47,"offset":5115,"style":"ITALIC"},{"length":52,"offset":5164,"style":"ITALIC"},{"length":3,"offset":5218,"style":"ITALIC"},{"length":31,"offset":5234,"style":"ITALIC"},{"length":5,"offset":5304,"style":"ITALIC"},{"length":35,"offset":5311,"style":"ITALIC"},{"length":51,"offset":5348,"style":"ITALIC"},{"length":3,"offset":5401,"style":"ITALIC"},{"length":5,"offset":5662,"style":"ITALIC"},{"length":54,"offset":5669,"style":"ITALIC"},{"length":32,"offset":5725,"style":"ITALIC"},{"length":49,"offset":5759,"style":"ITALIC"},{"length":3,"offset":5810,"style":"ITALIC"},{"length":63,"offset":5839,"style":"ITALIC"},{"length":5,"offset":5940,"style":"ITALIC"},{"length":32,"offset":5947,"style":"ITALIC"},{"length":33,"offset":5981,"style":"ITALIC"},{"length":3,"offset":6016,"style":"ITALIC"},{"length":5,"offset":6139,"style":"ITALIC"},{"length":38,"offset":6146,"style":"ITALIC"},{"length":27,"offset":6186,"style":"ITALIC"},{"length":22,"offset":6215,"style":"ITALIC"},{"length":15,"offset":6239,"style":"ITALIC"},{"length":3,"offset":6256,"style":"ITALIC"},{"length":5,"offset":6270,"style":"ITALIC"},{"length":70,"offset":6277,"style":"ITALIC"},{"length":24,"offset":6350,"style":"ITALIC"},{"length":36,"offset":6376,"style":"ITALIC"},{"length":24,"offset":6414,"style":"ITALIC"},{"length":25,"offset":6440,"style":"ITALIC"},{"length":30,"offset":6468,"style":"ITALIC"},{"length":43,"offset":6500,"style":"ITALIC"},{"length":43,"offset":6545,"style":"ITALIC"},{"length":28,"offset":6590,"style":"ITALIC"},{"length":67,"offset":6621,"style":"ITALIC"},{"length":3,"offset":6690,"style":"ITALIC"}],"text":" \n \n \n \nМой ежедневник - Органайзер для пенсионера \n \n\n \n \n \n \n \n \nМой ежедневник
 \nОрганайзер для пенсионера
 \n \n
 \n\n \n \n \nРасписание \nПолезные ссылки \nКонтакты \n \n
 \n\n \n \n \n \n \nБлижайшие события
 \n \nПосещение врача - 15:00
 \nВстреча с друзьями - 18:00
 \nПриём лекарств - 20:00
 \n \n
 \n\n \nБыстрые заметки
 \n \n \n
 \n\n \n \n \nМоё расписание на неделю
 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nДень Время Занятие Место
Понедельник 10:00-11:30 Йога Спортзал
Вторник 14:00-16:00 Компьютерные курсы Библиотека
Среда 11:00-12:30 Танцы Клуб
 \n\n \nПолезные ссылки
 \n \n \nГосуслуги
 \nСоциальные службы
 \nПоликлиника № 123
 \nАптека \"Здоровье\"
 \n \n
 \n
 \n
 \n\n \n \n \nТелефон: +7 (123) 456-78-90 | Email: pensioner@example.com
 \n© 2024 Мой ежедневник. Все права защищены.
 \n \n
 \n\n \n \n","type":"unstyled","key":"86sdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"1vibe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Часть 3: Полная страница с практическими заданиями","type":"header-three","key":"9j730"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"f2cps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":1331,"style":"ITALIC"},{"length":31,"offset":3725,"style":"ITALIC"},{"length":31,"offset":5459,"style":"ITALIC"},{"length":37,"offset":7450,"style":"ITALIC"}],"text":" \n \n \nПрактика: Комментирование HTML-кода \n \n \n \n \n\uD83D\uDCDD Практика: Добавляем комментарии в свой код
 \n\n \n\uD83C\uDFAF Цель урока: Научиться комментировать каждый раздел кода так, чтобы через полгода Вы могли легко понять, что делает каждая часть страницы и зачем она нужна. \n
 \n\n \n \n1. Пример правильно закомментированного кода
 \n\n \n \n \n \n \n \n \nМой садовый дневник \n\n \n \n \n \n \n \n \n \nМой садовый дневник
 \nУчёт растений и работ в саду
 \n
 \n\n \n \nМои растения \nГрафик работ \nЗаметки \n
 \n
 \n\n \n \n\n \n \nМои растения
 \n\n \n \n \n \nПомидоры
 \n \nПосажены: 15 мая 2024
 \nПолив: Каждый день
 \n \n
 \n\n \n \nОгурцы
 \nПосажены: 20 мая 2024
 \nПолив: Через день
 \n
 \n
 \n
 \n
 \n\n \n \n \n \nТелефон: +7 (123) 456-78-90
 \nУчасток: Садовое товарищество \"Ромашка\"
 \n
 \n
 \n\n \n \n \n
 \n
 \n\n \n \n\uD83C\uDFAF Практическое задание 1: Комментируем таблицу расходов
 \n\n \n \n \n \nУчёт расходов \n \n \n \nУчёт моих расходов
 \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nДата Категория Описание Сумма
01.03.2024 Продукты Молоко, хлеб, овощи 850 руб.
01.03.2024 Пенсия Ежемесячная пенсия 25 000 руб.
ИТОГО: 24 150 руб.
 \n\n \nДобавить новую запись
 \n \n \n \n \n \n \n
 \n
 \n \n \n
 \n\n \n\uD83D\uDCDD Задание: Добавьте комментарии к этому коду, объясняющие: \n \nНазначение каждого раздела страницы
 \nСтруктуру таблицы расходов
 \nРазные цвета для доходов и расходов
 \nНазначение формы добавления записей
 \nПланы по улучшению (TODO)
 \n
 \n
 \n
 \n\n \n \n\uD83C\uDFAF Практическое задание 2: Комментируем страницу с рецептами
 \n\n \n \n \n \nМои рецепты \n \n \n \n \nМоя кулинарная книга
 \n\n \nБорщ
 \nВремя приготовления: 2 часа
 \nПростой \n\n \nИнгредиенты:
 \n \nСвекла - 2 шт
 \nКартофель - 3 шт
 \nКапуста - 200г
 \nМясо - 400г
 \n
 \n
 \n\n \nПриготовление:
 \n1. Порезать овощи
 \n2. Сварить мясо
 \n3. Добавить овощи
 \n4. Варить 1.5 часа
 \n
 \n
 \n\n \nОладьи
 \nВремя приготовления: 30 минут
 \nСредний \n\n \nИнгредиенты:
 \n \nМука - 2 стакана
 \nЯйца - 2 шт
 \nМолоко - 1 стакан
 \nСахар - 2 ст. ложки
 \n
 \n
 \n
 \n
 \n \n \n
 \n\n \n\uD83D\uDCDD Задание: Добавьте комментарии, которые объяснят: \n \nСтруктуру карточки рецепта
 \nСистему обозначения сложности приготовления
 \nРазделение на ингредиенты и шаги приготовления
 \nИдеи для будущих улучшений
 \n
 \n
 \n
 \n\n \n \n\uD83D\uDCCB Шпаргалка: Что комментировать в коде
 \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \nЧто комментировать Пример комментария Зачем нужно
Крупные разделы Быстрая навигация по коду
Сложная логика Объяснение не очевидных моментов
Назначение классов Понимание структуры стилей
Будущие улучшения Планирование развития
Проблемные места Отслеживание ошибок
 \n\n \n\uD83C\uDFA8 Пример хорошего комментария:
 \n \n
 \n
 \n \n","type":"unstyled","key":"2c3he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ag1ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 4: Что Вы теперь умеете","type":"header-three","key":"286ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"},{"length":36,"offset":44,"style":"BOLD"},{"length":44,"offset":84,"style":"BOLD"},{"length":38,"offset":132,"style":"BOLD"},{"length":50,"offset":174,"style":"BOLD"},{"length":37,"offset":228,"style":"BOLD"}],"text":"✅ Комментировать структуру HTML-страницы\n ✅ Объяснять назначение каждого раздела\n ✅ Добавлять TODO-заметки для будущих улучшений\n ✅ Отмечать проблемные места (FIXME, BUG)\n ✅ Создавать навигацию по коду с помощью комментариев\n ✅ Делать код понятным для себя и других","type":"unstyled","key":"desre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"cr6b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 5: Итоги и рекомендации","type":"header-three","key":"75jt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые принципы комментирования:","type":"unstyled","key":"d9btq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Комментируйте разделы — используйте визуальные разделители для крупных блоков","type":"unstyled","key":"99klo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Объясняйте сложное — если логика не очевидна, добавьте пояснение","type":"unstyled","key":"e3gg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Отмечайте задачи — используйте TODO для планирования улучшений","type":"unstyled","key":"j01k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Фиксируйте проблемы — FIXME и BUG для отслеживания ошибок","type":"unstyled","key":"k8bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Описывайте назначение — зачем нужен этот блок, что он делает","type":"unstyled","key":"6h9gm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Практические советы:","type":"unstyled","key":"72op0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Комментируйте по ходу написания — не откладывайте \"на потом\"","type":"unstyled","key":"ddq1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Используйте единый стиль — договоритесь с собой о правилах","type":"unstyled","key":"dbvdc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Обновляйте комментарии — устаревшие комментарии вводят в заблуждение","type":"unstyled","key":"937ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Не бойтесь подробностей — лучше больше объяснений, чем меньше","type":"unstyled","key":"dlcev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Результат правильного комментирования:","type":"unstyled","key":"dftav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Через полгода вы поймёте свой код с первого взгляда","type":"unstyled","key":"fc8nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Другие люди смогут разобраться в Вашем коде","type":"unstyled","key":"2bd60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Легче вносить изменения — понимаете последствия","type":"unstyled","key":"ftnaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Проще находить ошибки — комментарии подсказывают, что должно работать","type":"unstyled","key":"8mn0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":117,"offset":0,"style":"BOLD"}],"text":"Помните: Хорошо закомментированный код — это Ваша личная инструкция, которая всегда подскажет, что Вы делали и зачем! \uD83D\uDCDD✨","type":"unstyled","key":"au0sd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":1,"style":"BOLD"}],"text":"\n(Продолжение следует)\n\n","type":"unstyled","key":"9u6hc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"9rogs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"O8YuhpOQbYWF0Ac7Qv4j"}],"entityMap":{}},"mentions":[]}