Active Hyperlink HTML and attributesOne more example for this HTML tutorial. Now we will learn hyperlink. First I will show how to make a hyperlink to a blog (or any other web page) without learning HTML, then I will explain the HTML tag for hyperlink so you can type it yourself without depending on the link icon , then how you can add some attributes to make it more useful.
How to get the URL of a blog or websiteYou can skip to the next section if you already know about URL and how to get it. Now suppose I want to get the blog URL of my main Blogger related blog - "Blogger Tips and Tricks". For you, get it from the address bar at the top of that blog (see screen shot below):
Note that the URL of Blogger Tips and Tricks is:
Highlight the URL and press ctrl+C to copy the URL into clipboard.
Other ways you can get URL of your blog.
Blogger Tips and Tricks, first type some text describing the blog. It can be the title "Blogger Tips and Tricks" or it can be other descriptive text, like Easy Instructions for Bloggers. These text are what will be displayed on the WEB when viewed with a browser like Internet Explorer or FireFox and are called "anchor text". Now highlight the anchor text as shown below in the screen shot:
After highlighting the "anchor text", click the hyperlink icon in the POST EDITOR tool bar. This will bring up a box for you to paste the URL from clipboard into the box:
click inside the box and press ctrl+V to paste the blog URL into the box. Then click OK. You will notice the the anchor text Easy Instructions for Bloggers has been surrounded by a pair of HTML tags <a...> and </a> and below is what you get:
<a href="http://blogger-tricks.blogspot.com">Easy Instructions for Bloggers</a>
Now clicking the link Easy Instructions for Bloggers will cause you to open my main blog in this same window. If you want the hyperlink to open the page in a new window, all you have to do is to add target="new" or target="_blank". For example, to make the above hyperlink open in a new window, just edit the HTML to
<a href="http://blogger-tricks.blogspot.com" target="new">Easy Instructions for Bloggers</a>
<a href="http://blogger-tricks.blogspot.com"> target="_blank"Easy Instructions for Bloggers</a>
Note that adding the attributes target="new" or target="_blank" has been deprecated and is discouraged, but you probably can continue to use it for a long time.
For less "long winded" explanation of hyperlinks, refer to active hyperlinks for blog posts and comments.
target and title attributes for hyperlink HTML tagNow I am sure you can type the HTML <a href="URL">anchor text</a>. To make hyperlink open in new window or tab, add the attribute target="_blank" or target="new". Thus the HTML tag become <a href="URL" target="_blank">anchor text</a> or <a href="URL" target="new">anchor text</a>
If you wish, you can also add the title attribute so that when a visitor hover the mouse over the hyperlink, a tool tip will appear with a message. Hover your mouse over this link Beginners' Guide to Blogger. Try that yourself or refer to the screen shot below to see what may result from adding this attribute:
Note that this title attribute can also be added to images. Try hovering over the screen shot above and note that a tool tip will also be displayed.