The Digital Amateur: Building a Web Page (part 3)

by Brad Rodriguez, VE3RHJ


By now you should have created several HTML (web page) files and linked them together. But so far, your pages have just contained text. It's time to add some images -- pictures or drawings -- to your web page.

Image file types

Just as every one of your web pages is an HTML file on your computer, every image will be a file. Photographs, drawings, and artwork can be stored in any of several different file types. The last part of the file name always identifies the file type. Two types are safe to use on your web pages:

All modern web browsers can display these two image file types. But you may encounter some others, and you should know how to recognize them and what to do about them:

If you're lucky, your scanner and drawing software will give you the option to save your images in JPEG or GIF format. If you're not lucky, you may get some other file type. Fortunately, there are many programs that will convert images from one file type to another. I use a program called Lview Pro. You can download a trial version from (just search for "Lview Pro"). Lview Pro understands several image file formats, including GIF, JPEG, BMP, and TIFF. (My old copy of Lview Pro doesn't know about PNG files; newer versions might.) You can open a file of one type, and save it as another type. You can also perform some simple image editing, like cropping and rotating images. The program is straightforward, so I won't give a detailed explanation of its use.

Obtaining image files

You can get image files in many ways.

Save the image file in the same folder as your HTML files. As always, give the image file a meaningful name. Raclogo.gif will be easier to remember than Image1.gif.

Adding an image to a web page

Usually you'll want to place an image somewhere within one of your web pages. You can put an image anywhere you could type a character: ar the start or end of a line, on a line by itself, or even between words. Here's how to do it:

  1. Start Netscape 3 Gold.
  2. Click File/Open File in Editor.
  3. Navigate to your web page folder.
  4. Click on the HTML file you want to put images into, then click Open.

Now you can move around in the file. Scroll down to the place where you want to put an image, move the pointer there with the mouse, and click. You should see the text cursor (vertical bar) flashing at the desired point. Now,

  1. Click Insert/Image.
  2. Click in the "Image File Name" box, and type the name of your image file.
  3. Click Open, then click OK.

You should see the image added to your web page. To remove it from the page, click on the image -- a black outline box should appear around it -- then press the Delete key. Note: do not use the Browse button to select your image. Netscape 3 has a bug, and while you'll be able to see the image, no one else will. (For the curious: the image is saved as a file: URL with the path name of your hard drive, rather than a "local" file name.)

You can control how the image lines up with the text around it. Click on the image to select it, then click Properties/Image. Under "Alignment" you will see seven buttons, which do the following:

  1. Align the top of the image with the top of the text. This puts most of the image below the text line. (This is what I did in the example above.)
  2. Align the (vertical) center of the image with the (vertical) center of the text.
  3. Align the (vertical) center of the image with the bottom of the text.
  4. Align the bottom of the image with the baseline of the text. This puts most of the image above the text line, but lower-case descenders (g, j, p, q, y) will drop below the image. (This is the default when you insert a new image.)
  5. Align the bottom of the image with the bottom of the text.
  6. Put the image on the left margin, and wrap the text around it on the right.
  7. Put the image on the right margin, and wrap the text around it on the left.

When you use the "wrap" options, the text following the image (i.e., after the point where you inserted the image) will be wrapped around the image. This will include subsequent paragraphs, if needed to fill the space! Also, when you use the "wrap" options, you won't see the image correctly displayed in the editor. The only way to see how the final web page will look is to click File/Browse Document.

Try the various options to see how they work.

Linking to an image file

Whenever someone views your web page, all the image files you have placed in that page get loaded automatically. This means your web page loads more slowly. The bigger the image, the slower the load...and the slower the load, the more people will just click "Stop" and go somewhere else. So you don't want to put big images on your page.

Instead, you can link to an image file. This is exactly the same as linking to another web page. Type some descriptive text, like "Photo of our team." Click and drag to select that text, then click Insert/Link. In the "Link to a page location or local file" box, type the name of the image file (including the .jpg, .jpeg, or .gif at the end). Then click OK. If you want to use the Browse File button to search for your image file, you'll have to change the "Files of Type" box. Normally this reads "HTML files." Click on the little down-arrow at the right of the box, and then click on "All Files" in the list which appears. This is the only way to see GIF and JPEG files in the browser window.

Now only the descriptive text appears on the web page, underlined and blue to indicate that it's a link. When you click on the link, the image appears on a page of its own.


A "thumbnail" image is a tiny copy of the image, which links to a full-size copy. (The tiny copy is supposedly the size of your thumbnail, hence the name). This lets viewers see a quick-loading "preview" of the image, and then opt to load the full image if they want more detail. This requires three steps:

    Create a thumbnail image.

    You need Lview Pro or another image processing program for this. In Lview Pro, click File/Open to open the full-size file. Then click Edit/Resize, and adjust the size ratio sliders to a number less than 1.00. 0.5 will shrink the image to half size; 0.25 to one-quarter size, and so on. You can instead type the desired width x height (in pixels) of the reduced image. Click OK to reduce the image, then click File/Save as to save it with a new name. Don't use File/Save, or you'll lose your original full-size image.

    Insert the thumbnail image into your web page.

    Use Insert/Image from the Netscape Editor to put the new, reduced image into your web page. The procedure is the same as described above; just remember to use the file name of the reduced image file (that you saved from Lview Pro).

    Link the thumbnail image to the full-size image file.

    In Netscape Editor, click on the image you've just inserted. A black outline box will appear around the image, indicating that it is selected. Then click Insert/Link and proceed to enter the file name of the full-size image file. The procedure is the same as described above, except that you're selecting an image (the thumbnail image) rather than selecting some descriptive text.

Incidentally, you can attach any kind of link to an image. Just type an HTML file name or a URL instead of the "full-size" image file name, when you're doing Insert/Link. As an example, the Georgian Bay Amateur Radio Club image up above has a link to the club's home page, If you click on the image, you'll be linked to the GBARC page.

Uploading your image files

After you edit your web page to include some images, you'll need to upload it again to your web host. (You should be getting good at this by now.) Dial up your Internet Service Provider, then click File/Publish. You have two options:

After you've uploaded the page, check it with a web browser. Better still, have a friend check it, to make sure that all the images are accessible from the web host.


Are you finding these articles useful? If so, send me an email at