What is HTML Link?
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.
Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.
- Internal: Link that navigate to the different content of the same page. (For eg: A link which says ‘top’ would take to the top of the same page).
- Local: Link that navigates to the other pages of the same website. (Eg. Link for ‘Contact us’ page from ‘About us’ page)
- Global: Link that take us to other domain / website.
- mailto: This is used to link email address. Clicking on the link would enable us to send email.
How to use HTML Links?
- Attribute ‘href’ is very important where the destination url is given.
- The ‘target’ attribute defines the browser whether to open the linked page in a separate window or in the current window itself.
- In email (or) mailto link, we can also define Subject and body of the mail besides giving email address.
Example
<body>
<h1><a name=”top”>Top of the Page</a></h1>
<a href=”#bottom”>Go to Bottom</a>
<p>This is the first paragraph</p>
<br/><br/>
<h1><a name=”bottom”>Bottom of the Page</a></h1>
<p>This is the second paragraph</p>
<a href=”#top”>Go to Top</a>
</body>
In this example, you will first see ‘Top of the page. When you click the link ‘Go to Bottom’, you will be taken down. Again when you click ‘Go to Top’, you will be navigated to the top of the page. This is a simple example for navigating within a page. Here ‘name’ attribute is used for naming the block. The same name is used with ‘#name’ to link that block.
<body>
Next tutorial will be on <a href=”http://webdeveloperguide.wordpress.com/about/”>About us</a>
</body>
In this sample, link is used to navigate to the About us page of our blog.
<body>
<a href=”http://www.google.co.in/>Google</a>
</body>
Link here takes you to the google homepage from the existing page.
<a href=”mailto:yourmailid@mail.com”>My email id</a> – This link has only your email id
<a href=”mailto:yourfriend@gmail.com?cc=yourfriend1@gmail.com&bcc=yourfriend2@gmail.com&subject=Welcome%20email&body=You%20are%20welcome%20to%20styledesign.com”>Send mail!</a> – Click this link to get the clear picture than explanation. %20 is used instead of spaces between words to ensure that the browsers display the text properly.
Example for Target Attributes:
Four target attributes that exist in the present world are: _blank, _self, _parent, _top. Their uses can be seen here with simple examples.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_blank”>Webdevloperguide</a> – opens our homepage in a new browwer window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_self”>Webdeveloperguide</a> – opens our homepage in the current browser window. The current page cannot be viewed if you click the link. Anyhow you can come back by clicking ‘Go back’ button in your browser window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_parent”>Webdeveloperguide</a> – opens new page into a frame that is superior to this page. It can be tested only if we use html frames which can be seen in our upcoming tutorial.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_top”>Webdeveloperguide</a> – Opens new page into the current broswer window, cancelling the exisiting open frames. It also deals with html frames. But don’t confuse with href=”#top” with target=”_top”, where the former one deals with the destination.
Next is Html Images.
