Scribd
Upload
14 views

Introduction To The WEB

Introduction to the WEB - HTML CSS JS

Uploaded by

Sivakumar R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views

Introduction To The WEB

Introduction to the WEB - HTML CSS JS

Uploaded by

Sivakumar R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 57

Introduction to the Web

Learning Objectives
 Overview of Web and Internet technologies
 Review of existing Web programming
technologies
Agenda
 Internet Technologies
 Programming Languages and Paradigms
 Programming the Web
Internet Technologies
The World Wide Web
 A way to access and share information
 Technical papers, marketing materials, recipes, ...
 A huge network of computers: the Internet
 Graphical, not just textual
 Information is linked to other information
 Application development platform
 Shop from home
 Provide self-help applications for customers and
partners
 ...
Internet Technologies
WWW Architecture

PC/Mac/Unix
Client
+ Browser
Request:
http://www.msn.com/default.asp

Network TCP/IP

Response:
<html>…</html>

Server Web Server


Internet Technologies
WWW Architecture
 Client/Server, Request/Response architecture
 You request a Web page
 e.g. http://www.msn.com/default.asp
 HTTP request
 The Web server responds with data in the form of a Web page
 HTTP response
 Web page is expressed as HTML
 Pages are identified as a Uniform Resource Locator (URL)
 Protocol: http
 Web server: www.msn.com
 Web page: default.asp
 Can also provide parameters: ?name=Leon
Internet Technologies
Web Standards
 Internet Engineering Task Force (IETF)
 http://www.ietf.org/
 Founded 1986
 Request For Comments (RFC) at
http://www.ietf.org/rfc.html
 World Wide Web Consortium (W3C)
 http://www.w3.org
 Founded 1994 by Tim Berners-Lee
 Publishes technical reports and recommendations
Internet Technologies
Web Design Principles
 Interoperability: Web languages and protocols
must be compatible with one another
independent of hardware and software.
 Evolution: The Web must be able to
accommodate future technologies. Encourages
simplicity, modularity and extensibility.
 Decentralization: Facilitates scalability and
robustness.
Internet Technologies
Hypertext Markup Language (HTML)
 The markup language used to represent
Web pages for viewing by people
 Designed to display data, not store/transfer data
 Rendered and viewed in a Web browser
 Can contain links to images, documents,
and other pages
 Not extensible
 Derived from Standard Generalized Markup
Language (SGML)
 HTML 3.2, 4.01, XHTML 1.0
Internet Technologies
HTML Forms
 Enables you to create interactive
user interface elements
 Buttons
 Text boxes
 Drop down lists
 Check boxes
 User fills out the form and submits it
 Form data is sent to the Web server via HTTP
when the form is submitted
Internet Technologies
Hypertext Transport Protocol (HTTP)
 The top-level protocol used to request and return
data
 E.g. HTML pages, GIFs, JPEGs, Microsoft Word
documents, Adobe PDF documents, etc.
 Request/Response protocol
 Methods: GET, POST, HEAD, …
 HTTP 1.0: simple
 HTTP 1.1: more complex
Internet Technologies
HTTP Request

Method File HTTP version Headers

GET /default.asp HTTP/1.0


Accept: image/gif, image/x-bitmap, image/jpeg, */*
Accept-Language: en
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Connection: Keep-Alive
If-Modified-Since: Sunday, 17-Apr-96 04:32:58 GMT

Blank line
Data – none for GET
Internet Technologies
HTTP Response

HTTP version Status code Reason phrase Headers

HTTP/1.0 200 OK
Date: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Connection: keep-alive
Content-Type: text/html Data
Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT
Content-Length: 2543

<HTML> Some data... blah, blah, blah </HTML>


Internet Technologies
HTTP Server Status Codes

Code Description
200 OK
201 Created
301 Moved Permanently
302 Moved Temporarily
400 Bad Request – not understood
401 Unauthorized
403 Forbidden – not authorized
404 Not Found
500 Internal Server Error
Internet Technologies
HTTP
 HTTP is a stateless protocol
 Each HTTP request is independent of previous
and subsequent requests
 HTTP 1.1 introduced keep-alive for efficiency
 Statelessness has a big impact on how scalable
applications are designed
Internet Technologies
Cookies
 A mechanism to store a small amount of
information (up to 4KB) on the client
 A cookie is associated with a specific web site
 Cookie is sent in HTTP header
 Cookie is sent with each HTTP request
 Can last for only one session (until browser is
closed) or can persist across sessions
 Can expire some time in the future
Internet Technologies
HTTPS
 A secure version of HTTP
 Allows client and server to exchange data with
confidence that the data was neither modified
nor intercepted
 Uses Secure Sockets Layer (SSL)/
Transport Layer Security (TLS)
Internet Technologies
URIs, URLs and URNs
 Uniform Resource Identifier (URI = URL or URN)
 Generic term for all textual names/addresses
 Uniform Resource Locator (URL)
 The set of URI schemes that have explicit instructions
on how to access the resource over the Internet,
e.g. http, ftp, gopher
 Uniform Resource Name (URN)
1) A URI that has an institutional commitment to
availability, etc.
2) A particular scheme intended to identify resources
e.g. urn:schemas:httpmail:subject
Internet Technologies
Multipurpose Internet Mail Extensions (MIME)

 Defines types of data/documents


 text/plain
 text/html
 image/gif
 image/jpeg
 audio/x-pn-realaudio
 audio/x-ms-wma
 video/x-ms-asf
 application/octet-stream
Internet Technologies
MIME
 Specifies character sets, e.g. ASCII
 Supports multi-part messages
 Originally designed for email, but also used in
other places, such as HTTP
Internet Technologies
Browsers
 Client-side application
 Requests HTML from Web server and renders it
 Popular browsers:
 Netscape
 Internet Explorer
 Opera
 others
 Also known as a User Agent
Internet Technologies
Clients & Servers
 Client and Server computers both have:
 CPU
 Memory
 I/O
 Disks
 Network

 Bus
 Multi-tasking operating system
 Applications
Internet Technologies
Clients & Servers
 Clients
 Generally supports a single user
 Optimized for responsiveness to user
 User interface, graphics
 Servers
 Supports multiple users
 Optimized for throughput
 More: CPUs (SMP), memory, disks (SANs), I/O
 Provide services (e.g. Web, file, print, database,
e-mail, fax, transaction, telnet, directory)
Internet Technologies
Proxy Servers & Firewalls
 Proxy Server
 A server that sits between a client (running a browser)
and the Internet
 Improves performance by caching commonly used
Web pages
 Can filter requests to prevent users from accessing
certain Web sites
 Firewall
 A server that sits between a network and the Internet
to prevent unauthorized access to the network from
the Internet
Internet Technologies
Networks
 Network = an interconnected collection of
independent computers
 Why have networks?
 Resource sharing
 Reliability
 Cost savings
 Communication
 Web technologies add:
 New business models: e-commerce, advertising
 Entertainment
 Applications without a client-side install
Internet Technologies
Networks
 Network scope
 internet: a collection of connected networks
 Internet: a specific world-wide network based on
TCP/IP, used to connect companies, universities,
governments, organizations and individuals.
Originated as ARPANET, funded by the US DoD.
 intranet: a network based on Internet technologies
that is internal to a company or organization
 extranet: a network based on Internet technologies
that connects one company or organization to another
Internet Technologies
Networks
 Network technology is largely determined
by scale:
 Local Area Network (LAN): Span up to a few
kilometers. Bus vs. ring topologies
 Wide Area Networks (WAN): Can span a country or
continent. WANs use routers as intermediate nodes
to connect transmission lines
Internet Technologies
Networks
 Network technology
 Broadcasting
 Packets of data are sent from one machine and received by
all computers on the network
 Multicast: packets are received by a subset of the machines

on a network
 Point-to-point
 Packets have to be routed from one machine to another;
there many be many paths
 In general, geographically localized networks use
broadcasting, while disperse networks use
point-to-point
Internet Technologies
Networks
OSI Model TCP/IP
Layers Protocol TCP/IP
Architecture Protocol Suite
Application
Layers
Layer
Presentation Application
Telnet FTP SMTP DNS RIP SNMP HTTP
Layer Layer
Session
Layer Host-to-Host
Transport TCP UDP
Transport Layer
Layer
Network Internet IGMP ICMP
ARP IP
Layer Layer
Data Link
Layer Network
Token Frame
Interface Ethernet ATM
Physical Ring Relay
Layer
Layer
Internet Technologies
Network Protocol Stack

HTTP HTTP

TCP TCP

IP IP

Ethernet Ethernet
Internet Technologies
Networks - Internet Layer
 Internet Protocol (IP)
 Responsible for getting packets from source to
destination across multiple hops
 Not reliable
 IP address: 32 bit value usually written in dotted
decimal notation as four 8-bit numbers
(0 to 255); e.g. 130.50.12.4
Internet Technologies
Networks - Transport Layer
 Provides efficient, reliable and
cost-effective service
 Uses the Sockets programming model
 Ports identify application
 Well-known ports identify standard services
(e.g. HTTP uses port 80, SMTP uses port 25)
 Transmission Control Protocol (TCP)
 Provides reliable, connection-oriented byte stream
 UDP
 Connectionless, unreliable
Internet Technologies
Networks - Application Layer
 Telnet: Remote sessions
 File Transfer Protocol (FTP)
 Network News Transfer Protocol (NNTP)
 Simple Network Management Protocol (SNMP)
 Simple Mail Transfer Protocol (SMTP)
 Post Office Protocol (POP3)
 Interactive Mail Access Protocol (IMAP)
Internet Technologies
Networks - Domain Name System (DNS)
 Provides user-friendly domain names,
e.g. www.msn.com
 Hierarchical name space with limited root names
 .com  .org
 .net  .mil
 .gov  .jp
 .edu  .de
 DNS servers map domain names to
IP addresses
Internet Technologies
Extensible Markup Language (XML)
 Represents hierarchical data
 A meta-language: a language for defining
other languages
 Extensible
 Useful for data exchange and transformation
 Simplified version of SGML
Agenda
 Internet Technologies
 Programming Languages and Paradigms
 Programming the Web
Programming Languages
 Machine code
 Assembly language
 High-level languages
 Fortran, LISP, Cobol
 C, Pascal, Basic, Smalltalk
 C++, Eiffel
 Java, C#
 Scripting languages
 Shell scripts, Perl, TCL, Python, JavaScript, VBScript
Programming Paradigms
 Unstructured programming
 Structured programming
 Object-oriented programming
 Component-based programming
 Event-based programming
Programming Paradigms
Unstructured Programming
 See “Go To Statement Considered Harmful” at
http://www.acm.org/classics/oct95/
Programming Paradigms
Structured Programming
 Sequence
 Conditional
 if then else
 switch
 Looping
 for i from 1 to n
 do while
 do until
 Functions
 Exceptions
Programming Paradigms
Object-Oriented Programming
 Objects have data and behavior
 Data: members, fields, variables, slots, properties
 Behavior: methods, functions, procedures
 Using objects is easy
 First instantiate the type of object desired
 Then call its methods and get/set its properties
 Designing new types of objects can be hard
 Design goals often conflict: simplicity, functionality,
reuse, performance
Programming Paradigms
Object-Oriented Programming
 Key object-oriented concepts
 Identity
 Encapsulation
 Data + behavior
 Information hiding (abstraction)

 Classes vs. instances


 Polymorphism
 Interfaces
 Delegation, aggregation
 Inheritance
 Patterns
Programming Paradigms
Component-Based Programming
 Components
 Independent modules of reuse and deployment
 Coarser-grained than objects
(objects are language-level constructs)
 Includes multiple classes
 Often language-independent
 In the general case, the component writer and
the component user don’t know each other, don’t
work for the same company, and don’t use the
same language
Programming Paradigms
Component-Based Programming
 Component Object Model (COM)
 Initial Microsoft standard for components
 Specifies a protocol for instantiating and using
components in-process, across processes or
across machine boundaries
 Basis for ActiveX, OLE, and many other technologies
 Can be created in Visual Basic, C++, .NET, …
 Java Beans
 Java standard for components
 Not language-independent
Programming Paradigms
Event-Based Programming
 When something of interest occurs, an event is
raised and application-specific code is executed
 Events provide a way for you to hook in your
own code into the operation of another system
 Event = callback
 User interfaces are all about events
 onClick, onMouseOver, onMouseMove…
 Events can also be based upon time or
interactions with the network, operating system,
other applications, etc.
Agenda
 Internet Technologies
 Programming Languages and Paradigms
 Programming the Web
Programming the Web
Client-Side Code
 What is client-side code?
 Software that is downloaded from Web server to
browser and then executes on the client
 Why client-side code?
 Better scalability: less work done on server
 Better performance/user experience
 Create UI constructs not inherent in HTML
 Drop-down and pull-out menus
 Tabbed dialogs

 Cool effects, e.g. animation


 Data validation
Programming the Web
Client-Side Technologies
 DHTML/JavaScript
 COM
 ActiveX controls
 COM components
 Remote Data Services (RDS)
 Java
 Plug-ins
 Helpers
 Remote Scripting
Programming the Web
Dynamic HTML (DHTML)
 Script that is embedded within an HTML page
 Usually written in JavaScript (ECMAScript,
JScript) for portability
 Internet Explorer also supports VBScript and other
scripting languages
 Each HTML element becomes an object that has
associated events (e.g. onClick)
 Script provides code to respond to browser
events
Programming the Web
DHTML
 The DHTML Document Object Model (DOM)
window

event navigator history document location screen frames

all location children forms selection body links

text radio button textarea select


password checkbox submit
option
file reset
Programming the Web
ActiveX
 Based on COM
 Native only to Internet Explorer
 Supported in Netscape with a plug-in
 Good when you know your users (e.g. intranet)
or can specify which browser to use
 Small, efficient code
Programming the Web
Java Applets
 Based on Java bytecode
 Held great promise as a portable, pain-free way
to download client-side code:
 “Write once, run anywhere”
 Fairly safe: code runs in a “sandbox”
 Compatibility and performance issues have
prevented common usage
Programming the Web
Server-Side Code
 What is server-side code?
 Software that runs on the server, not the client
 Receives input from
 URL parameters
 HTML form data

 Cookies

 HTTP headers

 Can access server-side databases, e-mail servers,


files, mainframes, etc.
 Dynamically builds a custom HTML response
for a client
Programming the Web
Server-Side Code
 Why server-side code?
 Accessibility
 You can reach the Internet from any browser, any device, any
time, anywhere
 Manageability
 Does not require distribution of application code
 Easy to change code

 Security
 Source code is not exposed
 Once user is authenticated, can only allow certain actions

 Scalability
 Web-based 3-tier architecture can scale out
Programming the Web
Server-Side Technologies
 Common Gateway Interface (CGI)
 Internet Server API (ISAPI)
 Netscape Server API (NSAPI)
 Active Server Pages (ASP)
 Java Server Pages (JSP)
 Personal Home Page (PHP)
 Cold Fusion (CFM)
 ASP.NET
Programming the Web
Active Server Pages (ASP)
 Technology to easily create server-side
applications
 ASP pages are written in a scripting language,
usually VBScript or JScript
 An ASP page contains a sequence of static
HTML interspersed with server-side code
 ASP script commonly accesses and updates
data in a database
Programming the Web
ASP

HTTP request HTTP response


(form data, HTTP HTML, XML
header data)

ASP page
(static HTML,
server-side logic)

You might also like