BASIC GUIDE TO HTML

  • HTML TAGS
  • basic elements (all HTML documents should have these)
  • structural definition (appearance controlled by the browser's preferences)
  • presentation formatting (author specifies text appearance)
  • links and graphics
  • dividers
  • lists
  • backgrounds and colors
  • special characters
  • forms
  • tables
  • frames
  • java
  • miscellaneous

    BASIC ELEMENTS

     

    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) 

     
 
 

    STRUCTURAL DEFINITION

     

    Heading

    <H?></H?>

    (the spec. defines 6 levels)

     

    Align Heading

    <H? ALIGN=LEFT|CENTER|RIGHT></H?>

     

     

    Division

    <DIV></DIV>

     

     

    Align Division

    <DIV ALIGN=LEFT|RIGHT|CENTER></DIV>

     

     

    Block Quote

    <BLOCKQUOTE></BLOCKQUOTE>

    (usually displayed as indented)

     

    Emphasis

    <EM></EM>

    (usually displayed as italic)

     

    Strong Emphasis

    <STRONG></STRONG>

    (usually displayed as bold)

     

    Citation

    <CITE></CITE>

    (usually italics)

     

    Code

    <CODE></CODE>

    (for source code listings)

     

    Sample Output

    <SAMP></SAMP>

     

     

    Keyboard Input

    <KBD></KBD>

     

     

    Variable

    <VAR></VAR>

     

     

    Definition

    <DFN></DFN>

    (not widely implemented)

     

    Author's Address

    <ADDRESS></ADDRESS>

     

     

    Large Font Size

    <BIG></BIG>

     

     

    Small Font Size

    <SMALL></SMALL>

      

     
 

    PRESENTATION FORMATTING

     

    Bold

    <B></B>

     

     

    Italic

    <I></I>

     

    N3.0b

    Underline

    <U></U>

    (not widely implemented yet)

     

    Strikeout

    <STRIKE></STRIKE>

    (not widely implemented yet)

    N3.0b

    Strikeout

    <S></S>

    (not widely implemented yet)

     

    Subscript

    <SUB></SUB>

     

     

    Superscript

    <SUP></SUP>

     

     

    Typewriter

    <TT></TT>

    (displays in a monospaced font)

     

    Preformatted

    <PRE></PRE>

    (display text spacing as-is)

     

    Width

    <PRE WIDTH=?></PRE>

    (in characters)

     

    Center

    <CENTER></CENTER>

    (for both text and images)

    N1.0

    Blinking

    <BLINK></BLINK>

    (the most derided tag ever)

     

    Font Size

    <FONT SIZE=?></FONT>

    (ranges from 1-7)

     

    Change Font Size

    <FONT SIZE="+|-?"></FONT>

     

    N1.0

    Base Font Size

    <BASEFONT SIZE=?>

    (from 1-7; default is 3)

     

    Font Color

    <FONT COLOR="#$$$$$$"></FONT>

     

    N3.0b

    Select Font

    <FONT FACE="***"></FONT>

     

    N3.0b

    Multi-Column Text

    <MULTICOL COLS=?></MULTICOL>

     

    N3.0b

    Column Gutter

    <MULTICOL GUTTER=?></MULTICOL>

    (default is 10 pixels)

    N3.0b

    Column Width

    <MULTICOL WIDTH=?></MULTICOL>

     

    N3.0b

    Spacer

    <SPACER>

     

    N3.0b

    Spacer Type

    <SPACER TYPE=horizontal| vertical|block>

     

    N3.0b

    Spacer Size

    <SPACER SIZE=?>

     

    N3.0b

    Spacer Dimensions

    <SPACER WIDTH=? HEIGHT=?>

     

    N3.0b

    Spacer Alignment

    <SPACER ALIGN=left|right|center>

      

     
 
 

    LINKS AND GRAPHICS

     

    Link Something

    <A HREF="URL"></A>

     

     

    Link to Target

    <A HREF="URL#***"></A>

    (if in another document)

    <A HREF="#***"></A>

    (if in current document)

    N2.0

    Target Window

    <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>

     

     

    Define Target in Document

    <A NAME="***"></A>

     

     

    Relationship

    <A REL="***"></A>

    (not widely implemented)

     

    Reverse Relationship

    <A REV="***"></A>

    (not widely implemented)

     

    Display Image

    <IMG SRC="URL">

     

     

    Alignment

    <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

     

    N1.0

    Alignment

    <IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>

     

     

    Alternate

    <IMG SRC="URL" ALT="***">

    (if image not displayed)

     

    Imagemap

    <IMG SRC="URL" ISMAP>

    (requires a script)

     

    Client-Side Imagemap

    <IMG SRC="URL" USEMAP="URL">

     

     

    Map Description

    <MAP NAME="***"></MAP>

     

     

    Map Sections

    <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>

     

     

    Dimensions

    <IMG SRC="URL" WIDTH=? HEIGHT=?>

    (in pixels)

     

    Border

    <IMG SRC="URL" BORDER=?>

    (in pixels)

     

    Runaround Space

    <IMG SRC="URL" HSPACE=? VSPACE=?>

    (in pixels)

    N1.0

    Low-Res Proxy

    <IMG SRC="URL" LOWSRC="URL">

     

    N1.1

    Client Pull

    <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

     

    N2.0

    Embed Object

    <EMBED SRC="URL">

    (insert object into page)

    N2.0

    Object Size

    <EMBED SRC="URL" WIDTH=? HEIGHT=?>

      

     
 

    DIVIDERS

     

    Paragraph

    <P></P>

    (closing tag often unnecessary)

     

    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>

     

     

    Alignment

    <HR ALIGN=LEFT|RIGHT|CENTER>

     

     

    Thickness

    <HR SIZE=?>

    (in pixels)

     

    Width

    <HR WIDTH=?>

    (in pixels)

    N1.0

    Width Percent

    <HR WIDTH="%">

    (as a percentage of page width)

     

    Solid Line

    <HR NOSHADE>

    (without the 3D cutout look)

    N1.0

    No Break

    <NOBR></NOBR>

    (prevents line breaks)

    N1.0

    Word Break

    <WBR>

    (where to break a line if needed) 

     
 

    LISTS

     

     

    Unordered List

    <UL><LI></UL>

    (<LI> before each list item)

     

     

    Compact

    <UL COMPACT></UL>

     

     

    Bullet Type

    <UL TYPE=DISC|CIRCLE|SQUARE>

    (for the whole list)

     

    <LI TYPE=DISC|CIRCLE|SQUARE>

    (this & subsequent)

     

     

    Ordered List

    <OL><LI></OL>

    (<LI> before each list item)

     

     

    Compact

    <OL COMPACT></OL>

     

     

    Numbering Type

    <OL TYPE=A|a|I|i|1>

    (for the whole list)

     

    <LI TYPE=A|a|I|i|1>

    (this & subsequent)

     

     

    Starting Number

    <OL START=?>

    (for the whole list)

     

    <LI VALUE=?>

    (this & subsequent)

     

     

    Definition List

    <DL><DT><DD></DL>

    (<DT>=term, <DD>=definition)

     

     

    Compact

    <DL COMPACT></DL>

     

     

    Menu List

    <MENU><LI></MENU>

    (<LI> before each list item)

     

     

    Compact

    <MENU COMPACT></MENU>

     

     

    Directory List

    <DIR><LI></DIR>

    (<LI> before each list item)

     

     

    Compact

    <DIR COMPACT></DIR>

      

     
 

    BACKGROUNDS AND COLORS

     

    Tiled Bkground

    <BODY BACKGROUND="URL">

     

     

    Bkground Color

    <BODY BGCOLOR="#$$$$$$">

    (order is red/green/blue)

     

    Text Color

    <BODY TEXT="#$$$$$$">

     

     

    Link Color

    <BODY LINK="#$$$$$$">

     

     

    Visited Link

    <BODY VLINK="#$$$$$$">

     

     

    Active Link

    <BODY ALINK="#$$$$$$">

     

    SPECIAL CHARACTERS (these must all be in lower case)

     

    Special Character

    &#?;

    (where ? is the ISO 8859-1 code)

     

    <

    &lt;

     

     

    >

    &gt;

     

     

    &

    &amp;

     

     

    "

    &quot;

     

     

    Registered TM

    &reg;

     

     

    Copyright

    &copy;

     

     

    Non-Breaking Space

    &nbsp;

     

    (Complete list at

    FORMS

     

    Define Form

    <FORM ACTION="URL" METHOD=GET|POST></FORM>

     

    N2.0

    File Upload

    <FORM ENCTYPE="multipart/form-data"></FORM>

     

     

    Input Field

    <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">

     

     

    Field Name

    <INPUT NAME="***">

     

     

    Field Value

    <INPUT VALUE="***">

     

     

    Checked?

    <INPUT CHECKED>

    (checkboxes and radio boxes)

     

    Field Size

    <INPUT SIZE=?>

    (in characters)

     

    Max Length

    <INPUT MAXLENGTH=?>

    (in characters)

     

    Selection List

    <SELECT></SELECT>

     

     

    Name of List

    <SELECT NAME="***"></SELECT>

     

     

    # of Options

    <SELECT SIZE=?></SELECT>

     

     

    Multiple Choice

    <SELECT MULTIPLE>

    (can select more than one)

     

    Option

    <OPTION>

    (items that can be selected)

     

    Default Option

    <OPTION SELECTED>

     

     

    Input Box Size

    <TEXTAREA ROWS=? COLS=?></TEXTAREA>

     

     

    Name of Box

    <TEXTAREA NAME="***"></TEXTAREA>

     

    N2.0

    Wrap Text

    <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

      

     
 

    TABLES

     

    Define Table

    <TABLE></TABLE>

     

     

    Table Border

    <TABLE BORDER=?></TABLE>

     

     

    Cell Spacing

    <TABLE CELLSPACING=?>

     

     

    Cell Padding

    <TABLE CELLPADDING=?>

     

     

    Desired Width

    <TABLE WIDTH=?>

    (in pixels)

     

    Width Percent

    <TABLE WIDTH="%">

    (percentage of page)

     

    Table Row

    <TR></TR>

     

     

    Alignment

    <TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>

     

     

    Table Cell

    <TD></TD>

    (must appear within table rows)

     

    Alignment

    <TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>

     

     

    No linebreaks

    <TD NOWRAP>

     

     

    Columns to Span

    <TD COLSPAN=?>

     

     

    Rows to Span

    <TD ROWSPAN=?>

     

    N1.1

    Desired Width

    <TD WIDTH=?>

    (in pixels)

    N1.1

    Width Percent

    <TD WIDTH="%">

    (percentage of table)

    N3.0b

    Cell Color

    <TD BGCOLOR="#$$$$$$">

     

     

    Table Header

    <TH></TH>

    (same as data, except bold centered)

     

    Alignment

    <TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
    VALIGN=TOP|BOTTOM|MIDDLE>

     

     

    No Linebreaks

    <TH NOWRAP>

     

     

    Columns to Span

    <TH COLSPAN=?>

     

     

    Rows to Span

    <TH ROWSPAN=?>

     

    N1.1

    Desired Width

    <TH WIDTH=?>

    (in pixels)

    N1.1

    Width Percent

    <TH WIDTH="%">

    (percentage of table)

    N3.0b

    Cell Color

    <TH BGCOLOR="#$$$$$$">

     

     

    Table Caption

    <CAPTION></CAPTION>

     

     

    Alignment

    <CAPTION ALIGN=TOP|BOTTOM>

    (above/below table) 

     

    FRAMES

    N2.0

    Frame Document

    <FRAMESET></FRAMESET>

    (instead of <BODY>)

    N2.0

    Row Heights

    <FRAMESET ROWS=,,,></FRAMESET>

    (pixels or %)

    N2.0

    Row Heights

    <FRAMESET ROWS=*></FRAMESET>

    (* = relative size)

    N2.0

    Column Widths

    <FRAMESET COLS=,,,></FRAMESET>

    (pixels or %)

    N2.0

    Column Widths

    <FRAMESET COLS=*></FRAMESET>

    (* = relative size)

    N3.0b

    Border Width

    <FRAMESET BORDER=?>

     

    N3.0b

    Borders

    <FRAMESET FRAMEBORDER="yes|no">

     

    N3.0b

    Border Color

    <FRAMESET BORDERCOLOR="#$$$$$$">

     

    N2.0

    Define Frame

    <FRAME>

    (contents of an individual frame)

    N2.0

    Display Document

    <FRAME SRC="URL">

     

    N2.0

    Frame Name

    <FRAME NAME="***"|_blank|_self| _parent|_top>

     

    N2.0

    Margin Width

    <FRAME MARGINWIDTH=?>

    (left and right margins)

    N2.0

    Margin Height

    <FRAME MARGINHEIGHT=?>

    (top and bottom margins)

    N2.0

    Scrollbar?

    <FRAME SCROLLING="YES|NO|AUTO">

     

    N2.0

    Not Resizable

    <FRAME NORESIZE>

     

    N3.0b

    Borders

    <FRAME FRAMEBORDER="yes|no">

     

    N3.0b

    Border Color

    <FRAME BORDERCOLOR="#$$$$$$">

     

    N2.0

    Unframed Content

    <NOFRAMES></NOFRAMES>

    (for non-frames browsers)

     

    JAVA

     

    Applet

    <APPLET></APPLET>

     

     

    Applet File Name

    <APPLET CODE="***">

     

     

    Parameters

    <APPLET PARAM NAME="***">

     

     

    Applet Location

    <APPLET CODEBASE="URL">

     

     

    Applet Identifier

    <APPLET NAME="***">

    (for references elsewhere in the page)

     

    Alternative Text

    <APPLET ALT="***">

    (for non-Java browsers)

     

    Alignment

    <APPLET ALIGN="LEFT|RIGHT|CENTER">

     

     

    Size

    <APPLET WIDTH=? HEIGHT=?>

    (in pixels)

     

    Spacing

    <APPLET HSPACE=? VSPACE=?>

    (in pixels)

     

    MISCELLANEOUS

     

    Comment

    <!-- *** -->

    (not displayed by the browser)

     

    HTML 3.2 Prologue

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

     

     

    Searchable

    <ISINDEX>

    (indicates a searchable index)

     

    Prompt

    <ISINDEX PROMPT="***">

    (text to prompt input)

     

    Send Search

    <A HREF="URL?***"></a>

    (use a real question mark)

     

    URL of This File

    <BASE HREF="URL">

    (must be in header)

    N2.0

    Base Window Name

    <BASE TARGET="***">

    (must be in header)

     

    Relationship

    <LINK REV="***" REL="***" HREF="URL">

    (must be in header)

     

    Meta Information

    <META>

    (must be in header)

     

    Style Sheets

    <STYLE></STYLE>

    (not yet widely supported)

     

    Scripts

    <SCRIPT></SCRIPT>

    (not yet widely supported)