HTML: link
Почти у всех вкладок в браузере существуют маленькие иконки, которые называются фавиконки. Они, как и заголовок, позволяют быстро ориентироваться во вкладках и переходить на нужную. Их используют поисковые системы, показывая рядом с названием страницы в поиске.
Для того, чтобы установить такую иконку на страницу, используется тег <link>, у которого указываются два атрибута:
relдля указания контентаhrefдля указания ссылки на иконку
<link rel="icon" href="/favicon.png">Разные устройства могут отображать иконки разных размеров и форматов, поэтому сейчас добавляется не одна, а сразу несколько иконок. У тега <link> возможно указать тип изображения и его размер. Делается это с помощью атрибутов type и sizes.
Укажем, что иконка формата png и размером 32x32
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">После неё можно указать ещё несколько иконок с разными размерами:
<link rel="icon" href="/favicon64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon16.png" type="image/png" sizes="16x16">При указании размеров первым числом указывается ширина в пикселях, а вторым значением высота.
Теперь браузеры на разных устройствах смогут точнее работать с иконками и сразу загружать ту, которая им подходит.
Тег <link> позволяет добавлять не только фавиконку, но и подключать файлы стилей, шрифты, подсказывать браузерам следующую (или предыдущую) страницу статьи. Самый распространённый пример — подключение файла CSS к HTML-странице:
<link rel="stylesheet" href="style.css">Задание
Добавьте link на фавиконку https://www.w3schools.com/favicon.ico с размером 64x64.
Полезное
Все возможности тега
<link>можно посмотреть на MDN Web DocsКак и другие метатеги, тег
<link>указывается в разделеhead
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const linkIcon = query(document, 'link[rel="icon"]');
expect(linkIcon).to.have.attr('href', 'https://www.w3schools.com/favicon.ico');
expect(linkIcon).to.have.attr('sizes', '64x64');
});Решение учителя откроется через:
20:00
