Учебный вариант 00 — пара 13
Это постоянный пример преподавателя для пары 13. Задание: сохранить главную index.html, создать отдельный catalog.html с тремя полными позициями, связать страницы и подключить к обеим общий style.css. Папка примера — Variant00-web; номер 00 студентам не назначается. Все данные этого этапа находятся здесь.
Главная страница
| Элемент | Данные примера |
|---|---|
| Название приложения в шапке | Техника дома · V00 |
Название вкладки title |
Главная — Техника дома · V00 |
| Заголовок главной | Бытовая техника для дома |
| Короткое пояснение | Выберите технику для повседневных дел |
| Описание | Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар. |
| Основное изображение | images/fridge.svg, содержательный alt о холодильнике |
| Переход к каталогу | Посмотреть технику → catalog.html |
| Подпись в подвале | Учебный прототип · Вариант 00 |
На главной один h1 с заголовком главной внутри main, название приложения в header можно оставить обычным абзацем. Если сохраняете миникаталог предыдущей пары, его заголовок — «Каталог техники», пункты — «Холодильник» и «Стиральная машина». Ссылка «Посмотреть технику» теперь открывает отдельный файл, а не #catalog.
Каталог и готовые изображения
Название вкладки — «Каталог — Техника дома · V00», единственный h1 — «Каталог техники», пояснение — «Три товара с основными характеристиками». Шапка и подвал сохраняют название и подпись главной.
| Порядок | Название h2 |
Характеристика | Описание | Файл в проекте |
|---|---|---|---|---|
| 1 | Холодильник | 300 л · 2 камеры | Для хранения свежих и замороженных продуктов | images/fridge.svg |
| 2 | Стиральная машина | 7 кг · 1000 об/мин | Для стирки повседневной одежды | images/washer.svg |
| 3 | Электрочайник | 1,7 л · 2000 Вт | Для быстрого нагрева воды | images/kettle.svg |
Каждая строка становится отдельным article: название, изображение с содержательным alt, характеристика, описание. Позиции идут сверху вниз в указанном порядке. Скопируйте в images три отдельные иллюстрации под исходными именами; рисовать их не требуется.
fridge.svg:
Сохранение изображений: скачанные файлы называйте так, как указано в задании: 010-00-fridge.svg → fridge.svg, 010-00-washer.svg → washer.svg, 010-00-kettle.svg → kettle.svg. Сохраняйте их в своей папке images.
washer.svg:
kettle.svg:
В меню главной только «Каталог» → catalog.html, в меню каталога только «Главная» → index.html. Ссылки на открытую страницу не добавляем. Форму будем делать на следующей паре.
Прежние стили примера: body — sans-serif, текст #1E293B, фон #EFF6FF, margin: 24px; h1 — цвет #1D4ED8. К ним добавляются правила изображений и меню из шагов ниже. Проверьте маршрут «главная → каталог → главная», три разные полные позиции и работу общего CSS на обеих страницах.
Вернуться к объяснению пары 13.