Image in HTML

Adding an image to your page is relatively easy. First you tell the browser there will be an image. You then explain where the image is located. Finally, attributes such as alignment and borders can be assigned.


The basic tag looks like this:



"img SRC=url "



The img explains that this tag will call up an image. SRC defines the source -- or location -- of the image. The location is placed between quotes and should include the exact path of the image. For example, if the file you are working on is located in the main (or root) directory, and the image you want is in a folder called images, the SRC would equal "images/filename.gif."


Tip: The organization of your website is important. Create separate folders for each section as well as one for your graphics.


Let's say you have a site devoted to TechTV. Each show would have its own folder and you would most likely have an images folder as well.


Picture the letter Y. The bottom of the Y is the root directory and each arm represents a folder. One arm is the Call for Help folder and the other is the image folder. In order to reference an image from the Call for Help arm, you have to come down to the stem of the Y before you can reach the other arm. Likewise, you need to come out of the folder you are in to go into the folder you want.


The html code must reflect this. In order to reference that folder, you precede the folder and file name you are looking for with a ../. Each layer of folders can be accessed with an additional ../, so if you have to go up two directories, your code would look like this:



"IMG SRC="../../images/filename.gif"



An alternate method to reference this image would be to include the entire URL:



"IMG SRC="http://www.yoursite.com/images/filename.gif"


From TechTV