Hyperlink
- A method that allows one to link
to another document, file, location or another section from anywhere.
- A very useful and easy to use
feature.
- Hyperlinks are written using
<A HREF> and </A> tags.
- The
text that are placed within the tags are the hyperlinks. If an user were
to click on it, hyperlink will be activated.
- One can
place text or image as the hyperlink.
Basic Outline of an hyperlink code
<BODY>
<A HREF> Click me! </A>
</BODY>
Legend:
A - Anchor
HREF - Hyperlink Reference
Note:
this code would not work as we have not specified where to link to if the
user clicked on the text ‘Click me!’.
Basic Tags
Sample Codes for hyperlinks
Code
1 (To link to another page one same site)
<BODY>
<A HREF=“main_page.htm”> Click here </A> to go to main
page!
</BODY>
This
would work if the main_page.htm is in the same folder as this page. If not,
then you will have to write the full path of the file name. e.g.“project/htmlfiles/main_page.htm”
Code
2 (To link to an external website)
<BODY>
<A HREF=“http://www.yahoo.com”>Click to go to Yahoo! </A>
<br>
<A HREF=“http://www.msn.com”>Click to go to MSN! </A>
</BODY>
Code
3 (To link to an email client)
<BODY>
<A HREF=“mailto:my_email@email.com”>Send me a mail </A>
</BODY>
Note:
This code will actually allow the browser to launch an email client (for
example Microsoft Outlook) on the system and place the above email address on
the To bar.
Code
4 (To link to an email client)
<BODY>
<A HREF=“file:myfiles/wordfiles/information.doc”> Click here to open my
Information page as a Word document </A>
</BODY>
Code
5 (To link to another section on the same page)
<BODY>
<A HREF=“#section_1”>Click to go to section 1 </A>
{ place other information here…}
<A
NAME=“section_1”>This is section 1.
</BODY>
Note:
This codes will work if the html page is rather long. The codes must be
written in a pair of <A HREF> and <A NAME> tags. The <A
NAME> tag is to identify a particular location on that page. The <A
HREF> tag is to link to that particular location.
 Basic Tags for Images
Sample Codes for Images
Code
1
<BODY>
<IMG SRC=“mypictures/images/ball1.gif”>
</BODY>
Note:
A simple code to display an image. The full path of the location must be
keyed in if the image is in a different folder.
Code
2
<BODY>
<IMG SRC=“mypic.jpg” BORDER=2 ALT=“a pic of myself -you can download for
free”>
</BODY>
Note:
A code to display an image with a border thickness of 2 and also specify the
alternate text. The alternate text will be displayed if the image could not
be displayed or the user brings his mouse over the image.
Code
3
<BODY>
<IMG SRC=“mypic.jpg” HEIGHT=200 WIDTH=200>
<BODY>
<IMG SRC=“mypic.jpg” VALIGN=“top”> This text will be displayed at the
top level of the image.
<BODY>
<IMG SRC=“mypic.jpg” VALIGN=“middle”> This text will be displayed at
the middle level of the image.
<BODY>
<IMG SRC=“mypic.jpg” VALIGN=“bottom”> This text will be displayed at
the bottom level of the image.
</BODY>
Code
4
<BODY>
<IMG SRC=“mypic.jpg” VSPACE=10 HSPACE=10> An image with a horizontal
space of 10 pixels and a vertical space of 10 pixels.
</BODY>
Code
5 (To place an image as the hyperlink)
<BODY>
<A HREF=“http:www.yahoo.com”> <IMG SRC=“yahoopic.gif”> </A>
</BODY>
Note:
A simple piece of code that allows the use of an image as a hyperlink. When a
mouse is brought over the image, the cursor symbol will change into an
anchor.The other attributes of the image could also be used and some text may
also be added to allow better readability.
|
Post a Comment