Saving Graphics File Names Image tag Aligning Images Aligning Text with Images Align Top/Bottom Align Left/Right

Height and Width Changing Size Proportions Hspace and Vspace An Image as a Link Thumbnails "Text Only" Browsers

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.

1. Right click on the link to the graphic.
2. Select "Save link as" (Netscape) or "Save target as" (Internet Explorer) from the pop up menu.
3. This will bring up the folders on your desktop. Select where you want to store the file.
4. At this stage, you can also re-name the file. In the "Filename" box, type in the name you wish to use.
5. Click "SAVE"
6. 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.

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!

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

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.
For example, <img src="blu.gif"> will appear as:


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

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> will appear as:

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, it will default to this:

Then your text.

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

align=top
align=middle
align=bottom


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).

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

<img src="note.gif" align=right> 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="note.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="note.gif" align=left> <img src="note.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!

For faster page loading it is a good idea 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="images/pink.gif" width=12 height=12>

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,
This is the actual size of this image:

<img src="pink.gif" width=6> will appear as

<img src="pink.gif" width=12> will appear as

<img src="pink.gif" width=40> will appear as

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.

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,

This is the actual size of this image:
<img src="cyan.gif" width=20 height=40 > will appear as

<img src="cyan.gif" width=50 height=20> will appear as

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.

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.

In this example, the images are all next to one another.



If you add hspace=10 to each tag, <img src="pink.gif" hspace=10>, then this happens:



To create blank vertical space, add vspace=10 to each tag, <img src="pink.gif" hspace=10 vspace=10>, then this happens:

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.

<a href="http://www.annabella.net/html.html"> <img src="annahelp.gif"></a>



Now, you will note that a highlighted border is 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.

<a href="http://www.annabella.net/html.html"> <img src="annahelp.gif" border=0></a>

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 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.

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="annahelp2.gif" alt="Annabella's HTML Help">



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