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>.
In the 1830s, this site was identified by Surveyor-General Sir Thomas Mitchell as a suitable source of rock for surfacing roads.
You also have the ability to align paragraphs to the left (default setting), center or right.
Example:
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.
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 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 email me 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.
Will look like:
N 44° 15.307
W 85° 37.183
CENTER - The CENTER tag positions the text or image it encloses in the center of the cache page. Note: US spelling.
Example:
A sample of basalt.
BLOCKQUOTE - The BLOCKQUOTE tag is used to contain text quoted from another source rendering it with a slight extra left and right indent.
Example:
It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness…
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 tag is used to set the typeface, colour and size of text on the cache page. You can use all or only one attribute. When listing more than one font face 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:
WARNING: This cache is located at the top of a very high cliff.
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:
a logbook,
trade items
and a pen.
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:
A HREF - The A HREF tag is used to designate a hypertext link to another web page or to an email link.
Example:
Geocaching 101 – Sydney 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 link for an email address:
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:
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- 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:
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:
BODY – The BODY tag is used to set a colour and/or graphical image for the background of a cache page.
Example:
SPECIAL CHARACTERS - To create special characters, such as the degree symbol, you must use special code.
Example (remove spaces):
& amp ; = &
& copy ; = ©
& reg ; = ®
& frac 14 ; = ¼
& frac 12 ; = ½
& frac 34 ; = ¾
& cent ; = ¢
& deg ; = °
& nbsp ; = (creates a blank space)
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)