(продолжение)
12.4. Практика: проверяем свою страницу и исправляем найденные ошибки
Введение: Ваш первый техосмотр сайта
Представьте, что Вы купили подержанный автомобиль и пригнали его в сервис на полную диагностику. Мастер проверяет каждую систему, находит проблемы и составляет план ремонта. Сегодня мы проведём такую же полную диагностику Вашего HTML-кода — найдём все проблемы и планомерно их исправим!
Часть 1: Подготовка к проверке — создаём тестовую страницу
Давайте создадим страницу с типичными ошибками, которые часто делают новички:
html
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт о садоводстве</title>
</head>
<body>
<h1>Добро пожаловать в мой сад!
<p>Здесь я выращиваю разные растения
<h2>Мои любимые цветы</h2>
<ul>
<li>Розы
<li>Тюльпаны
<li>Хризантемы
</ul>
<img src="garden.jpg">
<table border=1>
<tr>
<td>Овощ
<td>Количество
<tr>
<td>Помидоры
<td>10 кустов
</table>
<center>Приходите в гости полюбоваться!</center>
<font size="5">До встречи в саду!</font>
</body>
</html>
Часть 2: Пошаговый процесс проверки и исправления
Шаг 1: Проверяем страницу в валидаторе
Переходим на validator.w3.org → "Validate by Direct Input" → вставляем наш код → "Check"
Результат проверки:
text
❌ 7 ошибок, ⚠️ 2 предупреждения
Шаг 2: Анализируем отчёт и создаём план исправлений
html
<!-- Создаём таблицу для отслеживания прогресса -->
<table class="error-tracker">
<tr><th>№</th><th>Ошибка</th><th>Статус</th><th>Решение</th></tr>
<tr><td>1</td><td>No charset declared</td><td>❌</td><td>Добавить meta charset</td></tr>
<tr><td>2</td><td>End tag for h1 missing</td><td>❌</td><td>Закрыть тег h1</td></tr>
<tr><td>3</td><td>End tag for p missing</td><td>❌</td><td>Закрыть тег p</td></tr>
<!-- и так далее -->
</table>
Часть 3: Полная страница с интерактивным процессом исправления
html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Практика: Проверяем и исправляем ошибки в HTML</title>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background-color: #f8f9fa;
}
.example-section {
background: white;
padding: 25px;
margin: 25px 0;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1, h2 {
color: #2c3e50;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 15px;
}
.code-example {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
position: relative;
}
.error-code {
background: #ffebee;
border-left: 4px solid #e74c3c;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
}
.fixed-code {
background: #e8f5e8;
border-left: 4px solid #27ae60;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
}
.note {
background: #e7f3ff;
padding: 15px;
border-left: 4px solid #2196F3;
margin: 15px 0;
border-radius: 5px;
}
.warning {
background: #fff3e0;
padding: 15px;
border-left: 4px solid #ff9800;
margin: 15px 0;
border-radius: 5px;
}
.success {
background: #e8f5e8;
padding: 15px;
border-left: 4px solid #4CAF50;
margin: 15px 0;
border-radius: 5px;
}
.error-marker {
background: #ffcdd2;
color: #c62828;
padding: 2px 4px;
border-radius: 3px;
font-weight: bold;
}
.fix-marker {
background: #c8e6c9;
color: #2e7d32;
padding: 2px 4px;
border-radius: 3px;
font-weight: bold;
}
.progress-tracker {
background: #f5f5f5;
border: 2px solid #ddd;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.error-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.error-item:last-child {
border-bottom: none;
}
.error-status {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-weight: bold;
}
.status-pending {
background: #ffcdd2;
color: #c62828;
}
.status-fixed {
background: #c8e6c9;
color: #2e7d32;
}
.error-details {
flex-grow: 1;
}
.interactive-demo {
background: #fff3e0;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
.code-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
@media (max-width: 768px) {
.code-comparison {
grid-template-columns: 1fr;
}
}
.before-box, .after-box {
padding: 15px;
border-radius: 5px;
}
.before-box {
background: #ffebee;
border: 1px solid #e74c3c;
}
.after-box {
background: #e8f5e8;
border: 1px solid #27ae60;
}
.checkpoint {
background: #e3f2fd;
border-left: 4px solid #2196F3;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>🔧 Практика: Проверяем свою страницу и исправляем найденные ошибки</h1>
<div class="note">
<strong>💡 Основная идея:</strong> Сегодня мы проведём полный "техосмотр" HTML-страницы. Мы найдём все ошибки, планомерно их исправим и превратим проблемный код в идеально валидный!
</div>
<!-- Исходный код для проверки -->
<div class="example-section">
<h2>1. Наша тестовая страница с ошибками</h2>
<div class="warning">
<strong>⚠️ Внимание!</strong> Этот код содержит несколько типичных ошибок, которые часто делают новички. Наша задача — найти и исправить их все!
</div>
<div class="code-example">
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт о садоводстве</title>
</head>
<body>
<h1>Добро пожаловать в мой сад!
<p>Здесь я выращиваю разные растения
<h2>Мои любимые цветы</h2>
<ul>
<li>Розы
<li>Тюльпаны
<li>Хризантемы
</ul>
<img src="garden.jpg">
<table border=1>
<tr>
<td>Овощ
<td>Количество
<tr>
<td>Помидоры
<td>10 кустов
</table>
<center>Приходите в гости полюбоваться!</center>
<font size="5">До встречи в саду!</font>
</body>
</html>
</div>
<div class="interactive-demo">
<h3>🎯 Ваша задача:</h3>
<ol>
<li>Скопируйте код выше</li>
<li>Перейдите на <a href="https://validator.w3.org" target="_blank">validator.w3.org</a></li>
<li>Вставьте код и запустите проверку</li>
<li>Запишите все найденные ошибки</li>
<li>Сверьтесь с нашим анализом ниже</li>
</ol>
</div>
</div>
<!-- Анализ ошибок -->
<div class="example-section">
<h2>2. Анализ ошибок: Что нашёл валидатор?</h2>
<div class="progress-tracker">
<h3>📋 Отчёт о проверке:</h3>
<div class="error-item">
<div class="error-status status-pending">1</div>
<div class="error-details">
<strong>❌ Error:</strong> No charset declared<br>
<em>Location:</em> Весь документ<br>
<strong>Решение:</strong> Добавить <code><meta charset="utf-8"></code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">2</div>
<div class="error-details">
<strong>❌ Error:</strong> End tag for h1 missing<br>
<em>Location:</em> Line 6<br>
<strong>Решение:</strong> Добавить <code></h1></code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">3</div>
<div class="error-details">
<strong>❌ Error:</strong> End tag for p missing<br>
<em>Location:</em> Line 8<br>
<strong>Решение:</strong> Добавить <code></p></code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">4</div>
<div class="error-details">
<strong>❌ Error:</strong> End tag for li missing (3 раза)<br>
<em>Location:</em> Lines 11-13<br>
<strong>Решение:</strong> Добавить <code></li></code> для каждого пункта
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">5</div>
<div class="error-details">
<strong>⚠️ Warning:</strong> Consider adding alt attribute<br>
<em>Location:</em> Line 15<br>
<strong>Решение:</strong> Добавить <code>alt="Описание"</code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">6</div>
<div class="error-details">
<strong>❌ Error:</strong> Attribute border not allowed on table<br>
<em>Location:</em> Line 17<br>
<strong>Решение:</strong> Удалить border, использовать CSS
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">7</div>
<div class="error-details">
<strong>❌ Error:</strong> End tag for td missing (4 раза)<br>
<em>Location:</em> Lines 18-22<br>
<strong>Решение:</strong> Добавить <code></td></code> и <code></tr></code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">8</div>
<div class="error-details">
<strong>❌ Error:</strong> Element center not allowed<br>
<em>Location:</em> Line 24<br>
<strong>Решение:</strong> Заменить на CSS <code>text-align: center</code>
</div>
</div>
<div class="error-item">
<div class="error-status status-pending">9</div>
<div class="error-details">
<strong>❌ Error:</strong> Element font not allowed<br>
<em>Location:</em> Line 26<br>
<strong>Решение:</strong> Заменить на CSS
</div>
</div>
</div>
</div>
<!-- Процесс исправления -->
<div class="example-section">
<h2>3. Пошаговый процесс исправления ошибок</h2>
<div class="checkpoint">
<h3>🎯 Стратегия:</h3>
<p>Исправляем ошибки <strong>сверху вниз</strong> — так последующие ошибки часто исправляются автоматически!</p>
</div>
<!-- Ошибка 1: Charset -->
<div class="code-comparison">
<div class="before-box">
<h4>❌ Было (Ошибка 1):</h4>
<div class="code-example">
<!DOCTYPE html>
<html>
<head>
<title>Мой сайт о садоводстве</title>
</head>
</div>
<p><span class="error-marker">Проблема:</span> Не указана кодировка символов</p>
</div>
<div class="after-box">
<h4>✅ Стало:</h4>
<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой сайт о садоводстве</title>
</head>
</div>
<p><span class="fix-marker">Исправление:</span> Добавили кодировку и язык</p>
</div>
</div>
<!-- Ошибка 2-4: Незакрытые теги -->
<div class="code-comparison">
<div class="before-box">
<h4>❌ Было (Ошибки 2-4):</h4>
<div class="code-example">
<h1>Добро пожаловать в мой сад!
<p>Здесь я выращиваю разные растения
<h2>Мои любимые цветы</h2>
<ul>
<li>Розы
<li>Тюльпаны
<li>Хризантемы
</ul>
</div>
<p><span class="error-marker">Проблема:</span> 6 незакрытых тегов!</p>
</div>
<div class="after-box">
<h4>✅ Стало:</h4>
<div class="code-example">
<h1>Добро пожаловать в мой сад!</h1>
<p>Здесь я выращиваю разные растения</p>
<h2>Мои любимые цветы</h2>
<ul>
<li>Розы</li>
<li>Тюльпаны</li>
<li>Хризантемы</li>
</ul>
</div>
<p><span class="fix-marker">Исправление:</span> Закрыли все теги</p>
</div>
</div>
<!-- Ошибка 5: Alt атрибут -->
<div class="code-comparison">
<div class="before-box">
<h4>❌ Было (Ошибка 5):</h4>
<div class="code-example">
<img src="garden.jpg">
</div>
<p><span class="error-marker">Проблема:</span> Нет alt атрибута</p>
</div>
<div class="after-box">
<h4>✅ Стало:</h4>
<div class="code-example">
<img src="garden.jpg" alt="Красивый сад с цветами и овощами">
</div>
<p><span class="fix-marker">Исправление:</span> Добавили описание изображения</p>
</div>
</div>
<!-- Ошибка 6-7: Таблица -->
<div class="code-comparison">
<div class="before-box">
<h4>❌ Было (Ошибки 6-7):</h4>
<div class="code-example">
<table border=1>
<tr>
<td>Овощ
<td>Количество
<tr>
<td>Помидоры
<td>10 кустов
</table>
</div>
<p><span class="error-marker">Проблема:</span> Устаревший border и незакрытые теги</p>
</div>
<div class="after-box">
<h4>✅ Стало:</h4>
<div class="code-example">
<table class="garden-table">
<tr>
<td>Овощ</td>
<td>Количество</td>
</tr>
<tr>
<td>Помидоры</td>
<td>10 кустов</td>
</tr>
</table>
<style>
.garden-table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.garden-table td {
border: 1px solid #ccc;
padding: 8px;
}
</style>
</div>
<p><span class="fix-marker">Исправление:</span> Убрали border, закрыли теги, добавили CSS</p>
</div>
</div>
<!-- Ошибка 8-9: Устаревшие теги -->
<div class="code-comparison">
<div class="before-box">
<h4>❌ Было (Ошибки 8-9):</h4>
<div class="code-example">
<center>Приходите в гости полюбоваться!</center>
<font size="5">До встречи в саду!</font>
</div>
<p><span class="error-marker">Проблема:</span> Устаревшие теги</p>
</div>
<div class="after-box">
<h4>✅ Стало:</h4>
<div class="code-example">
<div class="center-text">Приходите в гости полюбоваться!</div>
<div class="large-text">До встречи в саду!</div>
<style>
.center-text {
text-align: center;
}
.large-text {
font-size: 1.5em;
}
</style>
</div>
<p><span class="fix-marker">Исправление:</span> Заменили на CSS стили</p>
</div>
</div>
</div>
<!-- Итоговый исправленный код -->
<div class="example-section">
<h2>4. Итоговый исправленный код</h2>
<div class="success">
<strong>🎉 Поздравляем!</strong> После всех исправлений мы получили идеально валидный HTML-код!
</div>
<div class="fixed-code">
<h3>✅ Исправленная версия:</h3>
<div class="code-example">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Мой сайт о садоводстве</title>
<style>
.garden-table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 20px 0;
}
.garden-table td {
border: 1px solid #ccc;
padding: 8px 12px;
}
.center-text {
text-align: center;
margin: 15px 0;
}
.large-text {
font-size: 1.5em;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Добро пожаловать в мой сад!</h1>
<p>Здесь я выращиваю разные растения</p>
<h2>Мои любимые цветы</h2>
<ul>
<li>Розы</li>
<li>Тюльпаны</li>
<li>Хризантемы</li>
</ul>
<img src="garden.jpg" alt="Красивый сад с цветами и овощами">
<table class="garden-table">
<tr>
<td>Овощ</td>
<td>Количество</td>
</tr>
<tr>
<td>Помидоры</td>
<td>10 кустов</td>
</tr>
</table>
<div class="center-text">Приходите в гости полюбоваться!</div>
<div class="large-text">До встречи в саду!</div>
</body>
</html>
</div>
</div>
<div class="interactive-demo">
<h3>🎯 Финальная проверка:</h3>
<ol>
<li>Скопируйте исправленный код выше</li>
<li>Проверьте его в <a href="https://validator.w3.org" target="_blank">валидаторе</a></li>
<li>Убедитесь, что получили сообщение: <strong>"Document checking completed. No errors or warnings to show."</strong></li>
</ol>
</div>
</div>
<!-- Чеклист для будущих проверок -->
<div class="example-section">
<h2>5. Чеклист для самостоятельных проверок</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin: 20px 0;">
<div style="border: 2px solid #3498db; padding: 15px; border-radius: 8px;">
<h3 style="color: #3498db; margin-top: 0;">🔤 Обязательные элементы</h3>
<ul>
<li>✅ <code><!DOCTYPE html></code></li>
<li>✅ <code><html lang="ru"></code></li>
<li>✅ <code><meta charset="utf-8"></code></li>
<li>✅ <code><title>...</title></code></li>
</ul>
</div>
<div style="border: 2px solid #27ae60; padding: 15px; border-radius: 8px;">
<h3 style="color: #27ae60; margin-top: 0;">🏷️ Структура тегов</h3>
<ul>
<li>✅ Все теги закрыты</li>
<li>✅ Правильная вложенность</li>
<li>✅ Нет устаревших тегов</li>
<li>✅ Уникальные ID</li>
</ul>
</div>
<div style="border: 2px solid #e74c3c; padding: 15px; border-radius: 8px;">
<h3 style="color: #e74c3c; margin-top: 0;">🖼️ Изображения и ссылки</h3>
<ul>
<li>✅ <code>alt</code> у всех изображений</li>
<li>✅ Корректные пути к файлам</li>
<li>✅ Правильные атрибуты href</li>
<li>✅ Доступные описания</li>
</ul>
</div>
</div>
<div class="note">
<strong>💡 Профессиональный совет:</strong> Создайте себе такой чеклист и используйте его каждый раз перед финальной проверкой в валидаторе. Это сэкономит Вам много времени!
</div>
</div>
<!-- Практическое задание -->
<div class="example-section">
<h2>🎯 Практическое задание: Проверь свою страницу!</h2>
<div class="practice-task">
<h3>Примени полученные знания на практике</h3>
<div class="interactive-demo">
<h4>📝 Задание:</h4>
<ol>
<li><strong>Выбери свою страницу:</strong> Возьми любой HTML-файл, который ты создавал ранее</li>
<li><strong>Проверь в валидаторе:</strong> Используй validator.w3.org</li>
<li><strong>Составь список ошибок:</strong> Запиши все найденные проблемы</li>
<li><strong>Исправь по порядку:</strong> Применяй стратегию "сверху вниз"</li>
<li><strong>Добейся идеала:</strong> Убедись, что нет ни ошибок, ни предупреждений</li>
</ol>
<div class="progress-tracker">
<h4>📋 Шаблон для отслеживания прогресса:</h4>
<textarea style="width: 100%; height: 200px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: monospace;" placeholder="Создай здесь свой список ошибок:
1. [ ] Ошибка: ... | Решение: ...
2. [ ] Ошибка: ... | Решение: ...
3. [ ] Предупреждение: ... | Решение: ...
..."></textarea>
</div>
</div>
<div class="note">
<strong>🌟 Бонусное задание:</strong> После исправления всех ошибок создай короткий отчёт:
<ul>
<li>Сколько ошибок было изначально?</li>
<li>Какие типы ошибок встречались чаще всего?</li>
<li>Какая ошибка была самой сложной для исправления?</li>
<li>Что ты узнал нового в процессе?</li>
</ul>
</div>
</div>
</div>
<!-- Итоги и советы -->
<div class="example-section">
<h2>6. Итоги и профессиональные советы</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0;">
<div style="border: 2px solid #3498db; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">🔄</div>
<h4>Регулярность</h4>
<p>Проверяй код после каждого значительного изменения</p>
</div>
<div style="border: 2px solid #27ae60; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">📝</div>
<h4>Документирование</h4>
<p>Веди дневник частых ошибок и их решений</p>
</div>
<div style="border: 2px solid #e74c3c; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">🎯</div>
<h4>Приоритеты</h4>
<p>Сначала исправляй ошибки, потом — предупреждения</p>
</div>
<div style="border: 2px solid #f39c12; padding: 15px; border-radius: 8px; text-align: center;">
<div style="font-size: 2em;">🔧</div>
<h4>Инструменты</h4>
<p>Используй валидацию в редакторе кода</p>
</div>
</div>
<div class="success">
<strong>🎓 Поздравляю с завершением практики!</strong> Теперь ты умеешь не только находить ошибки в HTML-коде, но и эффективно их исправлять. Этот навык сделает тебя настоящим профессионалом веб-разработки!
</div>
</div>
</body>
</html>
Часть 7: Что Вы теперь умеете
✅ Проводить полную проверку HTML-страницы в валидаторе
✅ Анализировать отчёты об ошибках и составлять план исправлений
✅ Применять стратегию исправления "сверху вниз"
✅ Исправлять типичные ошибки новичков
✅ Заменять устаревшие теги на современные аналоги
✅ Использовать чеклисты для систематических проверок
✅ Добиваться идеально валидного кода без ошибок и предупреждений
Часть 8: Итоги и профессиональные рекомендации
🎯 Ключевые результаты практики:
От хаоса к системе — Вы научились планомерному подходу к исправлению ошибок
От страха к уверенности — Вы понимаете, что любую ошибку можно исправить
От случайности к предсказуемости — Вы знаете, какие ошибки искать в первую очередь
От новичка к профессионалу — Вы приобрели навык, который используют все опытные разработчики
💡 Профессиональные привычки для закрепления:
Проверяйте код в процессе написания — не откладывайте на потом
Создайте персональный чеклист на основе своих частых ошибок
Используйте валидацию в редакторе — настройте автоматическую проверку
Помогайте другим — объясняя ошибки, Вы лучше их запоминаете
Анализируйте закономерности — какие ошибки Вы делаете чаще всего?
🚀 Продвинутые техники для дальнейшего развития:
Интеграция со сборщиками проектов — автоматическая валидация при сборке
Настройка крючков для предварительной фиксации — проверка кода перед сохранением
Использование линтеров — инструментов для проверки стиля кода
Валидация доступности — проверка для людей с ограниченными возможностями
Аудит эффективности — проверка производительности страницы
Помните: Идеально валидный код — это не самоцель, а показатель профессионального подхода к веб-разработке. Каждая исправленная ошибка делает интернет чуточку лучше! 🌟
Теперь Вы вооружены знаниями и инструментами, чтобы создавать безупречный HTML-код, который будет работать корректно во всех браузерах и устройствах! 🎉
(Продолжение следует)