Lab 6 -- Advanced HTML

Objectives:

1. Learn how to construct tables
2. Learn how to implement client-side image maps
3. Learn about frames
4. Learn how to use forms
5. Learn how to include javascript within a page

Getting Started

For the most part, web pages designed to meet the requirements for lab 5 would be very boring, so in this lab we are going to add new items and features to your page.

Tables

As you may have noticed in lab5, its hard to control formatting on your pages. Text and graphics may move around depending on the size of the browser window unless you specifically tell the browser where to place things. Tables are one such way to accomplish this because they allow you specify the location of an element by row and column. Tables are commonly used on many popular web sites, since virtually every browser supports them. Tables do not offer random access so you must build them from the top-left to the bottom-right corner.

Typically a table will be created as follows:

<TABLE>
  <TR> 
     <TD> Title </TD>
     <TD> Author </TD>
  </TR>
  <TR> 
     <TD> Advanced Programming in the UNIX Environment </TD>
     <TD> Stevens </TD>
  </TR>
  <TR> 
     <TD> Common LISP: The Language </TD>
     <TD> Steele </TD>
  </TR>
  <TR> 
     <TD> The C Programming Language </TD>
     <TD> Kernighan and Ritchie </TD>
  </TR>
</TABLE>

As you can see a table is made up of three tags <TABLE>, <TR>, and <TD>. The <TABLE> tag indicates the start of a table </TABLE> indicates the close of a table. Each row is started by the <TR> tag and ended by the end tag </TR> The number of columns is determined by how many pairs of <TD> and </TD> are inside of the row delimiters. In the example above there are two columns in the table.

Here is the example table:
Books for sale:

Title	Author
Advanced Programming in the UNIX Environment	Stevens
Common LISP: The Language	Steele
The C Programming Language	Kernighan and Ritchie

In the table above, one change was made to the html showed to you earlier. A border was added around the table to distinguish it from the rest of the page. The border was added by declaring the table like this:

<TABLE BORDER=1>

BORDER is a parameter that specifies how thick the border around the cells is.

Besides adding a border, there are other options that can be used in a table. One tag that you may be familiar with is BGCOLOR, it can be used to set the background color of the table. There are also ways to control the width of a table. The WIDTH option can be used two ways, the table size can be specified as a percentage of the total window size (WIDTH="67%") or it can be specified as the pixel width (WIDTH="100"). There are also other attributes which can control cell spacing and padding, so a table could be declared similar to this:

<table bgcolor="#800000" width="43%" height="70%" border="1" cellspacing="15"
cellpadding="8" >

  NOTE:  Height may not be supported by all browsers.

There are also options to change the row and column properties. Besides the ability to change the background color, you can adjust the alignment within a row or column. The ALIGN option changes the horizontal alignment, and the options are RIGHT, CENTER, and LEFT. VALIGN changes the vertical alignment within the column, and the options are TOP, CENTER, BOTTOM, and BASELINE.

For example:

<TABLE>
  <TR BGCOLOR="DCDCDC" >
     <TD ALIGN="RIGHT"> Title</TD>
     <TD ALIGN="LEFT"> Author </TD>
  </TR>
  <TR>
     <TD> Much Ado About Nothing </TD>
     <TD> Shakespeare </TD>
  </TR>
  <TR>
     <TD> Hamlet </TD>
     <TD> Shakespeare </TD>
  </TR>
  <TR>
     <TD> As I Lay Dying </TD>
     <TD> William Faulkner </TD>
  </TR>
</TABLE>

In all of the examples that you have seen thus far, the cells have been filled with text. In reality the cells can be filled with text, graphics, and other legal html. One of example of using a table combined with images is the Georgia Tech homepage which uses a table to build a composite image from the individual images.

Client-Side Image Maps

In lab5 you learned how to use an image as a link. This works well when you want to have one link, but it cannot handle multiple links. There are two solutions, split the image into multiple parts and use a table to recreate it or use an image map. Image maps work by using the location of a mouse click within an image to determine which action to take. There are two types of imagemaps server-side and client-side. When a server-side map is used the coordinates are sent back to the server for processing. In a client-side image map the browser figures out which link to use for a given location within an image. One example of an image map is the Tech homepage. The menu choices on the right of the screen are linked using an image map.

To use an image map you need to things, an image and the coordinates for the links. You can get the coordinate from a variety of sources, many freeware image programs will allow you to determine the coordinates. To start out simply declare the image as follows:

<img src="name_of_image" usemap="#map-name-goes-here">

Somewhere within your web page you must include the map definition. Below is an example of an image map. NOTE: The coordinates for the image start at the top-left corner (0,0) and run to image size in the bottom right.

<IMG BORDER=0 SRC="images/pic.jpg" USEMAP="#image">
  Click on image to access different soccer links.

  <MAP NAME="image">
    <AREA SHAPE="RECT" COORDS="12,53,49,233" HREF="http://www.mlsnet.com">
    <AREA SHAPE="RECT" COORDS="249,103,288,213" HREF="http://www.us-soccer.com">
    <AREA SHAPE="RECT" COORDS="516,63,586,141" HREF="http://www.fifa.com">
    <AREA SHAPE="RECT" COORDS="89,153,127,191" HREF="http://www.uefa.org">
    <AREA SHAPE="CIRCLE" COORDS="547,40,20" HREF="bio.html">
    <AREA COORDS="0,0,639,349" NOHREF>
  </MAP>

In the above map, you will notice that the regions can be specified as rectangles and circles. If the user moves the mouse over the point (45, 130) then the mlsnet link will be used. The circle region is can actually be an ellipse depending on what you choose to be the coordinates of the region. Below you will see the order of the coorindates for each type of region.

    <AREA SHAPE="RECT" COORDS="TOP_X,TOP_Y,BOTTOM_X,BOTTOM_Y" HREF="">
    <AREA SHAPE="CIRCLE" COORDS="CENTER,X_RADIUS,Y_RADIUS" HREF="">

Frames

Frames provide another way to control the layout of your page. Frames allow a page to be split into different sections. Each section is constructed from its own HTML, so the files are smaller and can be independent of each other. The frames can also be linked so that a navigation bar or persistent header will all appear within the browser window. This is the only mention of frames within this lab, but if you are interested in learning more, there are many tutorials that can be found on the web.

NOTE: Frames can be a very beneficial on a page when they are used correctly; however, it's very easy to use frames in a manner which detracts from the quality of a site.

Forms

Besides presenting content, you can also use your web site to get information from the people who visit your site. To give your visitors a chance to enter information, a form must be used. Just like the forms we fill out in real life (credit card applications, job applications, degree petitions, etc) the fields within a form must be declared by both name and type of input. The different types of input are checkboxes, pull-down menus, radio buttons, or text boxes. The types are used for different purposes, with checkboxes, menus, and radio buttons being used for situations when the choices need to be limited, and text boxes or areas being used for free responses. In addition to different types of input, a submit button must be included, so that the user can tell the browser to send the information back to server.

Forms cannot be used by themselves because the server must have a program or script to interpret the information sent back. While at first this might seem difficult, a standard called Common Gateway Interface (CGI) exists to make sending and receiving information easier. Although it does support individual cgi scripts, the Prism web server does support mail forms. The mailform script takes the information sent back by the browser and sends it to an email address. The mailform documentation can be found here on the prism web server. The code below creates a sample form. Notice how an action is declared within the <FORM> tag, action specifies which program should be run on the server when the information is submitted. The sample form below includes hidden fields which allow for information to be passed back to server without being displayed to the user, but the user can find this information in the page source.

Note: The VALUE of the mform-response input should be replaced with the full address to the page you want the user to be sent to once they click "send". This could be a thankyou page or your home page.

<FORM METHOD=POST action="/cgi-bin/mailform">
<INPUT TYPE=HIDDEN NAME="mform-email" VALUE="cs1311x@prism.gatech.edu">
<INPUT TYPE=HIDDEN NAME="mform-subject" VALUE="Test Data">
<INPUT TYPE=HIDDEN NAME="mform-response" VALUE="http://0/thankyou.html">
<INPUT TYPE=HIDDEN NAME="mform-encoding" VALUE="text">

Name: <INPUT NAME="NAME">

Favorite class:
<SELECT NAME="class">
<OPTION>Not selected
<OPTION>CS-- The Light Side
<OPTION>CS-- The Dark Side
<OPTION>Chemistry
<OPTION>Calculus
<OPTION>Other
</SELECT>

Comments:<br>
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=60 >Any default text here.</TEXTAREA>

<INPUT TYPE=SUBMIT VALUE="Done"> or
<INPUT TYPE=RESET VALUE="Clear">
</FORM>

Here is the sample form defined above:

Javascript

Forms allow your page to interact with the user a little, but they are still somewhat static. There are several ways to make your page more interactive, but as of now no standard exists to accomplish this. Javascript is one of the ways used by many sites, to make pages more interactive. Javascript is a scripting language similar to JAVA, but it does not require an interpreter to run within the browser, so the code can be put directly within a web page. Javascript can be used to show the date and time on a web page, change the menu image depending on the location of the mouse (without a mouse click), or many other uses. Since Javascript is relatively new and not standardized not all browsers may support it. To prevent problems with the older browsers you must declare and comment out the code in the manner below.

  <SCRIPT TYPE="text/javascript">


   
<!--
function highlight_with_arrow (img,action) {
  if(document.images) {
    if(action == 1) {
      document.images[img].src = 'sarrow_.gif';
    } else {
      document.images[img].src = 'noarrow.gif';
    }
  }
}
//-->
  

</SCRIPT>

What you need to turnin:

For this lab, you need to modify you prism page to include the following improvements. Some of these may already be on your web page from lab 5.

Meet all requirements of lab 5
Create a significant table (a least 4 rows and 2 columns) for use on your site (Your schedule is suggested).
Create a client-side image map using an image of your choice with at least four links. NO OFFENSIVE IMAGES WILL BE TOLERATED!
Create a mailform, so that visitors to your site can send you feedback. Be sure to use at least three different types of input and include the SUBMIT and reset buttons. Your mailform should send all comments to your prism accounts. You may put have a response page such as a thankyou page. If you do this, make sure to link back to your home page from the response page

Please place all the aspects of this lab are on the same web page.
The order you put them on the page doesn't matter, though. The one exception to this is your "thankyou" page for your mailform, should you choose to use one.

Use colors, have fun and experiment!. You'll learn more (and hopefully have more fun) the more you play around with HTML.
If you can't figure out something, try visiting http://www.geocities.com/~annabella/html.html or searching html topics on the Internet.

Turnin Information

Lab 9
Due: 8am Monday June 25th
Submission Information: Leave your web page in the public_html folder. (This means you don't actually do anything but leave it there in your public_html folder.)

DO NOT MODIFY YOUR PAGE(S) UNTIL A POST APPEARS ON .ANNOUNCE STATING THAT GRADING HAS FINISHED. ANY CHANGES MADE AFTER THE DEADLINE WILL RESULT IN THE LAB BEING CONSIDERED NOT SUBMITTED AND WILL RESULT IN A ZERO.