Lab 3: Advanced HTML

In Lab 2, you learned the basics of HTML. This week you get to experiment with three of its more advanced features: tables, forms, and Javascript. If you want to do serious web page design, you'll need to know a lot more than what's covered in these labs, primarily HTML and CSS for layout, and Javascript for dynamic behavior. Resources you might look at include W3schools.com for HTML, CSS and Javascript, CSS Zen Garden to see what can be done with CSS, and freewebtemplates.com for pre-built layouts.

Part 1: Tables
Part 2: Forms
Part 3: Javascript
Part 4: Submitting your work

In this lab, we will highlight instructions for what you have to submit in a yellow box like this one.

Basically, tables are boxes, divided into rows and columns, that help you organize and display content on your web page. If the information you want to display is too complicated for a list, or you can't get a group of pictures to align properly, a well-designed table may be the solution.

Here's a table with two rows and three columns
Column 1	Column 2	Column 3

After we cover the basic tags, we'll show some of the options that let you customize your tables.

Here is one of the most basic tables you can create:

1	2	3
4	5	6
7	8	9

It doesn't look much like a table, since it doesn't have borders, headings, or shading, but it is a good place to start since it doesn't require any extra attributes or tags.

Here's the HTML code that created it:

<TABLE>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> </TR>
<TR> <TD>4</TD> <TD>5</TD> <TD>6</TD> </TR>
<TR> <TD>7</TD> <TD>8</TD> <TD>9</TD> </TR>
</TABLE>

Each number is surrounded by <TD></TD> ("table data"). This creates a cell. Every three of these cells are surrounded by <TR></TR> ("table row"). This creates a row. The whole thing is surrounded by <TABLE></TABLE>. The browser will count the number of rows and the number of columns in the longest row and make a table of the appropriate size. In the final table, every row will have as many columns as the longest row regardless of how many you typed in. Unspecified cells will be blank.

The <TABLE> tag

Every table must be surrounded by the <TABLE> and </TABLE> tags. Whenever the browser encounters a table, it reads in everything between these two tags before deciding how to arrange and display it. If you forget either one of them, your table will not show up at all!

The <TABLE> tag has quite a few attributes. None are required; here are a few of the more useful ones:

A note on RGB colors

The <TR> tag

Every row you create within your table must be surrounded by <TR> and </TR> tags. Here are some of the attributes you can include:

The <TD> tag

All text within your table should be surrounded by <TD> and </TD> (or <TH> and </TH>). These tags create the actual data cells, and thus have a lot of optional attributes to help you customize the cells:

Other table tags

Advanced Example

Here is a sample table created to display a schedule:

Notice that it uses many of the attributes we described above, especially ROWSPAN and COLSPAN. The HTML code that created this table is listed below. If you examine this code closely, you'll notice that the fourth row (11:00) seems to be missing a few cells. This is because the third row has two cells with ROWSPAN=2, which means they each automatically take up a cell in the fourth row as well.

<TABLE BORDER=1 CELLPADDING=5>

    <CAPTION><H3>Schedule</H3></CAPTION>

    <TR BGCOLOR=SILVER>
	<TH BGCOLOR=BEIGE>Time</TH>
	<TH>Monday</TH>
	<TH>Tuesday</TH>
	<TH>Wednesday</TH>
	<TH>Thursday</TH>
	<TH>Friday</TH>
    </TR>

    <TR ALIGN=CENTER VALIGN=MIDDLE>
	<TD BGCOLOR=BEIGE>9:00</TD>
	<TD>MAT 104</TD>
	<TD></TD>
	<TD>MAT 104</TD>
	<TD></TD>
	<TD>MAT 104</TD>
    </TR>

    <TR ALIGN=CENTER VALIGN=MIDDLE>
	<TD BGCOLOR=BEIGE>10:00</TD>
	<TD></TD>
	<TD ROWSPAN=2>PHI 201</TD>
	<TD></TD>
	<TD ROWSPAN=2>PHI 201</TD>
	<TD></TD>
    </TR>

    <TR ALIGN=CENTER VALIGN=MIDDLE>
	<TD BGCOLOR=BEIGE>11:00</TD>
	<TD>COS 109</TD>
	<TD>COS 109</TD>
	<TD>COS 109</TD>
    </TR>

    <TR ALIGN=CENTER VALIGN=MIDDLE>
	<TD BGCOLOR=BEIGE>Noon</TD>
	<TD COLSPAN=5 BGCOLOR=TURQUOISE>
	    L U N C H</TD>
    </TR>

</TABLE>

A table of your own...

For this part, you will have to create a table of anything that you like. It could be your own or some totally fake schedule, or anything else that you want. This table will be stored on a new web page called lab3.html that you will upload so people can view it at http://your_netid.mycpanel.princeton.edu/lab3.html.

Be sure that your lab3.html file is proper HTML, including html, head, title, and body tags, all properly terminated. If you don't, it might not work on some browser.

Create a table with at least 4 rows and 4 columns (more is fine), at least 2 different colors, a link within, and at least one ROWSPAN or COLSPAN to merge adjacent identical cells.

The <FORM> tag

<FORM METHOD="post" 
   ACTION="http://bwk.mycpanel.princeton.edu/scgi-bin/mailform.cgi"> 

   <INPUT TYPE="hidden" NAME="email"  VALUE="your_netid@princeton.edu">

Adding components

Finally, use the </SELECT> tag to close the selection box.

Text Areas

Try typing in the password field above and notice the effect. You will probably not need to use this component very often, but if you do, you may use any of the attributes of text fields. (The password is sent to the server totally in the clear, so this is at best a feeble protection mechanism.)

Checkboxes

As with the earlier example, you can cause any of these to start out checked by including the CHECKED attribute.

Radio Buttons

A group of radio buttons must share the same name. In your email, you will get one answer for that name, which tells you which radio button was selected (e.g., "ice_cream=lots" or "ice_cream=some").

Reset Buttons

Creating a Sign-in form for your web page

Now that you have learned how to use each component, we'd like you to combine them all by creating a Sign-in form for your web page. Basically, this is a form, like the one at the bottom of this page, that asks each visitor for a name, email address and other interesting information.

Create a sign-in form on your lab3.html page with at least 5 data entry fields (places to input answers), and using at least 3 different kinds of components. Before you start, check out the tips and example below, but please don't just copy the sample form we've provided.

Once you've finished your form, load the page and make sure it works: check your email to see if you receive the correct message.

While you work, keep the following in mind:

• The form begins with a <FORM> tag with the appropriate attributes and ends with </FORM>. If you forget either one, or do not put your form components between them, then your form will not work correctly (and may not show up at all).
  
• Don't forget to replace your_netid with your own netid in the hidden INPUT tag. A hidden field is usually used to pass information back and forth between browser and server; it is not displayed, but it's readily seen if you look at the page source.
  
• Start small, and ignore most of the optional attributes. Once you have a working form, you can experiment with size, default values, etc.
  
• Every component must have a name. If not, the mail program will not be able to tell you which answers went with which components.
  
• Be sure to add a Submit button. When this button is pushed, all of the data in every data entry field will be sent to you. If you don't include a Submit button, your form will not do anything.

Here's a quick example to get you started. It uses a table to make a little sign-in form. Note carefully that it must contain your netid so that mail is sent to you.

<TABLE BORDER=5 BGCOLOR="silver">
 <TR ALIGN=CENTER>
  <TD>
   <FORM METHOD="post" ACTION="http://bwk.mycpanel.princeton.edu/scgi-bin/mailform.cgi">
       <INPUT TYPE="hidden" NAME="email"  VALUE="your_netid@princeton.edu">
    <B>Your name:</B> 
    <INPUT TYPE="text" NAME="name"><BR><BR>
    <B>Your email:</B> 
    <INPUT TYPE="text" NAME="address"><BR><BR>
    <B>Please rate this page:</B><BR>
     <INPUT TYPE=radio NAME=rate VALUE=poor>     Poor
     <INPUT TYPE=radio NAME=rate VALUE=ok>     OK
     <INPUT TYPE=radio NAME=rate VALUE=good>     Good
    <BR><BR>
    <INPUT TYPE="submit">
    <INPUT TYPE="reset">
    </FORM>
   </TD>
  </TR>
</TABLE>

Part 3: Javascript

Javascript is a simple language, and since it's part of the browser, you don't need to download any software or run any particular operating system to use it. There are many books and tutorials about Javascript if you want to pursue it further, or seek clarification of the sketchy descriptions here; Google for "javascript tutorial". There's a nice system at Codecademy; you might also try JSfiddle.net.

Advice: Programming languages are finicky about precise syntax, and if you make a mistake, your program may not do anything at all. If your Javascript isn't working, a syntax error might be the problem. As a partial solution in Firefox, Tools / Web Developer / Web Console brings up a debugging window that often helps identify the problem. Chrome has a similar feature.

More advice: If you're not sure how to do something, keep in mind that these instructions contain the code necessary to do everything described. "Use the source, Luke!"

Javascript Events

Javascript is often used to respond to user activity like pushing a button, pressing a key, reshaping a window or moving the mouse into or out of a window or some part of one. This is done by attaching Javascript code to specific components of a web page so that when such a user "event" occurs for that component, the code runs and does whatever actions have been specified.

One of the simplest Javascript commands, especially useful for debugging, is alert, which causes a popup window to appear with a message. As a simple example, you could add a button that causes an alert message to appear when clicked; here's what it might look like:

	<form> <input type=button value="Hit me"
			onClick='alert("Ouch! That hurt.")'>
	</form>

Other events include onLoad, which occurs when the page is initially loaded, and onUnload, which occurs just before the page is exited, for example when the user pushes the "Back" button. You can put onLoad in the BODY part, with a line like this:

	<BODY onLoad='alert("loading the page")'>

onUnload is specified as part of the <BODY> tag, like this:

	<BODY onUnload='alert("bugging out")'>

10/9/14: The onUnload event has quietly stopped working sometime in the past year. There is another event called onBeforeUnload that appears to work in some browsers if you disable popup blockers; you can try that instead if you like, but it's optional.

You can open a new window by associating the command window.open(url) with an event like a button:

    <form> <input type=text name=url size=40 value="http://">
        <input type=button value="GO" onClick='window.open(url.value)'>
    </form>

Properties

The location property is the URL of the current web page. You can cause a new page to replace the current one, as if you had selected a link, merely by setting location to a new value:

    <form> <input type=button value="Princeton"
        onClick='location="http://www.princeton.edu"'>
    </form>

There's lots more that you can do with Javascript, but this is enough to suggest what's possible.

What you should do to your page

Add these Javascript embellishments to your page: An alert that says "Welcome to my web page" when the page is first loaded. (If you want to this to say something like "Welcome to John's web page", you will have to take care with the interior single quote; the sequence \x27 is one way to handle it.) An alert that thanks visitors for filling out the form (even if they didn't) when the page is exited. [added 10/9/14: You can try onBefore Unload. This appears to work, but only if you disable popup blocking, and only on some browsers. So this part is definitely optional.] A button that says "Show my home page" and creates a new window with your home page when pushed. At least two buttons that change the background color to shades that you like, and one that restores it to white. The colors must be expressed in RGB in hexadecimal, not as names.

Part 4: Submitting your work

When you're done, upload your lab3.html file and any other files to the CS dropbox at http://dropbox.cs.princeton.edu/COS109_F2014/Lab3.

Be sure that any files you have created or altered are saved either on your own machine or on your H: drive.