So you want to use HTML code in profiles

The following is a short(?) information file
on how to use HTML in
"Where’s George" profiles.

Here is a list of commands commonly used in profiles.
What it does	Go To	The HTML Code
Inserts A Bill Report		<a href="George address of hit">The Hit</a>
Inserts Picture		<img src="http://HostName.com/file.gif">
Inserts Picture Center		<center><img src="http://HostName.com/file.gif"></center>
Change Picture Size		width="xxx" height="yyy"
Open In New Window		target="_blank"
Use Picture As A Link		<a href="http://GoToWebAddress.com"><img src="Host.com/PicName.gif"></a>
Make A Thumb Nail		<a href="FullSize" target="_blank"><img src="FullSize" width="xx" height="yy"></a>
Give Picture A Caption		alt="Your caption goes here"
Insert Horizontal Line		<hr>
Set Profile Width		<hr width="number in pixels" color="same color as the background color">
Change Font Size		<font size="X"> close-with tag </font>
Change Font Color		<font color="#hex"> OR <font color="name"> close-with tag </font>
Changes Font Type		<font face="nameoffont"> close-with tag </font>
Underline Text		<u> close-with tag </u>
Bold Text		<b> close-with tag </b>
Italic Text		<i> close-with tag </i>
Skip A Line		<br>
Skip Two Lines		<p>
Make A Table		<Table> & <TR> & <TD>
Table With Clickable Link		<Table> & <TR> & <TD> <a href="http://GoToWebAddress.com">
Borderless Tables		<table border="0">
Adjust Table Border Color		bordercolorlight="#XXXXXX" bordercolordark="#XXXXXX"
Drop Down Bingo Menu		<option>- - - CITY NAME - - -</option>
Display Stats (Image Method)		<img src="http://HostName.com/StatPic.gif">
Display Stats (HTML Method)		<img src="http://WheresGeorge.com/SummaryPage.html">
Profile Background		<background color="#xxxxxx"> and why it will not work
Two WG Profile Styles		Choose the "STANDARD" or "FREE-FORM" Style Of Profile
Filters On The Profile Page		Understanding the filters used on the profile page
What it does	Go To	The HTML Code

Before you do anything else, make a backup copy of your profile!

It is a good idea to have a copy of your original, unaltered profile handy. Many times when you are working on your profile, you will make a mistake and will not know how to "un-mistake" it again.

To make a back-up copy: Go to the main screen of George, choose USER PROFILE, when the window opens for the profile editor, right click on any text that is all ready in your profile and left click on 'Select All' then left click on 'copy'. The HTML code for your profile is now stored on your clipboard. Open a copy of Word Pad or Note Pad and paste the code into that file. Save this file on your computer.

If your updating your profile and really mess things up royal, you can always load the this backup copy into George and start over.

POSTING BILL REPORTS

The command for posting a bill report is:

<a href="WG address of the bill report">The Hit</a>

The “WG Address” is the address of the bill report that you wish to display. You can copy this address by opening up the “your bills” report and finding the entry of the bill in question. When the report is done loading, the address will be posted near the bottom of the bill report page. Just highlight and copy this address. The bill address is now on your clip board and is ready to be pasted into the proper place in your HTML code. The words “The Hit” are what show up as a clickable link for your readers to use. You may change the words “The Hit” to what ever you like: The Purple Hit, The Strange Hit, Fastest Hit, Oh My God Look What This Geek Did To My Hit.

After inserting the Where’s George bill report link, the whole command, ready for posting, will look like this:

<a href="http://www.wheresgeorge.com/report.php?key=65e4da3d9e31ceb9b2749a06ba556a3864909edfc55fff74">The Hit</a>

All you need to do is change my bill report address to the address of the bill report you wish to display, copy and paste this whole line into your profile and your done.

If you wish (and it is a good idea to do this) you can call up this bill report in a new window.

The command for opening a new window is: " target="_blank".

NOTE: do not forget the space between the (") mark and the word (target).

The whole command for a bill report opening in a new window would look like this:

<a href="http://www.wheresgeorge.com/report.php?key=65e4da3d9e31ceb9b2749a06ba556a3864909edfc55fff74" target="_blank">The Hit</a>

One final important note.

A bill report is nothing more than a web page. You may also call up and display a web page with this same command. This is the command that I used to open a new window and get you to this web page:

<a href="http://www.PrimeReloading.com/p/profile.htm" target="_blank">Using HTML In Profiles</a>

INSERTING PICTURES

The command for inserting a picture is:

<img src="Host.com/name.gif">

The “Host.com” is the address of the web server where the picture you wish to call up is hosted. The name.gif is the name and file type of the picture you are trying to display.

Lets take a real example to look at. I host my pictures on the server that also has my business web page on it. I save all my gif pics in a file folder called x. In my case when I wish to call on a picture the command will look like this:

<img src="http://www.PrimeReloading.com/x/horsebarn.gif">

The www.PrimeReloading.com is the address of the web page. The /x means the file is stored at that address in a file folder named x. The /horsebarn.gif is the name and file type of the picture I wish to post. When I call this command, the default placement of the picture is in the upper left hand corner. This means that the picture will appear in the next available space on the left hand side of the screen up against anything that is all ready showing. If this were a profile page and I were to place a picture into it, using this command as written, the picture would appear here:

horse ban gif

I can center the picture by using the center command like this. Note I have added an extra tag at the end of the command so any text that follows the picture will start under the picture and not on the right hand side of it:

<center><img src="http://www.primereloading.com/x/horsebarn.gif"></center> 

horse barn gif

Want one on both sides and one in the middle?

Try this command!

horse barn gif

You may use the IMG SRC command to post as many pictures as you want but you must find a service provider to host your pictures. It is not enough that you have the pictures on your computer. They must be placed somewhere on the web. If you are a friend of “Where’s George?” you get free hosting for 10 pictures. There are several web hosting services available on the web. A few are free with some restrictions like how many files you can store or how many times you can access a file. Other providers charge a monthly fee. Since I have my own server, I am not familiar with any of the companies, so I cant provide you with any information or recommend a service provider but here is a list of service providers that have been mentioned in the forums:

http://www.photobucket.com http://www.auctionphotobank.com

http://www.freewebs.com http://www.ripway.com

http://www.boomspeed.com http://www.villagephotos.com

There are many others so shop around.

A Note Of Caution:

Save the file name of your pictures in all lower case letters. Do not use spaces or weird characters in file names and keep file names as short as possible. These precautions will cut down on spelling errors which is the major cause for a picture not showing up when and where it is suppose to. If any word in the entire command is misspelled then you are, as they say in Mexico, El Toast.

USING PICTURES AS CLICKABLE LINKS

The command for inserting a picture which will function as a clickable link is:

<a href="WG address of the bill report"><img src="Host.com/name.gif"></a>

As you can see, this command is comprised of two HTML commands that we have all ready covered. The first part <a href="WG address of the bill report"></a> calls up a bill report, or a web page, or another picture, ect. The second part <img src="Host.com/name.gif"> prints a picture to the screen. These two commands used together, will print a picture into your profile, that, when left clicked on by a user, will act as a link to another page. It works just like posting a bill report but the words "The Hit" that were used in the example above for posting bill reports is now a picture instead.

You may use this command to call up a George bill report, any another web page or a picture. The only requirement for using this command is, you must have the target page you want to show and the picture you want to use as the link, hosted someplace on the web.

Not many people know this but I am an avid collector.

Click on the Horse Barn picture below and see a picture of my Pride and Joy.

Sizing Your Picture

You may change the size of your picture by using the attribute of width="xxx" height="xxx". The numbers you use are the size of the picture in pixels. Most times you can find out the size of the picture by right clicking on it and choosing the word Properties.

When calling a picture with the "img src" command, just add this width height attribute like so:

original size	1/2 the pixels	1/3 the pixels
width="150" height="100"	width="75" height="50"	width="50" height="33"

Notice these numbers are in direct proportion to each other. If you cut the width attribute in half then you must cut the height attribute by the same percentage. You cannot just arbitrarily pick numbers out of the air because the picture will come out looking funny. Like so:

normal size picture

width="150" height="100"

change only the height

width="150" height="25"

horse barn gif 100%

A GOOD REASON TO SIZE YOUR PICS

You might want to think about using this command to specify
the pixel size of every picture in your profile.

When your browser sees an image tag it initially doesn't know how much space to allocate
so it allocates just enough for a "broken link" icon.

It will look something like this one:

After printing this small image, it will continue processing the rest of the page. When your browser finally determines the real size of the image, it then expands that allocation to the full size of the image and pushes the remainder of the page down. If the reader has happened to scroll down past the image, then the text he is looking at gets pushed off the bottom of the page. Sometimes rather abruptly! This can be very annoying if the profile has a lot of images or several large size images. You can prevent this action by sizing all your images in pixels. Naturally this action is subject to user connection speed. The faster the connection the less time it takes to allocate and therefore, the less trouble un-sized pictures cause. Keep in mind, not everyone has a speed demon connection.

PLEASE NOTE:

While it is not really necessary to do this, sizing your images will improve the loading of your profile, make it smoother, even if you are not trying to change the size of the original image.

"HEY! Wait a second!" you say "Your profile doesn't have sized pictures!"

Well, your right it doesn't. I have so many pictures and animations in my profile that if I sized them all, I would be well over the 65,000 limit and I would have to remove something to make the rest fit. If you have room to size them, then by all means do so. No room? Then don't!

Putting Your Sized Picture To Work

This command will print a small (you determine the size) picture in your profile and when clicked on, will open a new window to show the same picture but in full size.

Using this 'size attribute' will help you fit a large picture into a small space and it will let you keep the width of your profile down to manageable dimensions. This is especially true when trying to place your hits by county map into your profile. The maps are huge but with a little judicious application of the size attribute you can make things look just fine. If you want, you can use these size attributes to display a small picture of your map and have the user click on it and look at a larger view.

Here is the command with my hit map address all ready installed. The full size map is 1110 x 659. I have reduced it here to 300 x 178. All you need to do is replace both my addresses with your addresses, adjust the "xxx" and "yyy" numbers to suit your needs and you are ready to rock.

<a href="<img src=http://www.wheresgeorge.net/hitmaps_county/hit_map_county_a91c2a5ec7830657d0de492b68e1e674.png>" target="_blank"><img src="<img src=http://www.wheresgeorge.net/hitmaps_county/hit_map_county_a91c2a5ec7830657d0de492b68e1e674.png>" width="300" height="178"></a>

Click on The Map For Full Size View

"alt" A Tag That Tells All

The "alt" tag, inserted in the HTML code that calls up a picture, will place a caption in your picture. With this caption you may tell the user what the picture is, give them further information about the picture or offer the user other information. Here is the code that performs the deed:

Here is the code I used to add a caption to this picture:

<img src="http://www.PrimeReloading.com/x/horsebarn.gif alt="my caption goes here">

Place your curser on this picture to see how it works.

Dear Gary: I am really tired of looking at this Horse barn Gif!

THE HR COMMAND

The command <hr> stands for Horizontal Rule.

This command may be used at any time and does not require a closing flag of </hr>.

What this command does is place a line across your screen like so:

There are several way to dress up the plain old line.

You may call for a certain length in percentage of screen width:

Span 80% of the screen with this command: <hr width="80%">

Span 20% of the screen with this command: <hr width="20%">

Or you may want a thicker line:

<hr size="20">

Change the size and the width at the same time:

<hr width="75%" size="10">

How about a solid line?

<HR width="80%" size="10" noshade>

How about a solid line 80% across the screen filled with color?

<hr width="80%" size="10" color="#000080">

The default placement is always centered but you can move it to the left if you like:

<hr width="60%" size="10" color="#000080"align="left">

Or you can move it to the right with this command:

<hr width="60%" size="10" color="#000080" align="right">

You may do the same thing in pixels
instead of percentage of screen:

Span 300 pixels of screen width:

<hr width="300">

Span 500 pixels of screen width:

<hr width="500">

Span 500 pixels, size will be 10, color will be blue:

<hr width="500" size="10" color="#000080">

Span 400 pixels, size will be 15, color will be green, move to the right:

<hr width="400" size="15" color="green" align="right">

Want Your Profile Wider?
Put The <HR> Command To Work

Here is a way you can put the <hr> command to good use in a George profile. Once in a while people, who are not FOGs (and don't have the large Hits By County maps in their profile), want to make their profile wider. The easy way to do this is to add the width/color attribute to an <hr> command in the very beginning of the profile. Make the "xxx" pixel attribute number large enough to widen your page to the width you want while the color attribute makes the line blend into your profile's background.

What this command will do:

widen your profile to suit you

be invisible because you have made the color of the line the same color as the background

<hr width="xxx" color="same color as the background color">

PLAYING WITH TEXT

 and COMMAND

Two of the most often used commands are the and command.

The command will print your text, or picture/graphic and then will move to the next line. If you place the following sentence into your profile:

Mary had a little lamb it's fleece was white as snow

If you use the command, this is what you would get:

Mary had a little lamb
it's fleece was white as snow

Using the command gives you something different

Mary had a little lambit's fleece was white as snow

If you used the command, this is what you would get:

Mary had a little lamb

it's fleece was white as snow

It is easy to remember. A command moves whatever follows down one line.
The command moves whatever follows down two lines.

Change Font Color:

THIS TEXT IS RED

THIS TEXT IS NAVY BLUE

always use the close-with tag of 

You may call a color by name, as in BLUE, RED, YELLOW and so on, or you can use the hex number #FF0000 which in this case just happens to be red. Some colors of text may not be useable due to your background color. If you have white text on a white background nothing will show up!

Here are some colors you can call by name.
Aqua= #00FFF	Black=#000000	Blue=#0000FF	Fuchsia=#FF00FF
Gray=#808080	Lime=#00FF00	Maroon=#800000	Navy=#000080
Olive=#808000	Purple=#800080	Red=#FF0000	Silver=#C0C0C0
Teal=#008080	White=#FFFFFF	Yellow=#FFFF00	Green=#008000

And here are the HEX numbers for a few more!

216 BROWSER SAFE COLORS
Here is a list of the 216 Non-Dithering colors. These colors look the same when displayed in all browsers with any possible computer screen resolution settings.
FFFFFF	FFFFCC	FFFF99	FFFF66	FFFF33
FFFF00	CCFFFF	CCFFCC	CCFF99	CCFF66
CCFF33	CCFF00	99FFFF	99FFCC	99FF99
66FFFF	99FF66	99FF33	66FFCC	FFCCFF
99FF00	33FFFF	FFCCCC	33FFCC	00FFFF
66FF99	FFCC99	66FF66	66FF33	00FFCC
66FF00	33FF99	FFCC66	FFCC33	CCCCFF
33FF66	33FF33	00FF99	FFCC00	33FF00
00FF66	00FF33	00FF00	CCCCCC	CCCC99
99CCFF	CCCC66	CCCC00	CCCC33	99CCCC
FF99FF	99CC99	66CCFF	FF99CC	99CC66
66CCCC	99CC33	00CCFF	33CCFF	99CC00
FF9999	66CC99	FF9966	66CC66	33CCCC
CC99FF	00CCCC	FF9933	FF9900	66CC33
66CC00	33CC99	00CC99	CC99CC	33CC66
00CC66	CC9999	FF66FF	33CC33	33CC00
CC9966	00CC33	9999FF	00CC00	CC9933
CC9900	FF66CC	9999CC	FF6699	999999
6699FF	FF6666	CC66FF	999966	6699CC
999933	FFCC33	FF6600	FF33FF	3399FF
999900	669999	CC66CC	0099FF	FF33CC
3399CC	CC6699	669966	FF00FF	339999
669933	669900	FF3399	0099CC	9966FF
CC6666	009999	CC6633	CC6600	339966
FF00CC	FF3366	009966	CC33FF	FF3333
339933	009933	9966CC	FF3300	FF0099
339900	009900	6666FF	CC33CC	FF0066
996699	FF0033	FF0000	CC00FF	CC3399
996666	6666CC	996633	996600	3366FF
CC3366	CC00CC	9933FF	0066FF	666699
CC3333	CC3300	3366CC	CC0099	9933CC
666666	666633	0066CC	9900FF	666600
CC0066	336699	993399	CC0033	6633FF
336666	006699	CC0000	993366	9900CC
336633	006666	336600	6633CC	3333FF
006633	993333	993300	6600FF	990099
006600	0033FF	663399	009966	3333CC
663366	6600CC	990033	0033CC	990000
3300FF	663333	663300	660099	0000FF
333399	3300CC	003399	333300	660066
333333	003366	0000CC	660033	333300
660000	330099	003333	003300	000099
330066	330033	000066	330000	000033
000000

CHANGE FONT SIZE:

 close-with tag 

The higher the number the bigger the font size.

Experiment with different size text to get the best results.

Font size and Screen size.
<font size="1">8 points</font>
<font size="2">10 points</font>
<font size="3">12 points</font>
<font size="4">14 points</font>
<font size="5">18 points</font>
<font size="6">24 points</font>

Change Font Type Face:

 close-with tag 

 close-with tag 

You may call for any font by name. You may use any font you wish but you must remember one thing; you may have this font installed on your computer but another person might not. If he has it installed on his computer, all is just fine and dandy and the selected font will appear in your profile like you wanted it to. Unfortunately, if the other person does not have that font, then his default font will show instead of what you asked for. You pay your penny, and you take your chances. It is better to use common fonts that all people have.

Times New Roman, Arial, Arial Black, Arial Narrow, are just some of the standard fonts you can use. You may list as many odd shaped fonts as you like when using this command but be sure to end the list with at least one common font.

Underline Text:

 and close-with tag 

You may call for Underlined text with this command. Call the command, type the text you wish to have underlined and when you are done enter to turn the underline off. If you fail to turn off the command, the whole rest of the page will be underlined and very hard to read. Also most computer users see underlined text and think it is a link and will try to click on it. This is especially true if you have changed the color of the font at the same time. They try to click on your enormous piles of underlined text, and when it fails to do anything they think the programmer (YOU) is ‘Three fries short of a Happy Meal’ and will quickly move on to something else. For best results, use this command wisely.

Bold Text:

 and close-with tag 

You may call for bold text with this command. Call the command, type the text you wish and when you are done enter to turn the bold off. If you fail to turn off the bold command, the whole rest of the page will be in bold type and that might not be what you intended.

Italic Text:

 and close-with tag 

You may call for italic text with this command. Call the command, type the text you wish and when you are done enter to turn the italics off. If you fail to use the command, the whole rest of the page will be in Italics and nothing will really stand out like you wanted it to. Italics is a great way to call attention to a few words or to short passages you wish to make note of but overuse gets to be kind of a drag after a while. As you can see here, it would be a clear cut case of too much of a good thing. Also, people might suspect that you forgot to take your medication this morning.

A few final notes about text.

You may use all these commands to change text in one line if you like.

This line is Courier-size4-color green-underlined-italic-bold. Not that I have ever seen anyone use all these commands at once but it can be done!

This line is Courier-size4-color green-underlined-italic-bold. Not that I have ever seen anyone use all these commands at once but it can be done!

Plan on using multi-text-changing commands?

JT From MD says: A thing you are "supposed" to do is place closing tags on a "last opened - first closed" basis. That is, you should have:

bold italic red text

and not closed with

bold italic red text

In 99.9% of the cases it doesn't make any difference and the browser will display the text just as you expected. I have run into a (very) few cases where things did not turn out as expected because of the way closing tags were placed. The problem is sometimes caused by Hank's filter attempting to "correct" the code.

TABLES

Many people have asked about placing tables into their profile. Here is a 50 state bingo table you may use if you like. Naturally you must adjust the numbers to suit your own bill stats but this type of table is the easiest to use and maintain.

FIFTY STATE BINGO
AL -0	AK-0	AZ-0	AR-0	CA-0
CO-0	CT-0	DE-0	FL-0	GA-0
HI-0	ID-0	IL-0	IN-0	IA-0
KS-0	KY-0	LA-0	ME-0	MD-0
MA-0	MI-0	MN-0	MS-0	MO-0
MT-0	NE-0	NV-0	NH-0	NJ-0
NM-0	NY-0	NC-0	ND-0	OH-0
OK-0	OR-0	PA-0	RI-0	SC-0
SD-0	TN-0	TX-0	UT-0	VT-0
VA-0	WA-0	WV-0	WI-0	WY-0

You can also use this same table code for STATE COUNTY BINGO and 50 STATE WILD BINGO. Simply change the title in the first cell and then fill in the rest of the cells with your data.

The code for this table is listed below.

You may change the colors and the size of the table if you like.

The table border="4" part is the thickness of the border. It can range from zero to what ever number you think looks the best. The larger the number, the larger the border size.

The width="80%" command tells you how wide the table is to be in a percentage of the total screen width. You may change this number to suit your current needs.

The lines bgcolor="#008d6c" and bgcolor="#808080" are background colors of the cells in the table and font color="#800000" is the color of the text in the table header. These color numbers may also be changed to something that blends well into your profile.

The command font size="1" and font size="2" is the size of the text in each of the cells. You may change this number if you like. The bigger the number the larger the text size.

Here is the HTML code that was used to make the above table. You can just copy and paste it right into your profile wherever you like to put it. Note to you power users, yes there is extra code in this table that is not really necessary but I have included all the code and none of the short cuts that high level HTML users would use. The average person is here looking for the basics and this is what this code is. One must walk before they can run! Not to cast any aspirations but I wonder why I picked such drab colors for that table? Maybe my therapy sessions are not working after all.... Feel free to change the colors to something that suits your profile tastes.

<center>
<table border="4" cellpadding="6" cellspacing="3" bgcolor="#008d6c" width="80%">
<tr bgcolor="#808080">
<td align="center" colspan="5">
FIFTY STATE BINGO</td>
<tr>
<td align="center" width="20%">AL-0 </td>
<td align="center" width="20%">AK-0 </td>
<td align="center" width="20%">AZ-0</td>
<td align="center" width="20%">AR-0</td>
<td align="center" width="20%">CA-0</td>
</tr>
<tr>
<td align="center">CO-0</td>
<td align="center">CT-0</td>
<td align="center">DE-0</td>
<td align="center">FL-0</td>
<td align="center">GA-0 </td>
</tr>
<tr>
<td align="center">HI-0</td>
<td align="center">ID-0</td>
<td align="center">IL-0</td>
<td align="center">IN-0</td>
<td align="center">IA-0</td>
</tr>
<tr>
<td align="center">KS-0</td>
<td align="center">KY-0</td>
<td align="center">LA-0</td>
<td align="center">ME-0</td>
<td align="center">MD-0</td>
</tr>
<tr>
<td align="center">MA-0</td>
<td align="center">MI-0</td>
<td align="center">MN-0</td>
<td align="center">MS-0</td>
<td align="center">MO-0</td>
</tr>
<tr>
<td align="center">MT-0</td>
<td align="center">NE-0</td>
<td align="center">NV-0</td>
<td align="center">NH-0</td>
<td align="center">NJ-0</td>
</tr>
<tr>
<td align="center">NM-0</td>
<td align="center">NY-0</td>
<td align="center">NC-0</td>
<td align="center">ND-0</td>
<td align="center">OH-0</td>
</tr>
<tr>
<td align="center">OK-0</td>
<td align="center">OR-0</td>
<td align="center">PA-0</td>
<td align="center">RI-0</td>
<td align="center">SC-0</td>
</tr>
<tr>
<td align="center">SD-0</td>
<td align="center">TN-0</td>
<td align="center">TX-0</td>
<td align="center">UT-0</td>
<td align="center">VT-0</td>
</tr>
<tr>
<td align="center">VA-0</td>
<td align="center">WA-0</td>
<td align="center">WV-0</td>
<td align="center">WI-0</td>
<td align="center">WY-0</td>
</tr>
</table>
</center>

ANOTHER TABLE
(with ugly colors!)

I don't know if you can find a use for it but here is the code for another table. I use something like this in my profile to track Milestone hits. It works just like the table above as far as color changes and font size is concerned.

CHANGE THIS TITLE TO WHAT EVER YOU LIKE
XX	XX	XX	XX	XX	XX	XX	XX	XX	XX
XX	XX	XX	XX	XX	XX	XX	XX	XX	XX
XX	XX	XX	XX	XX	XX	XX	XX	XX	XX
XX	XX	XX	XX	XX	XX	XX	XX	XX	XX
XX	XX	XX	XX	XX	XX	XX	XX	XX	XX
YOUR TEXT	YOUR TEXT								YOUR TEXT

<CENTER>
<table border=4 cellpadding=6 cellspacing=3 bgcolor="#008d6c" WIDTH="80%">
<tr bgcolor="#c0c0c0">
<td align=center colspan="10">CHANGE THIS TITLE TO WHAT EVER YOU LIKE
</td>
<tr bgcolor="#826ba9">
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
<td align=center width="10%">XX</td>
</tr>
<tr bgcolor="#826ba9">
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
</tr>
<tr bgcolor="#826ba9">
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
</tr>
<tr bgcolor="#826ba9">
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
</tr>
<tr bgcolor="#826ba9">
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
</tr>
<td align=center colspan="1">YOUR TEXT</td>
<td align=center colspan="8">YOUR TEXT</td>
<td align=center colspan="1">YOUR TEXT</td>
</tr>
</table>
</CENTER>

MAKING A TABLE WITH CLICKABLE LINKS

As you probably realize by now, you can turn any text or picture into a clickable link. The text itself does not have to stand all alone on the page of your profile. It can be a single word or phrase buried in the middle of a long paragraph or, if you like, it can show up as a word or two inside any cell of a table. By the same token, you can link to anything on the net if you know the web address. You may call up a George Bill Report, a favorite web site, or display to the world your home family album.

The HTML code for making text a link is:

<a href="WG address of the bill report">The Hit</a>
OR
<a href="http://www.YourHomePage.com">My Favorite Site</a>
OR
<a href="http://www.YourPictureAlbum.com">Look At My Pics</a>

Here is a table that has two cells that are clickable links. Because of my current lack of imagination, both of these cells open a new window and takes you to the old horse barn gif. As with any other table in this tutorial, you may change the text, back ground colors, and text colors. Also, you can make every cell in this table a clickable link. It is naturally up to you to supply your own favorite links because it is 3 o'clock in the morning and I am fresh out of ideas!

A TABLE WITH A CLICKABLE LINKS
click here	XX	XX	XX	XX
XX	click here	XX	XX	XX

<CENTER>
<table border=4 cellpadding=6 cellspacing=3 bgcolor="red" WIDTH="80%">
<tr bgcolor="#c0c0c0">
<td align=center colspan=5>A TABLE WITH CLICKABLE LINKS</td>
<tr bgcolor="gray">
<td align=center width="20%"><a href="http://www.primereloading.com/x/horsebarn.gif" target="_blank">click here</a></td>
<td align=center width="20%">XX</td>
<td align=center width="20%">XX</td>
<td align=center width="20%">XX</td>
<td align=center width="20%">XX</td>
</tr>
<tr bgcolor="gray">
<td align=center>XX</td>
<td align=center><a href="http://www.primereloading.com/x/horsebarn.gif" target="_blank">click here</a></td>
<td align=center>XX</td>
<td align=center>XX</td>
<td align=center>XX</td>
</table>
</CENTER>

TABLES WITH OUT BORDERS

You may have noticed the George Profile Page ignores multiple spaces. Anything more than one space between words or pictures still only shows up as one space in your profile. You could use the command   which is the HTML equivalent of a SPACE but you might require dozens of them and still, the images are not exactly where you want them. Using Java Script would make this chore easy but Script is not allowed in profiles. When you are having problems placing several images into your profile in the exact spot you want them to appear, you can, most times, place all the images and text in a table without a border. Here is an example:

It was easy to place these seven images onto this screen using Microsoft FrontPage. I plunked them down, told them to behave and that was where they stayed! Because of the multiple-space-ignore feature on a Where's George Profile Page, it requires a little slight of hand to get things to work out right. If you need to line up text, pictures or graphics in a certain spot, you might wish to try this:

Make a one row table with ten columns. It would look like this:

Place your images into corresponding cells and line them up to suit your tastes. You may also add text to some of the cells if you like.

text

The first line of code that makes this table usually reads:
<table border=2 cellpadding=6 cellspacing=3 width="100%">
Change the code from: border=2 to border=0 like so:
<table border=0 cellpadding=6 cellspacing=3 width="100%">

Table with borders:

text

This is what the table would look like in your profile without the border.
All the graphics are lined up the way you want them and will not move around!

text

Here is the code for the above borderless table.
Naturally you can add or subtract cells or make multiple rows as needed.

Using Borderless Tables In George Profiles.

You may not need this borderless table trick right now but keep it in the back of your mind because every once in a while it comes in handy. The best part is, people wont see the table borders and will wonder how you managed to get those pictures, graphics and text all lined up in exactly the right spot. Unless they peek at your HTML source code, they will never figure out how you did it!

You probably didn't notice but the text and the two pictures of George at the very top of this page are enclosed in a borderless table. By sticking them in a 3 cell table, I know, regardless of what monitor setting you choose, the pictures and the text will always line up in a straight row!

After all, WE know how much George likes to wander around!

Here is a copy of the table from the top of this page with the border showing:

The following is a short(?) information file
on how to use HTML in
"Where’s George" profiles.

And here is the code that I used to make the table:

<table border="0" width="740">
<tr>
<td width="15%"><img src="http://www.Host.com/george.gif" width="120" height="131"></td>
<td width="70%"><align="center"><font color="#000080" size="5">The following is a short(?) information file on how to use HTML in Where’s George profiles.</td>
<td width="15%"><img src="http://www.Host.com/george.gif" width="120" height="131"></td>
</tr>
</table>

Notice the width of the whole table is 740 pixels. That should be a very comfortable fit on most any computer screen.

The two pictures of George are allotted 15% of width on each end cell and the other 70% is used for the cell in the middle that contains the text. You may use the exact number of pixels instead of a percentage if you like.

Since I used the "font=" opening command to change the text color to #000080 and simultaneously set the size of the text to "5" I must also use a closing tag of  at the end of that line.

Naturally, when the border size is set to 0 (zero) the border does not display and the two   tags inserted in the text causes a line break (much like pressing the enter key in a word processor) and shifts the remaining text to the next line. Also, I have used the width/height attribute of 120-131 to size the George pics just to show you how it is done.

One last Thing About Table Borders

You might have noticed that a standard table seems to have depth. Sort of a 3D effect. It looks like it stands out from the background of the web page.

This table is just your standard run of the mill table. The first line of the code reads:

1	2	3
4	5	6

Notice how the surface of the table seems to be raised up from the background of the web page. This raised effect is caused by the left and top edges of the table being a different shade from the bottom and right side edges. This color contrast gives a shadow effect and makes the eye see a raised table platform where there really is none.

And here is where the trouble starts

If you change the color of the border using the HTML command of bordercolor="green" than all four sides of the table will become the same shade of green and you will lose the raised 3D effect. Here is the first line of the HTML code used to make this flat looking green table:

<table border="8" cellspacing="1" cellpadding="1" width="50%" bordercolor="#008000">

1	2	3
4	5	6

Now how Hum-Drum is that?
Like the color but wish you could still have that raised effect?

There is a solution!

The good news is, you can have color and depth at the same time. All you need to do is tell the borders what color you want them be. You may use this command to change the borders into two different shades of color.

<table border="8" cellspacing="1" width="50%" bordercolorlight="#00CC99" bordercolordark="#008080">

The HTML command bordercolorlight="#xxxxxx" controls the left and top border. The bordercolordark="#xxxxxx" controls the bottom and right border. If you make the top&left border a few shades lighter than bottom&right border you can change the color of the table's border and still keep that raised 3D effect. Like so:

1	2	3
4	5	6

Here is the code that I used to make this color raised table:

<table border="8" cellspacing="1" cellpadding="1" width="50%" bordercolorlight="#00CC99" bordercolordark="#008080">
<tr>
<td width="33%" align="center">1</td>
<td width="33%" align="center">2</td>
<td width="34%" align="center">3</td>
</tr>
<tr>
<td width="33%" align="center">4</td>
<td width="33%" align="center">5</td>
<td width="34%" align="center">6</td>
</tr>
</table>

Needless to say, you don't have to limit this effect to two shades of one color for a 3D effect! You can use other colors to give an eye catching effect and make the table really stand out if you like!

bordercolorlight="#008000" bordercolordark="#FF0000

1	2	3
4	5	6

bordercolorlight="#00FF00" bordercolordark="#0000FF

1	2	3
4	5	6

Do a little experimenting and see what you can come up with!

DROP DOWN MENUS

(OR: how to drive yourself nuts without even trying)

Drop Down menus have a lot going for them. You can show a ton of information in a relatively small table viewing area and if you adjust the menu colors to accent your profile background color, the effect can be quite pleasing to the eye! Another plus is that not many profiles have these menus, so the viewer is pleasantly surprised when he stumbles upon one. Also, it gives the viewer something to do, some way to interact with what is showing on the screen.

The down side to Drop Down Menu is they are very labor intensive. If you receive a large number of hits in new cities on a regular basis, you are going to spend a huge amount of time on maintaining the accuracy of the menu. Keeping the data in the menu up to date is not a job for the squeamish!

While maintenance of the menu can be time consuming, the main drawback about drop down menus is the code itself. It takes many bytes of code to make a menu. This behemoth size code makes little difference on a web page where disk space is practically unlimited but as you know, you are permitted only 65,000 bytes in your profile. If you have hits in several hundred different cities, this menu alone can easily take 25 to 40 percent of this total!

This table, as it stands right now, without any of your city data added, takes up just under 11,000 bytes.

Here is a drop down menu for 50 state bingo. I have added room for three city names in each state. Chances are good you wont have a use for most of these areas so you will need to add and subtract fields as needed. Instructions on how to modify the table are included below.

FIFTY STATE BINGO

HITS BY CITY FOR EACH STATE