Math on the Web: HTML Lesson 3:


Goals to accomplish during this lesson

  1. Increase your familiarity with HTML
  2. Learn more about hyperlinks

In-class activities

Refine the image tag

In class 5 we used the in-line image tag <IMG> along with the source attribute, SRC, with value given by the URL of an image file. There are some nine other, universally supported (in HTML 3.2), attributes for the image tag, plus a similar number of attributes that are recognized either by Netscape browsers or by Internet Explorer.

As it stands, our use of the image tag will not pass muster if we submit our HTML to the W3C HTML validator because we left out an important piece of the inline image tag (the <IMG> tag), namely, the ALT attribute. ALT is used to specify alternative text that the browser can show if for some reason the image cannot be displayed (for instance, if image display has been disabled by the user in order to speed downloads on a slow connection, or the user has impaired vision and is therefore using a text-based reading machine to browse by listening). The ALT attribute also allows text-based indexing robots to record information about images in your document.

There is an excellent discussion of the ALT attribute for the IMG tag in an article at HTML help by the Web Design Group.

The ALT attribute (or "tag") goes into the <IMG> tag as follows: <IMG SRC="source of image" ALT="some text" >.

Let's take care of the Rutgers Info Header image on your very basic homepage. Please provide an alt attribute, such as alt="Rutgers Info Header", inside the image tag that you used for your sample web-page last time. Then try out the W3C HTML validator (enter the URL of your sample Web page on the form that comes up).

For images that are purely decorative, there is no reason to provide text, but the ALT image tag would still be needed. In this case, use the attribute ALT="" for that image.

Perhaps the best advice on using the ALT attribute is to think about trying to read the page to somebody who is unable to see it. You surely would skip some of the less important images, but if an image played an important role on the page, you would want to describe its function (what sort of information is conveyed, how it is related to other material on the page) and, perhaps, to indicate something more specific, so that the listener would grasp the idea conveyed by the image.

You can read in Musciano and Kennedy about the uses of the align attribute, which can be used to place the image on the screen and to control the flow of text around it. If you want to center the image, you can do it by putting the image in a centered paragraph by adding the attribute center to the <p align=center> </p> or in the (obsolescent) container <center> </center>.

Linking to local files

In general, a URL (Uniform Resource Locator) has the form protocol://machine-name/path. The path should end with a slash / if it is a directory, but it should not end with a slash if it is an ordinary file. Here are some examples:

  1. http://crab.rutgers.edu/~karel/ (protocol=http; this points to a directory)
  2. http://www.rutgers.edu/images/header.gif (protocol=http)
  3. http:header.gif (a relative URL: it works if the browser is pointed at //www.rutgers.edu/images/ already)
  4. ftp://ftp.cdrom.com/pub/ (protocol=ftp)

You can form hyperlinks to files that are in your own directories by using either an absolute or a relative URL.

One useful link for those of us who would like to use our clam bookmark files while browsing the Web from the SGI machines in Fine Arts 240 would be a link to a copy of our bookmark file. Here are the steps you could take to set up a link on your sample Web page to a copy of your bookmark file.

  1. Secure Shell to your clam account and make sure that you are at your home directory
  2. Enter cp .netscape/bookmarks.html html/
  3. Enter cd html
  4. Enter chmod go+r bookmarks.html
  5. Open index.html in an editor and insert somewhere the anchor <a href="bookmarks.html">Bookmarks as of February 16, 1999</a> , (use today's date, whatever it is.)

You should now have a link to a copy of your bookmarks. Of course, if you prefer, you can do without the link in your sample Web page because you can use your clam bookmarks from any machine anywhere by entering the URL:http://clam.rutgers.edu/~your-user-id/bookmarks.html.

This sort of link to your bookmark file does have a downside: when you save some bookmarks they will not appear in your file html/bookmarks.html. That means that you would have to copy your modified bookmarks file .netscape/bookmarks.html to your public directory html/. You might ask whether there is any way of providing a link directly to your bookmarks file, .netscape/bookmarks. We will return to this topic in class 10 and will look at a better way of linking to your bookmarks file.

Reading to do as Homework


/ Home / Contents /


email to: Martin L. Karel