12. Шапка и подвал сайта
У каждого настоящего сайта есть две важные части:
- Шапка (header) — это верх сайта. Там обычно название, логотип и меню.
- Подвал (footer) — это низ сайта. Там пишут автора, дату или контактную информацию.
Представь сайт как письмо: вверху — приветствие, а внизу — подпись. Вот так работают header и footer!
Пример самой простой шапки и подвала
<header>
<h1>Мой первый сайт</h1>
<nav>
<a href="index.html">Главная</a>
<a href="gallery.html">Галерея</a>
<a href="contacts.html">Контакты</a>
</nav>
</header><main>
<h2>Добро пожаловать!</h2>
<p>Это мой первый сайт. Я учусь веб-разработке!</p>
</main>
<footer>
<p>Сделано мною © 2025</p>
</footer>
Здесь тег <main> обозначает «основную часть» страницы. Теперь у тебя сайт выглядит более профессионально!
Как красиво оформить шапку
Добавим немного стиля:
header {
background-color: #333;
color: white;
padding: 15px 0;
text-align: center;
}nav a {
color: white;
text-decoration: none;
margin: 0 15px;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.3s;
}
nav a:hover {
background: #4CAF50;
}
Теперь верх сайта стал похож на настоящее меню из современных сайтов!
Оформляем подвал
Подвал — это низ страницы. Там можно написать, кто сделал сайт, и добавить ссылки.
footer {
background-color: #222;
color: #aaa;
text-align: center;
padding: 15px 0;
font-size: 14px;
}footer a {
color: #4CAF50;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
Теперь сайт выглядит завершённым — вверху шапка, внизу подвал, а посередине — контент.
Добавим немного настроения
Хочешь сделать шапку особенной? Попробуй добавить градиент и тень!
header {
background: linear-gradient(90deg, #4CAF50, #2196F3);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
Теперь верх сайта выглядит ярко и современно!
Мини-проект
Сделай сайт про своего любимого персонажа или игру:- В header — логотип (можно картинку) и меню.
- В main — описание и фото героя.
- В footer — подпись: “Сайт сделал(а) [твое имя]”.
Пример:
<header>
<h1>Сайт про Соника </h1>
<nav>
<a href="index.html">Главная</a>
<a href="gallery.html">Герои</a>
<a href="contacts.html">Контакты</a>
</nav>
</header><main>
<p>Соник — самый быстрый ёж в мире! Он спасает планету от злодея Доктора Эггмана.</p>
</main>
<footer>
<p>Сайт создал Артём © 2025</p>
</footer>
Забавный факт
Первый сайт в мире (в 1991 году!) не имел ни шапки, ни подвала. Он был просто текстом на белом фоне. Сейчас всё стало намного красивее!Главное запомни
- <header> — верх сайта. Обычно содержит название и меню.
- <footer> — низ сайта. Там пишут автора, год и контакты.
- С помощью CSS можно сделать их красивыми и одинаковыми на всех страницах.
Мини-тест
- Для чего нужен тег <header>?
- Что обычно находится в подвале сайта?
- Какой тег обозначает основную часть страницы?