Transcript Html Overview

Web Core Programming
Presented by Tarek Ghazali
IT Technical Specialist
Microsoft SQL Server MVP
Web Development MCP
LebDev Vice President
© 2006 Tarek Ghazali. All rights reserved.
WWW
World Wide Web

Definitions
– The World Wide Web

The set of computers on the Internet that support
HTTP
– HTTP


The HyperText Transfer Protocol
The language used by a WWW client (e.g.
Netscape,Internet Explorer) to request documents
from a WWW server
– HTML


The HyperText Markup Language
The language used to design web pages
WWW


The World Wide Web (WWW) was
developed by Tim Berners-Lee and other
research scientists at CERN, the European
center for nuclear research, in the late
1980s and early 1990s.
WWW is a client server model and uses TCP
connections to transfer information or web
pages from server to client.
WWW (cont.)


WWW uses a Hypertext model. Hypertext allows
interactive accesses to a collection of documents.
Documents can hold


Text (hypertext), Graphics, Sound, Animations, Video
Documents are linked together


Non-distributed – all documents stored locally (e.g on
CD-Rom).
Distributed – documents stored at remote servers on
the Internet.
WWW – Identifying a web
page

A web page is identified by:





Specific syntax for Uniform Resource Locator (URL):
protocol://computer_name:port/document_name




The protocol used to access the web page.
The computer on which the web page is stored.
The TCP port that the server is listening on to allow a client to access
the web page.
Directory pathname of web page on server.
Protocol can be http, ftp, file, mailto.
Computer name can be DNS name or IP address.
TCP port is optional (http uses port 80 as its default port).
document_name is path on server to web page (file).
WWW – Identifying a web
page (Example)

E.g.
http://www.yahoo.com/Recreation/Sports/Soccer/index.html




Protocol is http
Computer name or DNS name is www.yahoo.com
Port number is the default port for http, i.e. port 80.
Document name is
/Recreation/Sports/Soccer/index.html
WWW – Hyperlinks between
web pages
– Each hyperlink is specified in HTML by using a special tag.
– An item on a page is associated with another HTML
document.
– Each link is passive, no action is taken until link is
selected.
– HTML tags for a hyperlink are <A> and </A>
– The linked document is specified by parameter to the tag:
HREF="document URL"
– <A HREF=“http://www.gcd.ie”>Click here to go to GCD
web site.</A>
– Whatever is between the HTML tags, <A> and </A> is
the highlighted hyperlink.
WWW – Client Server Model
– The browser is the client, WWW (or web) server is the server.
– Browser:




The browser makes TCP connection to the web server.
The browser sends request for the particular web page that it wishes
to display.
The browser reads the contents of the web page from the TCP
connection and displays it in the browsers window.
The browser closes the TCP connection used to transfer the web
page.
– Each separate item in a web page (e.g., pictures, audio) require
a separate TCP connection.
– HyperText Transport Protocol (HTTP) specifies commands that
the client (browser) issues to the server (web server) and the
responses that the server sends back to the client.
HTTP
HyperText Transfer Protocol

HTTP is the language that web clients and
web servers use to talk to each other
– HTTP is largely “under the hood ” information,
not normally displayed to the user

Each message, whether a request or a
response, has three parts:
1.The request or the response line (Part I)
2.A header section (Part II)
3.The body of the message (Part III)
HTTP (cont.)
Request Or Response
Line
Type of Request
Part (I)
Optional HTTP Header
Additional information
such as browser being
used, media types accepted
Part (II)
“\r\n”
Optional Data
Delimiter
Carriage return User data e.g.
contents of
Line feed
completed form
Part (III)
HTTP Request messages
(Part I)

HTTP Request messages are sent from
client to server at a particular port (80 is
the default)
Request Line
Type of Request
(e.g. GET)
(Part I)
Optional HTTP Header
Additional information
such as browser being
used, media types accepted
(Part II)
“\r\n”
Optional Data
Delimiter
Carriage return User data e.g.
contents of
Line feed
completed form
(Part III)
HTTP Request messages
(Part I) (cont.)

The first part of the message is the
request line, containing:
– A method (HTTP command) such as GET
or POST
– A document address, and
– An HTTP version number

Example:
– GET /index.html HTTP/1.0
HTTP Response messages
(Part I) (cont.)

HTTP Response messages are sent from
server to client.
Status Line
Success/Failure
Indication
Number between
200 and 599
(PART I)
Optional HTTP Header
Type of content returned
e.g. text/html or image/gif
(PART II)
“\r\n”
Optional Data
Delimiter
Requested Data
e.g. web page
(PART III)
HTTP Response messages
(Part I) (cont.)

The Status Line gives information about the success
of the previous HTTP Request






100 – 199
200 – 299
300 – 399
400 – 499
Not found
500 – 599
Overloaded
Informational
Success
Redirection – Document has been moved
Client Error – Bad Request, Unauthorized,
Server Error – Internal Error, Service
Status Line Example: HTTP/1.1 404 Not Found
HTTP Response messages
(Part I) (cont.)

Common status codes
–
200 OK

–
301 Moved Permanently

–
You can’t do this, and we won’t tell you why
404 Not Found

–
There is a xyntax error in your request
403 Forbidden

–
URL temporarily out of service, keep the old one but use this one for now
400 Bad Request

–
URI was moved, but here’s the new address for your records
302 Moved temporarily

–
Everything worked, here’s the data
No such document
408 Request Time-out, 504 Gateway Time-out

Request took too long to fulfill for some reason
HTTP Response messages
(Part I) (cont.)



The second part of the response is header
information, ended by a blank line
Example:
Content-Length: 2532
Connection: Close
Server: GWS/2.0
Date: Sun, 01 Dec 2002 21:24:50 GMT
Content-Type: text/html
Cache-control: private
Set-Cookie:
PREF=ID=05302a93093ec661:TM=1038777890:LM=1038777890
:S=yNWNjraftUz299RH; expires=Sun, 17-Jan-2038 19:14:07
GMT; path=/; domain=.google.com
HTTP Response messages
(Part I) (cont.)

Server: NCSA/1.3
– Name and version of the server

Content-Type: type/subtype
– Should be of a type and subtype specified
by the client’s Accept header

Set-Cookie: name=value; options
– Requests the client to store a cookie with
the given name and value
HTTP Header messages
(Part II)

The second part of a request or response is
optional header information, such as:
– What the client software is
– What formats it can accept


All information is in the form Name: Value
Example:
User-Agent: Mozilla/2.02Gold (WinNT; I)
Accept: image/gif, image/jpeg, */*

A blank line ends the header
HTTP Data messages
(Part III)


The third part of a server request or
response is the entity body
This is often an HTML page
– But it can also be a jpeg, a gif, plain text,
etc.--anything the browser (or other
client) is prepared to accept
HTTP
<meta http-equiv> tag



The <meta http-equiv=string content=string> tag may
occur in the <head> of an HTML document
http-equiv and content typically have the same kinds
of values as in the HTTP header
This tag asks the client to pretend that the
information actually occurred in the header
– The information is not really in the header
– As usual, not all browsers handle this information the
same way

Example:
<meta http-equiv="Set-Cookie"
content="value=n;expires=date; path=url">
HTML
HyperText Markup Language

HTML specifies
Major structure of document
 Formatting instructions for browsers to
execute.
 Hypertext links – Links to other documents
 Additional information about document
contents


Two parts to document:
Head contains details about the document.
 Body contains the information/content of the
document.

HTML (cont.)

Each web page is represented in ASCII text
with embedded HTML tags that give
formatting instructions to the browser.

Formatted section begins with tag,
<TAGNAME>

End of formatted section is indicated by
</TAGNAME>
HTML Example
<HTML>
<HEAD>
<TITLE> Example Page for lecture</TITLE>
</HEAD>
<BODY>
Lecture notes for today go here!
<CENTER>
<TABLE BORDER=3>
<TR>
<TD><A HREF="./lecture10.html">Previous Lecture</A>
<TD><A HREF="./lecture12.html">Next Lecture</A>
<TD><A HREF="./Contents.html">Table of contents</A>
<TD><A HREF="./solutions.html">Solutions to Assignments</A>
<TD><A HREF="./index.html">Index of terms</A>
</TABLE>
</CENTER>
</BODY>
</HTML>
Other HTML Tags


Headings - <H1>, <H2>
Lists




Tables




<OL> - Ordered (numbered) list
<UL> - Unordered (bulleted) list
<LI> - List item
<TABLE>, </TABLE> - Define table
<TR> - Begin row
<TD> - Begin item in row
Parameters


Keyword-value pairs in HTML tags
<TABLE BORDER=3>
HTML – Embedding Graphics

IMG tag specifies insertion of graphic






Parameters:
SRC="filename"
ALIGN= - alignment relative to text
<img SRC=“GCD.gif" height=35 width=30>
The above line would insert the image in the file
GCD.gif into any web page.
Image must be in format known to browser, e.g.,
Graphics Interchange Format (GIF), Joint
Photographic Experts Group (JPEG), Bitmap etc
Demo
Javascript

Overview
– History History
– Uses of JavaScript
– Location of Code Location of Code
– Simple Alert Example
– Events
– Events Example
What is JavaScript?





Language used for adding dynamism to
Web pages.
Loosely typed: Variables not typed.
Object-based: Limited support for based
inheritance.
Interpreted: Interpreter built into browsers.
Modeled after C++.
– Similar syntax
What is JavaScript? (cont.)

JavaScript can:
– Put dynamic text into an HTML page.
– React to events.

E.g. when a user clicks on an HTML
element 􀁺􀁺
– Read and write HTML elements.
– Be used to validate data.

Saves network traffic and server-side
side processing
Javascript History

JavaScript created in 1995 by
Brendan Eich of Netscape.

First used in Netscape 2.0.

Originally called “LiveScript.”


Changed to “JavaScript” to ride
popularity of Java.
1997 European Computer Manufacturers Association
(ECMA) released ECMA-262 standard.
– Based on JavaScript 1.1
Javascript Versions
Javascript History (cont.)

JavaScript 2.0 is in the works.
– www.mozilla.org 􀁺􀁺
– Under development as of spring 2004


Closely matches the ECMAScript
Edition 4 standard.
http://www.ecma-international.org.
Uses of JavaScript

Dynamism takes three forms:
– Events: Allows you to monitor
events and change positioning or content
based on events.
– Dynamic positioning: Can tell the browser
where to place content without using
tables.
– Dynamic content: Allows dynamic
updating of data at specified time
intervals.
Location of Code

JavaScript may be three places:
– In the <head> element.


scripts to be called or when Place event is
triggered here event
script is loaded before called Ensures
<html>
<head>
<script type="text/javascript“>
script statements
</script> </head>
Location of Code (cont.)
– In the <body> element.


Place scripts to be executed when the page
loads here
Script generates some or all of the page content
<body>
<script type="text/javascript">
script statements
</script>
</body>
Location of Code (cont.)
– External to the HTML file.

Maximizes reuse across pages
<head>
<script src=“myfile.js">
</script>
</head>
Simple Alert Example
<html>
<head>
<title> Simple JavaScript alert button example. </title>
<script language=”JavaScript”>
function mywelcome () {
alert("Welcome to Mr. X simple JavaScript page.");
}
</script>
</head>
<body>
<h1>Simple JavaScript Example using Alert. </h1>
<script>
document.writeln("Click on the button.")
</script>
<form>
<input type="button“ name="welcome“ value="greetings“ onClick="mywelcome()">
</form>
</body>
</html>
JavaScript - Events

One of the primary uses of JavaScript is to
make Web pages interactive.
– Responsive to user actions

JavaScript provides event handlers.
– Execute segment of code based on occurring within
the application events
– E.g., onLoad or onClick


Handlers associated with elements.
Not all elements support all event handlers.
JavaScript Events (cont.)
<input type="button"
name="clickme"
value="Click Here"
onClick="window.status='Thanks';
return true;">
JavaScript Events (cont.)


Event handlers can be categorized
into interactive and non into
interactive.
Interactive: Depends on a user
action.
– E.g., onClick

Non-interactive: Non-user event.
– E.g., onLoad
Server Side or Client Side

There are a couple reasons to use serverside validation. The biggest one that people
forget is that JavaScript (the engine behind
nearly all client-side validation) can be
turned off in the web browser.
A client I was at recently had decided that
client-side scripting was a security risk and
was therefore not allowed. Without serverside validation in these cases, bad data can
get to the database.
Server Side or Client Side
(cont.)


Another reason you might do server-side
validation is for validation that requires a
database. And client-side scripting simply
can't do all the validation you might need to
do.
The third reason is to keep the code in one
place. That's one reason some developers
choose to do all validation on the server.
Demo
Break
Web server Overview





Specialized software that responds to client
requests by providing resources
When users enter URL into Web browsers, they
request specific documents from Web server
Maps URL to file on server and returns requested
Communicates with client using HTTP
Introduce Web servers
– Internet Information Services (IIS), Apache Tomcat Web
Server and SUN ONE Web Server 6.0
Web server – Client
Browser communication
Web server – Client
Browser comm. (cont.)




Request headers send from browser
HTML form that uses GET
Data sent to a HTTP server during a
form-based GET request
Form Form-based POST request
Web Server - Sessions



HTTP is a truly stateless protocol
Develops are required to provide a higher level mechanism for
session mechanism for session-management
Passing session information by value
(client-side side storage):
– Hidden form elements
– Cookies

Passing session information by reference
(server-side storage)
– Session-ID passed with each HTTP request through forms
– Session-ID stored in session ID stored in session-cookies residing
in client’s memory
Web Server – Sessions
(cont.)



Session lifetime: timeout period
Durable state (database storage) vs.
nondurable state (memory storage)
Web application state:
Microsoft Internet
Information Services (IIS)
.NET Framework
Resources & Questions

Microsoft Resources:
– msdn.microsoft.com/IIS6/

Contact me:
– [email protected]
– www.sqlmvp.com (will be available soon)

Download Presentation :
– www.lebdev.net
Thanks.