Hyperlinks and Image Links (I)

In this article, we shall address the common queries on how to configure links such that they open in a new window when clicked, the HTML code for visitors to link to your blog, the various hyperlink HTML tags and attributes, etc.

A hypertext link or text link is a piece of text which when clicked will bring you to a section of a webpage, another webpage or an electronic document. If it is an icon or image that can be clicked, it is called a hypergraphic link or image link. For simplicity, both can be referred to as hyperlinks or links.

Text Links

To create a hypertext or text link, the HTML code is this:-

<a href="URL" target="_blank"title="TITLE">Text</a>

Allow me to explain:-

1. In HTML, the <a> (anchor) tag is used to create an anchor to link from. It should always be closed with the </a> tag.

2. HREF is an acronym for Hypertext REFerence and specifies the page to link to or the place that you want your readers to be taken to. This place that we are talking about can be a webpage, image, sound file, video file, or document. Replace URL in the above code with the location of the webpage, file or document. If it is anything other than a webpage, you will have to upload it onto a server and obtain the URL of that uploaded file.

3. You can read about using free hosts like Google Page Creator and Google Groups to upload your files. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the file, take note of theURL of the file and insert that into the above code.

4. The target attribute tells the browser to open the link in a new browser window or new tab. If you want the readers to view the link in the same browser window, remove target="_blank" from the code.

5. The title attribute can be used for any page element, e.g. links, tables and images. Give your link a TITLE. In most browsers, when you hover your mouse over the link, the title will pop up. It is useful to insert this title as it is believed that search engine spiders read these words.

6. Text shown between the open and close of the anchor tag is what readers will see as the hyperlink. You can insert any character or words into the Text. In normal blog settings, these will either be underlined, or have a different color from the main text so that people can tell that they are clickable links.

To see how it is put together, this code:-

<a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank" title="Quotes for Blogs">Famous Motivational and Inspirational Quotes</a>

will give you this line:-

Famous Motivational and Inspirational Quotes

Hover your mouse over the link to see the title. Clicking it will open the page in a new browser window or new tab. If you are interested to do something like the scrolling text in the header of this Famous Quotes blog, you may refer to the article Scrolling Text - Marquee HTML Code.

Link to Section

If you have a long article, you may want to allow people to 'jump' to specific sections of the page so that they need not scroll a lot to locate the section they want. It can be done by using the anchor tag with name attributes.

This is best explained through an example. I have inserted this tag in the later part of this article:-

<a name="demo">Email Links</a>

The name within the code need not be called “demo”. You can call it anything you want - “top”, “bottom”, “label”, whatever.

Next, I create a hyperlink for you to click to go straight to that section.

The HTML code for the hyperlink is this:-

<a href="URL#demo">Click here to go to Email Links</a>

You can type whatever text you want within the above anchor tag. The URL is the URL of your post. To obtain this URL, you will have to save your post and refresh your page. With the URL, go back to yur post to edit it by inserting the URL of your post. Using the above code, this is what you will see and if you click it, you will jump to that section.

Click here to go to Email Links

To give you another example, I shall now use the simple “top” and “bottom” tags which you can use for your Blog. Before you click anything, here are the HTML codes:-

<a name="top"><a href="URL#bottom">Click here to go to bottom</a>

<a name="bottom"><a href="URL#top">Click here to go to top</a>

You can now click this to go to the bottom of this page and click that link again to come back to this segment.

Click here to go to bottom

Email Links

If you would like to have a link for people to click and send you an email, you can use the following code:-

<a href="mailto:EMAIL ADDRESS">Email Author</a>

Your EMAIL ADDRESS will have to be inserted into the code. This will open up the reader's Outlook Express or other default email software with your email address automatically inserted as the addressee. However, if the reader is using Gmail, Yahoo mail, Hotmail or other web-based email, he will have to log in to his account and type in your email address.

How to insert text link HTML code

You can insert the HTML code either in your posts or through a Page Element. The quick method of inserting a hyperlink is through the Blogger inbuilt tool. Look for an icon that looks like this shown in the picture below. Block the text that you want to create a link from and click that icon. Type in the URL that you want to link to and it is done.



If you want this link to open in a new window and have a title, manually type in the title and target attributes. Check that you are in the “Edit HTML” mode and not “Compose” mode when you insert the attributes.



Should you want the link to appear on your sidebar, you can go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. Copy the above hyperlink code, paste and save. The blog directory links that you see on the left sidebar of this Blog are done using this method.

If you have a number of links that you want to put on your sidebar, you may also choose “Link List” when you “Add a Page Element”. Note however that you will not be able to insert the other attributes. I shall cover in a separate article the tweaks that can be done to the template to change the attributes to the link list.

This article continues at Hyperlinks and Image Links (II)

Further reading:

If you have a Link List or Labels in your sidebar, and would like to make the links open in new windows or tabs, please refer to the guide at Links, Labels open in New Window. To have numbered or bulleted links, you may check out the article Numbered List and Bulleted List.


Source : http://www.admin-seo.blogspot.com/