You are one click away from owning some Great Webpage Creation Software.
Any comments: e-mail me, feedback or show your appreciation

Special Procedures & Additional Info

  1. Colours
  2. Sound
  3. Columns
  4. Special Characters
  5. Counters and Statistics
  6. Automatic Revision Dates
  7. Creating a Back Button

You'll also find more hints and tips in the FAQs section of the Guide.

  1. Colours

    2. You can specify colours using the <body> and <font color> commands. For example,

    <body bgcolor="#ffffd8" text="#000000" link="#0000ff" vlink="#ff0000" alink="#00a000">
    is used for this page, ie. a cream background, black text, blue unvisted links, red visited links and green active links.

    <font color="#00a000">green</font>
    will produce green text.

    In all cases, the colours are described using a six digit red-green-blue (RGB) hexidecimal code.
    This is slightly easier than it sounds.
    The first two digits represent the red portion of the colour, the second two for green and the last two for blue. The valid range for each colour is from 00 (dark) to FF (light). For instance, here are some common colours in hex form: 

              Colour       R G B
          Red:         ff0000
          Green:       00ff00
          Blue:        0000ff
          Magenta:     ff00ff
          Purple:      9900dd
          Light Gray:  bbbbbb
    If there is a colour, in a graphic say, and you wish to know its RGB constituents you can use a package such as the excellent Paintshop Pro to determine the split. The colour fractions will be given in decimal rather than hexidecimal. This means the colours will range from 0 to 255 rather than 00 to FF; use a scientific calculator to convert or check out my hex to decimal conversion chart which should also help you to count in hexidecimal if you're not sure how to.

    With Netscape 2 and MS Internet Explorer, you can describe colours in terms of a name, ie. "red" instead of "#FF0000". It should be noted that while Netscape supports 140 colour names, Internet Explorer supports only 16 of these. Currently no other browsers support colour names. A complete colour chart is available, telling you allowable colour names , their associated hex code and an demonstration of the colour itself.


  2. Sound

    3. You give users access to sound files in exactly the same way as giving them a link to another page. It is common to provide a hot graphic to indicate the availability of a sound file. You can use this method to offer any kind of file. Feel free to steal the button I've created in the example below.

    <a href="SOUNDS/BLAKMEAT.WAV">
    <img src="GRAPHICS/SOUND.GIF" border=0 width=36 height=28 alt="sound button">
    "I think it's time for you boys..." [64K]</A>

    sound button "I think it's time for you boys..." [64K]

    It is also possible to trigger a sound file to automatically play when a page is loaded. This is done by use of the <meta> element. Include the following line of code in the <head> section of your document.

    <meta http-equiv="refresh" content="0; url=sounds/flesh.wav">

    Replace sounds/flesh.wav with the address of your own sound file. Click here for an example.

    MS Internet Explorer and NCSA Mosaic, simplify this procedure with use of the <bgsound> element. Mosaic only supports <bgsound> to a limited extent - the Mosaic-only element <sound> can be used for more control. Netscape 3 supports neither <bgsound> nor <sound>, instead you must use the <embed> element. The following lines of code will all play background sound on MS Internet Explorer, NCSA Mosaic and Netscape 3 respectively.

    <BGSOUND SRC="sounds/blakmeat.wav">
    <SOUND SRC="sounds/blakmeat.wav">
    <EMBED SRC="sounds/blakmeat.wav" AUTOSTART="true" HIDDEN="true"></EMBED>


  3. Columns

    4. You can create the effect of newspaper-type columns by making your whole page into a table. For two columns of text, use the following code as a basis: 
    <TABLE WIDTH=100%>
<TR><TD WIDTH=50%>
Left hand column text in here.
<TD WIDTH=50%>
Right hand column text in here.
</TABLE>
    Remember, the left hand column will not wrap into the right hand column as with normal word processors; you must specify the columns' text separately.

    A new tag, <multicol>, has been developed to make the above procedure easier. It is currently only supported by Netscape 3. The code to produce the above would be:

    <MULTICOL COLS=2 WIDTH=100%>Left hand and right hand column text in here.</MULTICOL>

    An alternative method is to use the command <pre>. This uses a fixed-width font to display the text, and also shows all space-characters typed in the HTML code; thus facilitating the alignment of text.


  4. Special Characters

    5. Special characters, such as ampersand (&), less-than (<) and copyright (©) can be displayed in your document using special code. The code for special symbols is always held between an ampersand (&) and a semi-colon (;). For instance, to display the symbol <, you need to write the code &lt;. A full list of available symbols is available here.

    Meanwhile, here are some examples.

        Incidentally, a non-breaking space can be quite useful as it enables you to insert a space-character anywhere and as many times as you want; I used four in a row to indent the first line of this paragraph. Bear in mind that there are better ways than this for general spacing and alignment of text (such as tables or <pre>).


  5. Counters and Statistics

    • Customizable counters, like the one shown here, are (were) available free from WebCounter. Unfortunately WebCounter is currently not taking on new counters.
    		 [Counter]
    • If you want historical statistics and a whole host of other free stuff relating to use of your web pages, check out WebSide Story. Each site is also placed in a category (such as Web Resources) and ranked based on its popularity.
    		 CLICK HERE TO VISIT THE WORLD'S TOP 1000 LIST!
    stats for this page
    • WebTracker is another statistical service and also doubles as a customisable counter, as you can see from the graphic opposite. Regarding your visitors, Webtracker says, "You gain informative data on what browser they are using, the operating system they are running, and can even tell if they are a return visitor! Find out what days of the week are hot at your site, and find out what time of the day visitors come to your site." Webtracker is now taking on new subscribers.
    		 WebTracker Counter
    stats for this page

    If your Internet service provider (ISP) lets you run cgi-scripts on their web server, you could make your own counter based on code available at Matt's Script Archive.
  6. Automatic Revision Dates

    7. At the bottom of many pages (this one for example) you may have seen a revision date. You can use a neat bit of JavaScript to revise this date automatically. This will only work with Netscape Navigator 2+ and MS Internet Explorer 3+. To produce your automatic date, cut and paste the following code (courtesy of Cranial Software) into your HTML document:

    <script language="JavaScript">
    <!---//hide script from old browsers
    document.write( "<br>Last updated "+ document.lastModified );
    //end hiding contents --->
    </script>

    This will produce the following line of text:           Last updated 12/03/96 16:51:38
    The date and time marked in red will update automatically. Please don't write to the Guide with questions about JavaScript - you'll just get a (perfectly honest) 'I don't know' answer.
  7. Creating a Back Button

    8. By using small pieces of JavaScript (courtesy of HTMLib and Alexandr Kornew) you can create a Back button on your webpage. You can create your back button as a form-type button or as a text or graphic link by using the following code:

    Type Code Example
    Form button <FORM>
    <INPUT TYPE="BUTTON" NAME="GOBACK" VALUE="Go Back" OnCLick="retrace()">
    </FORM>
    Text link <A HREF="javascript:history.go(-1)">Go back.</A>
    <A HREF="javascript:history.go(1)">Go forward.</A>    		 Go back.
    Go forward.

    Once you've created your button, cut and paste the following JavaScript into the code for your webpage (this is only required for the form button): 

    <SCRIPT LANGUAGE="JavaScript">
<!--
     function retrace()
     {
       history.back() 
     }
// -->
</SCRIPT>
    A word of warning: Please don't write to the Guide with questions about Java or JavaScript - you'll just get a (perfectly honest) 'I don't know' answer...


Spiced up with Sizzling Jalfrezi Sizzling HTML Jalfrezi
©1997 Richard Rutter Follow Colin to his Hoard
rrutter@woodhill.co.uk
Maintenance of this page is attempted by Richard Rutter (rrutter@woodhill.co.uk) using the gorgeous HTML Notepad and the wonderful Sizzling HTML Jalfrezi.