Site updated
15 January, 2016 14:02

HTML code for your cache page

 What is HTML?
Basic HTML - fonts, links to other pages and sites and inserting images
More Advanced HTML - tables, lists and bullets

What is HTML?

HTML or Hypertext Markup Language is a code that web pages are written in and then displayed in your web browser. The Geocaching web site creates the code automatically for you when you write the description in plain text. If you press the enter key for a new line it will create one for you. The Geocaching web site doesn't give you the option to edit the code or add your own easily, the only way to do it is to enter the code manually as you type the description. You can use a web editor and then 'cut n paste' the code into the description box.

Adding your own basic HTML code is however quite easy. If you want to see how it works before actually trying it on a cache page, then create a new text document in notepad and save it with a .htm file extension, for example 'test.htm'. Then you can write some text in it then add the HTML code. Save the file (as 'test.htm') and when you click on it the file will open in your web browser and you can see what it looks like. Once you are happy with it you can cut n paste it into the cache page description. Click here to see an example. If you want to save this file to use then just right click here and select 'save link as' (or 'save target as').

HTML code is entered using tags. The tag starts with < and ends with >. Code usually consists of two tags, the first starts the code, the second ends the code and has a / in it. For example to make something bold you enter <strong>this is bold</strong> and it produces this is bold. It is quite easy to enter and can produce some nice effects on the cache page. Before you do it you need make sure the box 'The descriptions below are in HTML' is ticked when you edit the cache page.

Basic HTML code

Below is an example of what the text will look like and on the right the actual code you type in.

Paragraph and Line Breaks

    
To create a paragraph break you enter <p> and then </p> so to produce this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit eleifend libero. Duis cursus. Cras mollis, urna ac hendrerit aliquam, metus enim sodales nulla, eu porttitor tortor augue nec dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere

Nulla elementum nulla. Aliquam erat volutpat. Nullam vel tellus vitae sapien ornare molestie. Pellentesque cursus tempor est. Morbi sit amet nulla in quam adipiscing viverra. Ut aliquam velit quis quam. Aenean nec metus non dui posuere dapibus. Aenean enim. Aliquam eget dolor

  You type this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit eleifend libero. Duis cursus. Cras mollis, urna ac hendrerit aliquam, metus enim sodales nulla, eu porttitor tortor augue nec dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere</p>
<p>Nulla elementum nulla. Aliquam erat volutpat. Nullam vel tellus vitae sapien ornare molestie. Pellentesque cursus tempor est. Morbi sit amet nulla in quam adipiscing viverra. Ut aliquam velit quis quam. Aenean nec metus non dui posuere dapibus. Aenean enim. Aliquam eget dolor </p>
To insert a line break use the <br /> tag so to produce this:

If you want your line break just here
then it will give you one line. If you want two line breaks just here

then insert two breaks.

   You type this:

If you want your line break just here<br />
then it will give you one line. If you want two line breaks just here<br /><br /> then insert two breaks.

Bold and italic text

    
To make something bold use the <strong> and </strong> tags:

This text is now bold and back to normal.

   You type this:

This text is <strong>now bold</strong> and back to normal.
To make the text italic use the <em> and </em> tags:

To emphasise the text make it italic.

   You type this:

To emphasise the text <em>make it italic.</em>
To make text both bold and italic use both tags.

To emphasise the text make it bold and italic.

   You type this:

To emphasise the text make it <strong><em>bold and italic</em></strong>

To change the font face, colour and position

    
To use a different font face use the <font face="...> tag:

This is the default font. This is comic sans and this is times new roman.

   You type this:

This is the default font. <font face="Comic Sans MS">This is comic sans</font> and <font face="Times New Roman">this is times new roman.</font>
To make the font bigger or smaller use the <font size="...> tag:

This is 10 point but this is bigger at 12 point and this bigger still at 14 point.

   You type this:

This is 10 point but this <font size="3">is bigger at 12 point</font> and this <font size="4">bigger still at 14 point.</font>
To change the colour use the <font color="...> tag:

This is default black and this is red whilst this is green.

   You type this:

This is default black <font color="red">and this is red </font><font color="green">whilst this is green.</font>
You can put these tags together like this:

This is default and this is bigger and red and comic sans font!

   You type this:

This is default and <font face="comic sans ms" size="4" color="red"> this is bigger and red and comic sans font!</font>
You can align text to the right, left or center using the <center> tag:

Default is to the left

This is centered

This is to the right

   You type this:

Default is to the left

<center>This is centered</center>

<p align="right">This is to the right</p>
A better tag to use for aligning text is the <div> tag:

You can also make the text align center

You can also make the text align right
   You type this:

<div align="center">You can also make the text align center</div>

<div align="right">You can also make the text align right</div>

Creating Hyperlinks to other web pages

    
You can link to another web page using a hyperlink with the <a href..> tag:

In this example the word 'here' becomes the link and is enclosed with the <a href> and </a> tags.

Click here to go to the geocaching resource site.

Use the 'back' button to return here if you click the link.

   You type this:

Click <a href="http://.followthearrow.gagb.co.uk">here</a> to go to the geocaching resource site.
In this example followthearrow.gagb.co.uk becomes the link.

Go to followthearrow.gagb.co.uk for more information

Use the 'back' button to return here if you click the link.

   You type this:

Go to <a href="http://followthearrow.gagb.co.uk">www.followthearrow.gagb.co.uk</a> for more information
In this example the link opens a new browser window (or tab) using the 'target' tag.

Click here to go to the geocaching resource site.

This is a useful code to use as it opens any link in a new page (or tab) leaving the cache page also open so you can switch between them easily.

   You type this:

Click<a href="http://followthearrow.gagb.co.uk" target="_blank"> here</a> to go to the geocaching resource site.

Adding images to the page

    
To add a picture or image you need to have that image either on an internet website (like your own) or uploaded to the cache page gallery. You need to find the the URL of the image. Open the image so it displays in your browser and right click on it to get the URL. It will look something like this:
http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg
You can see how it works by right clicking on the image below and selecting properties.

   You type this:

<img src="http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg">
You can also make the image a hyperlink so when you click on it a web page opens. In this example it opens this soldier's trackable page.

   You type this:

<a href="http://www.geocaching.com/track/details.aspx?id=182728"><img src="http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" /></a>
If you want the image centred in the page you use the <center> tag;

   You type this:

<center><img src="http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" /></center>
If you want a caption under (or above) your photo and want it aligned in the centre too then this is how to do it:


This is the Roamin Roman TB

 

   You type this:

<center><img src="http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" /><br />This is the Roamin Roman TB</center>

Note: the <br /> code after the picture is to give a new line for the caption. Without it the caption may appear to the right of the image.
If you use the <p> tag instead of the <br /> tag after the picture the caption will appear with an extra line space under the image.

This is the Roamin Roman TB

   You type this:

<center><img src="http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg" /><p><center>This is the Roamin Roman TB</center></p>

Horizontal Rule

You may have noticed in the above examples they are separated by a dark red line across the page, like this:

This is a 'horizontal rule' using the code <hr>

You can change the colour and the width across the page using these codes:

<hr color="green"> horizontal rule (hr) full width of the page colour green (you can select any suitable colour)
<hr color="green" width="50%"> hr width of 50% of the page (you can have any % value)

© Chris Dale 2008-2017. Terms and Conditions of Use of this site.