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

💡 Объяснение

Задача второй страницы

Главная страница кратко рассказывает обо всём и приглашает дальше. Вторая страница раскрывает одну тему подробно: история увлечения, факты о городе, инструкция по уходу за питомцем, описание любимой книги, галерея. Здесь больше текста, поэтому особенно важно, чтобы его было удобно читать.

Шаг за шагом

1. В VS Code скопируй index.html и назови копию по смыслу: care.html, history.html, gallery.html.
2. Поменяй <title> — например, «Уход за котом — Мой питомец».
3. Оставь header и footer как есть.
4. Удали содержимое main и напиши новое.
5. В меню перенеси класс active на пункт этой страницы.
6. Открой index.html и добавь в меню ссылку на новую страницу. Поставь ссылку на неё и с кнопки на главной.

Меню на всех страницах должно быть полностью одинаковым, кроме класса active. Если на одной странице 3 пункта, а на другой 4 — посетитель запутается.

Как сделать длинный текст удобным

Люди в интернете не читают, а сканируют текст взглядом, выхватывая заголовки, выделения и списки. Поэтому:

• Подзаголовки h2 и h3 каждые несколько абзацев — они работают как указатели.
• Короткие абзацы по 2–4 предложения.
• Списки для перечислений и шагов.
• Выделения strong для ключевых слов — но не больше пары на абзац.
• Картинки через каждые 2–3 абзаца — «передышка» для глаз. С figure и подписью.
• Ширина текста — не больше 60–80 символов в строке: max-width: 700px для блока статьи.
• Удобный line-height: 1.6.

Разметка статьи

<main class="article">
  <h1>Как ухаживать за котом</h1>
  <p class="lead">Короткое вступление: о чём эта страница.</p>

  <section>
    <h2>Питание</h2>
    <p>…</p>
    <ul>…</ul>
  </section>

  <figure>
    <img src="images/cat-eats.jpg" alt="Кот ест из миски">
    <figcaption>Барсик обедает</figcaption>
  </figure>

  <section>
    <h2>Игры</h2>
    <p>…</p>
  </section>
</main>

Не забывай: на каждой странице один h1 — название этой страницы.

Стили для статьи

.article {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.6;
}
.article h2 {
  margin-top: 2rem;
  color: var(--main);
}
.lead {
  font-size: 1.2rem;
  color: #636e72;
}

Стили добавляй в тот же style.css — он общий для всех страниц.

«Хлебные крошки»

На больших сайтах над заголовком пишут путь: Главная › Уход за котом. Это «хлебные крошки» — как в сказке, по ним можно вернуться назад. Для маленького сайта не обязательно, но это приятный бонус.

Проверка

• С главной можно попасть на вторую страницу (через меню и кнопку).
• Со второй — вернуться на главную (меню и логотип).
• Активный пункт меню правильный на обеих страницах.
• У каждой страницы свой title и свой h1.
• Стили подключены и выглядят одинаково.

Частые ошибки

• Обновили меню только на новой странице.
• Остался title «Главная» на второй странице.
• Текст «простынёй» без подзаголовков и картинок.
• Текст скопирован с чужого сайта — пиши своими словами.

Проверь себя

1. Что меняется, а что остаётся при копировании страницы?
2. Назови 4 приёма, делающих длинный текст удобным.
3. Зачем ограничивать ширину блока статьи?