How to Create a Download Link for a File on a Web Page

Providing download links for files through your website is a common need and there are many ways to do this. Sites that provide web builder tools like GoDaddy, WordPress, and Weebly often have a file upload feature as soon as the link is created. If you’re building your site from scratch, you can create multiple download links using simple HTML codes for files hosted on your server.

Table of Contents

Using HTML

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/26/17435-1.jpg/v4-728px-17435-1.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/2/26/17435-1.jpg/v4-728px-17435-1.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Create an HTML page if you don’t already have one. You will add the download link to the HTML web page. If you don’t have one, you can create a simple HTML page to test the download link. See the article Create a simple web page with HTML for details.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/69/17435-2.jpg/v4-728px-17435-2.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/6/69/17435-2.jpg/v4-728px-17435-2.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the folder on the server for both the page and the file. The easiest way to link a file is to place the file in the same directory as the page’s HTML file. Use the Contrp Panel file manager or the file browser in your FTP program to navigate to the folder containing the HTML file to which you will add the link.

Your FTP client should be preconfigured to connect to the web server since you have already uploaded your page on it. If not, you can learn how to use FTP yourself to configure your FTP client and connect to your server.
If your site has an online Contrp Panel, you are allowed to access the files on your server directly through the web administration interface. You also have that permission when you log in to your site as an administrator (administrator). Once in the Contrp Panel, select “File Manager”.
If you built your website using a web builder like WordPress, Weebly, or Wix, you can check out detailed instructions for each of the methods below.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/02/17435-3.jpg/v4-728px-17435-3.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/02/17435-3.jpg/v4-728px-17435-3.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Upload the file to which you want to create the link. You are allowed to upload pretty much any file type, from PDF to ZIP. Note that some servers will limit the file size that can be uploaded, and large files can eat up your bandwidth quite quickly. Some browsers even block potentially harmful files such as EXEs or DLLs so that visitors to your website cannot download them.

To upload files using an FTP program, drag the file to the folder in the FTP window that you want to upload. The file will start uploading immediately. The upload speed will usually be much slower than the download speed, so it will take a while for the file to upload successfully.
If you are using the virtual Contrp Panel file manager, you need to click the “Upload” button at the top of the screen. Search for the file on your computer that you want to upload. You will have to wait a long time to upload large files to your server.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/35/17435-4.jpg/v4-728px-17435-4.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/35/17435-4.jpg/v4-728px-17435-4.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the web page to which you want to add the link in the code editor. Once the file is uploaded, you need to add a link to it on your website. Open the HTML file to which you want to add the link. You can double-click it in the Contrp Panel file manager to open it with the built-in page editor. If you’re using FTP, right-click the HTML file on your server and then click “Open With” to open it in a text or code editor.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/51/17435-5.jpg/v4-728px-17435-5.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/5/51/17435-5.jpg/v4-728px-17435-5.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Search for the location on the page where you want to add the link. Place the cursor where in the line of code you want to insert the download link. This line can be in the body of the paragraph, at the bottom of the page, or anywhere else.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6e/17435-6.jpg/v4-728px-17435-6.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/6/6e/17435-6.jpg/v4-728px-17435-6.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Add code for the link. Type the HTML5 code below for your download link. The download will begin as soon as the user clicks the link. If the file is downloaded to the same directory as the HTML file, just use the name and extension. If the file is located in another directory, you need to add the directory structure. ^{[1] X Research Source}

 <!-- File uploaded to the same location as the HTML file --> < a href = "examplefile.pdf" download > Link text </ a > <!-- Uploaded file in different location from HTML file --> < a href = "/path/to/file/examplefile2.jpg" download > Link text </ a >

The <a> download attribute does not work in Safari, Internet Explorer, or Opera Mini. Users of these browsers must open the file in a new page and save it manually. ^{[2] X Research Source}

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/8c/17435-7.jpg/v4-728px-17435-7.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/8/8c/17435-7.jpg/v4-728px-17435-7.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Create a download button instead of a link. You are allowed to use image alt text to create download links. That button image should be available on your web server.

 <a href="examplefile.pdf" download > < img src = " / images / downloadbutton.jpg " > < / a >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/8b/17435-8.jpg/v4-728px-17435-8.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/8/8b/17435-8.jpg/v4-728px-17435-8.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Rename the downloaded file. If you define the <a> download attribute, you can rename the file when someone downloads it. This makes it easy for users to recognize the files they download from you.

 < a href = "083116sal_rep.pdf" download = "August 31 2016 Sales Report" > Download the report </ a >

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e2/17435-9.jpg/v4-728px-17435-9.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/e/e2/17435-9.jpg/v4-728px-17435-9.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Save the changes to the HTML file. Once you are satisfied with your line of code, you need to save the changes to the HTML file and re-upload if necessary. You will be able to see the new download button right on your website.

Using WordPress

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/65/17435-10.jpg/v4-728px-17435-10.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/6/65/17435-10.jpg/v4-728px-17435-10.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open your page in the WordPress editor. If you use WordPress to manage and publish your site, you can use the built-in tools to add download links to any of your pages. Log in to the main WordPress interface with an admin account.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/9/9b/17435-11.jpg/v4-728px-17435-11.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/9/9b/17435-11.jpg/v4-728px-17435-11.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Place the cursor where you want the link to appear. You are allowed to put the link in the middle of the paragraph or create a new line for it.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d2/17435-12.jpg/v4-728px-17435-12.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/d2/17435-12.jpg/v4-728px-17435-12.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the “Add Media” button. You’ll see this button at the top of the posting tools at the top of the page.

Using Weebly

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/bc/17435-16.jpg/v4-728px-17435-16.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/b/bc/17435-16.jpg/v4-728px-17435-16.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the website in the Weebly editor. Log in to the Weebly site and open your website with the Weebly editor.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d3/17435-17.jpg/v4-728px-17435-17.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/d3/17435-17.jpg/v4-728px-17435-17.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select the text or object that you want to turn into a link. You can bold text in the text field or select an image on the page that you want to turn into a download link for your file.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/17/17435-18.jpg/v4-728px-17435-18.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/1/17/17435-18.jpg/v4-728px-17435-18.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the “Link” button. When selected text looks like a chainlink located at the top of the text editor. After selecting the image, click “Link” in the Image Contrp Panel.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b3/17435-19.jpg/v4-728px-17435-19.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/b/b3/17435-19.jpg/v4-728px-17435-19.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select “File” then click “upload a file” . This step opens the file browser.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/5b/17435-20.jpg/v4-728px-17435-20.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/5/5b/17435-20.jpg/v4-728px-17435-20.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select the file for which you want to create a download link. After you make your selection, the file will begin to upload.

Regular users are only allowed to download files 5 MB or less. Paid users have a file size limit of 100 MB.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3d/17435-21.jpg/v4-728px-17435-21.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/3d/17435-21.jpg/v4-728px-17435-21.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Publish your page to see the new link. After uploading the file, the link will be ready to use. Click the Publish button to apply the changes to the page immediately. People who visit your site can now click on the link and download the file. ^{[4] X Research Sources}

Using Wix

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/b4/17435-22.jpg/v4-728px-17435-22.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/b/b4/17435-22.jpg/v4-728px-17435-22.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open your site in the Wix editor. If you use Wix to create and manage your site, log in to the Wix website and load your site in the site editor.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c6/17435-23.jpg/v4-728px-17435-23.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/c6/17435-23.jpg/v4-728px-17435-23.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select the text or image that you want to convert to a link. You are allowed to create links from text or images on your page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a9/17435-24.jpg/v4-728px-17435-24.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/a/a9/17435-24.jpg/v4-728px-17435-24.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Turn your selection into a link. The steps for text and images are slightly different:

For Text – Click the Link button in the Text Settings window. This button looks like a link. You will open the link menu.
For images – Select “A link open” from the “When image is clicked” menu in the Image Settings window. Click “Add a link” in the “What does the link do?” section. This step opens the links menu.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/38/17435-25.jpg/v4-728px-17435-25.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/38/17435-25.jpg/v4-728px-17435-25.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select “Document” in the list of link options. This step allows you to upload various text files.

Using GoDaddy

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/e0/17435-29.jpg/v4-728px-17435-29.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/e/e0/17435-29.jpg/v4-728px-17435-29.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Open your site in the GoDaddy editor. If you used the GoDaddy site builder, log in to the GoDaddy website and open your site in the editor.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/00/17435-30.jpg/v4-728px-17435-30.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/0/00/17435-30.jpg/v4-728px-17435-30.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Select the object or text that you want to convert to a link. You can convert any object on your page into a link, as well as any text from a text frame. If you want to create a download button, click the “Button” option from the left menu to insert it.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c6/17435-31.jpg/v4-728px-17435-31.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/c6/17435-31.jpg/v4-728px-17435-31.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Create links from selected text or objects. If an object is selected, click the Settings button to open the menu. If text is selected, click the “Link” button in the text formatter that looks like a link.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d9/17435-32.jpg/v4-728px-17435-32.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/d/d9/17435-32.jpg/v4-728px-17435-32.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the red arrow below “Link (URL)” and select “Upload” . This step allows you to choose which files you want to upload to your website.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c4/17435-33.jpg/v4-728px-17435-33.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/c/c4/17435-33.jpg/v4-728px-17435-33.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click the “Browse” button and search for the file you want to upload. The file has a size limit of 30 MB. You are not allowed to upload HTML, PHP, EXE, DLL and many other potentially harmful file types.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/a/a1/17435-34.jpg/v4-728px-17435-34.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/a/a1/17435-34.jpg/v4-728px-17435-34.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click “Insert” when the file is uploaded. You will see a check mark next to the file in the window when it is successfully uploaded.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/47/17435-35.jpg/v4-728px-17435-35.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/4/47/17435-35.jpg/v4-728px-17435-35.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click “Save” to create the link. Clicking “Save” will assign the file to the text link or object you have created.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/30/17435-36.jpg/v4-728px-17435-36.jpg”,”bigUrl”:”https:// www.wikihow.com/images/thumb/3/30/17435-36.jpg/v4-728px-17435-36.jpg”,”smallWidth”:460,”smallHeight”:334,”bigWidth”:728,” bigHeight”:529,”licensing”:”<div class=”mw-parser-output”></div>”}

Click “Publish” to save the changes to your page. This causes the new link to be posted, and anyone who visits your site will be able to download the linked file. ^{[5] X Research Sources}

Steps

Using HTML

Using WordPress

Using Weebly

Using Wix

Using GoDaddy

Related Posts