Главная страница » HTML » 38. Боковая панель

38. Боковая панель

В этом уроке мы рассмотрим, как создать боковую панель (или сайдбар) на веб-странице с использованием HTML. Боковая панель часто используется для отображения дополнительной информации, навигационных ссылок или других элементов, которые должны быть доступны пользователю на всех страницах сайта.

Основные принципы создания боковой панели

Размещение боковой панели:
- Боковая панель обычно размещается с левой или правой стороны основной области контента.
Использование элементов HTML:
- Для создания боковой панели можно использовать элементы <aside>, <nav>, <section>, и другие.
Семантика:
- <aside> подходит для дополнительного контента, который не является основной частью страницы, но связан с основным контентом.
- <nav> используется для навигационных ссылок.

Пример создания боковой панели

Рассмотрим пример HTML-документа, который включает боковую панель с навигационными ссылками и дополнительной информацией.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример боковой панели</title>
</head>
<body>
  <header>
    <h1>Добро пожаловать на наш сайт</h1>
  </header>
  <main>
    <aside id="sidebar">
      <h2>Меню</h2>
      <nav>
        <ul>
          <li><a href="#home">Главная</a></li>
          <li><a href="#about">О нас</a></li>
          <li><a href="#services">Услуги</a></li>
          <li><a href="#contact">Контакты</a></li>
        </ul>
      </nav>
      <section>
        <h3>Дополнительная информация</h3>
        <p>Здесь вы можете найти дополнительную информацию о наших продуктах и услугах.</p>
      </section>
    </aside>
    <section id="content">
      <h2>Основной контент</h2>
      <p>Здесь размещается основной контент страницы.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 Наша компания. Все права защищены.</p>
  </footer>
</body>
</html>

Объяснение кода

Шапка страницы:
- <header> содержит главный заголовок страницы.
Основное содержимое:
- <main> содержит две основные части: боковую панель и основной контент.
Боковая панель (<aside>) с идентификатором sidebar:
- Навигационное меню:
  - <nav> содержит список навигационных ссылок.
- Дополнительная информация:
  - <section> используется для дополнительного контента.
Основной контент (<section id="content">):
- Содержит основной текст или элементы страницы.
Подвал страницы:
- <footer> содержит информацию о копирайте.

Расположение боковой панели

По умолчанию боковая панель и основной контент располагаются друг под другом. Если необходимо изменить расположение (например, разместить боковую панель слева от основного контента), потребуется использование CSS для управления стилем и расположением элементов. Поскольку этот урок сосредоточен на HTML, мы не будем рассматривать CSS.

Заключение

В этом уроке мы рассмотрели, как создать боковую панель на веб-странице, используя элементы HTML, такие как <aside>, <nav>, и <section>. Мы узнали, как организовать навигационные ссылки и дополнительный контент, а также как структурировать страницу для лучшего восприятия.

Тестовое задание

Создайте HTML-документ, используя боковую панель для размещения следующих элементов:

Главный заголовок страницы.
Боковая панель с навигационными ссылками и дополнительной информацией.
Основной контент с текстом о вашем проекте.
Подвал страницы с копирайтом.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой сайт с боковой панелью</title>
</head>
<body>
  <header>
    <h1>Мой проект</h1>
  </header>
  <main>
    <aside id="sidebar">
      <h2>Навигация</h2>
      <nav>
        <ul>
          <li><a href="#home">Домой</a></li>
          <li><a href="#about">О проекте</a></li>
          <li><a href="#services">Услуги</a></li>
          <li><a href="#contact">Связаться</a></li>
        </ul>
      </nav>
      <section>
        <h3>Дополнительные ссылки</h3>
        <p>Ссылки на полезные ресурсы и дополнительную информацию.</p>
      </section>
    </aside>
    <section id="content">
      <h2>Основной контент</h2>
      <p>Здесь вы найдете подробное описание моего проекта и его функций.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 Мой проект. Все права защищены.</p>
  </footer>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.