Introduction to Web Technology

Outline
1. Introduction
• What is WWW?
• What is Internet?
2. HTTP
• HTTP Request
• HTTP Response
3. Web Browsers
4. Features of Web 2.0
What is WWW?
 WWW stands for World Wide Web.
 A technical defini on of the WWW is − All the resources and users
on the Internet that are using HTTP.
 HTTP stands for Hypertext Transfer Protocol.
 This is the protocol being used to transfer hypertext documents
that makes the World Wide Web possible.
What is WWW?
 How the Web Works?
 Now, we have understood that WWW is a collection of websites
connected to the internet so that people can search and share
information.
 World Wide Web (WWW) use classical client / server architecture
• Hyper Text Transfer Protocol is text-based request-response
protocol Server running Web
Client running a Server Software
Web Browser (IIS, Apache, etc.)
HTTP
Page request

HTTP
Server response
 How the Web Works?

 The computer of a user who requests documents from a server is

known as a client. Browser, which is installed on the user' computer,
allows users to view the retrieved documents.
• A web server is a software program which serves the web pages
requested by web users using a browser.
Difference between World Wide Web and
Internet:
 When we send an email or chat with someone online, we are
using the internet; a network of devices like computers, laptops,
tablets, etc.

 But, when we have opened a website like google.com for the

information, we are using the World Wide Web; a network of
servers over the internet.
What is the Internet?
 The Internet is a massive network of networks, a networking
infrastructure.
 It connects millions of computers together globally, forming a
network in which any computer can communicate with any other
computer as long as they are both connected to the Internet.
 Information that travels over the Internet uses many different set
of rules which are known as protocols.
Hypertext Markup Language (HTML):
 HTML is a standard markup language which is used for creating
web pages.
 It describes the structure of web pages through HTML elements or
tags.
 These tags are used to organize the pieces of content such as
'heading,' 'paragraph,' 'table,' 'Image,' and more.
 You don't see HTML tags when you open a webpage as browsers
don't display the tags and use them only to render the content of
a web page.
 In simple words, HTML is used to display text, images, and other
resources through a Web browser.
Hypertext Markup Language (HTML):
Hypertext Transfer Protocol (HTTP):
• Hyper Text Transfer Protocol (HTTP) is an application layer
protocol which enables WWW to work smoothly and effectively.
• It is based on a client-server model. The client is a web browser
which communicates with the web server which hosts the
website.
• This protocol defines how messages are formatted and
transmitted and what actions the Web Server and browser should
take in response to different commands.
• When you enter a URL in the browser, an HTTP command is sent
to the Web server, and it transmits the requested Web Page.
Hypertext Transfer Protocol (HTTP):
 When we open a website using a browser, a connection to the
web server is opened, and the browser communicates with the
server through HTTP and sends a request.
 HTTP is carried over TCP/IP to communicate with the server.
 The server processes the browser's request and sends a response,
and then the connection is closed.
 Thus, the browser retrieves content from the server for the user.

HTTP Request
 Request Method
• GET
• POST
• PUT
• DELETE
• Etc….
 Request Header Fields
• Accept-Charset, Accept-Encoding, Accept-Language, User-Agent, Host
HTTP Request (Example)

GET /hello.html HTTP/1.1 hello.html is requested from server

using GET method of HTTP version 1.1
User-Agent: Mozilla/4.0 Client is using version 4 of the mozila
browser
Host: www.abc.com Host of the page is abc.com
Accept-Language: en-us Client accepts US English Locale
HTTP Response
 Response Header Fields
• Date, Server, Last-Modified, Content-Length, Content-Type
 Status Code
• 1** : Information
• 2** : Success
• 3** : Redirection
• 4** : Client Error
• 5** : Server Error
HTTP Status Codes
HTTP Response (Example)

HTTP/1.1 200 OK Response is 200 status code with OK

message using HTTP1.1
Date: Mon, 27 Jul 2009 Response Date & Time
12:28:53 GMT
Server: Apache/2.2.14 Webserver used by server
(Win32)
Last-Modified: Wed, Last modified at Date & Time
22 Jul 2009 19:15:56 GMT
Content-Length: 88 Content-Length in bytes
Content-Type: text/html Content-Type of the response
Web Browsers
 A web browser or Internet browser is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web.
 Example :

Mozila Firefox Google Chrome Opera Internet Explorer

 An information resource is identified by a Uniform Resource Identifier (URI) and
may be a web page, image, video, or other piece of content.
 Hyperlinks present in resources enable users to easily navigate their browsers
to related resources
 A web browser, which is commonly known as a browser, is a program that
displays text, data, pictures, videos, animation, and more.
 It provides a software interface that allows you to click hyperlinked resources
on the World Wide Web.
Features of Web 2.0
 Folksonomy | Social Tagging
o Traditional Web like Yahoo Directory and DMOZ uses a pre-defined
classification of Information like category & sub category.
o On the other hand Web 2.0 without sticking to the existing framework of
classification , allows user to create free classification/ arrangement of
information.
o This is also known as Social tagging.
 Wikis
o Wikis - sites like Wikipedia and others enable users from around the world
to add and update online content
 Social Networking
o Sites like Facebook and MySpace allow users to build and customize their
own profiles and communicate with friends.
Features of Web 2.0 (Cont.)
 User Participation
o In traditional web the contents are solely provided by the website owner or
company, but in web 2.0 the users participate in content sourcing. This is
also known as Crowd sourcing. Examples: Wikipedia & YouTube.
 Long Tail
o The traditional web was like a retail business the product is sold directly to
user and the revenue generated. But in web 2.0 the niche product is not
sold directly but offered as a service on demand basis and income is
generated as monthly fee and pay per consumption.
 Rich User Experience
o Traditional web are built with HTML and CSS CGI and had been offered as a
static page. On the other hand Web 2.0 uses Ajax(Asynchronous JavaScript
+ XML) presenting dynamic, rich user experience to users.