HTML Reference Sheet 2
- Basic Tags
- Body Attributes
- Special Characters
- Text Tags
- Links
- Formatting
- Bullet and Numbering List
- Graphical Elements
- Tables
- Table Attributes
- Frames
- Frames Attributes
- Forms
- Styles
<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 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.
Non-breaking space - can use to indent or to make a double space: <p> </p>
<nobr></nobr>
No separation of words, e.g., <nobr>401(k)</nobr>
<
Angled bracket: <
>
Angled bracket: >
&
The "and" sign: &
"
Quote mark: "
—
em (long) dash
•
Bullet symbol (solid disc)
$
Dollar sign
£ or £
Pound sterling
¥ or ¥
Yen sign
€ or €
Euro sign
© or ©
Copyright symbol: ©
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. Write other font names 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
<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
<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)
<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
<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 (%)
<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
<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
<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
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>
working in HTML 4
