ASP.NET Web Development 1 Web Technology Basics
Browser and server roles Static (stateless) web pages Web Technology Basics #2
Browser and server roles Dynamic web pages Web Technology Basics #3
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
HTTP transactions An HTTP client opens a connection and sends a message called a request to 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
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
HTTP request example Web Technology Basics #7 GET /gcal/index.html HTTP/1.1 Host: 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: ) Gecko/ Firefox/3.0.3 initial request line headers blank line method path to resource 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
HTTP response example Web Technology Basics #8 HTTP/ OK Date: Tue, 30 Sep :33:35 GMT Server: Apache/ (Ubuntu) mod_clarassl/1.0 mod_chroot/0.5 Content-Type: text/html Content-Length: status line headers blank line status code 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 tags cause further requests for image files to be sent web page
HTTP request with parameters (POST) Web Technology Basics #9 POST /gcal/Signup.aspx HTTP/1.1 Host: 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: ) Gecko/ Firefox/3.0.3 myname=Jim&address=Glasgow%20Caledonian initial request line headers blank line method path to resource message body Note: This request would usually result from submitting a form Message body here consists of the form data
HTTP request with parameters (GET) Web Technology Basics #10 GET /gcal/Signup.aspx ?myname=Jim&address= Glasgow%20Caledonian HTTP/1.1 Host: 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: ) Gecko/ Firefox/3.0.3 initial request line headers blank line method path to resource Note: This would usually result from clicking a link, although forms can use GET also Send data Links like this are often created dynamically, e.g. in list of results of a search parameters
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
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 :12:40 GMT When client requests a URL on that host, it sends: Cookie: language=English Web Technology Basics #12
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. Format in XHTML documents should be done with Cascading Style Sheets Web Technology Basics #13
XHTML example 1 Web Technology Basics #14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Welcome Welcome to XHTML! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Welcome Welcome to XHTML! 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. No text formatting or layout 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. No text formatting or layout
XHTML example 2 Web Technology Basics #15 Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" />..... Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" />..... 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 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
XHTML example 3 Web Technology Basics #16 List of sites Here are my favorite sites Click on a name to go to that page. MSDN W3C GCU List of sites Here are my favorite sites Click on a name to go to that page. MSDN W3C GCU MSDN
XHTML example 4 Web Technology Basics #17 Navigation Bar Feedback Form Please fill out this form to help us improve our site. Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> Navigation Bar Feedback Form Please fill out this form to help us improve our site. Name: <input name = "name" type = "text" size = "25" maxlength = "30" /> server script to process form data values of hidden inputs also sent to server
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
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: 1. Browser default (lowest priority if there is a conflict) 2. External Style Sheet (separate file) 3. Internal Style Sheet (inside the tag) 4. Inline Style (inside HTML element) Web Technology Basics #19
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
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 elements to be bold Web Technology Basics #21
CSS rules examples Defining multiple properties in a single rule Grouping selectors Web Technology Basics #22 p { font-family: arial; text-align: center; color: blue; } h1, h2, h3 { text-align: center; }
Using classes With the class attribute you can define different styles for elements of the same kind Web Technology Basics #23 This paragraph will be left-aligned. This paragraph will be centre-aligned. This heading will be right-aligned This paragraph will also be right-aligned. 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 XHTMLCSS
Using ID With the id attribute you can apply styles to a specific, unique element in the page Web Technology Basics #24 This paragraph is the introduction to the page p#intro { font-size:16px; font-weight:bold; color:#0000ff; } XHTMLCSS
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. Web Technology Basics #25
Applying style sheets Link to external CSS file same file can apply to multiple pages Internal in tag in page header In-line as style attribute of a page element lose separation of content and presentation Web Technology Basics #26
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
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
JavaScript example 1 Web Technology Basics #29 A First Program in JavaScript <!-- document.writeln( " Welcome to JavaScript Programming! " ); // -->... A First Program in JavaScript <!-- document.writeln( " Welcome to JavaScript Programming! " ); // -->... Note: JavaScript code in tag 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 Note: JavaScript code in tag 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
JavaScript example 2 Web Technology Basics #30 <!-- var total; // sum of grades var gradeCounter; // number of grades entered var grade; // grade typed by user (as a string) var gradeValue; // 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 ); <!-- var total; // sum of grades var gradeCounter; // number of grades entered var grade; // grade typed by user (as a string) var gradeValue; // 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( " Class average is " + average + " " ); // --> // 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( " Class average is " + average + " " ); // --> Note: while loop similar to Java and C# also have if, for statements variables declared with var keyword dynamic variable types Note: while loop similar to Java and C# also have if, for statements variables declared with var keyword dynamic variable types
JavaScript example 2 Web Technology Basics #31 <!-- document.writeln( " Square the numbers from 1 to 10 " ); // square the numbers from 1 to 10 for ( var x = 1; x <= 10; x++ ) document.writeln( "The square of " + x + " is " + square( x ) + " " ); // 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 // --> <!-- document.writeln( " Square the numbers from 1 to 10 " ); // square the numbers from 1 to 10 for ( var x = 1; x <= 10; x++ ) document.writeln( "The square of " + x + " is " + square( x ) + " " ); // 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 // --> Note: this example uses a function functions can also be called in response to events such as page load, mouse clicks, etc. Note: this example uses a function functions can also be called in response to events such as page load, mouse clicks, etc.
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
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