The Wisconsin Geocaching Association

  Login or Register

Website Navigation

62.png Home

49.png Information Center
26.png WGA Newsletters
24.png Reviewer's Words
53.png Presentation Resources
39.png Geocaching Files
27.png Bookmarks
56.png Location Rules and Regs
49.png BOD Info Center

17.png Forums
16.png New Posts
20.png Unanswered Posts

calendar_day.png Upcoming Events
mapicon.png Map
29.png Calendar
11.png Submit Event

mapicon.png WGA State Park CachesNew content !

shield_star.png Cache of the Month
mapicon.png Past Winners Map

LonelyCache.png Lonely Cache Game
mapicon.png Current Map
26.png Scoreboard
11.png Submit Report

rescueiconsm.png Cache Rescue
11.png Submit a Mission

icon_community.gif Members
27.png Your Account
47.png Private Messages
contact_blue.png WGA Member Map
Geocaching_LIVE_poweredby_16.png GC.COM Authorization

icon_members.gif News
tree-T.gif Topics
tree-T.gif Archives
tree-L.gif Submit News

image_cultured.png Photo Gallery
tree-T.gif Updates
tree-L.gif Popular

shield.png Fun Stuff
28.png Recent Logs
TB.gif Picnic to Picnic TB Race Standings
TB.gif WGA Hauler

49.png Board of Directors
 
Contact Us

 
Facebook

Wisconsin Geocaching Association

 
Follow Us

Twitter Button

 
Subscribe to Newsletter

Subscribe to our mailing list

* indicates required
 
Geocaching.com Search
View Search Syntax
 
COTM
Winner -
June 2014 Northern Zone:
Forbidden Fruit

Winner -
June 2014 Northeast Zone:
Wildlife & Travel Bug Sanctuary

Winner -
June 2014 West Central Zone:
Pirates of the Roche-a-Cri

Winner -
June 2014 South Central Zone:
The Big "K"

Winner -
June 2014 Southeast Zone:
Whoomp! There It Is

Winner -
June 2014 Series of the Month:


More Info >>>

 
 
Wisconsin Geocaching Association: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic
Author Message
GetMeOutdoors
WGA Member



Joined: 2007-12-27
Posts: 344
Location: Wausau

PostPosted: Tue Dec 30, 2008 2:50 pm Reply with quote Back to top

Well, this tutorial won't exactly qualify you for a career in web deign, but it will hopefully better equip the average geocacher to use HTML in their posts, cache descriptions, and profile pages.

First of all, HTML stands for HyperText Markup Language. It's a sort of programming language that computers read, know what it means, and what to do with it. HTML is code that exists in around your text to tell the computer how it's supposed to look. HTML is what your internet browser reads and knows how to display all those pretty cache pages with he pictures, bold text, tables, fonts, etc.

What does HTML look like? Well there alot of words with <> signs around them. In your internet browser, click "view" from the menu and then click "page source" or "source" and you will see all the HTML behind the page you are currently looking at. At first is really overwhelming, but let's break it down.

Virtually everything in HTML is a "Tag". This tag is the thing that has the <> symbols around it. You'll probably see alot of <p>, <br>, <font>, <div>, <table> tags and things similar to that. These tags are like commands that the browser reads to know what to do.

There are 3 different kind of tags. The first kind is the kind that has one piece and always lives by itself. <br> is one of those tags, it means "line break". <li> is another one and means "list item". But more on the specific tags later.

The second type is the kind that needs a neighbor, it can't live by itself. Most of the HTML tags are this way. These consist of an opening tag and an end tag. The opening tag usually begins some type of formatting and the end tag ends that formatting. Every thing in between those has that formatting applied to it. For example, the bold tag - <b>. You would see - <b>This</b> word is bold. Notice the opening tag <b> and the end tag </b> Everything in between those 2 are bold. (<strong> also works for most browsers) The openiong tag and ending tag always have the same command (b in this case for Bold) and the end tag always has the slash / to indicate that it is an end tag.

A note about these types of tags, you can "nest" them but they cannot overlap.

In other words you CAN do this, this is called "nesting" becuase one is contained entirely inside the other:

<Tag1><Tag2>Something</Tag2></Tag1>

You CANNOT do this, this called "overlap":

<Tag1><Tag2>Something</Tag1></Tag2>

Now for the third type, which is really just a special kind of the second type and these are the tags which must have 1 or more attributes applied to them to make them meaningful. For example, you can use a <FONT> tag to tell the browser to start formatting the text in a different way, but you can't just say <FONT>, you must also tell it which font face to use, what size, or what color to make it. These attributes are defined in the opening tag in a name value combination. The value should be in quotes.

For example, this is how you might use the font tag:
<FONT face="Arial" color="#0000FF" size="2"> This is my text </FONT>

Don't worry too much about the specifics of the values right now, but just how they are formatted. This pattern will be consistant over the various tags.

That's the basics. Next time I'll list some specific tags, what they do, and how to use them.
 
View user's profile Send private message
-cheeto-
WGA Member



Joined: 2007-06-12
Posts: 4538
Location: Appleton, WI

PostPosted: Tue Dec 30, 2008 3:33 pm Reply with quote Back to top

FYI -

The following post on the GC.com forum from a Groundspeak employee explains which HTML tags are accepted by their application for use on cache pages:

http://forums.groundspeak.com/GC/index.php?s=&showtopic=191126&view=findpost&p=3570735

They will filter out certain HTML when posting a new cache page and you will find it very annoying.

Also, I have seen many issues over time with using the <p> and <br> tags in conjunction with each other. You might be best served to stick with <br> only and not use <p> tags in your writeups.

One other hint. If you are submitting a new cache page for the first time, I have had a much better result if you first submit the cache page with a simple description. Check that it has html but write something like:

This is my cache description<br>
Will add more later

Then after you have created the new submission (making sure to uncheck the Cache active checkbox) go back in and edit the listing and paste in your full cache description HTML. For some reason, the initial submission page seems to "mess with" your HTML more. For one, it turns "line feeds" i.e. when you hit enter in your text into a <br> when you did not code a <br> tag. This can be extremely annoying when it adds a <br> in the middle of an imgsrc which then breaks the image. The edit listing function seems to leave your coding the way you want it.

Keep in mind that Groundspeak is always changing their site functionality and your results may vary from release to release. Typically, you will not have issues with already submitted pages until you go and edit it or go to create a new cache and then you might find you have a problem now with HTML you have been using all along. For instance, they stop supporting a certian tag that you were using. There have been many threads in the GC.com forums around this after each new update.

Just some things I have seen. Your results may vary.

-cheeto-
 
View user's profile Send private message
GetMeOutdoors
WGA Member



Joined: 2007-12-27
Posts: 344
Location: Wausau

PostPosted: Tue Dec 30, 2008 3:38 pm Reply with quote Back to top

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 - <P></P>
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)
<p>line1</p>
<p>line2</p>
<p>line3</p>

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 </p>.


Line Break Tag - <br>
This tag will put a line break in your text where the <br> appears. It will be a single space line.

This is line 1<br>And this is line2

will produce:
This is line 1
And this is line2


Font Tag - <Font></font>
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.
<Font face="Arial" Size="2" Color="#AA0000">This is my text.</font>

You can also specify optional fonts if the main one isn't available:
<Font face="Arial, Helvetica, Courier New" Size="2" Color="#AA0000">This is my text.</font>

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

Division Tag - <Div></Div>
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.

<p><Div align="left">This text will be on the left</div></p>
<p><Div align="center">This will be in the middle</div></p>
<p><Div align="right">And this will be on the right</div></p>

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 - <img>
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:
<img src="http://www.geocaching.com/images/WptTypes/cito_72.gif">
This will produce a nice normal CITO logo.

<img src="http://www.geocaching.com/images/WptTypes/cito_72.gif" width="70" height="300">
This will be a fat squatty version.



Link Tag - <a></a>
"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.
 
View user's profile Send private message
Team Deejay
WGA Member



Joined: 2005-10-02
Posts: 2390
Location: Rochester, WI, US

PostPosted: Tue Dec 30, 2008 8:50 pm Reply with quote Back to top

One more thing: when creating HTML for cache pages, you are better off to use a plain text editor (like Notepad) rather than something like Microsoft Word. Word will create your HTML for you, but it will insert LOTS of extraneous tags which don't do anything but make your page a big mess. Just learn to use the basic tags and you will get much better results.

Oh yeah, one more thing: If you are an advanced HTML user, the geocaching website will strip out any Java, Javascript, or other programming language objects. (CSS is ok.) This is done to "protect" users from unscrupulous people who might embed viruses, keyloggers, and the like in their cache pages. This may seem like an extreme solution, but this is the solution they have chosen.
 
View user's profile Send private message Send e-mail
GetMeOutdoors
WGA Member



Joined: 2007-12-27
Posts: 344
Location: Wausau

PostPosted: Fri Jan 02, 2009 10:53 am Reply with quote Back to top

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:

<Table>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
</table>

Let's look at that a little deeper:

<Table> <-First you need your table tag to start things out
<tr> <-Then you need to start your first row
<td> <-This is for the first column in the row
Content <-This is what will appear in the first column of the first row
</td> <-This closes the column
<td> <-Here's the second column of the first row
Content
</td>
<td> <-And here's the third column of the first row
Content
</td>
</tr> <-This concludes the first row
<tr> <-This starts the 2nd row
<td> <-column 1 in 2nd row
Content
</td>
<td> <-column 2 in 2nd row
Content
</td>
<td> <-column 3 in 2nd row
Content
</td>
</tr> <-end the 2nd row
</table> <-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.

<Table> 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.


<TR> AND <TD> 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 Wink
 
View user's profile Send private message
Display posts from previous:       
Post new topic   Reply to topic

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2008 phpBB Group
:: Theme & Graphics by Daz :: Ported for PHP-Nuke by nukemods.com ::
All times are GMT - 6 Hours
 
Forums ©
 
Legal Notice | Privacy Policy | Terms of Use | Parental Consent Form | contact | Comments ]

All content © 2013 Wisconsin Geocaching Association, except comments and forum entries which are property of their posters.

The Groundspeak Geocaching Logo is a registered trademark of Groundspeak, Inc. Used with permission.
 


Use of this Web site constitutes acceptance of the WGA Terms of Use


Distributed by Raven PHP Scripts
New code written and maintained by the RavenNuke™ TEAM


(Original PHP-Nuke Code Copyright © 2004 by Francisco Burzi)
Page Generation: 0.14 Seconds

:: fisubice phpbb2 style by Daz :: PHP-Nuke theme by www.nukemods.com ::
:: fisubice Theme Recoded To 100% W3C CSS & HTML 4.01 Transitional & XHTML 1.0 Transitional Compliance by RavenNuke™ TEAM ::

:: W3C CSS Compliance Validation :: W3C HTML 4.01 Transitional Compliance Validation :: W3C XHTML 1.0 Transitional Compliance Validation ::