HTML Links or Hyperlinks are letters, words or images that can be clicked to move from one page on the web to another or to navigate within a single page. These links are responsible for linking one web page to another and make internet browsing easier. In HTML, a hyperlink can be created using the <a> tag. A hyperlink can be made to point to a different section in the same page or to a different page in the same domain or to a different page in another domain. It can also be used to send an email to a specific email address. Continue reading this post to know how all these can be done.
The basic syntax of a hyperlink is:
<a href="url">Link Text</a>
The url can be replaced with any valid url and the Link Text can be replaced with the required text. For example, see the code below.
<a href="http://www.google.com">Google Search</a>
The above code can be placed anywhere within the <body> </body> section of your code. It will display the text Google Search and clicking it will take you to the url given. The output of above code is shown below (Use back on your browser to return to this page).
Google Search
It is not necessary to give the entire url if you want to navigate to a page under the same domain. Suppose you have your site at :
http://www.yoursite.com/page1.html
Now you can create a link on page1.html to a page (page2.html) which is located in the same folder using the code:
<a href="page2.html">Page 2</a>
Clicking this link will take you to :
http://www.yoursite.com/page2.html
In the examples shown above, you might have noticed that the new page loads by replacing the current page. In some cases, you might want to load the new page in a separate tab. For this you can add an extra attribute called target as show in the following example.
<a href="http://www.google.com" target="_blank">Google Search</a>
The above code will open the given url in a new browser tab. The output of above code is shown below.
Google Search
Now suppose you are having a long web page and you want to create a link at the bottom of the page that says "Top" and clicking that should make the screen scroll to the top. This can also be easily accomplished with hyperlink. For this, you must first create an anchor at the top of your page, that is where you want to land when you click the "Top" link. You can create an anchor using the syntax shown below:
<a name="top">Top Of the Page</a>
The above code defines an anchor with the name "top". Now you should create the hyperlink that points to this anchor. This can be done as follows:
<a href="#top">Goto Top</a>
Clicking this link will cause the page to be scrolled to the place where the anchor is placed.
In all the above cases, you have seen a text as the Link. Now lets see how you can create an image as the link. It is quite easy and you just have to replace the Link Text with the code required for an image. First lets see the syntax of an image tag.
<img src="image url" />
The above code will cause an image to be loaded with the specified image url. Now to make a link out of this image, you just need to put the above code within the <a> tag as shown below.
<a href="url"><img src="image url" /></a>
Now, when you click the image, you will be taken to the page with the given url.
The last part of this article deals with the mailto link. Before reading further, please note that this will not send an email directly. It will just open the default Mail Client installed on you system with the data provided by you in the link.
The basic syntax of a mailto link is as follows:
<a href="mailto:someone@example.com">Send Mail</a>
This will open the mail client with the To field filled with the given email ID. You can also provide additional details with the mailto link like cc, bcc, subject and body. An example is shown below. Note that all spaces between words should be replaced with %20 so as to ensure that the browser displays the text correctly.
<a href="mailto:someone@example.com?cc=someone1@example.com&bcc=someone2@example.com&subject=HTML%20Links&body=I%20just%20learned%20how%20to%20create%20a%20link">Send mail</a>
These are the basics that you need to know regarding HTML links and now go ahead and make you own HTML pages with links.
The basic syntax of a hyperlink is:
<a href="url">Link Text</a>
The url can be replaced with any valid url and the Link Text can be replaced with the required text. For example, see the code below.
<a href="http://www.google.com">Google Search</a>
The above code can be placed anywhere within the <body> </body> section of your code. It will display the text Google Search and clicking it will take you to the url given. The output of above code is shown below (Use back on your browser to return to this page).
Google Search
It is not necessary to give the entire url if you want to navigate to a page under the same domain. Suppose you have your site at :
http://www.yoursite.com/page1.html
Now you can create a link on page1.html to a page (page2.html) which is located in the same folder using the code:
<a href="page2.html">Page 2</a>
Clicking this link will take you to :
http://www.yoursite.com/page2.html
In the examples shown above, you might have noticed that the new page loads by replacing the current page. In some cases, you might want to load the new page in a separate tab. For this you can add an extra attribute called target as show in the following example.
<a href="http://www.google.com" target="_blank">Google Search</a>
The above code will open the given url in a new browser tab. The output of above code is shown below.
Google Search
Now suppose you are having a long web page and you want to create a link at the bottom of the page that says "Top" and clicking that should make the screen scroll to the top. This can also be easily accomplished with hyperlink. For this, you must first create an anchor at the top of your page, that is where you want to land when you click the "Top" link. You can create an anchor using the syntax shown below:
<a name="top">Top Of the Page</a>
The above code defines an anchor with the name "top". Now you should create the hyperlink that points to this anchor. This can be done as follows:
<a href="#top">Goto Top</a>
Clicking this link will cause the page to be scrolled to the place where the anchor is placed.
In all the above cases, you have seen a text as the Link. Now lets see how you can create an image as the link. It is quite easy and you just have to replace the Link Text with the code required for an image. First lets see the syntax of an image tag.
<img src="image url" />
The above code will cause an image to be loaded with the specified image url. Now to make a link out of this image, you just need to put the above code within the <a> tag as shown below.
<a href="url"><img src="image url" /></a>
Now, when you click the image, you will be taken to the page with the given url.
The last part of this article deals with the mailto link. Before reading further, please note that this will not send an email directly. It will just open the default Mail Client installed on you system with the data provided by you in the link.
The basic syntax of a mailto link is as follows:
<a href="mailto:someone@example.com">Send Mail</a>
This will open the mail client with the To field filled with the given email ID. You can also provide additional details with the mailto link like cc, bcc, subject and body. An example is shown below. Note that all spaces between words should be replaced with %20 so as to ensure that the browser displays the text correctly.
<a href="mailto:someone@example.com?cc=someone1@example.com&bcc=someone2@example.com&subject=HTML%20Links&body=I%20just%20learned%20how%20to%20create%20a%20link">Send mail</a>
These are the basics that you need to know regarding HTML links and now go ahead and make you own HTML pages with links.
No comments:
Post a Comment