Images

Image Tag

Most web pages are filled with images. Images, or graphical components, are used to display pictures and photos, drawings and diagrams, and many other page elements that are not considered text. Many menus, borders and page divisions consist of one or more images. For example, the blue heading around this page is actually made up of two different images.

How many images are used on the main Nicaragua Christian Academy web page? Each menu item on the left is an image. The logo is an image. The blue bar at the top with the yellow lettering is an image. And inside the document, two more images are used. Can you count 22 different images?

The images used on web pages are not stored within the page itself. Instead, your code simply tells the computer where the picture file can be found and the web browser loads the images separately. The two most common types of image files are JPEG and GIF formats, which are supported by most browsers.

Syntax:

<img src="source" alt="text">The source is the location of the image (file name), and the alternate text describes the image (for mouse hover).

The alt property must always be specified. It allows users to read a caption for the image by hovering the mouse over the picture. It also allows blind people to have the picture briefly described to them. (Yes, the web can be surfed by the blind!) And even if for some reason the picture cannot be loaded, the user can still have an idea of what they are missing.

Example 1 
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <p>This is a picture of a cow.</p>
    <img src="cow.gif" alt="Picture of cow">
</body>
</html>

Note that for Example 1 to work, there must be a file named cow.gif saved in the same folder as your web page.

Practice:

  1. Open Notepad and create a file in your practice folder called cowpage.html.
  2. Open this cow picture and save it in your practice folder: cow.gif.
  3. Use Example 1 as a model to make a simple web page with an image of a cow.
  4. Save the modified file and view it in Internet Explorer.

Specifying Image Options

The <img> tag has several options that you may find useful:

  • width – width of image, in pixels
  • height – height of image, in pixels
  • align – image alignment (“top”, “middle”, “bottom”, “left”, “right”)
  • border – border width, in pixels
  • hspace – horizontal text margin from picture, in pixels
  • vspace – vertical text margin from picture, in pixels

The align property is used for text wrapping, or allowing text to flow around an image. If it is not specified, the image will be in line with the text and probably cause a large rift in the usable portion of the page.

If the image contains align="right", the image will be placed on the right boundary of the page and text will wrap around the left side of the image. Conversely, align="left" will allow text to wrap around the right side of the image.

Practice:

  1. Open the source code for cowpage.html.
  2. Set the width and height properties and refresh the page to see the effects.
  3. Try each of the potential values for the align property and observe the results.
  4. Try several different border widths.
  5. Set up the page in a way that allows you to see the effects of changing hspace and vspace.

Resizing Images

Changing the dimensions of an image with the width and height properties of an image is not usually recommended. Browsers typically do a very poor job of resizing images without losing a lot of quality in the image. If you need a smaller image, it would be better for you to use an image editor to resize the image file before including it in your web page.

It is common practice to specify the actual width and height properties of an image so that even before the image has loaded in the browser, a space with the correct dimensions is reserved for it and the page does not get rearranged as it is loading.

Clear Line Break

When text wrapping occurs around pictures, it is sometimes necessary to use a special break to continue text below the picture that makes use of text wrapping. To do this, use the following code.

Syntax:

<br clear="direction">direction – direction where any pictures must be passed (“left”, “right”)