Hyperlinks are the basis of navigation of the internet. They are used for moving around among sections of the same page, for downloading files, and for jumping to pages on other web servers. Let us start with a quick example:
To learn more, see <a href="http://www.defaultlogic.com/learn?s=Main_Page">Wikipedia</a>.
Before we get into creating a hyperlink (or "link" for short), we need to discuss the difference between an Absolute URL and a Relative URL. First, the Absolute URL can be used to direct the browser to any location. For example, an absolute URL might be:
However, when there is a need to create links to multiple objects in the same directory tree as the web page, it is a tiring procedure to repeatedly type out the entire URL of each object being linked to. It also requires substantial work should the webpage move to a new location. This is where Relative URL's come in. They point to a path relative to the current directory of the web page. For example:
home.html ./home.html ../home.html
This is a relative URL pointing to a HTML file called home.html which resides in the same directory (folder) as the current web page containing the link. Likewise:
This is another relative URL pointing to a subdirectory called images which contains an image file called "top_banner.jpg".
Sometimes specifying a link to a page isn't enough. You might want to link to a specific place within a document. the guide analogue of references of this type would be saying "Third paragraph on page 32" as opposed to just saying "page 32". Let's say that you want a link from document a.html to a specific location in a document b.html. Then you start by giving an id to the a particular paragraph in b.html. This is done by adding
<p id="some_name"> (where some_name is a string of your choice) as the paragraph tag in b.html. Now that location can be referenced to with
<a href="b.html#some_name"> from document a.html.
Now we are ready to create a hyperlink. Here is the basic syntax :
<a href="URL location" target="target">Alias</a>;
In the above syntax, "URL location" is either the absolute or relative path of the object being linked to. "target" is an optional attribute which specifies where the object being linked to is to be opened / displayed. For example :
<a href="http://www.google.co.za" target="_blank">Google Search Engine</a>
The above example uses an Absolute URL of http://www.google.co.za, and specifies a target of "_blank" (which would cause the URL to be opened in a new browser window).
<a href="http://www.defaultlogic.com/learn?s=HTML"> <img src="http://www.defaultlogic.com/media?s=Image:Html-source-code2.png"></a>
As you can see, placing hyperlinks on images is in complete analogy to placing them on text. Instead of putting text inside the
a element, you place there an image.
To create an email link, use:
<a href="mailto:firstname.lastname@example.org">Email Example.com</a>.
Manage research, learning and skills at defaultlogic.com. Create an account using LinkedIn to manage and organize your omni-channel knowledge. defaultlogic.com is like a shopping cart for information -- helping you to save, discuss and share.