csc3530 software technology tutorial one assignment overview & html basics

CSC3530 Software Technology

Tutorial One

Assignment overview &HTML basics

Information

• 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)• XML

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

Uploading HTMLConnect to cugw.cse.cuhk.edu.hkUsername should be acct_name@sparcxxDisable the passive mode

HTML 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>

</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-in

Frame<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 side

Inline 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• Demo

Ordered/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.2

Table<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 percentage

Table (More)• rowspan and colspan attribute

like 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 used

Form 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 string

Useful 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 generated

Next weekPERL

• variables, array• flow of control• functions• input, output

csc3530 software technology tutorial one assignment overview & html basics

Documents