HTML Tips

This page is intended to showcase some quick hit tips to help make your cache page easier to create. Below will be some examples and you can copy the example by clicking on the button under each section.

Before we begin: If after you've implemented some of the examples below and things are going haywire, check these two things first. It can be a huge timesaver!

• For HTML commands, you will have an opening bracket "<" and a closing bracket ">" around a command. Each command has both an opening tag and a closing tag that tells the HTML where to implement the command that the tag is giving. For example, a paragraph tag looks like this: <p>. It is very important that you put a closing tag with a forward slash inside of the matching tag after the text you are wanting to be inside. The ending paragraph tag looks similar but with "/" after the left bracket: <p>Your text here</p>.
• Don't forget to close your quotation marks! If you leave them open, sometimes the HTML has a hard time understanding what you are trying to say.

Paragraph Tags

As stated above, the paragraph tag sets text apart from other text, just like a paragraph. If you surround your text with the <p></p> tags, it will give you a blank line between text on the page.

Line Break

Sometimes you just want some text on a new line. You can do this with the <br> tag. You can put several in a row and get more line breaks between elements. An example would be between two images on your cache page. Notice in the example, the 3rd line does not have a <br> tag after it so the 4th line is displaying immediately after on the same line.

Center Text

There are a few ways to center text on the cache page. The easiest is to surround your text with <center> and </center> tags. Just make sure to put that closing tag after the text you're wanting to center or the page will apply the centering to everything below the opening center tag.

Bold, Underline, Italics

You can add bold, underline, and italics tags around text to get it to take on those properties. You can also mix and match but be sure to close your tags in the proper order they were envoked. See example.

Header Tags

You can add header tags to quickly enlarge and bold a piece of text using the <h1> tag. These range in size from h1 to h6 with h1 being the largest of the header tags. These can be styled with color and other options.

Horizontal Row

Another way to separate sections on your cache page is to add a horizontal row using the <hr> tag. It simply adds a horizontal bar.

Adding Hyperlink Text

There are times where you want to add a link to another website or an image onto your cache page. You just surround your text with the <a> tag but you'll also need another piece inside the first "a" tag. The "href" part tells the HTML where to send you when you click on the link. This is where you put the URL. You can also add more things into the first "a" tag to tell the link to open in a new browser or change the color or even to hide the underline. Just don't forget the closing </a> tag after the text.

Adding Images

To add an image to your cache page, first thing you will need is to get a URL. The image will need to be hosted on the internet somewhere in order for you to get the URL. This can be a URL from a different website or you can upload the image to a number of hosting sites for free and get the URL that way. FYI: You can actually host the image on your cache page using the "upload an image" link at the bottom of the page when you are creating a new cache. After the image is uploaded, click on it and in the address bar of your browser, you will see the URL link to copy.

Once you have the URL, you just need to create the tags on your page. In the example, I have added a <center> tag around the image so it will be centered on the page. Next you will need a <img> tag with the URL inside of it, like the example shows.

Linking Images

Continuing the previous two examples above, you can also link the image on your page to take you to another place on the internet. You can link to another website or another image or any other place you can get a URL address. The example below places the <a> tag first and instead of words inside the closing </a> tag, you just place the <img> tag instead.

Adjusting Height and Width of Images

Sometimes the image you are using is too big for your cache page. You can adjust the height and width of an image by adding a little bit of code inside the <img> tag. There are several ways to do this so I will provide a few examples below. To help keep the image in the same shape but smaller, it may be easier to adjust using percentages. This is also helpful if you want the image to be the width of your page.

Inline Styling

Many of the effects above, such as <b>, <i>, and <u> can be achieved with inline styling. One of the benefits to inline styling over individual tags is everything is altogether and it has more options at your disposal. With inline styling, you are applying the specific style to the section you're working on.

Divs

The final section will briefly cover the <div> tag. Divs can be thought of as a special container where you can set apart the content inside from the other parts of the page. You can get incredibly fancy with them but the most basic use on a geocaching page is for background color or a background image with text or an image over it.