1 / 27

1. Tables and Forms

1. Tables and Forms. DSE 4150. Lab #1. Setup Your Professional Web Page. Start FrontPage or any other software that you know how to use to create a webpage Create your Professional Business Web Page based on your already prepared layout Export your finished Web Page to the class Web server

troy-baird
Download Presentation

1. Tables and Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1. Tables and Forms

  2. DSE 4150 Lab #1

  3. Setup Your Professional Web Page • Start FrontPage or any other software that you know how to use to create a webpage • Create your Professional Business Web Page based on your already prepared layout • Export your finished Web Page to the class Web server ec-apache.baf.cuhk.edu.hk

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

  5. 2. Use ws_ftp to publish your web site • set profile name as “ec-apache” • set address as “ec-apache.baf.cuhk.edu.hk” • input your account name in User ID, then password. • select the files and click the left arrow • 3. You can use browser to see your homepage. • Address “ec-apache.baf.cuhk.edu.hk/~your account/index.htm • 1.Connect with your account on the apache server and create a directory named public_html • run telnet ec-apache.baf.cuhk.edu.hk • log in your account • mkdir public_html //create the directory where you will put your homepage • chmod 755 public_html //set a lower security mode for your directory that later we can use browers to submit information • you can use the command ”passwd” to change your password.

  6. Basics of HTML • HyperText Markup Language: a universally understood language, the publishing language used by the World Wide Web • The latest version: HTML4.01 • Specification: http://www.w3c.org/TR/html4/ • Elements: <html> </html>, <head> </head>, <body> </body>

  7. Tables • 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. <table > <th>Item <th>Price <tr><td>Apple <td> $4.0 <tr><td>Orange<td>$3.0 </table> table1.htm

  8. Tables • 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. <table > <th>Item <th>Price <tr><td>Apple <td> $4.0 <tr><td>Orange<td>$3.0 </table> table1.htm

  9. Tables 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. <table > <th>Item <th>Price <tr><td>Apple <td> $4.0 <tr><td>Orange<td>$3.0 </table> table1.htm border>

  10. Elements • <table></table> • <caption></caption> • <colgroup> • <th><td> • <tr>

  11. Attributes • <talbe border=n(pixels) align=center/left/ right/justify width=70% ..> • <th align valign=top/middle/bottom/ baseline colspan rowspan width hight ..>

  12. Next Step • If 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 • For example, http://ec-apache.baf.cuhk.edu.hk/~dse4150/LABS/rowscols.html • Create this table: B2B WebSite URL Description of Site URL Description of Site URL Description of Site

  13. Forms Interaction between client and server: • a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. 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 <form method=post action=“mailto: fugang@cuhk.edu.hk”> Please input your name here: <input type=“text” name=“Name” value=“???”> <br> <input type=“submit” name=“submit” value=“email to Fu Gang”> </form>

  15. Elements • <form action method name> </form> • <input type name value size> </input> • <textarea name rows cols> </textarea> • <select name> <option> </select>

  16. <Form> attributes • Action: specifying a form processing agent example: action=“cgi-bin/My_script” • Method: specifying which HTTP method will be used to submit the form data set. • Name: naming the element so that it may be referred to form style sheets or scripts Get(default)--the form data set is appended to the URI specified by the action attributePost--the form data set is included in the body of the form and sent to the processing agent

  17. <Input> attributes • Type: This attribute specifies the type of control to create. • Name: This attribute assigns the control name. • Value: This attribute specifies the initial value of the control. • Size, Checked, Src, Alt, Align, Onfocus, Onclick …

  18. Type’s default value Creating a single line input control example: Control: Text <input type=“text” name=“name” size=50 value=“Please input your name here.”> • We can use textarea element to creat a multi-line input control

  19. Control: Textarea Example <textarea name=“comments” rows=20 cols=30> Please input your comments here: </textarea>

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

  21. Control: Checkbox Example: <p>What color do you like: <p><input type=“checkbox” name=“colors” value=“yes”>red <p><input type=“checkbox” name=“colors” value=“yes”>green <p><input type=“checkbox” name=“colors” value=“yes” checked >yellow

  22. Control: Radio Example: <p>What color do you like: <p><input type=“radio” name=“colors” value=“yes”>red <p><input type=“radio” name=“colors” value=“yes”>green <p><input type=“radio” name=“colors” value=“yes” checked >yellow • Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive

  23. Control: Password • Syntax: <input type=“password” name= “yourpassword” size=“number” value =“initial value”> Example: Input your password here:<br> <input type=“password” name=“password” value=“secret”>

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

  25. Control: Button • Syntax: <input type=“button type” name=“name” value=“initial value”> Example: <input type=“submit” name=“submit” value=“OK”> <input type=“reset” name=“reset” value=“OOPS”>

  26. Control: Menu • Syntax: < select | option name size multiple selected> text </select | option> Example: <select name=“choice” size=2> <option name=“choice_1” value=“red”> red </option> <option>green </option> <option selected>yellow </option> </select>

More Related