Hi!! Welcome to my Graphics Tricks Page. I will show you how to do a variety of things with graphics.

     I won't go in to much detail about basic HTML, so if you are a beginner, you may have a little diffculty. If so, please email me with any questions you might have.

     Ok, let's get started. I will be using the same image for all of these examples. You can use your own imagination and the possibilites will be endless.

NOTE : Remember to replace the ( & ) with the less than & greater than signs.

Here is the image :
This graphic was made to
be used for a background. It measures 128 wide x 128 high.

     I will begin by showing you how to add a width-height attribute to size an image. Anytime that you put an image on your page, it will help speed up the loading time if you include this attribute at the end of your "img src" tag. To find the size of your image, take it to ImageMagick or Robbie's QuickFind.

     Once you know the size of your image put it in your code like this:

     Now let's play with this code a little. This is what changing the width-height attribute to 20x20 will do:

     Sort of looks like a clickable button to me.

     Let's try 300x20 :

     Could be used for a dividing line??

     How about 400x5?

     hmmmm, that looks like a great dividing line to me.

     Starting to get the idea?

     Ok, let's talk about the "border" attribute. Adding a border attribute to the end of your img src tag will do exactly that -- add a border to your image. 'smile'. Let's see what that looks like.

(img src="http://URLofImage" width="500" height="5" border="5">

     Wow, that really dressed that little line up didn't it?

     20x20 border=5

     Looks pretty good doesn't it? Keep in mind that this is a light colored button on a dark background. If you use a light color on top of another light color you will get a different look because the border will be the color of your page background.

     Depending on how you look at it and the combination of colors, the button will either appear to be raised off of the page or sunken into it. It is sort of an optical illusion.

     Let's see if we can make, oh let's see, how about a "back home" button. Now, for those of you that are from the south, like me, "back home" doesn't mean where we are from. 'Smile'.

     We will now make a button that is 140x60 with a border of 10.

     We will need to add text to the button. To do this we will have to create a table to put it in. I will give you the code for this next step so that even if you dont know how to make a table, you can still have a button. Please take the time however, to learn tables. They really aren't that complicated and you can do so much with them.

Here is the code:

(table width="140" height="60" background="http://URLofImage" border="10")(tr)(td align="center")(font size="6" color="#000000")(blackface)HOME (/blackface)(/font)(/td)(/tr)(/table)

     To make the button clickable put your (a href) tag right before the (font) tag for it to look like this:

     Or put put it in with the (table) tag -- (table href="URL" etc......) to make it look like this:

     I understand that this can be sort of complicated if you don't understand how a table works. Just read up on using tables and practice using them. It will be well worth your effort.

     If you do not feel up to learning tables right now, I have a page of buttons that I created using ImageMagick. They are in "jpg" format so you won't have to worry about copying the HTML for it. If you would like to check them out click here:

     Do you want to put a picture on your page with the persons name on the pic?? Then do this:

(table background="http://URLofPic" width="?" height="?" border="10")(tr)(td valign="bottom")(font size="5" color="000000")(i)(b)Name(/b)(/i) (/font)(/td)(/tr)(/table)

     As you have probably come to realize, there are an unlimited number of things you can do with tables. Here is a great site that has a terrifc tables tutorial: Draac's

     Another fun trick that you can do with tables is to adjust the background transparency of a table just by adding transparency="??%" some where in your (table) tag. example:

(table bgcolor="??????" width="??" height="??" border="??" transparency="??%")

Hmmm, how do you think this looks?

Same color, no trans- par- ency

     Ready to learn more about tables aren't you?? 'smile'. They can be so much fun. You can put borders around images too. Like this:

     Another quick and easy graphics trick is to use "horizontal rules". The code for those are: (hr size="?" width="??%")

     To get different shapes and sizes, change the size and the width. You can also use exact pixel count in place of the %. Here are some examples:

     Size 4 width 70%

      Size 40 width 10

     Well, I hope you have enjoyed my page. Please come back often. As I learn new stuff I will update this page. Now, get your images and take these hints along with you and go paint the "web" red. 'Smile'

     Take Care --- lady :)

Click for this week's free wallpaper
Click HERE to give away free wallpaper on YOUR site!