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 |
You type this:
<p>Lorem |
|
| To insert a line break use the <br /> tag so to produce this: If you want your line break just then insert two breaks. |
You type this:
If
|
Bold and italic text |
||
| To make something bold use the <strong> and </strong> tags:
This text is now bold and |
You type this:
This text is <strong>now bold</strong> and |
|
| 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 |
You type this:
To emphasise the text make it <strong><em>bold |
To change the font face, colour and
|
||
| To use a different font face use the <font face=”…> tag: This is the default font. This |
You type this:
This is the default font. <font face=”Comic Sans |
|
| To make the font bigger or smaller use the <font size=”…> tag: This is 10 point but this is |
You type this:
This is 10 point but this <font size=”3″>is |
|
| 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 |
|
| 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 |
|
| 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 <p align=”right”>This is |
|
| 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 <div align=”right”>You can also make |
Creating Hyperlinks to other web pages |
||
| You can link to another web page using a hyperlink with the <a href..> tag: In this Click here to Use the ‘back’ button to return here if you click the link. |
You type this:
Click <a href=”https://www.geocaching.co.uk”>here</a> |
|
| In this example www.follow-the-arrow.co.uk becomes the link. Go to https://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=”https://www.geocaching.co.uk”>https://www.geocaching.co.uk</a> |
|
| In this example the link opens a new browser window (or tab) using the ‘target’ tag. Click here to This is a useful code to use as it opens any link |
You type this:
Click<a href=”https://www.geocaching.co.uk” target=”_blank”> here</a> to go |
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 |
|
| 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 Note: the <br /> code after the picture is to give |
|
| 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. |
You type this:
<center><img src=”http://img.geocaching.com/track/display/0253dfa1-b0b8-42d7-bdb0-292254083c07.jpg” /><p><center>This |
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)
