Adding HTML To Your Geocache Listing

Views 4 Likes Comments Comment
Like if this Guide is helpful
Link to an eBay page Remove
Add up to 3 more photos
Link to an eBay page

HTML.. who, what, why?

You're scrolling down the 'Edit' page of your geocache listing. Difficulty, Terrain, Details.. then there is a box to tick to say 'The below descriptions are in HTML'. What is HTML and why should you use it? Let's discover all about this mysterious language and delve into a deep understanding of it. Plus, make your geocache pages much more appealing along the way. I believe you should give it a go, learning something new keeps the mind active and it adds an extra level of understanding to the world around you. Come on, give it a go!

I am by no means an IT expert, but with a little persistence, lots of trial and error and some experimenting, even I managed to teach myself how to utilise this tool. You can too and it will not require you to understand the finer details of anything overly techy.

There is a glossary of terms at the bottom of this document, just in case the jargon flies high overhead.

What is HTML?

HTML stands for 'HyperText Markup Language'. Don't worry, it means nothing to me too - and I've read a lot of wiki pages about it. Let me explain;

HTML is a standard 'language' which is used to create web pages - including geocache listings. It is written in the form of separate 'elements', using 'tags' that usually come in pairs. A web browser (like Internet Explorer, Safari, Chrome or Firefox) can read this HTML and composes it into visible pages, like the listing of a geocache. The browser does not normally display these tags, but they form the building blocks of all websites.

Normally when you add text to a webpage, such as your geocache listing, the website just assumes you want it displayed in the most boring, default fashion it can manage (somewhat like this very guide). By using HTML, even in a small way you can effectively force your web browser into displaying the web page and text exactly how you want. Do you reckon that could be useful? 

What can HTML do for me?

Have you ever seen a geocache listing and it just looked fancy? It had bold text, it was aligned in different areas, it had pictures, it was colourful and the words were in different colours! How on earth did they manage that? 

By using some basic HTML is how. Geocache listings allow HTML use in a way which is forgiving, basic and very easy to learn and use. Probably just as easy as making text look different in say, Microsoft Word. We will cover how to add the element tags, as well as the most useful tags and what they do.

Adding the HTML to the text of your listing.

The easiest way to start your first HTML description is to make sure the little check box is not ticked, delete anything in the 'Short Description' and 'Long Description' fields, then type in the text you want to add. Have a think about how you want your page to look - like alignment, bold areas, underlined text and maybe if you'd like it another colour. All of these things and more are customisable with the power of HTML. Now we're ready to add tags for each element.

Tags are an instruction in pointy brackets. A start tag begins an element, and an end tag finishes it. An end tag always starts with a slash (/). They are not in normal English, but are logical in their symbolism. Let's say you want to make some text bold. The HTML tag for bold is <b>.

So you start the element with the start tag <b>, then add the text you want in bold, and finish the element with the end tag </b>. So you would type it like this:
<b>This text would be bold</b>

Text outside of the tags will not be affected, and all text between them will follow the tags instruction. It looks a little messy, but makes sense when you look at it. You will note elements operate in the order they appear, like the text itself. If you want different sections in bold, you can add endless tags as you see fit thus:
<b>Bold</b> This will not be bold <b>but this text will be bold</b>

Another element you can use is to make text underlined. The tag for this is <u>. Elements can be 'stacked' on top of each other to affect text in multiple ways like this:
<b><u>This text will be underlined and bold</u></b>
Or:
<b><u>Underlined and bold</u> only bold</b>

Basic text HTML elements and their tags.

<b></b>
Bold text.

<u></u>
Underline text.

<i></i>
Italics text.

<marquee></marquee>
This element makes the text scroll horizontally across the page. Fancy.

<a href=" URL"> Text</a>
This is how you add a link to a listing. Put the website URL in and the clickable Text in the code and it provides a clickable hyperlink.

Formatting HTML elements and their tags.

<center></center>
This aligns the text to the centre of the page.

<br>
Use this where you would normally hit 'Enter' for a new line. Use a tag for each new line or break. No end tag.

<hr>
This tag adds a horizontal rule across the page, useful for separating sections of your listing. No end tag.

<img src=" URL">
This is how to embed an image into your listing. Add the image's URL in and it will appear in the description. No end tag.

<!-- Hidden Text-->
This unique tag will hide the text completely from the listing. It will only be able to be viewed by reading the web page's source code.

Getting more advanced with attributes

Some elements allow you to add extra 'attributes' to further information and customisation. The three main elements that have attributes you may want to use affect are text, hyperlinks and images.

Changing the appearance of the text:
<font attribute></font>
Use this to change the appearance of the text. Note where attributes are inserted and again, attributes can be stacked within a tag. You can add in the following attributes:

color=" colour"
Add a basic colour name (ie. red, blue, black) or a #Hex code (ie #FF0000) to change the colour of the text.

size=" #"
Size is determined by a single digit number from 1 to 7. Where 1 is tiny, 7 is massive and 3 is the default.

font=" font"
Using this attribute you can specify the font you would like the text to display as. Note that only a small number of basic fonts will be allowed, so don't go too crazy.

Customising the hyperlink:
<a href=" URL" attribute> Text </a> 
We already know that this tag will create a quick and easy hyperlink in your listing. However, for extra detail you can add any or both of the following attributes.

target="_blank"
This will make the link open in a new tab when clicked.

Attributes for images:
<img src=" URL" attribute>
This tag embeds an image, found at that URL into your listing. It's often a good idea to centre images, but the following attributes can also be applied

width=" 300px"
This attribute resizes the image proportionally to that width in pixels. You can make it bigger or smaller, but know the maximum is 600px.

title=" My picture"
This will show the title of your image as the mouse is rolled over it.

Further learning in HTML

Geocache listings are pretty limited in what they will allow in terms of HTML elements, there are many more available to most web pages. As mentioned, you can 'stack' elements within each other. For instance you could have a large sized, yellow, bold hyperlink in a marquee if you so desired. But such extravagance might make for confusing listings. Some simple bold, centred and/or images often make for a neat, professional looking listing and won't take hours to program.

I managed to teach myself HTML through online searches and still find myself looking at how to expand a certain tag, element or attribute. As you get comfortable with the above basics, feel free to try out more advanced things by looking online. Sometimes it works, sometimes you'll make lots of errors. It is all part of the learning!
Link to an eBay page Remove
Add up to 3 more photos
Link to an eBay page

Glossary of Terms


Any italicised text in tags above can be changed as necessary for your use.

Attribute: Provides further information and customisation to an element. Borders, tables, shadows, titles, width, height, colour, size and font are some of these.

Element: an individual component/instruction in HTML, made using (usually) two 'tags'.

Embed: Incorporate into the web page.

Geocache description: This is where you add text and HTML tags that show up in the main area of the geocache listing.

Geocache listing: The online page for an individual geocache which shows all relevant information.

HTML: HyperText Markup Language. The standard 'language' which is used to make web pages.

Jargon: A mysterious language spoken by IT experts which the rest of us have no clue about.

Source code: A collection of instructions for a computer. In this case, the hidden code is the HTML that runs the geocache listing.

Tag/s: the labels used to define where an element is to take effect. These are surrounded by angle brackets (<>).

Web browser: a program which displays web pages to your computer or smart phone. Examples are: Internet Explorer, Safari, Chrome and Firefox


Some sample text.

If you're ready to start playing with HTML, you can copy and paste the following sample HTML code into your description. What do you think it will look like? What would you change about it? Have a play around and have fun using HTML  in your geocache listings!

<center><b><font size="5" color="red">My New Geocache!</font></b><br>
<br>
<u>Welcome!</u> to this new <font color="green">geocache</font>. I <i>really</i> hope you enjoy finding it.<br>
<br><hr>
This is what the geocache looks like:<br>
<img src="http://i.ebayimg.com/00/s/MTIwMFgxNjAw/z/U4sAAOSwMpZUoQrC/$_3.JPG?set_id=2" width="250px" /></center>
This is what it should look like.
Link to an eBay page Remove
Add up to 3 more photos
Link to an eBay page
This is what it should look like.
Have something to share, create your own Guide... Write a Guide
Explore more Guides