Setting links in HTML editor

Setting links in HTML editor

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.

Design Mode

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.

HTML mode

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://webmastersbuzz.com"><a title="WebMasters Buzz" class="aalmanual manual" target="_blank" href="http://webmastersbuzz.com">WebMasters Buzz</a> tutorials online</a>

The code above will display text: “WebMastersBuzz.com” linked to the websitehttp://webmastersbuzz.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
  • readme.pdf
  • index.html

PDF file is called readme.pdf and is located in the PDF folder. Our link is located in the index.html file

Relative path

As to the above conditions link to the PSD file will looks as follows:

<a href="pdf/readme.pdf">link text</a>

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.

Absolute path

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:

<a href="http://your_domain_name/pdf/readme.pdf">link_text</a>

If you create link to the website the code will looks as follows:

<a href="http://webmastersbuzz.com">link_text</a>

 

Was this article helpful?

Related Articles

Leave A Comment?