Главная страница » HTML » 33. Шапка

33. Шапка

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

Основные элементы шапки

HTML-структура

Элемент <header> используется для определения шапки страницы. Внутри этого элемента могут быть размещены различные элементы, такие как логотип, навигация и контактная информация.

Пример базовой структуры шапки:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример шапки</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="logo">
      <img decoding="async" src="logo.png" alt="Логотип сайта">
    </div>
    <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>
  </header>
  <main>
    <!-- Основное содержимое страницы -->
  </main>
  <footer>
    <!-- Нижний колонтитул -->
  </footer>
</body>
</html>

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

HTML-структура:
- Элемент <header> содержит логотип и навигационное меню.
- Логотип представлен элементом <div class="logo">, внутри которого находится изображение.
- Навигационное меню <nav> содержит список <ul> с элементами списка <li>, которые представляют собой ссылки.

Пример использования шапки

Полный пример HTML-документа с шапкой:

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример шапки</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <div class="logo">
      <img decoding="async" src="logo.png" alt="Логотип сайта">
    </div>
    <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>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с шапкой, созданной с помощью HTML и CSS.</p>
  </main>
  <footer>
    <p>&copy; 2024 Мой сайт. Все права защищены.</p>
  </footer>
</body>
</html>

Пример использования семантических элементов

Заключение

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

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

Логотип (можно использовать любое изображение).
Навигационное меню с четырьмя ссылками.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Тестовое задание: Шапка</title>
</head>
<body>
  <header>
    <div class="logo">
      <img decoding="async" src="your-logo.png" alt="Логотип сайта">
    </div>
    <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>
  </header>
  <main>
    <h1>Добро пожаловать на наш сайт</h1>
    <p>Это пример страницы с шапкой, созданной с помощью HTML и CSS.</p>
  </main>
  <footer>
    <p>&copy; 2024 Ваш сайт. Все права защищены.</p>
  </footer>
</body>
</html>

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