Учебный вариант 00 — пара 12

Это постоянный пример преподавателя, который студентам не назначается. Задание пары 12: в прежнем Variant00-web/index.html объединить содержание по смыслу и подключить один style.css. Тексты и картинку первой страницы сохраняем; миникаталог и ссылку из пары 11 не удаляем.

Полные данные исходной страницы

Данные	Значение и место в HTML
Название приложения	Техника дома · V00 — `title` и `h1`
Короткое пояснение	Выберите технику для повседневных дел — первый `p`
Заголовок главной	Бытовая техника для дома — `h2`
Описание	Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар. — второй `p`
Изображение	`images/fridge.svg`, `alt="Холодильник"`, ширина 240

Готовая отдельная иллюстрация fridge.svg для копирования в images:

Сохранение изображения: скачанный 010-00-fridge.svg назовите fridge.svg и сохраните в своей папке images, как указано в задании.

Холодильник — иллюстрация учебного варианта 00

Задание этой пары

Часть	Что входит в пример
`header`	Название «Техника дома · V00», пояснение «Выберите технику для повседневных дел», ссылка «Посмотреть технику» с `href="#catalog"`
`main`	Заголовок «Бытовая техника для дома», описание «Три прибора для кухни и дома. Сравните характеристики и выберите нужный товар.» и изображение `images/fridge.svg`; «Каталог техники» с `id="catalog"` и список «Холодильник», «Стиральная машина»
`footer`	Абзац «Учебный прототип · Вариант 00»
Подключение в `head`	Строка подключения общего CSS приведена ниже
Итоговый цвет `h1`	`#1D4ED8` после опыта с `navy`
Правило `body`	Шрифт `sans-serif`, текст `#1E293B`, фон `#EFF6FF`, внешний отступ `24px`

Внутри head добавьте строку:

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

Проверьте две независимые вещи: HTML-группы сохраняют содержание и переход к #catalog, а CSS меняет его вид. Одна правка текста в HTML и одна правка цвета в CSS должны дать разные наблюдаемые результаты. Схемы и действия находятся в объяснении пары по ссылке в конце листа.

Вернуться к объяснению пары 12.