Annabella's HTML Help .... EZ PRINT!

GRAPHICS

For the full version of this page, go to http://www.annabella.net/graphics.html

SAVING GRAPHICS FILES

There are hundreds of graphics collections on the Internet - many of them offering graphics free for the taking. They usually only request that you create a link back to their page. To put graphics onto your page, you must first save the file to your computer.

Right click on the link to the graphic.
Select "Save link as" (Netscape) or "Save target as" (Internet Explorer) from the pop up menu.
This will bring up the folders on your desktop. Select where you want to store the file.
At this stage, you can also re-name the file. In the "Filename" box, type in the name you wish to use.
Click "SAVE"
Then upload the saved files to your file directory

DO NOT link directly to the image in the graphic collection where you found it. This causes problems for their site, as well as problems for you if they delete or rename the image.

FILE NAMES

Graphics file names are case sensitive. This means that when you enter the filename, you must use the EXACT name of the image. rabbit.gif is NOT the same as Rabbit.gif or rabbit.GIF You must always use the filename correctly, otherwise your image will not show up!

IMAGE TAG

<img src="filename">
This tag places the image on your page. NO closing tag is needed.
For example, <img src="pink.gif">

ALIGNING THE IMAGE

When you enter the tag for an image, you need to use attributes or tags to define where you want the image to appear.

If you have a line of text, and then an image on the same line, that is where it will appear.
For example, The text goes here <img src="pink.gif"> will appear as:
The text goes here

If you place the image on its own line, it will automatically default to the left hand margin.

If you want it centered on the page, simply use the <center> and </center> tags.
For example, <center><img src="cyan.gif"></center>

If you want it aligned at the right hand margin, use the tag <img src="filename"align=right>
For example, <img src="purple.gif"align=right>

ALIGNING TEXT WITH IMAGES

If you wish to have text next to your image, you may want to set the alignment of the text. If no alignment is specified, the text will line up with the bottom of the image.

ALIGN=TOP / BOTTOM

You can align your text with align=top / middle / absmiddle / bottom

For example,<img src="pink.gif" align=middle>

Note: When you use align=top, only the first line of text will be at the top of the image. If you have more than one line of text, it will jump down to the bottom of the image! A better alignment option to use in that case would be align=left... (see below).

ALIGN=LEFT / RIGHT

Text aligns differently when align=left or align=right is used in the image tag.

In this case I have used align=right. The image tag comes first, then your text. The text begins at the top and continues down the side of the image. When it reaches the bottom edge of the image, the text will then go back to the full width of the page.

You can also make your text wrap around the image by placing the image actually within your text,<img src="pink.gif" align=left>

but still using the align attribute. This time I have used align=left As you can see, the text wraps around the image, beginning before the image and continuing down the sides as before. If you keep on writing for long enough, you will see that the text defaults back to the left hand margin once it gets below the bottom of the image.

Now there is a really "weird" thing with using both align=left and align=right images (with text) after each other.

Here I have written <img src="pink.gif" align=left><img src="pink.gif" align=right> and then my text... the text appears between the two images even though I wrote it after the image codes!!! This can be very useful for setting out images and text without having to use a table!

HEIGHT and WIDTH

For faster page loading it is a advisable to specify the height and width attributes for each image in the page. That way, the browser sets aside a defined area for the pic to load into. Height and width are expressed in pixels.

For example, <img src="pink.gif" width=12 height=12>

CHANGING SIZES

You do not have to use the original size of any image that you have. With a few simple tag attributes you can change the size and proportions of the image.

By inserting a "width" tag, you can change the overall size, while keeping the same proportions.

For example,
<img src="pink.gif" width=12> This image is a 12 pixel wide square.

<img src="pink.gif" width=6> This changes it to half its size.
<img src="pink.gif" width=36> This changes it to 3 times its size.

It should be noted however, that not all browsers will recognise an image that has been re-sized this way, and will continue to display it in the original size.
A far better option for resizing your image is to use an image editor to alter the actual size (as well as the byte size) of your pics.

PROPORTIONS OF THE IMAGE

To change the proportions, also add the height tag. By changing the width and height tags out of proportion to the original image, you will change the proportions of it.
For example,
<img src="pink.gif" width=12 height=12 > This image is a 12 pixel wide square.

<img src="pink.gif" width=20 height=40 > changes it to a rectangle!

Once again, it should be noted that not all browsers will recognise an image that has been re-sized this way, and will continue to display it in the original size.
A far better option for changing the proportions of your image is to use an image editor to alter the actual proportions (as well as the byte size) of your pics.

HSPACE & VSPACE

You can easily create blank space around your image with the use of the hspace (horizontal space) and vspace (vertical space) attributes. The actual number quoted is the space in pixels that you want around your image.

If you add hspace=10 vspace=10 to the image tag, <img src="pink.gif" hspace=10 vspace=10>, then a 10 pixel wide space will be created all around the image.

USING AN IMAGE AS A LINK

You can also make an image as a 'clickable' link. Use EXACTLY the same tags as for a regular link, BUT, where you would normally write the words that would be clicked, you instead write the img src tag.

For example:<a href="http://www.iconbazaar.com"><img src="iconbazaar.gif"></a>

Now, you will note that a highlighted border appears around the image. To get rid of the border, simply add border=0 to the img src tag.

Note: The disadvantage with this is that it may not be obvious that the image is a link.

For example: <a href="http://www.iconbazaar.com"><img src="iconbazaar.gif"border=0></a>

THUMBNAILS

A thumbnail is a small picture which links to a much larger picture.
If your page has lots of large pictures on it, it will take f-o-r-e-v-e-r to load. A simple solution to this is to put a thumbnail of the picture on your page. The visitor can then click on the thumbnail to see the larger picture.
To do this you will need to use an image editor to create a small version the thumbnail of the large picture. Upload both the large picture and the small (thumbnail) picture to your file directory.

Put the thumbnail picture on your page, and link it to the large picture as follows:

<a href="pic.jpg"><img src="smallpic.jpg" border=0></a>

Replace "pic.jpg" with the actual filename of the large image, and replace "smallpic.jpg" with the actual filename of the small image.

TEXT ONLY BROWSERS

Some visitors surf the net with "Text only" browsers, or with their graphics turned off, for faster surfing. It is a good idea to make use of the ALT attribute so that they have an idea of what they are missing!!!

Visitors with graphics will only see the alt text while the page is still loading... it will disappear when the image loads.

<img src="gifwizard.gif" alt="Gif Wizard!">

Please remember to use both sets of " around the alt text, otherwise the following text will disappear!