Cheat Sheet:
HTML Tags and Attributes

Note: Attributes can generally be put one after the other separated by one space; for example:
<font face="Times New Roman" size="3" color="FFFFFF">Text</font>


Basic Tags

<html></html>
Creates an HTML document -- REQUIRED

<head></head>
Sets off the title and other information that isn't displayed on the Web page itself -- REQUIRED

<title></title>
Puts the name of the document in the title bar -- REQUIRED

<body></body>
Sets off the visible portion of the document -- REQUIRED

Body Attributes:

<body bgcolor="?">
Sets the background color, using name or hex value ("blue" or "#0000FF")

<body background="BACK.gif">
Sets the background using an image file

<body text="?">
Sets the text color, using name or hex value, default is #FFFFFF

<body link="?">
Sets the color of links, using name or hex value, generally #0000FF (blue)

<body vlink="?">
Sets the color of followed links, using name or hex value, generally #800000 (maroon)

<body alink="?">
Sets the color of links on click, generally #FF0000 (red)

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Sets the margins of the page to zero. Browsers typically have default values (usually 15 pixels) for page margins. Code above covers both Internet Explorer and Netscape.

<!-- comment -->
Creates an invisible comment - it will not appear on the page as viewed in the browser - it is a note to yourself in the code.

<META HTTP-EQUIV="REFRESH" content="5;url=http://www.url.com">
Automatic Redirect Code; 5 is the seconds before redirect.


Special Characters

&nbsp;
Non-breaking space - can use to indent or to make a double space: <p>&nbsp;</p>

<nobr></nobr>
No separation of words, e.g., <nobr>401(k)</nobr>

&lt;
Angled bracket: <

&gt;
Angled bracket: >

&amp;
The "and" sign: &

&quot;
Quote mark: "

&#151;
em (long) dash

&#149;
Bullet symbol (solid disc)

&#36;
Dollar sign

&pound; or &#163;
Pound sterling

&yen; or &#165;
Yen sign

&euro; or &#8364;
Euro sign

&copy; or &#169;
Copyright symbol:


Text and Formatting Tags

HTML will recognize one space -- after that, you have to code.

<pre></pre>
Creates preformatted text

<h1></h1>
Creates the largest headline

<h6></h6>
Creates the smallest headline (h2-h5 are in between h1 and h6)

Headline Attributes:

<h1 align="?">
Aligns the headline. Can use "center", "right", "left" or "justify"

<b></b>
Creates bold text

<i></i>
Creates italic text

<u></u>
Creates underlined text -- in general, avoid using (underlining is the default for indicating a link)

<tt></tt>
Creates teletype, or typewriter-style text

<sub></sub>
Creates subscript text

<sup></sup>
Creates superscript text

<cite></cite>
Creates a citation, usually italic

<em></em>
Emphasizes a word (same as <i>)

<strong></strong>
Emphasizes a word (same as <b>)

<p></p>
Creates a new paragraph -- do not have to close tag. Can use to create white space (creates a double space)

Paragraph Attributes:

<p align="?">
Aligns a paragraph to the left, right, or center

<br>
Inserts a line break -- do not have to close tag. Use to start next line without a space (unlike <p>)

<blockquote></blockquote>
Indents text from both sides

<div align="?"></div>
A generic tag used to format large blocks of HTML, also used for stylesheets

<font face="?"></font>
Sets typeface for font. Make a list for alternatives, i.e., <font face="times new roman, arial">

<font size="?"></font>
Sets size of font, from 1 to 7

1=8 pt
2=10 pt
3=12 pt (standard)
4=14 pt
5=18 pt
6=24 pt
7=36 pt

<font color="?"></font>
Sets font color, using name or hex value


Lists

<dl></dl>
Creates a definition list

<dt>
Precedes each definition term

<dd>
Precedes each definition

<ol></ol>
Creates a numbered list

Ordered List Attributes:

<ol type="?">
Where the types are "1", "a", "A", "I", "i"

<ol start="#">
1,2,3 is the default for ordered lists

<li></li>
Precedes each list item, and adds a number or a bullet (use with <ol> and <ul>)

<ul></ul>
Creates a bulleted list

Unordered List Attributes:

<ul type="?">
Where the types are "circle" - hollow bullet; "disc" - solid bullet; "square" - solid block


Links

<a href="URL"></a>
Creates a hyperlink. If you use the full address, i.e., "http://www.name.com", it is an absolute link. If you use "../index.htm", it is a relative link -- it is in the same file system. Use"../" to indicate "one folder up"

<a href="mailto:EMAIL"></a>
Creates a link to an e-mail address. For example, <a href="mailto:kmoravec4@yahoo.com"> would create an e-mail message to kmoravec4@yahoo.com.

<a name="NAME"></a>
Creates a target location within a document -- i.e., a bookmark.

<a href="#NAME"></a>
Links to that target location (bookmark) from elsewhere in the document

A (link) Attributes:

<a href="URL" title="NAME">
Adds simple mouseover text to a text link (see ALT for image mouseover text)

<a href="URL" target="_blank">
The link is opened in a NEW browser window

<a href="URL" style="text-decoration:none">
The link is not underlined (underlining is the default)


Graphical Elements

<img src="URL">
Adds an image (image source). It is a good idea to set up an image folder, i.e., <img src="images/image.gif">

Image Attributes:

<img src="name" align="?">
Aligns an image: "left", "right", "center"; "bottom", "top", "middle"

<img src="name" border="?">
Sets size of border around an image -- this can only be used when the image is a link. The default is 1. If you want no border, use <img src="name" border="0">

<img src="name" width="?">
Sets the width of the image - use # (pixels)

<img src="name" height="?">
Sets the height of the image -- use # (pixels). You should only use width and height if you have the exact size of the image, otherwise it will not look right.

<img src="name" alt="?">
Gives the alternate text for the image; also supplies simple mouseover text for the image

<hr>
Inserts a horizontal rule

Horizontal Rule Attributes:

<hr size="?">
Sets size (height) of rule -- use # or %. Default is 1pt.

<hr width="?">
Sets width of rule, in percentage (%) or absolute value (#)

<hr noshade>
Creates a rule without a shadow

<hr align="?">
Aligns the rule: "left", "right", "center"; "bottom", "top", "middle"

<hr color="?">
Sets font color, using name or hex value


Tables

<table></table>
Creates a table

<tr></tr>
Sets off each row in a table -- tag close is optional

<td></td>
Sets off each cell in a row

<th></th>
Sets off the table header (a normal cell with bold, centered text)

Table Attributes:

<table border="#">
Sets width of border around table cells

<table bordercolor="?">
Sets the color of the border

<table align="?">
Sets alignment for table: "left", "center", "right"

<table width="?"
Sets width of table - in pixels (#) or as a percentage (%) of document width

<table cellspacing="#">
Sets amount of space between table cells

<table cellpadding="#">
Sets amount of space between a cell's border and its contents

<tr align="?"> or <td align="?">
Sets alignment for cell(s): "left", "center", "right"

<tr valign="?"> or <td valign="?">
Sets vertical alignment for cell(s): "top", "middle", "bottom"

<td bgcolor="?">
Sets the background color of the cell, using name or hex value ("blue" or "#0000FF")

<td background="BACK.gif">
Sets the background of the cell using an image file

<td colspan="#">
Sets number of columns a cell should span

<td rowspan="#">
Sets number of rows a cell should span (default=1)

<td nowrap>
Prevents the lines within a cell from being broken to fit

<td width="?">
Sets width of cell - in pixels (#) or as a percentage (%)

<td height="?">
Sets height of cell - in pixels (#) or as a percentage (%)


Frames

<frameset></frameset>
Tag in a frames document; can also be nested in other framesets -- replaces <body></body>

Frameset Attributes:

<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width

<frame>
Defines a single frame -- or region -- within a frameset

<noframes></noframes>
Defines what will appear on browsers that don't support frames

Frames Attributes:

<frame src="URL">
Specifies which HTML document should be displayed

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame marginwidth="#">
Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight="#">
Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling="VALUE">
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto". The default, as in ordinary documents, is auto.

<frame noresize>
Prevents the user from resizing a frame


Forms

<form></form>
Creates all forms

<select multiple name="NAME" size="?"></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option>
Sets off each menu item

<select name="NAME"></select>
Creates a pulldown menu

<textarea name="NAME" cols="40" rows="8"></textarea>
Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag

<input type=text name="foo" size="20">
Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME">
Creates a Submit button

<input type="image" border="0" name="NAME" src="name.gif">
Creates a Submit button using an image

<input type="reset">
Creates a Reset button


Styles

For hyperlinks:

<style>
<!--
a:link{color:#0000FF; text-decoration:underline; 
a:visited{color:#511418; text-decoration:none; 
a:active{color:#FF0000; text-decoration:none; 
a:hover{color:#FF0000; text-decoration:underline; 
-->
</style>

For text:

<style>
<!--
H1 {font-family:Times New Roman, Times; color:#2A057A; 
H2 {font-family:Times New Roman, Times; font-size:14pt; 
H3 {font-family:Times New Roman, Times; font-size:12pt; 
P {font-family:Times New Roman, Times; font-size:12pt; )
LI {font-family:Times New Roman, Times; font-size:12pt; )
TD {font-family:Times New Roman, Times; font-size:12pt; }
-->
</style>

<STYLE type="text/css">
BODY {font-family: serif;}
H2, H3 {font-family: Verdana, Helvetica, sans-serif;}
H2 {color: maroon; text-decoration: underline;}
P {margin-left: 3em;}
SUP {font-size: x-small; color: #666666;)
DIV.endnote P {text-indent: -1em; color: #333333;}
.link {text-decoration: underline;)
</STYLE>

For more information, see http://www.htmlhelp.com/reference/css/ and http://www.w3.org/TR/REC-CSS1 and http://www.intranetjournal.com/articles/200102/csstutorial1a.html.

 

©2003, Kelly Moravec