This geocache is NOT located at the posted coordinates, there is no need to go there. The actual cache coordinates can be obtained below.
This mystery geocache is not intended to be difficult, it is intended to provide some very basic information about HTML (hypertext markup language) tailored specifically to geocachers who might want to make their geocache pages more interesting by being able to control text size/color/alignment, to add pictures to their cache pages, and/or to add links from their cache page to other web pages. We have had quite a few requests for assistance with HTML for cache pages over the past couple of years, so we thought a resource like this cache might be helpful.
There is a quiz at the end of the cache description that will yield the actual cache coordinates. If you are already familiar with HTML, then feel free to skip right to the quiz at the end and test your knowledge. Otherwise, here are what some would call the “secrets” to putting together an attractive geocache page.
Getting Started
The best way to learn anything is by doing it. Although it is certainly not required to find the cache, I would encourage you to start our lesson today by actually creating a geocache page where you can enter the coding examples and see the results. If you are with me, then just open up another tab or another window in your web browser, and then go to geocaching.com in that new tab or window. To create a cache page go to the "Hide & Seek a Cache" option under the "Play" menu. Then look for the "online form" link in the "Hide a Cache…" area. Before you do anything else, make sure that the "Enable cache listing" box is NOT checked (we don't want the reviewers to see it yet), and that the "The descriptions below are in HTML" box IS checked. You will also have to give the cache a name and enter some fake coordinates in order to avoid errors (N 42 00.000 W 84 00.000 or anything else will work). We’ll be placing all the HTML shown below in the “Long Description” area. Now let's write some HTML!
Hypertext Markup Language
Once you have checked that HTML box, everything you enter in the Long Description area will now have to be formatted using HTML tags or all of your text will just be run together. One of the most important tags then becomes <p> and </p>, which identifies the beginning and end of each separate paragraph.
For example, if you wanted to put the following two separate paragraphs on your cache page:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
Then you would have to include paragraph tags as follows to prevent all the text from running together:
<p>This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.</p>
<p>Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.</p>
Go ahead and try it on your cache page if you want. Cut and paste the HTML above into the Long Description box, save the cache page, and then preview it if you would like, before we move on to text manipulation.
Manipulating Text
Now that we know how to define our paragraphs, lets move into the tags that allow for the manipulation of the text within those paragraphs.
We’ll start out with four simple tags, <b>, <i>, <u>, and <strike>, before getting into the more complicated ”<font> tag.
As you may have already guessed <b> is for bold, <i> is for italics, <u> is for underline, and <strike> is for strikeout. Let’s try out these new tags on the two paragraphs we already have in the Long Description for our cache page as follows:
<p>This cache is <b>not</b> located at the posted coordinates, it is located somewhere in <i>Lansing Park</i>.</p>
<p>Park hours are <u>8am to 10pm in the summer</u> and <strike>8am to 5pm in the winter</strike>. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.</p>
If you save your cache page and then preview it, the result should look like this:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
Now that you have had a taste of text manipulation, you are probably wondering how to make certain words HUGE and other words some crazy color or both. Well, accomplishing that is only a little more difficult than what we have already been able to do, and it is done using the <font> tag.
Unlike the other tags we have discussed so far, effective use of the font tag requires some additional options within the tag. Although the font tag has several options available within it, we are only going to concentrate on two of them, size and color.
To make a section of text bigger, 6 in this case, the font tag would be <font size=6>. To make a section of text red, the font tag would be <font color=”red”>. To make a section of text larger and brown, the font tag would be <font size=5 color=”brown”>. (If you are familiar with them, hex colors can also be used to specify colors, here is a link with more info.)
Let’s add another paragraph to the Long Description for our cache page with some color and size changes as follows:
<p>The cache is a <font color=”green”>green</font> ammo can hidden in a typical way. There is <font size=5>no need to cross the fence</font> to find this cache.</p>
If you save your cache page and then preview it, the result should now look like this:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
The cache is a green ammo can hidden in a typical way. There is no need to cross the fence to find this cache.
Manipulating the Layout
There are many options available in HTML to manipulate the layout of the text on the page, including more advanced tables and lists, but we are going to keep it very simple here. The single layout option that seems to be the most useful for geocache listings is the ability to “center” text (or photos) on the cache page. The tag to center align text, from a single paragraph to the whole page, is <center>. Just insert the tag before the paragraph where the center aligned text should start and then insert </center> after the paragraph where it should end.
Let’s add another paragraph to the Long Description for our cache page with some center aligned text:
<center>
<p>Congratulations to thevidas for being First to Find!</p>
</center>
If you save your cache page and then preview it, the result should now look like this:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
The cache is a green ammo can hidden in a typical way. There is no need to cross the fence to find this cache.
Congratulations to thevidas for being First to Find!
Adding Images
The most common HTML question that we probably get is regarding how to add a photo to a geocache page. This tag is a little bit more complex than those discussed above, but having mastered all of those tags, I know that you are ready!
The basic tag for including a photo is <img>. However, the tag does not do anything unless the location of a source image is also specified. The trick is that the source image has to be somewhere on the Internet. If the photo that you want to include on your web page is not already on the Internet somewhere, you are still in luck because geocaching.com will allow you to upload your image to their website.
Assuming that you will need to upload your image, here are the steps. First, let’s preview the cache page on which we have been working. In the upper right corner, click on the link that says "Upload Images." On that page, click on the button that says "Choose File." Select your photo from your own computer, give the file a caption if you want, and hit the "Upload" button.
Once the upload is complete, click on the image you just uploaded, and it should come up in a browser window all by itself. There will be a web address in the address bar of your browser. You will need to either write that web address down or copy and paste it to another document, because that is the address where your photo is now located on the Internet, and you will need to point to that web address to get that image to appear on your cache page.
Now, let’s go back to your cache page and edit the listing and let’s add the following to your Long Description. If you uploaded a photo and you wrote down the location of the photo, feel free to use your own photo within the tag below. Otherwise, I have provided a nice photo taken in a park in the tag for you. Let’s add the HTML below between the first and second paragraphs of your Long Description as follows:
<center>
<p><img src=http://img.geocaching.com/cache/large/6b5b09f0-d6c4-45a1-9d40-c435e9983ac6.jpg></p>
</center>
I included the <center> tag to center the photo on the page. This tag works the same on images as it does on text.
If you save your cache page and then preview it, the result should now look like this:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
The cache is a green ammo can hidden in a typical way. There is no need to cross the fence to find this cache.
Congratulations to thevidas for being First to Find!
The <img> tag allows several options within it, like the <font> tag, but I am going to continue to keep it simple and end the discussion here to hopefully avoid unnecessarily confusing anyone.
Hyperlinks
The final tag that we will be discussing today is for hyperlinks to other web pages. The basic tag for hyperlinks is simply <a>, which is for anchor, and at a minimum it must also include the reference website being hyperlinked. The tag surrounds the word or phrase (or image) that, when clicked on, takes the person to the other web page. For example, the following tag:
<p><a href=http://en.wikipedia.org/wiki/Hyperlink>Hyperlink</a></p>
would look like this on your cache page:
Hyperlink
and when you click on on word above, you will be taken to the Wikipedia entry for hyperlinks. (Go ahead and give it a try!)
So, what about our cache page? Well, since there is a very good chance that the thevidas will be getting the FTF on this geocache and we have already given them credit on our cache page, lets use our new tag to link their name on the cache page directly to their geocaching.com profile. To do that, we just need to adjust the last paragraph of our long description to read as follows (with the web address in the tag being their profile):
<p>Congratulations to <a href=http://www.geocaching.com/profile/?guid=f1de1657-89b9-49dd-949f-637ae23102bc>thevidas</a> for being First to Find!</p>
If you save your cache page and then preview it, the result should now look like this:
This cache is not located at the posted coordinates, it is located somewhere in Lansing Park.
Park hours are 8am to 10pm in the summer and 8am to 5pm in the winter. Please respect the park hours. Evidence of caching outside of the posted hours may result in the removal of this geocache.
The cache is a green ammo can hidden in a typical way. There is no need to cross the fence to find this cache.
Congratulations to thevidas for being First to Find!
And that is the basics of HTML for cache pages. You made it through. Congratulations! Now for the location of this cache.
Final Exam
Now let’s see what you learned.
The cache is at N 42 44.ABC W 84 24.XYZ
Q A. The HTML <p>Please post <u>photos</u> of a TB at the cache with your found log.</p> will look like which of the following on a cache page:
5 - Please post photos of a TB at the cache with your found log.
7 - Please post photos of a TB at the cache with your found log.
9 - Please post photos of a TB at the cache with your found log.
Q B. The HTML <p>The cache container is a <font color="brown">brown</font> matchstick holder.</p> will look like which of the following on a cache page:
3 - The cache container is a brown matchstick holder.
5 - The cache container is a brown matchstick holder.
7 - The cache container is a brown matchstick holder.
Q C. The HTML <p>There is a fee for entry to the park <font size=4>only on weekends</font>.</p> will look like which of the following on a cache page:
0 - There is a fee for entry to the park only on weekends.
2 - There is a fee for entry to the park only on weekends.
4 - There is a fee for entry to the park only on weekends.
Q X. The HTML <center><p>There is a prize in the cache for the First to Find.</p></center> will look like which of the following on a cache page:
2 - There is a prize in the cache for the First to Find.
4 - There is a prize in the cache for the First to Find.
6 - There is a prize in the cache for the First to Find.
Q Y. The HTML <p><img src=http://dpatrickallen.com/msu-green-logo.gif></p> will look like which of the following on a cache page:
5 - 
7 - 
9 - 
Q Z. The HTML <p><a href=http://geocaching.com>Geocaching</a>.</p> will look like which of the following on a cache page:
3 - Geocaching.
5 - Geocaching
7 - Geocaching.
You can check how well you did on the quiz on Geochecker.com.
If you have been wondering about how to use HTML, we hope that you have found this cache useful.
The container is a dark green decon. Please make sure that the lid is shut tightly before you leave. Thanks!
Congrats to Periwinkle128 on being First to Find!