Dave’s Amazing HTML Cheat Sheet
By David Schneider
Universal Web Page Requirements
Note:By default web browsers will look for a page called “index.html” in the specified directory.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
General Tag Form <TAG ATTRIBUTE=”VALUE”> … </TAG>
<TAG> <NESTED TAG> … </TAG>
Standard Text Formatting
<BR> Line Break*
<P> Paragraph Break*
<B> Bold
<I> Italics
<TT> Typewriter Font
<HR> Horizontal Line across the width of the screen.*
<PRE> Pre-formatted Text
<FONT SIZE=+n> Increase or decrease the font size by a factor of “n”
The default font size is “3” and font sizes can range between 1 and 7
<CENTER> Center the text and objects within the tags
<!-- -- > Comment out the what lies between.*
*Note: These do not require end tags
Bulleted and Definition Lists
Bulleted List
<UL> Start Bulleted List
<LI> First Bulleted Item in the List*
</UL> Must End Bulleted List
Definition List
<DL> Start Definition List
<DT> Term to be Defined*
<DD> Definition (indented)*
</DL> End Definition List
Note: To create spaces in-between the lines of lists use the <P> tag. * Nested Tags
Inserting Images
<IMG SRC=”image_folder_name/image_name.ext”> Note: There is no end tag required!
Available Attributes:
ALIGN Align the position of the images in the page. All other HTML objects will “wrap” around the image.
Available attribute values are LEFT, CENTER, RIGHT, and JUSTIFY
BORDER When using images as links a border is put around the image. To remove the border set BORDER=”0”
ALT Some old web browsers do not support images or may have a hard time loading larger images. Instead of a broken link, ALT tells the browser to display an alternate text message in its place. Ex. ALT=”alternate text”
Making Links
For a link to a page in the same directory as the current page:
<A HREF=”page_name.html”> Anchor Text and/or Image </A>
For a link to a page in lower directory:
<A HREF=”directory_name/page_name.html”> Anchor Text and/or Image </A>
For a link to a page in a higher directory:
<A HREF=”../directory_name/page_name.html”> Anchor Text and/or Image </A>
For a link to a page elsewhere in the World Wide Web:
<A HREF=”http://www.webAddress.com”> Anchor Text and/or Image </A>
To create a Jump Link
<A HREF=”#Target_Name> Anchor Text and/or Image </A> The Link to the Target
<A NAME=”Target_Name”> Anchor Text and/or Image </A> The Name and Location of the Target
Note: Target names are CaSe sEnsITiVe
For a link to a jump link target on another web page:
<A HREF=”http://www.webAddress.com#Target_Name> Anchor Text and/or Image </A>
A link to your e-mail:
<A HREF="MAILTO:"> Anchor Text and/or Image </A>
A link allowing users to download a file from your current directory:
<A HREF="file_name.ext"> Anchor Text and/or Image </A>
<BODY> Attributes
BACKGROUND Allows you to set the background of the page to an image that will be tiled across the page.
BGCOLOR Allows you to set the background of the page to a standard Hexadecimal (Hex) color value.
TEXT Use the Hex color to set the color of ALL the Text on the page
LINK Use the Hex color to set the color of ALL the Unvisited Links on the page
ALINK Use the Hex color to set the color of ALL the Active Links on the page
VLINK Use the Hex color to set the color of ALL the Visited Links on the page
Hexidecimal Color Chart
Color / Hexadecimal Color Value (#)Black / 00 00 00
Blue / 00 00 FF
Brown / 99 66 33
Cream / FF FB F0
Cyan / 00 FF FF
Dark Blue / 00 00 80
Dark Grey / 80 80 80
Dark Green / 00 80 00
Dark Purple / 80 00 80
Dark Red / 80 00 00
Dark Yellow / 80 80 00
Grass Green / C0 DC C0
Green / 00 FF 00
Light Gray / C0 C0 C0
Medium Grey / A0 A0 A4
Purple / FF 00 FF
Red / FF 00 00
Sky Blue / A6 CA F0
White / FF FF FF
Yellow / FF FF 00
<HEAD> Tags
<TITLE> Give a title to the page to be displayed at the top of the browser.
<META> Provides additional information to the “web-surfer” about your page
Some <META> Attributes are:
HTTP-EQUIV Used to declare what kind of extra information is being presented and will be included in a web browser response header
You MUST use valid HTTP header names. Examples are:
expires Let the user know how long the page will be up
keywords Give the user an hint as to the pages content
refresh How often should the user refresh the page
CONTENT The extra information that is being presented
NAME Declare the kind of extra information without the information being included in a response header
<TABLE> Tags
<TABLE> Create a Table
<TR> Start a Row*
<TH> Start the Header cell of a column* **
<TD> Start a Cell of a column*
* Nested Tag, i.e. no end tag is required
**Some browsers will interpret the first <TD> cell as a header cell if there is not a <TH> cell
defined first.
<TABLE> Attributes
ALIGN See “Inserting Images”
WIDTH The horizontal percentage of the screen that the table will take up
Ex. WIDTH=75%
BORDER ”ALL” makes the table’s border visible. The default is no border or “0”.
CELLSPACING Set the spacing between the cells in pixels
CELLPADDING Set the spacing within the data cells in pixels
<TH> & <TD> Attributes
ALIGN See “Inserting Images”
VALIGN Align the Vertical position of a cell’s content. It’s values are TOP, BOTTOM and CENTER.
COLSPAN Extend the Length of a single cell to cover more than one cell unit
ROWSPAN Extend the Height of a single cell to cover more than one cell unit
BGCOLOR Set the background color of a cell using the standard Hex color value.
Setting Up a Frames Layout, <FRAMESET> and its Attributes
<FRAMESET> Like <TABLE>, All of the arranging of frames occurs between this tag
You do not need the <BODY> tag in the page that layouts the frames.
Arrange the Frames’ Layout by properly nesting groups of <FRAMESET> with these attributes:
COLS Set up the percentage of the screen that the columns will cover*
ROWS Set up the percentage of the screen that the rows will cover*
<FRAMESET COLS="25%,75%"><FRAMESET ROWS="100%">
<FRAME SRC="page1.html">
</FRAMESET>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="page2.html">
<FRAME SRC="page3.html">
<FRAME SRC="page4.html">
</FRAMESET>
</FRAMESET> /
*Note: The percentages must add up to be 100%
Setting Up Individual Frames, <FRAME> and its Attributes
<FRAME> One frame tag is required for every frame declared in <FRAMESET>
There is no end tag for <FRAME>. It is a nested tag.
SRC Give a reference to the webpage that will be displayed in this frame.
BORDER Displays a visible gray border around the frame. The default is TRUE. To make border invisible or sometimes white depending on the browser set it to FALSE or “0”.
FRAMEBORDER Works the same as BORDER. Some browsers recognize one and not the other so it is best to include both. The one not used will be ignored.
MARGINHEIGHT Adjusts the space between the frame’s content and the top and bottom edge of the frame. The default unit is in pixels.
MARGINWIDTH Like MARGINHEIGHT, but effects the frame’s sides.
Note: Many browsers will not allow you to set these attributes to zero and will interpret it as a command to use the browser’s default specifications whatever those may be.
FRAMESPACING Adjusts the space between frames or if appropriate the thickness of the border. The default unit is pixels. Most browsers will accept a “0” value.
SCROLLING Specify if a scroll bar will be displayed on the right side of the frame.
The available values for this attribute are:
AUTO This is the default. The browser will only display a scroll
bar when it is needed.
YES The scroll bar will Always be visible.
NO The scroll bar will Never be visible even if it is needed.
NAME Very Important!!! Assign a name to the frame for future link referencing.
Links Within Frames, a.k.a. Targeting -- IMPORTANT!!!
An additional Attribute for making links is:
TARGET Specifies by NAME where the webpage that is being referenced by the link will be displayed.
Ex. <A HREF=”page_name.html” TARGET=”target_name”>
When clicked upon this link will display the page “page_name.html” in the frame called “target_name”.
Note: a link that targets the frame “target_name” does not have to be in that frame.
There are also four generalized TARGET values that can be used instead of targeting a name.
_BLANK Load the link into a New, unnamed window
_SELF Load the link over yourself -- often the default
_PARENT Load this link over yourself and reset the window completely
_TOP Load the link at the top level
<BASE> Using this tag with the attribute TARGET sets ALL the links in the page to use that target as their default target.
Dealing with Browsers that Cannot Support Frames, <NOFRAME>
<NOFRAME> Defines an area of the webpage that will only be displayed if the browser cannot use frames. It acts as a partition between the frame and non-frame versions.
Note: There is no end tag needed.
Ex.
<HTML>
<HEAD>
</HEAD>
<FRAMESET etc.>
<FRAME etc.>
</FRAMESET>
<NOFRAME>
<HEAD>
</HEAD>
<BODY>
…
</BODY>
</HTML>
Image Maps Using “Spyglass Extensions”
Declaring an Image Map reference is similar to calling a Jump Link:
<IMG SRC="image_name.ext" USEMAP="#the_map’s_name"> Place the Image
<MAP NAME="the_map’s name"> Name and Start the map
… Define the map
</MAP> Close the definition
Defining the Image Map, <AREA> and its Attributes
<AREA> Declares a “hot spot” area of the image. This is a nested tag.
HREF Set the link that the “hot spot” will reference.
SHAPE Defines the Shape of the “hot spot”
There are four values for the SHAPE attribute:
CIRCLE A circle “hot spot”
RECT A rectangular “hot spot”
POLYGON A “hot spot” of 3 or more sides
DEFAULT If the user clicks anywhere on the image that is not a “hot spot”
COORDS Set the coordinates for the hot spot. The origin of an image map starts in the upper left corner. X increases to the right. Y increases going down. The values COORDS takes depend on the value SHAPE has:
For CIRCLE “x_center, y_center, radius”
For RECT* “x_corner1, y_corner1, x_corner2, y_corner2”
For POLY “x_point1, y_point1, x_point2, y_point2, …”
*Note: the two corners specified have to be opposite corners
Special Characters Note: End the ACS II decimal code equivalents with semi-colon ;
& / # / # / $ / $> / + / + / ¢ / ¢
< / - / - / £ / £
“ / " / ± / ± / ¥ / ¥
‘ / ' / ´ / × / § / §
“space” /   / * / * / | / |
( / ( / ¸ / ÷ / ° / °
) / ) / / / / / - / ¯
Ó / © / % / % / _ / ­
@ / @ / = / = / ~ /