HTML Cheat Sheets

Written by: Eric Lenning (lenning@met.fsu.edu).

Modified by: Stan Kidder ( kidder@cira.colostate.edu).

The Basic HTML Document

HTML documents are in plain (also known as ASCII) text format and can be created using any text editor. HTML uses markup tags to tell the Web browser (Netscape, Explorer, Mosaic, Lynx, etc.) how to display the text and graphics on a web page.

Source code:

Examine the following 'code' for the most basic HTML document, then read the explanation below.

<html>
<head>
<title>Your Title</title>
</HEAD>
<BODY>

This part is the main body of your document.

All the text, images, links, and other things 
in your document are contained in the body.

</body>
</html>

Notice the following things about this source code:

All HTML tags begin with the "less than" sign (<) and end with the "greater than" sign (>).
HTML tags are case-insensitive. (<head> is the same as <HEAD>)
All HTML documents begin with <html> and end with </html>.
The title of the document (which is what appears at the top of the browser window) is contained between the <title> and </title> tags.
The title tags are enclosed between the <head> and </head> tags. These header tags are not required by all browsers.
Tags can be embedded (<head> <title>Your Title</title> </head>) but can not overlap (<title><head> Your Title</title> </head>).
The main body of the document is contained between the <body> and </body> tags.
All of the tags shown here are non-empty, meaning they have both a < > at the beginning and a </> at the end. (There also exist several empty tags that have only a < >, as we will soon see.)

HTML Elements

Headings

<Hy>Text of heading</Hy>

where y is a number between 1 (largest text) and 6 (smallest text) specifying the level (size) of the heading.

Heading 1

Heading 3

Heading 6

Line Breaks/Paragraphs

Since browsers ignore blank lines, spaces, and carriage returns, you need special tags to force a break or a blank line in a document.

-- Paragraph marker
Starts a new line after skipping a line.

-- Line break
Starts a new line, without skipping a line.

These are two examples of the empty tags that we mentioned before. (Notice no or is necessary.)

Lists

Unordered List <ul> <li>Missouri <li>Kansas <li>Colorado </ul>	In an unordered list, list elements are bulleted automatically.	Looks like: Missouri Kansas Colorado
Ordered List <ol> <li>Missouri <li>Kansas <li>Colorado </ol>	In an ordered list, list elements are numbered automatically.	Looks like: Missouri Kansas Colorado

Unordered lists begin and end with <ul> </ul>.
Ordered lists begin and end with <ol> </ol>.
List items are denoted by <li> (empty tags, once again).

We mentioned and above, but there are also other ways to get your text looking the way you want it.

Quotations

<blockquote>"Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal."</blockquote>

Separates and formats a quotation, so it looks something like:

"Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal."

Centering

<center>You can center a whole document, if you wish.</center>

Looks like:
You can center a whole document, if you wish.

Preformatted Text

<pre>Preformatted Text</pre>

Causes browser to display text exactly as it is typed in the document, instead of ignoring blanks lines, tabs, carriage returns, etc. (Very useful...try experimenting.)

Comments

Of course, real programmers don't document. If it was hard to write, it should be hard to understand.

Horizontal Rule

<hr>

Puts a horizontal line in your document, like I have been doing to start a new section.

And you can also specify the size of the line in pixels. (And here comes a new section.......)

Character Formatting

You can use Bold Text
You can use Bold Text

You can use Italics
You can use Italics

You can use Bold Italics
You can use Bold Italics (But you cannot overlap like Bold Italics.)

You can use <tt>Typewriter text</tt>, which looks a lot like <code>Computer code</code>
You can use Typewriter text, which looks a lot like Computer Code

And there are lots of others, but they are not necessarily supported by all browsers...yet.

Special Characters

There are many special characters in HTML that cannot be displayed directly. Three of these are:

<         which is entered as      &lt;
>         which is entered as      &gt;
&         which is entered as      &amp;

Of course '<' and '>' cannot be displayed, since they denote the beginning or the end of an HTML tag. Similarly, the reason '&' cannot be displayed is because it denotes the beginning of every escape sequence, three of which are shown ab ove.

Two other handy escape sequences to know are &#176, the ° (degree) character, and &copy, the © symbol.

There are complete lists published elsewhere on the Web.

Font Sizing

These are similar to the Heading tags, but they do not add line breaks like heading tags do.

You can use them with sections of text, or with single letters, both larger and smaller than normal.
You can use them with sections of text, or with single letters, both larger and smaller than normal.

Links!!!!

<a href="URL">text or image</a>

(Finally we're going somewhere!)

A link contains a URL, which stands for Uniform Resource Locater. This points to another place on the web. The format is:

protocol://hostname[:port]/directory_path/filename

The most common protocols are ftp, gopher, and http.

You will see that using the entire URL often is unnecessary. For example:

You will need to use the whole URL when linking to a specific document on a different machine:: <a href="http://www.awc-kc.noaa.gov/spc/Storm_Prediction_Center.html">SPC page</a>
This gets you to the Storm Prediction Center page. The machine name is www.awc-kc.noaa.gov, the path is /spc/, and the file is Storm_Prediction_Center.html. (There are easier addresses!) Note that the only text seen by the user in this case is "SPC page."
You sometimes can just use the machine name:: <a href="http://www.comet.ucar.edu">COMET page</a>
This will take you to the main COMET page.
If you a linking to another document in the same directory as your page:: <a href="other_document.html">My other document</a>
Notice there was no protocol (http://) listed, only the document name. If you are just linking to another document in your directory, it is best NOT to include the entire URL. If you then wish to move the documents to a different machine or directory so meday, their relative locations will be the same. (This is why this is called a relative link.)
If you have a line such as <a name="section_1"> in your document, you can link to this, too. Just do:: <a href="#section_1">Jump to Section 1</a>
This type of link is called a bookmark and is handy in long documents, or if you wish to put in a table of contents. Note that the name of the bookmark is "section_1", and you point to the bookmark by putting a "#" sign in the URL before the name of the bookmark.
A slightly different type of link is the email link, defined as:: <a href="mailto:you@your.address">you@your.address</a>
This allows the user to send you mail. Notice the lack of // after the protocol (if "mailto" is even considered a protocol).

Inline Images!!!

Very easy. The format is:

<img src="URL">

The src, or source, URL here often is just a filename, such as picture.gif.

If this particular picture.gif file is in a different directory, say one called "images", the link would look like:

<img src="images/picture.gif">

Do you want to include an image in a link (like the flags in the COMAP 96 page)? Try:

<a href="other_document.html"><img src="URL">optional text</a>

Do you want to get rid of that border around the image that indicates it is a link? Try:

<a href="other_document.html"><img src="URL" border=0 >optional text</a>

Sometimes it is nice to include alternate text for those poor souls who can't view images with their browsers.

<img src="URL" border=0 alt="You're missing a great picture here!" >

Notice that <img ...> is an empty tag; there is no </img> tag that goes with it.

Background Colors

In the opening <body> tag, include the following option:

Try values from 0-9 and A-F for each rrggbb, experimenting with different colors.

For example, bgcolor="#000000" gives a black background, bgcolor="#0000ff" gives a blue background, bgcolor="#00ff00" gives a bright green background, and bgcolor="#cf3df2" gives a really ugly color of purple. (Experiment!!!)

Of course, you may also want to change the colors of plain text, unvisited links, visited links, and active (currently selected) links for the whole document. Use:

The colors for the COMAP 96 page are:

Notes:

Of course, this is only a very limited introduction. There is so much more information out there on the Web, and I encourage you to check it out. One excellent source is http://www.ncdesign.org/html/index.htm.

Also, if you are looking at a web page and you want to see the source for that page, just go to the "View" menu in Netscape and select "Source..." or to the "File" menu in Mosaic and select the "View Source..." choice. You can learn a lot this way! You can also copy the html code, paste it into your page, and modify it for your purposes. If you see something you like on the Web, grab it!

SatMet Home Page