SiteDesignTutorial.com

How to make hyperlinks with html.


In the previous chapters you learnt how to start html pages, add text, format it, make paragraphs, format them. This is all basic things about having text html documents. Now let's proceed to having some action.

All of you would have seen blue text with an underline. When you click it, a new page loads. These text in blue color, and underlined are hyperlinks, or call links in short.

HTML tags to make links in html pages.



The tag used to do this is


<a



Did you notice It's not closed? That's because it's not a full command above. The tag is called ANCHOR tag.

The complete format of an anchor tag is:


<a href="URL"> text here </a>



where the URL is the URL of the page to be loaded when Text here is clicked. See this example:


<a href="http://www.yahoo.com"> Click to go to Yahoo! </a>



Try that in your html page...

The HREF attribute in the <a tag holds the address of the page that is to be loaded when the text is clicked. You can specify these address in 2 ways:

    • Full URL.
    • Full directory path.


    Generally a full url is used when you have to make a link to a different website than yours. For example your website is http://www.yoursite.com . You want a link which loads the home page of yahoo! This is where you use the Full URL method, (the example above is full url).

    Full path



    Try the following:

    Open a new notepad document,
    Type:


    <html><head></head><body>
    This is page 2
    </body></html>



    Save this page as: mypage2.html in the same folder where you have stored your other html pages, which you made in previous lessons. Didn't I tell you to make a separate folder for all your html pages?

    Close this file. Open the previous file where you have been testing the html learnt, and type:


    <a href="mypage2.html"> Go to page 2 </a>



    Save and refresh, and you should see the link go to page 2 . Click it and the page you just created is opened!

    Note:
    You did not specify a URL, instead you specified a path.

    A full URL to the same page would be:
    http://www.yoursite.com/mypage2.html (This is always visible in the address bar of your browser.) Can you tell me the URL of this page you are reading? Try creating a link to this page from your html page

    Sub folders and links


    Try creating a new folder inside the folder where you are saving all your html pages. Name it: sub for example. You can name it anything...

    Move your mypage2.html inside this folder. Now how do you link to it? See this:


    <a href="sub/mypage2.html"> page 2 is here </a>



    Notice the new path to your file in the HREF attribute.

    Use ../ to come out of it. For example, the current page loaded now is mypage2.html which is inside a folder named sub.
    You want to load a page named index.html which is just 1 folder above the sub. (sub is inside this folder.)

    This is what you do:


    <a href="../index.html"> Go back to home page </a>



    Just like other html tags, you can also bold the text inside this tag and do other formatting as well.

    see this example:


    <a href="mypage2.html"> <b> text here </b> </a>



    Easy, isn't it?

    Let's add some pictures to our html page now.

    SiteDesignTutorial arrowHTML Pictures Links