How to Place Pictures in HTML Code

Image placement in HTML is kind of straightforward, but it can still be a challenge. The command itself is always the same, but the computer still has to "find" the images for uploading based on a map that you program in, and so there are often problems with adding images. Here's how to add and troubleshoot.

Instructions

1. Find the place to add your image command. Since HTML is linear, you'll want to find the specific code entry point in between other HTML "command line" coding for text or alignment. You can also use languages like CSS to deal with your HTML and get images where you want them to be.

2. Use an HTML image command. The format is like this: img src=x with x being the rest of the command.

3. Put your directory and file name inside quotation marks. For a total command of an image named "foo," the command would be: img src="foo"

4. Add your folder map into your command. For an image file named foo.gif located off of the desktop in a folder called "pics," the command would look like this: img src="pics/foo.gif"

5. Do a page preview. Your image should pop up in your web page.

Tips & Warnings

• If your image doesn't load correctly, the computer probably doesn't recognize the folder map you set up. Having your images in a hard to reach folder compounds the problem. To optimize adding images, keep all of your images in a folder directly attached to the web page source code so that you don't have to add a directory map to the HTML command. If you're seeing images fail to load, move them and try again.