- Web templates
- E-commerce Templates
- Loaded Commerce
- E-Commerce Comparison
- E-commerce Comparison: Payment and Shipping methods
- E-commerce templates compatibility table
- CMS & Blog Templates
- CMS Comparison
- CMS templates versions compatibility
- Facebook Templates
- Website Builders
Setting links in HTML editor
November 15, 2010
This tutorial shows how to assign links in HTML editor.
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 PSD file into the Link field.
as you can see at the screenshot below as a URL we used # symbol. You can replace it with the root to the file on your server or with the website URL.
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.
Relative path can be used only to create links to the files on your server.
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 PSD 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:
If you create link to the website the code will looks as follows:
Please don’t forget to replace http://info.template-help.com with the website URL you want to create link to.