{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(продолжение)\n\n","type":"unstyled","key":"b25nk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"BOLD"}],"text":"12.4. Практика: проверяем свою страницу и исправляем найденные ошибки\n\n","type":"header-three","key":"qvs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":36,"offset":0,"style":"BOLD"}],"text":"Введение: Ваш первый техосмотр сайта","type":"unstyled","key":"75m3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте, что Вы купили подержанный автомобиль и пригнали его в сервис на полную диагностику. Мастер проверяет каждую систему, находит проблемы и составляет план ремонта. Сегодня мы проведём такую же полную диагностику Вашего HTML-кода — найдём все проблемы и планомерно их исправим!","type":"unstyled","key":"7tcca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"7b2lk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"BOLD"}],"text":"Часть 1: Подготовка к проверке — создаём тестовую страницу","type":"header-three","key":"1qhuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте создадим страницу с типичными ошибками, которые часто делают новички:","type":"unstyled","key":"c1m17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"2k49b"},{"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	10 кустов \n

\n \n Приходите в гости полюбоваться! \n \n До встречи в саду! \n \n","type":"unstyled","key":"5odjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"c3c7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":"Часть 2: Пошаговый процесс проверки и исправления","type":"header-three","key":"265v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"4oift"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Проверяем страницу в валидаторе","type":"header-three","key":"2eiuk"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":16,"offset":13}],"inlineStyleRanges":[{"length":16,"offset":13,"style":"BOLD"}],"text":"Переходим на validator.w3.org → \"Validate by Direct Input\" → вставляем наш код → \"Check\"","type":"unstyled","key":"2jr4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Результат проверки:","type":"unstyled","key":"47sjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"f9k3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❌ 7 ошибок, ⚠️ 2 предупреждения","type":"unstyled","key":"f05sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"8c1ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Анализируем отчёт и создаём план исправлений","type":"header-three","key":"4ku62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"79mrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":0,"style":"ITALIC"},{"length":20,"offset":428,"style":"ITALIC"}],"text":" \n \n \n \n \n \n \n

№	Ошибка	Статус	Решение
1	No charset declared	❌	Добавить meta charset
2	End tag for h1 missing	❌	Закрыть тег h1
3	End tag for p missing	❌	Закрыть тег p

","type":"unstyled","key":"1g91m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"2op6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":0,"style":"BOLD"}],"text":"Часть 3: Полная страница с интерактивным процессом исправления","type":"header-three","key":"1isro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"html","type":"unstyled","key":"877t7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":4796,"style":"ITALIC"},{"length":22,"offset":6298,"style":"ITALIC"},{"length":28,"offset":10233,"style":"ITALIC"},{"length":26,"offset":10577,"style":"ITALIC"},{"length":36,"offset":11401,"style":"ITALIC"},{"length":30,"offset":12386,"style":"ITALIC"},{"length":28,"offset":13084,"style":"ITALIC"},{"length":36,"offset":14222,"style":"ITALIC"},{"length":34,"offset":15153,"style":"ITALIC"},{"length":37,"offset":17336,"style":"ITALIC"},{"length":29,"offset":19276,"style":"ITALIC"},{"length":23,"offset":21169,"style":"ITALIC"}],"text":" \n \n \n \n Практика: Проверяем и исправляем ошибки в HTML \n \n \n \n

\uD83D\uDD27 Практика: Проверяем свою страницу и исправляем найденные ошибки

\n\n

\n \uD83D\uDCA1 Основная идея: Сегодня мы проведём полный \"техосмотр\" HTML-страницы. Мы найдём все ошибки, планомерно их исправим и превратим проблемный код в идеально валидный! \n

\n\n \n

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	10 кустов \n

\n \n Приходите в гости полюбоваться! \n \n До встречи в саду! \n \n \n

\n\n

\uD83C\uDFAF Ваша задача:

Скопируйте код выше
Перейдите на validator.w3.org
Вставьте код и запустите проверку
Запишите все найденные ошибки
Сверьтесь с нашим анализом ниже

\n\n \n

2. Анализ ошибок: Что нашёл валидатор?

\n\n

\uD83D\uDCCB Отчёт о проверке:

\n \n

\n ❌ Error: No charset declared
\n Location: Весь документ
\n Решение: Добавить \n

\n\n

\n ❌ Error: End tag for h1 missing
\n Location: Line 6
\n Решение: Добавить \n

\n\n

\n ❌ Error: End tag for p missing
\n Location: Line 8
\n Решение: Добавить \n

\n\n

\n ❌ Error: End tag for li missing (3 раза)
\n Location: Lines 11-13
\n Решение: Добавить для каждого пункта \n

\n\n

\n ⚠️ Warning: Consider adding alt attribute
\n Location: Line 15
\n Решение: Добавить alt=\"Описание\" \n

\n\n

\n ❌ Error: Attribute border not allowed on table
\n Location: Line 17
\n Решение: Удалить border, использовать CSS \n

\n\n

\n ❌ Error: End tag for td missing (4 раза)
\n Location: Lines 18-22
\n Решение: Добавить и \n

\n\n

\n ❌ Error: Element center not allowed
\n Location: Line 24
\n Решение: Заменить на CSS text-align: center \n

\n\n

\n ❌ Error: Element font not allowed
\n Location: Line 26
\n Решение: Заменить на CSS \n

\n\n \n

3. Пошаговый процесс исправления ошибок

\n\n

\uD83C\uDFAF Стратегия:

Исправляем ошибки сверху вниз — так последующие ошибки часто исправляются автоматически!

\n\n \n

❌ Было (Ошибка 1):

\n \n \n \n Мой сайт о садоводстве \n \n

Проблема: Не указана кодировка символов

✅ Стало:

\n \n \n \n \n Мой сайт о садоводстве \n \n

Исправление: Добавили кодировку и язык

\n\n \n

❌ Было (Ошибки 2-4):

Добро пожаловать в мой сад! \n \n
Здесь я выращиваю разные растения \n \n

Мои любимые цветы

Розы \n
Тюльпаны \n
Хризантемы \n

Проблема: 6 незакрытых тегов!

✅ Стало:

Добро пожаловать в мой сад!

\n \n

Здесь я выращиваю разные растения

\n \n

Мои любимые цветы

Розы
Тюльпаны
Хризантемы

Исправление: Закрыли все теги

\n\n \n

❌ Было (Ошибка 5):

Проблема: Нет alt атрибута

✅ Стало:

\n $\"Красивый$ \n

Исправление: Добавили описание изображения

\n\n \n

❌ Было (Ошибки 6-7):

\n \n \n \n

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

Проблема: Устаревший border и незакрытые теги

✅ Стало:

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

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

\n\n \n

Исправление: Убрали border, закрыли теги, добавили CSS

\n\n \n

❌ Было (Ошибки 8-9):

\nПриходите в гости полюбоваться! \n\nДо встречи в саду! \n

Проблема: Устаревшие теги

✅ Стало:

Приходите в гости полюбоваться!

\n\n

До встречи в саду!

\n\n \n

Исправление: Заменили на CSS стили

\n\n \n

4. Итоговый исправленный код

\n\n

\n \uD83C\uDF89 Поздравляем! После всех исправлений мы получили идеально валидный 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 \n

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

\n \n

Приходите в гости полюбоваться!

\n \n

До встречи в саду!

\n \n \n

\n\n

\uD83C\uDFAF Финальная проверка:

Скопируйте исправленный код выше
Проверьте его в валидаторе
Убедитесь, что получили сообщение: \"Document checking completed. No errors or warnings to show.\"

\n\n \n

5. Чеклист для самостоятельных проверок

\n\n

\uD83D\uDD24 Обязательные элементы

✅
✅
✅
✅ ...

\n\n

\uD83C\uDFF7️ Структура тегов

✅ Все теги закрыты
✅ Правильная вложенность
✅ Нет устаревших тегов
✅ Уникальные ID

\n\n

\uD83D\uDDBC️ Изображения и ссылки

✅ alt у всех изображений
✅ Корректные пути к файлам
✅ Правильные атрибуты href
✅ Доступные описания

\n\n

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

\n\n \n

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

\n\n

Примени полученные знания на практике

\n \n

\uD83D\uDCDD Задание:

Выбери свою страницу: Возьми любой HTML-файл, который ты создавал ранее
Проверь в валидаторе: Используй validator.w3.org
Составь список ошибок: Запиши все найденные проблемы
Исправь по порядку: Применяй стратегию \"сверху вниз\"
Добейся идеала: Убедись, что нет ни ошибок, ни предупреждений

\n\n

\uD83D\uDCCB Шаблон для отслеживания прогресса:

\n \n

\n\n

\n \uD83C\uDF1F Бонусное задание: После исправления всех ошибок создай короткий отчёт: \n

Сколько ошибок было изначально?
Какие типы ошибок встречались чаще всего?
Какая ошибка была самой сложной для исправления?
Что ты узнал нового в процессе?

\n\n \n

6. Итоги и профессиональные советы

\n\n

\uD83D\uDD04

Регулярность

Проверяй код после каждого значительного изменения

\n\n

\uD83D\uDCDD

Документирование

Веди дневник частых ошибок и их решений

\n\n

\uD83C\uDFAF

Приоритеты

Сначала исправляй ошибки, потом — предупреждения

\n\n

\uD83D\uDD27

Инструменты

Используй валидацию в редакторе кода

\n\n

\n \uD83C\uDF93 Поздравляю с завершением практики! Теперь ты умеешь не только находить ошибки в HTML-коде, но и эффективно их исправлять. Этот навык сделает тебя настоящим профессионалом веб-разработки! \n

\n \n","type":"unstyled","key":"j5pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"5ooh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Часть 7: Что Вы теперь умеете","type":"header-three","key":"3f9p8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"},{"length":31,"offset":58,"style":"BOLD"},{"length":31,"offset":123,"style":"BOLD"},{"length":26,"offset":172,"style":"BOLD"},{"length":24,"offset":211,"style":"BOLD"},{"length":21,"offset":262,"style":"BOLD"},{"length":34,"offset":316,"style":"BOLD"}],"text":"✅ Проводить полную проверку HTML-страницы в валидаторе\n ✅ Анализировать отчёты об ошибках и составлять план исправлений\n ✅ Применять стратегию исправления \"сверху вниз\"\n ✅ Исправлять типичные ошибки новичков\n ✅ Заменять устаревшие теги на современные аналоги\n ✅ Использовать чеклисты для систематических проверок\n ✅ Добиваться идеально валидного кода без ошибок и предупреждений","type":"unstyled","key":"4h72s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"bsjpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Часть 8: Итоги и профессиональные рекомендации","type":"header-three","key":"223od"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"\uD83C\uDFAF Ключевые результаты практики:","type":"unstyled","key":"f5lec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"От хаоса к системе — Вы научились планомерному подходу к исправлению ошибок","type":"unstyled","key":"dmocs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"От страха к уверенности — Вы понимаете, что любую ошибку можно исправить","type":"unstyled","key":"dk7hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"От случайности к предсказуемости — Вы знаете, какие ошибки искать в первую очередь","type":"unstyled","key":"5b7hm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"От новичка к профессионалу — Вы приобрели навык, который используют все опытные разработчики","type":"unstyled","key":"dhtik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDCA1 Профессиональные привычки для закрепления:","type":"unstyled","key":"b3mbg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Проверяйте код в процессе написания — не откладывайте на потом","type":"unstyled","key":"5hm9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Создайте персональный чеклист на основе своих частых ошибок","type":"unstyled","key":"jf8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Используйте валидацию в редакторе — настройте автоматическую проверку","type":"unstyled","key":"dplqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Помогайте другим — объясняя ошибки, Вы лучше их запоминаете","type":"unstyled","key":"4ig31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Анализируйте закономерности — какие ошибки Вы делаете чаще всего?","type":"unstyled","key":"adsum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"\uD83D\uDE80 Продвинутые техники для дальнейшего развития:","type":"unstyled","key":"fhb9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Интеграция со сборщиками проектов — автоматическая валидация при сборке","type":"unstyled","key":"jfl2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Настройка крючков для предварительной фиксации — проверка кода перед сохранением","type":"unstyled","key":"2jb7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Использование линтеров — инструментов для проверки стиля кода","type":"unstyled","key":"8op19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Валидация доступности — проверка для людей с ограниченными возможностями","type":"unstyled","key":"nj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Аудит эффективности — проверка производительности страницы","type":"unstyled","key":"fb3i0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":164,"offset":0,"style":"BOLD"}],"text":"Помните: Идеально валидный код — это не самоцель, а показатель профессионального подхода к веб-разработке. Каждая исправленная ошибка делает интернет чуточку лучше! \uD83C\uDF1F","type":"unstyled","key":"220vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":149,"offset":0,"style":"BOLD"}],"text":"Теперь Вы вооружены знаниями и инструментами, чтобы создавать безупречный HTML-код, который будет работать корректно во всех браузерах и устройствах! \uD83C\uDF89","type":"unstyled","key":"99es4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"(Продолжение следует)\n","type":"unstyled","key":"a72mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"jnVrieFj1qaa6NfAAOmz"}],"entityMap":{"0":{"data":{"href":"https://validator.w3.org/","url":"https://validator.w3.org/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}

Добро пожаловать в мой сад! \n \n Здесь я выращиваю разные растения \n \n

Мои любимые цветы

\uD83D\uDD27 Практика: Проверяем свою страницу и исправляем найденные ошибки

1. Наша тестовая страница с ошибками

Добро пожаловать в мой сад! \n \n Здесь я выращиваю разные растения \n \n

Мои любимые цветы

\uD83C\uDFAF Ваша задача:

2. Анализ ошибок: Что нашёл валидатор?

\uD83D\uDCCB Отчёт о проверке:

3. Пошаговый процесс исправления ошибок

\uD83C\uDFAF Стратегия:

❌ Было (Ошибка 1):

✅ Стало:

❌ Было (Ошибки 2-4):

Добро пожаловать в мой сад! \n \nЗдесь я выращиваю разные растения \n \n

Мои любимые цветы

✅ Стало:

Добро пожаловать в мой сад!

Мои любимые цветы

❌ Было (Ошибка 5):

✅ Стало:

❌ Было (Ошибки 6-7):

✅ Стало:

❌ Было (Ошибки 8-9):

✅ Стало:

4. Итоговый исправленный код

✅ Исправленная версия:

Добро пожаловать в мой сад!

Мои любимые цветы

\uD83C\uDFAF Финальная проверка:

5. Чеклист для самостоятельных проверок

\uD83D\uDD24 Обязательные элементы

\uD83C\uDFF7️ Структура тегов

\uD83D\uDDBC️ Изображения и ссылки

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

Примени полученные знания на практике

\uD83D\uDCDD Задание:

\uD83D\uDCCB Шаблон для отслеживания прогресса:

6. Итоги и профессиональные советы

Регулярность

Документирование

Приоритеты

Инструменты

Добро пожаловать в мой сад! \n \n
Здесь я выращиваю разные растения \n \n

Добро пожаловать в мой сад! \n \n
Здесь я выращиваю разные растения \n \n

Добро пожаловать в мой сад! \n \n
Здесь я выращиваю разные растения \n \n