WEB DESIGN

This site should be viewed at 800 x 600 resolution or higher using IE. Get IE 5.5 SP1 from here, now!

Get Flash to view all elements of this site.

 

Computer users, check this out!

 

 

 

  WEB DESIGN TOOLS

 

 

Here you can find all kinds of useful information on html tag elements, how and where they are used.
Last Update 06-16-03 

 

 

 

In these tag summary tables:

string       any alphanumeric string

URL         a Uniform Resource Locator for a resources

...             a series of elements

 value1|...   a series of possible values for attributes

n              a positive whole number

c              a character

color        the color of text or areas of a page; specified as #RRGGBB, where RR, GG, and BB are the hexadecimal digits specifying the Red, Green, and Blue values of the  color. The value of color attributes can also be specified by these color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

HTML Structure and Comment Elements

TAG (start...stop)

Attributes

Explanation

<HTML>...</HTML>

 

Identifies the file as containing HTML; only HEAD, BODY, and comment elements should go inside the HTML start and stop tags.

 

Version="string"

Where string identifies the version of HTML; for example: <HTML Version="-//IETF//DTD HTML 3.2//EN">

<!--- string -->

 

Comments that browsers shouldn't display (string) can  be included between these tags.

TOP

The HEAD and Related Elements

 TAG (start...stop)

Attributes

Explanation

<HEAD>...</HEAD>

 

brackets a set of unordered descriptive information about a document. Elements within the HEAD element include: TITLE, BASE, ISINDEX, STYLE, SCRIPT, LINK, META, and NEXTID

<TITLE> string </TITLE>

a string identifying the contents of the document; may not contain anchors, paragraph elements, or highlighting; every HTML must have one TITLE element.

<BASE>...</BASE>

used to record the URL of  the original version of a document; useful for when the source file is transported elsewhere

Href="URL"

<ISINDEX>

 

 marks the document as searchable--the server on which the document is located must have a search engine defined that supports this searching.

<STYLE>

a way for the author of a document to define rendering information which will work with style sheets.

<SCRIPT>

reserved for future use with scripting languages.

<LINK>

used to define a relationship between the document and other objects or documents.

Href="URL

this identifies the document or part of a document to which this link refers.

Name="rel|rev"

this is a way to name this LINK as a possible destination for another hypertext document;

Rel="made|..."

similar to rel, above, but the rev attribute indicates the reverse relationship as Rel. For Example, the LINK with Rel="made" indicates that the Href attribute indicates the URL given in the Href is the author of the current document. Using the Rev="made" link indicates that the current document is the author of the URL given in the Href attribute.

Urn="string"

indicates the Uniform Resource Name of the document; the specification for URN and other addressing is still in development (http://www.w3.org/hypertext/ Addressing/ Addressing.html).

 Title="string"

this attribute is not to be used as a substitute for the TITLE attribute of the document itself, but as a title for the document given by the Href attribute of the LINK element. This attribute is rarely used or supported by browsers, but may have value for cross referencing the relationships the LINK element defines.

Methods="..."

describes the HTTP methods the object referred to by the Href of the LINK element supports. For example, one method is searching; a browser could thus use this Methods attribute to give information to the user about the document defined by the LINK element.

<META>

 

used to identify meta-information (information about information) in the document. This element is not meant to take the place of elements which already have a specific purpose.

 Http-equiv="..."

This attribute connects this META element to a particular protocol response which is generated by the HTTP server hosting the document.

Http-
equiv="refresh" Content="n"

browser will reload the currently displayed page after n seconds.

Http-
equiv="refresh" Content="n; Url=URL"

browser will load the document at URL after displaying the currently displayed page for n seconds.

Http-equiv="expires" Content="string-date"

an expiry date for files that are periodically updated. string-date could be, for example, "17-Jan-1999 15:00:00 GMT"

Name="string"

This attribute is a name for the information in the document--not the title of the document (which should be defined in the TITLE element) but a "meta name" classifying this information.

Content="string"

A "meta name" for the content associated with the given name (defined by the Name attribute) or the response defined in Http-equiv.

<NEXTID>

 

This element is used by text generated software in creating identifiers;

N="string"

used to define the next identifier to be allocated by the text generator program. Normally, human writers of HTML don't use this element; and Web browsers ignore this element.

TOP

The BODY and Related Elements

TAG (start...stop)

Attributes

Explanation

<BODY>...</BODY>

 

delimit the content of an HTML document

Background = "URL"

the URL of the graphic that will be tiled as the background of the page

BGColor="color"

the color of the background of the page;

Text="color"

 the color of the document's text.

Link="color"

the color of the document's hotspots

VLink="color"

the color of the document's visited links

ALink="color"

the color of the document's hotspots during user selection

<A>...</A>

 

the anchor element which is used as the basis for linking documents together.

Href="URL"

this attribute identifies the URL of the hypertext reference for this anchor in the form Href="URL", where the URL given will be the resource which the browser retrieves when the user clicks on the anchor's hotspot.

Name="string"

this attribute creates a name for an anchor; this name can then be used within the document or outside of the document in anchor to refer to the portion of text identified by the name.

Title="string"

this attribute is for the title of the document given by the Href attribute of the anchor. A browser could use this information to display this title before retrieving it, or to provide a title for the Href document when it is retrieved (e.g., if the document is at a FTP site, it will not have a title defined).

Rel="made|..."

Defines the relationship defined from the current document to the target (Href document). See the discussion of the Rel attribute in the LINK element, above.

Rev="made|..."

Defines the relationship defined from the target (Href document) to the current document. See the discussion of the Rev attribute in the LINK element, above.

Urn="string"

This indicates the Uniform Resource Name of the target (Href) document; the specification for URN and other addressing is  still in development.

Methods="..."

Provides information about the functions the user can perform on the Href object. Similar to described above for the Title attribute, this information might be useful for the browser to display in advance.

TOP

Character blocks: elements that "chunk" text in lists or blocks

TAG (start...stop)

Attributes

Explanation

<DIV>...</DIV>

 

used to define a block or paragraph

 

Align="left|right"

aligns the block or paragraph of text

<BLOCKQUOTE>...</BLOCKQUOTE>

 

 

<PRE>...</PRE>

sets up a block of text which will be presented in a fixed-width font, with spaces as significant.

<BLOCKQUOTE>...</BLOCKQUOTE>

brackets text that is an extended quotation from another source.

<UL>...</UL>
<OL>...</OL>
<MENU>...</MENU>
<DIR>...</DIR>
 

Lists for information; all use the LI element to identifiy the elements.

  • UL brackets an unordered list of items;
  • OL brackets an ordered list of items;
  • MENU brackets an unordered list of items;
  • DIR brackets a list of items which are at most 20 characters wide;

Compact

makes the list compact

Type="disc|circle|squar e"

defines the bullet type for a UL list;

Type="1|a|A|i|I"

defines the bullet type for a OL list; 1 (arabic numbers: 1, 2, 3, ...); a (lower alpha: a, b, c, ...) A (upper alpha: A, B, C, ...) i (lower roman: i, ii, iii, ...) I (upper roman: I, II, III, ...)

Start="N"

starts the OL list off with a sequence starting at N.

<LI>

  

identifies a list element in UL, OL, MENU, DIR.

<DL>...</DL>

A definition list, or glossary; uses DT to identify terms and DD to identify definitions.

Compact

makes the list compact.

<DT>

 

identifies term in definition list (DL).

<DD>

identies description in definition list (DL).

 <ADDRESS>...</ADDRESS>

ownership or authorship information, typically at the start or end of a document.

TOP

Headers

TAG (start...stop)

Attributes

Explanation

<H1>...</H1>

 

Level 1 Header

<H2>...</H2>

Level 2 Header

<H3>...</H3>

Level 3 Header

 <H4>...</H4>

Level 4 Header

<H5>...</H5>

Level 5 Header

<H6>...</H6>

Level 6 Header

TOP

Separators

TAG (start...stop)

Attributes

Explanation

<HR>...</HR>

 

creates a horizontal rule.

Size="n"

 this attribute identifies the thickness of the line.

Noshade

this attribute turns off shading to create a solid bar.

Width="n| n%"

this attribute identifies the width of the line, either expressed as width in pixels, or a relative with as a percent of the current display width (not page width). These lines are by default centered (default can be overridden with the Align attribute).

Align="left| right|  center"

specifies the alignment of horizontal lines that are less than the full width of the page.

<P>

 

identifies start of paragraph; the stop tag </P> is optional.

 

Align="center|right|left "

aligns a paragraph;

TOP

Spacing

TAG (start...stop)

Attributes

Explanation

<BR>

 

forces a linebreak. Typically, this is used to represent postal addresses or text; where linebreaks are significant.

TOP

Alignment

TAG (start...stop)

Attributes

Explanation

<CENTER>string</CENTER>

 

centers text.

TOP

Images

TAG (start...stop)

 Attributes

Explanation

<IMG>...</IMG>

 

places graphic image in a document at the location of the element tag  (an "inline image").

Src="URL"

identifies the source file of the image.

Alt="string"

a string of characters can be defined that will be displayed in non-graphical browsers. Non-graphical browsers otherwise ignore the IMG element.

Align="top|middle|bott om|left|right"

sets the positioning relationship between the graphic and the text that follows it; values include:

  • top: the text following the graphic should be aligned with the top of the graphic.
  • middle: the text following the graphic should be aligned with the middle of the graphic.
  • bottom: the text following the graphic should be aligned with the bottom of the graphic.
  • left: the image is pushed to the left margin of the page.
  • right: the image is pushed to the right margin of the page.

Width="n"

defines the width of the image.

Height="n"

defines the height of the image.

Border="n"

defines the border above and below the image.

Vspace="n"

defines the vertical space around the image.

Hspace="n"

defines the horizontal space to the left and right of the image.

Ismap

this attribute identifies the image as an image map, where regions of the graphic are mapped to defined URLs. Hooking up these relationships requires knowledge of setting an image map file on the server to define these  connections.

Usemap="string"

identifies which MAP element, as defined in the Name attribute, that you are using for a client-side image map.

 <MAP>...</MAP>

 

define client-side image maps

 

Name="string"

string is the name you use as the value of the Usemap attribute of the corresponding IMG element.

<AREA>...</AREA>

 

defines correspondence between pixels and URLs in client side image map element MAP used in  conjunction with IMG

 

Shape="rect|poly|circle "

Sets the shape of the hotspot in the image

Shape="rect" Coords="left,top,right, bottom"

Sets the perimeter x-y coordinates of a rectangle

Shape="poly" Coords="x1,y1,x2,y2,... xn,yn""

Sets the border coordinates of a polygon

Shape="circle" Coords="x,y,r"

Sets the center (x, y) and radius (r) of a circle

Href="URL"

Defines the URL associated with this AREA

Nohref

Defines this AREA as a "deadspot," with not URL associated with it

<FIG>...</FIG>

 

define a figure

 

Src="URL"

defines the source of the figure

TOP

Character formatting

TAG (start...stop)

Attributes

Explanation

<CITE>string</CITE>

 

delimits a citation.

<CODE>string</CODE>

delimits computer language source code.

<EM>string</EM>

delimits emphasized text.

<KBD>string</KBD>

 delimits text that is intended to be entered as a keyboard entry.

<SAMP>string</SAMP>

delimits text that should be rendered "as is."

 <STRONG>string</STRONG>

delimits text with a strong emphasis.

<VAR>string</VAR>

delimits a variable name.

<DFN>string</DFN>

delimits the defining instance of an item.

<Q>string</Q>

delimits a short quote.

<LANG>string</LANG>

the human language currently defined.

<AU> string</AU>

the name of an author.

<PERSON>string</PERSON>

the name of an author.

<ACRONYM>string</ACRONYM>

an acronym in the document.

<INS>string</INS>

 inserted text (when documents are amended).

<DEL>string</DEL>

deleted text (when documents are amended).

<B>string</B>

delimits bold text.

<I>string</I>

delimits italics text.

<TT>string</TT>

delimits typewriter font text.

<U>string</U>

delimits underlined text.

<BIG>string</BIG>

big print relative to current font.

<SMALL>string</SMALL>

small print relative to current font.

<SUB>string</SUB>

a subscript.

<SUP> string</SUP>

a superscript.

<BASEFONT>...</BASEFONT>

changes the current font.

Size="n"

specifies the font size in the range 1-7.

Size="+|-n"

specifies font size relative to the current base font size

Color="color"

specifies the font color; either RGB hexadecimal value or color name (see BODY attribute BGColor).

<FONT> string </BASEFONT>

 

changes the font for string.

Size="n"

 specifies the font size in the range 1-7.

Size="+|-n"

specifies font size relative to the current base font size

Color="color"

specifies the font color; either RGB hexadecimal value or color name (see BODY attribute BGColor).

TOP

FORM Elements

TAG (start...stop)

Attributes

Explanation

 

 

delimits the content of a FORM.

<FORM>...</FORM>

Action="URL"

this attribute identifies the URL of the program or script which accepts the contents of the form for processing. If this attribute is absent, the BASE URI of the Form is used.

Method="get|post"

this attribute indicates the variation in the Froms-handling protocol which will be used in processing the Action program or script.

Encytpe="string"

this attribute identifies the media type (See RFC1590) that  will be used for encoding the name/value pairs of the Form's data. This is needed for when the protocol identified in Method does not have its own format. The default encoding for all Forms is application/x-www-form-urlenc oded.

<INPUT>...</INPUT>

 

used for collecting information from the user.

Align="top|middle|bott om"

this attribute is used used only with the image Type (see list below). Possible values are "top," "middle," and "bottom," and define the relationship of the image to the text following it.

Checked

this attribute causes the initial state of a checkbox or radio button to be "selected." Without this attribute, the initial state is unselected.

Maxlength="n"

his attribute sets a maximum number of characters that a user can enter in a text a field. The default value of this is unlimited.

Name="string

this attribute identifies the symbolic name that is used in transferring and identifying the output from this element of the Form.

Size="n"

this attribute specifies the field width as displayed to the user. If Size is less than Maxlength, the text field is scrollable.

Src="URL"

this attribute the source file for the image used with the attribute Type is set to "image."

Type="checkbox| hidden| image| password| radio| reset| submit| text"

this attribute identifies the type of the input field:

  • checkbox: This is used for gathering data that can have multiple values at a time.
  • hidden: This is for values that are set by the  form without input from the user.
  • image: An image field be used to submit the Form: when the user clicks on the image, the Form is submitted, and the x and y coordinates of the click location are transmitted with the name/value pairs.
  • password: This is a field in which the user enters text, but the text is not displayed (could appear as stars).
  • radio: Used to collect information where there is one and only one possible value from a set of alternatives. The Checked  attribute can set the initial value of this element.
  • reset: This is used to reset and clear the Form to its default values. The Value attribute sets the string displayed to the user for this element.
  • submit: This button is used to submit the Form. The Value attribute sets the string displayed to the user for this element.
  • text: This is used for a single line of text; this uses the Size and Maxlength attributes. For multiple lines, use TEXTAREA (below).

Text

this attribute identifies the input as a single line text-entry area.

Value="string"

this attribute sets the initial displayed value of the field or the value of the field when it is selected (the radio button type must have this attribute set).

<SELECT>...</SELECT>

 

 used for presenting a user with a choice of a set of alternatives. The OPTION element is used to define each alternative.

Name="string"

identifies the logical name that will be submitted and associated with the data as a result of the user choosing select.

Multiple

By default, the user can only make one selection from the group in the SELECT element. By using the Multiple attribute, the user may select one or more of the OPTIONs.

Size="n"

specifies the number of visible items. If this is more than one, the visual display will be a list.

<OPTION>...</OPTION>

 

 occurs only within the SELECT element (above) and is used to represent each choice of the SELECT.

Selected

indicates that this option is initially selected.

 Value="n"

If present, this is the value that will be returned by the SELECT if this option is chosen; otherwise, the value returned is that set by the OPTION element.

<TEXTAREA>...</TEXTAREA>

 

used to collect multiple lines of text from the user; the user is presented with a scrollable pane in which text can be written.

Name="string"

used to collect multiple lines of text from the user; the user is  presented with a scrollable pane in which text can be written.

Rows="n"

the number of rows of text that will be displayed (the user can use more rows and scroll down to them).

Cols="n"

the number of columns of text that will be displayed (the user can use more columns and scroll to the right to them).

TOP

TABLE and Related Elements

TAG (start...stop)

Attributes

Explanation

<TABLE>...</TABLE>

 

delimits the content of a TABLE.

 Align="bleedleft| left| center| right| bleedright| justify "

the horizontal alignment of the table on the screen (not the contents of the table). Possible values are:

  • bleedleft: aligned at the left window border
  • left: at the left text margin
  • center: centered between text margins
  • right: at the right text margin
  • bleedright:  aligned at the right window border
  • justify: table should fill space between text margins

Border

this attribute causes browser to render a border around the table; if missing, the table has no grid around it or its data.

Border="n"

specifies the thickness of the table border in pixels.

Cellspacing="n"

specifies the space around data cells in pixels.

Cellpadding="n"

specifies the space data in the cells in pixels.

Width="n"

this attribute specifies how wide the table will be; if given as "N%", the width is N% of the width of the display.

Id="string"

a document-wide identifier for naming positions in the document as distinations for a hypertext link.

Class = "string"

A list of names that may be used by style sheets.

Lang = "string"

the natural (human) language used by the content of the table.

Dir="ltr|rtl|"

identifies the layout of rows--such as column 1 is on the right (Dir="rtl") or left (Dir="ltr"). Used for languages that have different directionality in reading (not left to right, top to bottom).

Align="left|center|right| justify|char"

the horizontal alignment of cell contents; justify is left; char is for aligning on a character

Char="c"

specifies the alignment character for use with Align="char";

Charoff="n"

the offset of the alignment character on each line.

Valign="top|middle|bot tom|baseline"

alignment of cell contents

Cols="n"

the number of columns in the table; if present, the browser can render the table as the data is received;

Frame="(void| above| below| hsides| lhs| rhs| vsides| box| border"

which sides of the frame to render (void = none).

Rules="(none | groups | rows | cols | all")

where to draw the rules in the table interior.

<TR>...</TR>

 

contains the elements in each table row.

<TH> string</TH>

TH used to identify a heading in the table; TD used to identify data in the table.

Align="left| center| right| justify| decimal"

this attribute identifies horizontal alignment of the items in a table row.

Valign="top | middle | bottom| baseline"

this attribute identifies the vertical alignment of the items in a table cell.

Colspan="n"

this attribute identifies the number of columns the cell spans.

Rowspan="n"

 this attribute identifies the number of rows the cell spans.

Nowrap

this attribute prevents the browser from wrapping the contents of the cell.

 <CAPTION>string</CAPTION>

 

 

used to label a table or figure.

Align="top| bottom| left| right"

this attribute identifies the position of the caption relative to the table or figure.

TOP

Netscape Extension Elements

TAG (start...stop)

Attributes

Explanation

<ISINDEX>...</ISINDEX>

Prompt="string"

the message a user sees for a searchable index.

<BLINK>string</BLINK>

 

creates blinking text.

<LI> in <UL>

Type="disc|circle|squar e"

 changes shape of individual items in UL element

<LI> in <OL>

Type="A|a|I|i|1"

changes shape of individual items in OL element; A = capital letters; a = small letters; I = capital roman numerals; 1 = numbers (default)

<LI Value="n"> in <OL>

Value="n"

 changes value of item in OL element;

<IMG>...</IMG>

 

additions to the IMG element.

Align="left| right| top| texttop|  middle| absmiddle| baseline| bottom| absbottom"

specifies the placement of an image relative to the text following it.

TOP

Frame Elements (Netscape and Microsoft support)

TAG (start...stop)

Attributes

Explanation

<FRAMESET> ... </FRAMESET>

 

container for frame elements; used instead of a body in a document

Rows="string,string,..s tring"

comma-separated list of values indicating the height of each of the rows. If a number, the row is that high in pixels; If a number followed by a %, the row gets that percent of the total window height; If a *, the row gets the remaining room; If a number followed by a *, that row gets that much more  share of the height;

Cols="string,string,..str ing"

comma-separated list of values indicating the height of each of the columns. The values are the same syntax as for the Rows attribute.

<FRAME> ... </FRAME>

 

this element identifies a single frame in a frameset

Src="URL"

The url refers to the resource to be initially displayed in this frame.

Name="string"

assigns a name to the frame; this name then can be used in other documents in the Target attribute of the anchor element.

Marginwidth="n"

The number of pixels to add to the left and right of the contents of frame the frame.

Marginheight="value"

The number of pixels to add to the top and bottom of the contents of frame the frame.

Scrolling="yes|no|auto "

yes = add scrollbars, even if they are not needed; no =  NEVER add scrollbars even if they are needed; auto = add scrollbars if they are needed; (default)

Noresize

a flag that indicates the frame is not resizable by the user; Normally, a user can manually alter the size of the frame using "grab buttons" that appear on the  display of the frame. The Noresize attribute makes this resizing impossible.

<NOFRAMES> ... </NOFRAMES>

 

this element brackets content that will be rendered by non-frame-enabled browsers.

<A>

Target="string"

lets you define in which frame the new content referenced in the anchor will be displayed when selected. Target has the possible values: name: a frame named in a FRAME element's Name attribute; _self: new document is displayed the in same frame as the anchor that loads it; this is the default; _parent: displays the new document in the parent frame; if no parent, same as _self; _top: displays the new document in the entire window; if no frames, same as _self; _blank: display the new document in a new, unnamed window;

<BASE>

Target="string"

lets you set the default target for every hypertext link in the document. Its possible values are the same as for the Target attribute of the A element.

TOP

Microsoft Internet Explorer Extension Elements

TAG (start...stop)

 Attributes

Explanation

<MARQUEE> ... </MARQUEE>

 

creates a scrolling text marquee

Align="top|bottom|mid dle"

alignment of marquee

Behavior="scroll|slide|a lternate"

(scroll = continous movement; slide = display once and then sit there; alternate = slide in and reverse out)

Direction="left|right"

scroll direction

Loop="n"

how many times to scroll

Scrollamount="n"

scrollrate in pixels/time

Scrolldelay="n"

milleseconds between scroll movements

BGColor="color"

color of background behind text

Width="n"

width in pixels of marquee

Height="n"

height in pixels of marquee

Hspace="n"

pixels to leave as buffer left and right of marquee

Vspace="n"

pixels to leave as buffer above and below marquee

<BGSOUND> ... </BGSOUND>

 

plays a soundtrack when the document is displayed

Src="URL"

url of sound file

Loop="n"

number of times to replay file"

<IMG>

new attributes for IMG element

 

Dynsrc="URL"

URL of the AVI movie

Controls

when present, it adds "VCR-like" controls to the movie image.

Loop="n"

number of times to play the movie

Start="mouseover|fileo pen"

when movie begins to play, fileopen is default.

<BODY>

 

new attributes for the BODY element

BGProperties="fixed"

if present, this freezes the background image defined in Background to the browser window so that it does not scroll with the text.

Topmargin="n"

pixels of buffer at top of page in browser window

Leftmargin="n"

pixels of buffer at the left of page in browser window

<TABLE>

BGColor="color"

specifies the background color of the entire table

<TR>

BGColor="color"

specifies the background color of the table row

<TH>

BGColor="color"

specifies the background color of the table header

<TD>

BGColor="color "

specifies the background color of the table data

TOP

Transition Descriptions

Entering:
<META http-equiv=”Page-Enter” content=”RevealTrans (Duration=3, Transition=23)”>

Leaving:
<META http-equiv=”Page-Exit” content=”RevealTrans (Duration=2, Transition=23)”>

Just stick these tags between the <head>, </head> tags in your page & you are ready to go. To use a different transition effect switch the Transition value with one of these below.

    Transition Name

    Transition Value

    Box in

    0

    Box out

    1

    Circle in

    2

    Circle out

    3

    Wipe up

    4

    Wipe down

    5

    Wipe right

    6

    Wipe left

    7

    Vertical blinds

    8

    Horizontal blinds

    9

    Checkerboard across

    10

    Checkerboard down

    11

    Random disolve

    12

    Split vertical in

    13

    Split vertical out

    14

    Split horizontal in

    15

    Split horizontal out

    16

    Strips left down

    17

    Strips left up

    18

    Strips right down

    19

    Strips right up

    20

    Random bars horizontal

    21

    Random bars vertical

    22

    Random

    23

Additional Web Development Links

TOP
This web site is designed for high speed access users browsing with IE 4.0 or better.
Suggested Screen Resolution is 800x600 or higher.


[Graphic Design] [Email Me] [Computer Services] [Web Services] [Tech Support Request Form]