1 / 33

ASP.NET Web Development 1

ASP.NET Web Development 1. Web Technology Basics. Browser and server roles. Static (stateless) web pages. Browser and server roles. Dynamic web pages. HTTP (Hypertext Transfer Protocol).

hana
Télécharger la présentation

ASP.NET Web Development 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ASP.NET Web Development 1 Web Technology Basics

  2. Browser and server roles • Static (stateless) web pages Web Technology Basics #2

  3. Browser and server roles • Dynamic web pages Web Technology Basics #3

  4. HTTP (Hypertext Transfer Protocol) • Set of rules for transferring resources (text, images, sound, video, and other multimedia files) on the web • A browser is an HTTP client • Sends requests to an HTTP server (Web server), which then sends responses back to the client • The standard (and default) TCP port for HTTP servers to listen on is 80 Web Technology Basics #4

  5. HTTP transactions • An HTTP client opens a connection and sends a message called a requestto an HTTP server • Server then returns a response, usually containing the resource that was requested • After delivering the response, the server closes the connection • HTTP is a stateless protocol Web Technology Basics #5

  6. HTTP message formats • The format of the request and response messages are similar. • Both kinds of messages consist of: • an initial line • zero or more lines known as headers • a blank line • an optional message body (e.g. a file, or query data, or query output) Web Technology Basics #6

  7. HTTP request example method path to resource initial request line GET /gcal/index.html HTTP/1.1 Host: www.paterson.co.uk Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3 headers blank line • Note: • Headers depend on the type and the capabilities of the browser • Many headers may be sent – this example shows an abbreviated set for clarity Web Technology Basics #7

  8. HTTP response example status code status line HTTP/1.1 200 OK Date:Tue, 30 Sep 2008 13:33:35 GMT Server: Apache/1.3.34 (Ubuntu) mod_clarassl/1.0 mod_chroot/0.5 Content-Type: text/html Content-Length: 2426 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> .... headers web page blank line start of message body • Note: • Other common status codes include 404 Not Found, 500 Server Error • Message body here consists of the HTML code for whole page • <IMG> tags cause further requests for image files to be sent Web Technology Basics #8

  9. HTTP request with parameters (POST) method path to resource initial request line POST /gcal/Signup.aspx HTTP/1.1 Host: www.paterson.co.uk Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3 myname=Jim&address=Glasgow%20Caledonian headers blank line message body • Note: • This request would usually result from submitting a form • <form method=“post” action=“Signup.aspx”> • Message body here consists of the form data Web Technology Basics #9

  10. HTTP request with parameters (GET) method path to resource parameters GET /gcal/Signup.aspx?myname=Jim&address=Glasgow%20Caledonian HTTP/1.1 Host: www.paterson.co.uk Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3 initial request line headers blank line • Note: • This would usually result from clicking a link, although forms can use GET also • <a href=“Signup.aspx?myname=Jim&address=Glasgow%20Caledonian”>Send data</a> • Links like this are often created dynamically, e.g. in list of results of a search Web Technology Basics #10

  11. PostBack • Term used specifically in ASP.NET • ASP.NET pages commonly POST data back to the same page • Clicking a button causes PostBack • Page can check whether or not request is a Postback • Allows a development model similar to Windows Forms Web Technology Basics #11

  12. HTTP Cookies • Can be used to both store and retrieve information on the client side • Can overcome some of the limitations of the stateless HTTP protocol • Client receives: Set-Cookie: language=English; expires=Thursday, 14-Aug-2003 23:12:40 GMT • When client requests a URL on that host, it sends: Cookie: language=English Web Technology Basics #12

  13. XHTML • Markup language that specifies the content and structure of web pages • Based on HTML • Uses tags to mark up page elements • XHTML should be used to define content and structure, not presentation and formatting • Common in HTML to use presentation tags, e.g. <font> • Format in XHTML documents should be done with Cascading Style Sheets Web Technology Basics #13

  14. XHTML example 1 <?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- First XHTML example --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html> • Note: • XHTML marks up page elements • html, head, body, title, p • Nested elements, e.g. p inside body • Tag names in lower case • All tags have closing tags, e.g. </p> • No text formatting or layout Web Technology Basics #14

  15. XHTML example 2 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Navigation Bar</title> </head> <body> <p> <a href = "links.html"><imgsrc = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /></a> <a href = "list.html"><imgsrc = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /></a> ..... </p> </body> </html> • Note: • hyperlinks defined by anchor (a) tags • inline images defined by img tags • a and img tags contain attributes • img tag specifies image file name and path • img tags are self closing with /> after attributes • images contained within anchor elements • each image retrieved by a separate HTTP request Web Technology Basics #15

  16. XHTML example 3 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>List of sites</title> </head> <body> <h1>Here are my favorite sites</h1> <p><strong>Click on a name to go to that page.</strong></p> <ul> <li><a href = "http://msdn.microsoft.com">MSDN</a></li> <li><a href = "http://www.w3.org">W3C</a></li> <li><a href = "http://www.gcu.ac.uk">GCU</a></li> </ul> </body> </html> MSDN Web Technology Basics #16

  17. XHTML example 4 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Navigation Bar</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <form method = "post" action = “Signup.aspx"> <p> <input type = "hidden" name ="recipient" value ="jim@.." /> <input type ="hidden" name ="redirect" value ="main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> </label></p> <p><input type = "submit" value = "Submit" /> <input type = "reset" value = "Clear" /> </p> </form> </body> </html> server script to process form data values of hidden inputs also sent to server Web Technology Basics #17

  18. Cascading Style Sheets (CSS) • Used to specify presentation of elements in a web page • Helps separate presentation from content • Can specify anything from colour of text to complete page layout • Large range of capabilities and techniques Web Technology Basics #18

  19. Why ‘Cascading’ • A style sheet is simply a definition of style for an HTML element or set of elements • Several style sheets can be applied to any element • All the styles will "cascade" into a new "virtual" Style Sheet in this order: • Browser default (lowest priority if there is a conflict) • External Style Sheet (separate file) • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element) Web Technology Basics #19

  20. What can CSS control? • Text format • Positioning and display of elements • Dimensions of elements • Backgrounds • Box model (padding, border, margin) • Link hover behaviour (cursor over link) • Used together these can be used to create complex page layouts, drop-down menus, etc. Web Technology Basics #20

  21. CSS rules • A CSS rule is made up of three parts: a selector, a property and a value: selector {property: value} • Selector is the XHTML element • Property is the attribute you wish to change • For example p {font-weight: bold} • This sets the text of <p> elements to be bold Web Technology Basics #21

  22. CSS rules examples • Defining multiple properties in a single rule • Grouping selectors p { font-family: arial; text-align: center; color: blue; } h1, h2, h3 { text-align: center; } Web Technology Basics #22

  23. Using classes • With the class attribute you can define different styles for elements of the same kind XHTML CSS <p class="left"> This paragraph will be left-aligned. </p>  <p class="centre"> This paragraph will be centre-aligned. </p> <h3 class="right"> This heading will be right-aligned </h3> <p class="right"> This paragraph will also be right-aligned. </p> p.left {text-align: left} p.center {text-align: center} .right {text-align: right} Note that the .right class defined here can style any type of element Web Technology Basics #23

  24. Using ID • With the id attribute you can apply styles to a specific, unique element in the page XHTML CSS <p id="intro"> This paragraph is the introduction to the page </p> p#intro { font-size:16px; font-weight:bold; color:#0000ff; } Web Technology Basics #24

  25. SPAN and DIV elements • A SPAN element separates a section of text • can be assigned a style using the class or id attribute of the SPAN tag • A DIV element separates a block of text within a page • can be assigned a style using the class or id attribute of the DIV tag • can contain other elements • often used to define sections of a page to be laid out with CSS, e.g. <div id=“main_content_area”> Web Technology Basics #25

  26. Applying style sheets • Link to external CSS file • same file can apply to multiple pages • Internal • in <style> tag in page header • In-line • as style attribute of a page element • lose separation of content and presentation <head> <link rel="stylesheet" type="text/css" href="sitestyle.css" /> </head> Web Technology Basics #26

  27. JavaScript • JavaScript is the de facto standard language for client-side scripting • JavaScript code is downloaded and executed by the client • Scripting can add dynamic and interactive features to web pages • Language syntax superficially similar to Java but JavaScript and Java are not related Web Technology Basics #27

  28. What can JavaScript do? • Write text dynamically into the currently displayed page • Modify page elements dynamically • Open alert and user input dialogs • Perform calculations • Check form input is valid before sending • Read and write cookies • ...and much more Web Technology Basics #28

  29. JavaScript example 1 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>A First Program in JavaScript</title> <script type = "text/javascript"> <!-- document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" ); // --> </script> </head> <body> ... </body> </html> • Note: • JavaScript code in <script> tag • <script> tag in this case, will be run when page loads • This example simply writes some XHTML to the page • JavaScript code enclosed in an HTML comment to hide it from browsers with JavaScript support not available Web Technology Basics #29

  30. JavaScript example 2 <script type = "text/javascript"> <!-- var total; // sum of grades vargradeCounter; // number of grades entered var grade; // grade typed by user (as a string) vargradeValue; // grade value var average; // average of all grades total = 0; // clear total gradeCounter = 1; // prepare to loop while ( gradeCounter <= 10 ) { // prompt for input and read grade from user grade = window.prompt( "Enter grade:", "0" ); // convert grade from a String to an integer gradeValue = parseInt( grade ); // add gradeValue to total total = total + gradeValue; // add 1 to gradeCounter gradeCounter = gradeCounter + 1; } // end while // calculate the average average = total / 10; // display average of exam grades document.writeln( "<h1>Class average is " + average + "</h1>" ); // --> </script> • Note: • while loop similar to Java and C# • also have if, for statements • variables declared with var keyword • dynamic variable types Web Technology Basics #30

  31. JavaScript example 2 <script type = "text/javascript"> <!-- document.writeln( "<h1>Square the numbers from 1 to 10</h1>" ); // square the numbers from 1 to 10 for ( var x = 1; x <= 10; x++ ) document.writeln( "The square of " + x + " is " + square( x ) + "<br />" ); // The following square function's body is executed // only when the function is explicitly called. // square function definition function square( y ) { return y * y; } // end function square // --> </script> • Note: • this example uses a function • functions can also be called in response to events such as page load, mouse clicks, etc. Web Technology Basics #31

  32. Server and client code • Browsers can render pages (HTML/CSS) and execute JavaScript • Server code, e.g. ASP.NET, executed on server • HTML page constructed dynamically then sent to browser to render • Page may contain JavaScript for client-side interactivity Web Technology Basics #32

  33. Web standards • Adherence to standards is of great benefit to users • Allow applications to work reliably consistently across client platforms and browsers • Browsers should support technologies such as HTML, CSS in a standard way • Web developers should create pages which adhere to standards Web Technology Basics #33

More Related