Bacic HTML and BB code

Here we have Links to the Codes and Tutorials that you need.
Basic HTML code   (click here)
Advanced HTML code   (click here)
BBCode  (click here)

Why this Bacic HTML and BB code page on Great Hides?

Both these Codes have a use for Geocachers, have you wanted to make that Cool Cache listing like you see on
geocaching.com? Most will say Yes! Yes you don't have to know HTML to make a cache listing but it will end up just being
a sentence or two, not bad it's still another Cache and the more the better. With just a little HTML code knowledge you
can spice up that listing and even add a picture. On another page we will show you how to make that Cool Cache Listing
that you will be Proud of, the Cache Listing and the Hide.

The BBCode is usefull in most Forums and Geocachers can use this code when making that colored Geocache Find Posts. You may have seen then and wondered "How did they do that?", with the BBCode you can do it also.

Download these Codes and print them out for a reference guide.
Basic HTML code - RTF file  (click here)
Advanced Basic HTML code - RTF file  (click here)
BBCode - RTF file  (click here)

HTML Basic Commands (Hyper Text Markup Language)

HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else
connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and
quite powerful in what it allows you to create.

How does it work?

HTML consists of a series of short codes typed into a text-file by the site author � these are the tags. The text is then
saved as a html file, and viewed through a browser, like Internet Explorer or Netscape Navigator. This browser reads the
file and translates the text into a visible form, hopefully rendering the page as the author had intended. Writing your
own HTML entails using tags correctly to create your vision. You can use anything from a rudimentary text-editor to a
powerful graphical editor to create HTML pages.

What are the tags up to?

The tags are what separate normal text from HTML code. You might know them as the words between the . They allow
all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page. Different tags will
perform different functions. The tags themselves don�t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:

<b>These words will be bold</b>, and these will not. = These words will be bold and these will not.

In the example above, the <b> tags were wrapped around some text, and their effect will be that contained text will be
bold when viewed through an ordinary web browser.

BB Code Commands (Bulletin Board Code)

What is BBCode?

BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is
determined by the administrator. This is also how the Neat colored Cache Logs are made using BBCode. BBCode itself is
similar in style to HTML, tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control
over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your
posts is made much easier through a clickable interface above the message area on the posting form. Even with this you
may find our guide useful.

Below you may also use these Code Tutorial links.
Basic HTML code  (click here)
Advanced Basic HTML code  (click here)
BB code  (click here)

Below I have put a button that will print you a nice clean page
of the HTML and BB Codes below.

Basic HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code then copy and paste it into your web page.
We have assembled only the Basic tags that you would use the most.

Tag	Name	Code Example	Browser View
<!--	comment	<!--This can be viewed in the HTML part of a document-->	Nothing will show (Tip)
<A	Link File Link	<A HREF="page1.html"> Goto another page</A> <A HREF="http://www.yourdomain.com/"> Your or another web site name</A> <A HREF="http://www.image location.com/"> <img src="name.gif"></A> <A HREF="http://www.yourdomain.com/file.pdf"> File download on your Site</A>	Another Page Visit Our Site Your Image or A File Download (Tip)
<IMG	Image In a File Folder Off Location	<IMG SRC="Image.JPG"> <IMG SRC="Folder/Image.JPG"> <IMG SRC="http://www.image location.com/Image.JPG">	Your Image (Tip)
<B>	bold	<B>Example</B>	Example
<I>	Italic	<I>Example</I>	Example (Tip)
<U>	Underline	<U>Example</U>	Example (Tip)
<S>	Strike Through	<S>Example</S>	~~Example~~ (Tip)
<BR>	line break	When you use the "line break"<BR>the next text jumps down.	When you use the "line break" the next text jumps down.
<P>	Paragraph	<P>This command will start a paragraph then at the end of your paragraph will put a "space" before the next text line</P>	End of paragraph Text (Tip)
<FONT	FONT	<FONT SIZE="4"> This will determine the size of your Text.</FONT> <FONT color="RED"> This will determine the color of your Text.</FONT> <FONT SIZE="4" color="RED"> This will determine the size and color of your Text.</FONT>	Font size 4 Red Red size 4 (Tip)
<CENTER>	center	<CENTER>This will center the contents on your page</CENTER>	This will center your page contents

Back to the Top of the Page (click here)

Advanced Basic HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code then copy and paste it into your web page.
We have assembled only the a few advanced tags that you would use the most.

Tag

Name

Code Example

Browser View

Nothing will show (Tip)

<A - Link <A HREF="http://www.yourdomain.com/">Visit Our Site</A> Visit Our Site (Tip)

<B> Bold <B>Example</B> Example

<BIG> big (text) <BIG>Example</BIG> Example (Tip)

<BODY> body of HTML document <BODY>The content of your HTML page</BODY> Contents of your web page (Tip)

<BR> line break The contents of your page<BR>The contents of your page The contents of your web page
The contents of your web page

center

<CENTER>This will center your contents</CENTER>

This will center your contents

<DD>

definition description

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DL>

definition list

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DT>

definition term

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example (Tip)

<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example (Tip)

<FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> Example (Tip)

<FORM>

form

<FORM action="mailto:you@yourdomain.com">
Name: <INPUT name="Name" value="" size="10"><BR>
Email: <INPUT name="Email" value="" size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1>
<H2>
<H3>
<H4>
<H5>
<H6> heading 1
heading 2
heading 3
heading 4
heading 5
heading 6 <H1>Heading 1 Example</H1>
<H2>Heading 2 Example</H2>
<H3>Heading 3 Example</H3>
<H4>Heading 4 Example</H4>
<H5>Heading 5 Example</H5>
<H6>Heading 6 Example</H6>
NOTE: Your Text will show Larger than the examples.

<HEAD> heading of HTML document <HEAD>Contains elements describing the document</HEAD> Nothing will show

<HR>

horizontal rule

<HR>

Contents of your web page (Tip)

Contents of your web page

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3">

Contents of your web page

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3" NOSHADE>

Contents of your web page

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

Contents of your web page

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">

Contents of your web page

<HTML> hypertext markup language <HTML><HEAD><META><TITLE>Title of your web page</TITLE></HEAD><BODY>HTML web page contents</BODY></HTML> Contents of your web page

<I> italic <I>Example</I> Example

<IMG> image <IMG SRC="smile.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="text describing the image">
Note: You may also insert a path to where your image is.
<IMG SRC="imagefolder/smile.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="text describing the image"> (Tip)

<INPUT>

input field

Example 1:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

<INPUT>
(Internet Explorer)

input field

Example 2:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

<INPUT>

input field

Example 3:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT type="text" size="10" MAXLENGTH="30"></TD><TD BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image" name="submit" src="yourimage.gif"></TD></TR> </TABLE>
</FORM>

<INPUT>

input field

Example 4:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>

<INPUT>

input field

Example 5:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION >option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

<INPUT>

input field

Example 6:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Select an option:<BR>
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3
<BR>
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
<INPUT type="checkbox" name="selection" CHECKED> Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>

<LI>

list item

Example 1:

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

Example 2:

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 1: (Tip)

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

<LINK> link Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site

<MARQUEE>
(Internet
Explorer) scrolling text <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> Example Marquee (Tip)

<MENU>

menu

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

List item 1
List item 2
List item 3

<META> meta <META name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your site"> Nothing will show (Tip)

<META> meta <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show (Tip)

<META> meta <META http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)

<META> meta <META name="rating" content="General"> Nothing will show (Tip)

<META> meta <META name="ROBOTS" content="ALL"> Nothing will show (Tip)

<META> meta <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show (Tip)

<OL>

ordered list

Numbered

<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Numbered Special Start

<OL start="5">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Lowercase Letters

<OL type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Letters

<OL type="A">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Letters Special Start

<OL type="A" start="3">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Lowercase Roman Numerals

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Roman Numerals

<OL type="I">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Roman Numerals Special Start

<OL type="I" start="7">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

listbox option

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>

<P>

paragraph

This is an example displaying the use of the paragraph tag. <P> This will create a line break and a space between lines.

Attributes:

Example 1:<BR>
<BR>
<P align="left">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 2:<BR>
<BR>
<P align="right">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 3:<BR>
<BR>
<P align="center">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

<SMALL> small (text) <SMALL>Example</SMALL> Example (Tip)

<STRIKE> deleted text <STRIKE>Example</STRIKE> ~~Example~~

<STRONG> strong emphasis <STRONG>Example</STRONG> Example

<TABLE>

table

Example 1:

<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 2: (Internet Explorer)

<TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 3:

<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR="#CCCCCC">Column 1</TD>
<TD BGCOLOR="#CCCCCC">Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>

Example 1: (Tip)

Column 1a

Column 2

Example 2: (Tip)

Column 1b

Column 2

Example 3: (Tip)

Column 1c	Column 2
Row 2	Row 2

<TD>

table data

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1

Column 2

<TH>

table header

<DIV align="center"><TABLE>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
<TR>
<TD>Row 3</TD>
<TD>Row 3</TD>
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<TITLE> document title <TITLE>Title of your HTML page</TITLE> Title of your web page will be viewable in the title bar. (Tip)

<TR>

table row

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1

Column 2

<TT> teletype <TT>Example</TT> Example

<U> underline <U>Example</U> Example

<UL>

unordered list

Example 1:<BR>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL>

Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2
- List item 3
- List item 4

Back to the Top of the Page (click here)

BBCode Tags Chart

To use any of the following BBCode tags, simply select the BBCode then copy and paste it into your document.
We have assembled only the Basic BBCode tags that you would use the most.

Tag	Name	Code Example	Browser View
[B] [/B]	Bold	[B]This text will be Bold[/B]	Bold Text (Tip)
[I] [/I]	Italic	[I]Example[/I]	Example (Tip)
[U] [/U]	Underline	[U]Example[/U]	Example (Tip)
[S] [/S]	Strike Through	[S]Example[/S]	~~Example~~ (Tip)
[SIZE=] [/SIZE]	Size	[Size=4]Changes the Size of your Text[/SIZE]	Test Size 5
[COLOR=] [/COLOR]	Color	[COLOR=RED]This will be Red text[/COLOR]	This will be red text
[CENTER] [/CENTER]	Center	[CENTER]Puts your text in the Center of the page[/CENTER]	Center Text
[RIGHT] [/RIGHT]	Right	[RIGHT]Aligns your Text on the Right side of the page[/RIGHT]	Text on Right
[LEFT] [/LEFT]	Left	[LEFT]Aligns your Text on the Left side of the page[/LEFT]	Test on Left
[EMAIL] [/EMAIL]	Email	[EMAIL]you@domain.com[/EMAIL] [EMAIL=you@domain.com]click to email me[/EMAIL]	you@domain.com click to email me
[URL] [/URL]	Url	[URL]http://www.domain.com[/URL] [URL=http://www.domain.com]click here[/URL]	http://www.domain.com click here
[IMG] [/IMG]	Image	[IMG]http://www.domain.com/Location and Name of the Image/[/IMG]	This will be your Image or Picture
[LIST] [/LIST]	List	[LIST] List Item List Item [/List] [LIST=1] List Item List Item [/List] [LIST=a] List Item List Item [/List]	• List Item • List Item 1. List Item 2. List Item a. List Item b. List Item

Back to the Top of the Page (click here)