Basic HTML for Geocachers
HTML, or Hyper Text Markup Language, tags can be added to your cache page submissions
to spice it up a bit. When you add any HTML coding to your cache page you MUST check the box, "The descriptions below are in
HTML", right above the Short Description area on the cache submission page. The following tags can be used in either the Short
Description or Long Description area of the cache page submission form.
A HTML tag is always enclosed within a < (less than) and > (greater than) symbol, i.e. <TAG NAME GOES HERE> and has a
corresponding closing tag, </TAG NAME GOES HERE>, the difference being the end tag has a forward slash right after the less
than symbol. In addition, each tag has a variety of attributes that are used to alter the looks of the resulting web page content.
A few HTML tags do not use a closing tag.
| <BODY> |
The BODY tag is used to set a color and/or graphical image for the background of a cache page. |
| <BR> |
The BR tag breaks the text and starts it again on the next line. In an HTML document, you need to denote where you want every carriage return. |
| <P> |
The P tag stands for paragraph. It does the exact same thing as the <BR> above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again. |
| <B> |
The B tag adds a bold effect to text. |
| <I> |
The I tag adds an italicized effect to text. |
| <U> |
The U tag underlines the text. |
| <PRE> |
The PRE tag presents blocks of preformatted text in a fixed-width font. |
| <CENTER> |
The CENTER tag positions the text or image it encloses in the center of the cache page. |
| <HR> |
The HR tag creates a horizontal line across the page. |
| <BLOCKQUOTE> |
The BLOCKQUOTE tag is used to contain text quoted from another source rendering it with a slight extra left and right indent. |
| <FONT> |
The FONT tag is used to set the typeface, color, and size of text on the cache page. |
| <UL> & <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. Whereas the OL tag presents a numbered list of items, sorted by sequence or order of importance. |
| <A HREF> |
The A HREF tag is the essence of HTML. It is marked text designated as a hypertext link to another web page or to an email link. |
| <IMG> |
The IMG tag is used to incorporate in-line graphics into an HTML document. |
| Special |
To create special characters, i.e., the degree symbol, you must use the ASCII code. |
BODY – The BODY tag is used to set a color and/or graphical image for the background of a cache page. I have found the best way to
add an image is to simply upload a picture to the cache page. Once uploaded, return to the cache page and view that image, copy the
complete URL from the browser window that contains the image and then paste that URL into the BODY tag. 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.
Example:
(Set the background image from an uploaded picture to the cache page.)
<BODY BACKGROUND="http://complete URL to image.jpg">
(Set the background color to a hexadecimal value or simply use a primary color name, i.e., red, blue, etc. Go a head and play around
with the hexadecimal values to find the right color, the first two digits represent the red shade, the second 2 represent green, and
the last 2, 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. Hexadecimal color charts can be found on the internet.)
<BODY BGCOLOR="#22ef3c">
(Or use both setting the background color and image.)
<BODY BGCOLOR="green" BACKGROUND="http://img.groundspeak.com/cache/c3598e2c-1c14-4e77-9abe-8dcff103b5fe.jpg">
Index
BR - The BR tag breaks the text and starts it again on the next line. In an HTML document, you need to denote where you want
every carriage return. This tag does not require a closing tag.
Example:
The quick brown fox<BR>jumps over<BR>the lazy<BR>dog.
The quick brown fox
jumps over
the lazy
dog.
Index
P - The P tag stands for paragraph. It does the exact same thing as the <BR> above except this tag skips a line. BR
just jumps to the next line, P skips a line before starting the text again. You also have the ability to align paragraphs to the
left (default setting), center, or right. This tag does not require a closing tag unless you include an attribute in the opening
tag in which case you must close it or all the following text with be formatted to the opening tag attribute.
Example:
The quick<P>brown fox<P ALIGN="left">jumps over</P><P ALIGN="center">the lazy</P><P ALIGN="right">dog.</P>
The quick
brown fox
jumps over
the lazy
dog.
Index
B - The B tag adds a bold effect to text.
Example:
<B>The quick brown fox jumps over the lazy dog.</B>
The quick brown fox jumps over the lazy dog.
Index
I - The I tag adds an italicized effect to text.
Example:
<I>The quick brown fox jumps over the lazy dog.</I>
The quick brown fox jumps over the lazy dog.
Index
U - The U tag underlines the text.
Example:
<U>The quick brown fox jumps over the lazy dog.</U>
The quick brown fox jumps over the lazy dog.
(B, I and U combined)
<B><I><U>The quick brown fox jumps over the lazy dog.</U></I></B>
The quick brown fox jumps over the lazy dog.
Index
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
W 85° 37.183
</PRE>
Will look like:
N 44° 15.307
W 85° 37.183
And,
<PRE>
A|B|C|D|E|F|G|H|I|J|K|L|M
-------------------------
N|O|P|Q|R|S|T|U|V|W|X|Y|Z
</PRE>
Will look like:
A|B|C|D|E|F|G|H|I|J|K|L|M
-------------------------
N|O|P|Q|R|S|T|U|V|W|X|Y|Z
Index
CENTER - The CENTER tag positions the text or image it encloses in the center of the cache page.
Example:
<CENTER>The quick brown fox jumps over the lazy dog.</CENTER>
The quick brown fox jumps over the lazy dog.
Index
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 WIDTH="50%">
<HR WIDTH="135">
Index
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>Text</BLOCKQUOTE>
WITHOUT BLOCKQUOTE: The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
WITH BLOCKQUOTE: The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
the lazy dog. The quick brown fox jumps over the lazy dog.
Index
FONT - The FONT tag is used to set the typeface, color, 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, I have listed some common fonts.
The color is the same as described above in the BODY tag.
Example:
<FONT FACE="Comic Sans MS, Times New Roman, Verdana, Arial" SIZE="2" COLOR="red">The quick brown fox jumps over the lazy dog.</FONT>
The quick brown fox jumps over the lazy dog.
<FONT FACE="Times New Roman" SIZE="4" COLOR="#9a110f">The quick brown fox jumps over the lazy dog.</FONT>
The quick brown fox jumps over the lazy dog.
Index
UL & 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. Whereas 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>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
</UL>
Result:
- Item 1
- Item 2
- Item 3
- Item 4
<OL>
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
</OL>
Result:
- Item 1
- Item 2
- Item 3
- Item 4
Index
A HREF - The A HREF tag is the essence of HTML. It is marked text designated as a hypertext link to another web page or
to an email link.
Example:
<A HREF="http://www.nmg-geocaching.org">Northern Michigan Geocachers</A>
<A HREF="http://www.nmg-geocaching.org">www.nmg-geocaching.org</A>
Result:
Northern Michigan Geocachers
www.nmg-geocaching.org
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 like this:
<A HREF="http://www.nmg-geocaching.org" TARGET="_blank">Northern Michigan Geocachers</A>
A link for an email address would look like:
<A HREF="mailto:admin@nmg-geocaching.org">Email</A>
<A HREF="mailto:admin@nmg-geocaching.org">admin@nmg-geocaching.org</A>
Result:
Email
admin@nmg-geocaching.org
Index
IMG - The IMG tag is used to incorporate in-line graphics into an HTML document. The BORDER attribute adds a border around
the image in a width set by the value used, ie., 1, 2, 3, etc. The WIDTH and HEIGHT or exactly that, the dimensions of the image in pixels.
The ALT provides for alternate text when your mouse is over the image.
Example:
<IMG SRC="http://www.nmg-geocaching.org/geobb/images/avatars/gallery/Gallery/GEO_4boxcolor.jpg" BORDER="0" WIDTH="80" HEIGHT="80" ALT="GC Logo">
Result:
This will work also without the dimensions, BORDER is set to 2:
<IMG SRC="http://www.nmg-geocaching.org/geobb/images/avatars/gallery/Gallery/GEO_4boxcolor.jpg" BORDER="2">
Result:
Index
SPECIAL - To create special characters, i.e., the degree symbol, you must use special code.
Example:
& = &
© = ©
® = ®
¼ = ¼
½ = ½
¾ = ¾
¢ = ¢
° = °
= (creates a blank space)
Index
