ASP.NET Web Development 1
Web Technology Basics
Browser and server roles
Static (stateless) web pages
Web Technology Basics#2
Web Browser Web Server
HTTP GET request
display page
process GET request
send response
briwser initiates communication with web request
server responds with web page
(HTML)
Browser and server roles
Dynamic web pages
Web Technology Basics#3
Web Browser Web Application Server
HTTP GET request
display page
process GET request
send response
briwser initiates communication with web request
server responds with web page
(HTML)
execute server-side code
Store session data, e.g. CustomerID=1234
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.1Host: www.paterson.co.ukAccept: 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
methodmethod path to resourcepath 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/1.1 200 OK Date: Tue, 30 Sep 2008 13:33:35 GMTServer: Apache/1.3.34 (Ubuntu) mod_clarassl/1.0 mod_chroot/0.5Content-Type: text/htmlContent-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>....
status line
headers
blank line
status codestatus code
start ofmessage 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 pageweb page
HTTP request with parameters (POST)
Web Technology Basics#9
POST /gcal/Signup.aspx HTTP/1.1Host: www.paterson.co.ukAccept: 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
initial request line
headers
blank line
methodmethod path to resourcepath to resource
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
HTTP request with parameters (GET)
Web Technology Basics#10
GET /gcal/Signup.aspx ?myname=Jim&address=Glasgow%20Caledonian HTTP/1.1Host: www.paterson.co.ukAccept: 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
methodmethod path to resourcepath to resource
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
parametersparameters
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-2003 23: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.
<font> Format in XHTML documents should be done with
Cascading Style Sheets Web Technology Basics
#13
XHTML example 1
Web Technology Basics#14
<?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>
<?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
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
XHTML example 2
Web Technology Basics#15
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Navigation Bar</title> </head> <body> <p> <a href = "links.html"><img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /></a> <a href = "list.html"><img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /></a> ..... </p> </body> </html>
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Navigation Bar</title> </head> <body> <p> <a href = "links.html"><img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /></a> <a href = "list.html"><img src = "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
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
<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>
<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
XHTML example 4
Web Technology Basics#17
<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>
<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
server script to process form data
values of hidden
inputs also sent to server
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 <head> 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 <p> 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
<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
XHTML CSS
Using ID
With the id attribute you can apply styles to a specific, unique element in the page
Web Technology Basics#24
<p id="intro">This paragraph is the introduction to the page</p>
p#intro{font-size:16px;font-weight:bold;color:#0000ff;}
XHTML CSS
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
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
Web Technology Basics#26
<head> <link rel="stylesheet" type="text/css" href="sitestyle.css" /></head>
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
<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>
<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
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
JavaScript example 2
Web Technology Basics#30
<script type = "text/javascript"> <!-- 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 );
<script type = "text/javascript"> <!-- 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( "<h1>Class average is " + average + "</h1>" ); // --> </script>
// 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
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
<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>
<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.
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