[*]  [Home page]  [Basic HTML]  [Forms]  [CGI scripts]  [New HTML]  [*]

[Under Construction]

New HTML tags

© Mike Smith M.A.Smith@brighton.ac.uk University of Brighton UK.

Contents

 [*] Introduction to new HTML tags
 [*] Colour
 [*] Specifying a colour by name
 [*] Specifying a colour by RGB value
 [*] Colours for text, links, etc.
 [*] Frames
 [*] Frame attributes
 [*] Nesting frame windows
 [*] Targeting URL contents



        ------------------------------------------------------------
        Warning if you are not using a browser that supports frames
                such as Netscape 2.0 or later then this page
                 will probably be very difficult to read.
        ------------------------------------------------------------

Preface

The following symbol is used in this document:

[Try it]

It is a hypertext link to a web page containing examples of the HTML
features under discussion. The reader can if they wish modify the text to
try out their own ideas of style and formatting.

The best way of using this feature is to open a new window containing this
link. Then after trying out the features close the window to continue
browsing the original document.
In Netscape this is achieved by moving the cursor over the symbol and
pressing the left mouse button. This selects a series of options contained
in a pop up window. Select the option to start a new window / browser with
this link.

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Introduction to new HTML tags

These WWW (World Wide Web) pages are written using a non standard form of
HTML (HyperText Markup Language) used by web browsers developed by the
Netscape corporation.

It is not yet clear whether other manufacturers will also support these
features. However as Netscape have 70%+ of the market this consideration
may prove academic.

Browsers capable of displaying this information include:

   * Netscape 2.0
   * Netscape 2.0 Gold

In describing these new feature of HTML the aim has been to concentrate on
the more widely used and useful features. However, in many ways this still
remains a personal selection.
                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Colour

The following are some of the formatting tags available in HTML to specify
colour in a document.

[Index]  Specifying a colour by name

The formatting tag <FONT> with the element COLOR="red" is used to change
selectively the colour of the text of the document to red. This temporary
colour change terminates on the </FONT> tag.

 Formatted text       HTML markup required
                       *
                       <FONT COLOR="blue">Red</FONT>*
 * Red* Green* Blue*   <FONT COLOR="green">Green</FONT>*
                       <FONT COLOR="blue">Blue</FONT>*


Possible values for a named colour are: black [###], maroon [###], green
[###], olive [###], navy [###], purple [###], teal [###], gray [###],
silver [###], red [###], lime [###], yellow [###], blue [###], fuchsia
[###], aqua [###], white [###].

[Try it]

[Index]  Specifying a colour by RGB value

A general colour is specified in terms of the three primary colours red,
blue and green. Each primary colour is defined as a two digit Hexadecimal
number that representing the strength of that primary colour.

In this specification hexadecimal 00 means 0% of the colour and hexadecimal
FF means 100% of the colour.

For example, to specify red the hexadecimal number FF0000 is used. In this
number:

   * The first two digits FF define 100% of red
   * The second two digits 00 define 0% of green
   * The third two digits 00 define 0% of blue

 Formatted text            HTML markup required
                            *
                            <FONT COLOR="#FF0000">Red</FONT>*
 * Red* Green* Blue*        <FONT COLOR="#00FF00">Green</FONT>*
                            <FONT COLOR="#0000FF">Blue</FONT>*


                            *
                            <FONT COLOR="#FFFF00">Yellow</FONT>*
 * Yellow* White* Purple*   <FONT COLOR="#FFFFFF">White</FONT>*
                            <FONT COLOR="#FF00FF">Purple</FONT>*


[Try it]

[Index]  Global colours of the text, links, etc.

Additional elements to the tag <BODY> allow a user to specify global
colouring of the web page. Elements of this tag include:

   * BGCOLOR=
     Specifies the background colour of the document.
   * TEXT=
     Specifies the colour of the text in the document.
   * LINK=
     Specifies the colour of the hypertext links in the document.
   * ALINK=
     Specifies the colour of the link when activated by your mouse.
   * VLINK=
     Specifies the colour of the visited hypertext links in the document.

For example, to create a web page with a background colour of green normal
text in red and links in blue is specified with the following elements to
the tag <BODY>

 <BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF">

The document may also be given a background image. The selected image is
tiled across the document and then the text of the document is written over
the image(s). It is thus important to choose a background image that will
not be too distracting for the reader. The background image is achieved by
adding a background attribute to the BODY markup tag. For example:

 <BODY BACKGROUND="backgrd.jpg">

[Try it]

Remember, the ability to display the colour depends on the colour depth of
the monitor used by the viewer. Many people will only be able to display
256 distinct colours, and some will only have a black and white display.

For viewers with a monitor with a limited colour depth other colours will
be displayed by dithering. A process which simulates the un-displayable
colour, by creating a pattern of dots in colours which when viewed at a
distance will fool the eye into seeing them as a single new colour.
Unfortunately this reduces the resolution of the displayed area.
                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Forms

A new element to the <FORM> tag allows a browser to transmit the contents
of a file back to the server. using this facility a browser can up-load a
file to the server. For example:

 Generated form  HTML markup required
                 <FORM ENCTYPE="multipart/form-data"
                       ACTION="URL"
                       METHOD=POST>
 Send file name: Send file name:<BR>
                   <INPUT NAME="message"
                          TYPE="file"> <BR> <BR>
                   <INPUT TYPE="submit"
                          VALUE="Send file to server">
                 </FORM>


                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Frames

A web page may be split into several individual frame windows. Each frame
contains the result of accessing an URL.

The tags <FRAMESET> </FRAMESET> form a container, for URL's which will be
displayed in individual windows in a single web browser page. The tags
<FRAMESET> <FRAMESET> replace the normal body tags <BODY> </BODY>. The
elements of the tag define the size and shape of these frame windows.

For example, the tag <FRAMESET COLS="30%,70%"> specifies that the frameset
will contain two frames, tiled in columns, with the first frame occupying
30% of the browser window, and the second frame 70%.

 View result                           Complete HTML markup required
                                         <HTML>
                                          <HEAD>
                                           <TITLE>Page with frames</TITLE>
                                          </HEAD>
 To see the result of executing the      <FRAMESET COLS="30%,70%">
 HTML in the RHS table entry access      <FRAME SRC=fr-txt1.html >
 the link in a new browser window.       <FRAME SRC=fr-txt2.html >
                                         </FRAMESET>
                                         </HTML>


It is usual to add the tags <NOFRAMES> </NOFRAMES> so that a browser that
does not support frames will at least see something. As all unrecognised
tags are ignored, the viewer will be presented with the remaining text. A
browser that supports frames, will ignore this text. For example:

   <HTML>
    <HEAD>
     <TITLE>Page with frames</TITLE>
    </HEAD>
   <FRAMESET COLS="30%,70%">
    <NOFRAMES>Sorry does not support frames</NOFRAMES>
    <FRAME SRC=fr-txt1.html >
    <FRAME SRC=fr-txt2.html >
   </FRAMESET>
   </HTML>


[Try it]

For example, the tag <FRAMESET ROWS="30%,30%,40%"> specifies that the
frameset will contain three frames, tiled in rows, with the first frame
occupying 30% of the browser window, the second frame also 30% and the
final frame 40%.

 View result                           Complete HTML markup required
                                         <HTML>
                                          <HEAD>
                                           <TITLE>Page with frames</TITLE>
                                          </HEAD>
 To see the result of executing the      <FRAMESET ROWS="30%,30%,40%">
 HTML in the RHS table entry access      <FRAME SRC=fr-txt1.html >
 the link in a new browser window.       <FRAME SRC=fr-txt2.html >
                                         <FRAME SRC=fr-txt3.html >
                                         </FRAMESET>
                                         </HTML>


For example, the tag <FRAMESET COLS="30%,30%,40%"> specifies that the
frameset will contain three frames, tiled in cols, with the first frame
occupying 30% of the browser window, the second frame also 30% and the last
frame 40%.

 View result                           Complete HTML markup required
                                         <HTML>
                                          <HEAD>
                                           <TITLE>Page with frames</TITLE>
                                          </HEAD>
 To see the result of executing the      <FRAMESET COLS="30%,30%,40%">
 HTML in the RHS table entry access      <FRAME SRC=fr-txt1.html >
 the link in a new browser window.       <FRAME SRC=fr-txt2.html >
                                         <FRAME SRC=fr-txt3.html >
                                         </FRAMESET>
                                         </HTML>


[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Frame Parameters

The attributes to a <FRAME> are:

   * SRC=
     The URL of the document to be displayed in the frame.
   * NAME=
     The name of the frame. This is required so that a URL can be targeted
     into the frame window.
   * MARGINHEIGHT=
     Specifies in pixels the margin width of the frame.
   * MARGIWIDTH=
     Specifies in pixels the margin height of the frame.
   * SCROLLING=
     NO - No scroll bars. YES - Scroll bars, AUTO - Let the browser choose.
     The default is AUTO.
   * NORESIZE
     Prohibit the person browsing the document re-sizing the frame window.

The attributes to <FRAMESET COLS= > and <FRAMESET ROWS= >are:

   * "value%"
     A relative size as a percentage.
     For example: "10%,40%,50%" first frame 10% of total size, second frame
     40% of total size, third frame 50% of total size.
   * "value*"
     A relative size.
     For example: "*3,*" would allocate 3/4 of the frame size to the first
     frame the rest to the second.
   * "value"
     An absolute size in pixels.
     For example: "50,*" would allocate 50 pixels to the first frame, the
     remaining space to the second frame.

[Index]  Nesting frame windows

The <FRAMESET> tag may be nested to give more complex layouts. For example,
for a layout of two columns, with the first column split into two rows, and
the second column split into three rows the layout is as follows:

 View result                           HTML frame markup required
                                         <HTML>
                                          <HEAD>
                                           <TITLE>Page with frames</TITLE>
                                          </HEAD>
                                          <FRAMESET COLS="50%,50%">
                                            <FRAMESET ROWS="50%,50%">
                                              <FRAME SRC=fr-txt1.html >
 To see the result of HTML on the RHS         <FRAME SRC=fr-txt1.html >
 open a window with this link in a new      </FRAMESET>
 browser window.                            <FRAMESET ROWS="40%,20%,40%">
                                              <FRAME SRC=fr-txt1.html >
                                              <FRAME SRC=fr-txt2.html >
                                              <FRAME SRC=fr-txt3.html >
                                            </FRAMESET>
                                          </FRAMESET>
                                         </HTML>


[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Targeting windows for output

A frame window can contain links which when accessed will cause their
content to be displayed in another window. For example:

 View result                  Complete HTML markup required
                                <HTML>
                                 <HEAD>
                                  <TITLE>Page with targeting</TITLE>
 To see the result of            </HEAD>
 executing the HTML in the      <FRAMESET COLS="30%,70%">
 RHS table entry access the       <FRAME SRC=fr-txt11.html >
 link in a new browser            <FRAME SRC=fr-txt12.html NAME="results">
 window.                        </FRAMESET>
                                </HTML>


The <FRAME> tag is named with NAME element. An <A HREF="URL"> tag may have
the addition element TARGET to name the frame window into which the file
described by the URL is to be loaded.

 Partial contents of file     Partial contents of file
 fr-txt11.html                fr-txt22.html
 <UL>
 <LI><A HREF="fr-txt21.html"
        TARGET="results">
        Display A</A>
 <LI><A HREF="fr-txt22.html"  <H2>Display B</H2>
        TARGET="results">     B is the second letter
        Display B</A>         of the alphabet.
 <LI><A HREF="fr-txt23.html"
        TARGET="results">
        Display C</A>
 </UL>


[Try it]

Special targets for URL's. For example:

 <A HREF="All_window" TARGET="_top">all of window </A>

will target the URL all_window to fill the browser window.

Other reserved targets include:

   * TARGET="_blank"
     A new empty window. Neat way of spawning a new window from within
     HTML.
   * TARGET="_self"
     The same window as the anchor.
   * TARGET="_parent"
     The parent of the frame. A nice way of implementing back.
   * TARGET="_top"
     Targets the whole of the browser window. A nice way of implementing an
     escape from a framed window.

        ------------------------------------------------------------
        Warning if you are not using a browser that supports frames
                such as Netscape 2.0 or later then this page
                 will probably be very difficult to read.
        ------------------------------------------------------------
---------------------------------------------------------------------------
The material in these WWW page(s) is copyright © M.A.Smith August 1995
Last modified 6 March 1996