HTML 102

Would you like to know a little about HTML, to jazz up your cache pages on Geocaching.com? Here are a few tags you can learn to do just that.

HTML, or Hypertext Markup Language, is really just a set of tags that you can add to regular text to control the appearance that text, or to add and position pictures, on a web page.

This section, HTML 102, will cover the following elements:

The font tag
The image tag - adding pictures to your pages
The anchor tag - linking to other pages

The font tag

You can change the color or size of text with the font tag.

  • The size can range from 1 to 7, with 1 being the smallest and 7 being the largest. The default size is 3.
  • Color names that you can use with this tag include: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white.

Code looks like:
  <font color='red' size='4'> This font is big and red </font>

And it will look like this on the web page:
  This font is big and red

Back to the top

The image tag - adding pictures to your pages

You can use this tag to insert images into your web page. We have used the MnGCA button image in this example.

  • The text after "src" needs to be the path to the image that you have already saved on the server, for instance, the image that you have uploaded to geocaching.com.
  • The text after "alt" will be what people who aren't able to view pictures in their web browsers will see, and the text that will pop up on the web page if you hover the mouse cursor over the image.

Code looks like:
  <img src='images/MnGCA-Button.gif' alt='Minnesota Geocaching Association'>

And it will look like this on the web page:
 Minnesota Geocaching Association

Back to the top

The anchor tag - linking to other pages

You can link to other pages using the anchor tag.

  • Between the <a> and </a> tags can be either regular text or a picture (which you insert using the image tag, above) that the user will click on to go to the new web page.
  • The examples below use both the text "MnGCA" and the image of the MnGCA button to open the MnGCA home page in a new window.
  • If you wanted the new page to open in the same window, rather than a new one, you could eliminate the "target='_blank'" text.
  • The text after "href" needs to be the path of the web page you are linking to.

Code looks like:
  <a href='http://www.mngca.org' target='_blank'>MnGCA</a>
OR
  <a href='http://www.mngca.org' target='_blank'>
  <img src='images/MnGCA-Button.gif' alt='Minnesota Geocaching Association'> </a>

And it will look like this on the web page:

  MnGCA

OR

  Minnesota Geocaching Association

Back to the top