October 22, 2011

Hyperlink

A hyperlink or link is a text, group of text, or image that you can click on to go to a new page or a new section within the current page. If you are going to move your pointer over a link in a webpage, the arrow will turn into a little hand.


Creating a Reference Link

Reference link is also called page jump; it is used to link from section to section within the same web page. To present a page jump, you need two items:
  1. a basic link command pointing to another section of the page
  2. <a href=”#top”>back to top</a>
  3. and the point where the page will jump or the bookmark.
About the code:
  • The <a> tag which means anchor, tells the browser to insert links inside the content of a document. It can be used in recommending other webpages to your visitors. The visitors can access the recommended website by just clicking on the linked content.
  • The href=”#top” is the attribute of the <a> tag which means hypertext reference. It is used to specify the destination of a link, in our example the destination link is called #top, the pound sign “#” tells the browser that the destination link is within the page and top is the id or name of the anchor (<a>) tag or the bookmark.
  • The text in between the opening anchor tag and closing anchor tag, which, in our example is go to top, will be the one displayed in the browser.
  • The </a> is the closing anchor tag. It tells the browser that the anchor tag has ended.
  • The name is an attribute for the anchor tag which is used to set the name of the bookmark.

Open your text editor and key in the html code below.
<html>
<head>
<title>Page Jump</title>
</head>
<body>
<a name="top"></a>
<p>This is the topmost part of the page.</p>
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<br /><a href="#top">Go to top</a></body>
</html>

What happen as you click on the “Go to top” link located at the bottom of your page?

0 comments: