HTML Code

<HTML>
<HEAD>
<TITLE>Writing Workshop II Home Page</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="illus1.gif" WIDTH=274 HEIGHT=205 BORDER=0 ALT="scriptor">
<H1>Writing Workshop II</H1>
Y20.7503.01/.04 / Spring 1996
<P>
<B>Anne B. Keating, Ph.D.</B><BR>
<I>Liberal Arts Degree Program - School of Continuing Education<BR>
New York University </I>
</CENTER>
</BODY>
</HTML>

Step 4
Explanation: Adding an Image

Images can make your Web page more interesting and, in many cases, more informative. Scanning, manipulating and saving images will be covered in greater depth in chapter 5. For now, we focus on simply adding an image to your page. There is only one tag you will need to know for this--the <IMG> tag. It is an "empty" tag, like <P> and <BR>, and therefore requires no ending tag. However, the <IMG> tag has several attributes that are important to know.

As mentioned previously, tag attributes allow you to provide additional information about the page element that the tag is describing and are enclosed within the brackets that surround the opening tag. In addition, most attributes have values, which are usually surrounded by double quotation marks. For example, in <IMG SRC="picture.gif">, IMG is the tag, SRC is the attribute, and picture.gif is the value of the attribute. This tag instructs the browser to display an image file called picture.gif. Some <IMG> attributes that are good to know are:

  1. SRC, which is the only required attribute. It identifies the image "source" file and is always set to the URL or filename of the image you would like to display.
  2. ALT, which allows you to display text in place of an image when someone looking at your page has turned off "image loading" within his or her browser or is using a text-based browser such as Lynx. While it is not required, it is a good habit to provide alternate text for all your images, particularly if they are buttons that link to other pages or sites. In addition, some of the latest browsers actually display the alternate text when you pass your mouse over an image, which can be a nice feature of your Web page.
  3. ALIGN, which allows you to define how an image should align with your text. It can be set to LEFT, RIGHT, TOP, MIDDLE or BOTTOM, the default value.
  4. BORDER, which allows you to specify a width for a border that will appear around an image if it is a "clickable" image. In HTML, widths, heights and sizes are always expressed in number of pixels. While this may be an unfamiliar measuring unit to you at first, with a little experience and experimentation you will soon get a good feel for setting pixel values. In most cases, you can set this value to "0" for no border to appear at all.
  5. WIDTH and HEIGHT. These attributes may be used to specify the exact size of your image and, like the border attribute, are expressed in pixels. The advantage of using image height and width is that it may decrease the load time of your page, because the browser knows exactly what size image to expect, as opposed to determining the image size before rendering the page. It is not advisable to modify image size in your HTML file by using the height and width attributes. For best results, images should only be resized in an image editing program. The height and width attributes in your HTML file should reflect the exact size of your image.
back view page