Image Code Basics Explained

Here is a basic explaination about some of the parts of the <img> tag that you use to put an image onto your blog.

Here are the parts we'll be looking at:
SRC = http://www.PATH_TO_IMAGE.com
WIDTH = "125"
HEIGHT = "125"
ALT = "This shows up when you move the mouse over the image"
ALIGN = "right"
BORDER = 0



Here's the Details
SRC
The SRC = "http://www.yourimagepath.com"    In this part you put the path to the image that you want to display.
WIDTH and HEIGHT
Yep, you guessed it, these set the width and height of the image. These are very handy to slightly change the size of a button. We use this one frequently when we want to put an image that is 150 x 150 pixels into our 125 x 125 button spaces. You simply change the Height = "150" Width = "150" to Height = "125" Width = "125"   However, in most cases, these are better left alone because you can end up with a blurry and/or squished looking image. It is generally best to resize in a photo editing program.
ALT
This part of the code is where you put the alternate text that will show up if the graphic doesn't load for whatever reason. When you move your mouse over an image, these are the words that pop up. Also, it is important to include because with many search engines having alt text can help your ranking.
ALIGN
Is what you use to set the alignment. It can be: left, right, top, texttop, middle, absmiddle, baseline, bottom, or absbottom. It controls how the image aligns with the text around it.
BORDER
This is used to add a border around an image. "0" is no border. The larger the number the thicker the border.

HERE IS AN EXAMPLE OF HOW IT ALL COMES TOGETHER



This code puts the above button on the page:
<a href="http://www.smartandtrendymoms.com/"><img border="0" alt="Smart and Trendy Moms - A Resource for Moms" height="125" width="125" src="http://i778.photobucket.com/albums/yy64/smartandtrendymoms/stmgrabbutton.png"/></a>


TO MAKE THE IMAGE A LINK

To make an image a link ("clickable") you need to add what's called an anchor tag:
<a href ="http://www.THE_PAGE_ITS_GOING_TO.com"> before the image tag and </a> directly after.
This same anchor tag can be placed around text to make the text a clickable link.







BEFORE making ANY changes to your blog, you should do a full backup. Smart and Trendy Moms is not responsible for any problems caused by your use any of our "how-tos" or any other information on our site.

Smart and Trendy Moms finds products, ideas, projects, recipies, and other information that we have personally found helpful or interesting.  As always, it is up to you to determine what is appropriate for you, your children, and your situation.  See our Disclaimer