Глава 5: Древо страниц — создаем многостраничный сайт

5.1 Создаем новую страницу «О нас» (about.html)

До сих пор у нас была только главная страница (index.html). Но любой уважающий себя сайт имеет несколько разделов. Давай вынесем секцию «О нас» в отдельную, более подробную страницу.

Принцип: Мы не будем писать всё с нуля. Мы возьмём наш index.html как шаблон, удалим лишнее и добавим новое.

Скопируй основу. В терминале на сервере:
```
cd /var/www/html
sudo cp index.html about.html
```
Теперь у нас есть файл-клон. Всё, что мы сделаем с about.html, не затронет главную страницу.
Редактируем новую страницу. Откроем её в nano:
```
sudo nano about.html
```
Меняем служебную информацию в <head>:
- Найди строку <title>Деревянная Мастерская | Изделия ручной работы</title>.
- Измени её на: <title>О нашей мастерской | Деревянная Мастерская</title>.
- Зачем? В заголовке вкладки браузера и в поисковиках будет понятно, на какой странице находится пользователь.
Меняем наполнение <body>:
- Наша задача: Удалить всё лишнее, оставив шапку, подвал, и расширить секцию «О нас».
- Удали следующие блоки кода (аккуратно, между тегами <section>):
  - Весь блок <section class="hero" id="home"> ... </section> (герой-баннер).
  - Весь блок <section class="gallery" id="gallery"> ... </section> (галерея).
- Оставь:
  - <header>
  - Секцию <section class="about" id="about">
  - <footer>

Превращаем секцию в полноценную страницу. Сейчас у нас осталась только одна секция. Давай сделаем её главным содержанием страницы.

Найди строку <h2>О нашей мастерской</h2> и поменяй <h2> на <h1>О нашей мастерской</h1>. На каждой странице должен быть один <h1> — это главный заголовок именно этой страницы.
Добавь новый, более подробный текст. Отредактируй или дополни текст внутри <p> тегов. Например:

<p>Наша история началась в 2010 году в маленьком гараже, где энтузиаст-столяр Алексей создал свою первую табуретку...</p>
<p>Сегодня мы — команда из пяти мастеров, объединённых любовью к дереву. Мы используем только экологически чистую, выдержанную древесину отечественных пород: дуб, ясень, орех, сосну.</p>
<h3>Наши принципы</h3>
<ul>
    <li><strong>Качество:</strong> Каждое изделило проходит тройной контроль.</li>
    <li><strong>Экологичность:</strong> Мы применяем только безопасные масла и воски.</li>
    <li><strong>Индивидуальность:</strong> Вы можете заказать изделие по своим эскизам.</li>
</ul>

Добавь ещё одну картинку. После списка принципов можешь вставить:

<img src="/images/team_photo.jpg" alt="Наша команда мастеров" style="width:100%; max-width:600px; margin-top:20px; border-radius: 10px;">

(Не забудь потом загрузить файл team_photo.jpg в папку /images/).

Обновляем навигацию (ВАЖНЫЙ ШАГ!). Найди меню в шапке (<nav class="nav">). Ссылка «О нас» сейчас ведёт на якорь #about внутри главной страницы. Теперь она должна вести на отдельную страницу.
- Измени <a href="#about">О нас</a> на <a href="/about.html">О нас</a>.
- Чтобы текущая страница в меню выделялась, можно добавить ей класс, например active. Смени строку на:
```
<a href="/about.html" class="active">О нас</a>
```
Позже в CSS мы добавим правило .nav a.active { color: #c9a769; font-weight: bold; }, чтобы активная ссылка выглядела иначе.
Сохрани изменения (Ctrl+O, Enter, Ctrl+X).
Проверь в браузере: Перейди по адресу http://ТВОЙ_IP/about.html. Увидишь новую, самостоятельную страницу «О нас»!

5.2 Связываем страницы: делаем навигацию рабочей

Теперь нужно обновить меню на главной странице, чтобы ссылка «О нас» вела на новую страницу, а не на якорь.

Открой index.html:
```
sudo nano index.html
```
Найди в шапке ссылку «О нас» и измени её так же: <a href="/about.html">О нас</a>.
Также обнови все остальные ссылки в меню, даже если страниц для них ещё нет. Это задаст структуру на будущее:
```
<a href="/">Главная</a>
<a href="/about.html">О нас</a>
<a href="/gallery.html">Галерея</a>
<a href="/contacts.html">Контакты</a>
```
Обрати внимание: ссылка «Главная» ведёт на / (корень сайта, то есть на index.html).
ВАЖНО: Удали из главной страницы секцию <section class="about" id="about"> ... </section>. Теперь информация «О нас» полностью переехала на отдельную страницу. На главной можно оставить лишь краткое упоминание с ссылкой «Подробнее».
Сохрани изменения в index.html.

Проверка: Открой главную страницу, нажми «О нас» в меню. Тебя должно перебросить на about.html. Нажми «Главная» — вернёшься обратно. Навигация работает!

5.3 Создаем логичную структуру папок на сервере

Когда файлов станет много, они превратятся в свалку. Давай наведём порядок как профессионалы.

Идеальная структура для небольшого сайта:

/var/www/html/
├── index.html              # Главная страница
├── about.html              # Страница "О нас"
├── contacts.html           # (Создадим позже)
├── style.css               # ОБЩИЙ файл стилей для всех страниц
├── script.js               # ОБЩИЙ файл со скриптами (если понадобится)
├── images/                 # Папка для ВСЕХ картинок сайта
│   ├── logo.png
│   ├── workshop.jpg
│   ├── team_photo.jpg
│   └── gallery/
│       ├── item1.jpg
│       └── item2.jpg
├── docs/                   # Папка для файлов для скачивания
│   └── price_list.pdf
└── includes/               # Папка для общих кусков кода (шапка, подвал)
    ├── header.html
    └── footer.html

Как это создать:

cd /var/www/html
sudo mkdir -p images/gallery docs includes

Флаг -p создаёт цепочку вложенных папок сразу.

Переносим файлы:

# Предположим, все картинки уже в /images, переносим их в подпапку gallery
sudo mv /var/www/html/images/*.jpg /var/www/html/images/gallery/ 2>/dev/null || true
# Создаём и перемещаем PDF-документ (если он есть)
sudo cp /tmp/price_list.pdf /var/www/html/docs/

Обновляем пути в HTML: Теперь пути к картинкам в index.html и about.html нужно поправить. Например, если картинка была src="/images/workshop.jpg", а теперь она лежит в gallery, путь станет src="/images/gallery/workshop.jpg".

5.4 Практика: создаем раздел «Блог» с несколькими статьями

Давай создадим не просто страницу, а целый раздел с вложенной структурой.

Создаём папку для блога:
```
sudo mkdir /var/www/html/blog
```

Создаём главную страницу раздела блога (index.html внутри папки):

sudo cp /var/www/html/index.html /var/www/html/blog/index.html
sudo nano /var/www/html/blog/index.html

Очисти тело страницы, оставив шапку и подвал.
В <title> пропиши: <title>Наш блог | Деревянная Мастерская</title>.
Вставь между <header> и <footer>:

<main class="container">
    <h1>Наш блог о дереве</h1>
    <p>Здесь мы делимся секретами мастерства, новинками и историями создания наших работ.</p>
    
    <article class="blog-preview">
        <h2><a href="/blog/first-article.html">Как выбрать древесину для столешницы?</a></h2>
        <p class="date">15 мая 2023</p>
        <p>Краткое описание статьи о различиях дуба, ясеня и ореха...</p>
    </article>
    
    <article class="blog-preview">
        <h2><a href="/blog/second-article.html">Уход за деревянной мебелью: 5 простых правил</a></h2>
        <p class="date">10 апреля 2023</p>
        <p>Краткое описание статьи по уходу...</p>
    </article>
</main>

Создаём папку для отдельной статьи и саму статью:
```
sudo mkdir -p /var/www/html/blog/first-article
sudo cp /var/www/html/about.html /var/www/html/blog/first-article/index.html
sudo nano /var/www/html/blog/first-article/index.html
```
- Обнови <title>.
- Полностью замени содержимое на текст статьи.
- Обрати внимание: статья доступна по пути /blog/first-article/. Apache автоматически будет искать там файл index.html.
Обновляем главное меню. Добавь в навигацию на всех страницах ссылку: <a href="/blog/">Блог</a>.

Почему это круто?

Чистая структура URL: вашсайт.ru/blog/first-article/ выглядит профессионально.
Лёгкое управление: Все файлы статьи (текст, картинки к ней) лежат в своей папке.
Масштабируемость: Так устроены все современные CMS (системы управления контентом).

Практическое задание к главе 5:

Создай страницу «Контакты»: По образцу about.html создай файл contacts.html. Помести на неё карту (можно статичную картинку с Google Maps), форму обратной связи (пока просто HTML-каркас, без функционала отправки) и подробные реквизиты.
Разнеси картинки по папкам: Перенеси все картинки галереи в /images/gallery/, а логотипы и иконки — в /images/icons/. Не забудь поправить все пути src в HTML-файлах.
Сделай «хлебные крошки»: На странице about.html под шапкой, но перед <h1>, добавь навигационную строку:
```
<div class="breadcrumbs">
    <a href="/">Главная</a> / <span>О нас</span>
</div>
```
Это поможет пользователям понимать, где они находятся. Добавь в style.css простые стили для .breadcrumbs.

Вывод главы: Ты больше не зависишь от одной страницы. Ты научился создавать структуру сайта, как архитектор создаёт план здания: есть главный вход (index.html), есть крылья (about.html, blog/), а внутри них — комнаты (blog/first-article/). Ты управляешь навигацией и понимаешь, как связаны файлы и папки на сервере. Это уровень уверенного пользователя!

ПредыдущаяГлава 4: Анатомия HTML и CSS СледующаяГлава 6: Видимость в локальной сети и не только

Последнее обновление 1 месяц назад