Next, let's learn to put images in the web page. Two things you must check BEFORE placing an image in your web page:

  1. Make sure the image is saved in the same folder as the web page before you create the HTML tag; and
  2. Make sure the image name follows standard Internet filename rules (alphanumeric"alphanumeric" means a ~ z, and 0 ~ 9., lowercasethis text is lowercase, and THIS TEXT IS UPPERCASE, no spaces, symbolsFor example, &, %, #, €, $, etc., or punctuation except hyphen - or underscore _ )

If all os OK, then let's look at the image command. The command is simply <img>. However, like the FONT command, the IMG command does nothing by itself; it must have attributes.

The most important attribute is src="filename". This is necessary, telling the browser where to find the image. The most basic image command must have this:

<img src="myphoto.jpg">

That's the basic command.


Location Complications

If the image is located in another folder, then that must be reflected in the filename value. Let's say you have a folder inside your web site folder; the second folder is called "images." The command would then look like:

<img src="images/myphoto.jpg">

Note the "/" after the folder name. A "/" means that the previous name is a folder name.

If the image is in a folder "above" (or "outside") the folder with the web page, then you need to add "../" before the image name:

<img src="../myphoto.jpg">

"../" says to go "up" one folder.

However, it is best for now to simply put all your images in ONE folder, and avoid the troubles of more complex addresses.


You can modify an image with a variety of attributes:

Gives text which is displayed when the image cannot be seen. This text is also spoken by programs which read web pages to blind people.
Changes the height from the actual number of pixels to a number you set. If you do not set the "width," then the width automatically changes by the exact same percent to keep the picture balanced.
Like "height," but sets the width. Again, if you set only the width and not the height, the height changes in correct proportion.
Sets a solid color border of x pixels around the image. The color will either be the text color or black, depending on the browser.
"left", "right"
LEFT align will put the image on the left side of the area, and any text or other objects will WRAP around to the right.

RIGHT align will do the opposite, placing the image along the right side of the available area, with the text wrapping around to the left.

If you don't set any alignment, then the image will be "in" one line of text.
sets a margin on the left and right sides by x pixels.
sets a margin on the top and bottom sides by x pixels.

An example of an IMG command using all attributes:

<img src="myphoto.jpg" alt="my photo" align="right" height=320 width=480 border=1 hspace=6 vspace=4>


Notes on Images

File Types: Only three file types are usually allowed for web pages: GIF, JPG, and PNG. You should never use BMP, TIF, or PSD files--they are much too large.

Image Sizes: People with slow Internet connections can't wait around for huge images. Make sure that your images are 100 KB or less. Image size is also measured in pixels; even large images should not be bigger than 800 pixels wide. 400 pixels width is a medium-sized image, and 200 pixels wide is rather small.

Ownership: Technically, you should only use public-domain, open license, or private images which you own. However, most people use images they find on the Internet, without asking permission. It's not 100% OK, but it is widely practiced and most people accept it. In an academic web page, you should at least cite where you got the image. For this class, I do not require citation, but a link to the source would not be a bad idea. Images found on WikiPedia are often free for non-profit use.

Hotlinking: "Hotlinking" is when you put a full web URL in the "src" attribute instead of linking to an image in your web site folder. Hotlinking is considered bad netiquette, worse than "stealing" an image. Please do not do this in this class.


Live HTML Exercise

Use the image command and all of its attributes in the exercise window below. Use the following image file names (I have included them in this site so they will appear when you call them): shiba.jpg, luis.jpg, sachi.jpg.



Video Review