More HTML

HTML       HTML     HTML    HTML   H...T...M...L...

Tilburg                                                    Preview

 

Advanced Features in HTML

Advanced Features use HTML code that you type or paste into a text, caption, or HTML element.

The Common Gateway Interface (CGI)

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:

bullet New tags being finalized in the upcoming HTML 3.0 proposals.
bullet Image maps (or clickable images)
bullet Video
bullet Audio

1.0    New HTML Tags

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.

2.0 Fonts

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.  

3.0 Tables

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: -

  1. A certain area is defined within the bounds of an inline image, which corresponds, to a clickable area, like a graphical button.
  2. When the user clicks somewhere in the image, the browser, like Netscape or Mosaic, returns the name of the image-mapping program, the predefined configuration file, and the coordinates of the click point to the Web server.
  3. On the server end, the image-mapping program compares the coordinates of the click point with a list the specified configuration file. If the coordinates fall within a defined area, the corresponding URL will be sent back.

Ø       You Need a GIF

 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.

Ø       Creating the Configuration File

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.

4.0 Quick Time Movies

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.

5.0   Audio

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.

6.0 Frames

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>