WGB Logo

BASIC HTML :: TABLES :: FONTS :: FONT SIZES
COLORS :: GRAPHICS :: LINKING :: MUSIC
FORMS :: LISTS :: FRAMES
REMOTE LOADING :: TIPS & TRICKS

ADDING IMAGES

There are several places on the Internet
where you can pick free Graphics to use on your
web page. Most only require that you
add a link back to thier page.
You also need to save the image to your own hard
drive, and upload to your own directory.
Do not link to the graphic's on someone else site.
Read more about REMOTE LINKING

Follow the steps below to save the images.

Step 1: Go over the image with your mouse and
right click.
Step 2: A screen will pop up, select "SAVE AS"
or "SAVE IMAGE AS" or if it is a background
choose "SAVE BACKGROUND AS".
Step 3: Another pop up screen will appear to save
to your hard drive. Select which folder you want
the image to be saved in. You can then rename the
file if you want to.
Step 4: Click "SAVE" this will save it to your
hard drive.
Step 5: Upload the files into your own directory.

To add the images to your page you will use
the Image Tag.
<img src="filename.ext">
File name being what you named the the image,
the Ext meaning either gif or jpg. An example:
<img > will appear as:

It is always best to use the HEIGHT and WIDTH command
with an image as it will make the download time
of you page faster. It also makes it so that viewers
can see some of the images before the entire page loads.
An Example of the HEIGHT WIDTH command is:
<img WIDTH=70 HEIGHT=79>

You can ALIGN the image on the page to.
It can be centered: <center>
<img WIDTH=70 HEIGHT=79 >
</center>
Which will look like this:

Animated Bird

Or you can ALIGN it to the right, left top or bottom:

<img WIDTH=70 HEIGHT=79 ALIGN=right>

ALIGN text with images:

Animated BirdALIGN=top

Animated Bird ALIGN=bottom

Animated Bird ALIGN=middle

Animated BirdOnly problem with using the ALIGN top is when you
have more then one line of text, the rest of the text
will appear under the image. Just as this is appearing.

To put blank spaces between your images you can use the
HSPACE, for horizontal space. The number used is specified in pixels.
Example:
<img WIDTH=70 HEIGHT=79 HSPACE=20>
<img WIDTH=70 HEIGHT=79 HSPACE=20>
Will appear as: Animated Bird Animated Bird

Or the VSPACE for vertical space.
<img WIDTH=70 HEIGHT=79 HSPACE=20 VSPACE=20>
<img WIDTH=70 HEIGHT=79 HSPACE=20 VSPACE=20>
Will appear as:

Animated Bird

Animated Bird

You do not need to use a closing tag with the
IMG TAG. Graphic file names are case sensitive.
You must use the EXACT file name that is in your
directory. If the file name is petbird1.gif it needs
to be in the code as such. Not Petbird1.gif or
petbird1.GIF. If your image is not showing, check the
file name first to make sure you have it correct.

Adding BORDERed Backgrounds to your pages:
Under the BODY tag add this code:
<TABLE>
<TR>
<TD>
<IMG WIDTH=140 HEIGHT=0>
</td>
<td>

Then right before your closing Body tag add this code:
</td>
</tr>
</table>

You can adjust the WIDTH code up or down depending
on the BORDER but most will fit in the 140 WIDTH.

Here is an invisible gif you can use if you do not
have one.

All help files are printable so feel free to print them.

Back to Top

This page is Copyright © WGB Creations
All rights reserved.
None of these site graphics may be duplicated,
copied, uploaded to another server or linked to.

This page was last updated 05/11/2003