Hyperlinks and URLs

A hyperlink is a certain kind of "clickable" text or graphic, which the Web browser generally responds by loading a new Web page.

A uniform resource locator (URL) is a special address that uniquely identifies a Web page on the Web.

For the following two URLs, both of them are absolute URLs because they could be used to reference their corresponding pages from anywhere on the Web.

http://www.wong-sir.com/index.htm
http://www.wong-sir.com/contents.htm

However, the following relative URL can be used to refer to the second page (i.e., contents.htm) from the first page (i.e., index.htm)

contents.htm

The <A href="URL"> and </A> anchor tags create a hypertext link on a Web page.

The herf (i.e., hyperlink reference) attribute of the <A href="URL"> tag refers to the address (either absolute or relative) of the new Web page to load. The text enclosed by the <A href="URL"> and </A> tags simply describes what the link points to.

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<A href="http://www.csklsc.net./pe/index.html">CSK PE Department Home Page</A>
</BODY>
</HTML>

Make sure that you are online in order to reach the URL as shown in the above document.

To include a hyperlink that takes the visitor to a different part of the same Web page, use a # and an anchor name as below:

<A href="#anchor_name">Put your descriptive text here</A>

This also means that some part of the Web page must also have to include such a "target" as shown below:

<A name="anchor_name">Descriptive text for the target</A>

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<H1>Frequently Asked Questions</H1>
1. <A href="#answer01">This is question one. You may click here to obtain the answer for this question.</A>
2. <A href="#answer02">This is question two. You may click here to obtain the answer for this question.</A>
3. <A href="#answer03">This is question three. You may click here to obtain the answer for this question.</A>
4. <A href="#answer04">This is question four. You may click here to obtain the answer for this question.</A>
5. <A href="#answer05">This is question five. You may click here to obtain the answer for this question.</A>
6. <A href="#answer06">This is question six. You may click here to obtain the answer for this question.</A>
7. <A href="#answer07">This is question seven. You may click here to obtain the answer for this question.</A>
8. <A href="#answer08">This is question eight. You may click here to obtain the answer for this question.</A>
9. <A href="#answer09">This is question nine. You may click here to obtain the answer for this question.</A>
10. <A href="#answer10">This is question ten. You may click here to obtain the answer for this question.</A>
11. <A href="#answer11">This is question eleven. You may click here to obtain the answer for this question.</A>
12. <A href="#answer12">This is question twelve. You may click here to obtain the answer for this question.</A>
13. <A href="#answer13">This is question thirteen. You may click here to obtain the answer for this question.</A>
14. <A href="#answer14">This is question fourteen. You may click here to obtain the answer for this question.</A>
15. <A href="#answer15">This is question fifteen. You may click here to obtain the answer for this question.</A>
<HR>
<H1>Answers to FAQ</H1>
1. <A name="answer01">This is the answer to question one. Thank you for your enquiry! Please contact us for further enquiry.</A>
2. <A name="answer02">This is the answer to question two. Thank you for your enquiry! Please contact us for further enquiry.</A>
3. <A name="answer03">This is the answer to question three. Thank you for your enquiry! Please contact us for further enquiry.</A>
4. <A name="answer04">This is the answer to question four. Thank you for your enquiry! Please contact us for further enquiry.</A>
5. <A name="answer05">This is the answer to question five. Thank you for your enquiry! Please contact us for further enquiry.</A>
6. <A name="answer06">This is the answer to question six. Thank you for your enquiry! Please contact us for further enquiry.</A>
7. <A name="answer07">This is the answer to question seven. Thank you for your enquiry! Please contact us for further enquiry.</A>
8. <A name="answer08">This is the answer to question eight. Thank you for your enquiry! Please contact us for further enquiry.</A>
9. <A name="answer09">This is the answer to question nine. Thank you for your enquiry! Please contact us for further enquiry.</A>
10. <A name="answer10">This is the answer to question ten. Thank you for your enquiry! Please contact us for further enquiry.</A>
11. <A name="answer11">This is the answer to question eleven. Thank you for your enquiry! Please contact us for further enquiry.</A>
12. <A name="answer12">This is the answer to question twelve. Thank you for your enquiry! Please contact us for further enquiry.</A>
13. <A name="answer13">This is the answer to question thirteen. Thank you for your enquiry! Please contact us for further enquiry.</A>
14. <A name="answer14">This is the answer to question fourteen. Thank you for your enquiry! Please contact us for further enquiry.</A>
15. <A name="answer15">This is the answer to question fifteen. Thank you for your enquiry! Please contact us for further enquiry.</A>
</BODY>
</HTML>

Note that such "targets" can also be used for linking to specific places on other Web pages.

The following <A> anchor format allows a visitor to click on a graphical image in order to load a new Web page.

<A href="URL"><IMG src=imageURL alt=description></A>

Click here to review how the following document appears in a Web browser.

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<a href="http://www.csklsc.net./pe/index.html"><img src="images/cskpe_badge.jpg" alt="CSK PE Home Page"></a>
</BODY>
</HTML>

Note that visitors of non-graphic browsers will see a text hyperlink with the alt attribute of the <IMG> tag.

Besides, to remove the border of the graphical hyperlink, simply add border=0 as an additional attribute to the <IMG> tag as shown below:

<HTML>
<HEAD>
<TITLE>Enter the Page Title Here</TITLE>
</HEAD>
<BODY>
<a href="http://www.csklsc.net./pe/index.html"><img src="images/cskpe_badge.jpg" border=0 alt="CSK PE Home Page"></a>
</BODY>
</HTML>

Click here to review the improved version in a Web browser.