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:
ALIGNAlign 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
BORDERWhen using images as links a border is put around the image. To remove the border set BORDER=”0”
ALTSome 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=” 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=” 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
BACKGROUNDAllows you to set the background of the page to an image that will be tiled across the page.
BGCOLORAllows you to set the background of the page to a standard Hexadecimal (Hex) color value.
TEXTUse the Hex color to set the color of ALL the Text on the page
LINKUse the Hex color to set the color of ALL the Unvisited Links on the page
ALINKUse the Hex color to set the color of ALL the Active Links on the page
VLINKUse 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-EQUIVUsed 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:
expiresLet the user know how long the page will be up
keywordsGive the user an hint as to the pages content
refreshHow often should the user refresh the page
CONTENTThe extra information that is being presented
NAMEDeclare 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”
WIDTHThe 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”.
CELLSPACINGSet the spacing between the cells in pixels
CELLPADDINGSet the spacing within the data cells in pixels
<TH> & <TD> Attributes
ALIGNSee “Inserting Images”
VALIGNAlign the Vertical position of a cell’s content. It’s values are TOP, BOTTOM and CENTER.
COLSPANExtend the Length of a single cell to cover more than one cell unit
ROWSPANExtend the Height of a single cell to cover more than one cell unit
BGCOLORSet 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:
COLSSet up the percentage of the screen that the columns will cover*
ROWSSet 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.
SRCGive a reference to the webpage that will be displayed in this frame.
BORDERDisplays 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”.
FRAMEBORDERWorks 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.
MARGINHEIGHTAdjusts the space between the frame’s content and the top and bottom edge of the frame. The default unit is in pixels.
MARGINWIDTHLike 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.
FRAMESPACINGAdjusts the space between frames or if appropriate the thickness of the border. The default unit is pixels. Most browsers will accept a “0” value.
SCROLLINGSpecify if a scroll bar will be displayed on the right side of the frame.
The available values for this attribute are:
AUTOThis is the default. The browser will only display a scroll
bar when it is needed.
YESThe scroll bar will Always be visible.
NOThe scroll bar will Never be visible even if it is needed.
NAMEVery 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:
TARGETSpecifies 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.
_BLANKLoad the link into a New, unnamed window
_SELFLoad the link over yourself -- often the default
_PARENTLoad this link over yourself and reset the window completely
_TOPLoad 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.
HREFSet the link that the “hot spot” will reference.
SHAPEDefines the Shape of the “hot spot”
There are four values for the SHAPE attribute:
CIRCLEA circle “hot spot”
RECTA rectangular “hot spot”
POLYGONA “hot spot” of 3 or more sides
DEFAULTIf the user clicks anywhere on the image that is not a “hot spot”
COORDSSet 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 CharactersNote: End the ACS II decimal code equivalents with semi-colon ;
& / # / # / $ / $> / + / + / ¢ / ¢
< / - / - / £ / £
“ / " / / ± / ¥ / ¥
‘ / ' / / × / § / §
“space” /   / * / * / | / |
( / ( / / ÷ / / °
) / ) / / / / / / ¯
/ © / % / % / _ / ­
@ / @ / = / = / ~ /