Ссылка на файл в html: Ссылка на адрес электронной почты

Leave a Comment / Html / By /

Как сделать ссылку на скачивание файла

Как сделать скачивание файла с сайта.

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

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

Как на сайте сделать скачивание файла

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

Делается это при помощи ссылки на файл с использованием специального HTML тега.

 

Скачивание архивов

Для файлов-архивов (форматы zip, rar и т.д.) достаточно просто указать ссылку на файл который нужно передать для скачивания. Поэтому здесь применяется обычный HTML тег ссылки:

<a href="#">текст ссылки</a>
  • # — вместо символа решётки в атрибуте href прописывается ссылка на файл который отдаём для скачивания;
  • текст ссылки — можно указать текст типа: скачать файл, скачать прайс, скачать песню, скачать видео и т. д.

Так же хочу обратить внимание, что если файл с вашего сайта указываем относительный путь к файлу /music/pesnya.mp3, а со сторонних сайтов указываем полный путь https://v3c.ru/music/pesnya.mp3

 

А вот для файлов не архивных форматов (музыка, видео, различные текстовые файлы и документы, изображения и т.д.) применяется специальный для этого атрибут прописываемый в теге <a ...></a>.

HTML атрибут download

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

Структура ссылки для скачивания в html строится следующим образом:

<a href="#" download="">текст ссылки</a>
  • Вместо знака решётки # указываем ссылку на файл передающийся для скачивания.
  • В атрибуте download ничего указывать не нужно. Браузер поймёт что файл нужно скачивать, а не открывать.

 

Со всплывающей подсказкой:

<a href="#" download="" title="текст всплывающей подсказки">текст ссылки</a>
  • В кавычках атрибута title прописываем текст всплывающей подсказки.

*Обязательно не забываем переключить редактор в режим HTML чтобы редактировать теги

Текстовая ссылка

Код:

<a href="#" download="" title="всплывающая подсказка">скачать файл</a>

Результат: скачать файл

Скачать через кнопку

Код:

<a href="#" download="">
    <button>Скачать файл</button>
</a>

Результат:

 

Кнопка с иконкой

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

Код вставки иконки

<i></i> — пример для Font Awesome

Код:

<a href="#" download="">
    <button>Скачать файл <i></i></button>
</a>

Результат:

Скачивание файла при клике на изображение

Код:

<a href="#" download="">
    <img src="/images/knopki/skachat. png" alt="скачать"/>
</a>

Результат:

Со стилями CSS

Так же можно применять все свойства CSS и изменять размер шрифта, название, цвет и т.д.

Для этого добавляем атрибут style=" "

Код:

<a href="#" download="">Скачать файл</a>

Результат:

Скачать файл

Записи по теме

Как сделать ссылку

Инструкция как делать ссылки: анкорные и безанкорные ссылки, ссылки в BB-кодах, ссылки открывающиеся в новой вкладке, ссылки на изображениях и т.д.

Онлайн экранирование кода для вставки в HTML

Данный инструмент позволяет на лету без перезагрузки страницы экранировать код для дальнейшей вставки его в HTML, заменяя в коде символы требующие обязательного экранирования для таких случаев. Это символы: < > & »

Спецсимволы в HTML

Учебник HTML 5. Статья «Ссылки»

Атрибуты

Форматирование текста

МЕНЮ

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

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

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

В HTML гиперссылки (или просто «ссылки») определяются тегом <a> (HTML Anchor Element).

Например:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример размещения ссылки в HTML документе<title>
	</head>
	<body>
		<a href = "http://www.yandex.ru">Найдется всё</a>
	</body>
</html>

В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.

Мы уже с Вами неоднократно говорили, что некоторые теги используются только совместно с атрибутами (бесполезны сами по себе) и это снова тот случай. Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега <a>, указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.

Относительные и абсолютные пути ссылок

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

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

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

<a href = "https://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол https) -->
<a href = "http://www.yandex.ru">Содержимое элемента</a> <!-- указываем полный путь (протокол http) -->
<a href = "//www.yandex.ru">Содержимое элемента</a> <!-- допускается указывать полный путь без протокола -->

Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).

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

Путь относительно текущего документа

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

В примерах, когда мы размещали на нашей странице изображения, то мы указывали путь, как раз относительно текущего документа. Давайте рассмотрим аналогичный пример, но также укажем ссылку на html документ, расположенный в той же папке, что и сам файл:

Пример подключения файлов:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов к HTML документу из той же папки<title>
	</head>
	<body>
		<img src = "image. png" alt = "someimage info"> <!-- размещаем изображение -->
		<a href = "page.html">Содержимое элемента</a> <!-- ссылаемся на страницу -->
	</body>
</html>

Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из дочернего каталога<title>
	</head>
	<body>
		<img src = "etc/image.png" alt = "someimage info"> <!-- размещаем изображение из дочернего каталога -->
		<a href = "etc/page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, из дочернего каталога -->
	</body>
</html>

Обратите внимание, как мы указываем путь к нашим файлам — мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов из родительского каталога<title>
	</head>
	<body>
		<img src = "../../image.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня выше -->
		<a href = "../page.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 1 уровень выше -->
	</body>
</html>

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

Путь относительно корня сайта

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

Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой. Мы не будем использовать эти программные среды для практических занятий (можете установить после обучения HTML / CSS).

Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<img src = "/html/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/html/primer/anypage.html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
		<img src = "/css/primer/anyimage.png" alt = "someimage info"> <!-- размещаем изображение, которое находится на 2 уровня ниже относительно корня сайта -->
		<a href = "/css/primer/anypage. html">Содержимое элемента</a> <!-- ссылаемся на страницу, которая находится на 2 уровня ниже относительно корня сайта -->
	</body>
</html>

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

Достаточно указать в адресе один прямой слэш, чтобы с любой страницы сайта перейти на главную страницу сайта (<a href = «/»).

Атрибут target

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

<a href="http://yandex.ru" target="_blank">Поиск </a>

Ниже представлены все значения этого атрибута:

АтрибутЗначение
_blank Загружает страницу в новое окно браузера.
_self Загружает страницу в текущее окно. Это значение по умолчанию.
_parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
_top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.
framenameОткрывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Атрибут mailto

Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:

<a href = "mailto:[email protected]">Написать автору</a>

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

В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:

<a href = "mailto:mail_1@some. com?subject=Тема%20моего%20письма&[email protected]&body=
Здравствуй%20уважаемый%20автор">Написать автору</a>

Где:

  • subject—тема письма.
  • cc—копия письма.
  • bcc—скрытая копия письма.
  • body—тело письма.

Допустимо указывать несколько адресов (либо не указывать вовсе):

<a href=" mailto:[email protected], mailto:[email protected] ">Написать автору </a>

Изображение как ссылка

Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами <a> </a>:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование изображения в качестве ссылки<title>
	</head>
	<body>
		<a href = "http://yandex.ru">
			<img src="10.jpg" alt="Поиск в Яндекс"> <!-- размещаем изображение в качестве содержимого гиперссылки -->
		</a>
	</body>
</html>

При этом при клике на картинку будет осуществлён переход по указанной ссылке:


Размещение файлов на сайте для скачивания

С выходом HTML 5 тег <a> обзавелся таким новым атрибутом как download, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример подключения файлов относительно корня сайта<title>
	</head>
	<body>
		<a href = "/path/to/file.mp3" download>Содержимое элемента</a> <!-- указываем файл, который предназначается для скачивания -->
	</body>
</html>

Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
download14.020.015.0НетНет13.0

Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

  • Используя полученные знания и не изменяя структуры архива составьте следующую HTML страницу (index.html в архиве), которая содержит четыре ссылки:

Практическое задание № 4.

Первая ссылка «Информация о примере» должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:

Обратите внимание, что на странице необходимо сделать две ссылки: первая — относительная ссылка, которая должна вести обратно на главную страницу (при клике вы должны перейти на нее), а вторая — абсолютная, при клике на нее осуществляется переход на сайт basicweb.ru.

Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.

Внутри этих страниц должно быть размещено аналогичное изображение, при клике на которое должен быть осуществлен переход обратно на главную страницу:

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

  • Результат примера вы можете скачать после выполнения задач для самопроверки:


Атрибуты

Форматирование текста

МЕНЮ

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

Учебник

HTML Учебник

HTML

В этом уроке вы узнаете, как включать ссылки в вашем HTML-документе.

На экране должны быть открыты три окна. в это время. Окно Netscape, отображающее это учебник, экспериментальное окно для просмотра вашего HTML документ и окно, в котором вы будете вводить HTML-документ.

Ссылки на локальные документы

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

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

Создайте еще один HTML-документ, отображающий ваш только фамилия.
Сохраните этот файл и назовите его фамилия .

Наконец, вы создадите документ, который будет иметь две гиперссылки в нем. Первая гиперссылка будет связать вас с вашим имя файл и вторая гиперссылка свяжет вас с вашей фамилией файл.

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

Обратите внимание на новые теги:
и

Эти теги составляют две части ссылки.
Тег первая часть ссылки. Тег означает, что идет ссылка, а имя файла цель ссылки (куда вы перейдете).

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

В приведенном выше примере имя и фамилия будут будут выделены в вашем третьем документе и будут связаны вам в файлы имя и фамилия .

То есть ваш третий HTML-документ должен выглядеть так:

Сохраните этот файл и назовите его links .
Нажмите на экспериментальное окно и просмотрите файл ссылки .
Нажмите на две ссылки, чтобы узнать, были ли вы успешный. Если что-то пошло не так, проверьте ваш синтаксис внимательно и убедитесь, что вы набрали в правильных URL-адресах.

Создание графической ссылки


Вы можете использовать изображение в качестве ссылки.

В уроке мы будем использовать цветок в качестве графической ссылки.
При нажатии на цветок следует перейти к файлу содержит ваше имя ( имя ). Создавать по этой графической ссылке нужно скачать образ цветок и вспомните, где вы его сохранили.

Загрузите изображение цветка ниже и сохраните его. на дискету или жесткий диск. Помните, где вы сохранили его в.

Нажмите на окно, содержащее ваш HTML документ ссылки . В исходном коде замените текст «имя», который содержится между первым набором и теги со следующим:

и сохраните изменения.

Вы только что заменили текст «имя» своим изображение цветка.

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

Следующая тема: Создание таблиц
Главное меню

html — Как создать ссылку на локальный файл на локальной веб-странице?

Вам нужно использовать протокол file:/// (да, это три косые черты), если вы хотите создать ссылку на локальные файлы.

 Ссылка 1
Ссылка 2

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

Вы не можете переходить с http(s) на файловый протокол

Современные версии многих браузеров (например, Firefox и Chrome) отказываются переходить с http(s) протокола на файловый протокол для предотвращения вредоносного поведения.

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

Почему он зависает без

file:/// ?

Первая часть URL — это протокол. Протокол — это несколько букв, затем двоеточие и две косые черты. HTTP:// и FTP:// являются допустимыми протоколами; C:/ нет, и я почти уверен, что он даже не похож на него.

C:/ также не является допустимым веб-адресом. Браузер может предположить, что это адрес http://c/ с указанным пустым портом, но это не удастся.

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

Итак, если вы хотите получить доступ к локальным файлам: скажите ему использовать файловый протокол.

Почему три косые черты?

Поскольку это часть схемы File URI. У вас есть возможность указать хост после первых двух косых черт. Если вы пропустите указание хоста, он просто предположит, что вы имеете в виду файл на своем ПК. Это означает file:///C:/etc — это ярлык для file://localhost/C:/etc .

Эти файлы по-прежнему будут открываться в вашем браузере, и это хорошо.

Ваш браузер будет реагировать на эти файлы так же, как и на тот же файл в Интернете.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *