New version page

csc3530-t1

This preview shows page 1-2-3-4-5-6 out of 18 pages.

View Full Document
View Full Document

End of preview. Want to read all 18 pages?

Upload your study docs or become a GradeBuddy member to access this document.

View Full Document
Unformatted text preview:

CSC3530 Software TechnologyInformationOverview of assignmentHomepage authoringUploading HTMLHTML basicsBasic TagsBackground musicFrameInline frameOrdered/unordered listTableTable (More)FormSlide 15Form and CGIUseful linksNext weekCSC3530 Software TechnologyTutorial OneAssignment overview &HTML basicsInformation• e-mail: [email protected]• newsgroup: cuhk.cse.csc3530• homepage: http://www.cse.cuhk.edu.hk/~kwchiu/csc3530/• Prof. Chiu, Dickson (SHB Rm. 912)• e-mail: [email protected]• TA e-mail: [email protected] (SHB Rm. 913) [email protected] (SHB Rm. 1013)Overview of assignment• Individual project/assignment• Web-based ordering & inventory system• listing of data from database• accept order from HTML form• Requires• HTML• Perl (especially CGI & DB connectivity)• SQL (insert, delete, update,…)• Java (servlet & JDBC)• XMLHomepage authoring• assume using a CSE account• create a directory www under your home directory mkdir ~/www mkdir ~/www/cgi-bin• change permission to world readable chmod 711 ~/www 1 – able to read 2 – able to write 4 – able to execute• use ls –l to view the permission setting• For CGI application under cgi-bin directory, should be executableUploading HTMLConnect to cugw.cse.cuhk.edu.hkUsername should be [email protected] the passive modeHTML basics• HyperText Markup Language• consist of tags and attributes• e.g. <HTML>……</HTML>• Structure of a HTML file<HTML><HEAD><TITLE>Title of the html file</TITLE></HEAD><BODY><H1>Hello World!</H1><P>Do you think it is boring?</P><!-- This is where you place you comment --></BODY></HTML>Basic Tags• <Hn>…</Hn> level n headings• <BR>line break• <HR>horizontal rule• <P>…</P>start of paragraph• <PRE>…</PRE>preformatted text (use for display codes)• <A HREF=“…”>…</A>defines a hyperlink• <IMG SRC=“xxx.jpg”>load a image• SRC and HREF are attribute of tags <IMG> (image) and <A> (anchor) respectively• Other tags consists of attribute too, e.g. align is an attribute of <P>Background music<HEAD><BGSOUND SRC=“{URL of midi file}” LOOP=1></HEAD>• Add this tag in the HEAD part<BODY><EMBED SRC=“{URL of midi file}” AUTOSTART=FALSE LOOP=FALSE WIDTH=145 HEIGHT=55></EMBED></BODY>• Add this tag in the BODY part• This tag will show a control in the webpage.•.wav file also works• Try the difference, if you have a poor sound card!• Embed will invoke a plug-inFrame<HTML><HEAD><TITLE>First Frame Page</TITLE> <FRAMESET COLS="50%,50%“ FRAMEBORDER=“0”><FRAME SRC=“left.html“ NAME=“LEFT”><FRAME SRC=“right.html“ NAME=“RIGHT”></FRAMESET> </HEAD></HTML> • Do not place <FRAMESET> tag in the body part• FRAMEBORDER is an attribute, setting 0 will make the border line between frames disappear• NAME is essential e.g. in the left.html, you have a hyperlink <A HREF=“http://www.google.com” TARGET=“RIGHT”>google</A> We can change web-page of frame on the right sideInline frame• HTML 4.0 standard• supported by Internet Explorer only<!–- anywhere in your BODY part of HTML --><IFRAME SRC=“URL of that page”>• No need to put all things in one page• Usually use as a notice board• Not the same as TEXTAREA tag in FORM• DemoOrdered/unordered list<UL><LI>list item 1</LI><LI>list item 2</LI><LI>list item 3<UL><LI>list item 3.1</LI><LI>list item 3.2</LI></UL></LI><UL>• Useful for displaying structured data• Print a tree structure in HTML page• Organizing key points•list item 1•list item 2•list item 3 •list item 3.1•list item 3.2Table<TABLE border="4" cellspacing="4" cellpadding="4“ width=“200”><CAPTION>This is a table</CAPTION><TR><TH> H1 </TH><TH> H2 </TH> <TH> H3 </TH></TR> <TR><TD> A1 </TD><TD> A2 </TD><TD> A3 </TD></TR><TR><TD> B1 </TD><TD> B2 </TD><TD> B3 </TD></TR></TABLE> • Useful for displaying data in database• For loop to display each row• Good for flexible design when using border=“0”• width attribute defines the dimension of the table, can be in percentageTable (More)• rowspan and colspan attributelike you use merge cell in Frontpage <tr> <td width="119" colspan="3">colspan</td> <td width="44"> </td> </tr> <tr> <td width="44"> </td> <td width="44"> </td> <td width="44"> </td> <td width="44" rowspan="3">rowspan</td> </tr> <tr> <td width="44"> </td> <td width="44" rowspan="2">rowspan</td> <td width="44"> </td> </tr> <tr> <td width="44"> </td> <td width="44"> </td> </tr>Form• Use in CGI application• Make HTML interactive<form method="POST" action=“../cgi-bin/getvalue.cgi"> <p>One line text field<br> <input type="text" name="T1" size="20"><br> Multiple line text field<br> <textarea rows="2" name="S1" cols="20"></textarea><br> Checkbox<input type="checkbox" checked name="C1" value="ON"> <input type="checkbox" name="C2" value="ON"><br> Radio button<input type="radio" value="V1" checked name="R1"> <input type="radio" name="R1" value="V2"><br> Drop down menu<select size="1" name="D1"> <option>First</option> <option>Second</option> <option>Third</option> </select><br> <input type="submit"> <input type="reset"></p></form>Form• each fields use input tag, with the type attribute different from each other• except TEXTAREA and SELECT• name attribute is important, better make it resonable• <option selected>xxx</option> is to indicate the selected option, it will make the form more user-friendly if probably usedForm and CGI<form method="POST" action=“../cgi-bin/getvalue.cgi">• Method, either GET or POST• GET will append the query string in URL ../cgi-bin/getvalue.cgi?t1=what&s1=matter…• GET may introduce some security problem• Better use POST• Action, the URL of the CGI program (may be perl, c program, servlet, ASP)• Try action=“mailto:{your e-mail address}• you will get a e-mail from the form• Try analyse the stringUseful links• HTML goodieshttp://www.htmlgoodies.com• Daves HTML Guidehttp://www.davesite.com/webstation/html/• HTML Primerhttp://www.htmlprimer.com/• Any web pageuse view  source• Use Frontpage/ dreamweaverview the source generatedNext weekPERL• variables, array• flow of control• functions• input,


Loading Unlocking...
Login

Join to view csc3530-t1 and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view csc3530-t1 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?