generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
50 lines (33 loc) · 3.19 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
---
name: link
theory: |
Почти у всех вкладок в браузере существуют маленькие иконки, которые называются _фавиконки_. Они, как и заголовок, позволяют быстро ориентироваться во вкладках и переходить на нужную. Их используют поисковые системы, показывая рядом с названием страницы в поиске.
![Фавиконка и название страницы на вкладке](https://i.imgur.com/PATzgdE.png)
Для того, чтобы установить такую иконку на страницу, используется тег `<link>`, у которого указываются два атрибута:
* `rel` для указания контента
* `href` для указания ссылки на иконку
```html
<link rel="icon" href="/favicon.png">
```
Разные устройства могут отображать иконки разных размеров и форматов, поэтому сейчас добавляется не одна, а сразу несколько иконок. У тега `<link>` возможно указать тип изображения и его размер. Делается это с помощью атрибутов `type` и `sizes`.
Укажем, что иконка формата _png_ и размером _32x32_
```html
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
```
После неё можно указать ещё несколько иконок с разными размерами:
```html
<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-странице:
```html
<link rel="stylesheet" href="style.css">
```
instructions: |
Добавьте `link` на фавиконку https://www.w3schools.com/favicon.ico с размером 64x64.
tips:
- Все возможности тега `<link>` можно посмотреть на [MDN Web Docs](https://developer.mozilla.org/ru/docs/Web/HTML/Element/ссылка)
- Как и другие метатеги, тег `<link>` указывается в разделе `head`