So, you want to make a Web Page! Lesson 7 |

Before we go on, we need to go over something. When you include images on your page, remember that they contain alot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For example:

Dimensions 310 x 304 # of colors- 238 Size - 69 Kb
Dimensions 207 x 203 # of colors- 238 Size- 34 Kb | Dimensions 207 x 203 # of colors- 48 Size - 19 Kb

All image editing was done with Paint Shop Pro.
(An older, non time limited version is available here. Even though it's older and not as fancy
as the latest version, it is a GREAT graphics editor - PERFECT for new web authors.)

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load, your visitors will probably leave and they won't see anything.

Just to see how much images can be reduced, try the GIF Optimizer below. You send it your image, and it comes back progressively more "optimized". Note that the GIF Optimizer is not actually a part of this tutorial. It is a program that resides on another computer. This is just an interface and you must be online to use it.

GIF Optimizer
GifOptimizer is a FREE, online tool that reduces the file size of GIF images up to 75%, allowing web pages to load faster. Optimization is achieved in four simple steps: Upload the GIF to the GIF Optimizer server. Reduce the number of colors used in the image. This step also removes extra data and comments from the GIF. Reduce the height and width of the image. Save the optimized GIF to your computer for use on your website. GifOptimizer can reduce the file size of GIF images (up to 150K in size), even animated GIFs. Use it as often as you like, there's never any charge.
Step 1: Upload GIF
Remote File If the image you want to optimize is located somewhere on the Web: Enter the GIF's URL into the field below. (Be sure to enter the url of the gif itself, not the url of the page it is on.) Press the "Upload" button. (Example: http://www.somewhere.com/coolimage.gif )
Local File If the image you want to use is located on your computer: (Internet Explorer users must have at least version 3.02 and the 3.02 add-on available here to use this feature.) Press the Browse button below. Locate the GIF image on your hard drive. Press the "Upload" button. Check out other FREE online tools and files from Media Builder: GIFWorks • Animated Banner Maker • 3D Text Maker • ButtonMaker • FontMapper Animated GIFs • Backgrounds • Borders • Icons • Lines • Fonts

Another option that can be used if you want to offer alot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).

Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. It would also help to reduce the color depth. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the `<IMG>` tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again, Netscape users right-click & Save Image As. (everyone else, it's something similar)

Start with your `<IMG>` tag.

    <BODY>
    <IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62>
    </BODY>

Add your `<A>` tags.

    <BODY>
    <A><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
    </BODY>

And add the URL of the big picture and bingo, you're done!

    <BODY>
    <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62></A>
    </BODY>

You can, if you want, get rid of the blue border. Although, you may wish to keep it so that your viewers know that it is a link. It's up to you.

    <BODY>
    <A HREF="car1.jpg"><IMG SRC="car1-sm.gif" WIDTH=90 HEIGHT=62 BORDER=0></A>
    </BODY>

FAQ: In Netscape my image links have these little blue dashes next to them. Also I keep getting spaces between them and I want them to be flush up against each other. I don't understand... it works right in Explorer. A: Netscape interprets a carriage return between images as a space. IE doesn't. It's that simple. The little blue dash is simply the link underlining an empty space. The cure is to eliminate carriage returns right before or right after the image. This is the markup for the above images:
    <CENTER>
    <A HREF="myhome.html">
    <IMG SRC="pics/myhome.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Home">
    </A>
    <A HREF="mailto:me@my.house">
    <IMG SRC="pics/myemail.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Email">
    </A>
    <A HREF="mylinks.html">
    <IMG SRC="pics/mylinks.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Links">
    </A>
    </CENTER>
if we were to change it to this we would eliminate the little blue dashes:
    <CENTER>
    <A HREF="myhome.html"><IMG
         SRC="pics/myhome.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Home"></A>
    <A HREF="mailto:me@my.house"><IMG
         SRC="pics/myemail.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Email"></A>
    <A HREF="mylinks.html"><IMG
         SRC="pics/mylinks.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Links"></A>
    </CENTER>
Another adjustment and the spaces disappear too:
    <CENTER>
    <A HREF="myhome.html"><IMG
         SRC="pics/myhome.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Home"></A><A
       HREF="mailto:me@my.house"><IMG
         SRC="pics/myemail.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Email"></A><A
       HREF="mylinks.html"><IMG
         SRC="pics/mylinks.gif"
         WIDTH="66" HEIGHT="23"
         BORDER="0" ALT="Links"></A>
    </CENTER>
Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is Netscape a crappy browser? No, it's just different than IE. Browsers sometimes do different things with the same markup.

Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.

First start with the spot you want people to be transported to. Pick a word and wrap it in the `<A>` tags.

    <A>Add</A> the URL and you're done!

Next give that spot a `NAME`.

    <A NAME="upabit">Add</A> the URL and you're done!

What you have done is marked that spot. Now that spot can be referenced and linked to.

Start building the link.

    Click <A>here</A> to be magically transported...

Add the document to be referenced...

    Click <A HREF="lesson06.html">here</A> to be magically transported...

And lastly, add the anchor `NAME` like so...

    Click <A HREF="lesson06.html#upabit">here</A> to be magically transported...

And that's all there is to it! Not exactly brain surgery is it??

`<--BACK` `NEXT-->`

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 | Index and Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN