Web Development (Creating Tables)

International Diploma
in
Gaming and Animation Technology
E1012
Website Development
Lesson 3: Table, Form, and Frame
Objectives
When you complete this lesson, you will be able to:
Understand on how to create table.
Understand on how to create form.
Understand on how to create frame.
3.1 Creating table

A table arranges information in rows, and columns format.
The table below has three rows. Each row has two columns.
Name
Price
Nokia
600
Sony
670
<table> tag start the beginning of the table, and </table> means the
end of the table.
Use border attribute to create border for the table.
Using width, and height attribute to define the table width, and height.
<table border=10 width=500 height=100>
3.1 Creating Table

Use a pair of <tr>, and </tr> to define the first row.
Within the <tr> make use two pair of <th>, and </th> to create its two
heading
<tr>
<th> Name </th> <th> Price </th>
</tr>
Name
Price
3.2 Creating Table

Use another pair of <tr>, and </tr> to define the second row.
Within the <tr> make use two pair of <td>, and </td> to create its two
cell data.
<tr>
<td> Nokia </td> <td> 600 </td>
</tr>
Name
Price
Nokia
600
3.2 Creating table

Use another pair of <tr>, and </tr> to define the second row.
Within the <tr> make use two pair of <td>, and </td> to create its two cell data.
<tr>
<td> Nokia </td> <td> 600 </td>
</tr>
<caption> allows a caption to be at the top or bottom of the table
<caption align=bottom> The latest price as at 01/04/2009
</caption>
Name
Nokia
The latest price as at 01/04/2009
Sony
Price
600
670
6
3.2 Creating table
Using rowspan allow rows merge as a single row unit.

Using colspan allows columns merge as single column unit.
Information
Name
Price
Latest
Nokia
600
Sony
670
Buy today get 20% discount
<tr><td rowspan=2> latest </td><td> Nokia </td>

<td> 600 </td></tr>
<tr><td colspan=3>buy today get 20% discount </td></tr>
Save this file as product.html
3.2 Creating form
A form is one of the important elements on internet.

User can enter data into the fields in the form, and submit it.
A <form> tag start the form structure, and </form> ends it.
A form must have a name.
The method decides on how the data will be sent to the receiver.
It can be either post, or get.
The action defines the URL of program that will process the data.
Within the form you can write many <input type=entryformat>
The type can be text, radio, checkbox,password, submit, and reset,
You can use none input type such as textarea, and select tag,
<form name=formname method=post action=receiver>
<input type=text name=field>
..
</form>
8
3.2 Text Box Entry
<input type=text name=postalcode size=10

maxlength=8 value=" 8 digits">
The field name is postalcode.
The type is a single line text box entry
The size of 10 define the width of the textbox.
The initial value is 8 digits
The maxlength allows the user enter up to 8 characters only.
<html><body>
<form name=process>
Enter name<br><input type=text name=cname><br>
Enter address<br><input type=text name=address size=30><br>
Enter postalcode<br><input type=text name=postalcode size=10
maxlength=8 value=" 8 digits">
</form></body><html>
9
3.2 Radio Button

Nokia<input type=radio name=phone checked>
Sony<input type=radio name=phone>
Samsung<input type=radio name=phone>
Each of them is a radio button where only one option can be turn on.
All their field name must be the same. In this example is phone.
The checked attribute will make nokia button to be checked first.
<html><body>
<form name=process>
Phone like the most
Nokia<input type=radio name=phone checked><br>
Sony<input type=radio name=phone><br>
Samsung<input type=radio name=phone><br>
10
3.2 CheckBox
Color<input type=checkbox name=quality>
Brand<input type=checkbox name=quality>
Weight<input type=checkbox name=quality>
They are known as checkbox.
User can select more than one option.
All their field name is must be the same. In this example is quality.
<html>
<body>
<form name=process>
Phones attributes preferences
Color<input type=checkbox name=quality><br>
Brand<input type=checkbox name=quality><br>
Weight<input type=checkbox name=quality><br>
11
3.2 Submit and Reset Button

<input type=submit value="send data" name=s>
<input type=reset value="clear data" name=r>
The submit button will send the form data to the
receiver once user click on it.
The reset button will clear the fields in the form, and
initialize with a default value once user click on it.
The value attribute will change the button caption.
12
3.2 Submit and Reset Button

<html>
<body>
<form name=process method=post
action=mailto:username@www.xyz.com>
name <input type=text name=cname
size=20><br>
Color<input type=checkbox name=quality><br>
Brand<input type=checkbox name=quality><br>
</form>
</body>
<html>
Save as buy.html
13
3.2 Password
<input type=password name=pass size=20 maxlength=12>
The field name is password.
The type is a password which similar to a single line text box entry
but the entry is masked by asterisk.
The size of 20 define the width of the textbox.
The maxlength allows the user enter up to 12 characters only.
<html>
<body>
Enter id<input type=text name=cname size=20><br>
Enter password<input type=password name=pass size=20><br>
14
3.2 TextArea
<textarea name=feedback rows=12 cols=30>

</textarea>
The field name is feedback.
This data entry allows multiple lines data entry.
It will occupy 12 rows, and 30 columns.
<html><body>
Enter id<input type=text name=cname size=20><br>
Enter email<input type=text name=email size=20><br>
Give comment <br>
<textarea name=feedback rows=12 cols=30>
</textarea>
<input type=reset value="clear data name=r>
15
3.2 select option
<select name=phonetype>
<option>nokia1
<option>nokia2
<option>sony1
<option>sony2
</select>
The field name is phonetype.
A <select> tag creates a pull down menu.
It allows the user to pick answer from a list of value.
Each value must be reference by <option>.
16
3.2 select option

<html>
<body>
<form name=process>
Choose phone type
<select name=phonetype>
<option>nokia1
<option>nokia2
<option>sony1
<option>sony2
</select>
</form>
</body>
<html>
17
3.3 Creating frame
<Frameset > divides a browser screen into several windows.

The attribute rows will make the web pages in rows format from top
to bottom.
The attribute cols will make the web pages appear in columns from
left to right.
Use % to define the size for each frame.
Use * to indicate the rest of the rest of screen occupied by the last
frame.
<frame> will define the web page for each frame.
The src attribute will define the web page for the frame.
18
3.3 Creating frame
The frameset rows= 40%,* will appear in rows format

Buy.html page will appear in the first row.
It will occupy 40% of the browser space.
product.html page will appear in the second row.
Buy.html page will appear here
Product.html will appear here
19
3.3 Creating frame

<html>
<frameset rows="40%,*">
<frame src=buy.html>
<frame src=product.html>
</frameset>
</html>
20
3.3 Creating frame
The frameset cols= 40%,* will appear in columns format

Buy.html page will appear on the left side.
Product.html page will appear on the right side.
Buy.html will
occupy here
Product.html will occupy here
21
3.3 Creating frame

<html>
<frameset cols="40%,*">
<frame src=buy.html>
<frame src=product.html>
</frameset>
</html>
22
3.3 Creating frame
A <frameset> within another <frameset> will create nested frame.

The <frameset rows=40%,*> create two rows.
The first row occupy by banner.html.
The second row create another frameset of two columns format.
The first column which is on the left side occupy by index.html.
The second column occupy by product.html.
The noresize attribute prevents the user from resize the frame.
Banner.html will occupy the first row
index.html occupy the

first column of the
second row
Product.html will occupy the

second column of the second
row
23
3.3 Creating frame

<html>
<frameset rows="40%,*">
<frame src=banner.html noresize>
<frameset cols="50%,*">
<frame src=index.html noresize>
<frame src=product.html noresize>
</frameset>
</frameset>
</html>
24
3.3 Creating frame
When the user click on a link, you need to name a frame so that the
corresponding page will appear inside that frame.
Using name attribute define a name for the frame.
The name for the first column frame is left.
The second column frame name is right.
You need to use the attribute target inside the <a> tag to define the
frame for the page will appear inside it.
25
3.3 Creating frame

<html>
<frameset rows="40%,*" >
<frame src=banner.html>
<frameset cols="60%,*" >
<frame src=index.html noresize name=left>
<frame src=product.html noresize name=right>
</frameset>
</frameset>
</html>
26
3.3 Creating frame

Save as banner.html
<html>
<body>
<marquee> Buy 2 phones get 30% discount</marquee>
</body><html>
27
3.3 Creating frame

Save as index.html
<html>
<body>
<br><a href="product.html" target=right >product </a>
<br><a href="buy.html" target=right>buy </a>
28
3.4 Exercise
1. Write html codes to produces the below table. You need to insert
your own car image into the table.
Car Name
Picture of it
Price
BMW
BMW picture
$600000
Toyota
Toyota picture
$400000
2. Write html codes to produces a form allows a customer to purchase

the car above only. You need to come out with your own fields.
29

Web Development (Creating Tables)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development (Creating Tables)

Uploaded by

Copyright:

Available Formats

International Diploma

3.1 Creating table

3.1 Creating Table

3.2 Creating Table

3.2 Creating table

3.2 Creating table

Using rowspan allow rows merge as a single row unit.

Buy today get 20% discount

<tr><td rowspan=2> latest </td><td> Nokia </td>

3.2 Creating form

A form is one of the important elements on internet.

3.2 Text Box Entry

<input type=text name=postalcode size=10

3.2 Radio Button

3.2 Submit and Reset Button

3.2 Submit and Reset Button

<textarea name=feedback rows=12 cols=30>

3.2 select option

3.2 select option

3.3 Creating frame

<Frameset > divides a browser screen into several windows.

3.3 Creating frame

The frameset rows= 40%,* will appear in rows format

Product.html will appear here

3.3 Creating frame

3.3 Creating frame

The frameset cols= 40%,* will appear in columns format

Product.html will occupy here

3.3 Creating frame

3.3 Creating frame

A <frameset> within another <frameset> will create nested frame.

index.html occupy the

Product.html will occupy the

3.3 Creating frame

3.3 Creating frame

3.3 Creating frame

3.3 Creating frame

3.3 Creating frame

2. Write html codes to produces a form allows a customer to purchase

You might also like