How to Post an Image With HTML

Posted by Anonymous , 9/5/2007 Tags:PostImageWithHTML
Post By :
Anonymous
Rate:
Vote

How to Post an Image With HTML

Introduction

So you want to insert a graphic into your web page? HTML contains a <imgsrc> 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

Difficulty: Moderate

Steps

1

Step One

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

Step Two

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

Step Three

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 <imgsrc> command.
4

Step Four

Now type in the following: imgsrc=.
5

Step Five

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

Step Six

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

Step Seven

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.
Tools: |