HTML Linking Basics

By Stephen Bucaro

There are many "wysiwyg" webpage design applications that let you create a webpage as easy as typing text. But many people have difficulty linking their webpage to other webpages and media. The stumbling block is knowing how to use absolute and relative links to webpages and media files.

In this article you'll learn how to use absolute and relative links to link to webpages and media files in the same folder, different folders, different websites, and even to specific locations within the same webpage or a different webpage.

Use the <a> tag to create an html link. The basic <a> tag has the href attribute, which specifies the protocol (http), URI (path) to the target object, and the link text, as shown below.

<a href="http://bucarotechelp.com/default.asp">Bucaro Techelp</a>

  URI stands for Uniform Resource Identifier, which used to be called the URL (Uniform Resource Locater). Why they changed it, I don't know. I'm sure there's some subtle difference between URL and URI, in either case, it's the address of the webpage or media file that you want to link to. A URI cannot have spaces or certain other characters and, unlike Windows paths, uses forward slashes rather than "backslashes" to denote different directories.

For instructional purposes, let's assume that the file name of your webpage is mypage.htm and that it's located in a subdirectory named content of your website which has the domain name www.mydomain.com. The location of your webpage is then:

www.mydomain.com/content/mypage.htm

Therefore, anyone who wants to link to your webpage would use the link shown below.

<a href="http://www.mydomain.com/content/mypage.htm">Link Text</a>

Now, let's assume that you create another webpage named page2.htm and place it n the same folder as mypage.htm. A diagram of the directory structure is shown below.

[content]
  mypage.htm
  page2.htm

Let's further assume that you want to place a link in mypage.htm that loads page2.htm. The code for this link is shown below.

<a href="http://www.mydomain.com/content/page2.htm">Page 2</a>

The link shown above is an absolute link because it contains a fully qualified URI, in other words, the complete path to the webpage. You can always use an absolute link to link to other webpages or media.

The base URI of a webpage is its URI minus the file name. Both webpages have the same base URI: www.mydomain.com/content/. So you could use a shorter relative path in the link. The code for a link in mypage.htm to page2.htm using a relative path is shown below.

<a href="page2.htm">Page 2</a>

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse