В вызове после предыдущей части мы размечали рецепт печенья для Кекса. Он оказался настолько хорошим, что мы решили сделать его доступным для всех. Мы сохранили рецепт в формате PDF, чтобы любой желающий мог его скачать и распечатать. Осталось добавить ссылку на этот самый файл.
Когда мы переходим по ссылкам, то попадаем на другие страницы или места на странице. Но при переходе по ссылке на файл браузер предложит его скачать.
Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие.
Для того чтобы предотвратить открытие файлов прямо в браузере, у тега <a> существует атрибут download, который поможет именно скачать файл.
<a href="file.pdf" download>Браузер скачает меня, а не будет читать</a>
При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать атрибут rel="noopener". Этот атрибут позволяет игнорировать скрипты сторонней страницы, которые могут влиять на загрузку файла. Особенно актуален этот атрибут в случае, если загрузка происходит в новой вкладке или новом окне.
index.html
style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Сайт начинающего верстальщика</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href="index.html">На главную</a>
</nav>
</header>
<main>
<article>
<h1>День двенадцатый. Все любят печенье</h1>
<p>Сегодня Кекс попросил меня сделать рецепт <a>того самого рыбного печенья</a> доступным для всех своих клиентов. Но вот незадача, у меня нет принтера, да и печатать рецепт на всех, тратить бумагу, не хочется. Пришлось сделать ссылку для скачивания файла.</p>
<p>
<!-- Оберните в ссылку этот текст -->
Скачать
</p>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>