Microsoft Expression Web - Hyperlinks

In this chapter, we will learn how to use hyperlinks in your website. One of the things that makes the web so expansive is the capability of webpages to link to other webpages. Hyperlinks or links are found within nearly all web pages.

Hyperlinks also allow users to click and go to a different page, a place within a page, an image or another location on the Internet entirely. Following are some of the important features of hyperlink −

Expression Web's hyperlink tools and options make it very easy to work with hyperlinks.
Expression Web hyperlink views and reports also make it very easy to find and fix broken and incorrect links.
A hyperlink can be a word, a group of words, or an image that when clicked will take you to a new document or a place within the current document.

Anchor Tag

In HTML, <a> tag which is known as anchor tag is used to create a link to another document. An anchor can point to another html page, an image, a text document, or a pdf file among others. Here is the basic code of an anchor <a> tag.

<a href = "url">Text to be displayed as link<a>

In <a> tag, “href” attribute is used to address the link to the document, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
When you move the cursor over a link in a webpage, the arrow will turn into a little hand.
A URL is an address that specifies a protocol, web server, and file path.
There are two types of URLs, absolute and relative. An absolute URL contains a full address while a relative URL is missing one or more parts of the address. However, the web browser obtains the missing information from the page that contains the URL.

Example

Let’s take a look at a simple example in which we will be using both absolute and relative URLs.

Step 1 − First, open the index.html page and add the following lines in the main content section.

<div id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</div>

Following is the complete implementation of index.html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul li a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul li a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <div id = "container"> 
         <div id = "header"> </div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li> 
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li> 
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li> 
            </ul> 
         </div> 
  
         <div id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </div> 
         <div id = "footer"> </div> 
      </div> 
   </body> 
</html>

Step 2 − Let’s save the webpage and you will see the text in the main content section.

Step 3 − In the Design View, right-click on Google and then select Hyperlink… from the menu which will open the Insert Hyperlink dialog.

Step 4 − In the Address field, specify the URL for Google home page and click OK. Similarly, right-click on YouTube in the design view and select Hyperlink…

Step 5 − In the Address field, specify the URL for YouTube home page and click Ok. Now for relative right-click on the “Home Page 2” and select Hyperlink… from the menu which will open the Insert Hyperlink dialog.

Step 6 − For relative path, select the index_2.html in the address field and Expression Web will get the remaining path from the index.html file, because both these files are in the same directory. Click OK.

As can be seen, these words are now underlined which means that hyperlinks are created.

Step 7 − The default font color is blue and the default font color for Hyperlinks is also blue. To change the default color of the hyperlink, select any of the hyperlink and go the Format menu and select Background… menu option.

You will now see the following dialog.

Step 8 − Let’s change the Hyperlink color to Green.

In the following screenshot, you will see that the Hyperlink color has changed to Green.

Step 9 − Let us now preview this web page in a browser.

If you click the Google link, it will direct you to the Google homepage.

Step 10 − Similarly, if you go back to the Home page and click the YouTube link, it will direct you to the YouTube home page. Let’s go back to the home page.

Click the Home Page 2 link and you will see that it opens the index_2.hmtl file.