1. Chapter 5 Introduction to XHTML: Part 2
Internet & World Wide Web: How to Program
Deitel, Deitel & Goldburg
Spring 2009
Yanjun Li CSRU2350

2. Objectives Tables Forms Frames Present information
Collect information from visitor
Frames
Display multiple documents in the browser
Spring 2009
Yanjun Li CSRU2350

3. Basic XHTML Tables (1) Organize data into rows and columns
table element with useful attributes:
border : specifies the table’s border width in pixels.
No border: border=“0”
width : specifies the width of table.
In percentage or in pixels.
summary : describes the table’s contents
Example:
<table border=“1” width=“40%”, summary=“example of table”>
</table>
Spring 2009
Yanjun Li CSRU2350

4. Basic XHTML Tables (2)
caption element: like the title of the table
describes the table’s content and helps text-based browsers interpret table data
Head section (header cell, defined with a thead element)
Contains header information such as column names
Foot section (defined with a tfoot element)
Spring 2009
Yanjun Li CSRU2350

5. Basic XHTML Tables (3) For head and foot sections :
tr element (defines an individual table row)
th element (defines the columns in the head/foot sections)
Most browsers center and display text formatted by th elements in bold.
Spring 2009
Yanjun Li CSRU2350

6. Basic XHTML Tables (4) Table body (defined with a tbody element)
For body sections :
tr element (defines an individual table row)
Each row has a tr element
td element (Data cells )
Empty data cell: <td>   </td>
Spring 2009
Yanjun Li CSRU2350

7. table.html (1 of 3)
Spring 2009
Yanjun Li CSRU2350

8. table.html (2 of 3)
Spring 2009
Yanjun Li CSRU2350

9. table.html (3 of 3)
Spring 2009
Yanjun Li CSRU2350

10. Tags inside a Table Write html tags inside a table cell: Example:
<td>
<p>This is a paragraph.</p>
<p>This is another paragraph. </p>
</td>
Spring 2009
Yanjun Li CSRU2350

11. Cell Padding Attribute of table element: cellpadding=“10”
create more white space between the cell content and its borders.
Spring 2009
Yanjun Li CSRU2350

12. Cell Spacing Attribute of table element: cellspacing=“10”
increase the distance between the cells.
Spring 2009
Yanjun Li CSRU2350

13. Background of Table/Cell
Attribute of table or cell element:
bgcolor=“red”
Background color of a table.
background=“yellow.jpg”
Background image of a table
Spring 2009
Yanjun Li CSRU2350

14. Layered Tables Example: Art Frame <table> <tbody>
<tr>
<td>
<table> …… </table>
</td>
</tr>
</tbody>
</table>
Spring 2009
Yanjun Li CSRU2350

15. Size of Table/Cell
For table as well as td, height and width attributes can be added to set the size.
Example: <table width=“300” height=“100”>… </table>
<td width=“50” height=“50”> </td>
Spring 2009
Yanjun Li CSRU2350

16. Absolute vs. Relative Size
If the width is specified as an absolute size, if user’s monitors are 640x480 pixels, large table will not be shown fully on the screen.
Relative Size: <table width=“50%” height=“100”>
<td width=“60%”>
<td width=“40%”>
Spring 2009
Yanjun Li CSRU2350

17. Intermediate XHTML Tables and Formatting (1)
Element colgroup : groups and formats columns
Element col has the following attributes:
align: determines the alignment of text in the column
span: determines how many columns the col element formats
valign: aligns data vertically
One of the four values: “top”, “middle”, “bottom”, “baseline”
Spring 2009
Yanjun Li CSRU2350

18. Intermediate XHTML Tables and Formatting (2)
Element tr, th, td have attributes
align
valign
rowspan and colspan
specify the number of rows or columns occupied by a cell
Spring 2009
Yanjun Li CSRU2350

19. table2.html (1 of 4)
Spring 2009
Yanjun Li CSRU2350

20. table2.html (2 of 4)
Spring 2009
Yanjun Li CSRU2350

21. table2.html (3 of 4)
Spring 2009
Yanjun Li CSRU2350

22. Organize Webpage with Table
Use table to set the layout of a webpage
Set table attribute border =“0”
Example: two-column page
Spring 2009
Yanjun Li CSRU2350

23. Forms
Data is collected on the Internet and processed by a program on a Web server.
Form : collect data from a user and send to a Web server.
Form performs the client-side functionality.
The program on the Web server performs the server-side functionality.
Spring 2009
Yanjun Li CSRU2350

24. Basic XHTML Forms (1)
Forms can contain visual and non-visual components.
Visual components : graphical user interface components.
Non-visual components (hidden inputs): store useful data, such as how the program on the Web server processes the coming data.
Spring 2009
Yanjun Li CSRU2350

25. Basic XHTML Forms (2) Element form Example:
Attribute method
Specifies how the form’s data is sent to Web server
method = “post”
Appends form data to the browser request
method = “get”
Appends form data directly to the end of the URL
Attribute action
Specifies the URL of a script on the Web server
Example:
<form method = "post" action = "/cgi-bin/formmail"> :
</form>
Spring 2009
Yanjun Li CSRU2350

26. Basic XHTML Forms (3)
Element input: specifies data to provide to the script that processes the form
Attribute type indicates the type of the input element.
The default value is "text“,
Other values are “hidden”, “submit”, “reset”.
Attribute name defines a unique name for the input element.
Attribute value defines the default value of the element.
Attribute size, maxlength defines the size of the input element and the maximum number of characters allowed in a text field.
Element label : associate the label with a control.
Spring 2009
Yanjun Li CSRU2350

27. form.html (1 of 3)
Spring 2009
Yanjun Li CSRU2350

28. form.html (2 of 3)
Spring 2009
Yanjun Li CSRU2350

29. form.html (3 of 3)
Spring 2009
Yanjun Li CSRU2350

30. More Complex XHTML Forms (1)
Element textarea inserts a multiline text box (text area)
Attribute rows specifies the number of rows
Attribute cols specifies the number columns
Element input with password, size type
Inserts a password box with the specified size
Element input with checkbox type
Enable users to select from a set of options
Checkboxes that belong to a group are assigned the same name.
Multiple checkboxes could be checked in one group.
checked =“checked” indicates that the input element should be checked when it first loads.
Spring 2009
Yanjun Li CSRU2350

31. form2.html (1 of 4)
Spring 2009
Yanjun Li CSRU2350

32. form2.html (2 of 4)
Spring 2009
Yanjun Li CSRU2350

33. form2.html (3 of 4)
Spring 2009
Yanjun Li CSRU2350

34. form2.html (4 of 4)
Spring 2009
Yanjun Li CSRU2350

35. Spring 2009
Yanjun Li CSRU2350

36. More Complex XHTML Forms (2)
Element input with radio type
Enable users to select one from a set of options
The radio buttons in a group are assigned the same name.
Only one radio button could be selected in one group.
checked =“checked” indicates that the input element should be checked when it first loads.
Spring 2009
Yanjun Li CSRU2350

37. More Complex XHTML Forms (3)
Element select provides a drop-down list of items
Attribute disabled
when set, it disables the drop-down list : disabled=“disabled”
Attribute multiple
when set, it specifies that multiple items can be selected at a time : multiple=“multiple”
Attribute name
defines a unique name for the drop-down list
Attribute size
defines the number of visible items in the drop-down list
Element option adds items to the drop-down list
Attribute selected
specifies which item initially is displayed as the selected item
Spring 2009
Yanjun Li CSRU2350

38. form3.html (1 of 6)
Spring 2009
Yanjun Li CSRU2350

39. form3.html (2 of 6)
Spring 2009
Yanjun Li CSRU2350

40. form3.html (3 of 6)
Spring 2009
Yanjun Li CSRU2350

41. form3.html (4 of 6)
Spring 2009
Yanjun Li CSRU2350

42. form3.html (5 of 6)
Spring 2009
Yanjun Li CSRU2350

43. Spring 2009
Yanjun Li CSRU2350

44. frameset Element (1)
Allow browser display more than one document simultaneously
Element frameset
Attribute cols defines the number and size of columns in a vertical frameset.
Attribute rows defines the number and size of rows in a horizontal frameset.
Values could be shown in pixels, %, * .
Example: <frameset cols=“100, * ” />
There is no body element in the page.
Spring 2009
Yanjun Li CSRU2350

45. frameset Element (2) Element frame
Specifies the documents that will be loaded
Attribute src
Specifies URL of the page to display
Attribute name
Defines a unique name for the frame
Attribute frameborder
Defines the border of the frame, “0” or “1”
Example :
<frame name=“leftframe” src=“nav.html”>
<frame name=“main” src=“main.html”>
Spring 2009
Yanjun Li CSRU2350

46. Jump to a specified section
Attribute src could be a specified section in a file.
The specified section has an id attribute set.
Example:
<frame name=“main” src=“mainFour.html#t2”/>
in mainFour.html :
<table…. id=“t2”….> </table>
Spring 2009
Yanjun Li CSRU2350

47. frameset Element (3) In nav.html file, the links should like :
<a href = "links.html"
target = "main“ > links </a>
The name of the destination frame is the target.
Spring 2009
Yanjun Li CSRU2350

48. frameset Element (3) Element noframes
Displays text for browsers that do not handle frames.
The noframes element goes inside the frameset element.
Example:
<noframes>  <body> Your browser does not handle frames!
</body>
</noframes>
Spring 2009
Yanjun Li CSRU2350

49. index.html (1 of 2)
Spring 2009
Yanjun Li CSRU2350

50. index.html (2 of 2)
Spring 2009
Yanjun Li CSRU2350

51. nav.html (1 of 2)
Spring 2009
Yanjun Li CSRU2350

52. nav.html (2 of 2)
Spring 2009
Yanjun Li CSRU2350

53. Nested framesets framesets within framesets Example :
<framset cols=“100,*”>
<frame name=“left” src=“nav.html”/>
<frameset rows=“175, *”>
<frame name=“rowOne” src=“picture.html”/>
<frame name=“rowTwo” src=“main.html” />
</framset>
<noframes>
<body> Frame is not handled
</body>
</noframes>
</frameset>
Spring 2009
Yanjun Li CSRU2350

54. index2.html (1 of 2)
Spring 2009
Yanjun Li CSRU2350

55. index2.html (2 of 2)
Spring 2009
Yanjun Li CSRU2350

56. Spring 2009
Yanjun Li CSRU2350

57. Web Resources www.vbxml.com/xhtml/articles/xhtml_tables
Spring 2009
Yanjun Li CSRU2350

58. Reference
Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004.
Reproduced by permission of Pearson Education, Inc.
Spring 2009
Yanjun Li CSRU2350