Курс 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
Как с вами связаться? 🙃
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Привет! Я Тота и моя задача помочь в обучении. Чтобы активировать меня, нужно зарегистрироваться или залогиниться, если у вас уже есть аккаунт
Ваше упражнение проверяется по этим тестам
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 const linkIcon = query(document, 'link[rel="icon"]');
5
6 expect(linkIcon).to.have.attr('href', 'https://www.w3schools.com/favicon.ico');
7 expect(linkIcon).to.have.attr('sizes', '64x64');
8});
9Решение учителя откроется через:
