EIW Fall 2000 Lecture Notes - HTML and Images

Images

You can include images in your HTML document using the IMG tag. The actual images themselves can be anywhere on the WWW, so your web page can include images that come from another site. The IMG tag has one required attribute - the SRC attribute specifies the URL that contains the image. Typically the URL will indicate a static file that contains either a GIF or JPG image (two standard file formats for images)

A simple example of an IMG tag and what this looks like when the browser renders it:

Here is my image: <IMG SRC=cookie.gif>

Here is my image:

There are a number of optional attributes to the IMG tag that can alter how the image is rendered by the browser, some are listed below.

IMG tag optional attributes:

ALT - used to specify some alternative text that the browser should display if the image is not available or the user has disabled loading of images. It is common to provide some kind of image description via an ALT attribute. The text specified as the value of the ALT attribute can be up to 1024 characters (but no more). Example:
Dave's Pictures: <IMG SRC=USA90.gif ALT="US World Cup 90 Soccer Team - Dave is third from the left">
rendered will look like this:

Dave's Pictures:
LONGDESC - Like ALT, but specified as a URL that refers to a description (of any length).
BORDER - You can put a border around an image by including a BORDER attribute in the IMG tag. The value of the BORDER attribute is the size of the border you want (in pixels). An example:
My favorite cookie: <IMG SRC=cookie.gif BORDER=10>
My favorite cookie:
Images that are links (you can click on the image) are drawn with a border by default - you can remove this border by saying BORDER=0. To create a clickable image just put the image tag between a <A> and </A>

HEIGHT and WIDTH attributes allow you to tell the browser how much space to use for an image. The browser will scale the image up or down to match the values of these attributes. Both the HEIGHT and WIDTH attribute values are integers that indicate a number of pixels. Example:

What size cookie do you want?
<UL>
  <LI>Small <IMG SRC=cookie.gif WIDTH=20 HEIGHT=20></LI>
  <LI>Medium <IMG SRC=cookie.gif WIDTH=100 HEIGHT=100></LI>
  <LI>Large <IMG SRC=cookie.gif WIDTH=200 HEIGHT=200></LI>
  <LI>X-Large <IMG SRC=cookie.gif WIDTH=400 HEIGHT=400></LI>
</UL>

Will look like this:

What size cookie do you want?

Small
Medium
Large
X-Large

ALIGN - you can control the alignment of images with the ALIGN attribute. The valid values include:

TOP - top of the image is aligned with the top of the current line of text.
MIDDLE - middle of the image is aligned with the text in the current line.
BOTTOM - bottom of the image is aligned with the bottom of text

The good old cookie staircase:
<IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=TOP>
<IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=MIDDLE>
<IMG SRC=cookie.gif HEIGHT=40 WIDTH=40 ALIGN=BOTTOM>

The good old cookie staircase:

LEFT and RIGHT allow you to tell the browser to put the image to the left or right of the text, and to wrap the text around the image. For example:

<P><IMG SRC=cookie.gif WIDTH=70 ALIGN=LEFT BORDER=1>
Left Cookie Left Cookie Left Cookie Left Cookie
Left Cookie Left Cookie Left Cookie Left Cookie
Left Cookie Left Cookie Left Cookie Left Cookie
Left Cookie Left Cookie Left Cookie Left Cookie
</P>

<HR> 

<P><IMG SRC=cookie.gif WIDTH=70 ALIGN=RIGHT BORDER=0>
Right Cookie Right Cookie Right Cookie Right Cookie
Right Cookie Right Cookie Right Cookie Right Cookie
Right Cookie Right Cookie Right Cookie Right Cookie
Right Cookie Right Cookie Right Cookie Right Cookie
</P>

<HR>

<P><IMG SRC=cookie.gif WIDTH=70 ALIGN=LEFT BORDER=0>
<IMG SRC=cookie.gif WIDTH=70 ALIGN=RIGHT BORDER=0>
Both Cookie Both Cookie Both Cookie Both Cookie
Both Cookie Both Cookie Both Cookie Both Cookie
Both Cookie Both Cookie Both Cookie Both Cookie
Both Cookie Both Cookie Both Cookie Both Cookie
</P>

Will look like this:

Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie Left Cookie

Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie Right Cookie

Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie Both Cookie

ISMAP - the ISMAP attribute tells the browser that the image is a clickable map. Maps are used on conjuction with a CGI program - we haven't talked about CGI yet, but the basic idea is that a program will be run on the server when the user clicks on the map, and the coordinates of the mouse in the image will be transmitted to the program (so it can decide what to do based on where you click).

When a user clicks on a map image that is within an A tag, the browser sends a request to the URL specified in the A tag and also sends a query string. (We haven't discussed query strings yet - this will come later also). The query string has the form x,y where x is the x coordinate of the mouse on the image when the user clicked, and y is the value of the y coordinate (both coordinates are in pixels). Here is an example, although the vote.cgi program does not exist, you can see what the query would be by looking at the bottom bar of your browser as you move the mouse over the image.
Vote for the best chip in my cookie: <A HREF=vote.cgi> <IMG SRC=cookie.gif ALIGN=center ISMAP> </A>
Vote for the best chip in my cookie:
NOTE: This kind of imagemap is call a "server-side" map, since the server (typically a CGI program) must determine what to do when the x,y coordinates of a user click are sent to a CGI program.

USEMAP - supports "client-side" image mapping, where the browser takes care of figuring out what URL to request based on where in an image a user clicks. The value of the USEMAP attribute is the URL of a map that is defined in the HTML document containing the image. A map is created with the HTML MAP tag, the following example is probably enough to get you started:

Vote for the best chip in my cookie: <IMG SRC=cookie.gif ALIGN=center USEMAP="#cookiemap"> <MAP name="cookiemap"> <AREA COORDS="22,38,41,59" HREF="vote.cgi?chip1"> <AREA COORDS="28,63,54,82" HREF="vote.cgi?chip2"> <AREA COORDS="55,59,88,70" HREF="vote.cgi?chip3"> </MAP>
Vote for the best chip in my cookie:

Image File Format: GIF vs. JPG

The two image file formats supported by most browsers are GIF and JPG (pronounced jaypeg, and there are differences you might want to be aware of.

	GIF	JPG
Max. # of colors	256	Tens of thousands
Compression	Lossless compression (doesn't compress much, but nothing is lost)	Great compression, but with some loss
Transparency	Yes	NO
Interlacing	Yes	NO
Animations	Yes	NO

Generally GIF format is used for icons, drawings and anything requiring animation. JPG is typically used for photographs.