Creating HTML Cache Pages on Geocaching

After some discussion in the forums recently, members of the society decided it would be useful to develop a guide to beautifying your caches pages using the Hypertext Markup Language (HTML).

This article provides step by step instructions on how this can be done.

Getting Started

To produce pretty geocaching.com cache pages takes two main steps.

1. Enable descriptions in HTML
2. Create html text in the Long Description field

To enable the descriptions in html, check the box entitled "The descriptions below are in HTML". If you are having trouble with your long description text appearing all run together with no breaks, you have probably enabled HTML without writing any HTML code in the long description field.

{mosimage}

Some Basic HTML Rules

There are a couple of quick things that you need to be aware of when writing HTML.

Firstly, there are two different types of tags in html.

1. Single tags - these are stand alone tags such as <br /> or <hr />. They don't contain any content. They used to be written <br> but these are no longer used and should be replaced by the tags shown above with the space and the slash.
2. Containers tags - these tags do contain content.
   • <p>This is a paragraph.</p>
   • <b>This text is bold</b>

Secondly, and this applies specifically to container tags such as <b> and <p>, containers must be closed in the order that they were opened. What does this mean?

What say you have a paragraph that has some bold text inside it? There are a number of different ways it could be written.

1. <p>This is a paragraph with <b>some bold text at the end</p></b>
2. <p>This is a paragraph with <b>some bold text at the end</b></p>

Whilst both of these may work in browsers, only one is correct. Container tags need to be opened and closed in the same order. So, we start with a paragraph tag, so it must be the last to be closed. The bold tag is contained within the paragraph tag, so it must be contained completely within <p></p>. The correct way of the above html is therefore No. 2.

Getting Down and Dirty with the Text

There are two description fields available - Short and Long.

It is not recommended to use html in the Short description, as this field is very short - 500 characters. If you do utilise html in this field you won't be able to display very much information because many of the characters will be taken up with html code that doesn't appear, so it is recommended that you limit weaving html cache magic to the Long Description.

{mosimage}

The first problem you may face if converting an old plaintext cache page to html is all the text running together. There are two tags that you'll want to learn straight away, the paragraph and line break - <p></p> and <br />.

It is recommended that you first format your text using paragraph tags, rather than using the line break to create psuedo-paragraphs by stringing two line breaks together.

<p>Paragraph One</p>
<p>Paragraph Two</p>

Don't use: -

Paragraph One<br /><br />
Paragraph Two

Once you've got the basic paragraphs marked, check your page and see how the paragraphs are spaced. You may find that you need a little more manual control over spacing, and this is where you use <br /> to insert a forced line break within a paragraph.

Next up, you may want to draw attention to certain words in your text. To do this you can utilise bold (<b></b>) and italic (<i></i>).

<p>This paragraph contains some <b>bold words</b> and some <i>italic words</i>.</p>

That code would produce this result: -

This paragraph contains some bold words and some italic words.

Making Web Links

Many web pages find it useful to link to other web pages that may be of interest or use to a cache, including providing GPX or image files for download.

The code to produce a link is as follows:-

<a href="URL goes here">Link Text</a>

So, if you want to provide a link to a GPX file on your cache page, you can do that as easily as the example below: -

<p>There is a <a href="http://gps.org.nz/gc1234.gpx">GPX file</a> available for download that contains the car park and waypoints for this cache.</p>

If you would like a link to open in a new window you can add target="_blank" to the code as follows: -

<a href="http://gps.org.nz/gc1234.gpx" target="_blank">GPX file</a>

Lists

Sometimes it can be handy to list a few things in your cache description. Luckily, HTML supports a wide variety of listing - I'll cover a the most common two now.

Firstly, a straight list where order isn't important (for the curious this is an Unordered List, hence where <ul> comes from). This code: -

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Will produce this: -

• Item
• Item
• Item

Secondly, a numbered list (this is an Ordered List, hence <ol>). This code: -

<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>

Will produce this: -

1. Item One
2. Item Two
3. Item Three

Adding Images

Many caches can benefit from the adding of images and photos to go with the text. Here's a couple of ways it can be done.

Images can be hosted either on your own server, or you can upload them to the cache page, and have geocaching.com serve the images. To see how this is done, look at the background image example further on.

A simple technique to get started is inserting an image between paragraphs. The following code will left align the image.

<p><img src="http://www.link.to/image.jpg" /></p>

The image may look better centred on the page, so we can do that too by modifying the HTML slightly. Note that we have to use American spelling of center for this to work.

<p><img align="center" src="http://www.link.to/image.jpg" /></p>

A third useful technique is to embed an image within a paragraph and align it to the right hand side. This takes up less space and the text will wrap around the image. Check out this code: -

<p><img align="right" src="http://www.link.to/image.jpg" />This is the paragraph text etc...</p>

Adding gps.org.nz logo

Some members have requested a means of adding the gps.org.nz logo and link to their cache pages.

<p><table align="center" style="border:0px;border-top:1px solid silver;padding-top:5px;"><tr><td><a href="http://www.gps.org.nz/"> <img src="http://www.gps.org.nz/images/gps_small.gif" border="0" alt="gps.org.nz home page" height="57" width="125" /></a></td><td valign="middle">For more information about geocaching in New Zealand,<br />visit the <a href="http://www.gps.org.nz/">New Zealand Recreational GPS Society</a></td></tr></table></p>

Credits

Thanks must also go to: -

• RyckZ

History

• 20050525 - removed background picture because of gc.com site redesign
• 20050526 - added instructions to add gps.org.nz logo