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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Spring 2009 Yanjun Li CSRU2350

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

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

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

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

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

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

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

Spring 2009 Yanjun Li CSRU2350

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

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

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

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

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

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

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

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

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

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

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

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

Spring 2009 Yanjun Li CSRU2350

Web Resources www.vbxml.com/xhtml/articles/xhtml_tables www.webreference.com/xml/reference/xhtml.html www.w3schools.com Spring 2009 Yanjun Li CSRU2350

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