Знакомство с HTML5 / Хедер и футер. Теги header и footer [1/19]
×

Хедер и футер. Теги header и footer [1/19]

В этом вводном курсе мы познакомимся с новыми возможностями HTML5. Основной упор сделаем на новые теги, но коснёмся и других нововведений.

Мы будем пошагово собирать блог известного вам веб-разработчика, используя появившиеся в HTML5 теги и применяя другие новшества. Но сначала несколько важных фактов об HTML5:

  • HTML5 обратно совместим с HTML4.
  • HTML5 не цельная спецификация, а набор модулей разной степени готовности.
  • Многие модули HTML5 имеют хорошую поддержку во всех текущих браузерах.
  • HTML5 с нами надолго.

Это означает, что HTML5 можно использовать уже сейчас. Для этого достаточно задать такой тип документа:

<!DOCTYPE html>

Что вы уже давным-давно делаете в наших курсах.

А теперь пара новых тегов:

  • <header> — хедер сайта или раздела;
  • <footer> — футер сайта или раздела.

Да-да, это те самые хедер и футер, которые обычно верстались дивами с классами header или footer. Они были настолько распространены, что для них было решено создать собственные теги.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Хедер и футер. Теги header и footer</title> <meta charset="utf-8"> </head> <body> Хедер Футер </body> </html>
CSS
html, body { margin: 0; padding: 0; color: white; background-color: #2c3e50; } /* Header */ header.page-header { position: relative; z-index: 5; min-height: 20px; padding: 20px; color: white; background-image: linear-gradient(45deg, #34495e 25%, transparent 25%), linear-gradient(-45deg, #34495e 25%, transparent 25%), linear-gradient(135deg, #34495e 25%, transparent 25%), linear-gradient(-135deg, #34495e 25%, transparent 25%); background-position: 10px 0, 10px 0, 0 0, 0 0; background-size: 20px 20px; box-shadow: 0 0 5px 0 #333333; } /* Footer */ footer.page-footer { min-height: 50px; padding: 20px; font-size: 14px; color: black; background-color: #f1c40f; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(-45deg, transparent 50%, white 50%), linear-gradient(135deg, transparent 50%, #2c3e50 50%), linear-gradient(-135deg, transparent 50%, #2c3e50 50%); background-repeat: repeat-x; background-position: 0 0, 0 0, 0 100%, 0 100%; background-size: 10px 12px; }
HTML Academy
  1. Добавьте в body элемент header с классом page-header и текстом Хедер,
  2. а сразу после него элемент footer с классом page-footer и текстом Футер.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.