lab4

Lab NOTES: Advanced HTML

Tables

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 (you are welcome to try it on nodepad++ as an exercise, and to get you familiar with

HTML tables):

<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>. That's all it takes. 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. You never need to include any of them, but here are a few of the more

useful ones:

Attribute Description

border Tables, by default, have no visible borders. If you would like your table to have a

border, assign a value (in pixels) to this attribute. border=1 (or just border) will give

your table a very thin border. border=5 is much thicker.

cellpadding cellpadding is the space between a cell's borders and its content. In tables with

borders, you may want to set CELLPADDING=5 to avoid having text touch the edges

of the cells.

width width can be assigned either a number of pixels or a percentage of the width of the

window. For example, width=80 will result in a table that is 80 pixels wide, and

width=80% will result in a table that is 80% as wide as the browser window.

The <tr> tag

Every row you create within your table must be surrounded by <tr> and </tr> tags.

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 optional attributes to help you customize the cells:

Attribute Description

rowspan

rowspan controls how many rows the cell occupies, allowing you to merge the cells of

more than one row into one tall cell. The default is 1, but you can raise this attribute to

be anything up to the number of remaining rows. For example, rowspan =3 will cause

the cell to be 3 rows high.

colspan

colspan controls how many columns the cell occupies, allowing you to merge the cells

of more than one column into one long cell. The default is 1, but you can raise this

attribute to be anything. For example, colspan =3 will cause the cell to be 3 columns

long.

Other table tags

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

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

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

Forms

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. “Contact me” forms usually send the comments to the webpage administrator/owner via

email. In fact, any time a web page asks you for information, it likely uses a form.

For the assignment of the week, you will create a form that allows the people who visit your web

page to contact you via email. Later in the course, when you learn a bit more Javascript, you can

experiment with writing code to process the data before mailing it. Check the email I have sent you

with a sample of all the different form components you can use. The file I sent you is called

formEx.html.

The <form> tag

Just as tables must be surrounded by <table></table>, everything in a form must go between

<form> and </form>. There can be multiple FORMs in a page. The <form> tag has two attributes

that must be used if the form information is to be sent to a server:

method specifies the method by which the collected information is transmitted to the program that

will interpret it. You will always use method="post"

action specifies the server-side program that will interpret the data that your form collects. In our

case, this will be empty since it is outside the scope of the course to show you how to create server-side scripts. You will use action=""

Adding form components

Once you've started your form, you can begin adding form elements. All of the regular HTML tags

will work, and you can also add text fields, text areas, select menus, checkboxes, and radio

buttons. We're going to give a quick explanation of how to use the component that you need for your assignment.

Text Areas

Text Areas let visitors type multiple lines of text. 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. The following text area can be made larger using <textarea rows=4 cols=30>:

What you write in HTML How it looks on your web page

Questions/Comments:<br> <textarea name="comments"> </textarea>

Questions/Comments:

Text Fields

Text fields are 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:

What you write in HTML How it looks on your web page

<label for=”yourname”>Your name:</label> <input type="text" id=”yourname” name="yourname" size=20 value="type your name here">

Your name: type your name here

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, you need to specify a type in the type attribute. For text fields, that type is "text".

As usual, give your component a descriptive name, but there are two other attributes you 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 more, but in our example the box will only be 20 characters

wide, so longer text will scroll.

 value: this attribute puts initial text inside your text field. It must be enclosed in quotes.

Radio Buttons

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 and notice that a group of radio buttons must share the same name.

What you write in HTML How it looks on your web

page

I like ice cream:<br> <input type="radio" name="ice_cream" value="lots" id="lots"> <label for="lots">A lot</label><br/> <input type="radio" name="ice_cream" value="some" id="some"> <label for="some">Some</label><br/> <input type="radio" name="ice_cream" value="not" id="not"> <label for="not">Not at all</label><br/>

I like ice cream:

A lot

Somewhat

Not at All

Reset Buttons

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

What you write in HTML How it looks on your web

page

<label for="problem">Please enter a problem:</label> <input type="text" name="problem" id="problem"><br> <label for="remove">Press this button to make it go away:</label><br> <input type="reset" value="Poof" id="remove">

Please enter a problem:

Press this button to make it go

away:

Poof

Reset buttons reset the values of every component in the same form (between

matching <form> and </form> tags), not just one item. The optional attribute value sets the text

message on the button. If you don't specify a value, the button will usually just say "Reset".

Submit Buttons

The last component 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.

What you write in HTML How it looks on your web

page

<label for="submit">This is a Submit Button:</label><br/> <input type="submit" value="Submit Everything" id="submit">

This is a Submit Button:

Submit Everything

As with Reset buttons, the attribute value is optional; if present, it sets the text message on the

button. If you don't specify a value, the button will usually just say "Submit".