1. tables and forms. dse 4150 lab #1 setup your professional web page zstart frontpage or any other...
TRANSCRIPT
![Page 1: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/1.jpg)
1. Tables and Forms
![Page 2: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/2.jpg)
DSE 4150
Lab #1
![Page 3: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/3.jpg)
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
![Page 4: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/4.jpg)
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
![Page 5: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/5.jpg)
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
![Page 6: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/6.jpg)
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>
![Page 7: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/7.jpg)
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
![Page 8: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/8.jpg)
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
![Page 9: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/9.jpg)
<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>
![Page 10: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/10.jpg)
Elements
<table></table><caption></caption><colgroup><th><td><tr>
![Page 11: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/11.jpg)
Attributes
<talbe border=n(pixels) align=center/left/ right/justify width=70% ..>
<th align valign=top/middle/bottom/ baseline colspan rowspan width hight ..>
![Page 12: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/12.jpg)
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
![Page 13: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/13.jpg)
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.)
![Page 14: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/14.jpg)
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>
![Page 15: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/15.jpg)
Elements
<form action method name> </form>
<input type name value size> </input>
<textarea name rows cols> </textarea>
<select name> <option> </select>
![Page 16: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/16.jpg)
<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
![Page 17: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/17.jpg)
<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 …
![Page 18: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/18.jpg)
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
![Page 19: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/19.jpg)
Control: Textarea
Example
<textarea name=“comments” rows=20 cols=30>
Please input your comments here:
</textarea>
![Page 20: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/20.jpg)
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.
![Page 21: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/21.jpg)
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
![Page 22: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/22.jpg)
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
![Page 23: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/23.jpg)
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”>
![Page 24: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/24.jpg)
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.
![Page 25: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/25.jpg)
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”>
![Page 26: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/26.jpg)
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>
![Page 27: 1. Tables and Forms. DSE 4150 Lab #1 Setup Your Professional Web Page zStart FrontPage or any other software that you know how to use to create a webpage](https://reader036.vdocument.in/reader036/viewer/2022070306/5519b2f855034660578b468b/html5/thumbnails/27.jpg)