Использование тегов header и footer для создания шапки и подвала страницы

10.09.24 в 12:53

160

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

Подготовка

Базовое понимание HTML
Редактор кода, такой как Visual Studio Code, Sublime Text или Atom

Цели

Знать о назначении и преимуществах использования тегов header и footer.
Уметь использовать теги header и footer в HTML-документе
Применять базовый стиль CSS к шапке и подвалу сайта
Получите рекомендации по использованию шапки и подвала в веб-дизайне

Инструменты

Редактор кода (Visual Studio Code, Sublime Text или Atom)
Веб-браузер (Google Chrome, Mozilla Firefox или Safari)

Пошаговая инструкция

1. Создайте новый HTML-файл с базовой структурой

Откройте редактор кода и создайте новый HTML-файл.
Добавьте базовую структуру HTML, включая теги !DOCTYPE, html, head и body.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример Header и Footer</title>
</head>
<body>

</body>
</html>

2. Добавьте раздел header в свой HTML-файл

Внутри тега body добавьте тег header.
Включите соответствующий контент в тег header, например заголовок сайта и меню навигации.

<body>
    <header>
        <h1>Мой сайт</h1>
        <nav>
            <a href="#">Главная</a>
            <a href="#">О нас</a>
            <a href="#">Контакты</a>
        </nav>
    </header>
</body>

3. Добавьте раздел footer в свой HTML-файл

Внутри тега body добавьте тег footer после основного содержимого.
Включите соответствующий контент в тег footer, например информацию об авторских правах и контактные данные.

<body>
    ...
    <footer>
        <p>2024 Мой сайт. Все права защищены.</p>
        <p>Contact: <a href="info@мойсайт.рф">info@мойсайт.рф</a></p>
    </footer>
</body>

4. Примените базовый стиль CSS к шапке и подвалу страницы

Добавьте внутренний тег style в раздел head вашего HTML-файла.
Примените простые стили CSS к тегам header и footer, такие как цвет фона, размер шрифта и отступы.

<head>
    ...
    <style>
        header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        footer {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

5. Протестируйте свою страницу в браузере

Сохраните ваш HTML-файл и откройте его в веб-браузере, чтобы просмотреть верхние и нижние колонтитулы
Убедитесь, что дизайн и верстка выглядят так, как ожидалось.

Советы и устранение неполадок

Всегда указывайте название сайта или логотип в заголовке для удобства идентификации и навигации.
Чтобы улучшить взаимодействие с пользователями, содержимое ваших header и footer должно быть кратким и актуальным.
Убедитесь, что все HTML-теги правильно закрыты, чтобы избежать непредвиденных проблем с отображением.

Заключение

Отлично! Вы успешно научились использовать теги header и footer в HTML для определения шапки и подвала вебстраницы. Эти теги необходимы для создания хорошо структурированной и визуально привлекательной страницы сайта. Продолжая изучать и практиковать свои навыки веб-дизайна, вы сможете экспериментировать с более продвинутыми техниками и создавать более сложные header и footer для своих веб-сайтов.

html header footer