| HTML Tags You Should Know |
| TAG / ATTRIBUTES |
DESCRIPTION |
| <HTML> ... </HTML> |
First and last tags for every page you design |
| <HEAD> ... </HEAD> |
Mark off a header section for certain preliminary page information. |
| <TITLE> ... </TITLE> |
Contain window title; belong in header section |
- <BODY> ... </BODY>
- BGCOLOR=color
BACKGROUND="filename"
TEXT=color
LINK=color
VLINK=color
ALINK=color
|
Mark off main section to contain page content. The attributes allow you to choose a background color or image file, as well as the color of the text, untried links (LINK), links you have visited (VLINK), and links as they are made active by a mouseclick (ALINK) |
| <PRE> ... </PRE> |
Allow the insertion of preformatted text (spaces, breaks, etc) |
| <CENTER> ... </CENTER> |
Centers text and objects horizontally on the screen |
- <FONT> ... </FONT>
- SIZE=(number (1-7), "+number" or "-number")
COLOR=color
FACE=font name
|
Adjusts characteristics of the contained text: size, typeface, and color. (note that 1 is smallest, 7 largest size) |
- <UL> ... </UL>
- TYPE=("disc", "circle" or "square")
|
Indicates that the included list is an unordered (bulleted) list, and allows some choice in the appearance of the bullets |
- <OL> ... </OL>
- TYPE=(A, a, I, i, or 1)
START=number
|
Indicates that the included list is an ordered (numbered) list, and allows some choice in the numbering/lettering style, as well as the starting number of the list |
| <LI> ... </LI> |
These tags are used to contain each list item in a list; they are used with both ordered and unordered lists |
- <A> ... </A>
- HREF=("filename", "#name" or "mailto:address")
NAME=name
|
Creates a link to an external file or web page (or to a mailbox, telnet site, etc); the contained text/objects serve as a clickable button. NAME allows link to serve as a label to which other links can be directed. |
| <BR> |
Creates a linebreak in the screen display; can be used repeatedly to generate blank lines |
- <IMG>
- SRC="filename"
WIDTH=number
HEIGHT=number
ALIGN=("left" or "right")
BORDER=number
|
Inserts an image into the webpage. You must specify the source file, and can choose to set the width and height of the image (original size can be distorted); choosing left or right alignment allows text to wrap around the side of the image. Other values of ALIGN are possible, to be learned later (but don't use "center");border=number where number is the thickness of the border color should be the same as the text color in the body tag. |
| <B> ... </B> |
Physical tag to make the contained text appear bold |
| <STRONG> ... </STRONG> |
Logical tag to make the contained text appear bold |
| <I> ... </I> |
Physical tag to italicize the contained text |
| <EM> ... </EM> |
Logical tag to italicize the contained text |
| <U> ... </U> |
Underlines the contained text |
| <BLINK> ... </BLINK> |
Makes the contained text blink on and off |
- <H#> ... </H#> (#=1-6, 1 is biggest);
- ALIGN=("left", "right" or "center")
|
Indicates a heading (headline) or subheading; The contained text will be large and dark (H1 is largest, H6 the smallest) |
| <BLOCKQUOTE> ... </BLOCKQUOTE> |
Formats the contained text as a quote, indenting both margins |
| <SUB> ... </SUB> |
Contained text is lowered and reduced in size, appearing as a subscript |
| <SUP> ... </SUP> |
Contained text is elevated and reduced in size, appearing as a superscript |
| <P> ... </P> |
These tags indicate that the contained text is a paragraph, allowing some formatting to the paragraph as a whole. Most browsers initiate the paragraph with a blank line. The closing tag is optional, but it is preferable to use it. |
- <HR>
- WIDTH=(number or "percent%")
SIZE=number
ALIGN=("left", "right" or "center")
NOSHADE
|
Creates a horizontal rule (line) to separate other text/objects. The attributes allow control over the horizontal WIDTH (either in # of pixels or % of screen), the vertical SIZE (in pixels), alignment on the screen, or to eliminate the 3D nature of the rule (with the NOSHADE attribute) |
- <TABLE> ... </TABLE>
- BORDER=number
WIDTH=(number or "percent%")
HEIGHT=(number or "percent%")
BGCOLOR=color
BACKGROUND=filename
CELLSPACING=number
CELLPADDING=number
|
Creates a table. BORDER is set in number of pixels. WIDTH and HEIGHT can be pixels or percents, but are usually omitted, as table will size itself to fit data. BGCOLOR and BACKGROUND allow a color or image to serve as backdrop (BACKGROUND targets each individual cell in Netscape, entire table in IE). CELLSPACING controls pixel width of intercell boundaries, CELLPADDING controls the pixels of blank space between the edges of a cell and the cell's contents. |
- <TR> ... </TR>
- ALIGN=("left", "right" or "center")
VALIGN=("top", "bottom" or "middle")
BGCOLOR=color
BACKGROUND=filename
|
Table row tags - used only within TABLE tags. Create a row within the table. ALIGN sets the alignment for all cell contents in the row; VALIGN controls the vertical alignment of cell contents. BACKGROUND and BGCOLOR work as they do for TABLE tags. |
- <TD> ... </TD>
- ALIGN=("left", "right" or "center")
VALIGN=("top", "bottom" or "middle")
BGCOLOR=color
BACKGROUND=filename
ROWSPAN=number
COLSPAN=number
WIDTH=(number or "percent%")
|
Table data tags - used only within TR tags. Create a cell (column) within the table. ALIGN and VALIGN control the alignment of the cell contents (they override similar arguments for the row). BACKGROUND and BGCOLOR work as they do for TABLE and TR tags. ROWSPAN sets a number of rows for a cell to reach across, and similarly for COLSPAN, allowing cells to be merged together ("normal" cells have a default span of 1, and need no argument). WIDTH allows the exact width of the column to be determined, either in pixels or % of screen. |
- <TH> ... </TH>
- ALL ATTRIBUTES ARE IDENTICAL TO THOSE OF <TD> ABOVE.
|
Table header tags - can be used in place of <TD> tags. All functions are identical, except contents are centered and text is formatted as bold. |
- <DL> ... </DL>
- COMPACT
|
Indicates that the included list is a definition list. Each list entry consists of a term and a definition. The definition is indented as a block. Use of the COMPACT attribute can be made to display the list in a smaller amount of space. |
| <DT> ... </DT> |
Definition term -- Used only within the DL tags. These tags identify a term to be defined in a definition list. The closing tag is optional. |
| <DD> ... </DD> |
Definition definition (???) -- Used only within the DL tags. These tags identify the definition of a term in a definition list. The closing tag is optional. |