Changing a Hyperlink in HTML

One of the most important basics in HTML code is the “Hyperlink”. A typical hyperlink uses the “A” tag (A is short for Anchor) and is typically found in the following format:

<a href="http://www.somewebsite.com/">your link text</a>

The bit between the quotes, also called a URL (Universal Resource Locator), is where the link will take your visitor when they click on the words “your link text”.

There are also a couple of different types of URLS: absolute and relative.

An absolute URL is a location that is absolutely defined, so that no matter where you are putting the link, it will always find the item that you are linking to (web page, image, pdf, etc). An example of an absolute URL would be:

http://www.somewebsite.com/
http://www.someotherwebsite.com/images/myimage.jpg
http://www.someotherwebsite.com/folder/mywebpage.htm

A relative URL has a location that is relative to the location of the page that you place it on. Examples of a relative URL would be:
images/myimage.jpg
../myfolder_in_subfolder/mywebpage.htm
/rootfolder/mypdf.pdf

As you can see, there are a couple of ways of referring to a relative document.

../ means “back up” the directory structure. So if the web page that you had the link on was in a folder such as:

http://www.mywebsite.com/myfolder/mywebpage.htm

And you wanted to link to

http://www.mywebsite.com/myotherfolder/myotherwebpage.htm

The relative version of that would be:

../myotherfolder/myotherwebpage.htm

Using a / before the relative URL will shortcut all that .. stuff.

If you don’t use

../

or

/

then it simply uses your current location as a base. So, if you are on http://www.mywebsite.com/myfolder/mywebpage.htm and you specify images/myimage.jpg, you would be linking to http://www.mywebsite.com/myfolder/images/myimage.jpg

This entry was posted in HTML Basics. Bookmark the permalink.

Comments are closed.