This tutorial shows how to create link to the .PDF document from your website page.
First of all open the HTML file that contains text of your future link. You can edit the file with any HTML editor however we recommend using Adobe Dreamweaver or Notepad++ applications.
Adobe Dreamweaver application offers web developers to work with HTML files in design mode. You can switch to design mode using the appropriate buttons in the top left corner of your screen.
You need to enable Properties panel. Using top navigation menu select Window > Properties. Now at the bottom of the screen you should see Properties panel.
Select any text and in the Properties panel input link to the PDF file into the Link field.
as you can see at the screenshot below as a URL we used # symbol. If you want to create link to the PDF file please type root to the PDF file on your server.
You can also use the Target select box if you want the link to open in new window, new tab or same browser window.
If you are working with HTML files in code mode. You can assign link the following way:
1. Locate the text you want to add link to
2. Before text add the link tag: <a href="#">
3. after the text add link closing tag: </a>
4. Replace # symbol in the href attribute with the root to the file on your server or URL.
As a result you should have the following:
<a href="http://info.template-help.com">website templates tutorials online</a>
The code above will display text: “website templates tutorials online” linked to the website “http://info.template-help.com“
Link path relative vs absolute
There are 2 ways of creating link to the specific file on your serve: relative path and absolute path.
In the example below we’ll create link to the PDF file. We have the following files structure:
PDF file is called readme.pdf and is located in the PDF folder. Our link is located in the index.html file
As to the above conditions link to the PDF file will looks as follows:
As you can see in the link href attribute we specified the directory where the pdf file is located and the pdf file name. The path to the file is relative to the index.html file. You can check the table below to learn more about the file paths:
|Server Path…||What it means…|
|<a href="readme.pdf">||readme.pdf is located in the current directory.|
|<a href="pdf/readme.pdf">||readme.pdf is located in a folder (directory) called pdf. The "tips" folder is located in the current directory.|
|<a href="pdf/new/readme.pdf">||readme.pdf is located in a folder called new that is located in a folder called pdf that is located in the current directory.|
|<a href="../readme.pdf">||readme.pdf is located in a folder one level up from the current directory.|
|<a href="../../readme.pdf">||readme.pdf is located in a folder two levels up from the current directory.|
Using the absolute path you define full root to the file on your server starting with your domain name. Using the same files structure as in the example above the root to the pdf file will looks as follows: