HTML: Шапка
Шапкой на сайте принято называть верхнюю область, в которой находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок <div>, что не вносило «смысла».
В HTML5 для разметки шапки сайта используется парный тег <header>, внутри которого располагаются элементы.
<header>
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип"> <!-- Логотип сайта -->
<div id="menu"> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
</header>Тег <header> по своему поведению не отличается от тега <div> и не содержит отличных стандартных стилей, поэтому его можно использовать на любом сайте, не боясь нарушить внешний вид сайта.
Задание
Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок.
Для картинки используйте следующий код:
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Code Basics">Полезное
Элемент
headerне является уникальным для страницы. Он может использоваться не только как шапка всей страницы, но и как шапка секции
HTML: Шапка
Шапкой на сайте принято называть верхнюю область, в которой находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок <div>, что не вносило «смысла».
В HTML5 для разметки шапки сайта используется парный тег <header>, внутри которого располагаются элементы.
<header>
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Логотип"> <!-- Логотип сайта -->
<div id="menu"> <!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
</header>Тег <header> по своему поведению не отличается от тега <div> и не содержит отличных стандартных стилей, поэтому его можно использовать на любом сайте, не боясь нарушить внешний вид сайта.
Задание
Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок.
Для картинки используйте следующий код:
<img src="https://cdn6.hexlet.io/1P6tmafZTIy5.png" alt="Code Basics">Полезное
Элемент
headerне является уникальным для страницы. Он может использоваться не только как шапка всей страницы, но и как шапка секции
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, querySelectorAll, expect }) => {
const header = query(document, 'header');
expect(header).to.be.visible;
const img = query(header, 'img');
expect(img).to.be.visible;
const ul = query(header, 'ul');
expect(ul).to.be.visible;
const li = querySelectorAll(ul, 'li');
expect(li).to.be.length(2);
const link = querySelectorAll(ul, 'a');
expect(link).to.be.length(2);
});Решение учителя откроется через:
20:00
