geo-banner-1 geo-banner-2 geo-banner-3 geo-banner-4 geo-banner-5

Placing a geocache

HTML for cache pages

If you’re tired of your geocache listing page looking dull and drab, there are a number of ways you can add colour and formatting.

The simplest approach is to use either a word processor (e.g. Microsoft Word) or an HTML editor (e.g. Dreamweaver) to design your page and save as HTML.

Open the .html file using Notepad or TextEdit and copy the text between the lines <BODY> and </BODY>. Unfortunately, most of these programs create surplus HTML coding, which makes later editing cumbersome and time consuming.

An alternative is to learn HTML coding and use Notepad or TextEdit to create your own. Note: make sure you select plain text, not rich text (RTF) when writing your HTML.

Basics of HTML

HTML uses commands know as tags to change the appearance of the text and add elements such as lines and images.

All HTML tags consist of a command surrounded by a ‘<’ and a ‘>’. For example, the command for inserting an image is <IMG>. Most HTML tags have a corresponding closing tag (eg.<P> and </P>).

Following is a list of HTML tags you may find useful when creating your geocache listing page.

P - The P tag stands for paragraph. Each new paragraph should begin with a <p>and end with a </p>.

<p>In the 1830s, this site was identified by Surveyor-General Sir Thomas Mitchell as a suitable source of rock for surfacing roads.</p>

You also have the ability to align text to the left (default setting), center or right.

Example:

<p style="text-align: center;">After the quarry closed in the 1940s, the area became a landfill, and in the 1960s was converted to a recreation area and playing field.</p>

After the quarry closed in the 1940s, the area became a landfill, and in the 1960s was converted to a recreation area and playing field.

B - The B tag adds a bold effect to text.

Example:

Describe (colour, structure and type of rock) the three main layers of <b>sedimentary</b> rock to the south of the waypoint.

Describe (colour, structure and type of rock) the three main layers of sedimentary rock to the south of the waypoint.

EM - The EM (or I) tag adds an italicised effect to text.

Example:

To log your find at this EarthCache <em>email me</em> with the answers

To log your find at this EarthCache email me with the answers

PRE - The PRE tag presents blocks of preformatted text in a fixed-width font. This works well for aligning coordinate values. The Decryption Key on a cache page uses this code to format and align the decryption section.

Example:
<pre>N 44° 15.307</pre>
<pre>W 85° 37.183</pre>

Will look like:

N 44° 15.307
W 85° 37.183

BLOCKQUOTE - The BLOCKQUOTE tag is used to contain text quoted from another source rendering it with a slight extra left and right indent.

Example:

<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness…</blockquote>

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness… 

FONT - The FONT attribute in the span tag is used to set the typeface, colour and size of text on the cache page. You can use one or many attributes. When listing more than one font the web browser will try to use the first font type face first, then the next, etc. The font must be installed on the users computer for it to be displayed, so try to use common fonts.

Example:

<span style="font-family: Comic Sans MS, Verdana, Arial; color: red; font-size: medium;">WARNING: This cache is located at the top of a very high cliff.</span>

WARNING: This cache is located at the top of a very high cliff.

BR - The BR tag breaks the text and starts it again on the next line. This tag does not require a closing tag.

Example:

This geocache contains:<br />a logbook,<br />trade items<br />and a pen.

Becomes:

This geocache contains:
a logbook,
trade items
and a pen.

 

HR - The HR tag creates a horizontal line across the page. This tag does not use a closing tag. A width attribute can be added in a percentage of page value or a pixel value.

Example:

<hr /&lgt; Becomes:

 

<hr width="50%">

 

A HREF - The A HREF tag is used to designate a hypertext link to another web page or to an email link.

Example:

<a href="http://www.geocachingnsw.asn.au/">Geocaching NSW</a>

Geocaching NSW

<a href="http://coord.info/GC1P3AE">Geocaching 101 – Sydney</a> by Geocaching NSW

Geocaching 101 – Sydney by Geocaching NSW

Normally, a link will open in the same window as the link. To force it to open in a new window add the TARGET attribute.

<a href="http://www.geocaching.com.au/" target="_blank">Geocaching Australia</a>

Geocaching Australia

A link for an email address:

<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it. ">Email Geocaching NSW</a>

This email address is being protected from spambots. You need JavaScript enabled to view it.

 

UL and OL - The UL tag is used to present an unordered list of items which is typically separated by white space and/or marked by bullets.

The OL tag presents a numbered list of items, sorted by sequence or order of importance. The LI tag represents a List Item.

 

Example:

<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>

Becomes: 

  • Item 1
  • Item 2
  • Item 3

Example:

<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>

Becomes:

  1. Item 1
  2. Item 2
  3. Item 3

 

IMG - The IMG tag is used to incorporate in-line graphics into an HTML document. The ALT provides for alternate text when your mouse is over the image.

Example:

GPS at Trig point

To incorporate an image into your geocache listing page first you must upload it to the cache page.

 

  • Click on the Upload image link, choose the file and click on the Upload button.
  • Go back to the listing page and click on the image’s edit hyperlink (above the Logged Visits section), then click on the image – it should open in its own window and the URL will end with .jpg.
  • Copy the complete URL and paste into the IMG tag.

 

Example:

<img src="http://img.geocaching.com/cache/102f36f2-add3-4a53-88fa-b99be160107b.jpg" alt="Dundas" />

Dundas

 

BODY – The BODY tag is used to set a colour and/or graphical image for the background of a cache page. You only need to use this tag once to set your choice and it can be placed in either the Short or Long Description areas of the cache submission form. You can set the background color to a hexadecimal value or simply use a primary color name, i.e., red, blue, etc. If you use a hexadecimal value, the first two digits represent red, the second two represent green, and the last two blue. Each digit can have a value from 0-9 or a-f. A value of 000000 = black, ffffff = white, ff0000 = red, 00ff00 = green, and 0000ff = blue. A list of hexadecimal colours can be found on the W3schools website.

Example: <BODY BGCOLOR="#22ef3c">

You can also use an image in the background using the image's URL, which is then tiled in the background.

Example: <BODY BACKGROUND="http://imgcdn.geocaching.com/cache/large/556dace8-8fc6-4657-b066-5a811a595bda.jpg"> used on this page.

SPECIAL CHARACTERS - To create special characters, such as the degree symbol, you must use special code.

Examples:

  • &amp; = &
  • &copy; = ©
  • &reg; = ®
  • &frac14; = ¼
  • &frac12; = ½
  • &frac34; = ¾
  • &cent; = ¢
  • &deg; = °
  • &nbsp;  = (creates a blank space)

You'll find more at the W3C website.

Adding to geocache listing page

When you have finished 'coding' your cache description page, click on the Edit Listing link.

Scroll to the details section and click the checkbox next to The descriptions below are in HTML.

Copy and paste the HTML from your text editor into the Long Description field, click on the checkboxes to confirm you agree to the guidelines and terms of use, then press Submit Changes.

Note: It's best to code in stages. This helps you identify any errors in your code quickly. You should also keep a copy of your original text, in case you want to revert to the original.

Adapted from Northern Michigan Geocachers website (http://www.nmg-geocaching.org)