Weaving
your WebpageWeaving
your Webpage
Most
of the tags you'll ever need (and then some!)
Below is a list of most of the html tags you will ever need. Many, no doubt, you will have no use for, but one never knows where one's creativity may lead!
Main
Structure<HTML>...</HTML> Beginning and end of every document
<HEAD>...</HEAD> Beginning and end of heading information
<BODY Beginning of document body
BGCOLOR="#RRGGBB" NETSCAPE background colour attribute (Red, Green, Blue)
BACKGROUND="file.jpg" Backgound image (.jpg or .gif)
TEXT="#RRGGBB" Text colour (MICROSOFT can use colour name)
LINK="#RRGGBB" Link colour (MICROSOFT can use colour name)
VLINK="#RRGGBB" Visited link colour (MICROSOFT can use colour name)
ALINK="#RRGGBB"> Active link colour (MICROSOFT can use colour name)
</BODY> End of document body
<BGSOUND MICROSOFT background sound
SRC="url" MICROSOFT sound source
LOOP="number"> MICROSOFT loop number times (can be INFINITE)
<!-- comments --> Non displayed comments
<COMMENT>...</COMMENT> Non displayed comments
<ADDRESS>...</ADDRESS> Address information (little used)
Modifiers
within the HEAD section<TITLE>...</TITLE> Start and end of TITLE section
<BASE HREF="url"> Set BASE URL of document (use with care - non-portable)
<LINK REV=MADE HREF="url"> Identify page author
<META NETSCAPE Client pull
HTTP-EQUIV="REFRESH" NETSCAPE Reload page
CONTENT="number" NETSCAPE reload after number seconds.
URL="fullurl"> NETSCAPE url of page to load ("CONTENT=5;URL=http://place.com")
Paragraph
Styles<H1>...</H1> Encloses level 1 heading (Big) (Can use ALIGN=CENTER)
<H2>...</H2> Encloses level 2 heading (Can use ALIGN=CENTER)
<H3>...</H3> Encloses level 3 heading (Can use ALIGN=CENTER)
<H4>...</H4> Encloses level 4 heading (Can use ALIGN=CENTER)
<H5>...</H5> Encloses level 5 heading (Can use ALIGN=CENTER)
<H6>...</H6> Encloses level 6 heading (Small) (Can use ALIGN=CENTER)
<P> Start a new paragraph (NETSCAPE can use ALIGN=CENTER,LEFT,RIGHT)
<BR Line break (new line)
CLEAR=LEFT NETSCAPE Clear left margin of images
CLEAR=RIGHT NETSCAPE Clear right margin of images
CLEAR=ALL> NETSCAPE Clear both margins of images
<HR Horizontal Rule
SIZE="pixels" NETSCAPE Specify width of rule
WIDTH="pixels||percentage"NETSCAPE Width of rule in pixels or percentage of display
ALIGN=LEFT NETSCAPE Align rule to left
ALIGN=RIGHT NETSCAPE Align rule to right
ALIGN=CENTER NETSCAPE Align rule to center
NOSHADE> NETSCAPE Turn off shading of rule
<BLOCKQUOTE>...</BLOCKQUOTE> Indents a a block quote section
<PLAINTEXT>...</PLAINTEXT> Plain text & do not process tags between start and end
<PRE>...</PRE> Preformatted text (Typewriter font)
<LISTING>...</LISTING> Preformatted code listing
<NOBR>...</NOBR> NETSCAPE No breaks permitted between tags
<WBR> NETSCAPE Allow word break in NOBR section
<OL Ordered lists
TYPE=A NETSCAPE Specify large letters
TYPE=a NETSCAPE Specify small letters
TYPE=I NETSCAPE Specify large roman numerals
TYPE=i NETSCAPE Specify small roman numerals
TYPE=1>...</OL> NETSCAPE Specify numbers (default)
<UL Unordered lists
TYPE=square NETSCAPE Square bullet
TYPE=disc NETSCAPE Solid disc bullet (default 1st level)
TYPE=circle...</UL> NETSCAPE Circle bullet
<MENU>...</MENU> Encloses a menu listing (display same as UL)
<DIR>...</DIR> Encloses a directory listing (display same as UL)
<LI> Identify a list item (can use OL/UL modifiers with NETSCAPE)
<DL>...</DL> Encloses a definition list
<DT> Definition list term (1st level indent)
<DD> Definition list definition (2nd level indent)
Display
Styles<STRONG>...</STRONG> Strong text <STRIKE>...</STRIKE>Strikethrough text<EM>...</EM> Emphasized text <CITE>...</CITE> A citation <CODE>...</CODE> Computer code <SAMP>...</SAMP> Sample output <DFN>...</DFN> Definition <VAR>...</VAR> Variable <KBD>...</KBD> Keyboard entry <XMP>...</XMP> Example (use with care) <I>...</I> Italic text <B>...</B> Bold text <U>...</U> Underlined text <S>...</S>Strikethrough text<TT>...</TT> Typewriter text <FONT NETSCAPE font style SIZE="value"> NETSCAPE Change font size (1 small-7 big can use +/-) COLOR="#rrggbb" NETSCAPE font colour (MICROSOFT can use colour names) FACE="name,name,etc" MICROSOFT specify font (ie Ariel,Times Roman) ...</FONT> NETSCAPE end font style <BASEFONT SIZE="value"> NETSCAPE Set base font size <CENTER>...</CENTER> NETSCAPE Center items between tags <BIG>...</BIG> NETSCAPE use bigger font <SMALL>...</SMALL> NETSCAPE use smaller font <SUB>...</SUB> NETSCAPE use subscript <SUP>...</SUP> NETSCAPE use superscript <MARQUEE MICROSOFT scrolling text marquee ALIGN=TOP MICROSOFT align text with top of marquee ALIGN=MIDDLE MICROSOFT align text with middle of marquee ALIGN=BOTTOM MICROSOFT align text with bottom of marquee BEHAVIOR=SCROLL MICROSOFT text scroll on and off marquee BEHAVIOR=SLIDE MICROSOFT text scroll in and stays BEHAVOIR=ALTERNATE MICROSOFT text moves back and forth BGCOLOR="#rrggbb" MICROSOFT background colour of marquee (can use colour name) DIRECTION=RIGHT MICROSOFT scroll from right DIRECTION=LEFT MICROSOFT scroll from left HEIGHT="number||percent" MICROSOFT height of marquee HSPACE="number" MICROSOFT horizontal space between marquee and surrounding text VSPACE="number" MICROSOFT vertical space between marquee and surrounding text LOOP="number||INFINITE" MICROSOFT loop marquee number times SCROLLAMOUNT="number" MICROSOFT speed of marquee SCROLLDELEY="number" MICROSOFT delay in milliseconds WIDTH="number||percentage"MICROSOFT width of marquee ...</MARQUEE> MICROSOFT end marquee
Links
and Images<A HREF="url">...</A> Enclose a link
<A NAME="name">...</A> Enclose an anchor point
<A NAME="name" HREF="url">...</A> Both of the above
<IMG SRC="url" An inline image source
ALIGN=MIDDLE Align text with middle of image
ALIGN=TOP Align text with top of image
ALIGN=BOTTOM Align text with bottom of image
ALIGN=LEFT NETSCAPE Align image to left of page (text will wrap)
ALIGN=RIGHT NETSCAPE Align image to right of page (text will wrap)
ALIGN=TEXTTOP NETSCAPE Align with tallest text
ALIGN=BASELINE NETSCAPE Align with bottom of image
ALIGN=ABSBOTTOM NETSCAPE Align bottom of image with current line
ALIGN=ABSMIDDLE NETSCAPE Align text with absolute middle of image
WIDTH="pixels" NETSCAPE width of image
HEIGHT="pixels" NETSCAPE height of image
BORDER="value" NETSCAPE border size (can be 0)
VSPACE="pixels" NETSCAPE vertical spacing
HSPACE="pixels" NETSCAPE horizontal spacing
ALT="text"> Text description of image
CONTROLS MICROSOFT show control panel for .avi files
DYNSRC="url" MICROSOFT show dynamic source (.avi)
LOOP="number" MICROSOFT loop video clip number times (Can be INFINITE)
START="FILEOPEN||MOUSEOVER" MICROSOFT Start video when loaded or when mouse over image
USEMAP="mapname" MICROSOFT Client side imagemap
ISMAP> Image is a server side imagemap
<MAP NAME="mapname"> MICROSOFT Start client side image map locations
<AREA MICROSOFT define client side imagemap
COORDS="x1,y1,x2,y2,..." MICROSOFT coordinates for map
HREF="url" MICROSOFT destination of hot spot
NOHREF MICROSOFT ignore clicks on this spot
SHAPE="shape" MICROSOFT shape of spot (CIRC/POLY/RECT)
Tables<TABLE Start table (required)
BORDER="pixels" NETSCAPE border size (can be 0)
CELLSPACING="pixels" NETSCAPE Space between cells
CELLPADDING="pixels" NETSCAPE Space between border and contents of cell
WIDTH="pixels||percentage" NETSCAPE width of table
HEIGHT="pixels||percentage" NETSCAPE height of table
ALIGN=LEFT MICROSOFT align table left (default)
ALIGN=RIGHT MICROSOFT align table right
BGCOLOR="#rrggbb||colour name" MICROSOFT specify table background colour
BORDERCOLOR="#rrggbb||name" MICROSOFT specify table border colour
BORDERCOLORLIGHT="#rrggbb||name"MICROSOFT specify 3D border light highlight colour
BORDERCOLORDARK="#rrggbb||name"MICROSOFT specify 3D border dark highlight colour
VALIGN=TOP MICROSOFT align table text to top (center is default)
VALIGN=BOTTOM MICROSOFT align table text to bottom
...</TABLE> End table (required)
<TR Table row specifier
ALIGN=LEFT Align row contents left
ALIGN=CENTER Align row contents center
ALIGN=RIGHT Align row contents right
VALIGN=TOP Vertical align top
VALIGN=MIDDLE Vertical align middle
VALIGN=BOTTOM Vertical align bottom
VALIGN=BASELINE Vertical align with baseline
...</TR> End row
<TD Table data specifier
ALIGN=LEFT Align cell contents left
ALIGN=CENTER Align cell contents center
ALIGN=RIGHT Align cell contents right
VALIGN=TOP Vertical align top
VALIGN=MIDDLE Vertical align middle
VALIGN=BOTTOM Vertical align bottom
VALIGN=BASELINE Vertical align with baseline
NOWRAP Cell contents will not wrap
COLSPAN="columns" Cell will span columns
ROWSPAN="rows" Cell will span rows
BGCOLOR="#rrggbb||colour name" MICROSOFT specify cell background colour
BORDERCOLOR="#rrggbb||name" MICROSOFT specify cell border colour
BORDERCOLORLIGHT="#rrggbb||name"MICROSOFT specify 3D border light highlight colour
BORDERCOLORDARK="#rrggbb||name"MICROSOFT specify 3D border dark highlight colour
...</TD> End cell
<TH Table header specifier (bold default align=center)
ALIGN=LEFT Align cell contents left
ALIGN=CENTER Align cell contents center
ALIGN=RIGHT Align cell contents right
VALIGN=TOP Vertical align top
VALIGN=MIDDLE Vertical align middle
VALIGN=BOTTOM Vertical align bottom
VALIGN=BASELINE Vertical align with baseline
NOWRAP Cell contents will not wrap
COLSPAN="columns" Cell will span columns
ROWSPAN="rows" Cell will span rows
...</TH> End cell
<CAPTION Caption (inside TABLE but not TR,TD or TH)
ALIGN=TOP NETSCAPE Align caption above table (default)
ALIGN=BOTTOM NETSCAPE Align caption below table
ALIGN=LEFT MICROSOFT Align left
ALIGN=RIGHT MICROSOFT Align right
ALIGN=CENTER MICROSOFT Align center
VALIGN=TOP MICROSOFT Align caption above table
VALIGN=BOTTOM MICROSOFT Align caption below table
Forms<ISINDEX Document does keyword searches
PROMPT="sometext" NETSCAPE changes prompt
ACTION="url"> search script
<FORM Start a fill out form
ACTION="url" use url script
METHOD=POST||GET> specify POST or GET method
...</FORM> End form
<INPUT Start input field
TYPE="TEXT" one line text box
TYPE="PASSWORD" one line password box (echos *'s)
TYPE="RADIO" radio buttons
TYPE="CHECKBOX" checkboxes
TYPE="HIDDEN" field will not display
TYPE="IMAGE" image that acts like a submit button
TYPE="SUBMIT" submit button (send form)
TYPE="RESET" reset button (clear form)
NAME="name" variable name for field
VALUE="value" value of field
SIZE="size" makes field size characters wide
MAXLENGTH="size" accept no more than sizecharacters
CHECKED> turn on checkbox or radio button
<TEXTAREA Big text field (box)
ROWS="size" size rows high
COLS="size" size columns wide
...</TEXTAREA> End textarea
<SELECT Popup menu or scrolling list
SIZE="size" make scrolling list size high
MULTIPLE> allow multiple selections
<OPTION Entry for menu or list
VALUE="value" value of entry
SELECTED> set as default selection
...</SELECT> End popup menu or scrolling list
