Header Ads

Hyperlinks


  • 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.


No comments