Constructing Links Links, or hyperlinks as they are also known, provide one of the major usability features of any web site. By creating useful links on your web pages you greatly enhance the 'user experience' of visitors to your web site. Links are also a key part of any web site's navigation mechanism. The following sections will help you better understand how you can use links to maximum effect within the Web Management Studio environment. As well as discussing the basic structure of the link mechanism and how to define the link itself, this document also explains the concepts of absolute and relative addressing and how the Content Editor's Hyperlink Manager can be used to make link creation quick and simple.
Fundamentally, a link on a web page simply instructs your browser to go to another web address, technically speaking we should refer to a web address as a Uniform Resource Locator ( URL Uniform Resource Locator ). At the XHTML Extensible HyperText Markup Language level, when we create a link we use the <a> or anchor tag . Anchor tags can be used for defining bookmarks on the page which may then be linked to, i.e. you can 'jump' to the bookmark, or create links to other web pages - it is this aspect of the anchor tag which will explore in this document. If you would like to know more about the detail and uses of the anchor tag (or any other tag for that matter), the W3Schools web site provides an excellent online resource. Return to top of page When you create an anchor tag, whether that be via the Content Editor's Hyperlink Manager or manually as XHTML Extensible HyperText Markup Language script, it is important to understand the tag's key attributes: - href
This is the most significant attribute as it defines the web page ( URL Uniform Resource Locator ) that the tag links to. - target
This attribute specifies whether the new page should be opened in the same browser window (to replace the current page), or in a new window.
The main attribute values are '_blank' to open the linked document in a new browser window, or '_self' to replace the existing document in the current browser window - this is the default so you never need to specify this option.
There are other target values, but these are used when creating framesets. - title
The 'title' or 'tooltip' text that appears if you hover over the link with your mouse. Note, this feature is not supported in all browsers, but it is generally considered good practice - particularly if the link text does not make it clear what the link does (it should!).
Note, the only attribute that has to be specified is the href (if you don't specify the href attribute then the link will not work!). Here are some examples of well constructed links. The active link is shown first, followed by its corresponding XHTML Extensible HyperText Markup Language markup. Note, the first link will open the home page of the Web Management Studio web site and replace the page you are reading (as there is no target attribute specified the link will default to target="_self"). Use your browser's back key to return to this page. Visit the Web Management Studio web site
<a href="http://www.WebManagementStudio.com">Visit the Web Management Studio web site</a> Visit the Web Management Studio web site
<a href=http://www.WebManagementStudio.com" target="_blank">Visit the Web Management Studio web site</a> Web Management Studio
<a href=http://www.WebManagementStudio.com" target="_blank"
 title="Go to the Web Management Studio web site">Web Management Studio</a> Return to top of page Actually, it's not all relative at all! When defining the href attribute for an anchor tag, there are typically two scenarios: - You are linking to a document on the current web site, or ...
- You are linking to a document on another web site.
If you are linking to a page within your own web site, i.e. another page within your domain , you can use something called relative addressing. For example, the full URL Uniform Resource Locator for this page is: http://www.WebManagementStudio.com/Content/Documentation/KeySkills/Links/Index.aspx So, to construct an appropriate anchor tag we would create the following XHTML Extensible HyperText Markup Language markup: <a href="http://www.WebManagementStudio.com/Content/Documentation/KeySkills
/Links/Index.aspx">Constructing Links</a> This is perfectly valid, however, if the document is within the same domain as the page upon which we are creating the link, we can save ourselves some typing (and therefore reduce the risk of error!), by removing the domain portion of the URL Uniform Resource Locator ... <a href="/Content/Documentation/KeySkills/Links/
Index.aspx">Constructing Links</a> This is a relative address , or relative url as it is relative to the page you are linking from, that is to say, it is within the same domain. If the document that you are linking to is on another web site, that is to say in another domain, then you must use the full URL Uniform Resource Locator of that document including the domain specifier - this is known as an absolute address . There are two reasons to use relative addressing where possible: - It requires fewer characters to define the link URL Uniform Resource Locator . Whilst this offers a small advantage in document size (and therefore download performance), the greatest practical benefit is that it reduces the likelihood of making a typing mistake, i.e. the less you type, the less mistakes you make!
- If you move content to another web site, you do not have to edit all of the links to reflect the new domain name.
For these reasons, it is generally considered good practice to use relative addressing when possible. When using the Content Editor's Hyperlink Manager , the domain portion of the href attribute is automatically removed if it matches the domain of the web site. Return to top of page Every link on every web site uses this mechanism, but if you don't like the look of all this XHTML Extensible HyperText Markup Language markup, there is an easier way! Simply use the Content Editor's Hyperlink Manager. First, click the Editor's Hyperlink Manager icon  . The Hyperlink Manager dialog box will open: 
As you can see, the input controls presented on the dialog relate directly to the attributes of the anchor tag:
Note: The 'Link Text' input corresponds to the text between the opening and closing anchor tag elements (<a>Link Text</a>). A Creating Links and Bookmarks video tutorial is also available to demonstrate the use of the Hyperlink Manager. Return to top of page See Also: |