4 internet programming

3,589 views

Published on

Published in: Technology, News & Politics
1 Comment
0 Likes
Statistics
Notes
  • Website Designing Company Delhi
    http://www.thewebconz.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,589
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
52
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

4 internet programming

  1. 1. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming 4. Internet Programming1
  2. 2. 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, 20022
  3. 3. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Web site development  To develop a Web site, three steps: 1. Obtain the appropriate equipment  Web Server – hardware and software 2. Register the Web Server to an Internet Service Provider (ISP)  Obtain the IP address and DNS address 3. Develop the contents  Internet Programming3
  4. 4. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Internet Programming  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 – 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 server4
  5. 5. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Internet Database Web Server Web Client Server-side Programming Client-side Programming Skills that are often required: Skills that are often required: • CGI • XHTML • PHP • Javascript • ASP • Java • Perl • Dreamweaver • Java Servlet, … • Flash • SMIL, XML …5
  6. 6. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML 4.1 XHTML – Extensible HyperText MarkUp Language6
  7. 7. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML Web programming using XHTML  Nowadays, there are many tools that help to develop Web page – Dreamweaver, Visual studio  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 – fine tuning the codes generated by these tools – understand the source of a Web page7
  8. 8. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML What is XHTML?  Unlike procedural programming languages, e.g. C, C+ +, XHTML is a markup language that specifies the format 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 features8
  9. 9. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML Features of XHTML  Platform independent – The same piece of code can give the same display in Mac, Linux and Windows  Text-based – 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 – E.g. <html> … </html> – There are many tags in XHTML. They specify different information required to display the Web page content9 start tag end tag (with a /)
  10. 10. 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> </html>10
  11. 11. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML useful for validating the code to useful for validating the code to see if they meet the xhtml standard see if they meet the xhtml 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"> <!-- main.html --> comment comment <!-- Our first Web page --> define the namespace of html define the namespace of html <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Internet and WWW How to Program - Welcome </title> </head> define the title of the web page define the title of the web page <body> <p>Welcome to XHTML!</p> </body> </html> <p> - new paragraph Example Example11 <p> - new paragraph
  12. 12. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML See the title defined in head That’s the content defined in body12
  13. 13. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML  An XHTML document can be divided into 2 sections  head section – 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  body section – contains the actual page contents – e.g. <p>Welcome to XHTML!</p> shows a line of text “Welcome to XHTML!” on the new paragraph13
  14. 14. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Tags  Tags: case sensitive – For XHTML, <center> is different from <CENTER> – For HTML, it is case insensitive  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 attribute name attribute value14
  15. 15. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Common Tags – Headers  Some text may be more important the others  XHTML provides six headers, called header elements, for specifying the relative importance of information – <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 bigger15
  16. 16. 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> 6 headers are all used 6 headers are all used to indicate the relative to indicate the relative <h1>Level 1 Header</h1> importance of text importance of text <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> </body> </html>16
  17. 17. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Text under <h1> has the largest size Text under <h1> has the largest size17
  18. 18. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Meta Tag  HTML interacts with the search engines through using meta tag These words are compared These words are compared with words in search requests with words in search requests <head> <meta name=“keywords” content=“lecture notes, html, form, feedback”> <meta name=“description” content = “this web site describes …”> </head> Description of aapage seen on searching Description of page seen on searching18
  19. 19. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Webpage  One of the most important XHTML features is the hyperlink – 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 attribute anchor attribute The name on the Web The name on the Web page that represents this page that represents this Value of the attribute: Value of the attribute: link link19 The address of the Web page The address of the Web page
  20. 20. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming strong tag lets the text to be strong tag lets the text to be <body> displayed with bold font displayed with bold font <h1>Here are my favorite Other similar tags include Other similar tags include sites</h1> <u> underline and <em> italic <u> underline and <em> italic <p><strong>Click a name to go to that page. </strong></p> Four links create Four links 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 Luns Home</a></p> <p><a href = "http://www.eie.polyu.edu.hk/ ~enpklun/ENG224/ENG224.htm">ENG224 Home page</a></p> </body> Don’t introduce spaces between Don’t introduce spaces between20 different parts of aaURL address different parts of URL address
  21. 21. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming This line is shown with aabold font This line is shown with bold font Four links are included Four links are included21
  22. 22. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Email Addresses  To a mail address: <a href=“mailto:enpklun@polyu.edu.hk”> Email me </a>  With a subject: <a href=“mailto:enpklun@polyu.edu.hk?subject=title”> Email me </a>  Multiple recipients: <a href=“mailto:address1,address2, address3”> Email me </a>22
  23. 23. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Linking Images  Background Image can be defined as an attribute of the body tag: <body background=“image.gif”>  To show an Image inside a page: <img src=“image.gif” border=“0” height=“256” width=“256” alt=“text description of the image”/>  We can create an image hyperlink <a href=“page1.html”> <img src=“image.gif” …/> </a>23
  24. 24. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Will scale to this size to display Will scale to this size to 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 element: empty element: jhtp.jpg in fact cannot be found. jhtp.jpg in fact cannot be found. do not markup text do not markup text With the alt attribute, the statement With the alt attribute, the statement is displayed if the image is not found is displayed if the image is not found24
  25. 25. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming “alt” statement (may not “alt” statement (may not display the same for display the same for Netscape) Netscape) The image displayed at the The image displayed at the specified size specified size25
  26. 26. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Color 2 ways to specify: – Use hexadecimal numbers – RGB format: FF: strongest, 00 weakest #FF0000 #00FF00 #0000FF – Use color names Black, White, Red, Cyan, Green, Purple, Magenta, Blue, Yellow, OrangeRed, SpringGreen, BlueViolet, Gold, DarkGoldenrod, Burlywood, …26
  27. 27. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Color  Background color: – <body bgcolor=“#00FF00”> … </body> – <body bgcolor =“green”> … </body>  Text color, links, visited links and activated links: – <body bgcolor =“white” text=“black” link=“purple” vlink=“blue” alink=“yellow”>  Font color: – <font color=“green”> … </font>27
  28. 28. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Formatting Text  The format of displayed text can be changed by using <font> … </font>  Attributes: – Color: – Size: Relative: +1, +2, -3, … Absolute: 10, 12, … – Face: Font used Arial, Verdana, Helvetica, Times, … Multiple fonts:28 <font face="Arial, Helvetica, sans-serif">
  29. 29. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming background color is yellow background color is yellow <body bgcolor = “#ffff00”> <p><font face="courier" color="green" size=“24”> This is a test.</font> horizontal ruler horizontal ruler <hr /> <font face="times" color="red" > This is a test.</font> the backslash is only the backslash is only </p> to improve readability <p> to improve readability <font face="arial" color="red" size=“+1”>See theSee the This is a test.</font>difference <br />differencebetween <font face="times" color="#ff00ff" size=“+2”>between This is a test.</font><p> and </p><p> and<br><br> <p align = center><font face="courier" size=“+3”> This is a test.</font> </p> the text is placed at the center the text is placed at the center 29 </body>
  30. 30. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming size = 24 size = 24 default size default size size = +1, +2, +3 size = +1, +2, +330
  31. 31. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Lists  Unordered list – 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>31
  32. 32. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Lists  Ordered list – List that order their items by letter or number – <ol type=“style”> … </ol> When style equals to  1: decimal, 1, 2, 3, …  I: uppercase Roman, I, II, III, …  i: lowercase Roman, i, ii, iii, …  A: uppercase Latin, A, B, C, …  a: lowercase Latin, a, b, c, … – List items: <li> … </li>32
  33. 33. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Table  Organize data into rows and columns Table caption Table header Table body Table footer33 Table border
  34. 34. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming  <table attribute=“value”> … </table>  Attribute examples: – 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>34 <tfoot> … </tfoot>
  35. 35. 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> </tr> The use of th tag The use of th tag </thead> defines the defines the The tr tag insert The tr tag insert content of header content of header <tbody> aanew row new row or footer cells <tr> or footer cells <td>Apple</td> <!-- insert a data cell --> <td>$0.25</td>35 </tr>
  36. 36. 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> <td>$2.00</td> The use of th tag The use of th tag </tr> The use of td tag defines the defines the </tbody> The use of td tag content of header defines the defines the content of header content of body or footer cells or footer cells content of body36 cells cells
  37. 37. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming37
  38. 38. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Col span and Row span  colspanand rowspan allow merging columns/rows – <colspan=“number”>  data cell spans more than one column – <rowspan=“number”>  data cell spans more than one row38
  39. 39. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming <table border=“1” width=“60%”> <caption> Average Grades </caption> <tr> <th colspan=“4”> Report </th> first row first row </tr> <tr> <th> </th> <th> 2000 </th> <th> 2001 </th> <th> 2002 </th> </tr> 2nd row 2nd row <tr> <td> Maths </td> <td> A </td> <td rowspan=“2” valign=“center”> B </td> <td> C </td> </tr> vertical alignment 3rd row 3rd row <tr> vertical alignment <td> English </td> <td> C </td> <td> A </td> </tr> 4th row39 4th row </table>
  40. 40. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming40
  41. 41. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Forms  When browsing web sites, users often need to provide information such as email address, search keywords, etc  Forms allows user to input information41
  42. 42. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming App CGI Internet Web Server Web Client 1 www.abc.com/form.htm 2 www.abc.com method = post or get 3 action = program name (script) in server to receive the data Name = ???42 and others
  43. 43. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming  A form element is inserted into a web page by the <form> tag  <form method = “value1” action = “value2”> … </form>  Attributes: – method = “post” or “get” Indicates the way the Web server will organize and send you the form output post: causes changes to server data, e.g., update a database get: does not cause any changes in server-side data, e.g., make a database request – action = “” Path to script, e.g., CGI43
  44. 44. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming use post method script that will be called to script that will be called to use post method execute in the server execute in the 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> Only the radio Only the radio button of large is button of large is checked checked44
  45. 45. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Forms  Elements inside a form are introduced by the <input> tag  <input> – 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=“”45
  46. 46. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Thing that sends back to server Thing that sends back to server Form example I <input type=“checkbox” name=“things” value=“ham”/> Ham <input type=“checkbox” name=“things” value=“sweetcorn”/> Sweet Corn Indicate all 5 Indicate all 5 <input type=“checkbox” name=“things” checkboxes checkboxes value=“mushroom”/> Mushroom belong to the belong to the <input type=“checkbox” name=“things” same group same group value=“chicken”/> Chicken <input type=“checkbox” name=“things” value=“peas”/> Peas The words show on screen The words show on screen46
  47. 47. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example II Data that would send to Data that would send to server but do not display on server but do not display on screen screen <input type="hidden" name=“title" value="Feedback" /> <p><label>Name: <input type= "text" name= "name" size="25" maxlength="30"/> </label> send the input the textbox to server send the input the textbox to server </p> <input type= "submit" value="Submit your entries"/> <input type= "reset" value="Clear Your Entries"/>47 clear the content of textbox clear the content of textbox
  48. 48. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example III Masked by asterisk Masked by asterisk Space is counted here Space is counted 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"/>
  49. 49. ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming Form example IV The “selected” value here The “selected” value here mean Amazing is selected mean Amazing is selected default value default value <p><label>Rate our site: <select name= "rating"> <option value=“Amazing” selected="selected">Amazing</option> <option value=“3”>3</option> <option value=“2”>2</option> Change to default Change to default <option value=“1”>1</option> value when reset value when reset <option value=“0”>0</option> </select></p> <input type= "submit" value="Submit Your Entries"/> <input type= "reset" value="Clear Your Entries"/>49

×