Davidd: Created page with "Links refer to objects on a web page that navigate to another page when clicked. This article will give information regarding links and their usage. ==How Links Are Created=..."

2013-04-25T15:25:14Z

Created page with "Links refer to objects on a web page that navigate to another page when clicked. This article will give information regarding links and their usage. ==How Links Are Created=..."

New page

Links refer to objects on a web page that navigate to another page when clicked. This article will give information regarding links and their usage.

==How Links Are Created==

Links are most often created using the HTML '''<a>''' tag. The '''href''' attribute of the '''<a>''' tag allows you to specify the location to which the link will navigate. Any HTML elements within the opening and closing elements of the '''<a>''' tag will be clickable.

Example:
<a href="newpage.html">Click here to go to newpage.html</a>

==How Links Work==

There are three main types of links. This section will discuss them.

===Page-Relative Links===

A page-relative link gives the location of the new page relative to the location of the current page. It cannot start with a forward slash.

An example of a page-relative link is:
<a href="aFolder/aPage.html">Go to aPage</a>

The above link will start in the current folder (as seen by the web browser in the current URL) and navigate to the '''aPage.html''' page within the '''aFolder''' sub-folder. For example, if the current URL is '''<nowiki>"http://someSite.com/someFolder/somePage.html"</nowiki>''', then the link would take you to '''<nowiki>"http://someSite.com/someFolder/aFolder/aPage.html"</nowiki>'''.

===Site-Relative Links===

A site-relative link gives the location of the new page relative to the root of the current site. It must start with a forward slash.

An example of a site-relative link is:
<a href="/aFolder/aPage.html">Go to aPage</a>

The above link will start at the root of the site and navigate to the '''aPage.html''' page within the '''aFolder''' folder. For example, if the current URL is '''<nowiki>"http://someSite.com/someFolder/somePage.html"</nowiki>''', then the link would take you to '''<nowiki>"http://someSite.com/aFolder/aPage.html"</nowiki>'''.

===Absolute Links===

An absolute link gives the entire location of the new page, including the site. It must start with '''http://''' or '''https://'''(for secure links on SSL secured sites).

An example of an absolute link is:
<a href="<nowiki>http://aSite.com/aFolder/aPage.html</nowiki>">Go to aPage</a>

The above link will always go to '''<nowiki>"http://aSite.com/aFolder/aPage.html"</nowiki>''' regardless of the current site, folder, or page.

==Considerations When Using URL Rewriting and Page-Relative Links==

When using rewrite rules to change the URLs seen by the web browser, it is important to understand the impact on page-relative links. For instance, given the URL '''<nowiki>"http://aSite.com/aFolder/aPage.html"</nowiki>''', you decide that you want to use a rewrite rule so that visitors instead see the page '''<nowiki>"http://aSite.com/aFolder-aPage"</nowiki>'''. Since the browser interpolates the location of page-relative links based on the current location, all page-relative links on '''aPage.html''' will point to locations under the root folder when viewing the rewritten URL instead of pointing to locations under the '''/aFolder''' folder. Here is an example to demonstrate:

'''Contents of aPage.html:'''
<a href="somePage.html">Go to Some Page</a>

When viewed at '''<nowiki>"http://aSite.com/aFolder/aPage.html"</nowiki>''', the link on '''aPage.html''' would take you to:
<nowiki>http://aSite.com/aFolder/somePage.html</nowiki>

When viewed at '''<nowiki>"http://aSite.com/aFolder-aPage"</nowiki>''', the link on '''aPage.html''' would take you to:
<nowiki>http://aSite.com/somePage.html</nowiki>

[[Category:Tutorials]]

Links - Revision history

Davidd: Created page with "Links refer to objects on a web page that navigate to another page when clicked. This article will give information regarding links and their usage. ==How Links Are Created=..."