Post on 03-Jan-2016
description
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
ec-apache.baf.cuhk.edu.hkec-apache.baf.cuhk.edu.hk
An Example
Let us say that my accountname is snoopyNow 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
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.
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
Basics of HTML
HyperText Markup Language: a universally understood language, the publishing language used by the World Wide Web
The latest version: HTML4.01Specification:
http://www.w3c.org/TR/html4/Elements: <html> </html>, <head>
</head>, <body> </body>
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
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
Tables
<table >
<th>Item <th>Price
<tr><td>Apple <td> $4.0
<tr><td>Orange<td>$3.0
</table>
table1.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>
Elements
<table></table><caption></caption><colgroup><th><td><tr>
Attributes
<talbe border=n(pixels) align=center/left/ right/justify width=70% ..>
<th align valign=top/middle/bottom/ baseline colspan rowspan width hight ..>
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 WebSiteURL Description of Site
URL
URL
Description of Site
Description of Site
Forms
a 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.)
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>
Elements
<form action method name> </form>
<input type name value size> </input>
<textarea name rows cols> </textarea>
<select name> <option> </select>
<Form> attributesAction: 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
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
<Input> attributesType: This attribute specifies the
type of control to create.
Value: This attribute specifies the initial value of the control.
Name: This attribute assigns the control name.
Size, Checked, Src, Alt, Align, Onfocus, Onclick …
Control: Text
Type’s default valueCreating a single line input control
example: <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
Control: Textarea
Example
<textarea name=“comments” rows=20 cols=30>
Please input your comments here:
</textarea>
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.
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
Control: Radio
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive
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
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”>
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.
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”>
Control: MenuSyntax:
< 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>