MBGA HTML Quick Guide

HTML, an acronym for "HyperText Markup Language", is written in the form of tags, surrounded by angle brackets.

example: <tag>text</tag>

It describes the structure of text in a document by defining links, headings, paragraphs, lists, embedded images, etc.

Basic HTML Tags

Tag Description
<!--...--> Defines a comment
<a> Defines an anchor
<b> Defines bold text
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<center> Deprecated. Defines centered text
<div> Defines a section in a document
<em> Defines emphasized text
<font> Deprecated. Defines text font, size, and color
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<img> Defines an image
<li> Defines a list item
<ol> Defines an ordered list
<p> Defines a paragraph
<pre> Defines preformatted text
<strong> Defines strong text
<table> Defines a table
<td> Defines a table cell
<th> Defines a table header
<title> Defines the document title
<tr> Defines a table row
<u> Deprecated. Defines underlined text
<ul> Defines an unordered list

Sample HTML Code

  What You'd Code What You'd See

Heading Elements

<h1>Largest Heading</h1>
<h3>Medium Heading</h3>
<h6>Smallest Heading</h6>

Largest Heading

Medium Heading

Smallest Heading

Text Elements

<p>This is a paragraph</p>
<br />
<hr>
<pre>This text is preformatted</pre>

This is a paragraph




This text is preformatted

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

This text is emphasized
This text is strong
This is some computer code

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>
<center>This will center your text</center>
<u>This text is underlined</u>

This text is bold
This text is italic
This will center your text

This text is underlined

Links and Image Elements

<a href="http://www.mbgeocaching.ca/">This is a Link</a>

<a href="http://www.mbgeocaching.ca">
<img src="http://www.mbgeocaching.ca/gallery2/2995-4/MBGA_7_Colour_indexed.jpg"
alt="MBGA Logo"></a>

<a href="mailto:junk@mbgeocaching.ca">Send e-mail</a>

This is a Link

MBGA Logo

Send e-mail

Unordered Lists

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

  • First item
  • Next item

Ordered Lists

<ol>
<li>First item</li>
<li>Next item</li>
</ol>
  1. First item
  2. Next item

 

  What You'd Code What You'd See

Tables

<table border="1">
<tr>
<th>Header A</th>
<th>Header B</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>

Header A Header B
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Fonts

<p>
<font size="2" face="Verdana">
This is a paragraph in Verdana with a size 2 font.
</font>
</p>
<p>
<font size="4" face="Times">
This is another paragraph, but in Times New Roman with a size 4 font.
</font>
</p>


This is a paragraph in Verdana with a size 2 font.


This is another paragraph, but in Times New Roman with a size 4 font.

Colours

<p><font color=red>This is how to set font to a different colour.</font></p>
<table>
<tr>
<td bgcolor=green>This is how to set the background color of a table entry.<td>
</tr>
</table>

This is how to set font to a different colour.

This is how to set the background color of a table entry.

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from some source.
</blockquote>

Text quoted from some source.

For more detailed information on HTML, please visit http://www.w3schools.com/html/.

 

HTML Editors

Free: Notepad, Wordpad (Microsoft Word not recommended)
Free HTML editors: http://www.thefreecountry.com/webmaster/htmleditors.shtml#htmleditors
Other: Dreamweaver, MS Frontpage

HTML Etiquette

How to See How Others have Coded Their Web Pages

If you see a web page that does something that you'd like to imitate, there is an easy way to see how the coder did it. while on the web page, right click. A list of options will be displayed. Select "View Source". This will open a text editor (like Notepad), and will show the code, or "source", of the web page. With this you can see what tags were used to produce the results you're looking for.

Embedding Tags

You may use multiple tags on text to get various formatting. To do this you would "embed" your tags. Simply put, you would wrap your text in tags, like an onion.

Sample: <p> <b> <i> This is a paragraph with the text both bold and italicized </i> </b> </p>

Note that the order of the opening tags is reversed when closing them.

Using Colours

There are 16 acceptable colour names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Sometimes HTML colours are expressed using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). The hex values are written as 3 double digit numbers, starting with a # sign. For example,
#800080 is the colour value for purple, #000000 is black and #FFFFFF is white<

Sample: <font color=purple>text</font> and <font color=#800080>text</font> will have the same results.

Keep the Number of Fonts and Colours Used to a Minimum

The more fonts and/or colours you use, the more complex it makes your page look. If it's not easy to read, no one will read it.

<font size=6 color=red face="arial">It would</font>
<font size=2 color=blue face="times">be really</font>
<font size=7 color=yellow face="courier">hard to</font>
<font size=4 color=grey face="verdana">read a</font>
<font size=1 color=black face="times">web page</font>
<font size=5 color=green face="arial">that consists</font>
<font size=3 color=aqua face="courier">of several</font>
<font size=3 color=blue face="verdana">font changes</font>
<font size=7 color=red face="times">and</font>
<font size=3 color=green face="arial">colour changes</font>.
It would be really hard
to
read a web page that consists
of several font and
colour changes.

Good choices for fonts would be from the "Sans Serif" family, like Verdana, Arial, and Helvetica.

Keep Images to a Reasonable Size

It is not recommended to have large images on a web page as it could prove problematic for downloads on PDA devices, phones and computers using dial-up modems. A good rule of thumb is to keep image files to less than 100Kb.

The display size of the image on the web page can also be manipulated using the width and height attributes.

Sample: <img src="http://mysite.com/myimage.jpg" width=200 height=300>

Check Your Links

When an <img> tag points at an image that does not exist, a dummy image is substituted. When this happens, make sure that the referenced image does in fact exist, that the hyperlink has the correct filename, server, and directory in the URL, and that the file permissions are set appropriately (world-readable).

Adding Sound to Your Page

This is not recommended. In fact, Geocaching.com will strip out background sound from your page. You can, however, add a link to your page that could launch a sound byte in an mp3 or wav format. If you choose to do this, keep the file small to ensure short download times.

Avoid the Underline Tag

Why should you avoid using a legitimate HTML tag? By using the underline tag ( <u> ), the text could appear to be a hyperlink. If you wish to emphasize your text, you can use other tags, like bold ( <b> ).