Hyperlinks and Image Links (II)

We continue from where we left off in Hyperlinks and Image Links (I). We have looked at how we can create text links and discussed the HTML code and common attributes. In this part of the article, we shall focus on adding Images and Image Links into your Blog. We will talk about the “title” and “alt” tags in image links which supposedly help in search engine optimization (SEO). We shall end off with the code you can put on your Blog to allow your readers to link to you from their Blogs.

Image Tag

I assume you have a ready picture, image, photo, or banner. Edit it and resize it using an image editing software. Other than Google's Picasa, there are other free image editing software offered on the net that you can try. As explained inHyperlinks and Image Links (I), the image has to be uploaded onto an image server which allows direct link to the image. Copy the image URL.

The HTML code for a picture or image is this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" />

A couple of things to note:-

1. Unlike the anchor tag, the <img> (image) tag has no closing tag.

2. In the code, src means “source” and this is where you will insert the Image URL of the picture that you wish to display on your Blog.

3. Depending on your Blog's configuration, any picture you upload may automatically have a border surrounding it. In the above example, the border is removed. If you want a border, you can change the “0” to “1” pixel or any other value.

4. When your Blog page is downloaded, the browser normally allocates a space for the images contained in your page. Sometimes, the allocated space may be bigger than the image size and when the images are finally downloaded, the contents are adjusted to cater to the images. This adjustment may sometimes be the cause of a slower download. To resolve this, it is usually preferable to insert the width and height of the image (in pixels) to let the browser reserve the exact space for the image.

5. The width and height settings can also be used to resize the image, although the better way to resize any image is to use an image editing software to adjust the image to the size that you want before uploading it.

6. The alt attribute displays the alternative text that readers will see if the images are not successfully downloaded. Some people may disable image downloads to improve the speed of internet access. For the blind readers, this alternate text is what will be read out to them by their computers. Also, search engine spiders are said to read this alternate text and it is all the more advisable to include it for SEO purposes. As a matter of practice, it is good to enter a short Descriptioninto the code.

Alignment of image

There are times when you want an image to appear on the left or right of your header or body. You can do this by inserting the alignment tags. In the following example, the image will float to the right:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" align="right" />

Margin around image

The image can appear in the midst of some text and you may want to set a margin or a space around the image where the text will not intrude. The attribute “hspace” sets the horizontal space and the “vspace” sets the vertical space between the image and the surrounding text. Adding on to the above example, the final code after inserting the margin settings (in pixels) will look like this:-

<img src="Image URL" border="0" width="80" height="15" alt="Description" hspace="20" vspace="20" align="right" />

Image Links

We have discussed the image tag and its common attributes. We shall now look at how to turn the image into a hyperlink, so that when people click on the image, they will be brought to a webpage, image, sound file, video file, or document. You can also have a clickable image in your Header that will bring your readers to your Home page. The details are in the article Add Picture Banner Link to Blogger Header.

If you have followed Part I of this article and understood how text links are created, image links are formed in similar manner, except that instead of Text, we insert the image tag.

To recall, the HTML code for a text link is this:-

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

The HTML code for an image hyperlink is this:-

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>

See the similarities? I shall briefly explain what these attributes mean and why they matter. If you wish to have a clearer idea, please refer to Hyperlinks and Image Links (I).

1. The URL is the location that you want your readers to go to when they click the image. This could point to a webpage, file or document. To test whether the URL is correct, copy the URL, paste it into your web browser and press Enter. You should be able to see the webpage, image, or document, listen to the sound file or view the video file.

2. By inserting the target="_blank" attribute, the link will open in a new browser window or tab. If you want the link to open in the same window or tab, delete it. Should you have difficulty understanding this attribute, I have an example below for you to try out.

3. The TITLE is what you see as a pop-up when you hover your mouse over the link. Similar to the “alt” attribute discussed above, this is supposedly read by search engines and will enhance your SEO. It is good practice to insert the TITLE and the Description.

4. As for the image tag code, this has been fully explained above and I shall not elaborate further. Remember that the hyperlink code has to be closed with the </a> tag as shown in the example.

Putting it together, this code:-

<a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank" title="Business Fables and Management Lessons"><img src= "http://i154.photobucket.com/albums/s255/ownlblog/fablesbanner80x15.gif" border="0" width="80" height="15" alt="Business Fables and Management Lessons" /></a>

Will give you this:-



Hover your mouse over it and you will see the pop-up Title. If you click this link, it will open in a new window or tab because of the target attribute. At this link, you will notice the image that has been inserted as a background to the Header. If you would like to have your own image in your Header, you may read this article.

How to insert image link HTML code

You can insert the HTML code in your posts. See that you are in the “Edit HTML” mode and not “Compose” mode when you insert the image link code.



If you want the image 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.

“Link to Your Blog” HTML code

Would you like visitors to be able to create a link from their blogs to yours? Putting a code for visitors to copy and paste, akin to what you see on the left sidebar of this Blog requires additional HTML tags. Briefly explained, whatever HTML code you insert into your Blog post or template will be interpreted as a code rather than just lines of text. To tell Blogger not to act on this code, you will need to put the code in a text box or a form field. This is what you can use:-

<textarea rows="4" cols="25" name="NAME" readonly="true">LINK CODE</textarea>

The rows attribute defines how tall the text input box will be and the cols attribute defines how wide, based on the number of characters. You can change the values depending on how much space you want to allocate for the text. The name attribute is more for scripting purposes and you can insert any NAME that you want. Readonly attribute locks the field and while people can block and copy the text, they cannot change it. The LINK CODE in this case is the entire hyperlink code that will link to your Blog. This hyperlink can be either a text link or an image link.

If this still sounds confusing, don't fret. What I did on my left sidebar is to go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. You can use the code I have for this Blog but change the relevant particulars to yours:-

Link to Us <p></p> <textarea rows="3" cols="18" name="Link to Us" readonly="readonly"><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank" title="Tips for New Bloggers"><img border="0" alt="Tips for New Bloggers" src="http://i154.photobucket.com/albums/s255/ownlblog/tipsbanner80x15.gif" width="80" height="15" /></a></textarea>

We have a more detailed discussion of the textarea code in our Add Text Box and Textarea article.

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.