HTML BASICS:
------------------------------------------
GENERAL:
---------------------------------------------------------------------------
Document Type <HTML> </HTML> (beginning and end of file)
Title <TITLE> </TITLE> (must be in header)
Header <HEAD> </HEAD> (descriptive info, such as title)
Body <BODY> </BODY> (bulk of the page)
FORMATTING TAGS (appearance may vary between browsers)
---------------------------------------------------------------------------
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY> </DIV>
Align Heading <H? ALIGN=LEFT|CENTER|RIGHT> </H?>
Author's Address <ADDRESS> </ADDRESS>
Block Quote <BLOCKQUOTE> </BLOCKQUOTE> (usually indented)
Citation <CITE> </CITE> (usually italics)
Code <CODE> </CODE> (for source code listings)
Definition <DFN> </DFN> (not widely implemented)
Division <DIV> </DIV>
Emphasis <EM> </EM> (usually displayed as italic)
Heading <H?> </H?> (6 levels)
Keyboard Input <KBD> </KBD>
Large Font Size <BIG> </BIG>
Sample Output <SAMP> </SAMP>
Small Font Size <SMALL> </SMALL>
Strong Emphasis <STRONG> </STRONG> (usually displayed as bold)
Variable <VAR> </VAR>
FORMATTING PRESENTATION (text appearance specified in source HTML)
---------------------------------------------------------------------------
Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
Blinking <BLINK> </BLINK> (almost as bad as moving GIF's...)
Bold <B> </B>
Center <CENTER> </CENTER> (for both text and images)
Change Font Size <FONT SIZE=+|-?> </FONT>
Font Color <FONT COLOR="#$$$$$$"> </FONT>
Font Size <FONT SIZE=?> </FONT> (ranges from 1-7)
Italic <I> </I>
Preformatted <PRE> </PRE> (display text spacing as-is)
Strikeout <S> </S>
Subscript <SUB> </SUB>
Superscript <SUP> </SUP>
Typewriter <TT> </TT> (displays in a monospaced font)
Underline <U> </U>
Width <PRE WIDTH=?> </PRE> (in characters)
LINKS AND GRAPHICS
---------------------------------------------------------------------------
Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE>
Alignment <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
Border <IMG SRC="URL" BORDER=?> (in pixels)
Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Define Target <A NAME="***"> </A>
Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (in pixels)
Display Image <IMG SRC="URL">
Embed Object <EMBED SRC="URL"> (insert object into page)
Imagemap <IMG SRC="URL" ISMAP> (requires a script)
Imagemap <IMG SRC="URL" USEMAP="URL">
Link Something <A HREF="URL"> </A>
Link to Target <A HREF="URL#***"> </A> (recommend resolving URL)
<A HREF="#***"> </A> (point to NAME in current document)
Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">
Map <MAP NAME="***"> </MAP> (describes the map)
Object Size <EMBED SRC="URL" WIDTH="?" HEIGHT="?">
Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
Section <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Target Window <A HREF="URL" TARGET="***"> </A>
DIVIDERS
---------------------------------------------------------------------------
Alignment <HR ALIGN=LEFT|RIGHT|CENTER>
Align Text <P ALIGN=LEFT|CENTER|RIGHT> </P>
Line Break <BR> (a single carriage return)
Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
No Break <NOBR> </NOBR> (prevents line breaks)
Paragraph <P> (usually a double return)
Paragraph <P> </P> (redefined as a container tag)
Solid Line <HR NOSHADE> (without the 3D cutout look)
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH=%> (as a percentage of page width)
Word Break <WBR> (where to break a line if needed)
LISTS (lists can be nested)
----------------------------------------------------------------------------
Bullet Type <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list)
<LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)
Definition List <DL> <DT> <DD> </DL> (<DT>=term, <DD>=definition)
Directory List <DIR> <LI> </DIR> (<LI> before each list item)
Menu List <MENU> <LI> </MENU> (<LI> before each list item)
Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
<LI TYPE=A|a|I|i|1> (this & subsequent)
Ordered List <OL> <LI> </OL> (<LI> before each list item)
Starting Number <OL VALUE=?> (for the whole list)
<LI VALUE=?> (this & subsequent)
Unordered List <UL> <LI> </UL> (<LI> before each list item)
COLORS AND BACKGROUNDS
---------------------------------------------------------------------------
Active Link <BODY ALINK="#$$$$$$">
Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
Text Color <BODY TEXT="#$$$$$$">
Tiled Bkground <BODY BACKGROUND="URL">
Link Color <BODY LINK="#$$$$$$">
Visited Link <BODY VLINK="#$$$$$$">
can be combined as follows:
<body background="http://www./~john/TECH/grid_paper.gif"
bgcolor="#abcdef" text="#000000">
SPECIAL CHARACTERS (these must all be in lower case)
---------------------------------------------------------------------------
Copyright ©
Copyright ©
< <
> >
& &
" "
Registered TM ®
Registered TM ®
Special Character &#?; (where ? is the ISO 8859-1 code)
FORMS (generally require a script on your server, usually CGI-BIN)
---------------------------------------------------------------------------
Checked? <INPUT CHECKED> (checkboxes and radio boxes)
Default Option <OPTION SELECTED>
Define Form <FORM ACTION="URL" METHOD=GET|POST> </FORM>
Field Name <INPUT NAME="***">
Field Size <INPUT SIZE=?> (in characters)
Field Value <INPUT VALUE="***">
File Upload <FORM ENCTYPE="multipart/form-data> </FORM>
Input Box Size <TEXTAREA ROWS=? COLS=?> </TEXTAREA>
Input Field <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
Max Length <INPUT MAXLENGTH=?> (in characters)
Multiple Choice <SELECT MULTIPLE> (can select more than one)
Name of Box <TEXTAREA NAME="***"> </TEXTAREA>
Name of List <SELECT NAME="***"> </SELECT>
Option <OPTION> (items that can be selected)
Selection List <SELECT> </SELECT>
Wrap Text <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>
# of Options <SELECT SIZE=?> </SELECT>
TABLES
---------------------------------------------------------------------------
Define Table <TABLE> </TABLE>
Table Border <TABLE BORDER> </TABLE> (either on or off)
Table Border <TABLE BORDER=?> </TABLE> (you can set the value)
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH=%> (percentage of page)
Table Caption <CAPTION> </CAPTION>
Alignment <CAPTION ALIGN=TOP|BOTTOM> (above/below table)
Table Row <TR> </TR>
Alignment <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
Table Header <TH> </TH> (same as data, except bold centered)
Alignment <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No Linebreaks <TH NOWRAP>
Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
Desired Width <TH WIDTH=?> (in pixels)
Width Percent <TH WIDTH=%> (percentage of table)
Table Cell <TD> </TD> (must appear within table rows)
Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
Desired Width <TD WIDTH=?> (in pixels)
Width Percent <TD WIDTH=%> (percentage of table)
FRAMES (define and manipulate specific regions of the screen)
---------------------------------------------------------------------------
Column Widths <FRAMESET COLS=,,,> </FRAMESET> (pixels or %)
Column Widths <FRAMESET COLS=*> </FRAMESET> (* = relative size)
Define Frame <FRAME> (contents of an individual frame)
Display Document <FRAME SRC="URL">
Frame Document <FRAMESET> </FRAMESET> (instead of <BODY>)
Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
Margin Width <FRAME MARGINWIDTH=?> (left and right margins)
Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)
Not Resizable <FRAME NORESIZE>
Scrollbar? <FRAME SCROLLING="YES|NO|AUTO">
Row Heights <FRAMESET ROWS=,,,> </FRAMESET> (pixels or %)
Row Heights <FRAMESET ROWS=*> </FRAMESET> (* = relative size)
Unframed Content <NOFRAMES> </NOFRAMES> (for non-frames browsers)
MISCELLANEOUS
---------------------------------------------------------------------------
Comment <! *** > (not displayed by the browser)
Meta Information <META> (must be in header)
Prompt <ISINDEX PROMPT="***"> (text to prompt input)
Prologue <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Prologue <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3 HTML 3.0//EN">
Relationship <LINK REV="***" REL="***" HREF="URL"> (in header)
Searchable <ISINDEX> (indicates a searchable index)
Send Search <A HREF="URL?***"> </a> (use a real question mark)
===========================================================================
SYMBOLS USED TO DESCRIBE TAGS ON THIS PAGE
---------------------------------------------------------------------------
URL URL of an external file (recommend always providing full path)
? Arbitrary number (i.e. <H?> means <H1>, <H2>, <H3>, etc.)
% Arbitrary percentage (i.e. <HR WIDTH=%> means <HR WIDTH=50%>, etc.)
*** Arbitrary text (i.e. ALT="***" means fill in with text)
$$$$$$ Arbitrary hex (i.e. BGCOLOR="#$$$$$$" means BGCOLOR="#00FF1C", etc.)
,,, Comma-delimited (i.e. COORDS=",,," means COORDS="0,0,50,50", etc.)
| Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER means pick one of these)
===========================================================================
|
