Lab 3: Advanced HTML

Part 1: Tables

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

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

Here's the HTML code that created that particular table:

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

Notice how each number is surrounded by <TD></TD> ("table data"). This creates a cell. Every three of these cells are also surrounded by <TR></TR> ("table row"). This creates a row. You can use the following steps to re-create this table within the BODY of one of your web pages:

1. Type <TABLE> to start a table.
2. On the next line, Type <TR> to start a new row.
3. For every cell you want in that row:
   1. Open a new cell by typing <TD>
   2. Type in whatever you want to appear in that cell.
   3. Close the cell by typing </TD>
4. Type </TR> to close the row.
5. Repeat steps 2-4 for every row.
6. Type </TABLE> to end the table.

That's all it takes to make a table. Your browser will count up the number of rows and the number of columns in the largest row and make a table of the appropriate size. Just remember that in the final table, every row will have as many columns as the largest row regardless of how many you typed in. Extra cells will be blank.

There are only three basic tags you need to know. Here are a few more details about each of them:

The <TABLE> tag

Every table must be surrounded by the <TABLE> and </TABLE> tags. Whenever your browser encounters a table, it pauses to read 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. You never need to include any of them, but here are a few of the more useful ones:

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> (or <TH>) and </TD> (or </TH>). These tags create the actual data cells, and thus have a lot of optional attributes to help you customize your table:

There are two other tag pairs which can be used within tables:

• <TH></TH> - These tags can be used in place of <TD></TD> to create a table header cell. Header cells are just like regular cells except that all text is centered and bold. All the attributes of <TD> can also be used for <TH>.
  
  
• <CAPTION></CAPTION> - If you wish your table to have a caption, you can place these tags inside the <TABLE></TABLE> tags. Any text you type between <CAPTION></CAPTION> will be placed above the table as a caption.

Part 2: Forms

Introduction to Forms

As you have explored the web, you have certainly encountered forms in some way or another. Search engines, guest books, comment pages and online surveys all use forms. In fact, any time a web page asks you for information, you have likely used a form.

Forms are basically collections of data entry fields like checkboxes, radio buttons, text boxes, etc. that ask for information from visitors to a page. When the visitor presses a "submit" button, all of that information is collected and sent to a web server, where it can be used by a program for some purpose. Search engines take keywords and generate lists of relevant pages. Guestbooks take entries and update a long HTML page. Comment forms usually send the comments to administrators via email.

Today, you will learn how to create a form which collects some sort of information from the people who visit your web page and sends it to you via email. Later in the course, when you learn a programming language, you may be able to write programs to interpret the collected data instead of just sending it to you.

Here's a sample form that shows all of the different form components you can use:

Text Field: Try typing in this password box:
Check out this checkbox: RadioButton 1: RadioButton 2: RadioButton 3:	This is a <select> menu You can choose one of the options The chosen option will be submitted The <option> tag makes options. This is a text area.<br><br>

Just as tables must be surrounded by <TABLE></TABLE>, everything in a form must go between <FORM> and </FORM>. There can be multiple FORM's in a page.

The <FORM> tag has several attributes that must be used if the form information is to be sent to a server:

• METHOD - This specifies the method in which the collected information is transmitted to the program that will interpret it. You will always use:

  METHOD="post"

• ACTION - This specifies the program which will interpret the data that your form collects. In our case, this will be a program on the Princeton web server which reads in the data and sends it to you via email. You should therefore use:

  ACTION="http://www.princeton.edu/cgi-bin/Princeton/mailform?userid@princeton.edu"

  where userid is replaced with your User ID.

Thus your form should always begin with:

<FORM METHOD="post" ACTION="http://www.princeton.edu/cgi-bin/Princeton/mailform?userid@princeton.edu">

(Replace userid with your User ID and type the entire ACTION tag on one line)

Once you've opened your form, you can begin interspersing form elements with your HTML. All of the regular HTML tags will still work, and you can also add text fields, text areas, select menus, checkboxes, radio buttons and more.

We're going to give a quick explanation of how to use each item and then ask you to create a form on your web page that lets visitors sign in and tell you about themselves.

Text Areas let your visitors type in many lines of text, like this:

Here's the HTML code to create such a text area:

To create the text area, we first used the tag <TEXTAREA> to open it. As usual, we included the NAME attribute with a descriptive name that would help us identify it later.

Next, we typed in what we wanted to appear inside the text area. Since text areas are primarily for collecting information, you probably won't ever need to put anything inside and can omit that part. However, if you do want something to appear in the text area, note that each line of text you type appears on a separate line in the text area.

Finally, we typed </TEXTAREA> to close the text area.

The size of a text area can be set using the ROWS and COLS attributes to specify how many lines of text and how many characters per line should be displayed. For example, our original text area above can be made larger by using <TEXTAREA ROWS=4 COLS=30>

Text Fields

Text Fields are small, one-line text boxes that are useful for collecting information like names, email addresses, phone numbers, etc. Here is an example, along with the code used to generate it:

Text Fields, along with the rest of the components we'll cover, use the <INPUT> tag. Since the same tag is used for buttons, checkboxes and other components, however, we need to specify a type in the TYPE attribute. For text fields, that type is "text".

As usual, we gave our component a descriptive name, but there are two other attributes we may also wish to set:

• SIZE: this attribute controls how many characters long the visible text field will be. It does not prevent you from typing in more, but in our example the box will only be 15 characters wide, so longer text will scroll.
• VALUE: this attribute can put a default string inside your text field. If your default string is more than one word, it must be enclosed in quotes.

Password Fields

Password fields are just like text fields, except that, for security reasons, every letter you type into one shows up as an asterisk. This prevents someone from looking over your shoulder and discovering your password as you type it. When the form is submitted, the actual text typed will show up in the email next to the NAME of the password field.

Check boxes are exactly what they sound like -- little boxes which can be checked and unchecked by clicking on them. There are two different ways in which to use checkboxes in forms, however. The first example here is used for a group of unrelated questions:

In this case, you want a separate answer for each checkbox question. Each has its own name and when the form is submitted, each will only be listed if it is checked. Notice that including the attribute CHECKED (without a value) in the second item's tag causes it to start out checked.

You can also use checkboxes to let visitors selected more than one option from a list. Look at this example:

In this case, the email submission would group all of these together under the name "classes". Instead of receiving a separate answer such as "mat103 = on" for each of them, you would get something like "classes = mat103, phi201".

Radio Buttons are a lot like checkboxes, except that only one can be selected at a time. Just like station buttons on old radios, when you push one, the one that was pushed before pops out. Try out this example:

A Reset button, when pushed, resets all the answers in a form to their original default values. Usually, one reset button will be placed at the end of a form, right next to the submit button. Here is an example of a reset button in a small form (with only one other component).

Don't be fooled by this example. Reset buttons will reset the values of every component in the same form (between the same set of <FORM></FORM>), not just one item.

The last form component we will show you is the Submit button. It looks just like the Reset button, but instead of resetting all of the answers, it submits them. When a visitor presses the Submit button, all of the answers within the same form are collected and passed on to whatever program was specified in the ACTION attribute of the <FORM> tag.

Below is a Submit button with no other components. This one doesn't actually do anything, but we've provided this example so that you will know what it looks like and how to include one in your forms.

As with Reset Buttons, the attribute VALUE is optional and will set the text message on the button. If you don't specify a VALUE, the button will usually just say "Submit" or "Submit Query".

Many of these effects are achieved by short programs ("scripts") that are written in a programming language called Javascript and included in the HTML text of a web page. In this section, we'll explore a small amount of Javascript so you can add some of these effects (preferably only desirable ones) to your web page. Learning this much Javascript will also be helpful when it comes to the Visual Basic labs, since many of the same concepts will be found in VB, though with different details and syntax. Javascript is simpler than VB, and since it's part of the browser, you don't need to download any software or run any particular system to use it.