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

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


<table >

<th>Item <th>Price



</table>

table1.htm

Tables

<table >

<th>Item <th>Price



</table>

table1.htm


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: [email protected]”>

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>

Documents

1. Tables and Forms