How to Post an Image With HTML

So you want to insert a graphic into your web page? HTML contains a command that lets you load your picture directly into the page. This basic HTML command is the easiest way to get your picture online and is usually accurate.

Instructions

1. Edit your picture with image editors until it is ready to go online in its current form.

2. Save your picture. Web page protocol admits different kinds of file types including .jpg, .gif and .bmp.

3. Go into your web page code. Locate where you want the picture to appear in between text or line breaks. Find the coding point that represents where that picture will appear. This is where you will add your command.

4. Now type in the following: imgsrc=.

5. Now open the file that your picture is in to find the directory path that you need to use to let the browser find your image. For example, if your picture is in a folder called 'beetles' that nests in your 'my documents' folder, edit your command to say: imgsrc=/mydocuments/beetles/.

6. Add the file name. If the file in the folder is called foo.jpg then your command would look like this: imgsrc=/mydocuments/beetles/foo.jpg. Remember to bracket the command with the appropriate < and >.

7. View your page. Your picture should pop up in the place where you coded it.

Tips & Warnings

• If it doesn't look right, or if the picture is missing entirely, the syntax is wrong. A good place to start looking for errors is in your directory path. If that's not written just exactly right, the browser won't find your picture, and if you move the picture later, you must go back and re-code your page.

• Don't assume the image will be perfectly placed. The biggest inhibitor of correct image placement is tables and parallel structures that bump a picture onto a new line and mess up the flow of the text around it.

Resources

• HTML resources.
• More HTML information.