11. Структура сайта из нескольких страниц

Сегодня мы научимся делать несколько страниц и связывать их между собой. Это называется навигация.

Каждая страница сайта — как отдельная комната в доме, а ссылки — это двери между ними.

Что нужно сделать

Создай в папке проекта три файла:

index.html — главная страница;
gallery.html — страница с картинками;
contacts.html — страница с контактами;

Пример: Главная страница (index.html)


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой сайт</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Добро пожаловать на мой сайт!</h1>
  <p>Это главная страница.</p>
  <a href="gallery.html">Перейти в галерею</a>
  <a href="contacts.html">Контакты</a>
</body>
</html>

Теперь, если кликнуть на ссылку, ты перейдёшь на другую страницу сайта!

Пример: Галерея (gallery.html)


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Галерея</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Моя галерея</h1>
  <img src="cat.jpg" alt="Котик">
  <img src="dog.jpg" alt="Пёсик"><p><a href="index.html">Вернуться на главную</a></p>
</body>
</html>

Пример: Контакты (contacts.html)


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Контакты</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Контакты</h1>
  <p>Напиши мне: <a href="mailto:myemail@example.com">myemail@example.com</a></p>
  <p><a href="index.html">Вернуться на главную</a></p>
</body>
</html>

Теперь у тебя есть три страницы, и все они связаны между собой!

Создаём меню навигации

Чтобы не вставлять ссылки в каждую страницу вручную, можно сделать красивое меню:


<nav>
  <a href="index.html">Главная</a>
  <a href="gallery.html">Галерея</a>
  <a href="contacts.html">Контакты</a>
</nav>

CSS для меню:


nav {
  background: #222;
  padding: 10px;
  text-align: center;
}
nav a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #4CAF50;
}nav a:hover {
  background: #43a047;
}

Теперь меню одинаковое на всех страницах, и переходить между ними можно как в настоящем сайте!

Совет

Чтобы меню было на всех страницах одинаковым, просто скопируй его HTML-код и вставь в начало <body> каждой страницы.

Мини-проект

Создай сайт о любимом герое или мультфильме:

На главной странице — приветствие и описание.
На странице галереи — картинки персонажей.
На странице контактов — твой e-mail или ссылку на соцсеть.

Пример:


<nav>
  <a href="index.html">Главная</a>
  <a href="gallery.html">Галерея</a>
  <a href="contacts.html">Контакты</a>
</nav><h1>Сайт про Соника!</h1>
<p>Соник — самый быстрый ёж на свете!</p>

Проверь себя

Что делает атрибут href?
Сколько страниц нужно создать в этом уроке?
Как можно сделать меню одинаковым на всех страницах?

Забавный факт

Когда ты переходишь по ссылке, браузер открывает другой HTML-файл. То есть весь сайт — это просто набор связанных файлов, как книжка с разными страницами!

Главное запомни

Каждая страница сайта — отдельный HTML-файл.
Ссылки связывают эти файлы между собой.
Меню помогает легко переходить по сайту.
Главная страница почти всегда называется index.html.