- Введение
- Что такое многостраничный сайт?
- Основная структура сайта
- Создание главной страницы (index.html)
- Создание дополнительных страниц
- Навигационное меню
- Стилизация сайта с помощью CSS
- Добавление контента на страницы
- Тестирование и просмотр сайта
- Заключение
Введение
Создание многостраничного сайта с использованием HTML и CSS является фундаментальным навыком для веб-разработчиков. В этой статье мы подробно рассмотрим процесс создания такого сайта с нуля, включая структуру файлов, написание кода и стилизацию элементов.
Что такое многостраничный сайт?
Многостраничный сайт состоит из нескольких связанных между собой веб-страниц. Каждая страница может содержать уникальный контент, но все они объединены общей навигацией и дизайном. Такой подход позволяет структурировать информацию и улучшить пользовательский опыт.
Основная структура сайта
Структура папок
Прежде чем начать, создадим базовую структуру папок для нашего проекта:
my-website/
├── index.html
├── about.html
├── contact.html
├── css/
│ └── style.css
└── images/
Основные файлы
- index.html – главная страница сайта.
- about.html – страница «О нас».
- contact.html – страница «Контакты».
- css/style.css – файл стилей.
- images/ – папка с изображениями.
Создание главной страницы (index.html)
HTML-структура
Откройте файл index.html и добавьте следующую базовую структуру HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой Многостраничный Сайт</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Здесь будет контент -->
</body>
</html>
Подключение CSS
Обратите внимание на строку в разделе <head>, где мы подключаем наш CSS-файл:
<link rel="stylesheet" href="css/style.css">Убедитесь, что у вас есть папка css и файл style.css внутри нее.
Создание дополнительных страниц
Страница «О нас» (about.html)
Создайте файл about.html и скопируйте в него базовую структуру из index.html. Измените <title> на «О Нас»:
<title>О Нас - Мой Многостраничный Сайт</title>Страница «Контакты» (contact.html)
Повторите те же действия для файла contact.html, заменив <title> на «Контакты»:
<title>Контакты - Мой Многостраничный Сайт</title>Навигационное меню
Создание меню
Чтобы связать страницы между собой, добавим навигационное меню. Вставьте следующий код внутри тега <body> выше основного контента:
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О Нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>
</nav>
Связывание страниц
Добавьте навигационное меню на все страницы сайта, чтобы пользователь мог легко перемещаться между ними.
Стилизация сайта с помощью CSS
Внешний CSS-файл (style.css)
Откройте файл css/style.css и добавьте базовые стили для навигации и контента.
Базовые стили
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: block;
color: #fff;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #575757;
}
Добавление контента на страницы
Использование заголовков (h1-h6)
Добавьте на главную страницу следующий контент после навигации:
<h1>Добро пожаловать на наш сайт!</h1>
<p>Мы рады видеть вас на нашей главной странице.</p>
Параграфы и изображения
На странице «О нас» можно добавить информацию о компании и изображение:
<h1>О Нас</h1>
<p>Наша компания специализируется на...</p>
<img src="images/our-team.jpg" alt="Наша команда">
Тестирование и просмотр сайта
Откройте файл index.html в браузере и протестируйте навигацию между страницами. Убедитесь, что все ссылки работают правильно, а стили отображаются корректно.
Заключение
Мы подробно рассмотрели, как создать многостраничный сайт с помощью HTML и CSS. Вы узнали о структуре файлов, создании навигационного меню, связывании страниц и стилизации контента. Этот базовый проект можно расширять и улучшать, добавляя новые страницы, функциональность и сложные стили.
