How To Position Images
When Added To A Webpage

Through ALOT of trial and error, I finally figured out how to position images correctly in all of the most important situations. Now I share the exact code with you.

First let's talk about what makes up a standard html src image call (src stands for source). In order to properly display an image on your webpage you need to use the following syntax:

 <img src="url" /> 

The URL points to the location where the image is stored. In the diagram below, the image called "drop-shadow.jpg" is stored in a directory called "images" on "www.free-website-tutorials.com."

In addition to simply displaying them, you will most likely want to position images and add other features like an alt tag and possibly a border. In order to do that you need to add values to the html src code.

The image values (red in the diagram below) that you will use most often when you add and position images are:

• Align
• Border
• Hspace
• Vspace
• Alt
• Height
• Weight

HTML Src Diagram Showing Most Common Image Values

The image tag you see in the diagram is the code that I used to display the diagram itself. The only thing I changed is that I aligned center.

I have gotten in the habit of using this exact code each time I want to add and position images changing it as needed. Sometimes I use all the html src image values and other times I just leave them set to "0" so that if I need them, they are there. I suggest you do the same.

Step 1: Copy Code Below and Paste into HTML Document

Step 2: Update Code To Display and Position Images

After you copy and paste the above code into your HTML document where you want the image displayed, it is time to update the code. More than likely you will only have to update the server and directory (http://www.free-website-tutorials.com/images) the first time you use this code.

For the other values, ALWAYS update:

• Image Name--ends in .jpg or .gif or .png
• Alt Tag--use a keyword-rich image description to help Search Engines find your site. I get a huge number of visitors because I faithfully use well defined alt tags.
• Height and Width--I adjust these in Photoshop before I upload my images to the server. Then it's just a matter of updating these values to match Photoshop. Trying to adjust these in your HTML document instead of your photo editor is hard to do accurately as they have to be adjusted proportionately (if you update height by 25 px you must do the same to width. Even so, you may not get the desired effect).
  
  Learn how to size images here. Find detailed instructions with HTML code plus a video showing how to size images in Photoshop and Picnik.

Update these as needed to display and position images:

• Align--use to position images left, right or center
• Border--thickness is defined in pixels; 0 = no border. Color is usually defined by names, like red or gray (click here for a full list of browser-friendly color names. Type is usually solid or dotted.
• Hspace--controls space around image. Always use to keep text from getting too close to your images. 10 or 15 should do it.
• Vspace--use to position images vertically. I use when I have more text than the height of the image that I'm lining up next to it. See example here. In this example, I used an Hspace of 15 and a Vspace of 15.

How To Position Images in Specific Situations

The basic image HTML code above will definitely display an image on your webpage, but what if you have a special image positioning situation like wanting to line up your image next to a Google ad?

The situations listed below are ones that I struggled with when I first got started. I am sure there is more than one way to accomplish these things, but I have found code that works for me to position images and I'm sticking with it.

Feel free to copy and paste the code from the 3rd column and then update it for your own images.