Tracy Brady Cartoons

If you’re promoting your site, then you’ll need buttons and banners.

Buttons and Banner are virtual billboard advertisements that should be ‘clickable’ links to your site. You can display them on directory listing and swap them with other web content creators. They cost virtually nothing to create except time, elbow grease, a tid-bit of easily learnable code knowledge and the ingenuity to make them as attractive as you want them to be.

Anatomy of a Button or Banner
Like most online ads do, buttons and banners clearly display 3 things:
1. The name of your site
2. Your site’s URL (Example: http://www.yoursite.com)
3. Your tagline or a description of your site

If you choose not to display your tagline, then you must in another way give readers a clue of what your site is about. Internet users rarely appreciate surprises when deciding whether to click a link.

If you do not show your URL on your ad, then it is all the more important that the portion of the ad’s code that makes it an active link to your site works!

For your ad to be clickable you will need to give it its own URL. Many blogging platforms like WordPress and Blogger/Blogspot give their users directories or folders to upload and store images. If you don’t have these, or you do but don’t know how to use them, then you can use an image host like PhotoBucket. http://photobucket.com/

Basic HTML code for making your button or banner
This is one of my banners

It is a 468 x 60 banner. If your place your pointer on it hover text will appear. If you click it another page displaying my site will open.

People I swap banners with appreciate that clicking on my banner doesn’t take viewers away from their page entirely, while hover text allows me to add both extra information and search engine power to the banner.

Please note that dimensions are measured in pixels and that height is always written before width.

Also, whichever format you use to create your ad, I recommend saving it in PNG. PNG files are smaller, open more quickly and are compatible with most page editing scripts. They should also have low resolution between 72 to 96 pp (dpi)

Its source code looks like this:

<a href="http://www.tracybradycartoons.com/dirtyjobcomics/" target="_blank"><img src="http://i566.photobucket.com/albums/ss104/tracybradycartoons/djc468x60banner.png" border="0" alt="Off Beat Work Humor by Tracy Brady"</a>

The source code is written in HTML (hypertext markup language) and is divided into two parts running concurrently.

HTML begins with the ‘less than’ sign (< ) and ends with the ‘greater than’ sign (>). These two signs inform the page that the information written between them is to be treated as code.

The first part is about the destination URL and begins with the ‘less than’ sign (< ), followed by the Anchor tag (a) and then by the Hypertext Reference tag (href) then by an equal sign (=) and finally by the URL of the destination website in quotations (http://www.tracybradycartoons.com/dirtyjobcomics/).

This is the first part of the code. Before I close it I have added a second instruction called a target blank script. This is placed in front of the 'greater than' sign (>) that indicates the end of this part of the code.

The (target=”_blank”) script instructs the code to open as a separate page when it is clicked. It can also be written as (border=”0″).

There is one character (linebar) space between the last quotation in the first code and the word target. This tells the code that it is a separate instruction. There should be no spaces between the characters of any one instruction, only spaces between each instruction.

There are now two instructions in this first code and one space separating them.

The second code is all about the image and also begins with a ‘less than’ (< ) sign that is placed immediately after the ‘greater than' (>) sign that ends the first code.

Next is the image source code (img src) which tells the code that the next bits of script will be about displaying a picture (=). This is followed by the URL address of the button or banner image, enclosed in quotation marks (http://i566.photobucket.com/albums/ss104/tracybradycartoons/djc468×60banner.png)

The second part of the code is now done. But before I close it up, I have again added instructions to activate both ‘target blank’. I have also added instructions for alternative hovering text (alt).

Alternative Hovering text is written with an equal sign (=) and then text I would like to display in quotations (alt=”Blah Blah Blah”)

There are now three instructions in the second code with two character spaces separating them.

Finally we will remind the page that we have been writing code by adding another ‘less than’ sign (< ). It’s kind of like writing a summary to an essay. Next, we will tell it we are closing the code by writing the sign for closing tags which is the forward slash (/). Then we will remind the script that is all anchor code by writing (a) again and finally the last greater than’ sign (>). That’s it.

Now you try.

Using an editor (like MicroSoft NotePad), write the code from scratch; or copy and paste the code below, then change the information to make your own button or banner.

<a href="http://www.YOUR-SITE-NAME.com/" target="_blank"><img src="http://WHERE-YOUR-IMAGE-IS-STORED/NAME-OF-YOUR-IMAGE.png" border="0" alt="SAY SOMETHING HERE"</a>

If you need help, write to me or leave a comment.