[GetMeOutdoors]

HEY! IT WORKED! The new JRE did the trick. Java 6 Update 11 if anyone else needs to know.

[GetMeOutdoors]

Yeah, this is weird. The go button is dead in IE 6 and Firefox 3.0.5 (fully patched BTW. I wonder if it’s a java problem. I’ll try to update my JVM.

[GetMeOutdoors]

When you’re viewing the map… the “Zoom to address” bar on the right, above the cache list and the icon checkboxes.

[GetMeOutdoors]

TABLES! So, if you’ve tried out the previous things and want to tackle something a little heftier… make a table!

Tables are wrapped in tags, just like everything else. The sometimes confusing part is that a table’s rows and columns (in that order) are also wrapped in tags.

Let’s say you want a table that is 3 columns wide and 2 rows high. This is the HTML skeleton that would get you there:

Content	Content	Content
Content	Content	Content

Let’s look at that a little deeper:

<-First you need your table tag to start things out

<-Then you need to start your first row

<-This closes the column

<-This concludes the first row

<-This starts the 2nd row

<-end the 2nd row

<-This is for the first column in the row Content <-This is what will appear in the first column of the first row	<-Here's the second column of the first row Content	<-And here's the third column of the first row Content
<-column 1 in 2nd row Content	<-column 2 in 2nd row Content	<-column 3 in 2nd row Content

<-end the table
Now of course, you can use the example above as-is to create a real table, but before this can become particularly useful, you have to define the attribute in the tags that will give it some meaning.

tag attributes:
Width: This can be defined in pixels or a percentage of the area of the page the table is living in. If pixels, then just a number will do. If a percent, then use the % sign. Examples:
Width=”500″ <-gives you a table 500 pixels wide.
Width=”95%” <-gives you a table 95% of the space the table resides in. Height: same principles as width. Cellpadding: number of pixels that will be the “margin” of each cell in the table. Cellspacing: number of pixels that will be the width dividing each cell in the table. border: number of pixels the outline around each cell should be. align: ‘left’, ‘center’, or ‘right’. Defines how the table itself will align in the space given. This is only noticeable when the width of the table is less than 100% of the space it can occupy. BGcolor: the HTML color (the #123456 thing) of the background of the whole table. BorderColor: the HTML color of the border of each cell. This is only applicable when the border is greater than 0. Background: The http:// address of an image that will tile in the background of the table. This overrides the background color if specified.

AND

tag attributes: see Width, Height, BGcolor, Background, and Align above – they work the same way but apply to only the current row or cell. Valign: Top, Middle, Bottom, Baseline. – This defines how the text will appear in the row or cell. The default is Middle. Top will make the text appear anchored to the top. Obviously, a person could specify values in these attributes that contradict each other. For example. You could specify the table’s width to be 500, the first row to be 300 and the 2nd row to be 800. My advice: don’t do that. You don’t know what you’re going to get and different browsers will give different precedence to different values. If you’re going to be specifying values (especially width and height) be sure to do your math right and also remember that the cell spacing counts toward your overall width and height of the table. You probably want to know what to do when you want a table that doesn’t line up in a perfect grid. For example, maybe you want the first row to be one giant cell that spans across all the columns to form a sort of “header” row. Also, maybe you want a column to span across multiple rows. That can be done. In the next installment 😉

[GetMeOutdoors]

@Trekkin’ and Birdin’ wrote:

We haven’t found Green Bean Cacherole,

Yea, that one’s a breeze in the winter. The only trouble we had was trying to figure out how to get to stage 2 without having to drive around some private property. I’m sure there’s some way but on the field, it was hard to tell which way to go…. our compass seemed to point straight across the nearby fence that had signs posted. If you do your homework before you go to know where the park boundaries lie, I’m sure it would be a beautiful walk. Even with driving, it was still quite nice and easily findable in snow.

As far as this Saturday goes, I would love to come along. But I’ll have to get “clearance” from “the tower”. If you catch my meaning there. 😉 😆 😳

[GetMeOutdoors]

Now that you know the basics, how do you use HTML on GC.com?

For your cache descriptions, make sure you have checked the “The descriptions below are in HTML” box. Then you can just use them as desired. Keep in mind though, that you have to use them to do ANY formatting, even line breaks and paragraphs.

On your profile, you can just start using it in the “Your Profile Details” box. There’s no box to check.

So with that introduction, lets look at some specific tags. We’ll start with some common ones. by they way, it does not matter if you use UPPER or lower case letters or a mixture of the 2 for the tags.

Paragraph Tag –

This tag organizes your text into a paragraph, putting space between the paragraphs.

Try these 2 examples and notice the difference:
1)
line 1
line 2
line 3

2)

line1

line2

line3

You’ll see that the first example produces line1line2line3 while the second actually puts them on separate lines, double spacing between them. A longer line would simply wrap around in your browser single-spaced until it got to that .

Line Break Tag –

This tag will put a line break in your text where the
appears. It will be a single space line.

This is line 1
And this is line2

will produce:
This is line 1
And this is line2

Font Tag –
The font tag can take several attributes but lets look at the basic 3:
Face: What font do you want to display – keep in mind that the viewer must have this font on their computer for it to display correctly. if they don’t, the results can be unpredictable.

Color: The value always starts with a # sign and the next 6 characters define 1 of almost 17 million colors. The first 2 characters define how much red will be included, the second are how much green and the last 2 are how much blue. These values are in “hexadecimal” which means that it’s a numbering system based on 16 values rather than the normal 10 that we are used to. “Numbers” (from lowest to highest) are 0 1 2 3 4 5 6 7 8 9 a b c d e f. I don’t want to go into base 16 numbering too much but jsut so you know that 00 = 0 and FF – 255, we’re ok for now. 255 is the maximum number you can use with 2 characters and these are the 2 characters that we use each for red, green, and blue. So for example the value #0000FF would be 0 red, 0 green and 255 blue. This is going to be a bright blue. #00FF00 is 0 red, 255 green, and 0 blue. This will be a bright green. #000000 is black becuase no color is used. #FFFFFF is white because all colors are used. #888888 would be a nice medium grey. Play around with the values and see what they do. There are also online tools that help you pick html colors.

Size: This is a value from 1 and up that defines how large the text will appear. A normal size text will be 2 or 3 depending on your font. I like to use arial size 2. That might be too small for Times New Roman however – use 3 for that. This is another value you’ll have to play with.

So with that said, now it’s time to construct the tag.
This is my text.

You can also specify optional fonts if the main one isn’t available:
This is my text.

If the viewer doesn’t have Arial, it will use the next in the list and so on.

Division Tag –

This tag is great. It can be used for a variety of formatting needs, most commonly for justifying the text. This is done with the “align” attribute.

This text will be on the left

This will be in the middle

And this will be on the right

Notice that I wrapped a paragraph tag around each div tag to put each one in it’s own paragraph. The Div tag is “nested” in the p tag.

Image Tag –
Who doesn’t like images? Well, nevermind. If you DO have the need to put an image in your cache description (or your profile). This will do it for you. It only need a single tag, there’s no open and close. There are attributes associated with this tag as well:
src: This defines the source of the image – what the web address is of the image. It is the only required attribute. It is a good practice to use the full http:// address of the image. When you upload an image to your cache page, you can find out what this web address is by right clicking on the link that is created on the cache listing, and viewing it’s properties.

Width: a number indicating the width of the image in pixels. If you want the original width, this is not necessary to include.

Height: a number indicating the height of the image in pixels. If you want the original height, this is not necessary to include.

Align: This is similar to the align attribute for the div tag but this one behaves a little differently and is applicable to the image only relevant to the text around it. Options are Left, Right, Top, Middle, Bottom, and others, but those will do for now. Play around with each value to see how it is different.

Those are the basic tags. Now for some examples:

This will produce a nice normal CITO logo.

This will be a fat squatty version.

Link Tag –
“A” actually stands for anchor but that doesn’t make sense to most people so lets just call it the link tag. This is the thing that allows you click on some text or a picture and it will redirect you to another page or site. This is how you can link to a coordinate checker from your puzzle cache page for example. The A tag has some attributes:
href: The http address of the page you want the user to go to when they click. It’s a good idea to use the whole http:// address here. This is the only required attribute.

target: Normally a link opens in the same browser window that you click in. The target attribute gives you some control over that. the value “_blank” will open the link in a new window (or tab depending on the viewer’s browser and settings)

Those are some good ones to get started with. I know that how to make tables would be a good tutorial too but that’s a little more involved so I’ll save it for next time.

As Cheeto suggested, playing around with your description before submitting is perfectly acceptable and a godo idea.

[GetMeOutdoors]

@lone_gunman wrote:

@GetMeOutdoors wrote:

For everyone… Do we need a tutorial in the forums on HTML? Is that something that would be useful?

Yes please

Ok, I’ll write something up. and post it in a new thread.

[GetMeOutdoors]

It’s kind of hard to say something specifically helpful without knowing what your page layout look like in word and without knowing how comfotable you are with HTML. (since you’re using word I’ll have to assume that you’re not familiar with HTML) I’d be glad to try to help but I’d probably have to have you e-mail me your document. Would you mind doing that?

For everyone… Do we need a tutorial in the forums on HTML? Is that something that would be useful?

[GetMeOutdoors]

Yeah, the Bone collector series was a fun time. Bandits did a really good job there. The scenery was beautiful and the fog was everywhere. Made for some nice views. And it was great meeting some new but familiar cachers and chatting together. Those are some of the great parts of this game. 🙂

[GetMeOutdoors]

@One Paddle Short wrote:

Winter yes/no?

Most definately yes… did it a few weekends ago in the snow. It wasn’t as easy as the summer probably but stage 1 will be your toughest part and it’s not that bad. Though.. I was 6 inches from it and missed it at one point 😉 It was certainly a fun cache and would be a nice snowshoe walk as well.

[GetMeOutdoors]

@Trekkin’ and Birdin’ wrote:

Hey,

I can’t believe we’re asking this, but you know, hauling a canoe all over the state gets old sometimes, and we figure we’ve earned our stripes on this type of cache. So….are these Great Wisconsin River caches in the Wausau area ones we could reach on hard water? We might be looking for adventure once all the holiday visiting has passed! Thanks.

I think you’d be ok to get them on the ice but you’d have to stay away from the main channel. It’s not super hard yet… But that aside… the finds themselves are not winter friendly. You’d pull your hair out trying to find them. Besides, I don’t know that you can truly appreciate them in the winter. It’s one of my favorite series for sure and it makes for a great paddle. If you do decide to wait, let me know when you plan to come. I live close by and would love to be your guide 😉

[GetMeOutdoors]

Hey that sounds like alot of fun! I’m a programmer by trade but haven’t taken the time to learn GSAKese yet. But I’m in Wausau 🙁 It might be worth the drive, though.

[GetMeOutdoors]

Keep up the momentum, BD! I enjoyed meeting you too! Even if you did look like a muggle at first 🙂 I’ve spotted your tokens around at some unexpected places. You have gotten around! Keep it up!

[GetMeOutdoors]

Well if we can rally enough support, maybe Wisconsin could consider hosting in 2010 and take some pressure off Those MI, OH lads and lasses.

[GetMeOutdoors]

@Team Deejay wrote:

Maybe something better would be a letter you could leave at the neighbor’s home, assuming they were not home when you tried to inform them.

If you run into someone who is not so cooperative, well, folks, there is always another guardrail or stop sign.

Excellent points.

[Author]

Posts