Types of Hyperlinks

Buy Microsoft Expression Web Professional Design Tool | Get Microsoft Expression Web Upgrade | Microsoft Expression Web Upgrade from FrontPage [Any Version]

Types of Hyperlinks

Thursday, January 10, 2008

Whenever you create a hyperlink or add an image to your website, there is a bit of code in there that you might refer to as a path. This path basically points to your the hyperlink or image. And there are basically three types of paths that you will usually use when creating a website:

Relative
Virtual
Absolute

All of them have pros and cons of using them in your website. And you might decide to use all three in your webpage depending on what you need to do.

Relative Path

FrontPage and Expression Web will actually help to manage most of your relative paths in your website. For example, if you decide to move a page from your root folder to a folder called about, any paths to images and hyperlinks contained in this page will be corrected.

So if you had something like

<img alt="Arrow" src="images/arrow.gif">

And you moved this page to a folder called about, the source code would be changed to

<img alt="Arrow" src="../images/arrow.gif">

This is one advantage of relative paths in your source code when using FrontPage and Expression Web. And if you rename the image from arrow.gif to arrow1.gif, FrontPage and Expression Web should rename the paths in your website to arrow1.gif.

From time to time, you will find some problems with this, i.e. maybe Expression Web might not update the path. In Expression Web, it might be a good idea to go to Site - Recalculate Hyperlinks sometimes. This will help correct any corrupted data.

Virtual Paths

This is the type that I tend to use a lot. It looks something like

<img alt="Arrow" src="/images/arrow.gif">

You will notice the slash in the beginning of source. This basically pushes the path back to the root of the website and then over to the images folder. This is very useful if you are using any type of server side includes and have multiple folders. No matter how many folders you are in, the path will go back to the root and over to the images folder.

Example of what you would see if the path to the image was incorrect

Example of what you would see if the path to the image was incorrect

Currently though, Expression Web does not fully support the virtual paths. This means that if you use a virtual path to display an image, you might see something like this. This is because there is not a website designated on your computer. However, when you publish the page, you will see the image - no matter what folder you have the page in as long as you have the arrow.gif in the images folder.

Absolute Paths

You probably use absolute paths more than you realize, especially if you are directing people over to another website. An example of an absolute path would be something like

<a href="http://www.loudexpressions.com/">Expression Web Blog</a>

A lot of people might use an absolute path for images. Some companies will allow you to do this. This way, if they change the image, the company can change the image on their server and users do not need to re-download a new image. However, some websites do not allow this - this is called hotlinking. Hotlinking costs users thousands of dollars a year in bandwidth. Before linking directly to an image, contact the site owner to see if this is permitted.

Find and Replace Dialog Box

The biggest problem with using absolute paths on your website is changes. If you change your domain name, you will then need to change the path in the source code. Expression Web has a function though in their replace feature (CNTL-H) - you can set it to search source code and change the domain name. Before making any massive changes like this to your website, you should Create a Backup Copy of Your Website. This way, if you accidentally make a mistake in the Replace with, you can refer back to your old copy.

Your choices for the Find where are

All Pages - this will make changes in your entire website
Open Page(s) - this will make the changes in whatever pages you have opened at the time
Selected Page(s) - this will make the changes in the pages you have selected. You can select the pages by highlighting a specific folder, using the CNTL key and choosing the pages, or using the SHIFT key to select all the pages between a range.
Current Page - this will make the changes to the current page you are working on.

Under the Advanced part, you can choose Find in Source Code which will apply the change(s) in your source code.

By now, you can probably see that the title "Types of Hyperlinks" is not the proper title for this post, but I felt that it might help others when searching. It is actually called an URI (Uniform Resource Identifier). If you have more question on an URI, please ask International Web Developers Network.