What I like to call
the Complete Idiot's Guide to Using HTML on Geocache Listings
by thBriGuy

This is a brief tutorial on basic HTML (HypertText Markup Language) for geocache listings.
I taught myself HTML by reverse engineering of web pages, and trial and error. I have never used any HTML programs, I've done all my coding with a text editor, usually notepad. I use a windows based pc so Mac users are on their own if there is a varience.
Since I have no formal training in HTML, I may use terms that are not exactly correct, but it is how I have come to remember things and it should prove useful to others that way.
If you have enough knoweldge to know that I've called something the wrong name, you probably won't need this information anyway.


Cut and paste

The first thing you need to know is how to cut and paste. This is where mac users may want to seek info elsewhere. Windows user may continue reading. Cutting and pasting uses a part of the memory called the clipboard. There is no actual clipboard, nor program used to access it. I think there used to be a clipboard viewer, but there really is no need. You can only have one "item" on the clipboard at a time. To copy something, say the HTML code on the logolink page, you will first need to highlight it. There are 2 ways of doing this. (1) Click on the text, and while holding the button down, drag the curser across the text to highlight or (2) click on the text, then hold the shift key down while using the arrow keys to move the cursor. See example image below. Now to copy what is highlited to the clipboard, simply press Ctrl-C and it will be copied. there will be no sound or anything to let you know it was successfull. Now to paste it, click to put the cursor where you want it and press Ctrl-V and it will be pasted. Obviously Ctrl-C to Copy, but why "V"? Dunno. Probably because it is right next to the "C".




Setting the cache page

Now, in order to use HTML on your cache pages, you have to tell it that you are going to use HTML. On the cache editing (or submission) page, you need to tick the box that says The descriptions below are in HTML - otherwise geocaching.com will strip all your code out when you click "edit"/"submit".



Now you have enough information to use the images on the logolink page, but what if you want to use your own image, or the text is now all bunched together? Well, read on, I'll cover those topics, and a little more...

Using your own image

So you want to upload your own graphic, or photo to use on your cache page? Here's what you need to do. Upload your photo, then go back to the cache page and find it listed just above the logged visits section, then click the link, which will most likely open a new window and show you the image. In the address bar, you should see http://img.geocaching.com/cache/then a whole bunch of seemingly random numbers and letters, this is the image location (see example below). You will need to highlite and copy everything from the http to the .jpg to the clipboard. Then you are going to write an HTML tag on your cache page where you want the image. It will look like this:

<img src=paste in the image location here>
So it looks something like this
<img src=http://img.geocaching.com/cache/52938acf-0ff4-43be-a14b-de406f119093.jpg>
This is the image tag, it's components are the brackets (always use the "less than"/"greater than" brackets)< > the image img, and the source src=. The source should always start with http so that you know that it is pointed at a web location, and not a local file on your computer. If it points to a local file on your computer, it would look just fine to you, but not for anyone else...


Should you wish your image to be centered, you will need to set the format to center, this uses a pair of tags, one before, and one after the image, like so:
<center>
<img src=http://home.earthlink.net/~gpscachers/images/GPScLogo_tile.jpg>
</center>
Will look like this...


Text Formatting

So you had your text all set up, then you added HTML and now your text is all jumbled together. Well, that is because HTML does not see carriage returns or multiple spaces. You need to learn some formatting tags. the first one is the line break <br>. For example, if you had the following in an HTML cache page,

come see my cache
It's pretty neat!

It's under the rock
I know because I hid it there myself.
would look like this without the proper formatting,

come see my cache It's pretty neat! It's under the rock I know because I hid it there myself.

but if it were formatted using line breaks, like this:
come see my cache<br>It's pretty neat!<br><br>It's under the rock<br>I know because I hid it there myself.
the output would match the original intended format. You can use multiple line breaks to create larger gaps between lines. Also available is the horizontal rule <hr> which looks like this
There are also some text style formatting tags, and like the center tag explained above, they require an opening <chosen format> tag and a closing </chosen format> tag. Some examples include:
<b>bold</b><br>
<i>italic</i><br>
<u>underline</u><br>
have the following output:
bold
italic
underline

Then there is the font tag, it has many uses, including changing the type face, which I won't get into, because it requires the end user to have that font. Other things you can do with the font tag is change the text size, and/or color. <font size=+1>will make the text larger</font> and <font color=green>will change the color</font>
The <center> and </center> set can also be used for text, in fact you can split it to the top and bottom of your page and center everything.
Experiment and mix and match. It'll be fun.



Adding Hyperlinks

This is why HTML was created, the hyperlink. It is used to link to another page, you use them all the time. It's pretty simple, if you know the URL you want to link to, http://www.gpscacher.com for example. To make a hyperlink that says click here to visit the Greater Palm Springs cachers website use the following code:

<a href=http://www.gpscachers.com>
click here to visit the Greater Palm SPrings cachers website
</a>
Dont forget to close the <a href=> with an </a> and you can even use an image tag between the hyperlink tags to make a clickable image.






Good luck, and I'm looking forward to seeing more creative cache pages.
If you found this helpfull, or you feel it needs something more,
please contact me and let me know.-=th'BriGuy=-

<a href=http://www.gpscachers.com/contents.html>click here to go back to contents</a>
click here to go back to contents