| « Stop Do Not Hit That Share Button | Get Your Skype On » |
Here is a post with an explanation of some very simple HTML code so, you can get the most benefit of those great pictures on your website. Having a graphic to catch peoples attention is wonderful but, you want it to be placed (center, right, left), sized, and linked right to your product page!
Many times your company may supply you with a pre made banner for your blog or to use on any site. It comes with all the HTML Code that you need to get it visible and when clicked goes to the appropriate site. But, what if you want to use your own banner, a product picture, or the pre made one is not a good size? You need to know how to make it work.
Here we go!
For a basic banner or picture you can make your own html code and have more control.

You will need to imput your own information in certain areas –
http://YOURURLHERE – This will be the link people will be directed to when they click the picture. You will want to leave target”_blank” just as it is. This means that the page will open in a new tab. This way they still have your blog open in a tab without clicking the back button.
http://YOURPICTUREURLHERE This is the link where your picture is stored. Be sure to include all /folders that will be needed to pull up the picture. Example – http://sherylloch.com/lochpic/amlban.jpg
alt="INSERT KEYWORD" – This is your Alternate Text. Many people say that since a spider can not see pictures (only text), that the alt text is how the spiders will categorize what you have placed as a picture. You will want to insert a keyword or phrase. I will say that I have found no proof that the ALT tag is even of any relevance. It may be a totally worthless as far as link anchor association but, I put it there just in case. To get the anchor text benefit simply insert a text link under your picture or banner.
title="INSERT PIC TITLE HERE” Here you can simply title your picture. Many times this is the text that shows when someone mouses over the picture.
width="440" height="70" Without these numbers the picture is shown on your site in the size that was loaded onto the server. Just because it is a certain size on the server does not mean it is good for placement on your site. If they have loaded a large picture this is how you can size it to me more manageable. I am sure you have seen the banners that hang over the edges of post or make a profile on a social site super huge. That looks like crap – all they need to do is put in a Width and Height that will make it more suitable.
Many of your button ads are 125x125 if that is the size you need put 125 in for width and again for height. Remember when working with pictures you may need to adjust the numbers a few times until you get it right.
If you would like to CENTER your image on the area you only need 2 pieces of code. You will see we have the center code at the beginning and the end of or entire code.

If you are wondering how people get pictures placed and have “wrap around text”, the words on the side.

You can make the Class=”rightmargin” or class=”leftmargin” depending on which side of the page you would like it on and the text will be on the opposite. Place your entire picture code immediately before the start of the paragraph that you would like beside the picture. REMEMBER – if you are going to use a right or left picture do not have the CENTER code included.
This same code can be used in Social Networking profiles, blog post, and most html based areas.
Now that you have made your codes be sure to copy, paste, and label them into a document so, next time you need them the are easy to find!
Have a great time posting your pictures and banners!
Sheryl Loch
Also see - Resource Code Boxes for Banners, Buttons, Images...
Are you looking to Add a Border Around Your Pictures? It is easy to do.