Проверка и доработка тематического сайта

Проверка и доработка тематического сайта

Пройди чек-лист, найди дефекты мини-сайта, исправь каждый пункт и подтверди результат повторной проверкой.

На прошлом уроке ты собрал фрагмент тематического сайта. Сегодня задача другая: не строить с нуля, а проверить и доработать. Сайт «почти готов» часто скрывает опечатки в ссылках, неверный путь к картинке или забытый controls.

Результат урока

Получишь (или откроешь) папку ThemeCheck_10 клуба «Горизонт» с намеренными ошибками; пройдёшь чек-лист (ссылки, текст, изображения, мультимедиа, общий CSS); исправишь каждый найденный дефект; после каждой правки сохранишь файл, обновишь страницу (F5) и отметишь повторную проверку. Формы, сервер и контрольная — следующий урок.

Перед началом

Работай в своей копии папки и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: относительные ссылки, img/alt, audio/video с controls, подключение style.css (уроки 12–16) и сборку ThemeSite (урок 18).

Основа — глава 2 учебника, практикум по проверке и доработке тематического сайта (опора на § 6–9).

Зачем чек-лист

Чек-лист — заранее записанный перечень проверок с ожидаемым результатом. Он помогает не пропустить скрытый дефект и сравнивать «что должно быть» с «что видно в браузере».

Ссылки в обе стороны

Пройди меню с каждой страницы. Опечатка в href ломает переход даже если файл рядом.

Пример дефекта и исправления:

<!-- было -->
<a href="circels.html">Кружки</a>
<!-- стало -->
<a href="circles.html">Кружки</a>

Проверь также обратный переход: с расписания на главную должен вести index.html, а не выдуманный home.html.

Текст и контраст

Важный текст должен отличаться от фона. Светло-серый цвет (#cccccc) на белом фоне читать трудно. В style.css исправь цвет класса .faded на тёмный, например #1b2430.

Изображения: src и alt

Если картинка не видна — сначала сверь имя файла и расширение. Если картинка есть, но нет alt — страница хуже для доступности.

<img src="images/gorizont.png"
     alt="Эмблема клуба Горизонт"
     width="240" height="160">

src и alt — два разных пункта чек-листа.

Мультимедиа: controls и путь

Два разных дефекта:

1. нет controls — файл может быть на месте, но кнопок управления нет;
2. неверный путь — файл не найден, медиа не загружается.

<audio controls src="media/club-bell.mp3"></audio>
<video controls src="media/club-clip.mp4" width="320" height="180"></video>

Общий style.css

На каждой странице должна быть одна и та же строка:

<link rel="stylesheet" href="style.css">

Имя styles.css вместо style.css ломает единообразие: одна страница выглядит «чужой».

Цикл исправления

Правило урока: одна правка — одна повторная проверка. Не исправляй всё сразу «вслепую». После правки сохрани файл, обнови страницу (F5) и отметь пункт на листе.

Типичные дефекты

Просмотр в браузере

Держи рядом редактор и браузер. Открой index.html, пройди меню, сравни оформление, проверь картинку и медиа. Интернет не нужен.

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем открой свою копию ThemeCheck_10.

Практика: ThemeCheck_10

Тема — школьный клуб «Горизонт» (как на уроке 18). В папке лежат три HTML-страницы, style.css, изображение и учебные медиафайлы. В коде посажены дефекты.

Лист проверки

Критерии готовности

Шесть диагностических баллов: ссылки туда-обратно; исправлены сломанные ссылки меню; src и alt изображения; контраст текста; audio/video с controls и верными путями; единый style.css и отмеченная повторная проверка. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: прогони свой ThemeSite_10 с урока 18 тем же чек-листом.

Если результат отличается

Объясни самостоятельно

1. Какие проверки входят в чек-лист готовности тематического сайта? Назови не меньше трёх.
2. Почему после исправления ссылки нужно снова пройти меню? Что проверить у изображения?
3. Чем дефект «нет controls» отличается от дефекта «неверный путь к видео»?

Показать ответ после выполнения

Домашнее задание

Глава 2, практикум: проверка и доработка. Письменно: 1) три пункта чек-листа сайта; 2) зачем повторная проверка после правки; 3) пример дефекта изображения и его исправление. По желанию — доработать свой ThemeSite. Формы, сервер и контрольная не задаются (урок 20). Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2 «Основы веб-конструирования» (практикум: проверка и доработка; опора на § 6–9). Содержание главы. Электронное приложение.

MDN Web Docs: Creating hyperlinks, Images in HTML, Video and audio content, CSS basics.

ThemeCheck, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.