Login    New User    Forgot Password    Help      

Introduction to Images

GO TO INDEX

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

HTML Code

<img src="html/images/mypic.gif" >

Output

Now, there are a few possible reasons why the browser cannot find the image. You might have one problem going on, or all of them. Let's go through the following exercises to see if maybe we can narrow down the problem.

First, try putting the image in the same folder as your html document...

src="mypic.gif" means that the image is in the same folder as the html document that called for it.

t's very common to place images in a folder other than where your html doc resides. It's all fine and dandy, but just keep in mind that you must tell the browser exactly where to find the image. One little mistake.... and image doesn't show up.

Very possibly the cause of your missing image is an improper relative src.

Study the following until you understand how to construct a proper src. I understand it can be confusing... but when you have things in different folders, this is just something you'll have to learn.

src="images/mypic.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.

src="../mypic.gif" means that the image is in one folder up from the html document that called for it.

src="../../mypic.gif" means that the image is two folders up from the html document that called for it.

src="../images/mypic.gif" means that the image is one folder up and then another folder down in the images directory.

src="../../../other/images/mypic.gif" I'm not even going to try and put this into words. I hope you get the drift.

Note that ../ means to go up a folder, ../../ means to go up two folders, etc.

Also note that in urls, forward slashes are used --> /
rather than a backward slash --> \

 

GO TO INDEX