Geocache-HTML Primer
 Edit 84, 2012-Mar-14  • Created 2008-02-18 

© 2008-2012 by GizmoGuy411

(PLEASE post comments, questions, corrections via the above link.)
 

A HTML primer with usage techniques for enhancing your cache pages at Geocaching.com (GC)

INTRODUCTION

You can significantly enhance the appearance of your geocache pages, by adding some simple HTML to them.

HTML is an acronym for HyperText Markup Language.

HTML ELEMENTS are the codes that tell a web browser how to present things. The ELEMENTS themselves are always surrounded by the "less than" and "greater than" symbols which make them into "TAGs". There is usually one beginning and one ending TAG for each ELEMENT. The ELEMENTS within these TAGS contain KEYWORDS and some also may have ATTRIBUTES with their ATTRIBUTE VALUES.

While some HTML ELEMENTS require ATTRIBUTES, many have optional ATTRIBUTES that change the way an ELEMENT works.

"HORIZONTAL RULE" ELEMENT HTML TAG EXAMPLE
  Element Name or Name Abbreviation Attribute Name Attribute Value  
< hr color= "red" >
<hr color="red">
Note that the color attribute was optional in this example.

Of the many ATTRIBUTES available, only a few select ATTRIBUTES are shown for the ELEMENTS listed below.

If you add any HTML TAG to your geocache pages, be sure to check the "HTML box" on the cache editing page before you submit your changes.

Once you have checked that box, you must at least add the <br> tags to format your line breaks. Otherwise all lines will run together.

Note that not all valid HTML ELEMENTS are recognized by GC (Geocaching.com). Most HTML ELEMENTS that are not allowed are simply ignored.

If you see sites or cache pages you like, you can borrow ideas from them by viewing their HTML source code in your web browser. For many browsers, click on "View" and then "Source" to see the HTML used.

Although GC also accepts the use of some CSS (Cascading Style Sheets) code within the cache pages, it is only addressed briefly in this primer. See the link below.

Active-X, Flash, and Java scripting are not allowed.

While most important Elements are described in this primer, it is not comprehensive. Also GC may periodically change the Elements that are permitted. They will be added or removed from future edits of this primer as their usage on GC becomes known. When you edit a cache page at GC, it now shows a list of available HTML Elements, when you check the HTML checkbox. As this is a later addition to GC, their list has not yet been compared to this document. (Noted on 2012-03)

See the "Usage Considerations" below for more information.

Primer Contents
 (you may click on an Element name to scroll directly to that Element)

- Elements: Bold | Italic | Underline | Strike | Font | Center | Marquee | Anchor (hyperlink) | Image | Comment | Line Break | Preformatted Text | Paragraph | Horizontal Rule | Ordered List | Un-ordered List | Table

- Use of Cascading Style Sheets (CSS)

- GC Cache Page Widths

- Usage Considerations

Each HTML element will be explained in a box similar to this:

Element: Name Start Tag End Tag
This will show the Element name This will show the Start or opening tag with the Keyword or Keyword Abbreviation used for the Element This will show the End or closing tag with the Keyword or Keyword Abbreviation use for the Element
Description: This row will give a brief description of what the Element does.
HTML Code: This row will show an actual example of the actual HTML code.
Result: This row will show how the above HTML code should look in a browser.

HTML ELEMENTS

Element: Name Start Tag End Tag
Bold <b> </b>
Description: Displays text in bold.
HTML Code:
Result:

This is how to display bold text.


Element: Name Start Tag End Tag
Italic <i> </i>
Description: Displays text in italics.
HTML Code:
Result:

This is how to display italic text.


Element: Name Start Tag End Tag
Underline <u> </u>
Description: Displays underlined text.
HTML Code:
Result:

The word TEST is underlined in this sentence.


Element: Name Start Tag End Tag
Strike <strike> </strike>
Description: Displays text with a line through it.
HTML Code:
Result:

The word TEST has a line through it in this sentence.


Element: Name Start Tag End Tag
Font <font> </font>
Description: Controls the text font with optional face (font name), size and color attributes.
HTML Code:
Result: This is SIZE 1 in ARIAL BLACK font, and this is the color RED in VERDANA font size 2.
Notes: - Click HERE to see some common font faces available.
- The font size can be from 1 to 7.
- Some color names that GC recognize are:
 blue, brown, green, gold, maroon, navy, orange, pink, purple, red, white  & black.
- Attributes can be in any order.
- In this example a second font element is used inside (nested) the first font element to change the text color.
- Not all fonts are supported by all browsers. Click HERE to see a handy chart to help you decide which font to safely use.


Element: Name Start Tag End Tag
Center <center> </center>
Description: Displays everything within tags centered.
HTML Code:
Result:
This line is centered.
Notes: Centering text or images can also be accomplished by using the align="center" Attribute within other Elements such as Table, Paragraph and Image. See an example in the Paragraph box.


Element: Name Start Tag End Tag
Marquee <marquee> </marquee>
Description: Displays a box with scrolling text.
HTML Code:
Result: The quick brown fox jumped over something sometime or another.
Optional
Attribute
Example:		 Instead of scrolling, the text alternates inside a box with a yellow background.
 
Result: The quick brown fox jumped over something sometime or another.
Notes: Note that this is NOT an official HTML ELEMENT, and is not supported by all browsers. Although it works with Internet Explorer, Mozilla Firefox and other browsers, its use should be avoided. A new set of CSS "marquee" Properties will be replacing it. (see section on CSS usage in this Primer)
Visit here to test additional Marquee Element Attributes with your browser: (link)

See this site for even more attributes: http://www.blooberry.com/indexdot/html/tagpages/m/marquee.htm#example






Element: Name Start Tag End Tag
Comment <!-- -->
Description: Hides text from view, for use as a documentation comment.
HTML Code:
Result: This line is a test.


Element: Name Start Tag End Tag
Line Break <br> or <br /> none
Description: Forces a new line to be created.
HTML Code:
Result: This line is before the break.
This line is after the break.


Element: Name Start Tag End Tag
Preformatted Text <pre> </pre>
Description: Forces text within the tags to be formatted in a fixed width font, so that every character is the same width. Handy for displaying coordinates.
HTML Code:
Result: 
N 41 12.345
W 83 12.345


Element: Name Start Tag End Tag
Paragraph <p> </p>
Description: Forces text within the tags to be formatted as a paragraph.
HTML Code:
Result: This line is before the paragraph.

This is a short paragraph.

This line is after the paragraph.
Optional
Attribute
Example:		 Use of the optional align="center" Attribute to center the Paragraph.
Result:

This paragraph is centered.
Notes: - Alignment attribute values can also be "left" (default), "right" or "justify".
- Use of the <p> tag will produce a blank line above and below the contents.


Element: Name Start Tag End Tag
Horizontal Rule <hr> or <hr /> none
Description: Creates a horizontal line across the page.
HTML Code:
Result: This is line 1.
This is line 2.
Optional
Attributes
Example:		 A Horizontal Line that centered, 20% wide, 5 pixels high, and colored red.
Result:
Notes: Alignment also can be "left", or "right". Widths can also be in pixels. See the "FONT" Element above for color options.


Element: Name Start Tag End Tag
Ordered List <ol> </ol>
Description: Creates a numbered list of items.
HTML Code:
Result:
  1. Apples
  2. Oranges
  3. Pears
Notes: Optional Attributes:
List Order Type Attribute Prefix Displayed
Arabic Numbers (default) type="1" 1, 2, 3, 4, ...
Lower Case Roman Numerals type="i" i, ii, iii, iv, ...
Upper Case Roman Numerals type="I" I, II, III, IV, ...
Lower Case Letters type="a" a, b, c, d, ...
Upper Case Letters type="A" A, B, C, D, ...

start="x", where "x" is the starting character from above.

Lists can be nested inside of each other if needed. (See example in "Un-ordered Lists" below.)
Optional
Attributes
Example:
Result:
  1. Apples
  2. Oranges
  3. Pears
Notes:

start="x", where "x" is greater than "1".
Optional
Attributes
Example:
Result:
  1. Apples
  2. Oranges
  3. Pears


Element: Name Start Tag End Tag
Un-ordered List <ul> </ul>
Description: Creates a bulleted list of items.
HTML Code:
Result:
  • Apples
  • Oranges
  • Pears
Notes:
List Bullet Type Attribute Prefix Displayed
Disc (default) type="disc"


Circle type="circle"


Square type="square"

Lists can be nested inside of each other if needed.
Optional
Attributes
Example:
Result:
  • Apples
    • Delicious
    • Green
  • Oranges
  • Pears


Element: Name Start Tag End Tag
Table <table> </table>
Description: The table element is used to create a grid such as this box to organize and position text and images. For geocache pages it can also be used to create background color, background watermarks, and similar special effects. Tables can also be used to control the placement of images and text.

Tables use the additional TABLE ROW <tr>, and TABLE HEADER <th> and TABLE DATA <td> Elements as shown below.
HTML Code:
Result:
Header Col 1 Header Col 2
Row 2 Col 1 Row 2 Col 2
Row 3 Col 1 Row 3 Col 2

Note that the optional use of <th> tag instead of the <td> tag in the top row automatically centers and boldens the text. The table width above was set to 300 pixels to help demonstrate the header centering.
Notes: Since tables are somewhat more complicated than the previous elements, a more comprehensive usage of them is not yet addressed in this primer edition. However for those who want to use them, the following observations and caveats should be noted:

- To prevent horizontal scrolling at various resolutions, the total width in the "Long Description" area at geocaching.com must not exceed the pixel widths described on the following chart. This limit must include any borders used in tables and images.

- To set a table or cell size, use the width attribute (width="pixels") within the <table width="pixels"> or <td width="pixels"> element.

- To use tables to control the placement of images and text or for other reasons, the border attribute can be set to zero, (border="0") to hide the grid lines.

- Use the bgcolor="color " attribute, for a colorized background or the background="background image file" attribute for a watermark within tables to create these effects. These attributes can be used within the <table> Element or just with individual table cells (<td> Elements) with most modern browsers. Table attributes and cell can be used together, with cell attributes taking precedence over table attributes. Note that background attributes may fail with some non IE browsers.

 

Use of Cascading Style Sheets (CSS)
- CSS is method of coding web pages in conjunction with HTML code that solves may of the limitations of using only HTML code. While GC allows some CCS, it is currently only mentioned here along with a few notes for inclusion in a possible future version of this primer.

- CSS properties are replacing the use of HTML attributes and future browsers may eventually require their use as HTML attributes become depreciated.

- There are three ways to insert CSS into a webpage, and GC only allows the "Inline CSS" method. (more info)

- One interesting CSS Property that GC permits is "border-radius". (more info)


This is an example of how the "border-radius" CSS property can be used to create an area with rounded edges without using tables or images. This example also includes the "-moz-border-radius" and the "-webkit-border-radius" properties to maximize the functionality in more browsers.
(A more recent browser may be necessary to view it properly.)

- Other border related properties failed when tested at GC. This needs to be reviewed more later.

- Many other CSS Properties should work at GC, and may be addressed here in the future.

GC Cache Page Widths - Maximum Usable Pixel Widths for the "Long Description" area

GC cache page appearance

SCREEN RESOLUTIONS
800 1024 1280
- No horizontal scrolling needed to view "Long Description" area with left menu off screen for 800 and 1024 screen resolutions = ~554 ~776 ~1030
- "Long Description" area horizontally scrolled to use full screen width = ~772 ~996 ~1250
- The above pixel widths were tested with the following web browsers: Google Chrome 1.4, Firefox 3.0, Internet Explorer 8.0, and Safari 4.0
Variations between browsers were no more than 2 pixels for any width option, so the smallest width for any browser was used for each option.

Usage Considerations - A few considerations when using HTML code at GC (geocaching.com) and when using HTML editor programs:
- Don't worry about removing the <html>, <title> or <body> tags created by a WYSIWYG HTML editor. Just copy the entire code and paste it. GC will remove them automatically.

- When using a modern WYSIWYG HTML editor, it may by default, use CSS (Cascading Style Sheet) Properties instead of the HTML Attributes described above. Check the options and preference settings of your editor, to turn off the use of CSS, or at lease set it to use the "Inline CSS" method. As mentioned elsewhere in this document, the use of CSS at GC has only been briefly addressed by this primer.

- Due to a glitch at GC, some HTML is not accepted by GC the first time it is submitted. If your cache pages does not appear correctly the first time you view it, go back to the editing page and copy your HTML to GC again.

- Avoid copying HTML code from your existing GC pages back to your editor or to other cache pages, as you can get strange results. Instead, keep a master copy on your own computer, and always work from that copy. Especially since the CTRL-A (select all), CTRL-C (copy), then CTRL-A (select all), CTRL-V (paste) sequence works so well anyway.

- The <div> and <span> HTML Elements, can make a mess of your cache page. If your editor can turn them off, do so. If not, review any attributes declared within them and move the attributes to be part of other existing HTML Elements as necessary, before deleting these elements.

- The <embed>, <iframe>, and  <object> HTML Elements are ignored by GC. So no cute background music or sound effects are permitted any longer along with no scrolling windows or Flash presentations.

- Other HTML Elements that could compromise the security and integrity of the GC site are also ignored.

- HTML Tables work fine on GC. Just watch how you define the widths. Try to avoid using pixel values and use percentages instead if you really need to control column/cell widths. If possible, simply remove any width attributes that your editor inserts. See the notes with the <table> HTML Element information box above.

- The <body> HTML Element is now entirely ignored by GC, so the previously used "background" attribute will no longer work. Instead, the GC cache edit page now has a place where you can enter the address for a background image. However background images only appear around the very outside edges of a cache page. Interesting special effects such as colorized pages, and watermarks can be included with the cache page itself by enclosing part or all of the cache page within an HTML <table> Element. See the <table> HTML Element information below.

- Because 80%+ users use Microsoft Internet Explorer (IE), you don't need to worry too much about browser compatibility. If you want to make your page look correct to even more people then you may want to test it using other browsers such as Apple Safari, Google Chrome, Mozilla Firefox, and Opera. (Note that AOL and MSN are actually IE based browsers.)

- Also remember that some mobile phone and PDA uses may hate you for using HTML as they may not display your cache pages very well. More recent Smart Phones usually display the pages much better.

HTML Editors and other helpful programs.

• HTML pages can be created with nothing more than a simple text editor. However an HTML editor can make life much simpler, and a WYSIWYG (What You See Is What You Get) HTML editor makes life simpler yet, by letting you create a page without needing to write the actual HTML code. Just note the caveats mentioned in the considerations above.

While many HTML editors are available, BlueGriffon one of the best, FREE full featured WYSIWYG HTML editors available. It now replaces my previous recommendations of Kompozer, Nvu, and Compozer which were cousins of sorts to BlueGriffon.

Link: BlueGriffon

For those who are not familiar with installing programs manually from a Zip file, an Installer program is also available at another site. Although it is a safe download, it may not always contain the latest KompoZer version.
Link: KompoZer Windows Installer

For those who would rather not install a program, free online web based WYSIWYG editors are also available. While they are not as full functioned, and tend to create some rather cluttered HTML code, they can be usable for geocache page creation. One such site that has been successfully used by geocachers is www.Online-HTML-Editor.org which allows you to also see your HTML source code.

Another good free site without WYSIWYG to use as a sandbox for your HTML testing is at: www.w3schools.com

• Sizer is a very handy, small and free program which can be used to rapidly test HTML creations at various screen resolutions, without actually changing the resolution of the system.
Link: Sizer
 

• JR Screen Ruler is a tiny free program that comes in very handy for making things like images and tables fit right. It works with any image or HTML editor
Link: JR Screen Ruler

• You do not necessarily need an expensive image editing program to produce nice results for your cache pages. An easy to use, and free program called Irfanview is available that works just fine.
Link: Irfanview

• If you want a more powerful image editor, and can not afford the likes of Adobe's PhotoShop®, then a FREE alternative program called GIMPShop may meet your needs.
Link: GIMPShop

Credits and History:

Thanks to the forum posters at NWOGEO.org for the questions and suggestions that continually help develop the content for this primer.