PROMOTING YOUR CATTERY
How to Construct a Web Site

by Karen Lawrence
Reprinted with permission, Cat Fanciers' Almanac, September 1996

How to include your photos on your web site

By now, you may have given serious consideration to setting up your own cattery web site, and may have all of the text prepared for your homepage, and are bursting to jazz it up with some pictures and images. Graphics can turn your information into a visual presentation, but should be considered carefully. Think about the image that you want to use, and whether it will contribute anything to the page. You will want to use images only to enhance the information you are presenting, and to add that little extra "something" to the content of the page.
BEWARE: Too many images will make a page look cluttered and not attractive to the viewer, plus add considerably to the load time for the page.

How to link in an image file

If we follow Barb's great advice on taking photos with the web in mind, we will know how to take the photos and correctly process them. It is a relatively simple procedure to include them on your web site. The following HTML tag is used:

depending upon the format of the image you intend to use, of course..

Aligning your image on a page

The above HTML tag creates an image on the web page that is always located on the left side of the page. If you do not align your image, you will get something like this when you include text:

Your text will start here ...

To have your text align with the image, you must align the image as follows:

<IMG SRC="photoname.gif" align="left"> Your text will now start here ...

And you will then get something like this ...

Your text will now start here, and you can continue on with your paragraph - and the text will show up beside the photo image as long as the text of the paragraph is not longer than the vertical size of the image. Once your text gets to be longer than the image itself, it wraps to the left side of the page underneath the image.

The image can be aligned left, center or right depending upon where you want your text to appear. Note that text does not align itself around a centered image.

Avoiding text run on under images

If you want your text to stay in line with the photo and not run on underneath the image if the paragraph is long, try inserting <blockquote> at the beginning of your paragraph and </blockquote> at the end of it. This will also work nicely if you have just a sentence or two that you want to appear centered beside an image.

Your text will now start here, and you can continue on with your paragraph - and the text will show up beside the photo image. Once your text gets to be longer than the image itself, it wraps to the left side of the page underneath the image - unless using the blockquote tags as per this example. Note that when using the blockquote tags, if your paragraph text is exceptionally long, it will continue to be aligned to the photo long past the bottom of the photo image. So, in this example, you can also see that if the text in your paragraph is really long, you might want to consider shortening it to one or two sentences so that it doesn't develop this run-on from the bottom of your image file.

Include the size of your image file

Remember the advice above on load time? The size of the image is extremely important. Most graphics editing programs will show you the size of an image. Don't forget - the larger the image, the longer the load time for the page. Image size can be specified, but is not necessary as long as your have resized the image to the size you want it to be. Your page will, however, actually load faster in Netscape if the image size is specified. The image size is in pixels and is used as follows:

Don't forget the alternative text for your image!

One of the most important things you must also do with your image tag is to add an alternative for folks who don't have a web browser, but are accessing your site through a text only browser. Thus your tag would read:
<IMG SRC="photoname.gif" align="left" width="50" height="100" alt=" ABY PHOTO">

Making your photo a link

If you want to get really fancy, you can make the image a link to another page by including the tag <IMG SRC="photoname.gif" align="left" width="50" height="100" alt=" ABY PHOTO">within the <A HREF> </A> tag. This would come in handy, for example, if you wanted to include a photo of a cat and have the photo link to the CFA breed profile page, or if you wanted to include smaller photos on your web site, but have them avaiable as larger images as well. Here's how to do it.

Border - or no border?

And, finally, if you are using an image as a link and are not happy with the border that appears around it, try adding BORDER=0 into the image HTML tag. On the other hand, if you like the border and want it thicker, you can add a numerical value this tag, e.g. BORDER= 6, which will achieve this effect.

Image Link without a border			Image Link with a border

Page maintained by Karen Lawrence, klawrenc@computan.on.ca. Copyright Karen Lawrence©. Cat sketches courtesy of Cindi Farnsworth©. Created: 1/29/97 Updated: 2/9/97

PROMOTING YOUR CATTERY How to Construct a Web Site