The Common Gateway Interface (CGI) is a standard for interfacing external applications with information servers, such as HTTP or Web servers. A plain HTML document that the Web daemon retrieves is static, which means it exists in a constant state: a text file that doesn't change. A CGI program, on the other hand, is executed in real-time, so that it can output dynamic information.
Some of the advanced features may include:
![]() | New tags being finalized in the upcoming HTML 3.0 proposals. |
![]() | Image maps (or clickable images) |
![]() | Video |
![]() | Audio |
Two basic background features available in Netscape 1.1 are the ability to change the background color from gray to something else and to change the background to a totally different pattern. Both add an argument to the tag.
First, to change the background color: -
Ø Add the "bgcolor" argument as shown in the following example:
BODY BGCOLOR="#rrggbb">
document here
/BODY>
Replace the rrggbb with the corresponding hexadecimal values
representing the colors Red, Green, and Blue, which combine to create
the particular color for the background. Hexadecimal values range
from 00 to FF for each color.
Examples:
<BODY BGCOLOR="#FF0000"> Bright Red
<BODY BGCOLOR="#FFFF00"> Bright Yellow
<BODY BGCOLOR="#FFFFC0"> Light Yellow
<BODY BGCOLOR="#FFA0FF"> Light Purple
<BODY BGCOLOR="#000000"> Black
Note: If the colors you use are too dark, the text will be hard to read unless you change the color of the text as well.
Ø The other notable background feature is to be able to change the pattern of the background itself. Supply the name of a suitable GIF image, and Netscape 1.1 will tile the images to cover the window's background.
Example:
BODY BACKGROUND="textures/cobblestone.gif">
ocument here
/BODY>
This fragment would find the image "cobblestone.gif" in the "textures" subdirectory and use that as a background pattern.
Note:-the additional image needs to be sent to the browser Netscape also uses extra computing power to do the background so using background patterns tend to slow down the overall viewing of the page.
With Netscape, you have some control over the font sizes in a document. Example:
font size="+3">B</font>ig
font size="+2">F</font>irst
font size="+1">L</font>etters<p>
<font size="-1">and they're getting smaller!</font><p>
font size="-2">and smaller!</font>
Looks like:
Big First Letters
and they're getting smaller!
and smaller!
Ø Notice that the sizes can be made bigger or smaller relative to the default basefont size. You can also use an absolute value (e.g., use "6" instead of "+2"). The basefont (the font size in the Netscape browser) has a default value of 3; it can range from 1 through 7.
In Netscape, the following HTML code:
<table border=2>
<tr>
<th>
<th>Col1
<th>Col2
<th>Col3
</tr>
<tr>
<th>Row1
<td>row1,col1
<td>row1,col2
<td>row1,col3
</tr>
<tr>
<th>Row2
<td>row2,col1
<td>row2,col2
<td>row2,col3
</tr>
<caption align=bottom>Figure 1.</caption>
</table>
Will result in the following:
|
Col1 |
Col2 |
Col3 |
Row1 |
Row1,col1 |
row1,col2 |
row1,col3 |
Row2 |
Row2,col1 |
row2,col2 |
row2,col3 |
Figure 1. |
Ø The <table> tag encapsulates everything that is defined to be within the table. The <tr> defines each row; <td> is the data within the row. <th> is used with column and row headings and works exactly like <td> except it appears in boldface. The <caption> defaults to the top so the "align=bottom" must be explicitly stated.
4.0 Imagemaps
Creating imagemaps, or clickable images, is not very difficult.
Ø Creating An Imagemap: -
You need to have an inline GIF image that serves as the picture you will want to use as a background for the clickable image. Then imagine putting transparent buttons on top of this picture.
Example;
Assume we have a 100 by 100 pixel GIF image ‘mysquare.gif’
This can be uploaded and kept with your other images on uhunix.
The configuration file for use with an imagemap is simply a plain text file with a shape, coordinates, and a URL.
Create a configuration file called mysquare.conf.:- It might look like this:
default http://www2.hawaii.edu/~ward/nothing.html
rect (1,1) (50,50) http://www2.hawaii.edu/~ward/topleft.html
rect (50,1) (100,50) http://www2.hawaii.edu/~ward/topright.html
rect (1,51) (50,100) http://www2.hawaii.edu/~ward/bottomleft.html
rect (51,51) (100,100) http://www2.hawaii.edu/~ward/bottomright.html
ü The first line has a special code named "default" which has the URL to execute if a returned click point lies outside of everything else in the list
ü The next four lines define four quarters of the square. Each of the lines start with a shape, like "rect" which corresponds to a rectangular shape, coordinates of the rectangle (that is, the upper left and lower right points), and the full URL to execute if the click falls in that rectangular area.
ü To determine the coordinates, you will either need to have a program that can tell you exactly where your mouse pointer is on the image (like Photoshop or other graphics program).
ü The only other thing to do is to be able to call it from one of your pages.
To do that, you'd use an anchor that looks something like this:
<a href="/cgi-bin/htimage/~ward/mysquare.conf"> <img src="mysquare.gif" ismap></a>
The "cgi-bin" in the anchor's URL implies that the next argument is a binary program, script, or application, in this case, the program called "htimage" which interprets imagmaps. The rest of it is the standard URL path to the configuration file (which in this case, resides in my "public_html" directory). The inline image tag is the same as it normally is except for the inclusion of an "ismap" option.
Ø Creating A Client Side Imagemap
Another way to do image maps is to use what is called "Client Side Imagemaps" which don't require a configuration file or a CGI. The codes are part of the HTML page and read by the browser.
The key to using QuickTime movies with the Web is to make sure that they can be transferred to Netscape correctly.
To do this, you must have MoviePlayer 2.0 or Movie Converter. These should be available with the QuickTime kit.
Then, to make sure that you can upload the movie to uhunix and have it download and play on the user's computer, you must re-save the file with the settings shown below:
The important areas are the radio button to make the movie "self-contained" and the check box so that it can be "playable on non-Apple computers." You should have a ".mov" suffix at the end so that the browser understands it to be a QuickTime movie and you should upload (like any binary file) as raw data using Fetch. The user will also need Movie Player or similar to view the images.
Note: Movies should be the right length so as to ease downloading of the large files. Make sure that when you create the link that the user knows it's a QuickTime movie that is to be downloaded.
Audio standards differ greatly depending on the platform of the user.
Macintosh users are familiar with the AIFF standard; Windows users have the WAV; and Sun users have uLaw.
The Sun audio
Is a format that can be played on most platforms.
A simple way to include audio is to start with a Mac System 7 sound file. If you have a Mac with a microphone and System 7, you can use the Sound Control Panel and add a sound. By opening the System File, you can copy that sound to another folder. Then, using a program like ULaw, you can open the System 7 Sound File (sfil) and convert it to a Sun audio file. It normally has a suffix of ".au" to indicate it as an audio file. Upload to uhunix as raw data using Fetch. Again, the user should have some audio player specified in Netscape, like SoundMachine, which will read several different audio formats.
The use of Frames in a document is particular to the Netscape Navigator browser.
7.0 Inline Links
One way to add a link to your page is the Add Link element button. This
places the link on its own line of text, though, and sometimes you might want to
embed a link in a paragraph.
To do that, you must type or paste the link code into the text or caption
element.
The
HTML code for a link looks like this:
<A HREF="URL">link text</A>
where "URL" is any valid Internet address, such as "http://www.yourcompany.com,"
and link text is the word or phrase that you want to be clickable. The URL is
always enclosed by double quotes, but the link text is not.
8.0
Text Enhancements
You
can also add color to your text and change its font. For these enhancements,
you'll need to enter your text in an HTML element, not a text or caption
element. Text entered in an HTML element will be in the user's default browser
font (usually black Times at Size 3) unless you also add some HTML to change it.
Font size ranges from 1 (very small) to 7 (very large).
You may combine FACE, SIZE, and COLOR attributes in the same <FONT> statement.
Color is specified in two ways:
<FONT
COLOR="red">some text</FONT>, or
<FONT COLOR="#FF0000">some text</FONT>
Here are
15 of the 16 colors that you can specify by name (white is also available but
doesn't show up against the white background):
maroon red yellow olive lime
green cyan teal blue navy
fuchsia purple black silver gray
The
second method specifies color by its hexadecimal RGB code.
9.0
Hit Counters
A
hit counter displays the number of times a page has been visited. It's just a
link to an external program that does the work.
Copy and paste this HTML code into an HTML element on the page you want to
count:
<IMG SRC="/cgi-bin/newcount?netimp&width=5&font=digital"
ALIGN=bottom><BR>