Чат PHP-разработчиков
Как сделать ссылку на файл в HTML

Делаем ссылку на файл

Итак, в предыдущих уроках я рассказал о том, в чем же разница между абсолютными и относительными адресами. А теперь давайте немного попрактикуемся в том, чтобы указывать ссылки на разные страницы или иные ресурсы.

Как вы уже знаете, ресурсом может выступать любая информация в интернете, будь то страница, видео, фото, файл. Если ссылка ведет на файл, то при нажатии на нее браузер откроет диалоговое окно, в котором будет возможность начать загрузку файла или отказаться от таковой.

Но бывают и исключения. Речь идет о файлах тех типов, с которыми браузер умеет работать. Например, изображения. Их браузер загрузит сразу в своем окне. А современные браузеры умеют также работать с файлами типа pdf, открывая их, а, не предлагая скачать. И это далеко не весь список типов файлов, с которыми работают современные браузеры. В таком случае, чтобы файл скачался а не открылся в браузере, ссылке нужно добавить атрибут download. Например:

<a href="https://minecraft-inside.com/engine/download.php?id=93" download>Скачать SkyBlock Map для MineCraft</a>

Вот в общем-то и всё отличие для ссылок на файлы. Не забудь подписаться, чтобы не пропустить новые уроки!

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Домашнее задание
  • попробуйте создать ссылку на самый обыкновенный файл с текстом, который имеет формат rtf. А затем попробуйте скачать его;
  • а теперь то же самое, только вместо текстового файла используем изображение. Как известно, наиболее популярными в мировой паутине являются изображения с котиками. Можете использовать любое из них, следуя традициям интернета.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (24)


AnnaVyushkova

Добрый вечер! Я не очень поняла, подскажите, пожалуйста. Создавая ссылку на файл с текстом в таком-то формате, как и что именно я должна сделать? Этот файл уже должен как-то быть загружен на стр? Если да, то как загрузить? Или, вообще, как-то по-другому? Как это должно выглядеть <a href="что здесь должно быть?">...</a>?

ivashkevich

Добрый вечер :) Благодарю за Ваши отзывы, помогаете делать наш курс лучше!
Давайте приведу более наглядный пример. Создайте WinRAR-архив с несколькими фотографиями, назовите его photos.rar и положите его в папку с Вашей страничкой. Должно получиться вот так:

После этого нужно создать ссылку на этот файл:

<a href="photos.rar">Скачать архив с фотографиями</a>

Напишите пожалуйста, всё ли получилось.

AnnaVyushkova

Да, все получилось! Спасибо огромное)

ivashkevich

Хорошо, удачи в прохождении курса!)

Pti4ka

Добрый вечер! У меня тоже ест проблемка с этим заданием. атрибут download не работает, файл не скачивается при нажатии, а только открывается, а файл вордовский даже не открывается.

<p><a href="рейтинг кормов.doc">Посмотреть рейтинг кормов </a></p>
<p><a href="рейтинг кормов.doc" download>Скачать файл</a></p>
<p><a href="elya.jpg" download>Скачать файл</a></p>
ivashkevich

Здравствуйте, прошу прощения за долгий ответ. У меня данный код полностью работоспособный. Ничего не менял, просто скопировал и вставил.

ImmortalPsych

Я тоже проверил, всё работает. Вот только вордовские файлы в обоих случаях скачивает почему-то, хотя в первом случае должен быть режим просмотра.

virtual2018

по умолчанию браузеры не умеют открывать файлы офиса, для этого нужно установить соответствующие расширения.

nastasya95

Добрый день! атрибут download не работает, даже не подсвечивается у меня в коде. Что может быть не так? Предлагает только открыть, и при нажатии "да", открывает. Пробовала и с rtf файлом, тоже ничего

<a href="шот.jpg" download> Скачать архив с фотографиями </a>
<a href="проба.doc" download>Cкачать доступный прайс на 10.07.18</a>
ivashkevich

Добрый, а что за браузер?

nastasya95

всё, решила вопрос) в других браузерах открывается)какой- то Microsoft edge был... Спасибо

ivashkevich

Ух! Не пользуйтесь им :D

anastasiia.khaliuk@yandex.ru

Добрый день! Ссылка "скачать" подсвечивается, однако при переходе по ней пишет "Файл не найден. Возможно, он был перемещен или удалён"
Ни с текстовым файлом, ни с архивом не получается
<p>Скачать информацию можно <a href="Виниры.rar" download>здесь</a>
</p>

anastasiia.khaliuk@yandex.ru

Уже разобралась, мой косяк был)

PolinaDavidenko

В Хроме <p><a href="/home/HTML5 для начинающих/images/1488399690.jpg" download>Скачать котиков</a></p> файл не скачивается а просто открывается, почему?

PolinaDavidenko

а zip файл скачивается норм

GiftSky

Добрый вечер, подскажите, пожалуйста, в чем ошибка? Оба варианта лишь открывают файл, а не скачивают. Браузер: Safari, Opera, файл лежит в папке со страничкой. Спасибо за ваш труд, материалы очень доступно изложены. Опыт: 3 дня)

<p>Если вдруг в голову пришла мысль: а не поменять ли обои рабочего стола, то вот <a href= "image.jpg" download="Пейзаж"> тут</a> хорошие :)</p>
        <p>Если вдруг в голову пришла мысль: а не поменять ли обои рабочего стола, то вот <a href= "image.jpg" download> тут</a> хорошие :)</p>
</body> 
GiftSky

Ну вот( криво оформил код, а обновить не вышло...вот нормальный вид

<p>Если вдруг в голову пришла мысль: а не поменять ли обои рабочего стола, то вот <a href= "image.jpg" download="Пейзаж"> тут</a> хорошие :)</p>
<p>Если вдруг в голову пришла мысль: а не поменять ли обои рабочего стола, то вот <a href= "image.jpg" download> тут</a> хорошие :)</p>
ivashkevich

Здравствуйте, а с pdf работает?

GiftSky

Здравствуйте, pdf тоже открывает, а не скачивает

virtual2018

Всем у кого в этом уроке вместо скачивания требуемого файла он просто открывался я могу указать на причину такого поведения.
Дело в том, что в документации HTML по атрибуту download тега а (ссылка на документацию), есть небольшое пояснение, что данный атрибут соблюдается только на ресурсах с тем же доменом. В нашем случае это значит, что если Вы создали свою страницу просто в некоторой папке на диске Вашего компьютера и рядом положили файлы на которые указывают ссылки, то браузер не может корректно распознать сетевую часть адреса (так как её фактически нет, нет домена/сайта на котором бы находилась Ваша страница) и поэтому атрибут просто игнорируется. Если же Вы переместите эту же страничку, например в каталог сайта в OpenServer (в нем работают в курсе "PHP для начинающих" например), всё будет работать как надо, так как в этом случае броузер получает всю необходимую ему информацию.
P.S.: если браузер не знает такого типа файла, т.е. не может с ним работать напрямую как например с [jpg,png,gif,pdf], то он конечно будет скачивать эти файлы (например zip-архивы)

Lex

Спс огромное!!! Пол часа мучился - почему же download не работает у меня, пока не дошел до Вашего коммента!!!
ps В урок бы добавить эту инфу

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Логические задачи с собеседований