More HTML
K. Yue @copyright 1996-2001, revised August 12, 2001

I. More tips on HTML development

• Always look up meanings of elements and attributes.
• Learn by reading source code of other people's work, especially good ones.
• Follow the Web page development guideline in your organization.
• If your organization does not have a Web development guideline, create one.
• Validate your HTML files using a validator.
• Identify baseline browsers and test them thorough.
• "Steal" bright ideas of other pages.

II. Tables

• Tables were introduced in HTML 3.0 and have been widely used since then.
• HTML 3.0 tables are defined by using the following five tags:
• TABLE: a table.
• CAPTION: caption of a table.
• TR:  table row.
• TH:  table heading.
• TD:  table data (a table cell).
• HTML 4.0 tables add a 'complex table model' that includes many new tags:
• COL: to define properties of a column.
• COLGROUP: to define properties of a group of columns.
• THEAD, TBODY, TFOOT: to enclose rows belonging to the header, body and footer respectively.
• Some major attributes of the table tags in HTML 3.0 are:
• BORDER: include a border for the table.  May specify thickness.
• CELLPADDING="n": the space between the edge and the content of the cell in number of pixels.
• CELLSPACING="n": the thickness of the dividing line.
• WIDTH=="n" or ="n%": the width of the table in pixels or percentage.
• FRAME="string": specifies which sides of the framing border should be rendered.  Values are "void" (no side), "above" (top side only), "below" (bottom side only), "box" or "border" (four sides), "hsides" (top and bottom), "lhs" (left), "rhs" (right)  and "vsides" (left and right).
• The table element may contain the CAPTION and the TR (table row) tag.
• The caption element contains the ALIGN attribute, which gives the relative location of the caption with respect to the table.  Acceptable values are "TOP", "BOTTOM", "LEFT" and "RIGHT".  A caption element may contain images or hyperlinks.
• The TR element may contain the ALIGN and VALIGN (vertical alignment), which gives the alignment of the cells in the row.  Acceptable values are "LEFT", "RIGHT" and "CENTER" for ALIGN, and "TOP", "MIDDLE", "BOTTOM" and "BASELINE" for VALIGN.
• The attributes ROWSPAN and COLSPAN are applicable to both TH (table heading) and TD (table data).  They specify the numbers of rows and columns of the current cell respectively.  The default is 1.
• The TH and TD elements have the following attributes: ALIGN, VALIGN, ROWSPAN, COLSPAN, NOWRAP (no soft line break) and BGCOLOR (background color).

III. Frames

• Frames were introduced by Netscape (from Navigator 2.0) to allow the display of several windows (frames) in the terminal.
• The elements that make this possible are FRAMESET, FRAME and NOFRAMES.
• The element FRAMESET defines the frames to be fitted into the current frame.  It may contain the elements FRAMESET, NOFRAMES or FRAME.
• The element FRAMESET should be contained in the HTML element.
• The attributes of FRAMESET are:
  • ROWS="list": the number of frames divided in rows as defined in the list.
  • COLS="list": the number of frames divided in columns as defined in the list.
• The elements of the list in the ROWS and COLS attributes can be one of the following formats:
  • n:  fixed size height (or width in COLS) in number of pixels.
• n%:  as a percentage of the available height (or width)
• n*:  as n chunks of the remaining after fixed size and percentage allocation.
• The NOFRAMES element allow the definition of the body of the html document in lieu of frames.  This is used for browsers that do not support frames.
• The frame element describes the display of individual frames and the initial contents.  It has the following attributes.
• MARGINWIDTH="n": the width of the left and right margins in pixels.
• MARGINHEIGHT="n": the height of the top and bottom margins in pixels.
• NAME = "string":  the name of the frame.  Mainly used in the target attributes of the element A.
• NORESIZE: fixed size frame.
• SCROLLING="value": options of scrolling.  Values: "yes", "no" and"auto".
• SRC="URL": URL of the initial contents of the frame.
• Note that the special values can be used in the TARGET attributes of the A element to refer to the parent frame:
• _PARENT:  parent frame.
• _SELF:  the current frame itself; same as without a target.
• _TOP: the entire window.
• _BLANK: a newly opened, unnamed window.
• The element base can be used to refer to the base targets of the frame.  Note that base should be inside the head element.  Example: <BASE TARGET="DOC">.

<HTML>
<!--  Framest1.htm -->
<HEAD>
<TITLE>An Example Of Frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
    <NOFRAMES>
    <BODY>
    Sorry!  You must get a browser that supports frames.
    </BODY>
    </NOFRAMES>

    <FRAME NAME="INDEX" SRC="index.htm">
    <FRAMESET ROWS="80, 4*, *">
        <FRAME NAME="LOGO" SRC="logo.gif">
        <FRAME NAME="BODY" SRC="body.htm">
        <FRAME NAME="TIP" SRC="tip.htm">
    </FRAMESET>
</FRAMESET>
</HTML>

<HTML>
<!--  Index.htm  -->
<HEAD>
<BASE TARGET="BODY">
<TITLE> index </TITLE>
</HEAD>
<BODY>
Points of Interests: <BR> <BR>
<UL>
<LI> <A HREF="backgd.htm">Background<BR>
<LI> <A HREF="body.htm">Body<BR>
<LI> <A HREF="note.htm">Notes<BR>
</UL>
</BODY>
</HTML>