Stay On Top of Crap, Got Some Paper?

Search

XML Feeds

User tools

Blog Co-Op
« Stop Do Not Hit That Share ButtonGet Your Skype On »

HTML Picture Linking Code

10/30/08

Permalink 04:32:36 pm, by Sheryl Email , 720 words, 7548 views   English (US)
Categories: Blogs

HTML Picture Linking Code

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.

hot linking pictures


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.

html code center picture


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

insert picture html right


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.


twitterThis 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.

5 comments

Hey Sherry

Great resources for beginners you write here. One thing I need to stress here is on the use of ALT on image. In most cases, people just overlook the need to put the keywords on it. Though it's not necessary to be relevant to your image, it must however be related to your blog's description.

Nice background you have it here. Oh ya, thanks for dropping by to my blog. I do appreciate it.

Yan
11/03/08 @ 00:57
Comment from: Sheryl [Member] Email · http://sherylloch.com
Hello Yan,
Thank you for stopping in!
I think it is important to help help out others with things that many people just do everyday without thinking. We all had to learn the basics somewhere. That also makes your blog an excellent place to get helpful information!

The ALT Tags have been debated by every SEO expert on the web. I am not one of those Guru's but, I figure it only takes a minute to add the text and if it will help in any way then it is well worth the time!

Thank you again and I will be stopping over at your blog to pick up some more helpful hints!

11/03/08 @ 12:54
Comment from: beth [Visitor]
i love you. you are now my favorite person.

BE
12/15/09 @ 09:57
Comment from: Heinrich [Visitor] Email · http://www.specialprayer.webs.com
Hi Sheryl
Thanks for the excellent post. It is extremely important to make sure that you use images correctly and get the most benefit out of it. The information that you have supplied is valuable and will definately make my life a lot easier.

Thanks a mil.
12/16/09 @ 15:56
Comment from: Sophie [Visitor] · http://www.canadawebprint.ca/english
Thank you so very much. I’m a beginner at HTML coding. This is a whole new language and your presentation was quite useful.
I bookmarked this site.

Sophie
01/18/10 @ 11:52

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)

post snap widget by EdB feed reading by SimplePie