Web Graphics

Web Graphics

An Overview

Images and hyperlinks are the two features which most differentiate your printed syllabi from your electronic syllabi. Images of photographic quality can add content, interest, and a means of navigating to a webpage. Their judicious use is a hallmark of a successful webpage.

Horizontal Rules

Horizontal rules are used to designate breaks in the flow of information. They can be entered with the <HR> tag or by inserting a graphic. If the <HR> tag is used it takes a width attribute, a height attribute, and a color attribute. Right-click on the rule and choose properties to set these attributes. The attributes include width, height, alignment, and color.

The horizontal rule above was entered with the following HTML tag:

Image Formats

At present the web limits the kinds of images we can insert in our pages to just two types, the graphics image format (.gif) and the joint photographic project format (.jpg). Each format has its advantages and disadvantages. In general, .jpgs are best suited to displaying images with numerous colors and continuos tone (like a photograph) and .gifs are best suited to displaying simpler images, with fewer colors, or images that need some of a .gifs special capabilities (like transparency or interlacing).

The Image Tag

The HTML image tag is used to insert an image in a web page. It can can be used to specify either a .jpg or .gif image to display and is created when you choose "Insert Image" within the editor. At a minimum the IMG tag must specify an image source using the SRC attribute. For example:

When linking an image within your webpage keep the following items in mind. First, the image must accompany you webpage when it is placed on the CTC's webserver in Hartford and it must be placed in the same relative position to your webpage as it was when you originally linked it (the simplest practice is to keep all your files and images in the same directory). Lastly, remember that graphics, especially large graphics, take a considerable time to load and that many of your students will be accessing your pages from home where the relatively slow download speeds will greatly exasperate the loading problem. Keep you images as small and simple as possible and use them only when they add something to either the content or navigation of your pages.

Image Attributes

The IMG tag has numerous optional attributes. These can be accessed in an editor usually by right-clicking on the image and selecting Properties. The most useful of these attributes are width and height, an alternative text string to display in browsers that are text based (alt=" "), an alignment attribute (align="middle"), and a border width attribute (border=" "). An example:

Page Backgrounds

Page backgrounds make special use of either a .gif or a .jpg to display an image behind the contents of our webpages. The images can be displayed so that they scroll with our page (the default) or to remain stationary as the image is scrolled (a watermark). The background file can be quite small as the browser will tile, or repeat, the image to fill the page. With a little ingenuity, this tiling of the image can be used to creating interesting special effects. For example click on the image below to see how such an image when applied as a background is tiled seamlessly.

Note that the original image (available below) is considerably wider (800 pixels wide by 200 pixels high) than the image above but consists of only white space. This forces the image to be repeated in the browser one copy above the other rather than side to side.

Animated and Transparent GIF's

Linking an Image

Before adding an image to your webpage you'll want to download a copy on the image into your syllabi folder. Although images can easily by linked from other folders relative to the location of yours you pages will be easier to create and maintain if you group your images with your html files. This will also make your webpages more portable, allowing you to carry a copy of your work around on floppy. If you would like to create a little more organization to your files, create an images folder within you class folder and store your images there.

To download any image from the web (a great source for free graphics) simply right-click on the image and select "Save Picture As" from the popup menu. Give the picture a new name or accept the current name in the dialog box that pops up, and be sure to specify that the image should be saved in the proper folder.

An image link to a file in the same directory as your webpages would look like:

If you've created an images folder within your class folder the link would look like:

Many of the images I've included in the college's webpages are stored in a single folder (images/) since they are used throughout the site. This folder also contains a backgrounds folder (images/backgrounds/) which contain many of the background images used throughout the site.

Two very important notes. First, although the case (uppercase, lowercase) of the name of your image does not matter to Windows it does matter to Linux (which is the operating system which runs the webserver in Hartford). What this means to you is that when you graphics are copied to Hartford the operating system will change all the filenames to lowercase by default. If the links in your webpages include links to files with a mixture of case (i.e. A_up.gif rather than a_up.gif) the link will fail with a 'file not found' message. To avoid this problem make sure that you change the case of the names of all your images to lowercase BEFORE inserting them into your pages. Secondly, note that when specifying directories or files in a webpage the forward slash ( / ) is used rather than the DOS backslash ( \ ). This is a result of the UNIX roots of the world wide web.

Sample Graphics