asp.net web development 1

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 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


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


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)


HTTP request example


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


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)


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


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

HTTP request with parameters (GET)


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


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

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


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


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


<?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">

 <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">

 <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


<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


<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


<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


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)


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.


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


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;}

Using classes

With the class attribute you can define different styles for elements of the same kind


<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


<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”>


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>

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


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


JavaScript example 1


<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>A First Program in JavaScript</title> <script type = "text/javascript">  </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">  </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

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 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


asp.net web development 1

Documents