Graphics HTML Help
How to Add Images and Backgrounds to your page
I get many notes wanting to know how to put these graphics on other pages. Here are some examples.
At the very bottom you will find how to add backgrounds.
Please Note: All of these instructions are assuming that you have taken the graphics and sent them to your directory. To get them to your directory you may either FTP the files or if your homepage is in Geocities you can use the E-Z Upload utility. The E-Z Upload is in the file manager which you may access on my main help page. For FTP you will find a link called Answer Point on the help page.
Image Tags
Very Simple way I suggest this for beginners.<IMG SRC="nameofimage.gif">
Where name of image is you put the name of the Image that you have.
Alternative way to put Images on your page.
If you think,"well this is not hard ," try some of these other examples!
- Alternative text instead of a graphic. This text is shown if the user has graphics turned off, or it's a
text-based browser like Lynx. Example:
<IMG SRC="nameofimage.gif" ALT="Click here to go to The Icon Depot">
Height and Width Tags
- Specifies the height and width of the image. If the real
height and width are specified, it loads faster than one
without the dimensions, because the browser doesn't have
to calculate it after downloading. Example:
<IMG SRC="icondepo.gif" WIDTH=75 HEIGHT=150> - The height and width doesn't have to be it's real values.
For example, if I wanted a smaller signature-type footer
that's the same as my header, I could use the same image,
only the height and width would be specified smaller (and
thus would be faster). Example:
<IMG SRC="nameofimage.gif" WIDTH=28 HEIGHT=100> - left or right - aligns to the side and wraps the text above, around, and below it.
- top - aligns with the tallest item available.
- texttop - aligns with the tallest text character available.
- middle - aligns the baseline of the current line with the middle of the image.
- absmiddle - aligns the middle of the current line with the middle of the image.
- baseline - aligns the bottom of the image with the baseline of the current line.
- bottom - aligns the bottom of the image with the baseline of the current line.
- absbottom - aligns the bottom of the image with the bottom of the current line. Example:
Align Images
<IMG SRC="nameofimage.gif" ALIGN=RIGHT WIDTH=40 HEIGHT=125>
Border around Graphic
- Specifies the Border thickness in pixels, including 0.
This is also useful for images that are links, with no
border. Example:
<IMG SRC="nameofimage.gif" WIDTH=50 HEIGHT=125 BORDER=0>
- Specifies vertical and horizontal space around the image.
This is useful for aligned images so the text will be a
little padded and not wrap against the image. Example:
<IMG SRC="nameofimage.gif" ALIGN=RIGHT WIDTH=40 HEIGHT=125 VSPACE=5 HSPACE=5>
How to add a Background to your page
- To add a background image to your page, do the following:
<HTML>
<TITLE>My Homepage</TITLE>
<HEAD>
<BODY BACKGROUND="nameofimage.gif">
This is how your page should look from the top to where you add your background tag.
In the above example your background could also be a jpg file and not a gif. (My backgrounds are jpg's.) So you would just add .jpg in the place .gif
How to make an Image Clickable
Below is an example of a clickable image with a border of 4 pixels
Html to include an image as clickable is below
<a href="nameoffile.htm"><IMG SRC="nameofimage.gif"></a>
Below is an example of a clickable image without a border.
Html to include an image as clickable without a border.
<a href="nameoffile.htm"><IMG SRC="nameofimage.gif"BORDER="0"></a>
Html to include an image as clickable to go to another site.
<a href="http://www.nameofsite.com/nameofdir"><IMG SRC="nameofimage.gif"BORDER="0"></a>
In the above examples nameoffile is the name of the page you want the image to bring up (link to).
Animated Graphics
To include an animated graphic on your page take the graphic just like any non-animated graphic and put the animation on your page the exact same way. That's all there is to it.
I hope this page explains how to put graphics and backgrounds on your page. For beginners I would use the basic tag for Images and the background tag. I have tried to make this as understandable as I could. If you would like to see any other instructions here feel free to tell me what instructions you would like added. If I see a need for it, I will add the instructions as soon as possible Thanks JP :-)
This page is copyright © 2005 JPayne
Back to Main Page