1. 1. Tables and Forms

2. DSE 4150 Lab #1

3. Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage zCreate your Professional Business Web Page based on your already prepared layout zExport your finished Web Page to the class Web serverec-apache.baf.cuhk.edu.hk

4. An Example zLet us say that my accountname is snoopy zNow I am ready to export my web page yservername yroot directory/document root/top directory/home directory /home/snoopy/public_html ypreferred name is index.html (for now) zTry it out after you have successfully exported the page http://ec-apache.baf.cuhk.edu.hk/~snoopy/index.html

5. z1.Connect with your account on the apache server and create a directory named public_html zrun telnet ec-apache.baf.cuhk.edu.hk zlog in your account zmkdir public_html //create the directory where you will put your homepage zchmod 755 public_html //set a lower security mode for your directory that later we can use browers to submit information zyou can use the command passwd to change your password. z2. Use ws_ftp to publish your web site zset profile name as ec-apache zset address as ec- apache.baf.cuhk.edu.hk zinput your account name in User ID, then password. zselect the files and click the left arrow z3. You can use browser to see your homepage. zAddress ec- apache.baf.cuhk.edu.hk/~your account/index.htm

6. Basics of HTML zHyperText Markup Language: a universally understood language, the publishing language used by the World Wide Web zThe latest version: HTML4.01 zSpecification: http://www.w3c.org/TR/html4/ http://www.w3c.org/TR/html4/ zElements:,,

7. z The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Item Price Apple $4.0 Orange $3.0 table1.htmtable1.htm Tables

8. zThe HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Item Price Apple $4.0 Orange $3.0 table1.htmtable1.htm Tables

9. Item Price Apple $4.0 Orange $3.0 table1.htmtable1.htm The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Tables border>

10. Elements z

11. Attributes z

12. Next Step zIf you think you have created your Professional Business Web Page, then please go on to create a table using a simple editor and direct coding by yourself using HTML tags zFor example, http://ec-apache.baf.cuhk.edu.hk/~dse4150/LABS/rowscols.html http://ec-apache.baf.cuhk.edu.hk/~dse4150/LABS/rowscols.html zCreate this table: B2B WebSite URLDescription of Site URL Description of Site

13. Forms za section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Interaction between client and server: 1. modifying its controls (entering text, selecting menu items, etc.) 2. submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

14. An simple sample Please input your name here:

15. Elements z

16. attributes zAction: specifying a form processing agent example: action=cgi- bin/My_script Get(default)--the form data set is appended to the URI specified by the action attribute Post--the form data set is included in the body of the form and sent to the processing agent zMethod: specifying which HTTP method will be used to submit the form data set. zName: naming the element so that it may be referred to form style sheets or scripts

17. attributes zType: This attribute specifies the type of control to create. zValue: This attribute specifies the initial value of the control. zName: This attribute assigns the control name. zSize, Checked, Src, Alt, Align, Onfocus, Onclick …

18. Control: Text zTypes default value zCreating a single line input control example: zWe can use textarea element to creat a multi- line input control

19. Control: Textarea Example Please input your comments here:

20. Control: Checkbox zCheckboxes are on/off switches that may be toggled by the user. zThe switch is on when the checked attribute is set. zIt allows users to select several values for the same property.

21. Control: Checkbox Example: What color do you like: red green yellow

22. Control: Radio zRadio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive Example: What color do you like: red green yellow

23. Control: Password zSyntax: Example: Input your password here:

24. Control: Button zsubmit buttons: When activated, a submit button submit a form. zreset buttons: When activated, a reset button resets all controls to their initial values. zpush buttons: Push buttons have no default behavior.

25. Control: Button zSyntax: Example:

26. Control: Menu zSyntax: text Example: red green yellow