HTML Quick Reference (including Explorer and Netscape extensions)

HTML Quick Reference V 1.2

(Including HTML 3.2, IE, and Netscape Extensions.)

Basic Structure:

Specifies a comment. Anything between these tags will be skipped by the browser.

This is the necessary first element of any HTML 3.2 compliant document.

.....< /HTML>
Encloses the entire document.

.....< /HEAD>
Encloses the head of the document. The following optional tags are placed inside the head.

.....< /TITLE> Indicates the title of the document that is used as the window caption. This is the second of the two required tags for any HTML 3.2 compliant document. <LI><BASE href="http://something.network/some_file.html"> Specifies the base URL of the document. This is used when dereferencing relative URLs in the page. <LI><BASE href="http://something.network/some_file.html" TARGET="..."> Also specifies the base target frame that all links will default to. See the LINK tag for possible values used in TARGET. <LI><META attribut1 attribute2> This element can be used to specify name/value pairs describing various properties of the document. Below are some examples: To have your page automatically reloaded every X seconds, use the following: <META HTTP-EQUIV="REFRESH" CONTENT=X > To have a different page automatically loaded after X seconds, use the following: <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=http://some.address/some_file.html"> To specify an expiration date for the page so that it will be reloaded after a certain date, use: <META HTTP-EQUIV="Expires" CONTENT="Mon, 23 Sep 1996 01:21:00 GMT"> To specify keywords for certain search services to use, do the following: <META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ..."> To specify a description of your page for certain search services to use, do the following: <META HTTP-EQUIV="Description" CONTENT="Describe your site here...."> <LI><LINK attribute=" HREF="..." > Currently this tag is not widely supported, however in the future browsers will use a list of these tags to generate a navigation bar for the site. Without browser support, this tag can still be useful for site maintenance. <OL> Attributes: <LI>REL="..."--Specifies the type of relationship of the link to this page. Possible values are: "home", "toc" (table of contents), "index", "glossary", "copyright", "bookmark", "up", "next", "previous", and "help". <LI>REV="..."--Used instead of REL, this specifies a reverse relationship from this page to the link. Possible values are: "made" (author, set HREF=email address) and all the ones used in REL. <LI>HREF="..."--Specifies the address of the link. <LI>TITLE="..."--Specifies a title for the link. </OL> </OL> <LI><BODY attribute1="..." attribute2="...">.....< /BODY> Encloses the main body of the document. <OL> Attributes: <LI>ALINK="..."--Specifies the color of the activated links in the page. <LI>BACKGROUND="..."--Specifies an image to be tiled as background. <LI>BGCOLOR="..."--Specifies the background color. <LI>BGPROPERTIES=FIXED--Fixes the background image so that it doesn't scroll. (IE) <LI>LEFTMARGIN="n"--Specifies the left margin for the entire page. (IE) <LI>LINK="..."--Specifies the color of the links in the page. <LI>TEXT="..."--Specifies the color of the text in the page. <LI>TOPMARGIN="n"--Specifies the top margin for the entire page. (IE) <LI>VLINK="..."--Specifies the color of the followed links in the page. NOTE:Color is always expressed as RGB (Red Green Blue), where each color has a value between 0 and 255 expressed in hex notation. For example, BGCOLOR=#FFFF00 sets the background color to yellow. For more information check out <A HREF="backgrou.htm" target="_top">Colors of the Web</A>. </OL> <LI><BASEFONT attribute="> Sets the default font properties for the entire page. <OL> Attributes: <LI>SIZE="..."--Sets the size of the font to any number between 1 and 7 with 3 being default. Relative sizes also work, e.g. SIZE=+2 . <LI>COLOR="..."--Specifies the default font color for the page. <LI>Name="..."--Specifies the typeface of the default font. </OL> <LI><Hn>...< /Hn> Makes the enclosed text a heading of various sizes where n is any number ranging from 1 to 6, and 1 creates the biggest heading while 6 creates the smallest. <LI><ISINDEX> Displays a text box indicating the presence of a searchable index. Simply adding this tag will not create a searchable page. The server must be set up to support it. <OL> Attributes: <LI>ACTION="..."--Specifies the location of the gateway program to which the search string should be passed. <LI>PROMPT="..."--Specifies an alternate prompt for the text box. </OL> </UL> <H3>Multimedia:</H3> <UL> <LI><IMG attribute1 attribute2> Places an inline image into the document. <OL>Attributes: <LI>SRC="..."--Specifies the URL of the image. <LI>DYNSRC="..."--Specifies the URL of a video clip or VRML world. An image can also be specified first using SRC= to cover for browsers that do not support videos. (IE) <LI>CONTROLS--Adds a set of controls under the video clip. (IE) <LI>LOOP="n"--For video clips, specifies the number of times to loop the clip. A value of "-1" or "INFINITE" makes it loop indefinitely. (IE) <LI>START="..."--Specifies when the video clip should start playing. Possible values are "FILEOPEN" (default), "MOUSEOVER", or both.(IE) <LI>USEMAP="#map1" --Tells the browser that the image is a client-side clickable image map defined under the name "map1". <LI>ISMAP --Tells the browser that the image is a server-side clickable image map. <LI>ALT="..."--Specifies a text string to be displayed on browsers that do not support inline images. <LI>BORDER="..."--Specifies the width of the border drawn around the image. If BORDER is set to "0", there will be no border even around pictures that are links. <LI>LOWSRC="..."--Specifies the URL of an image to be loaded first, before the image specified in SRC is loaded. LOWSRC usually reefers to a smaller image. <LI>ALIGN="..."--Specifies the alignment of the image. <OL> Values: <LI>RIGHT or LEFT--Aligns the image to the specified side of the page, and all text is wrapped around the image. <LI>TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, and ABSBOTTOM--Specifies the vertical alignment of the image with other items on the same line. </OL> <LI>VSPACE="..."--Specifies the space left between the edge of the image and the items above or below it. <LI>HSPACE="..."--Specifies the space left between the edge of the image and the items to the left or right of it. <LI>WIDTH="..."--Specifies the width of the image. If the width is not the actual width, the image is scaled to fit. <LI>HEIGHT="..."--Same as above ,except it specifies the height of the image. </OL> <LI><MAP attribute>...< /MAP> Specifies a collection of hot spots that define a client-side image map. The AREA tag can be used inside to define the hot spots. <OL>Attributes: <LI>NAME="..."--Specifies the name of the map so that it can be referred to later. </OL> <LI><AREA attribute1 attribute2>...< /AREA> Specifies the shape and size of a hot spot to be used in the definition of a client-side image map. Used inside the MAP tag. <OL>Attributes: <LI>SHAPE="..."--Specifies the shape of the hot spot. Possible values are RECT, RECTANGLE, CIRC, CIRCLE, POLY, or POLYGON. <LI>COORDS="..."--Specifies the coordinates that define the hot spot's position. Two pairs of coordinates are needed for RECT, three or more pairs for POLY, and one pair of coordinates and a radius for CIRC. <LI>HREF="..."--Specifies the URL that this hot spot points to. <LI>NOHREF--Indicates that this hot spot points to nothing. <LI>TARGET="..."--Specifies which window the link will be loaded into. The target can be a name of a frame that you specified in the FRAME tag or one of the following: <OL> Values: <LI>"_blank"--Loads the link into a new blank window. <LI>"_parent"--Loads the link into the immediate parent of the document the link is in. <LI>"_self"--Loads the link into the same window. (default) <LI>"_top"--Loads the link into the full body of the current window. </OL> </OL> <LI><BGSOUND attribute1 attribute2> (IE) Specifies a background sound to be played whenever the page is loaded. This "soundtrack" can be either a sample (.wav or .au) or midi (.mid) file. <OL>Attributes: <LI>SRC="..."--Specifies the URL of the sound to be played. <LI>LOOP="n"--Specifies the number of times the sound will loop. Values of "-1" or "INFINITE" make the sound loop indefinitely. </OL> <LI><MARQUEE attribute1 attribute2>...< /MARQUEE> (IE) Places a scrolling text marquee into the document. <OL>Attributes: <LI>ALIGN="..."-- Possible values of "TOP", "MIDDLE", or "BOTTOM". Specifies the alignment of the text around the marquee with respect to the marquee. <LI>BEHAVIOR="..."--Possible values of "SCROLL" (default), "SLIDE", or "ALTERNATE". Specifies the behavior of the marquee text. "SCROLL" is the default, "SLIDE" makes the text start from off the screen and then stick, "ALTERNATE" makes the text alternate back and forth repeatedly. <LI>BGCOLOR="..."--Specifies the background color of the marquee. <LI>DIRECTION="..."--Possible values are "LEFT" (default) or "RIGHT". Specifies the direction for the text to scroll. <LI>HEIGHT="..."--Specifies the height of the marquee in number of pixels or % of screen. <LI>HSPACE="n"--Specifies the left and right margins of the outside of the marquee in pixels. <LI>LOOP="n"--Specifies the number of times the marquee will loop. Values of "-1" or "INFINITE" make the marquee loop indefinitely. <LI>SCROLLAMOUNT="n"--Specifies the number of pixels between each successive draw of the marquee text. <LI>SCROLLDELAY="n"--Specifies the number of milliseconds between each successive draw of the marquee text. <LI>VSPACE="n"--Specifies the top and bottom margin for the outside of the marquee. <LI>WIDTH="..."--Specifies the width of the marquee either in pixel or in a percentage of the screen. </OL> <LI><APPLET attribute1 attribute2> parameter1 parameter2 ... < /APPLET> Inserts a Java applet in the HTML document. Any text placed between the opening and closing APPLET tags will be displayed by browsers that do not support JAVA. <OL>Attributes: <LI>ALIGN="..."-- Possible values of "LEFT", "RIGHT", "TOP", "MIDDLE", or "BOTTOM". Specifies the alignment of the text around the object with respect to the object. <LI>ALT="..."--Specifies the text to be displayed by browsers that recognize the tag but cannot show applets. <LI>CODE="..."--Specifies the name of the Java applet. <LI>CODEBASE="..."--Specifies the base address of the applet. The directory in which the applet is located. <LI>DOWNLOAD=n--Specifies an order in which images are downloaded. <LI>HIGHT="..."--Specifies the height of the applet in number of pixels or % of screen. <LI>HSPACE="n"--Specifies the left and right margins of the outside of the applet in pixels. <LI>NAME="..."--Specifies the name of the applet instance, in case there are more than one of the same applet on the page. <LI>VSPACE="n"--Specifies the top and bottom margin for the outside of the applet. <LI>WIDTH="..."--Specifies the width of the applet either in pixel or in a percentage of the screen. <OL>Parameters: These are the applet-specific parameters that are passed as arguments to the program. They are specified as tags within the APPLET tag as follows: <PARAM NAME="..." VALUE="..." > </OL> </OL> <LI><EMBED attribute1 attribute2>< /EMBED> Inserts an embedded multimedia object, such as a sound file or video, into the page. In the future, when the OBJECT tag becomes finalized and well supported, this tag will be obsolete. <OL>Attributes: <LI>AUTOSTART="..."--Specifies whether the file starts playing right away or not. Possible values are "TRUE" or "FALSE". <LI>HIGHT="..."--Specifies the height of the display in number of pixels or % of screen. <LI>LOOP="..."--Specifies whether the file repeats or not. Possible values are "TRUE" or "FALSE". <LI>NAME="..."--Specifies the name of the object, in case there are other objects that refer to this one. <LI>SRC="..."--Specifies the location of the object file. <LI>WIDTH="..."--Specifies the width of the display either in pixel or in a percentage of the screen. </OL> <LI><SCRIPT attribute> ...script statements... < /SCRIPT> Encloses scripting language statements to be executed by the browser. To ensure backward compatibility, enclose the script statements in comment tags () <OL>Attributes: <LI>LANGUAGE="..."--Specifies which language is being used in the script such as "VBScript" or "JavaScript". <LI>SRC="..."--Specifies the location of a file containing the script. This can be used if you don't want the code to be on the same HTML file. </OL> <LI><NOSCRIPT> ... < /NOSCRIPT> Encloses anything you want displayed by browsers that do not support inline scripts. These go inside the SCRIPT tags. </UL> <H3>Links:</H3> <UL> <LI><A attribute="...">...< /A> When used with the HREF attribute, the enclosed text and/or graphic becomes a link to another document or anchor. When used with the NAME attribute, the enclosed text and/or graphic becomes an anchor. <OL> Attributes: <LI>HREF="..."--Specifies the URL of the document to be linked to. <LI>NAME="..."--Specifies the name of the anchor you are creating. <LI>onClick="--Specifies a script to be activated when the mouse is clicked. <LI>onMouseOver="--Specifies a script to be activated when the mouse is moved over the link. <LI>REL="..."--Specifies a relative relationship. <LI>REV="..."--Specifies the reverse relationship. <LI>TARGET="..."--Specifies which window the link will be loaded into. The target can be a name of a frame that you specified in the FRAME tag or one of the following: <OL> Values: <LI>"_blank"--Loads the link into a new blank window. <LI>"_parent"--Loads the link into the immediate parent of the document the link is in. <LI>"_self"--Loads the link into the same window. (default) <LI>"_top"--Loads the link into the full body of the current window. </OL> <LI>TITLE="..."--Specifies the title that appears when the link is selected, but not yet clicked. </OL> </UL> <H3>Lists:</H3> <UL> <LI><LI attribute> Used to mark text as a list item in any of the following list types: <DIR>, <MENU>, <OL>, or <UL>. <OL> Attributes: <LI>TYPE="..."--Specifies the type of bullet used to label the item. Possible values are: DISC, CIRCLE, SQUARE, A, a, I, i, 1. <LI>VALUE="..."--Specifies the number assigned to the item. </OL> <LI><DIR>...< /DIR> Puts the enclosed items marked with <LI>, in a directory listing. <LI><MENU>...< /MENU> Puts the enclosed items marked with <LI>, in a menu list. <LI><OL attribute>...< /OL> Puts the enclosed items marked with <LI>, in a numbered list. <OL> Attributes: <LI>TYPE="..."--Specifies the type of numbering used to label the item. Possible values are: A, a, I, i, 1. <LI>START="..."--Specifies the starting value for the numbering. </OL> <LI><UL attribute>...< /UL> Puts the enclosed items marked with <LI>, in a bulleted list. <OL> Attributes: <LI>TYPE="..."--Specifies the type of bullet used to label the item. Possible values are: DISC, CIRCLE, SQUARE. </OL> <LI><DL>...< /DL> Creates a definition list. Within this container, <DT> specifies a definition term and <DD> specifies the definition. </UL> <H3>Frames:</H3> <UL> <LI><FRAMESET attribute1="..." attribute2="...">...< /FRAMESET> Defines a set of frames that will make up the page. The FRAME, and NOFRAMES tags go inside this. The FRAMESET tag is used instead of the BODY tag. You can, however, include a BODY tag inside the NOFRAMES tags for browsers that do not support frames. <OL> Attributes: <LI>BORDER="..."--Specifies the width (in pixels) of the border drawn around the frames.(Netscape) <LI>COLS="..."--Creates the frames as columns and specifies the width of each column. Width of the columns can be set using percentages (%), pixels, or relative size (*). For example, if you want your frames to be 3 equally sized columns, you would use: COLS=33%,33%,* <LI>FRAMEBORDER="..."--Specifies whether or not a 3-D border is displayed around the frames. possible values are 0 (no border) or 1 (default).(IE) <LI>FRAMESPACING="..."--Specifies in pixels, the amount of space between the frames. <LI>ROWS="..."--Creates the frames as rows and specifies the width of each row. width of the rows can be set using percentages (%), pixels, or relative size (*). For example, if you want a small frame at the top of your page and one large frame below that, you might use: ROWS=15%,* <LI>SCROLLING="..."--Determines whether or not scroll bars are displayed on all the frames. Possible values are "yes", "no", and "auto". </OL> <LI><FRAME attribute1="..." attribute2="..."> Defines a single frame within a frameset. <OL> Attributes: <LI>BORDER="..."--Specifies the width (in pixels) of the border drawn around the frame.(Netscape) <LI>FRAMEBORDER="..."--Specifies whether or not a 3-D border is displayed around the frame. possible values are 0 (no border) or 1 (default).(IE) <LI>MARGINHEIGHT="..."--Specifies the top and bottom margins of the frame in pixels. <LI>MARGINWIDTH="..."--Specifies the right and left margins of the frame in pixels. <LI>NAME="..."--Defines a target name for the frame. <LI>NORESIZE--Prevents the frame from being resized by the user <LI>SCROLLING="..."--Determines whether or not scroll bars are displayed along the frame. Possible values are "yes", "no", and "auto". <LI>SRC="..."--Specifies the source file for the frame. </OL> <LI><IFRAME attribute1="..." attribute2="...">< /IFRAME> (IE) Defines a floating frame. Does not need to be placed within a FRAMESET. <OL> Attributes: <LI>ALIGN="..."--Specifies the alignment of the floating frame and surrounding text. Possible values are TOP, MIDDLE, BOTTOM, LEFT, and RIGHT. <LI>FRAMEBORDER="..."--Specifies whether or not a 3-D border is displayed around the frame. possible values are 0 (no border) or 1 (default) <LI>HEIGHT="..."--Specifies the height of the floating frame. <LI>MARGINHEIGHT="..."--Specifies the top and bottom margins of the floating frame in pixels. <LI>MARGINWIDTH="..."--Specifies the right and left margins of the floating frame in pixels. <LI>NAME="..."--Defines a target name for the floating frame. <LI>NORESIZE--Prevents the frame from being resized by the user <LI>SCROLLING="..."--Determines whether or not scroll bars are displayed along the frame. Possible values are "yes" and "no". <LI>SRC="..."--Specifies the source file for the floating frame. <LI>WIDTH="..."--Specifies the width of the floating frame. </OL> <LI><NOFRAMES>...< /NOFRAMES> Placed inside the FRAMESET, anything between the beginning and ending of this tag is viewable only by browsers that do not support frames. This tag is used to create pages that are compatible with older browsers that do not support frames. </UL> <H3>Tables:</H3> <UL> <LI><TABLE attribute1="..." attribute2="...">...< /TABLE> Creates a table that can include any number of rows. <OL> Attributes: <LI>BORDER="..."--Specifies the width of the border around the table. If set to 0, there will be no border. <LI>BACKGROUND="..."--Specifies the address of an image to be tiled as background.(IE) <LI>BGCOLOR="..."--Specifies the background color of the table. <LI>BORDERCOLOR="..."--Specifies the border color of the table. <LI>BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE) <LI>BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE) <LI>WIDTH="..."--Specifies the width of the table on the page. <LI>CELLSPACING="..."--Specifies the amount of space between the cells in the table. <LI>CELLPADDING="..."--Specifies the amount of space between the edges of the cell and the text inside. <LI>FRAME="..."--Specifies which sides of the outer border of the table are displayed.(IE) <OL> Possible types: <LI>VOID--No outside borders are displayed. <LI>ABOVE--Displays a border on the top side of the table. <LI>BELOW--Displays a border on the bottom side of the table. <LI>HSIDES--Displays the top and bottom borders of the table. <LI>LHS--Displays the left-hand side border. <LI>RHS--Displays the right-hand side border. <LI>VSIDES--Displays the right and left side borders. <LI>BOX--Displays a border on all sides of the table. <LI>BORDER--Displays a border on all sides of the table. </OL> <LI>RULES="..."--Specifies which inner borders of the table are displayed.(IE) <OL> Possible types: <LI>NONE--No inside borders are displayed. <LI>GROUPS--Displays inner borders between the various table groups such as THEAD, TFOOT, TBODY, and COLGROUP groups. <LI>ROWS--Displays inner borders between the table rows. <LI>COLS--Displays inner borders between the table columns. <LI>ALL--Displays inner borders between all rows and columns. </OL> </OL> <LI><CAPTION attribute1="...">...< /CAPTION> Specifies the caption of the table. <OL> Attributes: <LI>ALIGN="..."--Specifies the position of the caption. Possible values are LEFT, RIGHT, BOTTOM, or TOP. </OL> <LI><TR attribute1="..." attribute2="...">...< /TR> Specifies a table row. It can enclose the table heading and table data. <OL> Attributes: <LI>ALIGN="..."--Specifies the horizontal alignment of the row contents. Possible values are LEFT, RIGHT, and CENTER. <LI>BGCOLOR="..."--Specifies the background color for the row. <LI>BORDERCOLOR="..."--Specifies the border color of the row. <LI>BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE) <LI>BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE) <LI>VALIGN="..."--Specifies the vertical alignment of the row contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE. <LI>HEIGHT="..."--Specifies the height of the cell. </OL> <LI><TH attribute1="..." attribute2="...">...< /TH> Makes the cell a table heading. <OL> Attributes: <LI>ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER. <LI>NOWRAP--Prevents word wrapping within the cell <LI>BGCOLOR="..."--Specifies the background color for the cell. <LI>BACKGROUND="..."--Specifies the address of an image to be tiled as background.(IE) <LI>BORDERCOLOR="..."--Specifies the border color of the cell. <LI>BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE) <LI>BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE) <LI>VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE. <LI>ROWSPAN="..."--Specifies the number of rows the cell will span. <LI>COLSPAN="..."--Specifies the number of columns the cell will span. <LI>WIDTH="..."--Specifies the width of the cell. <LI>HEIGHT="..."--Specifies the height of the cell. </OL> <LI><TD attribute1="..." attribute2="..."> These go inside the TR tags and they define the data in a cell. End tag may be used. <OL> Attributes: <LI>BACKGROUND="..."--Specifies the address of an image to be tiled as background. (IE) <LI>BGCOLOR="..."--Specifies the background color for the individual cell. <LI>BORDERCOLOR="..."--Specifies the border color of the cell. <LI>BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE) <LI>BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE) <LI>ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER. <LI>NOWRAP--Prevents word wrapping within the cell <LI>VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE. <LI>ROWSPAN="..."--Specifies the number of rows the cell will span. <LI>COLSPAN="..."--Specifies the number of columns the cell will span. <LI>WIDTH="..."--Specifies the width of the cell. <LI>HEIGHT="..."--Specifies the height of the cell. </OL> <LI><COLGROUP attribute1="..." attribute2="...">(IE) Specifies the properties of one or more columns. This tag generally goes right after the opening TABLE tag. <OL> Attributes: <LI>ALIGN="..."--Specifies the position of the text within the cells of the Columns. Possible values are CENTER, LEFT, RIGHT, BOTTOM, or TOP. <LI>SPAN="..."--Specifies the number of columns for which these attributes will apply. </OL> <LI><COL attribute1="..." attribute2="...">(IE) Used with the COLGROUP tag, this specifies the properties of one column. This tag overrides any attributes specified in the COLGROUP tag that comes right before it. <OL> Attributes: <LI>ALIGN="..."--Specifies the position of the text within the cells of the Column. Possible values are CENTER, LEFT, RIGHT, BOTTOM, or TOP. <LI>SPAN="..."--Specifies the number of columns for which these attributes will apply. </OL> <LI><TBODY>...< /TBODY>(IE) Encloses the body of your table. This tag is optional unless you are using the THEAD or TFOOT tags. It used to separate the rows in the table from those in the header or footer. <LI><TFOOT>...< /TFOOT>(IE) Encloses the table rows that are to be used as a footer. It is an optional tag and comes right after the ending TBODY element. <LI><THEAD>...< /THEAD>(IE) Encloses the table rows that are to be used as a header. It is an optional tag and comes before the opening TBODY element. </UL> <H3>Forms:</H3> <UL> <LI><FORM attribute1="..." attribute2="...">.....< /FORM> Specifies a form. Forms can be used to send user input to the server in the form of NAME/VALUE pairs. <OL> Attributes: <LI>ACTION="..."--Specifies the address to be used in carrying out the action of the form. Usually the address of the CGI file. You can also specify a mailto address to have the contents of the form emailed to you instead of getting passed to the server. (in future browsers) <LI>METHOD="..."--Specifies the method used by the server in sending the form information. Possible values are POST or GET. When GET is used, the server simply appends the arguments to the end of the action address. With POST, the information is sent as an HTTP post transaction. <LI>TARGET="..."--Specifies which window the result of the form will be loaded into. The target can be a name of a frame that you specified in the FRAME tag or one of the following: <OL> Values: <LI>"_blank"--Loads the result into a new blank window. <LI>"_parent"--Loads the result into the immediate parent of the document the form is in. <LI>"_self"--Loads the result into the same window. (default) <LI>"_top"--Loads the result into the full body of the current window. </OL> <LI>ENCTYPE="..."--For future browser. Specifies the type of encoding to use on the form information. </OL> <LI><INPUT attribute1="..." attribute2="..."> Specifies a control or input area for a form, from which a NAME/VALUE pair will be returned to the server. <OL> Attributes: <LI>ALIGN="..."--If the TYPE is IMAGE, then this specifies the alignment of the surrounding text with the image. Possible values are TOP, MIDDLE, BOTTOM, LEFT, or RIGHT. <LI>CHECKED--Use this attribute in a RADIO or CHECKBOX type, and it will be pre-selected when the form loads. <LI>MAXLENGTH="..."--Specifies the maximum number of characters that can be entered in a text input. <LI>NAME="..."--Specifies the name of the control or input area. (Part of the NAME/VALUE pair) <LI>SIZE="..."--Specifies the size of the text entry area that is displayed by the browser. <LI>SRC="..."--If the TYPE is IMAGE, then this specifies the address of the image to be used. <LI>VALUE="..."--Specifies the value to be submitted along with the corresponding name(Part of the NAME/VALUE pair). Specifies the default text string for TEXT. For RESET and SUBMIT, this specifies the text string to be displayed on the 3-D button. <LI>TYPE="..."--Specifies the type of control being used. <OL> Possible types: <LI>CHECKBOX--Creates a checkbox. If the user checks it, the corresponding name/value pair is sent to the server. <LI>HIDDEN--Nothing is displayed by the browser, but the information is still sent to the server. <LI>IMAGE--Like the SUBMIT type, you can have the form sent immediately when the user clicks on an image. Along with the normal information, when a from is submitted by clicking on an image, the coordinates of the clicked point (measured in pixels from the upper-left corner of the image) are also sent. The x-coordinate is submitted with a ".x" appended to the name and the y-coordinate has a ".y" appended to the name. <LI>PASSWORD--Creates a single line entry text box just like the TEXT type, however, user input is not echoed on the screen. <LI>RADIO--Creates a radio list of alternatives of which only one can be selected. Each alternative must have the same name, but different values can be assigned to each. <LI>RESET--Creates a 3-D button that clears the entire form to original values when clicked. You can give the button a name by using the VALUE attribute. <LI>SUBMIT--Creates a 3-D button that submits the form when clicked. You can give the button a name by using the VALUE attribute. <LI>TEXT--Creates a single line text entry box. You can specify the size of the text box by using the SIZE attribute. </OL> </OL> <LI><SELECT attribute1="..." attribute2="...">< /SELECT> Creates a drop-down list of items. The list items are defined by the OPTION tags placed inside the opening and closing SELECT tag. <OL> Attributes: <LI>MULTIPLE--Specifies that multiple items may be selected. <LI>NAME="..."--Specifies the name of the list(Part of the NAME/VALUE pair). <LI>SIZE="..."--Specifies how many items should be visible. <OPTION value="...">item Specifies an item in the drop down list. Placed within the opening and closing SELECT tags. Any text following the OPTION tag is what the user will see in the list. <OL> <LI>VALUE="..."--Specifies the value to be returned (Part of the NAME/VALUE pair). <LI>SELECTED--This item will already be highlighted when the page loads. </OL> </OL> <LI><TEXTAREA attribute1="..." attribute2="...">...< /TEXTAREA> Creates a multi-lined text entry box. Any text placed in between the tags is used as the default text string that is displayed when the page is loaded. <OL> Attributes: <LI>COLS="..."--Specifies how wide the text box will be. <LI>ROWS="..."--Specifies how high the text box will be. <LI>NAME="..."--Specifies the name of the text box for use by the program that is processing the form. <LI>WRAP="..."--Specifies how text will wrap. Possible values are "HARD", "SOFT", or "NONE". </OL> </UL> <H3>Style Sheets:</H3> <UL> Style Sheets are a new way to easily and effectively customize web pages in ways that were not possible before. You will be able to specify margins, indents, font faces, and other features to gain control over the exact presentation of your document. Style Sheet, as designed by the World Wide Web Consortium, are new to HTML and so far only supported be Microsoft's Internet Explorer 3.0. However, Netscape and other browsers will definitely support these new elements in future releases so it is a good idea to get started on using Style Sheets now. There are three ways to add style to your documents: Linking to a style sheet, Adding a style block, or using inline style attributes. In fact, you can use all three if you like. If there is a conflict, the browser will use the most recent style definitions for that occurrence. <LI>Linking to a Style Sheet You can create a separate text file with a .css file extension and place all your style definitions (explained below) in that file. Then, using the LINK tag, you can link the style definitions to your current document. Using this method, you can have one style sheet for the entire site that is linked to each page. That way you can alter the look of all your documents be simply editing the .css file. See syntax below. Inside the HEAD tag, add something like this: <LINK REL=STYLESHEET HREF="URL of style sheet" TYPE="text/css" > Your Style Sheet might contain something like this: H1 {font-size: 20pt; font-weight: bold} H2 {font-size: 16pt; font-weight: bold} P {margin-left: -20px; margin-right: -20px; margin-top: 30px} BODY {background: URL(http://my.server.com/pictures/back.gif); text-indent: 2cm} <LI>Adding a Style Block To set the style for an entire page, you can place all the style definitions (explained below) inside the <STYLE>.....< /STYLE> tag. This tag goes inside the HEAD of your document. Make sure to enclose the definitions within comment tags so that older browsers do not display them. See example below. <HEAD> . . <STYLE TYPE="text/css" >  < /STYLE> < /HEAD> <LI>Inline Style Attributes If you simply want to change the style of a particular section of your document, you can do so with the STYLE attribute. You can place this new attribute inside just about any HTML tag, and the style definitions will be in effect until the closing of that tag. Below are some examples. To change the color and indent of a certain paragraph, you could do the following: This text would be indented and blue. To change the style for an entire portion of your document, you might do the following: <DIV STYLE="margin-left: 0.5in; margin-right: 0.5in; font-family: Arial"> This whole division of the page will be indented and any text will be displayed in the Arial font. < /DIV> <LI>Style Definitions All three methods of adding style to a document use the same syntax for style definitions. Except for inline attributes, a style definition consists of a tag followed by a list of specifications enclosed in curly braces. You can define styles for any tag in HTML. Once you have specified styles for a certain tag, every time the tag is used, the styling will be in effect. Below is a list of all the style definitions and their possible values. <OL> <LI>background -- Specifies a background color or image. <UL> <LI>Values: URL|RGB triplet <LI>Example: BODY {background: #FFFFFF} </UL> <LI>color -- Specifies the color of the text. <UL> <LI>Values: RGB triplet <LI>Example: H4 {color: #000000} </UL> <LI>font-family -- Specifies the typeface. <UL> <LI>Values: typeface name or list of names <LI>Example: P {font-family: Arial, Helvetica, "Courier New"} </UL> <LI>font-size -- Specifies the size of the text. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)|% (percentage) <LI>Example: A:visited {font-size: 14pt} </UL> <LI>font-style -- Specifies the style of the text. <UL> <LI>Values: italic|normal|oblique|small caps <LI>Example: H3 {font-style: italic} </UL> <LI>font-weight -- Specifies the thickness of the text. <UL> <LI>Values: extra-light|light|demi-light|medium|demi-bold|extra-bold <LI>Example: H2 {font-weight: bold} </UL> <LI>line-height -- Specifies the distance between lines. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels)|% (percentage) <LI>Example: DIV {line-height: 20pt} </UL> <LI>margin-left -- Specifies the left margin. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels) <LI>Example: BODY {margin-left: 3cm} </UL> <LI>margin-right -- Specifies the right margin. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels) <LI>Example: BODY {margin-right: -0.5in} </UL> <LI>margin-top -- Specifies the top margin. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels) <LI>Example: BODY {margin-top: 20px} </UL> <LI>text-align -- Specifies the justification of the text. <UL> <LI>Values: left|center|right <LI>Example: H1 {text-align: center} </UL> <LI>text-decoration -- Specifies certain text effects. <UL> <LI>Values: none|italic|underline|line-through|overline|blink <LI>Example: A:link {text-decoration: none} </UL> <LI>text-indent -- Specifies the text indentation. <UL> <LI>Values: pt (points)|in (inches)|cm (centimeters)|px (pixels) <LI>Example: P {text-indent: 0.5in} </UL> </OL> <LI>Additional Options <OL> <LI>Grouping Certain style definitions can be grouped together in one statement. Instead of using three statements to specify all three margins, you could use the following: P {margin: 20px 3cm 3cm} The order is top, right, and left. You can also group all the font statements together like this: A:active {font: bold italic 15pt/22pt Arial, serif} The weight and style must be specified first, and the first number represents the size, while the second number represents the line height. <LI>Classes You can also define more than one instance of a tag. For example, say you wanted two H1 headings; one that was red and one that was blue. You could define the two tags like this: H1.redh {color: #FF0000; font-size: 20pt} H1.blueh{color: #0000FF; font-size:20pt} Later you could use them like this: <H1 CLASS=redh>This will be red< /H1> <H1 CLASS=blueh>This will be blue< /H1> </OL> </UL> <H3>General Formatting:</H3> <UL> <LI><ADDRESS>.....< /ADDRESS> Encloses the signature file of the author of the page. Text is displayed in italics. <LI>... Boldfaces the enclosed text. <LI><BIG>...< /BIG> Makes the enclosed text one size larger. <LI><BLINK>.....< /BLINK> Makes the enclosed text blink continually. <LI><BLOCKQUOTE>.....< /BLOCKQUOTE> Encloses a long quote. Both the left and right margins are indented. <LI> Inserts a line break. <OL> Attributes: <LI>CLEAR="..."--Causes the text to stop flowing around any images. Possible values are RIGHT, LEFT, or ALL. </OL> <LI><CENTER>.....< /CENTER> Centers the enclosed elements. This tag will center everything including images, text, tables, forms, etc. <LI><CITE>.....< /CITE> Encloses a citation such as the title of a book or paper. <LI><CODE>.....< /CODE> Encloses a sample of code. The text is rendered in small font. <LI><COMMENT>.....< /COMMENT> Encloses a comment. Text inside the tags is ignored unless it contains HTML code. <LI><DFN>.....< /DFN> Encloses a definition. Text inside the tags is formatted to look like a definition. <LI><DIV ALIGN=">...< /DIV> Specifies the alignment of the enclosed elements. Can be used to divide a document into sections that are aligned differently. In future browsers, more attributes will probably be supported. <OL> Attributes: <LI>ALIGN="..."--Sets the alignment of the division. Possible values are "center", "right", or "left". </OL> <LI>... Emphasis on the enclosed text (Italics). <LI>... Sets the font properties for the enclosed text. <OL> Attributes: <LI>SIZE="..."--Sets the size of the font to any number between 1 and 7 with 3 being default. relative sizes also work, e.g. SIZE=+2 . <LI>COLOR="..."--Specifies the color of the font. <LI>FACE="..."--Specifies the face of the font. A list can be defined (separated by commas) and the browser will use the first one available on that computer. </OL> <LI><HR attribute1="..." attribute2="..."> Inserts a horizontal line. <OL> Attributes: <LI>SIZE="..."--Specifies the thickness of the line. <LI>COLOR="..."--Specifies the color of the line.(IE) <LI>WIDTH="..."--Specifies the length of the line as a percentage of the screen. e.g. WIDTH=90% . <LI>ALIGN="..."--Specifies the alignment of the line: RIGHT, LEFT, or CENTER. <LI>NOSHADE--The line is drawn solid. </OL> <LI>... The enclosed text is italics. <LI><KBD>...< /KBD> Specifies text to be entered at the keyboard. Text is rendered as bold and fixed-width. <LI><LISTING>.....< /LISTING> Displays text in fixed-width type. Obsolete -- use the PRE tag instead. <LI><MULTICOL>.....< /MULTICOL> Displays text in columns. <OL> Attributes: <LI>COLS="..."--Specifies the number of columns to use. <LI>GUTTER="..."--Specifies the number of pixels between each column. <LI>WIDTH="..."-- Specifies the width of the columns as a whole. </OL> <LI>..... Causes the enclosed text to not wrap to fit the screen. <LI>... Designates the enclosed text as a plain paragraph. The end tag is optional. <OL> Attributes: <LI>ALIGN="..."--Specifies the alignment for the paragraph. Possible values are "center", "left", or "right". </OL> <LI><PLAINTEXT>.....< /PLAINTEXT> Displays text in fixed-width type without processing most HTML tags. Obsolete -- use the PRE tag instead. <LI><PRE>.....< /PRE> Displays text in fixed-width type without collapsing spaces. <LI><S>.....< /S> Displays text with a line through it. The <STRIKE> tag does exactly the same. <LI><SAMP>...< /SAMP> Indicates sample output from a form or program. Text is rendered in small font. <LI>... Makes the enclosed text one size smaller. <LI><SPACER attribute>...< /SPACER> Inserts blocks of spaces into HTML documents. <OL> Attributes: <LI>ALIGN="..."--When TYPE=BLOCK, this specifies the alignment of the surrounding text. <OL> Values: <LI>RIGHT or LEFT--Aligns the block of space to the specified side of the page, and all text is wrapped around the block. <LI>TOP, MIDDLE, BOTTOM, TEXTTOP, ABSMIDDLE, BASELINE, and ABSBOTTOM--Specifies the vertical alignment of the block of space with other items on the same line. </OL> <LI>HEIGHT="..."--When TYPE=BLOCK, this specifies the height of the block. <LI>SIZE="..."--When TYPE=HORIZONTAL, or VERTICAL, this specifies the size of the space. <LI>TYPE="..."--Specifies the type of space being inserted. <OL> Values: <LI>HORIZONTAL--Inserts blank spaces between words. <LI>VERTICAL--Inserts spaces between two lines. <LI>BLOCK--Inserts a rectangular block of space, much like the IMG tag. </OL> <LI>WIDTH="..."--When TYPE=BLOCK, this specifies the width of the block. </OL> <LI>... Stronger emphasis on the enclosed text (bold). <LI>... Renders the enclosed text in subscript. <LI>... Renders the enclosed text in superscript. <LI><TT>...< /TT> The enclosed text is typewriter font. <LI>... The enclosed text in underlined. Try to avoid this since underlined text usually indicates a link. <LI><VAR>...< /VAR> Specifies a variable. Text is rendered in small fixed-width type. <LI> Causes text enclosed by the NOBR tags to wrap only if necessary. <LI><XMP>...< /XMP> Causes enclosed text to be displayed by the browser without processing most HTML tags. Obsolete -- use the PRE tag instead. </UL> <HR> <TABLE> <TD VALIGN=LEFT> Please email me if you find any errors, obvious omissions or you just want to make a comment. I want this to be as accurate as possible. Also feel free to add a link to this page or advertise it in any way. </TR> </TABLE> <HR WIDTH=100%> <CENTER><A HREF="index3.html">Back Home</CENTER></A> <A HREF="mailto:owen-peter@pi.net"><CENTER>Owen Shaw</CENTER></A> </ADDRESS> </TD> <TD VALIGN=TOP WIDTH=150 ALIGN="right"> <CENTER>If you have midi, crank it up.</CENTER> </TD> </TR> </TABLE> </BODY> </HTML>