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:[email protected]"> 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*

Ex. <FRAMESET COLS=�25%,75%�>

�� <FRAMSET ROWS=�25%,50%,25%�>

*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 and 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>

<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�		*	*	\|	\|
(	(	�	÷	�	°
)	)	/	/	-	¯
�	©	%	%	_
@	@	=	=	~

Dave�s Amazing HTML Cheat Sheet

Universal Web Page Requirements

General Tag Form���� �������������������� ����������� �<TAG��� ATTRIBUTE=�VALUE�> � </TAG>

Standard Text Formatting

Bulleted and Definition Lists

Making Links

Hexidecimal Color Chart

ALIGN����������������������� See �Inserting Images�

Setting Up a Frames Layout, <FRAMESET> and its Attributes

Setting Up Individual Frames, <FRAME> and its Attributes

Dealing with Browsers that Cannot Support Frames, <NOFRAME>

General Tag Form�� <TAG�� ATTRIBUTE=�VALUE�> � </TAG>

ALIGN�� See �Inserting Images�