Search This Blog

Sunday, July 13, 2008

Beginner HTML tutorial - hyperlink

Active Hyperlink HTML and attributes

One 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 Blogger hyperlink icon, then how you can add some attributes to make it more useful.

How to get the URL of a blog or website

You 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):

URL from address bar

Note that the URL of Blogger Tips and Tricks is:

http://blogger-tricks.blogspot.com

Highlight the URL and press ctrl+C to copy the URL into clipboard.

Other ways you can get URL of your blog.

Using the Blogger link icon Blogger hyperlink icon to make a hyperlink

To make an active hyperlink to 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:

highlight anchor text

After highlighting the "anchor text", click the hyperlink icon hyperlink tool icon in the POST EDITOR tool bar. This will bring up a box for you to paste the URL from clipboard into the box:

hyperlink 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>

or

<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 tag

Now 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:

tool tip resulting from title 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.

19 comments:

  1. Peter,

    Thanks for such useful info! And I greatly appreciate you commenting on my post "Nothing Is Ours; All Is God's." Best wishes and stay in touch!

    Humanity Overcomes

    ReplyDelete
  2. Hi, I wonder do you know how can I change the colour of the hyperlink?

    its black currently, when I mouse over, its red and underlined.

    I want to change it to (appear) Blue and underlined. When I mouse over, I want it to change to Orange.

    Do you know the solution?

    ReplyDelete
  3. Change these:

    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }

    ReplyDelete
  4. Hi,
    Thaks for your help about hiperlinks. However there's a hiperlink I've already tried, but I can't do it. How can I make a hiperlink for a file I created? I mean, an activity with hotpotatoes(crossword, matching)etc?
    Is it possible?

    ReplyDelete
  5. Hyperlink to a file you created? In your computer? No that cannot be done. If the file has been uploaded to a file host on the web, then it is possible. As for the rest, you will have to explain what it is all about.

    ReplyDelete
  6. Thanks for your answer, Peter.
    How do I upload to a file host on the net? I mean, what I'd like to do was to create a blog with interactive activities to be used by my students (I referred to Hotpotatoes because I've just finished a short training about it and it could be very helpful next school year).
    Thanks again for your attention.
    Ana T

    ReplyDelete
  7. How to upload? First you must have the file in your computer. Then you will have to search for and select a file host to host the file on the web and this often requires you to start an account. Which file host depend on what type of files you are dealing with and what you intend to do.

    For example, if you want to embed a WORD document or Excel spreadsheet or Powerpoint presentation or PDF file, you upload the file to Scribd.com (refer to embed PDF file into post.

    If you are dealing with music, refer to Hot linkable file host and embedding music player.

    With regards to HotPotatoes, it is only today I took some trouble to look it up and saw that it is a software that helps one to set up quizzes etc. Since you have undergone training, you will know more about it and what is the end product of HotPotatoes. You will have to tell me more about it before I can even guess how and if it is possible to incorporate HotPotatoes end products into a blog etc.

    ReplyDelete
  8. Thank you so much.
    Concearning Word, Powerpoint and music files, your answer was very helpful. I'll try to search a bit more about HotPotatoes and when I have the blog, I'll post the link so that you can take a look at it.
    Thanks again

    ReplyDelete
  9. Hi there ~ thanks so much for this info, it's invaluable. :)
    I have one more question though... I'm on the Midnight template and I'd like to have an underline for the hyperlinks within the post, but not for the post title or comments, or in fact anything outside of the post text. Is this possible?
    Thanks for any help you could give. :)
    My blog: http://soup-dragon.blogspot.com/
    :)

    ReplyDelete
  10. hey, this is really great! i've been trying to promote this article i read about time management for kids and this post has been so helpful! thanks so much

    ReplyDelete
  11. how to increase my blog to full screen

    http://goooglehacker.blogspot.com/

    ReplyDelete
  12. The first thing you need is to appreciate the reason for fixed width websites where when viewed with wide screen shows "wasted" blank space. I think I will follow up with a post to explain further. Wait for the new post.

    ReplyDelete
  13. I wanted to create a hyperlink from the note with the anchor name "Welcome!" located at the sidebar (About Me) to one of my post. Somehow, it is not working after numerous tries.. Error message prompted "does not exist".

    Wonder if you could help me with this.. thanks ;-)

    ReplyDelete
  14. Sent me the codes to bloggerfordummies (at] gmail {dot) com and I will have a look to see what is wrong

    ReplyDelete
  15. Hi, thank you Peter.

    After I left the message to you, I re-looked at the html code, I made a big mistake as I overlooked the url address.. after corrected it, and it works perfectly NOW.. ;-)

    Btw, yes, I have registered as a voter since I am eligible. hehehe..

    Cheers!

    ReplyDelete
  16. thanks for your tutorial. i think you should make html e-books.cheers

    ReplyDelete
  17. HI.
    This is mohsin I was just visiting your blog and i found it realy good I also made a blog http://jobs8khalid.blogspot.com/

    ReplyDelete
  18. Hi dude,

    This is all good but is there any way I can create link in same page basically I want to write FAQ kind of page where all question has link and when some one click the question it takes to answer in the same page.

    Thanks
    Javin
    FIX Protocol tutorial
    tibco tutorial

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications