HTML Code

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://www.geocaching.co.uk”>here</a>
to go to the geocaching
resource site.

In this example www.follow-the-arrow.co.uk
becomes the link.

Go to http://www.geocaching.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://www.geocaching.co.uk”>http://www.geocaching.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://www.geocaching.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 propertie
s.

  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)