Скачивание файлов через ссылки (download)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 43
Автор
Рек. время прохождения 4 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
Атрибут download позволяет превратить обычную ссылку в кнопку скачивания файла. При клике на такую ссылку браузер не переходит по адресу, а начинает загрузку файла. Этот атрибут работает только с файлами того же домена из соображений безопасности. Вы можете указать имя файла для сохранения или оставить атрибут пустым, тогда будет использовано оригинальное имя. В этих заданиях вы научитесь создавать различные ссылки для скачивания файлов, комбинировать атрибут download с другими атрибутами и стилизовать такие ссылки для лучшего пользовательского опыта. Функционал тренажера ограничен, скачивание отключено.
Список тем

Простая ссылка для скачивания

id: 37806_download-basic-1

Создайте ссылку, которая позволит скачать изображение при клике на неё. Ссылка должна отображать текст 'Скачать фото'.

CSS
a {
  color: #2196F3;
  text-decoration: none;
  padding: 10px 20px;
  background: #f0f0f0;
  border-radius: 5px;
  display: inline-block;
}

a:hover {
  background: #e0e0e0;
}
HTML
<input1 href="https://naytikurs.ru/img/1.png" input2>Скачать фото</input1>
Для создания ссылки на скачивание используйте тег <a> с атрибутом href для указания пути к файлу и атрибутом download для активации скачивания вместо перехода.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Скачивание с указанием имени файла

id: 37806_download-filename-2

Создайте ссылку для скачивания изображения, которое при сохранении будет называться 'my-photo.png'.

CSS
.download-btn {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
}

.download-btn:hover {
  background: #45a049;
}
HTML
<a class="download-btn" input1="https://naytikurs.ru/img/2.png" input2="input3">Загрузить изображение</a>
Атрибут download может принимать значение - имя файла для сохранения. Укажите download="имя_файла" чтобы задать конкретное имя при скачивании.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Скачивание видео файла

id: 37806_download-video-3

Создайте ссылку для скачивания видео с пользовательским именем 'video-clip.mp4'. Используйте класс 'video-download' для стилизации.

CSS
.video-download {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 30px;
  border-radius: 25px;
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  transition: transform 0.3s;
}

.video-download:hover {
  transform: scale(1.05);
}
HTML
<input1 input2="video-download" href="https://naytikurs.ru/img/1.mp4" input3="video-clip.mp4">Скачать видео</input1>
Для скачивания видео используйте тот же подход, что и для изображений. Укажите путь к видео в href и имя файла в атрибуте download.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Кнопка скачивания с иконкой

id: 37806_download-icon-4

Создайте стилизованную кнопку скачивания с символом стрелки вниз ↓ перед текстом 'Скачать файл'.

CSS
.btn-download {
  background: #FF6B6B;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: background 0.3s;
}

.btn-download:hover {
  background: #FF5252;
}

.icon {
  font-size: 20px;
}
HTML
<a class="btn-download" href="https://naytikurs.ru/img/4.png" input1>
  <span class="icon">input2</span>
  Скачать файл
</a>
Используйте HTML-сущность ↓ или символ ↓ для добавления стрелки вниз. Атрибут download можно использовать без значения для сохранения с оригинальным именем.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Несколько ссылок для скачивания

id: 37806_download-multiple-5

Создайте список с двумя ссылками для скачивания разных изображений. Первая должна сохраняться как 'photo1.png', вторая - с оригинальным именем.

CSS
.download-list {
  list-style: none;
  padding: 0;
}

.download-list li {
  margin: 10px 0;
}

.download-link {
  color: #3498db;
  text-decoration: underline;
  padding: 5px;
  display: inline-block;
}

.download-link:hover {
  color: #2980b9;
  background: #ecf0f1;
}
HTML
<ul class="download-list">
  <li>
    <input1 class="download-link" href="https://naytikurs.ru/img/5.png" download="input2">Фото 1</input1>
  </li>
  <li>
    <a class="download-link" input3="https://naytikurs.ru/img/6.png" input4>Фото 2</a>
  </li>
</ul>
Для первой ссылки укажите значение в атрибуте download, для второй - используйте атрибут download без значения или с пустым значением.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Карточка с кнопкой скачивания

id: 37806_download-card-6

Создайте карточку с изображением и кнопкой для его скачивания. Кнопка должна сохранять файл как 'wallpaper.png'.

CSS
.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  max-width: 300px;
  text-align: center;
  background: white;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 15px;
}

.download-button {
  background: #27ae60;
  color: white;
  padding: 10px 25px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
}

.download-button:hover {
  background: #229954;
}
HTML
<div class="card">
  <input1 src="https://naytikurs.ru/img/7.png" alt="Preview">
  <input2 class="download-button" input3="https://naytikurs.ru/img/7.png" input4="wallpaper.png">Скачать обои</input2>
</div>
Используйте тег <img> для отображения изображения и тег <a> с атрибутом download для создания кнопки скачивания. Атрибут target='_blank' можно добавить для совместимости.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ссылка с target и download

id: 37806_download-target-7

Создайте ссылку для скачивания, которая откроется в новой вкладке если браузер не поддерживает атрибут download.

CSS
.compatibility-link {
  background: #9b59b6;
  color: white;
  padding: 12px 20px;
  border-radius: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.compatibility-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transition: left 0.3s;
}

.compatibility-link:hover:before {
  left: 0;
}
HTML
<a class="compatibility-link" 
   href="https://naytikurs.ru/img/8.png" 
   input1 
   input2="_blank" 
   input3="noopener">
   Скачать изображение
</a>
Используйте атрибут target='_blank' вместе с download для обеспечения совместимости. Также можно добавить rel='noopener' для безопасности.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Галерея с кнопками скачивания

id: 37806_download-gallery-8

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

Кнопка скачивания с счетчиком

id: 37806_download-counter-9

Создайте кнопку скачивания с отображением размера файла и именем для сохранения 'document.pdf'.

CSS
.file-download {
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.file-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.file-info {
  font-size: 12px;
  opacity: 0.9;
}

.file-name {
  font-weight: bold;
}
HTML
<input1 class="file-download" 
   input2="https://naytikurs.ru/img/9.png" 
   input3="document.pdf">
  <span class="file-name">PDF Документ</span>
  <span class="file-info">(2.5 MB)</span>
</input1>
Используйте дополнительные элементы span для отображения информации о файле. Атрибут download работает одинаково для всех типов файлов.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Таблица с ссылками для скачивания

id: 37806_download-table-10

Создайте таблицу с информацией о файлах и ссылками для их скачивания. Каждый файл должен сохраняться с уникальным именем.

CSS
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background: #34495e;
  color: white;
}

.table-download {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}

.table-download:hover {
  text-decoration: underline;
}
HTML
<table>
  <tr>
    <th>Файл</th>
    <th>Действие</th>
  </tr>
  <tr>
    <td>Изображение 1</td>
    <td><input1 class="table-download" href="https://naytikurs.ru/img/4.png" input2="file-1.png">Скачать</input1></td>
  </tr>
  <tr>
    <td>Изображение 2</td>
    <td><a class="table-download" input3="https://naytikurs.ru/img/5.png" input4>Скачать</a></td>
  </tr>
</table>
В таблице используйте теги <table>, <tr>, <td>. Для каждой строки создайте ссылку с атрибутом download и уникальным именем файла.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру