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.

Test first paragraph.

Test second paragraph.

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.

Test first line.
Test second line.

Test third line. Test fourth 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.

Oooh, look! This text is centered!

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.

Bold
Underline
Italics
Bold, Underline, Italics

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.

BIG HEADER TEXT

Not quite as big of header text

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.

Here is one section of text.

---

Here is another section.

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 (link to the webpage or image). 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. See examples below.

CacheSleuth's Website
CacheSleuth's Website - open in new window
CacheSleuth's Website - new window, no underline
CacheSleuth's Website - new window, color, bold, no underline

Adding Images

To add an image to your cache page, first thing you will need is to get a URL (the web address of the image). 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 (be cautious here because the link can disappear if the other website removes it) 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. This will put the image on your page!

Please note that the URL can take on may different looks. In the example below, it begins with "https://" and ends in ".jpg". Just make sure you copy the entire URL you are wanting to use. It may be a good idea to paste that URL into a different tab in your browser to make sure you have it correctly copied.

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. It's that simple! Click on the image below to see it in action.

Tip: You can also have the link open in a new window just like in the Adding Hyperlink Text example above by adding a target="_blank" behind the URL in the <a> tag.

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. As you can see from the examples, you can make the image size look completely different by messing with the numbers. 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. To do this, you can add in a width="100%" and it will keep the height the same but the width will fill the sides.

Tip: If you upload your image to your cache page and click on your image, it will show the full size. A trick I've learned is that the Geocaching website creates two image sizes in the background when you upload it. If you were to remove the "_l" from the URL below (at the end just before the extension .jpg), it will show the full version of the image you uploaded. It only works on the images uploaded to the Geocaching website so don't expect this to work elsewhere. One benefit to having the "_l" in the image URL's from Geocaching uploads is these images are already formatted to fit the width of your cache page so you don't need to make any adjustments in the HTML.

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. As you'll no doubt realize the more you do your cache pages, sometimes it is easy to forget to put a closing tag on your styling or center tags and the rest of your cache page goes wonky. With inline styling, you are applying the specific style to the section you're working on. It's very useful and my preferred method.

Below I use an example of a <p> tag and a <span> tag but there are a lot more options than can be shown here so feel free to google "inline styling" to explore what can be done.

Look at me now!

Wait, something looks out of place in this sentence.

Divs

The final section will briefly cover the <div> tag. Div's in a nutshell can be thought of as a special container where you can set apart the content inside from the other parts of the page. A division if you will. 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.

---

Hopefully these examples will help you create some dynamic and great looking cache pages! Google is your best friend when it comes to finding tons of examples of how to use these and come up with some creative uses for what you have learned. That being said, feel free to message me with questions and I'll help as best as I can. Good luck!