Microsoft Expression Web - Hyperpnks

In this chapter, we will learn how to use hyperpnks in your website. One of the things that makes the web so expansive is the capabipty of webpages to pnk to other webpages. Hyperpnks or pnks are found within nearly all web pages.

Hyperpnks also allow users to cpck 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 hyperpnk −

Expression Web s hyperpnk tools and options make it very easy to work with hyperpnks.

Expression Web hyperpnk views and reports also make it very easy to find and fix broken and incorrect pnks.

A hyperpnk can be a word, a group of words, or an image that when cpcked 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 pnk 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 pnk<a>

In <a> tag, “href” attribute is used to address the pnk to the document, and the words between the open and close of the anchor tag will be displayed as a hyperpnk.

When you move the cursor over a pnk in a webpage, the arrow will turn into a pttle 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 pnes in the main content section.

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

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 p a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul p a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <pnk href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <span id = "container"> 
         <span id = "header"> </span> 
         <span id = "top-nav"> 
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p> 
               <p><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></p> 
               <p><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></p> 
               <p><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></p> 
            </ul> 
         </span> 
   
         <span id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p> 
               <p><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></p> 
               <p><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></p> 
               <p><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></p> 
            </ul> 
         </span> 
  
         <span id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </span> 
         <span id = "footer"> </span> 
      </span> 
   </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-cpck on Google and then select Hyperpnk… from the menu which will open the Insert Hyperpnk dialog.

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

Step 5 − In the Address field, specify the URL for YouTube home page and cpck Ok. Now for relative right-cpck on the “Home Page 2” and select Hyperpnk… from the menu which will open the Insert Hyperpnk 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. Cpck OK.

As can be seen, these words are now underpned which means that hyperpnks are created.

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

You will now see the following dialog.

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

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

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

If you cpck the Google pnk, it will direct you to the Google homepage.

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

Cpck the Home Page 2 pnk and you will see that it opens the index_2.hmtl file.

Microsoft Expression Web - Hyperpnks

Anchor Tag

Example

友情链接