1. CSC3530 Software Technology Tutorial One Assignment overview & HTML basics

2. Information e-mail: csc3530@cse.cuhk.edu.hk newsgroup: cuhk.cse.csc3530 homepage: http://www.cse.cuhk.edu.hk/~kwchiu/csc3530/ http://www.cse.cuhk.edu.hk/~kwchiu/csc3530/ Prof. Chiu, Dickson (SHB Rm. 912) e-mail: kwchiu@cse.cuhk.edu.hkkwchiu@cse.cuhk.edu.hk TA e-mail: kcsia@cse.cuhk.edu.hk (SHB Rm. 913) scng@cse.cuhk.edu.hk (SHB Rm. 1013)kcsia@cse.cuhk.edu.hkscng@cse.cuhk.edu.hk

3. 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) XML

4. Homepage 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 executable

5. Uploading HTML Connect to cugw.cse.cuhk.edu.hk Username should be acct_name@sparcxx Disable the passive mode

6. HTML basics HyperText Markup Language consist of tags and attributes e.g. …… Structure of a HTML file Title of the html file Hello World! Do you think it is boring?

7. Basic Tags … level n headings line break horizontal rule … start of paragraph … preformatted text (use for display codes) … defines a hyperlink load a image SRC and HREF are attribute of tags (image) and (anchor) respectively Other tags consists of attribute too, e.g. align is an attribute of

8. Background music Add this tag in the HEAD part <EMBED SRC=“{URL of midi file}” AUTOSTART=FALSE LOOP=FALSE WIDTH=145 HEIGHT=55> 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-in

9. Frame First Frame Page Do not place 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 google We can change web-page of frame on the right side

10. Inline frame HTML 4.0 standard supported by Internet Explorer only No need to put all things in one page Usually use as a notice board Not the same as TEXTAREA tag in FORM Demo

11. Ordered/unordered list list item 1 list item 2 list item 3 list item 3.1 list item 3.2 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.2

12. Table This is a table H1 H2 H3 A1 A2 A3 B1 B2 B3 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 percentage

13. Table (More) rowspan and colspan attribute like you use merge cell in Frontpage colspan rowspan rowspan

14. Form Use in CGI application Make HTML interactive One line text field Multiple line text field Checkbox Radio button Drop down menu First Second Third

15. 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 xxx is to indicate the selected option, it will make the form more user- friendly if probably used

16. Form and 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 string

17. Useful links HTML goodies http://www.htmlgoodies.com http://www.htmlgoodies.com Daves HTML Guide http://www.davesite.com/webstation/html/ http://www.davesite.com/webstation/html/ HTML Primer http://www.htmlprimer.com/ http://www.htmlprimer.com/ Any web page use view  source Use Frontpage/ dreamweaver view the source generated

18. Next week PERL variables, array flow of control functions input, output