🚀

Модуль 3. Проектная работа

Занятие 27
Проект: вторая страница

Сегодня у нашего сайта появится вторая страница, и между страницами можно будет переходить.

👀

Сегодня сделаем вот такое

📖

Вторая страница — подробности

🏠 Главная
кратко обо всём
📖 Вторая
одна тема подробно

История · факты · инструкция · галерея

📋

Шаг за шагом

  1. Скопировать index.html → care.html
  2. Поменять title
  3. header и footer — оставить
  4. Новое содержимое main
  5. Перенести active в меню
  6. Добавить ссылку в меню главной
👀

Люди сканируют текст

В интернете текст не читают — его пробегают глазами.

  • 📌 Подзаголовки — указатели
  • ✂️ Короткие абзацы
  • 📋 Списки
  • Выделения ключевых слов
  • 🖼 Картинки — передышка
📰

Страница-статья

  • Один h1 — название страницы
  • section + h2 — разделы
  • figure — картинка с подписью
  • max-width: 700px + line-height: 1.6
<main class="article">
  <h1>Как ухаживать за котом</h1>
  <section>
    <h2>Питание</h2>
    <p>Кормить кота нужно <strong>2–3 раза</strong> в день.</p>
    <ul><li>Сухой корм</li><li>Свежая вода</li></ul>
  </section>
  <figure>
    <img src="/images/cat.svg" alt="Довольный кот">
    <figcaption>Барсик пообедал</figcaption>
  </figure>
</main>
body { font-family: Georgia, serif; background: #fdf6ec; }
.article { max-width: 520px; margin: 0 auto; padding: 8px; line-height: 1.6; }
.article h2 { color: #d35400; border-bottom: 2px solid #f6c89f; }
figure { text-align: center; margin: 12px 0; }
figure img { width: 110px; }
figcaption { font-style: italic; color: #7f8c8d; }
🍞

Бонус: хлебные крошки

Главная › Питомцы › Уход за котом

Как в сказке про Гензеля и Гретель — по крошкам можно вернуться назад.

<nav class="crumbs">
  <a href="index.html">Главная</a> ›
  <span>Уход за котом</span>
</nav>
.crumbs { font-family: sans-serif; font-size: 18px; color: #636e72; }
.crumbs a { color: #0984e3; }
✅

Проверка навигации

  • 🏠 → 📖 через меню и кнопку
  • 📖 → 🏠 через меню и логотип
  • 📍 Активный пункт правильный
  • 🏷 Свой title и свой h1
  • 🎨 Стили одинаковые
🃏

Запомни!

  • <title>Своё на каждой странице
  • href="about.html"Ссылка на страницу
  • .activeТекущий пункт меню
  • <section> + <h2>Разделы страницы
  • <figure>Картинка с подписью
⌨️

Практика: Вторая страница сайта

  1. Создай вторую страницу на основе главной.
  2. Наполни main: минимум 2 раздела с подзаголовками, список и картинку.
  3. Обнови меню на обеих страницах и выдели активный пункт.
  4. Проверь все ссылки: туда и обратно.

🚀 Со звёздочкой: Сделай третью и четвёртую страницы и «хлебные крошки»: Главная › Уход за котом.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Подготовь тексты и картинки для оставшихся страниц.