Images are what make the web
the success that it is.

IMG Tag and SRC Attribute

To add an image to a page, use the IMG (image) tag with the mandatory SRC (source) attribute and a "value" (which is the image file's address). The IMG tag has no closing tag. Example:

<IMG SRC="http://dvaughan.bol.ucla.edu/a_html/C_images/images/earthMoon.jpg">

You need to supply the URL of the image. URL stands for Uniform Resource Locator. It means the Web address of the file. There are two types of URLs: absolute and relative. The above example is an absolute URL because it will work in any html file you put it in (as long as the image file remains where it is, of course).

The image below uses a local path, which is also called a relative address. Check the code for the IMG tag and SRC attribute for the following image. It is clearly marked in the code with a comment tag. This type of URL address will work only if the RELATIVE relationship of the HTML file to the image file is accurately indicated. Following is a further explanation.

Absolute URLs

Absolute URLs are what we're all used to seeing in the address bar of a browser. It usually starts with: http://www. For example, here is an image tag with a source attribute that uses an absolute URL for displaying an image:

<IMG SRC="http://dvaughan.bol.ucla.edu/a_html/C_images/images/earthMoon.jpg">

I have made a link using the above absolute URL source attribute to the image file at a remote server . Look at the code for it (it is also clearly marked with a comment tag). Regardless of what html file you put an absolute URL into and regardless of where that html file gets located, it can find the and display the image file as long as the image file stays put where it is.

Relative URLs

(Site file structure diagram) Relative URLs don't do the same thing. Instead, they tell the browser what file path to take to find the image relative to the position of the html file that the link is in. For example, a relative URL would look like this:

<IMG SRC="images/earthMoon.jpg">

What the above relative address tells the browser to do to find the image file is something like this:

Look for a folder named "images" in the same folder you're in. Look inside that folder. You should see a file in it called "earthMoon.jpg". Open that file and display it in the browser.

Click here to see the same image you looked at before, except this time it is a relative link to a so-called local image file. Look at the source code for the link. Do you notice any difference? Top

Which to Use

The answer to this depends on the situation. If you have a file with an image, and you will be keeping that file in the same folder structure as the html file when you upload it, then relative is the way to go. If you don't know where your html file will end up, use absolute. Keep in mind that an absolute URL makes the server work harder to find the file, slowing things down a bit.

Your assignment:

1. If you have not done so already, download the image files that you will need following the instructions in A04_saveFiles1.html.
2. Now create a very simple html document from scratch using Notepad. Name it: C04_yourlastname.html
   • Important note: you must include the basic file structure tags in addition to the image tags. This means including the html, head, title and body tags.
   • If you don't know what I am referring to:
     • I suggest that you copy the code in the browser window of exercise A02 (Week 1), about 3/4 the way down the page where there is an example of basic html page structure.
     • But be sure NOT to use the actual code for that file as it contains "special characters". Instead, use the text that appears in the browser window as the basis for the page you will build.
3. Save it in the same folder you've been saving your other html files in: exercises.
4. Use an image tag to put the image file of the earth that you just downloaded into your new html file. Use this as the value of the img tags src attribute (the image ought to appear if this is done correctly):
           src="images/earthMoon.jpg"
5. Save the file and check it in your browser.
• Note: You will have inserted an image but not a location for it, therefore it will appear in the upper left corner of your browser by default.
6. Online students: send your file to me by email.

Top

© 2008 Dan Vaughan and its licensors. All rights reserved.