blinking bear

Links, and Graphics

In this class, you will use PaintShop Pro to view and edit gif images, including finding image dimensions and setting a transparent color, and use Animation Shop to edit an animated gif image.

This page has additional information on how to:

  • Create several types of hypertext links
  • Understand when various link types are appropriate
  • Include graphics in an HTML page
  • Decide which type of graphic is best suited to a particular need
  • Edit graphics for best appearance
  • Position graphics in relation to text
  • Understand Graphic Transparency
  • Understand Graphic Animation (GIF89a)

Link links

Graphics links

Anchors

All links are anchored at both ends.

Anchors can contain (among other things:
  • the hypertext reference (HREF) that tells the browser where to link to
  • the NAME of the destination, (or both)
  • or another form of identifying the outcome of clicking on a link

Anything between the opening and closing anchor tags (<A> and </A>) of an anchor link will be the "clickable" item.

Here's what a link to the SDRC home page looks like:
- in a text editor:
   <a href="http://www.sdrc.com/"> SDRC</a>
- in the browser:
   SDRC

You can link

  • within the page
  • to another file in the same location
  • to a file at another location
  • to a specific part of another file

Names

Just a spot in a page that has been given a name in an anchor so you can link to it. Look at the source for this item as an example.

Remote Links

Any link to another URL. This is why they call it the World Wide Web.

Absolute vs. Relative

Link to another part of the page, or another page in the same directory? You're probably safe with a relative link (yes, there are exceptions to this).
Link to another location? You need an absolute link.

Mail To Links

Let the browser take care of it.

Graphic Links

Wrap an anchor around the image.

File and Protocol Links

Again, let the browser do it.

Using Graphics

Graphic images can spice up a web page, but please NEVER FORGET that there will ALWAYS be people looking at your page with older browsers that don't support graphics, or with newer browsers with graphics turned off to save loading time on a slow modem connection.
Bottom line: always use the ALT tag.

Graphic Type

Which type of graphic works best?

In general (and this is really general), use JPG for images with a "photographic" quality, and GIF for those with large areas of single colors.
There are some important exceptions to this rule of thumb. Can you think of some?

Graphic Size

Basic rule of thumb: as small as possible.

What does that mean?

  1. Most importantly, file size. Consider things like whether you might be better off using a JPEG at high compression than a GIF, regardless of what we just said in the last section.
  2. Physical size should be reduced to the smallest dimensions that look good.
  3. Crop your images to only the most essential components; don't leave in lots of background that doesn't communicate anything.

Placing Graphics Near Text

For some reason, beginners seem to have a lot of trouble with this. It's really not difficult, but you have to understand what the alignment options mean.

That certain smileGraphic aligned to top (of tallest item on the line). Notice how it's related to the text it's associated with. That certain smileGraphic aligned to bottom (bottom of image and baseline of current line). Notice how it's related to the text it's associated with.
That certain smileGraphic aligned to middle (middle of graphic aligned with baseline of current line). Notice how it's related to the text it's associated with. That certain smileGraphic aligned to absmiddle (middle of image and middle of current line). Notice how it's related to the text it's associated with. Is there a difference between this and middle?
That certain smileGraphic aligned to left (image at left margin, subsequent text wraps around right side of the image). Notice how it's related to the text it's associated with. That certain smileGraphic aligned to right (image at right margin, subsequent text wraps around left side of the image). Notice how it's related to the text it's associated with.
That certain smileGraphic aligned to texttop (same as top). Notice how it's related to the text it's associated with. That certain smileGraphic aligned to baseline (same as bottom). Notice how it's related to the text it's associated with.
That certain smileGraphic aligned to absbottom (bottom of image and bottom of current line. Notice how it's related to the text it's associated with. Can you figure out how this is different from baseline or bottom? That certain smileGraphic not aligned at all. Notice how it's related to the text it's associated with.

Graphic Transparency

You have transparency when you look at a graphic and see the background page showing around or through 'holes' in the otherwise rectangular image. Here, you are actually 'seeing' the 'blank' space has been set to "transparent."

There are a couple of methods for making a transparent GIF. In class, we'll take a graphic and use the Graphics Converter program to pick a color from the palette to set as transparent.

Animated Graphics

An animated GIF is a series of images (CELS) 'compiled' together into a single file.

To make animated GIFs you need:

  1. a paint program that saves to GIF format
  2. a program to compile the GIF images into a single animated GIF
There are several things to keep in mind before you get started...
  • A GIF animation that is too large will display as a slow running slideshow (which may be something usable in itself). For best results in achieving a true 'animated' effect, keep the image small.
  • GIF is a 256 color or less format. While the programs used to compile the animation will most likely have the ability to reduce the images to a common 256 color palette, if you plan ahead and start with and stick to a 256 color palette, your results will be much better.
  • As you create the images you will find it easier to remember (when it comes time to compile) if you give the images file names in numerical order. Such as image01.gif, image02.gif, image03.gif, etc.
So, the process is:
  1. create your starting image
  2. save the image keeping the numerical order
  3. duplicate the image, make a small change
  4. save the image keeping the numerical order
Here's a cool animated GIF link: http://www.agag.com/index.html

Image Maps

Although server-side image maps are useful, we'll concentrate on client-side image maps because of their ease and speed.

An image map allows you to select different portions of a graphic to call links to other pages.

Here's all you need to create a client-side image map:

  1. an appropriate graphic (here's one you can use for a simple example)
    Sample image map graphic
  2. a "usemap" attribute inside the IMG tag
  3. a separate "map" tag in the document
  4. one or more "area" tags inside the map tag Yellow Area Blue Area Green Area

A Closer Look

  1. The graphic - remember that file size can be an issue for this example, mapsample.gif
  2. USEMAP attribute names the MAP tag that the image map should use.

    <IMG SRC="mapsample.gif" ALT="Sample image map graphic" ALIGN=TOP WIDTH="100" HEIGHT="100" USEMAP="#twe5035map" BORDER="0">

  3. MAP tag
  4. AREA tags within the MAP tag

    <MAP NAME="twe5035map">
    <AREA SHAPE="RECT" COORDS="10,14,41,43" HREF="yellow.html">
    <AREA SHAPE="RECT" COORDS="50,16,95,35" HREF="blue.html">
    <AREA SHAPE="CIRCLE" COORDS="66,57,17" HREF="green.html">
    </MAP>

Extra (optional) information:

It's not essential for this class, but you're not restricted to just rectangles and circles in an image map. You can draw map "hot spots" of practically any shape.

For an example of how to do that, take a look at this file.

Hands-on Quiz - for 3 points... by the end of class...

  1. Make sure you have local copies of your web pages from last week in a working directory on your computer.
  2. Start your text editor and load the local copy of your index.html web page from last week.
  3. Capture and save the animated graphic blink3.gif (below) in your working directory on your computer.
  4. Link the blink3.gif file into one of your pages.
  5. Use Netscape or IE to see if the links work.
  6. Upload the pages and the graphic to your server account.
  7. Use Netscape and IE to and check to be sure the links work on the server.
  8. Get Ray to check off that you got this done.
  9. 1 Extra Credit Point: Add the picture2.gif (below) graphic to one of your pages, and use the Graphics Converter program (on the Macs) or PaintShop or PhotoShop (on the PCs) to set the teal background of the image to be transparent.
blinking bear
blink3.gif
guitar
picture2.gif


 
to Syllabus