Introduction

One aspect of HTML that makes it a versatile Web authoring tool is that you can use it to insert images into your Web page.  This is performed with the <IMG> tag. Note that this tag does not have a closing portion.  Therefore, </IMG> does not need to be inserted after <IMG>.  The following is a list of some of the attributes you can use with the <IMG> tag:

• SRC specifies the location of the image you want to insert into your Web page.
• HEIGHT specifies the height of the image.  This value must be given in pixels.       
• WIDTH specifies the width of the image. This value must be given in pixels.
• ALIGN specifies where you want the image to be lined up relative to any text or images in line with the image.  Here are some possible values of the ALIGN attribute:

• BORDER specifies a pixel value for the size of the border surrounding the image. Entering a value of "0" signifies no border around the image.
• ALT specifies a box of text to appear when a mouse pointer moves over the image.
• VSPACE specifies a pixel value for the amount of space both above and below the image.
• HSPACE specifies a pixel value for the amount of space to the left and right of an image.

HTML Source Code Example

Below is an example of some HTML source code that shows how to use some of the image attributes.

Figure 1. Source code #1

Figure 2 shows how source code #1 looks when viewed with a Web browser.  Notice that the image has a beige-colored text box with the phrase “Texas Aggies” inside it.  This is a result of inserting the text “Texas Aggies” into the ALT attribute of the <IMG> tag, and then moving the mouse pointer over the image referred to in the <IMG> tag.  This is useful if you want to have a description of an image appear when a person moves the mouse pointer over the image.

Figure 2. Source code #1 viewed on a Web browser

The value of the SRC attribute must be given as a directory location. If the image is in the same folder as the HTML document, no directories need to be specified. However, if the image is stored in a different folder, the directory location for the image must be specified.

If you have an image named pic.jpg in the C:/myfiles/pictures/ folder, and you want to insert it into an HTML file stored in C:/myfiles/web/, then your SRC attribute needs to look like this:

                <IMG SRC="C:/myfiles/pictures/pic.jpg">

C:/myfiles/pictures/pic.jpg is the absolute path of the file "pic.jpg". The picture can also be referred to using a relative path:

                <IMG SRC="../pictures/pic.jpg">

If the Web browser is currently displaying a Web page named C:/myfiles/web/index.html, and you wish to insert "pic.jpg" from the directory C:/myfiles/pictures, then you would use the relative path ../pictures/pic.jpg to refer to the picture.

In any case, you would not be able to use the following to refer to "pic.jpg":

                <IMG SRC="pic.jpg">

If the second option is used, the browser will look for "pic.jpg" only in the same directory where the HTML document is. If it cannot locate the picture, errors will result when your Web page is viewed through the browser.

If you would like to learn more about HTML, look at the other handouts in this series:

• Part 1, HTML Basics
• Part 2, Formatting Text
• Part 3, HTML and Images
• Part 4, Using HTML to Create Lists
• Part 5, Creating Links Using HTML
• Part 6, HTML and Tables
• Part 7, Web Directories and FTP Procedures

For More Help

If you need more assistance, please feel free to ask the CIS Support Staff in any Open Access Lab, or call Help Desk Central at (979) 845-8300.