{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(продолжение)\n\n","type":"unstyled","key":"2u7d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Глава 12:\nПроверяем свою работу и исправляем ошибки","type":"header-two","key":"496o0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":90,"offset":0,"style":"BOLD"}],"text":"\n12.1. Что такое \"валидатор\" и зачем он нужен? (Простая аналогия с проверкой орфографии)\n\n","type":"header-three","key":"3av64"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Введение: Ваш личный корректор для кода","type":"unstyled","key":"eauqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что Вы написали важное письмо и хотите быть уверены, что в нём нет ошибок. Вы просите друга проверить орфографию и пунктуацию. Валидатор в веб-разработке — это такой же \"друг-корректор\", но для Вашего HTML-кода! Он проверяет, всё ли Вы сделали правильно и не нарушили ли правила языка.","type":"unstyled","key":"7hpo4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ar2sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"Часть 1: Простая аналогия — проверка орфографии в Word","type":"header-three","key":"584l1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте проведём параллель с тем, что знакомо каждому:","type":"unstyled","key":"cd3f6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"91pg6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"ITALIC"},{"length":30,"offset":69,"style":"ITALIC"},{"length":50,"offset":122,"style":"ITALIC"},{"length":33,"offset":196,"style":"ITALIC"}],"text":" \n

Привет, мир!

\n \n
Это мой website. \n ","type":"unstyled","key":"5p5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Word подчеркнёт красным: \"website\" (предложит исправить на \"веб-сайт\")","type":"unstyled","key":"jq5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Валидатор подчеркнёт: незакрытый тег и отсутствие alt","type":"unstyled","key":"evcl3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"88nj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Часть 2: Что такое валидатор на самом деле?","type":"header-three","key":"5cbn8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Валидатор — это специальная программа или онлайн-сервис, который проверяет HTML-код на соответствие стандартам W3C (World Wide Web Consortium).","type":"unstyled","key":"192k1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"7m3ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"ITALIC"},{"length":33,"offset":60,"style":"ITALIC"},{"length":43,"offset":125,"style":"ITALIC"},{"length":51,"offset":211,"style":"ITALIC"},{"length":33,"offset":286,"style":"ITALIC"}],"text":" \n\n \n
\n
Текст \n
\n\n \n
Текст
\n\n \n \n\n \nБольшой текст","type":"unstyled","key":"b10e1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bikn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Часть 3: Типы валидаторов и где их найти","type":"header-three","key":"ah8rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"cf25j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"3.1. Онлайн-валидаторы","type":"header-three","key":"b70kj"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":19}],"inlineStyleRanges":[{"length":16,"offset":19,"style":"BOLD"}],"text":"Самый популярный — Validator.w3.org:","type":"unstyled","key":"cq5of"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"d3g01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"},{"length":38,"offset":155,"style":"ITALIC"},{"length":32,"offset":222,"style":"ITALIC"}],"text":" \n \n \n \n Страница с ошибками \n \n \n

Заголовок \n \n \n","type":"unstyled","key":"8rdtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Результат проверки:","type":"unstyled","key":"9kuv1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Error: End tag for h1 missing","type":"unstyled","key":"2gun8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⚠️ Warning: Consider adding alt attribute","type":"unstyled","key":"r5hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"cnk7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"3.2. Валидаторы в редакторах кода","type":"header-three","key":"m6c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9gldo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"ITALIC"},{"length":57,"offset":123,"style":"ITALIC"}],"text":" \n
Текст внутри
\n
\n","type":"unstyled","key":"68s9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"ef9v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Часть 4: Полная страница с объяснением и примерами","type":"header-three","key":"8oep0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"8cqq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":3277,"style":"ITALIC"},{"length":28,"offset":5074,"style":"ITALIC"},{"length":23,"offset":6180,"style":"ITALIC"},{"length":30,"offset":7535,"style":"ITALIC"},{"length":37,"offset":9507,"style":"ITALIC"},{"length":31,"offset":11158,"style":"ITALIC"},{"length":29,"offset":12855,"style":"ITALIC"},{"length":18,"offset":14294,"style":"ITALIC"}],"text":" \n \n \n \n Валидаторы в HTML: Ваш код-корректор \n \n \n \n

\uD83D\uDD0D Валидатор HTML: Ваш личный инспектор кода

\n\n

\n \uD83D\uDCA1 Простая аналогия: Валидатор — это как проверка орфографии в Word, но для HTML-кода. Он находит ошибки, указывает на проблемы и помогает писать корректный, стандартный код. \n

\n\n \n

1. Аналогия: Проверка орфографии в Word vs Валидация HTML

\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

Microsoft Word	HTML Валидатор	Объяснение
Подчёркивает орфографические ошибки красным	Показывает синтаксические ошибки в коде	Оба находят нарушения правил языка
Предлагает варианты исправления	Указывает, как исправить ошибку	Помогают улучшить качество текста/кода
Проверяет пунктуацию	Проверяет правильность структуры тегов	Следят за правильным оформлением
Можно игнорировать ошибки (но не стоит)	Можно пропустить ошибки (но страдает качество)	Ошибки лучше исправлять сразу

\n\n

\uD83D\uDCDD Пример из жизни:

В Word Вы написали: \"Сегодня я иду в кина.\"

Word подчеркнёт: \"кина\" и предложит: \"кино\"

\n \n

В HTML Вы написали:

Текст абзаца \n

Валидатор покажет: \"End tag p missing\" (Не хватает закрывающего тега p)

\n\n \n

2. Что такое валидатор и как он работает?

\n\n

\n \uD83C\uDFAF Определение: Валидатор — это программа, которая проверяет HTML-код на соответствие официальным стандартам W3C (Консорциум Всемирной паутины). \n

\n\n

\n \n \n \n \n Пример страницы для валидации \n \n \n

Заголовок страницы

Абзац текста с выделением.

\n $\"Описание$ \n \n \n

\n\n

Валидатор проверяет:

✅ Правильность структуры тегов
✅ Корректность вложенности элементов
✅ Наличие обязательных атрибутов
✅ Соответствие объявленному типу документа (DOCTYPE)
✅ Использование устаревших тегов и атрибутов

\n\n \n

3. Примеры ошибок, которые находит валидатор

\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

4. Зачем вообще нужен валидатор? 6 главных причин

\n\n

\uD83C\uDF10 1. Кроссбраузерность

Валидный код одинаково хорошо работает во всех браузерах (Chrome, Firefox, Safari, Edge)

\n\n

♿ 2. Доступность

Правильный HTML лучше работает с программами чтения для слабовидящих

\n\n

\uD83D\uDE80 3. Скорость загрузки

Браузеры быстрее обрабатывают валидный код

\n\n

\uD83D\uDCF1 4. Адаптивность

Корректный HTML лучше адаптируется под мобильные устройства

\n\n

\uD83D\uDD0D 5. SEO-оптимизация

Поисковые системы лучше индексируют валидные страницы

\n\n

\uD83D\uDC68‍\uD83D\uDCBB 6. Простота поддержки

Код без ошибок легче понимать и изменять

\n\n \n

5. Как пользоваться онлайн-валидатором W3C

\n\n

\n \uD83D\uDEE0️ Практическое руководство: \n

\n\n

Перейдите на сайт: validator.w3.org
Выберите способ проверки: \n
- По URL (если сайт уже в интернете)
- Загрузка файла (если есть HTML-файл)
- Ввод кода (для быстрой проверки фрагмента)
\n
Нажмите \"Check\": Валидатор проанализирует код
Изучите результаты: Ошибки (красным) и предупреждения (жёлтым)
Исправьте ошибки: Следуйте рекомендациям валидатора

\n\n

\uD83D\uDCCB Пример отчёта валидатора:

❌ Error: End tag for h1 missing

Line 8, Column 1:

⚠️ Warning: Consider adding alt attribute

Line 7, Column 1:

\n\n \n

6. Типичные ошибки, которые находит валидатор

\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

Ошибка	Пример	Исправление	Почему важно
Незакрытые теги	`Текст`	`Текст`	Браузер не понимает, где заканчивается элемент
Неправильная вложенность	`Текст`	`Текст`	Нарушает древовидную структуру документа
Отсутствие alt у изображений			Важно для доступности и SEO
Устаревшие теги		Использовать CSS	Современные браузеры могут не поддерживать
Отсутствие doctype	Нет	Добавить в начало	Браузер не понимает версию HTML

\n\n \n

\uD83C\uDFAF Практическое задание: Найди ошибки!

\n\n

Проверь свои навыки: найди 5 ошибок в этом коде

\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\uDCDD Задание: Найдите все ошибки и напишите исправленный вариант кода. \n Затем проверьте его на validator.w3.org! \n

\n\n

\uD83D\uDCA1 Подсказка: Какие ошибки искать?

Незакрытые теги
Неправильная вложенность
Отсутствие важных атрибутов
Устаревшие теги
Отсутствие атрибута lang

\n\n \n

\uD83D\uDCCB Шпаргалка по валидации

\n\n

✅ Обязательные элементы

</code></li> \n </ul> \n </div> \n\n <div style=\"border: 2px solid #e74c3c; padding: 15px; border-radius: 8px;\"> \n <h3 style=\"color: #e74c3c; margin-top: 0;\">\uD83D\uDEAB Частые ошибки</h3> \n <ul> \n <li>Незакрытые теги</li> \n <li>Нет alt у img</li> \n <li>Неправильная вложенность</li> \n <li>Устаревшие теги</li> \n </ul> \n </div> \n\n <div style=\"border: 2px solid #27ae60; padding: 15px; border-radius: 8px;\"> \n <h3 style=\"color: #27ae60; margin-top: 0;\">\uD83D\uDD27 Инструменты</h3> \n <ul> \n <li>validator.w3.org</li> \n <li>Встроенные в редакторы кода</li> \n <li>Браузерные расширения</li> \n <li>Инструменты разработчика</li> \n </ul> \n </div> \n </div> \n </div> \n</body> \n</html>","type":"unstyled","key":"cf5p7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"2uk9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Часть 7: Что Вы теперь знаете о валидаторах","type":"header-three","key":"3cinr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"},{"length":27,"offset":54,"style":"BOLD"},{"length":31,"offset":103,"style":"BOLD"},{"length":28,"offset":150,"style":"BOLD"},{"length":38,"offset":201,"style":"BOLD"},{"length":29,"offset":247,"style":"BOLD"}],"text":"✅ Понимаете аналогию с проверкой орфографии в Word\n ✅ Знаете, что такое валидатор и как он работает\n ✅ Можете находить типичные ошибки в HTML-коде\n ✅ Понимаете важность валидации для качества сайта\n ✅ Умеете пользоваться онлайн-валидатором W3C\n ✅ Знаете частые ошибки новичков и как их избежать","type":"unstyled","key":"38que"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"42ur2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 8: Итоги и рекомендации","type":"header-three","key":"18v1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые выводы:","type":"unstyled","key":"5ptlu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Валидатор \t— это помощник, \tа не критик","type":"ordered-list-item","key":"ajgnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Проверять \tкод нужно регулярно, \tа не только в конце","type":"ordered-list-item","key":"34g7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Валидный \tкод — это профессиональный код","type":"ordered-list-item","key":"4o2l3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Ошибки \tлучше находить сразу, \tчем исправлять последствия","type":"ordered-list-item","key":"5f968"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Практические советы:","type":"unstyled","key":"fca1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Проверяйте \tкаждую страницу перед \tпубликацией","type":"unordered-list-item","key":"19t2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Исправляйте \tошибки по порядку — \tиногда одна ошибка вызывает несколько \tсообщений","type":"unordered-list-item","key":"5tcc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Не \tигнорируйте предупреждения — \tони указывают на потенциальные проблемы","type":"unordered-list-item","key":"7pp5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Используйте \tвалидацию как учебный инструмент — \tучитесь на ошибках","type":"unordered-list-item","key":"6effa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Следующие шаги:","type":"unstyled","key":"9affl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начните \tиспользовать валидатор для своих \tпроектов","type":"unordered-list-item","key":"e97us"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучите \tинструменты валидации в Вашем редакторе \tкода","type":"unordered-list-item","key":"8dvig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Узнайте \tо валидации CSS и доступности (accessibility)","type":"unordered-list-item","key":"d6jc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изучите \tсемантическую вёрстку для ещё лучшего \tкачества кода","type":"unordered-list-item","key":"7hh7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":160,"offset":0,"style":"BOLD"}],"text":"Помните: Валидатор — это Ваш друг, который помогает стать лучше как разработчик. Используйте его регулярно, и Ваш код будет чистым, профессиональным и надёжным! \uD83C\uDF1F","type":"unstyled","key":"3b6dt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":11,"style":"BOLD"}],"text":"- * * * -\n\n12.2. Простой онлайн-инструмент для проверки HTML-кода\n\n","type":"header-three","key":"dqspr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":"Введение: Ваша виртуальная мастерская по ремонту кода","type":"unstyled","key":"9be35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что у Вас есть автомобиль, и Вы хотите быть уверены, что всё работает исправно. Вы едете в автосервис, где мастер проводит диагностику. Онлайн-валидатор — это такой же \"автосервис\", но для Вашего HTML-кода! Он проводит полную диагностику и показывает, что нужно починить.","type":"unstyled","key":"97bgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"fqmu7"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":16,"offset":39}],"inlineStyleRanges":[{"length":55,"offset":0,"style":"BOLD"}],"text":"Часть 1: Самый популярный инструмент — Validator.w3.org","type":"header-three","key":"etl13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"W3C Markup Validation Service — это официальный валидатор от организации, которая создаёт стандарты для интернета.","type":"unstyled","key":"cqk2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"e55a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"ITALIC"}],"text":" \n<!DOCTYPE html> \n<html lang=\"ru\"> \n<head> \n <meta charset=\"utf-8\"> \n <title>Мой сайт \n \n \n Привет, мир! \n Это мой первый сайт \n \n \n","type":"unstyled","key":"6s9k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"89sn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"Часть 2: Пошаговая инструкция использования W3C Validator","type":"header-three","key":"16fun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"71cb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Открываем валидатор","type":"header-three","key":"bcvud"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":24,"offset":14}],"inlineStyleRanges":[{"length":24,"offset":14,"style":"BOLD"}],"text":"Переходим на: https://validator.w3.org","type":"unstyled","key":"bdpva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы увидим три способа проверки:","type":"unstyled","key":"bjjrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"3u98a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[\uD83D\uDD17 Validate by URI] - Проверка по адресу сайта \n[\uD83D\uDCC1 Validate by File Upload] - Проверка загруженного файла \n[\uD83D\uDCDD Validate by Direct Input] - Проверка введенного кода","type":"unstyled","key":"104gd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5t2o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Выбираем способ проверки","type":"header-three","key":"6fbm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Способ 1: Проверка по адресу (URI)","type":"unstyled","key":"5g1nm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"a50l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"ITALIC"}],"text":" \nВставляем: https://мойсайт.ru \nНажимаем: CHECK","type":"unstyled","key":"dpm3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Способ 2: Загрузка файла","type":"unstyled","key":"65rba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"1l0f5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"ITALIC"}],"text":" \n1. Нажимаем \"Choose File\" \n2. Выбираем файл index.html \n3. Нажимаем \"Check\"","type":"unstyled","key":"adhdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Способ 3: Прямой ввод кода","type":"unstyled","key":"8hube"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"8f8jl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"ITALIC"}],"text":" \n1. Вставляем код в текстовое поле \n2. Нажимаем \"Check\"","type":"unstyled","key":"572v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"c1hbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Часть 3: Полная страница с практическими примерами","type":"header-three","key":"51am3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"7f88h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":4174,"style":"ITALIC"},{"length":27,"offset":6471,"style":"ITALIC"},{"length":28,"offset":8471,"style":"ITALIC"},{"length":37,"offset":10271,"style":"ITALIC"},{"length":31,"offset":12071,"style":"ITALIC"},{"length":29,"offset":13701,"style":"ITALIC"},{"length":34,"offset":15547,"style":"ITALIC"}],"text":" \n \n \n \n Онлайн-валидаторы HTML: Простые инструменты для проверки кода \n \n \n \n \uD83D\uDEE0️ Простые онлайн-инструменты для проверки HTML-кода \n\n \n \uD83D\uDCA1 Основная идея: Онлайн-валидаторы — это бесплатные инструменты, которые работают прямо в браузере. \n Вам не нужно ничего устанавливать на компьютер — просто заходите на сайт, вставляете код и получаете результат! \n \n\n \n \n 1. W3C Markup Validation Service — Официальный стандарт \n\n \n \uD83C\uDF10 Адрес: validator.w3.org \n \uD83C\uDFAF Назначение: Проверка HTML-кода на соответствие стандартам W3C \n \n\n \n \n 1 \n Открываем валидатор \n Переходим на validator.w3.org \n \n> validator.w3.org \n> ================= \n> [ Validate by URI ] \n> [ Validate by File Upload ] \n> [ Validate by Direct Input ] \n \n \n\n \n 2 \n Выбираем способ проверки \n \n \n \uD83D\uDCDD Validate by Direct Input (самый простой способ) \n Подходит для быстрой проверки фрагментов кода \n \n \n \n \n \n Мой сайт \n \n \n Привет! \n \n \n \n \n \n\n \n 3 \n Нажимаем \"Check\" и получаем результат \n \n \n ✅ Успешная проверка: \n \n✔ Document checking completed. No errors or warnings to show. \n \n \n\n \n ❌ Обнаружены ошибки: \n \nError: End tag for h1 missing \nLine 7, Column 1: \n✗ Validation failed: 1 error \n \n \n \n \n \n\n \n \n 2. Другие популярные онлайн-валидаторы \n\n \n \n \uD83D\uDD0D HTML Validator (FreeFormatter.com) \n Адрес: freeformatter.com/html-validator.html \n Преимущества: \n \n Более понятный интерфейс \n Подсветка ошибок в коде \n Подробные объяснения \n \n \n \n1. Вставляем код \n2. Нажимаем \"Validate\" \n3. Видим ошибки прямо в коде \n \n \n\n \n \uD83D\uDCCB CSS HTML Validator \n Адрес: htmlvalidator.com \n Преимущества: \n \n Проверка и HTML, и CSS \n Проверка доступности \n SEO-анализ \n \n \n \n✓ Проверка HTML/CSS \n✓ Доступность (accessibility) \n✓ SEO-оптимизация \n✓ Скорость загрузки \n \n \n\n \n \uD83C\uDF10 Validator.nu \n Адрес: validator.nu \n Преимущества: \n \n Современные стандарты HTML5 \n Быстрая проверка \n Поддержка новых тегов \n \n \n \n• HTML5 валидация \n• Быстрая работа \n• Современные стандарты \n \n \n \n \n\n \n \n 3. Практический пример: Проверяем реальный код \n\n \n \uD83D\uDD0D Проверим этот код в онлайн-валидаторе: \n \n \n \n \n \n Мой учебный сайт \n \n \n Добро пожаловать \n Это мой первый сайт с выделением \n \n Центрированный текст \n \n \n \n\n \n \uD83C\uDFAF Задание: \n \n Скопируйте код выше \n Перейдите на validator.w3.org \n Выберите \"Validate by Direct Input\" \n Вставьте код и нажмите \"Check\" \n Запишите все найденные ошибки \n \n \n \n\n \n \uD83D\uDCA1 Ожидаемый результат проверки: \n \n ❌ Валидатор покажет эти ошибки: \n \n Error: End tag for h1 missing \n Error: Element em not allowed as child of element strong in this context \n Warning: Consider adding alt attribute to img \n Error: Element center not allowed as child of element body in this context \n \n \n \n \n\n \n \n 4. Специализированные инструменты для разных задач \n\n \n \n \uD83D\uDCF1 Мобильная верстка \n Google Mobile-Friendly Test \n search.google.com/test/mobile-friendly \n Проверяет адаптивность для смартфонов \n \n\n \n ♿ Доступность \n WAVE Web Accessibility Evaluation Tool \n wave.webaim.org \n Проверяет доступность для людей с ограничениями \n \n\n \n \uD83D\uDE80 Скорость \n Google PageSpeed Insights \n developers.google.com/speed/pagespeed/insights \n Анализирует скорость загрузки страницы \n \n\n \n \uD83D\uDD0D SEO \n SEO Site Checkup \n seositecheckup.com \n Проверяет SEO-оптимизацию страницы \n \n \n \n\n \n \n 5. Встроенные инструменты в браузерах \n\n \n \uD83C\uDFAF Не нужно даже открывать другие сайты! Современные браузеры имеют встроенные инструменты для проверки кода. \n \n\n \n \n 1 \n Открываем Инструменты разработчика \n Windows/Linux: F12 или Ctrl+Shift+I \n Mac: Cmd+Option+I \n Простой способ: Правой кнопкой → \"Просмотреть код\" \n \n\n \n 2 \n Находим вкладку \"Console\" (Консоль) \n Здесь браузер показывает ошибки и предупреждения в реальном времени \n \n[Console Tab] \n> Error: Uncaught SyntaxError: ... \n> Warning: ... \n> Info: ... \n \n \n\n \n 3 \n Используем вкладку \"Elements\" (Элементы) \n Показывает HTML-структуру страницы и подсвечивает проблемы \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 Помидоры 10 кустов \n \n \n Приходите в гости! \n \n \n \n\n \n \uD83D\uDCDD Задание: \n \n Скопируйте код выше \n Проверьте его в W3C Validator \n Запишите все найденные ошибки \n Исправьте код \n Проверьте исправленный код \n Добейтесь сообщения \"No errors or warnings\" \n \n \n\n \n \uD83D\uDCA1 Подсказка: Какие ошибки искать? \n \n Незакрытые теги \n Неправильная вложенность \n Отсутствие обязательных элементов \n Устаревшие теги \n Пропущенные атрибуты \n \n \n \n \n\n \n \n \uD83D\uDCCB Шпаргалка по онлайн-инструментам \n\n \n \n \uD83D\uDD27 Основные валидаторы \n \n W3C Validator - validator.w3.org \n FreeFormatter - freeformatter.com \n HTML Validator - htmlvalidator.com \n Validator.nu - validator.nu \n \n \n\n \n \uD83C\uDFAF Специализированные инструменты \n \n Mobile Test - Google Mobile-Friendly \n Accessibility - WAVE \n Speed Test - PageSpeed Insights \n SEO Check - SEO Site Checkup \n \n \n\n \n ⚡ Быстрая проверка \n \n Браузерная консоль - F12 \n Проверка фрагментов - Direct Input \n Расширения браузера - HTML Validator \n Редакторы кода - Встроенная проверка \n \n \n \n \n\n \n \uD83C\uDF1F Итоговый совет: Начните с W3C Validator — это официальный инструмент с самыми точными проверками. \n Используйте его для каждой страницы, которую создаёте, и Ваш код всегда будет соответствовать стандартам! \n \n \n","type":"unstyled","key":"bibj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bfhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 6: Что Вы теперь умеете","type":"header-three","key":"eoudm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"},{"length":35,"offset":68,"style":"BOLD"},{"length":28,"offset":132,"style":"BOLD"},{"length":38,"offset":190,"style":"BOLD"},{"length":32,"offset":249,"style":"BOLD"},{"length":28,"offset":306,"style":"BOLD"}],"text":"✅ Пользоваться W3C Validator — официальным инструментом проверки\n ✅ Выбирать подходящий способ проверки (URI, файл, прямой ввод)\n ✅ Понимать результаты проверки — ошибки и предупреждения\n ✅ Использовать альтернативные валидаторы для разных задач\n ✅ Применять браузерные инструменты для быстрой проверки\n ✅ Находить и исправлять ошибки в реальном коде","type":"unstyled","key":"bjtj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8m571"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 7: Итоги и рекомендации","type":"header-three","key":"dhpsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые преимущества онлайн-валидаторов:","type":"unstyled","key":"avb8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Бесплатность — \tне нужно ничего покупать","type":"ordered-list-item","key":"7mgjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Доступность — \tработают из любого браузера","type":"ordered-list-item","key":"7omt3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Простота — \tинтуитивно понятный интерфейс","type":"ordered-list-item","key":"bsp3j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Точность — \tпроверяют по официальным стандартам","type":"ordered-list-item","key":"btvtm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Обучение — \tпомогают понять ошибки и исправить их","type":"ordered-list-item","key":"2jlep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Практические советы по использованию:","type":"unstyled","key":"17vec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Начните с W3C Validator — это золотой стандарт","type":"unstyled","key":"6t2v6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Проверяйте код постепенно — не ждите окончания проекта","type":"unstyled","key":"14grg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Читайте объяснения ошибок — это лучший способ обучения","type":"unstyled","key":"d9ta9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Исправляйте ошибки по порядку — иногда одна ошибка вызывает несколько сообщений","type":"unstyled","key":"ag30e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Сохраняйте отчеты — чтобы отслеживать прогресс","type":"unstyled","key":"bf59r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Простые шаги для начала:","type":"unstyled","key":"925l1"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":16,"offset":20}],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Закладка — добавьте validator.w3.org в закладки","type":"unstyled","key":"fbv9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Привычка — проверяйте каждую новую страницу","type":"unstyled","key":"73t0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Анализ — изучайте не только ошибки, но и предупреждения","type":"unstyled","key":"2bkk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Практика — используйте валидатор как учебное пособие","type":"unstyled","key":"8kfpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":182,"offset":0,"style":"BOLD"}],"text":"Помните: Онлайн-валидаторы — это Ваши бесплатные персональные репетиторы по HTML. Используйте их регулярно, и Вы быстро станете экспертом в создании качественного, стандартного кода! \uD83C\uDF1F","type":"unstyled","key":"965le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- * * * -\n\n","type":"unstyled","key":"34rke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"12.3. Как читать сообщения об ошибках и не пугаться их\n\n","type":"header-three","key":"f06au"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":64,"offset":0,"style":"BOLD"}],"text":"Введение: Ваш друг-переводчик с \"технического\" на \"человеческий\"","type":"unstyled","key":"abmvg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что Вы впервые приехали в другую страну и не знаете язык. Сначала всё кажется непонятным и пугающим. Но потом Вы находите переводчика, который объясняет, что на самом деле означают эти странные слова. Сообщения об ошибках — это такой же \"иностранный язык\", а сегодня мы станем Вашим переводчиком!","type":"unstyled","key":"ccarj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"e1un9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"Часть 1: Почему сообщения об ошибках кажутся страшными","type":"header-three","key":"8sg6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте посмотрим на типичное сообщение об ошибке:","type":"unstyled","key":"42u8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"br8l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Error: End tag for li seen, but there were open elements. \nLine 38, Column 25:

","type":"unstyled","key":"42tth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Что видит новичок:","type":"unstyled","key":"7ngqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Непонятные английские слова","type":"unstyled","key":"9jd8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Странные технические термины","type":"unstyled","key":"dj6kq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Номера строк и столбцов","type":"unstyled","key":"ch3vt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Паника: \"Я ничего не понимаю!\"","type":"unstyled","key":"7urug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Что видит опытный разработчик:","type":"unstyled","key":"60itb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Конкретное указание на проблему","type":"unstyled","key":"av8qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Точное место ошибки","type":"unstyled","key":"a9s8a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ Чёткое объяснение","type":"unstyled","key":"7e1cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ План действий по исправлению","type":"unstyled","key":"5j319"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3a5g0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Часть 2: Анатомия сообщения об ошибке","type":"header-three","key":"89c7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём типичное сообщение на части:","type":"unstyled","key":"bijhe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"9jqpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"}],"text":" \n \n    Пункт 1 \n    
Пункт 2
 \n
","type":"unstyled","key":"rncm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Сообщение валидатора:","type":"unstyled","key":"bj1rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"3fpql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ Error: Unclosed element \"li\" \n Line 2, Column 10: Пункт 1 \n Suggestion: Add closing tag 
","type":"unstyled","key":"fu2b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Разбираем по частям:","type":"unstyled","key":"5mgvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"❌ Error — тип проблемы (ошибка, а не предупреждение)","type":"unstyled","key":"4shjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Unclosed element \"li\" — суть проблемы (не закрыт элемент li)","type":"unstyled","key":"ev0k3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Line 2, Column 10 — точное местоположение","type":"unstyled","key":"2ojlp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Add closing tag  — конкретное решение","type":"unstyled","key":"8qeqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"d9328"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Часть 3: Полная страница с расшифровкой сообщений об ошибках","type":"header-three","key":"blhv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"dji6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":4679,"style":"ITALIC"},{"length":37,"offset":6190,"style":"ITALIC"},{"length":40,"offset":8487,"style":"ITALIC"},{"length":36,"offset":11063,"style":"ITALIC"},{"length":36,"offset":13532,"style":"ITALIC"},{"length":38,"offset":15405,"style":"ITALIC"},{"length":29,"offset":17202,"style":"ITALIC"},{"length":18,"offset":19898,"style":"ITALIC"}],"text":" \n \n \n     \n    Как читать сообщения об ошибках: Расшифровываем язык валидаторов \n     \n \n \n    \uD83D\uDD0D Как читать сообщения об ошибках и не пугаться их
 \n\n     \n        \uD83D\uDCA1 Основная идея: Сообщения об ошибках — это не критика, а помощь! Они как дорожные знаки: показывают, где нужно быть внимательным и что исправить, чтобы безопасно достичь цели. \n    
 \n\n     \n     \n        1. Почему мы пугаемся ошибок? Психологический аспект
 \n\n         \n             \n                \uD83D\uDE28 Страх новичка
 \n                 \n                    \"Я сделал что-то неправильно\"
 \n                    \"Это слишком сложно для меня\"
 \n                    \"Я никогда не пойму эти термины\"
 \n                    \"Лучше бросить, чем разбираться\"
 \n                
 \n            
 \n\n             \n                \uD83D\uDE0A Реальность
 \n                 \n                    Ошибки — нормальная часть обучения
 \n                    Даже эксперты постоянно видят ошибки
 \n                    Каждая ошибка — возможность научиться
 \n                    Сообщения созданы, чтобы помочь вам
 \n                
 \n            
 \n        
 \n\n         \n            \uD83C\uDFAF Помните: Каждая найденная ошибка — это шаг вперёд в Вашем обучении. Профессионалы не те, кто не делает ошибок, а те, кто умеет их быстро находить и исправлять! \n        
 \n    
 \n\n     \n     \n        2. Анатомия сообщения об ошибке: Разбираем на части
 \n\n         \n            \uD83D\uDD0D Рассмотрим реальное сообщение об ошибке:
 \n             \n             \n                ERROR \n                End tag for \"p\" missing, but its declaration does not permit this.
 \n                Line 5, Column 3: 
 \n                Info: You probably forgot to close the \"p\" element. \n            
 \n\n             \n                ERROR
 \n                 \n                    Тип проблемы: Это ошибка (требует исправления), а не предупреждение \n                
 \n\n                Сообщение
 \n                 \n                    Суть проблемы: \"Не хватает закрывающего тега для 'p', но его объявление это не разрешает\" \n                
 \n\n                Line 5, Column 3
 \n                 \n                    Местоположение: Ошибка в 5-й строке, в 3-м символе (считая слева) \n                
 \n\n                Info
 \n                 \n                    Подсказка: \"Вы, вероятно, забыли закрыть элемент 'p'\" \n                
 \n            
 \n        
 \n\n         \n            \uD83E\uDDE9 Что было в коде:
 \n             \n \n \n \n    Пример \n \n \n    Этот абзац не закрыт \n    
 \n        Другой контент \n    
 \n \n \n            
 \n             \n            \uD83D\uDD27 Как исправить:
 \n             \n \n \n \n    Пример \n \n \n    Этот абзац не закрыт
 \n     \n        Другой контент \n    
 \n \n \n            
 \n        
 \n    
 \n\n     \n     \n        3. Словарь распространённых сообщений об ошибках
 \n\n         \n             \n                \uD83D\uDEAB \"End tag for ... missing\"
 \n                Перевод: \"Не хватает закрывающего тега для ...\"
 \n                Пример: 
Текст
 \n                Исправление: Добавить 
 \n            
 \n\n             \n                \uD83D\uDEAB \"Element ... not allowed as child of element ...\"
 \n                Перевод: \"Элемент ... нельзя размещать внутри элемента ...\"
 \n                Пример: 
нельзя
 \n                Исправление: Изменить структуру вложенности
 \n            
 \n\n             \n                ⚠️ \"Consider adding alt attribute\"
 \n                Перевод: \"Рекомендуется добавить атрибут alt\"
 \n                Пример: 
 \n                Исправление: 
 \n            
 \n\n             \n                \uD83D\uDEAB \"Duplicate attribute ...\"
 \n                Перевод: \"Повторяющийся атрибут ...\"
 \n                Пример: 
 \n                Исправление: 
 \n            
 \n\n             \n                \uD83D\uDEAB \"Attribute ... not allowed on element ...\"
 \n                Перевод: \"Атрибут ... нельзя использовать с элементом ...\"
 \n                Пример: 
 \n                Исправление: Использовать правильный элемент
 \n            
 \n\n             \n                \uD83D\uDEAB \"Bad value ... for attribute ...\"
 \n                Перевод: \"Неправильное значение ... для атрибута ...\"
 \n                Пример: 
 \n                Исправление: Использовать правильное значение
 \n            
 \n        
 \n    
 \n\n     \n     \n        4. Пошаговая стратегия работы с ошибками
 \n\n         \n             \n                1️⃣
 \n                Не паникуйте
 \n                Ошибки — это нормально. Сделайте глубокий вдох.
 \n            
 \n\n             \n                2️⃣
 \n                Прочитайте внимательно
 \n                Не просто пробегите глазами, а прочитайте каждое слово.
 \n            
 \n\n             \n                3️⃣
 \n                Найдите место ошибки
 \n                Используйте указание строки и столбца.
 \n            
 \n\n             \n                4️⃣
 \n                Поймите суть
 \n                Что именно говорит сообщение? Используйте наш \"переводчик\".
 \n            
 \n\n             \n                5️⃣
 \n                Исправьте одну ошибку
 \n                Не пытайтесь исправить всё сразу.
 \n            
 \n\n             \n                6️⃣
 \n                Проверьте снова
 \n                Убедитесь, что ошибка исчезла, и переходите к следующей.
 \n            
 \n        
 \n    
 \n\n     \n     \n        5. Практика: Переводчик с \"технического\" на \"человеческий\"
 \n\n         \n             \n                ❌ Error: Attribute \"border\" not allowed on element \"table\" at this point.
 \n                \uD83D\uDCCD Line 10, Column 15:  \n             \n             \n                \uD83E\uDDD1‍\uD83D\uDCBB Человеческий перевод:
 \n                \"Вы использовали атрибут 'border' у элемента 'table', но в современном HTML это не разрешается. Вместо этого используйте CSS для задания границ таблицы.\" \n            
 \n         \n\n         \n             \n                ❌ Error: Duplicate ID \"header\".
 \n                \uD83D\uDCCD Line 5, Column 10: 
 \n                \uD83D\uDCCD Line 15, Column 10:  \n            
 \n             \n                \uD83E\uDDD1‍\uD83D\uDCBB Человеческий перевод:
 \n                \"Вы использовали одинаковый ID 'header' для двух разных элементов. ID должны быть уникальными на странице. Измените один из них на другое значение.\" \n            
 \n        
 \n\n         \n             \n                ⚠️ Warning: Section lacks heading. Consider using h2-h6 elements.
 \n                \uD83D\uDCCD Line 8, Column 3:  \n            
 \n             \n                \uD83E\uDDD1‍\uD83D\uDCBB Человеческий перевод:
 \n                \"В секции  нет заголовка. Рекомендуется добавить заголовок (h2, h3, h4, h5 или h6) в начало секции для лучшей структуры и доступности.\" \n            
 \n        
 \n    
 \n\n     \n     \n        6. Как работать с несколькими ошибками одновременно
 \n\n         \n            \uD83C\uDFAF Важная стратегия: Когда валидатор показывает 10+ ошибок, не пытайтесь исправить всё сразу.  \n            Часто одна основная ошибка вызывает несколько вторичных. \n        
 \n\n         \n            \uD83D\uDCCB Пример: Цепочка ошибок
 \n             \n             \n \n \n \n    Мой сайт \n \n \n     \n        Первый абзац \n        
Второй абзац \n        
 \n            Пункт 1 \n            
Пункт 2 \n        
 \n     \n \n \n            
 \n\n             \n                Сообщения валидатора:
 \n                1. ❌ End tag for \"p\" missing
 \n                2. ❌ End tag for \"p\" missing  
 \n                3. ❌ End tag for \"li\" missing
 \n                4. ❌ End tag for \"li\" missing
 \n                5. ❌ End tag for \"div\" missing
 \n                6. ❌ Unexpected end tag : div \n            
 \n\n             \n                \uD83D\uDCA1 Решение: Начните с первой ошибки. После исправления незакрытого  многие последующие ошибки могут исчезнуть автоматически! \n            
 \n        
 \n\n         \n            \uD83C\uDFAF Практический совет:
 \n            Исправляйте ошибки в порядке их появления в коде, а не в порядке списка валидатора.
 \n            Часто ошибка в начале кода \"ломает\" понимание всего последующего кода браузером.
 \n        
 \n    
 \n\n     \n     \n        \uD83C\uDFAF Практическое задание: Стань супер-детективом ошибок!
 \n\n         \n            Расшифруй эти сообщения об ошибках
 \n             \n             \n                \uD83D\uDD0D Сообщение 1:
 \n                 \n                    ❌ Error: Bad value \"button\" for attribute \"type\" on element \"input\".
 \n                    \uD83D\uDCCD Line 7, Column 25:  \n                
 \n\n                 \n                    Вопросы для размышления: \n                     \n                        Что означает \"Bad value\"?
 \n                        Почему \"button\" — неправильное значение для type?
 \n                        Какие правильные значения Вы знаете для type у input?
 \n                        Как бы Вы исправили эту ошибку?
 \n                    
 \n                
 \n            
 \n\n             \n                \uD83D\uDD0D Сообщение 2:
 \n                 \n                    ⚠️ Warning: The \"name\" attribute is obsolete. Consider putting an \"id\" on the nearest container instead.
 \n                    \uD83D\uDCCD Line 3, Column 15:  \n                
 \n\n                 \n                    Вопросы для размышления: \n                     \n                        Что означает \"obsolete\"?
 \n                        Почему атрибут \"name\" устарел для ссылок?
 \n                        Что рекомендуется использовать вместо этого?
 \n                        Как бы Вы переписали этот код?
 \n                    
 \n                
 \n            
 \n\n             \n                \uD83D\uDCA1 Подсказки и ответы:
 \n                 \n                    \uD83D\uDD0D Ответ к Сообщению 1:
 \n                    \"button\" — неправильное значение для type у input. Правильные значения: \"text\", \"password\", \"email\", \"submit\" и др. Для кнопки используйте 
 \n        
 \n    
 \n\n     \n     \n        \uD83D\uDCCB Шпаргалка: Не паникуй! Руководство по выживанию
 \n\n         \n             \n                \uD83E\uDDD8‍♀️ Психологическая подготовка
 \n                 \n                    Ошибки — это помощь, а не критика
 \n                    Каждая ошибка — урок
 \n                    Даже гении видят ошибки
 \n                    Сделайте перерыв, если чувствуете разочарование
 \n                
 \n            
 \n\n             \n                \uD83D\uDD0D Техника чтения ошибок
 \n                 \n                    Читайте медленно и внимательно
 \n                    Разбирайте сообщение на части
 \n                    Используйте указания строк и столбцов
 \n                    Ищите ключевые слова
 \n                
 \n            
 \n\n             \n                ⚡ Стратегия исправления
 \n                 \n                    Исправляйте по одной ошибке за раз
 \n                    Начинайте с первых ошибок в коде
 \n                    Проверяйте после каждого исправления
 \n                    Не бойтесь экспериментировать
 \n                
 \n            
 \n        
 \n\n         \n            \uD83C\uDF1F Запомните: Сообщения об ошибках — это Ваш лучший друг в обучении.  \n            Они как личный репетитор, который всегда рядом и бесплатно помогает Вам становиться лучше! \n        
 \n    
 \n \n","type":"unstyled","key":"124q4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"7pn3l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 7: Что Вы теперь умеете","type":"header-three","key":"akemn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"},{"length":30,"offset":48,"style":"BOLD"},{"length":25,"offset":101,"style":"BOLD"},{"length":29,"offset":167,"style":"BOLD"},{"length":31,"offset":218,"style":"BOLD"},{"length":41,"offset":266,"style":"BOLD"}],"text":"✅ Понимать психологию ошибок и не бояться их\n ✅ Разбирать сообщения об ошибках на составные части\n ✅ Использовать \"переводчик\" с технического языка на человеческий\n ✅ Применять пошаговую стратегию работы с ошибками\n ✅ Работать с несколькими ошибками одновременно\n ✅ Распознавать распространённые типы ошибок и быстро их исправлять","type":"unstyled","key":"8gddm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"42jjc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 8: Итоги и рекомендации","type":"header-three","key":"54a35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые изменения в восприятии ошибок:","type":"unstyled","key":"d5mu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"От страха к любопытству — ошибки становятся загадками, которые интересно разгадывать","type":"unstyled","key":"ap5iv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"От растерянности к уверенности — Вы знаете, как подходить к любой ошибке","type":"unstyled","key":"5amdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"От избегания к поиску — Вы начинаете proactively искать ошибки для обучения","type":"unstyled","key":"eiqfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"От зависимости к самостоятельности — Вы можете сами разобраться с большинством проблем","type":"unstyled","key":"1o7ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Практические привычки для развития:","type":"unstyled","key":"2026b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Читайте ошибки вслух — это помогает лучше понять суть","type":"unstyled","key":"anjnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Ведите дневник ошибок — записывайте, какие ошибки встречались и как их исправили","type":"unstyled","key":"7f38n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Празднуйте исправления — каждая исправленная ошибка это маленькая победа","type":"unstyled","key":"ui07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Помогайте другим — объясняя ошибки другим, Вы лучше их понимаете сами","type":"unstyled","key":"1ivc4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Продвинутые техники:","type":"unstyled","key":"833o1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Предсказывайте ошибки — со временем Вы начнёте предвидеть, где могут возникнуть проблемы","type":"unstyled","key":"ejhbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Анализируйте закономерности — какие ошибки Вы делаете чаще всего?","type":"unstyled","key":"8c86t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Создайте чек-лист — список самых частых ошибок для быстрой проверки","type":"unstyled","key":"2feca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Используйте ошибки как учебный материал — каждая ошибка учит чему-то новому о HTML","type":"unstyled","key":"8kgnm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":145,"offset":0,"style":"BOLD"}],"text":"Помните: Ошибки — это не стены, которые преграждают Вам путь, а ступеньки, которые помогают подниматься выше в Вашем мастерстве веб-разработчика! \uD83C\uDF1F","type":"unstyled","key":"epe2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":141,"offset":0,"style":"BOLD"},{"length":21,"offset":152,"style":"BOLD"}],"text":"Теперь, когда Вы умеете читать сообщения об ошибках, Вы обладаете суперсилой — способностью учиться и расти с каждой написанной строкой кода! \uD83E\uDDB8‍♂️\uD83E\uDDB8‍♀️\n\n(Продолжение следует)","type":"unstyled","key":"b3i3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dkf7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ccURlhbiAoXRrd7objmN"}],"entityMap":{"0":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Овощ	Количество \n
Помидоры	10 кустов \n

Привет, мир!

\uD83D\uDD0D Валидатор HTML: Ваш личный инспектор кода

1. Аналогия: Проверка орфографии в Word vs Валидация HTML

\uD83D\uDCDD Пример из жизни:

2. Что такое валидатор и как он работает?

Заголовок страницы

3. Примеры ошибок, которые находит валидатор

❌ Код с ошибками:

Заголовок первого уровня \n Абзац с выделением \n \n Центрированный текст \n \n Ещё один абзац \n \n \n \n

✅ Исправленный код:

Заголовок первого уровня

4. Зачем вообще нужен валидатор? 6 главных причин

\uD83C\uDF10 1. Кроссбраузерность

♿ 2. Доступность

\uD83D\uDE80 3. Скорость загрузки

\uD83D\uDCF1 4. Адаптивность

\uD83D\uDD0D 5. SEO-оптимизация

\uD83D\uDC68‍\uD83D\uDCBB 6. Простота поддержки

5. Как пользоваться онлайн-валидатором W3C

\uD83D\uDCCB Пример отчёта валидатора:

6. Типичные ошибки, которые находит валидатор

\uD83C\uDFAF Практическое задание: Найди ошибки!

Проверь свои навыки: найди 5 ошибок в этом коде

Добро пожаловать на мой сайт \n Это мой первый веб-сайт. \n \n \n \n Большой текст \n \n \n Контент внутри дива \n \n \n \n

\uD83D\uDCCB Шпаргалка по валидации

✅ Обязательные элементы

Привет, мир!

\uD83D\uDEE0️ Простые онлайн-инструменты для проверки HTML-кода

1. W3C Markup Validation Service — Официальный стандарт

\uD83D\uDCDD Validate by Direct Input (самый простой способ)

Привет!

✅ Успешная проверка:

❌ Обнаружены ошибки:

2. Другие популярные онлайн-валидаторы

\uD83D\uDD0D HTML Validator (FreeFormatter.com)

\uD83D\uDCCB CSS HTML Validator

\uD83C\uDF10 Validator.nu

3. Практический пример: Проверяем реальный код

\uD83D\uDD0D Проверим этот код в онлайн-валидаторе:

Добро пожаловать \n Это мой первый сайт с выделением \n \n Центрированный текст \n \n \n

❌ Валидатор покажет эти ошибки:

4. Специализированные инструменты для разных задач

\uD83D\uDCF1 Мобильная верстка

♿ Доступность

\uD83D\uDE80 Скорость

\uD83D\uDD0D SEO

5. Встроенные инструменты в браузерах

\uD83C\uDFAF Практическое задание: Стань детективом кода!

Найди и исправь все ошибки в этом коде

Мой сад \n В моем саду растут помидоры, огурцы и цветы \n \n \n \n \n \n \n \n \n \n \n ОвощКоличество \n Помидоры10 кустов \n \n \n Приходите в гости! \n \n \n

\uD83D\uDCCB Шпаргалка по онлайн-инструментам

\uD83D\uDD27 Основные валидаторы

\uD83C\uDFAF Специализированные инструменты

⚡ Быстрая проверка

\uD83D\uDD0D Как читать сообщения об ошибках и не пугаться их

1. Почему мы пугаемся ошибок? Психологический аспект

\uD83D\uDE28 Страх новичка

\uD83D\uDE0A Реальность

2. Анатомия сообщения об ошибке: Разбираем на части

\uD83D\uDD0D Рассмотрим реальное сообщение об ошибке:

\uD83E\uDDE9 Что было в коде:

\uD83D\uDD27 Как исправить:

3. Словарь распространённых сообщений об ошибках

\uD83D\uDEAB \"End tag for ... missing\"

\uD83D\uDEAB \"Element ... not allowed as child of element ...\"

⚠️ \"Consider adding alt attribute\"

\uD83D\uDEAB \"Duplicate attribute ...\"

\uD83D\uDEAB \"Attribute ... not allowed on element ...\"

\uD83D\uDEAB \"Bad value ... for attribute ...\"

4. Пошаговая стратегия работы с ошибками

Не паникуйте

Прочитайте внимательно

Найдите место ошибки

Поймите суть

Исправьте одну ошибку

Проверьте снова

5. Практика: Переводчик с \"технического\" на \"человеческий\"

6. Как работать с несколькими ошибками одновременно

\uD83D\uDCCB Пример: Цепочка ошибок

\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 \n \n \n
\n \n \n \n \n \n \n
Овощ Количество \n
Помидоры 10 кустов \n
\n \n Приходите в гости! \n \n \n