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:someone@someplace.ext"> 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>

 

<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

 

&

&amp  

#

&#035

$

&#036

>

&gt

+

&#043

¢

&cent

<

&lt

-

&#045

£

&pound

&quot

±

&plusmn

¥

&yen

&#039

´

&times

§

&sect

“space”

&nbsp

*

&#042

|

&#124

(

&#040

¸

&divide

°

&deg

)

&#041

/

&#047

-

&macr

Ó

&copy

%

&#037

_

&shy

@

&#064

=

&#061

~

&#160