Image Tags
A very simple way, I suggest this for beginners.
<IMG SRC="nameofimage.gif">
Where "nameofimage" is, you put the name of the image that you have.
Alternative way to put Images on your page.
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
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 or bacground color 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.
- To add a background color to your page, do the following:
<HTML>
<TITLE>My Homepage</TITLE>
<HEAD>
<BODY BGCOLOR="#FFFFFF">
This is how your page should look from the top to where you add your background tag.
In the above example your background color is white but could be any of these below
RGB Colors
Did you ever wonder how to get those colors into your HTML text or use a color for a background? Well, here is how to do it. You will find the hexidecimal colors below.
<font color=#RRGGBB>Text to be colored</font>
or for backgrounds <body bgcolor=#FFFFFF>
Here is a table of the 216 "safe" colors that can be used and viewed on just about every monitor on the web.
The number in parenthesis that you see in each block below are the HEXADECIMAL numbers for the RGB codes that make up that color. These numbers are in the format of (RED) (GREEN) (BLUE). For use with the countdown program, they should be used as "RRGGBB". For example, the third color on the top row would be written as "000066".
| (00) (00) (00) |
(00) (00) (33) |
(00) (00) (66) |
(00) (00) (99) |
(00) (00) (CC) |
(00) (00) (FF) |
| (33) (00) (00) |
(33) (00) (33) |
(33) (00) (66) |
(33) (00) (99) |
(33) (00) (CC) |
(33) (00) (FF) |
| (66) (00) (00) |
(66) (00) (33) |
(66) (00) (66) |
(66) (00) (99) |
(66) (00) (CC) |
(66) (00) (FF) |
| (99) (00) (00) |
(99) (00) (33) |
(99) (00) (66) |
(99) (00) (99) |
(99) (00) (CC) |
(99) (00) (FF) |
| (CC) (00) (00) |
(CC) (00) (33) |
(CC) (00) (66) |
(CC) (00) (99) |
(CC) (00) (CC) |
(CC) (00) (FF) |
| (FF) (00) (00) |
(FF) (00) (33) |
(FF) (00) (66) |
(FF) (00) (99) |
(FF) (00) (CC) |
(FF) (00) (FF) |
| (00) (33) (00) |
(00) (33) (33) |
(00) (33) (66) |
(00) (33) (99) |
(00) (33) (CC) |
(00) (33) (FF) |
| (33) (33) (00) |
(33) (33) (33) |
(33) (33) (66) |
(33) (33) (99) |
(33) (33) (CC) |
(33) (33) (FF) |
| (66) (33) (00) |
(66) (33) (33) |
(66) (33) (66) |
(66) (33) (99) |
(66) (33) (CC) |
(66) (33) (FF) |
| (99) (33) (00) |
(99) (33) (33) |
(99) (33) (66) |
(99) (33) (99) |
(99) (33) (CC) |
(99) (33) (FF) |
| (CC) (33) (00) |
(CC) (33) (33) |
(CC) (33) (66) |
(CC) (33) (99) |
(CC) (33) (CC) |
(CC) (33) (FF) |
| (FF) (33) (00) |
(FF) (33) (33) |
(FF) (33) (66) |
(FF) (33) (99) |
(FF) (33) (CC) |
(FF) (33) (FF) |
| (00) (66) (00) |
(00) (66) (33) |
(00) (66) (66) |
(00) (66) (99) |
(00) (66) (CC) |
(00) (66) (FF) |
| (33) (66) (00) |
(33) (66) (33) |
(33) (66) (66) |
(33) (66) (99) |
(33) (66) (CC) |
(33) (66) (FF) |
| (66) (66) (00) |
(66) (66) (33) |
(66) (66) (66) |
(66) (66) (99) |
(66) (66) (CC) |
(66) (66) (FF) |
| (99) (66) (00) |
(99) (66) (33) |
(99) (66) (66) |
(99) (66) (99) |
(99) (66) (CC) |
(99) (66) (FF) |
| (CC) (66) (00) |
(CC) (66) (33) |
(CC) (66) (66) |
(CC) (66) (99) |
(CC) (66) (CC) |
(CC) (66) (FF) |
| (FF) (66) (00) |
(FF) (66) (33) |
(FF) (66) (66) |
(FF) (66) (99) |
(FF) (66) (CC) |
(FF) (66) (FF) |
| (00) (99) (00) |
(00) (99) (33) |
(00) (99) (66) |
(00) (99) (99) |
(00) (99) (CC) |
(00) (99) (FF) |
| (33) (99) (00) |
(33) (99) (33) |
(33) (99) (66) |
(33) (99) (99) |
(33) (99) (CC) |
(33) (99) (FF) |
| (66) (99) (00) |
(66) (99) (33) |
(66) (99) (66) |
(66) (99) (99) |
(66) (99) (CC) |
(66) (99) (FF) |
| (99) (99) (00) |
(99) (99) (33) |
(99) (99) (66) |
(99) (99) (99) |
(99) (99) (CC) |
(99) (99) (FF) |
| (CC) (99) (00) |
(CC) (99) (33) |
(CC) (99) (66) |
(CC) (99) (99) |
(CC) (99) (CC) |
(CC) (99) (FF) |
| (FF) (99) (00) |
(FF) (99) (33) |
(FF) (99) (66) |
(FF) (99) (99) |
(FF) (99) (CC) |
(FF) (99) (FF) |
| (00) (CC) (00) |
(00) (CC) (33) |
(00) (CC) (66) |
(00) (CC) (99) |
(00) (CC) (CC) |
(00) (CC) (FF) |
| (33) (CC) (00) |
(33) (CC) (33) |
(33) (CC) (66) |
(33) (CC) (99) |
(33) (CC) (CC) |
(33) (CC) (FF) |
| (66) (CC) (00) |
(66) (CC) (33) |
(66) (CC) (66) |
(66) (CC) (99) |
(66) (CC) (CC) |
(66) (CC) (FF) |
| (99) (CC) (00) |
(99) (CC) (33) |
(99) (CC) (66) |
(99) (CC) (99) |
(99) (CC) (CC) |
(99) (CC) (FF) |
| (CC) (CC) (00) |
(CC) (CC) (33) |
(CC) (CC) (66) |
(CC) (CC) (99) |
(CC) (CC) (CC) |
(CC) (CC) (FF) |
| (FF) (CC) (00) |
(FF) (CC) (33) |
(FF) (CC) (66) |
(FF) (CC) (99) |
(FF) (CC) (CC) |
(FF) (CC) (FF) |
| (00) (FF) (00) |
(00) (FF) (33) |
(00) (FF) (66) |
(00) (FF) (99) |
(00) (FF) (CC) |
(00) (FF) (FF) |
| (33) (FF) (00) |
(33) (FF) (33) |
(33) (FF) (66) |
(33) (FF) (99) |
(33) (FF) (CC) |
(33) (FF) (FF) |
| (66) (FF) (00) |
(66) (FF) (33) |
(66) (FF) (66) |
(66) (FF) (99) |
(66) (FF) (CC) |
(66) (FF) (FF) |
| (99) (FF) (00) |
(99) (FF) (33) |
(99) (FF) (66) |
(99) (FF) (99) |
(99) (FF) (CC) |
(99) (FF) (FF) |
| (CC) (FF) (00) |
(CC) (FF) (33) |
(CC) (FF) (66) |
(CC) (FF) (99) |
(CC) (FF) (CC) |
(CC) (FF) (FF) |
| (FF) (FF) (00) |
(FF) (FF) (33) |
(FF) (FF) (66) |
(FF) (FF) (99) |
(FF) (FF) (CC) |
(FF) (FF) (FF) |
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.
|
