A Guide To HTML Help

How to Add Images and Backgrounds to your page

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 or Yahoo 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>

Align Images
- 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:
  <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>
Vertical Space and Horizonal Space Around Graphic
- 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 :-)
  
  This page is copyright © iconsunlimited 2005
  
  Back to Main Page

A Guide To HTML Help

How to Add Images and Backgrounds to your page

Image Tags

Alternative way to put Images on your page.

Height and Width Tags

How to add a Background to your page

How to make an Image Clickable

Animated Graphics

`Height and Width Tags`