ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming 4. Internet Programming 1 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Reference H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002 2 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Web site development z 3 To develop a Web site, three steps: 1. Obtain the appropriate equipment z Web Server – hardware and software 2. Register the Web Server to an Internet Service Provider (ISP) z Obtain the IP address and DNS address 3. Develop the contents z Internet Programming ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Internet Programming z z z Web service is a kind of client / server process Need interaction between client and server Programming for providing Web service can also be divided into – – 4 Client-side programming: to define the operation to be performed on the client’s machine Server-side programming: to define the operation to be performed on the server ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Internet Database Web Server 5 Web Client Server-side Programming Client-side Programming Skills that are often required: • CGI • PHP • ASP • Perl • Java Servlet, … Skills that are often required: • XHTML • Javascript • Java • Dreamweaver • Flash • SMIL, XML … ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML 4.1 XHTML – Extensible HyperText MarkUp Language 6 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML Web programming using XHTML z Nowadays, there are many tools that help to develop Web page – z z z Provide sophisticated tools to allow Web page developed in a graphical manner Finally, the job of these tools is to convert the user design to XHTML code Understanding of XHTML allows us – – 7 Dreamweaver, Visual studio fine tuning the codes generated by these tools understand the source of a Web page ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML What is XHTML? z z z z z z 8 Unlike procedural programming languages, e.g. C, C++, XHTML is a markup language that specifies the format of of document to be seen in browser XHTML has replaced the HTML as the primary means of describing the Web page content Become a World Wide Web Consortium (W3C) recommendation W3C is an industry consortium Seeks to promote standards for the evolution of the Web and interoperability between WWW products by producing specifications and reference software Compared with HTML, XHTML provides more robust, richer and extensible features ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML Features of XHTML z Platform independent – z Text-based – – z z Program is written with ASCII characters Can be written using a text editor, such as notepad An XHTML file must have an extension of .html or .htm Information is generally enclosed inside paired tags – – 9 The same piece of code can give the same display in Mac, Linux and Windows E.g. <html> … </html> There are many tags in XHTML. They specify different information required to display the Web page content start tag end tag (with a /) ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML Basic Structure of XHTML <HTML> <!-- This is a comment --> <HEAD> <TITLE> This is title, describing the content </TITLE> </HEAD> <BODY> This is body, main part of the page </BODY> 10 </HTML> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML useful usefulfor forvalidating validatingthe thecode codeto to see seeififthey theymeet meetthe thexhtml xhtmlstandard standard <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> comment <!-- main.html --> comment <!-- Our first Web page --> define definethe thenamespace namespaceof ofhtml html <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program Welcome </title> define </head> definethe thetitle titleof ofthe theweb webpage page 11 <body> <p>Welcome to XHTML!</p> </body> </html> <p> - new paragraph <p> - new paragraph Example Example ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML See the title defined in head 12 That’s the content defined in body ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML z z An XHTML document can be divided into 2 sections head section – – z body section – – 13 contains information of how the page is formatted e.g. <title> … </title> can be found in head section to indicate the title of the Web page when it is shown in browser contains the actual page contents e.g. <p>Welcome to XHTML!</p> shows a line of text “Welcome to XHTML!</p> on the new paragraph ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Tags z Tags: case insensitive – z z z z <center> is same as <CENTER> Browse will not display information within tag that does not understand Tags: no precise positioning Many start tags define attributes that provide additional information E.g. <html xmlns = "http://www.w3.org/1999/xhtml"> start tag 14 attribute name attribute value ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Common Tags – Headers z z Some text may be more important the others XHTML provides six headers, called header elements, for specifying the relative importance of information – z z 15 <h1> … </h1>, <h2> … </h2> to <h6> … </h6> It is assumed the text in <h1> is more important than that in <h2> and so on so forth By default, the size of the text that is more important is bigger ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program Headers</title> </head> <body> <h1>Level <h2>Level <h3>Level <h4>Level <h5>Level <h6>Level 16 </body> </html> 1 2 3 4 5 6 Header</h1> header</h2> header</h3> header</h4> header</h5> header</h6> 66headers headersare areall allused used to toindicate indicatethe therelative relative importance importanceof oftext text ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Text Textunder under<h1> <h1>has hasthe thelargest largestsize size 17 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Meta Tag z HTML interacts with the search engines through using meta tag These Thesewords wordsare arecompared compared with withwords wordsin insearch searchrequests requests <head> <meta name=“keywords” content=“lecture notes, html, form, feedback”> <meta name=“description” content = “this web site describes …”> </head> 18 Description Descriptionof ofaapage pageseen seenon onsearching searching ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Webpage z One of the most important XHTML features is the hyperlink – z Link to another resources, such as web page, image, etc. Achieve by using the anchor tag <a>: – To a web page: <a href=“http://www.eie.polyu.edu.hk”>PolyU</a> anchor anchorattribute attribute 19 Value Valueof ofthe theattribute: attribute: The Theaddress addressof ofthe theWeb Webpage page The Thename nameon onthe theWeb Web page pagethat thatrepresents representsthis this link link ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming <body> <h1>Here are my favorite sites</h1> strong strongtag taglets letsthe thetext textto tobe be displayed displayedwith withbold boldfont font Other Othersimilar similartags tagsinclude include <u> <u>underline underlineand and<em> <em>italic italic <p><strong>Click a name to go to that page. </strong></p> Four Fourlinks linkscreate create <!-- Create four test hyperlinks --> <p><a href = "http://www.polyu.edu.hk">PolyU</a></p> <p><a href = "http://www.eie.polyu.edu.hk">EIE</a></p> <p><a href = "http://www.eie.polyu.edu.hk/~enpklun"> Dr Daniel Lun's Home</a></p> <p><a href = "http://www.eie.polyu.edu.hk/ ~enpklun/ENG224/ENG224.htm">ENG224 Home page</a></p> </body> 20 Don’t Don’tintroduce introducespaces spacesbetween between different partsof ofaaURL URLaddress address differentparts ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming This Thisline lineisisshown shownwith withaabold boldfont font Four Fourlinks linksare areincluded included 21 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Email Addresses z To a mail address: <a href=“mailto:enpklun@polyu.edu.hk”> Email me </a> z With a subject: <a href=“mailto:enpklun@polyu.edu.hk?subject=title”> Email me </a> z 22 Multiple recipients: <a href=“mailto:address1,address2, address3”> Email me </a> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Images z Background Image can be defined as an attribute of the body tag: <body background=“image.gif”> z To show an Image inside a page: <img src=“image.gif” border=“0” height=“256” width=“256” alt=“text description of the image”/> z 23 We can create an image hyperlink <a href=“page1.html”> <img src=“image.gif” …/> </a> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Will Willscale scaleto tothis thissize sizeto todisplay display <body> <p><img src = "xmlhtp.jpg" height = "238“ width = "183" alt = "XML How to Program book cover"/> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover"/> </p> </body> empty emptyelement: element: do donot notmarkup markuptext text 24 jhtp.jpg jhtp.jpgin infact factcannot cannotbe befound. found. With Withthe thealt altattribute, attribute,the thestatement statement isisdisplayed displayedififthe theimage imageisisnot notfound found ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming “alt” “alt”statement statement(may (maynot not display displaythe thesame samefor for Netscape) Netscape) The Theimage imagedisplayed displayedatatthe the specified specifiedsize size 25 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Color z 2 ways to specify: – – – 26 Use hexadecimal numbers RGB format: FF: strongest, 00 weakest z #FF0000 z #00FF00 z #0000FF Use color names z Black, White, Red, Cyan, Green, Purple, Magenta, Blue, Yellow, OrangeRed, SpringGreen, BlueViolet, Gold, DarkGoldenrod, Burlywood, … ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Color z Background color: – – z Text color, links, visited links and activated links: – z <body bgcolor =“white” text=“black” link=“purple” vlink=“blue” alink=“yellow”> Font color: – 27 <body bgcolor=“#00FF00”> … </body> <body bgcolor =“green”> … </body> <font color=“green”> … </font> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Formatting Text z z 28 The format of displayed text can be changed by using <font> … </font> Attributes: – Color: – Size: z Relative: +1, +2, -3, … z Absolute: 10, 12, … – Face: z Font used z Arial, Verdana, Helvetica, Times, … z Multiple fonts: z <font face="Arial, Helvetica, sans-serif"> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming background backgroundcolor colorisisyellow yellow <body bgcolor = “#ffff00”> <p><font face="courier" color="green" size=“24”> This is a test.</font> horizontal horizontalruler ruler <hr /> <font face="times" color="red" > This is a test.</font> the thebackslash backslashisisonly only </p> to toimprove improvereadability readability <p> <font face="arial" color="red" size=“+1”> See This is a test.</font> Seethe the difference difference <br /> <font face="times" color="#ff00ff" size=“+2”> between between This is a test.</font> <p> <p>and and </p> <br> <p align = center><font face="courier" size=“+3”> <br> This is a test.</font> </p> the text isisplaced atatthe center the text placed the center 29 </body> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming size size ==24 24 default defaultsize size size size==+1, +1,+2, +2,+3 +3 30 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Lists z Unordered list – – – – 31 a list that does not order its items by letter or number <ul> … </ul> creates a list where each item begins with a bullet List items: <li> … </li> For example <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Lists z Ordered list – – List that order their items by letter or number <ol type=“style”> … </ol> When style equals to z 1: decimal, 1, 2, 3, … z I: uppercase Roman, I, II, III, … z i: lowercase Roman, i, ii, iii, … z A: uppercase Latin, A, B, C, … z a: lowercase Latin, a, b, c, … – 32 List items: <li> … </li> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Table z Organize data into rows and columns Table caption Table header Table body Table footer 33 Table border ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming z z <table attribute=“value”> … </table> Attribute examples: – – – z z z 34 border=“1” ⇒ the larger the number, the thicker is the border. “0” means no border align=“center” ⇒ the table is aligned at the center of the browser width=“60%” ⇒ to set the table width to 60% of the browser’s width Caption of the table: <caption> … </caption> Insert a table row: <tr> … </tr> The head, body and foot sections are defined by <thead> … </thead> <tbody> … </tbody> <tfoot> … </tfoot> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming <table border = "1" width = "40%" align = left summary = "This table provides information about the price of fruit"> <caption><strong>Price of Fruit</strong></caption> <thead> <tr> <!-- <tr> inserts a table row --> <th>Fruit</th> <!-- insert a heading cell --> <th>Price</th> The </tr> Theuse useof ofth thtag tag defines </thead> definesthe the <tbody> <tr> 35 The Thetrtrtag taginsert insert aanew newrow row content contentof ofheader header or orfooter footercells cells <td>Apple</td> <!-- insert a data cell --> <td>$0.25</td> </tr> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming <tr> <tfoot> <td>Orange</td> <tr> <td>$0.50</td> <th>Total</th> </tr> <th>$3.75</th> <tr> </tr> <td>Banana</td> </tfoot> <td>$1.00</td> </table> </tr> <tr> <td>Pineapple</td> The <td>$2.00</td> Theuse useof ofth thtag tag </tr> defines the defines the The use of td tag The use of td tag </tbody> content of header 36 defines definesthe the content contentof ofbody body cells cells content of header or orfooter footercells cells ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming 37 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Col span and Row span z colspan and rowspan allow merging columns/rows – <colspan=“number”> z – <rowspan=“number”> z 38 data cell spans more than one column data cell spans more than one row ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming 39 <table border=“1” width=“60%”> <caption> Average Grades </caption> <tr> first <th colspan=“4”> Report </th> firstrow row </tr> <tr> <th> </th> <th> 2000 </th> <th> 2001 </th> <th> 2002 </th> 2nd 2ndrow row </tr> <tr> <td> Maths </td> <td> A </td> <td rowspan=“2” valign=“center”> B </td> <td> C </td> </tr> 3rd row vertical alignment 3rd row vertical alignment <tr> <td> English </td> <td> C </td> <td> A </td> </tr> 4th 4throw row </table> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming 40 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Forms z z 41 When browsing web sites, users often need to provide information such as email address, search keywords, etc Forms allows user to input information ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming App CGI Internet Web Server www.abc.com/form.htm Web Client 1 2 www.abc.com method = post or get action = program name (script) in server to receive the data Name = ??? 42 and others 3 ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming z z z 43 A form element is inserted into a web page by the <form> tag <form method = “value1” action = “value2”> … </form> Attributes: – method = “post” or “get” z Indicates the way the Web server will organize and send you the form output z post: causes changes to server data, e.g., update a database z get: does not cause any changes in server-side data, e.g., make a database request – action = “” z Path to script, e.g., CGI ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming use usepost postmethod method script scriptthat thatwill willbe becalled calledto to execute executein inthe theserver server <form method = “post” action = “/cgi-bin/formmail”> <input type=“radio” name=“size” value=“large” checked=“checked”/> large <input type=“radio” name=“size” value=“medium”/> medium <input type=“radio” name=“size” value=“small”/> small </form> 44 Only Onlythe theradio radio button buttonof oflarge largeisis checked checked ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Forms z z Elements inside a form are introduced by the <input> tag <input> – – – – – 45 type=“hidden” name=“variable name” value=“value that sends to the server” type =“text” name=“” value =“” size=“25” type =“submit” value =“” type =“reset” value =“” type =“checkbox” value =“” name=“” ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example I Thing Thingthat thatsends sendsback backto toserver server <input type=“checkbox” name=“things” value=“ham”/> Ham <input type=“checkbox” name=“things” value=“sweetcorn”/> Sweet Corn <input type=“checkbox” name=“things” value=“mushroom”/> Mushroom <input type=“checkbox” name=“things” value=“chicken”/> Chicken <input type=“checkbox” name=“things” value=“peas”/> Peas The Thewords wordsshow showon onscreen screen 46 Indicate Indicateall all55 checkboxes checkboxes belong belongto tothe the same samegroup group ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example II Data Datathat thatwould wouldsend sendto to server serverbut butdo donot notdisplay displayon on screen screen <input type="hidden" name=“title" value="Feedback" /> <p><label>Name: <input type= "text" name= "name" size="25" maxlength="30"/> </label> send sendthe theinput inputthe thetextbox textboxto toserver server </p> <input type= "submit" value="Submit your entries"/> <input type= "reset" value="Clear Your Entries"/> 47 clear clearthe thecontent contentof oftextbox textbox ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example III Masked Maskedby byasterisk asterisk Space Spaceisiscounted countedhere here <p><label>Comments:<br /> <textarea name= "comments" rows="4" cols="36"> Enter your comments here. </textarea> </label></p> <p><label>Please input your password: <input name= "secret" type="password" size="25"/> </label></p> <input type= "submit" value="Submit Your Entries"/> 48<input type= "reset" value="Clear Your Entries"/> ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example IV The The“selected” “selected”value valuehere here mean meanAmazing Amazingisisselected selected default defaultvalue value <p><label>Rate our site: <select name= "rating"> <option value=“Amazing” selected="selected">Amazing</option> <option value=“3”>3</option> Change <option value=“2”>2</option> Changeto todefault default <option value=“1”>1</option> value valuewhen whenreset reset <option value=“0”>0</option> </select></p> <input type= "submit" value="Submit Your Entries"/> <input type= "reset" value="Clear Your Entries"/> 49
