HTML Basics
Web pages are based on a simple code called Hypertext Mark-up Language or HTML. The mechanisms behind an HTML page are called "tags". Tags are written in <brackets> and viewers do not see them. There are also some commands (like creating special characters) that do not appear in tags. We'll break down the HTML commands into three basic categories: Text, or controlling the way text is displayed; Hyperlinks, which allow you to link to other web pages; and Graphic Elements, such as adding photos to your geocache pages.
Text
Many times we want to control the way text looks. We may want it to be bold or underlined. All of these use simple tags which you type into your geocache page. For example, if you wanted to make a bulleted list for the contents of your geocache, you would enter this into your geocache page:
<UL>
<LI> Logbook
<LI> Pencil
<LI> Toy
<LI> CD
</UL>
But to the person viewing your page, it would look like this:
What you have done here is told the browser to make an unordered list (the <UL> command) and then included list items (the <LI> command) and finally you turned off the list (the </UL> command).
The underlined and bold text were done like this:
<U>underlined</U>
<B>bold</B>
An example of a special character (which does not use brackets) might be a bullet • or a degree symbol ° or a copyright © symbol. The codes for these start with an ampersand and end with a semicolon. So, to display these, you would type:
• which gives you •
° which gives you ° (you can also use ° )
© which gives you © (you can also use © )
(You can find other special characters at this web site: Coolnerds [http://www.coolnerds.com/html/htmlchar.htm])
There a many, many tags that can affect the way text appears. You can see some of the more common ones on our HTML Tags page. Right now, we'll have quick look at creating hyperlinks.
Hyperlinks
Adding hyperlinks is very easy and very useful. Perhaps you have another geocache which you would like to reference on your geocache page:
I posted this lovely geocache after getting inspired at the wonderful WSGA December Meeting. Everyone was so friendly and helpful. I'm so glad that I joined the WSGA. Whee!
So there you have two links in the paragraph. Let's have a look at the HTML behind it:
I posted this lovely geocache after getting inspired at the wonderful <A HREF="http://www.geocaching.com/seek/cache_details.asp?ID=35455">WSGA December Meeting</A>. Everyone was so friendly and helpful. I'm so glad that I joined the
<A HREF="http://geocachingwa.org">WSGA</A>. Whee!
So the key is the "A HREF" tag. You simply put the URL in between quotes in <A HREF="">. Note that a hyperlink also requires the </A> tag at the end of the link in order to turn it off. Otherwise, all of the subsequent text would be part of the link!
Graphic Elements
Color
The first graphic tag we'll look at is the <color> tag. This can turn text, backgrounds, and other things into different colors. For example, geocaching.com uses this to get the nice green background on its web site.
Two basic tags used with color are background and font. They look like this:
<body bgcolor="?"> Sets the background color, replacing ? with name or hex value.
<font color="?"> Sets the font color, replacing ? with name or hex value.
Colors can be defined by their name (e.g. "red") or by a hexidecimal value. Here are some examples of those:
| "FF0000" or "red" = Red |
| "00FF00" or "green" = Green |
| "0000FF" or "blue" = Blue |
| "005200" = Green for WSGA font |
| "339933" = Green for geocaching.com background |
You can see a wide array of colors at Doug's Hex Color Chart (http://www.hypersolutions.org/pages/rgbhex.html)
Images
Adding a photo or other image to your geocache page can improve the look of your page and also provide information. This is easily accomplished! The main thing is that the photo or graphic element needs to be on a web server somewhere. Often, the easiest way to do this is to upload it to geocaching.com from your geocache page. Then, all you have to do is add the HTML tags to make it appear! Here is how to do it. To include the photo at left, we just used this bit of code:
<IMG SRC="http://img.groundspeak.com/cache/35455_400.jpg" BORDER="0" HSPACE="5" WIDTH="200" ALIGN="left">
Okay, that's a lot of stuff. Let's break it down:
IMG SRC= This tells what the Image Source is. It's the URL for the photo.
BORDER= This says I don't want a border. If I did, I'd put in a value, like 1 or 2.
HSPACE= This designates some horizontal space around the photo.
VSPACE= Didn't use this, but it would be vertical space around the photo.
WIDTH= The photo is actually large. I controlled its size with this tag.
ALIGN= Aligns photo to left of text. Could have picked "right", for example.
Final Word
The final word is a word of caution: Don't go overboard! Do you really NEED to add a rainbow background? How many colors of text do you want on your page before people's eyes begin to water? Text that moves = bad idea. Think before you add the HTML! Here is an example of a geocache page that I (Seth!) made that carefully uses HTML to make the page better and more usable: Lincoln Sites I. Note the use of bold text to call attention to key points. Pre-formated text was used for waypoints (thus aligning the coordinates so they look clean and easy to read). A single image was added to highlight the theme. I also used my trademark background, which hopefully isn't too much!
To see more about bad design, and things to avoid, see webpagesthatsuck.com. Hopefully this tutorial has been helpful. If you have questions or suggestions, feel free to contact seth@geocachingwa.org.
Oh, and to do that tag that opens an e-mail, you use this "mailto" tag:
<A HREF="mailto:seth@geocachingwa.org">seth@geocachingwa.org</A>
Happy geocaching!
Copyright © Washington State Geocaching Association.
Information regarding our Privacy Policy
Last Modified: 12/11/2002 12:59:05 AM