HTML Tags Cheat Sheet
by Tom of Snakeroot DataGraphics
how to write simple web pages

Basic text   |   Special Characters   |   Images   |   Links   |   Tables
How to build your website

This page describes how to make your web page by writing the html code directly.

Opening, closing and setting up your web page.

The file names of almost all web pages must end in file name extension ".html" or ".htm" —otherwise browsers won't recognize them as web pages. Why such a funny combination of letters? HTML stands for "Hyper Text Markup Language" and that's the "language" web pages are written in, and enables clickable links to be placed on a page.

Web pages are viewed in web browsers, which are software programs especially designed to interpret the html code. Examples of browsers are Internet Explorer, Firefox. Netscape, Konqueror, Safari, IBrowse, and Opera.

Web pages are pure text only, and can be viewed and edited in any text editor, such as Notepad or AppleText. If you make your web page in a word processor (AppleWorks or Wordpad) rather than a text editor, be sure to save it with the "text only" option, or else a browser won't see it as a web page.

Web pages have within them what are called control tags, which are instructions to the browser about how to make the page appear. Control tags do all of the work in a web page and are always enclosed in <angle brackets>. These are the same as the "less than" and "greater than" symbols in math and they appear on the keyboard over the period and comma keys. Tags do almost everything in a web page. Most of what follows is a vocabulary of what can be in those tags and what each of them do.

This is perhaps a good point to mention that browsers will always interpret any number of spaces or carriage returns in a row as one single space. This means you are free to arrange your code in a way that it can be easily edited later on. Skip a line or two whenever you wish, indent all you like; the browser will ignore it all, but you will be better able to read and edit your own code. All the browser cares about is the order in which the code appears.

There are two types of tags, those that start something <tag> that needs to be ended </tag>, and those that just ask for something to be done, thus stand alone with no end tag <tag>.

<html> - starts the web page.

</html> - ends the web page.

<head> and </head> - these go right after the <html> and define the page header. Nothing in the header will appear on the web page.

<title> and </title> - enclose your page title between these and put them between the page header tags. The title appears on the top of the browser window or on the current browser tab, but it is not part of the page proper.

<body> - this comes right after </head> and begins the body of the web page, the stuff you'll actually see on the web page.

</body> - this ends the body of the page.

So, your web page will be structured like this:

<title>Your page title goes here.</title>
The visible part of your page goes here.

  • You can modify the <body> tag with a background image (background="pathname/imagename")
  • You can modify the <body> tag with a background color by using either the name of a color (bgcolor="red|blue|green|aqua| etc."), or . . .
  • by using the hexadecimal code to control the Red, Green, and Blue elements on the screen (bgcolor="#00ff00" which would be bright green). The template is #RRGGBB. The "#" symbol indicates that hexadecimal is intended.
  • Hexadecimal values (base 16, instead of the base 10 used for our common numbering system) go from 00 for darkest to ff for brightest, using these values: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Counting up goes like this: 00, 01, 02, 03, 04 .... 98, 99, a0, a1, a2, a3..... df, ef, ff, where ff is equal to 256 in decimal (16 x 16).
  • These same two systems of modifying the background color of a page (using either the color name or using the hex code) can be also used for generating colored text, hairline rules, tables, and table cells.
  • All such modifications must go within the tag itself and be separated by a space from anything else within that tag. Thus, a body tag like this:
    <body bgcolor="lime">
    would result in a page with a lime green background.

top of page

Adding Basic Text content to the web page.

The <p> tag is used to begin a paragraph. The ending </p> tag is optional; when a new paragraph begins, the previous one is assumed to have ended.

The <hn> tag is used to create headline text, where n is any number 1 thru 6, 1 being the largest. The first line at the top of this page is <h4>. The <hn> tag must be ended with an </hn> tag.

  • A blank line is automatically inserted between <p> paragraphs and after headline text.
  • Text can be aligned with align="right|left|center|justify" (the | means choose one!) within either the <p> tag or the <Hn> tag.

The <br> tag is used to break a line of text, like a carriage return on a typewriter. No blank line is inserted. If you want a blank line, use <br><br> which adds another carriage return. There is no ending tag for <br>.

<b> is used to bold all text until a </b> tag is reached.

<i> is used to italicize all text until a </i> tag is reached.

<u> is used to underline all text until a </u> tag is reached.

The above can be used in any combination, but should be properly nested. Like this: <b><i><u>bold, underlined and italicized text</u></i></b>

The <font> tag is used to change the font, color and size of all text until the </font> tag is reached.

  • Color operates exactly like it does in coloring the body of the page. This colors the text itself, not the text background.
  • The font face can be changed by using face="fontname". You can see what all your fonts look like using WordPad or Open Office. Often more than one font is called for, because if the user's computer doesn't have the first font, the browser will look for the second font, third font, and so forth; if none of the fonts can be found, the face request is ignored.
  • the size of the font can be controlled using size="n", where n is 1 (very small! Like this!) on upward.
  • The size can also be described relative to the existing font size, for example size="+2" defines the font coming after it as being two sizes larger than whatever came immediately before the <font> tag.
  • Ending the font tag ends all of the modifications made within the previous font tag.
  • Font tags can be nested for more complicated effects.

An example:
<font size="+2" face="arial black,helvetica bold" color="green">The quick brown fox jumps over the lazy dog.</font>
will yeild:
The quick brown fox jumps over the lazy dog.

The <hr> tag generates a horizontal rule. It may be modified by: color="colorname", width="fixed number of pixels", width="percent of page or table cell width", or size="1 thru 6", which determines the "fatness" of the line. The hairline rule below is made like this:
<hr color="navy" size="3">

top of page

Adding Special Characters to the web page.

Several common characters like & and " (quotation marks) have special meaning for web browsers. Therefor if you want to use them in the text of a page, they must be "created" with special codes. Additionally, there are codes for characters you won't find on any keyboard but that you might want to use in your page, like the copyright symbol. These are CODES and NOT TAGS, so do not use the < and > with them. All Special Characters begin with an "&" (ampersand) and end with a ";" (semicolon). There are hundreds of them, and if you Google "html special characters" you'll find whole web pages of them, but here are some examples:
Character      Code    
I'll addmore later.

top of page

Adding Images to the web page.

Although web pages may contain paragraphs of text, they don't actually contain images; rather they have instructions to the browser to go get an image to display on the page. Thus images are always separate from the page itself. An image is added to a web page with a tag like this:
<img src="pathname/imagename">
The "img" part says "go get an image" and the "src=" part tells the browser where to find the image.

  • Don't forget the extension (.jpg, .gif, etc.) on the image name.
  • Adding "../" to the start of the path name (without the quotes) indicates to go up one folder level. This can be repeated as many times as necessary.
  • Vertical space around the top and bottom sides of the image can be created with the vspace="n", where n is the number of pixels of space to be left at the top and bottom.
  • Horizontal space around the right and left sides of the image can be created with the hspace="n", where n is the number of pixels of space to be left on each side.
  • Images can be aligned within a page or table cell with align="right|center|left"
  • Alternate text for an image can be added with alt="Image description, file name, or whatever, goes here.". Alternate text appears when the mouse hovers over the image as well as whenever the image fails to load.
  • To define how high (tall) you want the image to display, use height="n", where n is the number of pixels wide you want the picture to display on the page.
  • To define how wide you want the image to display, use width="n", where n is the number of pixels high you want the picture to display on the page.
  • Defining the height and width is optional, since the browser will figure it out from the image size anyway. However when you define them in the image tag, the browser knows how much space to leave for the image, preventing the page from "jumping around" when loading as the browser finds it must reconfigure the page to make room for the image.

So, to display an image file MyCat.jpg in the Pix folder, centered on the page, with 20 pixels of open space on the right and left hand sides, and displayed on the page at 400 pixels wide, with some alternate text in case the picture didn't display correctly, you would use:
<img src="Pix/MyCat.jpg" align="center" hspace="20" width="400" alt="My beautiful cat asleep in her basket.">

top of page

Adding Links to the web page.

Links are what turns regular text into hypertext. Anything can be made into a link, an image, a table, or any amount of text. Making something a link means that when you click on it something happens, depending upon what kind of a link you made.

  • Mailto: links call up your default email program to compose an email to the address inside the link.
  • Links to another page bring up another web page, and depending upon what you put inside the link it can be the next file over from the existing page, or a file several folders away, or a file somewhere out on the web.
  • Links to an image are similar to links to another page, but only bring up an image, instead of a page.

All links are made the same way, starting with <a href="..."> and ending with </a>. Everything in between is what appears as the link on the web page, and although this can be anything at all, it's usually a good idea to have it relate somehow to where the link will be taking you. Between the quotation marks in the <a href=" "> tag goes whatever you want to link to, another web page, an image or an email address.

To create a link to load this page, you would write
<a href="CheatSheet.html">HTML Cheat Sheet</a>
Here it is done for real:
HTML Cheat Sheet

If you are linking to an email address, you have to add "mailto:" immediately after the first set of quotation marks, thus:
<a href="">Email Tom</a>
which would look like this when put into a web page:
Email Tom.

Notice how the "" that's inside the <a href=" "> tag appears in the lower left of your browser window when you hover over the link. That tells you what will happen if you click on the link. All links work that way. Try hovering over "Cheat Sheet".

top of page

Adding Tables to the web page.

Tables are very useful for positioning a mixture of items on a page. Think of a table as a grid, with rows and columns. Each area where a row and a column intersect is called a cell. A table can have as many rows and as many columns as you wish. A table with only one row and one column has but a single cell. This whole web page, for example, is entirely within a single cell of a table, in order to control the text's position in the browser window (centered) and the maximum length of lines of text (I chose 600 pixels, so it will be narrow enough to display properly even on old monitors at low resolution).

Tables can also be used to display data in a web page, in a manner similar to a spreadsheet. Almost any kind of data, alone or mixed, including images and even other tables, can be put into a table cell.

The <table> tag creates the table and the </table> tag ends the table. The <table> tag may be modified in many ways, thus giving tables their power. All modifiers are optional; if absent default values are assumed. Here are some examples:

  • The border="n" modifier defines the borders of the table and all of its cells. The value of n can be anything from 0 (no border) on up. Numbers above 12 get pretty fat looking.
  • Tables may be aligned relative to the page with align="right|center|left" (Choose one only!).
  • The width of tables may be defined by width="n" where n is either a number of pixels or a percentage of the page width (your choice). If you use n%, it assumes you want to use a percentage of the width of the area the table finds itself in (either within the whole page, or within another table). Note that choosing a percentage of page width may, on various width computer monitors and at varying screen resolutions, make the contents of the table be displayed in an unexpected (too wide) arrangement, even if it looks fine on your monitor.
  • The modifier cellpadding="n" makes the space between the cell border and the cell contents to be n pixels wide. This keeps contents of contiguous cells from appearing too close together.
  • The modifier cellspacing="n" defines the width of the space between cells in pixels.
  • Tables may have a background color or image in the same way as in the body tag. Table backgrounds override any background in the body of the page.

Once you have a table set up, it needs at least one row, created with the Table Row tag <tr>.

Once you have a row established, you can add any number of Table Data <td> ... </td> cells in the row. The contents of each cell goes where the ... are in this example. Contents can be images and / or text in any combination.

End the row with </tr> once you have all the <td> ... </td> combinations you need in the row.

Repeat the previous two steps until you have all the rows you want.

Then end the table with a </table> tag.

So the code for a simple table centered on the page, with a border 2 pixels wide, and with two rows of three cells each would look like this:

<table border="2" align="center"> This starts the table and defines it characteristics.
<tr> This starts the first row.
<td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td> This is the first row.
</tr> This ends the first row.
<tr> This starts the second row.
<td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td> This is the second row.
</tr> This ends the second row.
</table> This ends the table.

...and would look like this:
row 1 cell 1row 1 cell 2row 1 cell 3
row 2 cell 1row 2 cell 2row 2 cell 3

Getting a little fancier, we can add color to row 2 cell 2 by adding bgcolor="aqua" to its <td> tag, and add cellpadding="5" and bgcolor="violet" to the table tag and we get this:
row 1 cell 1row 1 cell 2row 1 cell 3
row 2 cell 1row 2 cell 2row 2 cell 3

Each <td> Table Data tag may have any combination of these modifiers:

  • Horizontal alignment of contents within the cell is done with align="left|center|right" modifier.
  • Vertical alignment of contents within the cell is done with the valign="top|middle|bottom" modfier.
  • The background of cell may be a color or an image in the same way as the body tag. Cell backgrounds override any background in the table.
  • The width of a cell may be set with the width="n" modifier, where n is either a number of pixels or a percentage of the page width (your choice). If you use n%, it assumes you want to use percentage. Note that if the sum of all your cell widths in any row is greater than the assigned table width, the table width is ignored.

top of page

version: 19-Jan-08.