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:

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
* Red* Green* Blue* 
 *
 <FONT COLOR="red">Red</FONT>*
 <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:

Formatted text HTML markup required
* Red* Green* Blue* 
 *
 <FONT COLOR="#FF0000">Red</FONT>*
 <FONT COLOR="#00FF00">Green</FONT>*
 <FONT COLOR="#0000FF">Blue</FONT>*
* Yellow* White* Purple* 
 *
 <FONT COLOR="#FFFF00">Yellow</FONT>*
 <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:

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
Send file name:


 
<FORM ENCTYPE="multipart/form-data" 
      ACTION="URL"
      METHOD=POST> 
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
To see the result of executing the HTML in the RHS table entry access the link in a new browser window. 
  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
  <FRAMESET COLS="30%,70%">
  <FRAME SRC=fr-txt1.htm >
  <FRAME SRC=fr-txt2.htm >
  </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.htm >
   <FRAME SRC=fr-txt2.htm >
  </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
To see the result of executing the HTML in the RHS table entry access the link in a new browser window. 
  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
  <FRAMESET ROWS="30%,30%,40%">
  <FRAME SRC=fr-txt1.htm >
  <FRAME SRC=fr-txt2.htm >
  <FRAME SRC=fr-txt3.htm >
  </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
To see the result of executing the HTML in the RHS table entry access the link in a new browser window. 
  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
  <FRAMESET COLS="30%,30%,40%">
  <FRAME SRC=fr-txt1.htm >
  <FRAME SRC=fr-txt2.htm >
  <FRAME SRC=fr-txt3.htm >
  </FRAMESET>
  </HTML>

Try it

Index Frame Parameters

The attributes to a <FRAME> are:

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

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
To see the result of HTML on the RHS open a window with this link in a new browser window. 
  <HTML>
   <HEAD>
    <TITLE>Page with frames</TITLE>
   </HEAD>
   <FRAMESET COLS="50%,50%">
     <FRAMESET ROWS="50%,50%">
       <FRAME SRC=fr-txt1.htm >
       <FRAME SRC=fr-txt1.htm >
     </FRAMESET>
     <FRAMESET ROWS="40%,20%,40%">
       <FRAME SRC=fr-txt1.htm >
       <FRAME SRC=fr-txt2.htm >
       <FRAME SRC=fr-txt3.htm >
     </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
To see the result of executing the HTML in the RHS table entry access the link in a new browser window. 
  <HTML>
   <HEAD>
    <TITLE>Page with targeting</TITLE>
   </HEAD>
  <FRAMESET COLS="30%,70%">
    <FRAME SRC=fr-txt11.htm >
    <FRAME SRC=fr-txt12.htm NAME="results">
  </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
fr-txt11.htm		 Partial contents of file
fr-txt22.htm		 
<UL>
<LI><A HREF="fr-txt21.htm" 
       TARGET="results">
       Display A</A>
<LI><A HREF="fr-txt22.htm" 
       TARGET="results">
       Display B</A>
<LI><A HREF="fr-txt23.htm" 
       TARGET="results">
       Display C</A>
</UL>
 
<H2>Display B</H2>
B is the second letter 
of the alphabet.

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:

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