SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Sunday, January 10, 2010

How to create a HTML link to another webpage?

There are often times when composing a blog post, we would like to refer to other web pages of related topics with a link to them but don't know how-to create one. This is especially true for newbies to blogging, so I thought it appropriate to include a tutorial here.

A link is the 'address' to a document (or a resource) on the web, and in layman's term, can be known as hyperlink, hypertext link, clickable link, or just simply, link.

Learn how to create an HTML link to another web page
in these simple steps below:
(this will link to a web document that opens in the same tab or window)

  1. First, you need to know that the HTML format for a basic link looks like this:

    <a href="URL">Text</a>

    where only the URL and Link Text are to be changed accordingly as you wish, while the anchor tags <a> and </a> that starts and ends the link, including the href attribute and the rest should remain intact.
    So, basically, a HTML link has two parts as seen in the following two steps, that is, the URL or destination site/page/resource, and the clickable part which is the link text.

  2. For the first part, you just need to specify the URL (uniform resource locator) or webpage address that you want linked to in the start tag, <a href=" ">, which is to be enclosed in double quotes. The URL can be found at the top white box of the browser's address bar.

    Image to illustrate the positioning of the URL or web address in a browser window
  3. The second part is to add the Text that you want to be displayed on your blog post to work as the link created. Since this text will be the clickable link that is shown up in your post, do write something that denotes the link. Just adding 'Click here' is not advisable as it's not user-friendly for disabled readers.
That's all! Simple and easy, right?

Here's an example below that would create a link to the Jacq's Blogger Tips homepage :

<a href="http://jacqsbloggertips.blogspot.com/">Click here to go to Jacq's Blogger Tips</a>

and it will appear in the post as

Click here to go to Jacq's Blogger Tips
and open it in the same window as the current web page when clicked.

Now that you know how easy the link format is, you can then proceed to learn one more simple additional step which is :

How to create a HTML link that opens the linked webpage in a new tab or window :
(some people prefer this variation, so that their visitors do not have to leave the currently opened webpage)
  1. Follow the same steps as the previous tutorial above, except that you've to add to the HTML link, the target attribute to define where the linked document will be opened. Setting the target attribute to "_blank" will lead it to open in a new tab or window as shown in the blue-coloured text below :

    <a href="URL" target="_blank">Text</a>
Here's an example below that would create a link to the Jacq's Blogger Tips homepage :

<a href="http://jacqsbloggertips.blogspot.com/" target="_blank">Click here to go to Jacq's Blogger Tips</a>

and displayed in the post as

Click here to go to Jacq's Blogger Tips
which will open the webpage in a new tab or window when clicked.

Try it! It's fun learning!

Just sharing an image to illustrate the two different HTML links in brief to round it up!

Illustration on 2 different types of links in HTML

You may want to browse these related links:

P/S: For Blogspot bloggers who'd prefer an alternative way, visit my next article at Create a hypertext link in Blogspot blog.

Keep learning~~keep smiling~~keep sharing!!

Last edited: May 3 2011

16 comments:

  1. How i wish i should have seen this before my trials and errors with mine! But until now i have not perfected it, as the common mistake is that, for example my common links are references placed in Scientific names of plants. After placing the command at the end, it normally says it cant be saved/published because of error in form. Another common mistake which is giving me a lot of troubled hours is that all the phrases after the underlined scientific names became underlined. What i do with this because i cannot understand the HTML codes is to retype the whole paragraph in a blank document to paste to the deleted older one. Huh that takes a long time. Sorry Jacqui, haha! But i am learning. I hope i can enjoy it as well.

    P.S. Your HTML cannot be accepted: Closing tag has no matching opening tag:A (my common mistake)

    ReplyDelete
  2. Hi Andrea! Please do try to give a little effort to follow through with the concise illustrated tutorial I have presented here. You just need to know its basic format as explained at step 1 which is sufficient to help you succeed your next attempt at creating a proper link, using the HTML method.

    If you think that the HTML way is too challenging, then why not choose the easier way of creating your links in the compose mode of the post editor instead.

    ReplyDelete
  3. i want to change color and font size of an HTML link. how to do it?

    ReplyDelete
  4. Hi d! You need to add the relevant CSS code snippet within your link as in this example:
    <a href="http://jacqsbloggertips.blogspot.com/" style="color: green; font-size: 120%;">Jacq's Blogger Tips</a>
    Just replace with your URL link and name, change the colour and size as desired, and you're done!

    ReplyDelete
  5. Thanks...

    I want one more help from you... i put a picture image before an HTML link using the code [img src="image URL"/][a href="URL"]Title corresponding to the URL[/a]

    but i got a problem...the picture image did not appear on the same line with the HTML link...the picture image appear slightly higher than the position of HTMl link...i want both piture and HTML link to be on a same line with some space between them...

    what is the style should I use?

    ReplyDelete
  6. using your code I change colour and size of HTML link...But I want to make the font to be bold..how to make it bold?

    ReplyDelete
  7. Hi d!
    Sorry, no idea at all regarding your enquiry about the picture image.
    To make the font bold, just add the following style code:
    font-weight:bold;

    ReplyDelete
  8. http://dineshkarthi.blogspot.com/

    see my blog. below header i have created 3 HTML links in green color. I could not able to put space between them. So, i have put a backslash between them. I dont like backslash. How to set desired space between horizontal HTML links? i want to create many HTML links horizontally one after the other with desired space between them. how to do that? Help me.

    ReplyDelete
  9. To create a space between the links, just type between them, the HTML character entity for non-breaking space which is &nbsp; for a single space and if you want a bigger space, just repeat it as many times as you wish.

    ReplyDelete
  10. Thanks. I have done as you said. see my blog http://dineshkarthi.blogspot.com/

    But, I need one more thing. How to give hover effect for html links? when I move mouse cursor over a link I want a hover color for background and a hover color for the text... Help me if you know the solution...

    ReplyDelete
  11. how to place a separator line inbetween the HTML links?

    YOu have heart symbol at the bottom of your blog. Before that u had a seaparator line in between the HTML links at the bottom. How to place that seaparator line in between HTML links?

    ReplyDelete
  12. d, I just type the vertical bar keyboard key, '|' with a space before and after, in between the HTML links. You can find this symbol above the backslash '\' on the same key.

    ReplyDelete
  13. hi Jacqueline:

    I want to remove the option from new page being displayed for every hyperlink clicked on my blogspot. Any code that I need to remove from my .xml file?? Pls help..

    thx
    Mom Chef

    ReplyDelete
  14. Mom Chef, I'm sure there is a related code that can be added to your blog's template for that function but this is something beyond my limited technical knowledge. Sorry!

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search