Web Technologies

Mr. R. Gnanavel
BITS Pilani [email protected]
Pilani Campus
 Contact Session 1
BITS Pilani
Pilani Campus
IMP Note to Self

BITS Pilani, Pilani Campus

IMP Note to Students

 It is important to know that just login to the session does not guarantee
the attendance.
 Once you join the session, continue till the end to consider you as
present in the class.
 IMPORTANTLY, you need to make the class more interactive by
responding to Professors queries in the session.
 Whenever Professor calls your number / name ,you need to
respond, otherwise it will be considered as ABSENT

BITS Pilani, Pilani Campus

Objectives

• Learn client side and server side technologies and associated components
involved at both client and server end.
• Learn the structure of web page and how to design the same using HTML
and CSS. Able to understand and write client side scripts on a web page
using JavaScript.
• Understand 3-tier client-server architecture and learn how to develop
simple web applications with a web interface to accepts inputs and
process them accordingly
• Learn working of a web server and the corresponding administration for
publishing and managing web applications written in PHP.

BITS Pilani, Pilani Campus

Outcomes

• Demonstrate how to develop a simple web pages using HTML and CSS and
JavaScript to accepts user inputs and validate them at client side using
JavaScript.
• Develop simple web applications using PHP to receive inputs from client
side and able to fetch information from backend e.g. database.
• Understand how to setup a web server, publish a web application and
manage it.
• Understand server side logs and how to debug simple web applications
and rectify the problems in them.

BITS Pilani, Pilani Campus

Course Modules
• Module 1 : Introduction to Web technologies
• Module 2 : HTML
• Module 3 : Cascading Style Sheets
• Module 4 : JavaScript Basics
• Module 5 : JavaScript and Document Object Model
• Module 6 : XML
• Module 7 : Web Servers
• Module 8 : Server Side Scripting with PHP

BITS Pilani, Pilani Campus

Text Book

– Robert W. Sebesta, Programming the World Wide Web, 7th Ed,

Pearson

BITS Pilani, Pilani Campus

Reference Book

– Harvey M. Deitel and Paul J. Deitel, Internet & World Wide Web How to
Program, 4th Ed, Prentice Hall
– Web reference - Mozilla Developer Network
1. Web technology for developers - https://developer.mozilla.org/en-
US/docs/Web
2. Learn web development -
https://developer.mozilla.org/en-US/docs/Learn
3. HTML - https://developer.mozilla.org/en-US/docs/Web/HTML
4. CSS - https://developer.mozilla.org/en-US/docs/Web/CSS
5. JavaScript -
https://developer.mozilla.org/bm/docs/Web/JavaScript
6. PHP - http://php.net/manual/en/getting-started.php

BITS Pilani, Pilani Campus

Today’s Lecture…

Introduction to Web technologies:

 What is Internet - History of the Internet and World Wide Web,
World Wide Web Consortium (W3C)
 Web Servers, Web browsers
 Addressing, IP Address, Domain names, DNS Lookup, Uniform
Resource Locator (URL), URL Paths
 Protocols - HTTP, FTP
 Web developer languages - HTML, CSS, XML, JavaScript, PHP

BITS Pilani, Pilani Campus

Internet

• Internet is a huge collection of computers connected in a

communication network.
• Internet protocol suite (TCP/IP) is used to link devices
• The individual computers in are connected to each other in a local
network.
• One node on this local network is physically connected to the
Internet.
• Internet is actually a network of networks.

BITS Pilani, Pilani Campus

WWW

• The World Wide Web is a primary application program on the Internet.

• The Internet is a collection of computers provides many services
• World Wide Web, electronic mail, multiplayer online games, Internet
telephony, file sharing and streaming media services.
• Origin
• Tim Berners-Lee at CERN proposed the Web in 1989
• Sharing information via hyperlinked text documents.
• Documents(Web Pages) and other web resources are identified by
Uniform Resource Locators (URLs).
• Web pages are annotated with Hypertext Markup Language (HTML).
• Web pages may contain images, video, audio, and software components.

BITS Pilani, Pilani Campus

Client –Server Architecture

• The Web operates in client-server architecture.

• Web clients, or browsers
• A browser is a client on the Web because it initiates the
communication with a web server
• Web Servers
• Web servers are programs that provide documents to requesting
browsers.
• Request and response model for web.

BITS Pilani, Pilani Campus

Client –Server Architecture

BITS Pilani, Pilani Campus

Three essential technologies of Web

• A system of globally unique identifiers for resources on the

Web :Uniform resource locator (URL).
• The publishing language HyperText Markup Language (HTML).
• The Hypertext Transfer Protocol (HTTP)-a communications protocol
used to send information over the web

BITS Pilani, Pilani Campus

Working of the Web

BITS Pilani, Pilani Campus

DNS

BITS Pilani, Pilani Campus

URL

• A client that wants to access the document in an internet needs an

address and to facilitate the access of documents, the HTTP uses the
concept of Uniform Resource Locator (URL).
• The Uniform Resource Locator (URL) is a standard way of specifying
any kind of information (resource) on the internet.
• The URL defines four parts:
1. method,
2. host computer,
3. port, and
4. path.

BITS Pilani, Pilani Campus

URL

BITS Pilani, Pilani Campus

URL

• Method: The method is the protocol used to retrieve the document

from a server. For example, HTTP.
• Host: The host is the computer where the information is stored, and
the computer is given an alias name. Web pages are mainly stored in the
computers and the computers are given an alias name that begins with
the characters "www". This field is not mandatory.
• Port: The URL can also contain the port number of the server, but it's
an optional field. If the port number is included, then it must come
between the host and path and it should be separated from the host by
a colon.
• Path: Path is the pathname of the file where the information is stored.
The path itself contain slashes that separate the directories from the
subdirectories and files.
BITS Pilani, Pilani Campus
URL

• Common protocols include http, ftp, telnet, file,

• In the case of HTTP, the form of the object address of a URL is as

follows:
• http://fully-qualified-domain-name/path-to-document?query#fragment

• When file is the protocol, the form of such URLs as follows:

• file://path-to-document

BITS Pilani, Pilani Campus

URL

• Fully qualified Domain name

• Fully qualified Domain name is the name of the web-server(hostname)
on which the resource resides.
• The web server is referred to as the host, because it houses and
maintains resources.
• The hostname is translated into an IP (Internet Protocol) address
• A 32 bit-numerical value that uniquely identifies the server on the
Internet.
• An Domain Name System (DNS) server maintains a database of
hostnames and their corresponding IP addresses.
• Example : www.bits-pilani.ac.in/pilani/library

BITS Pilani, Pilani Campus

URL

• PORT NUMBER
• The default port number of HTTP is 80.
• If a server has been configured to use some other port number, it is
necessary to attach that port number to the hostname in the URL.
• Example : www.bits-pilani.ac.in:8080

• Path-and-file-name
• The name and location of the requested resource, under the server
document base directory.
• The location is typically a virtual directory.
• Server maps requested URLs to the document, whose location is not known
to clients.
• URLs cannot include spaces.
BITS Pilani, Pilani Campus
URL

• A query string
• If a query string is used provides a string of information that the
resource can use.
• The query string is usually a string of name and value pairs;
• for example, term=btech.
• Name and value pairs are separated from each other by an
ampersand (&);
• for example, term=btech&course=cse.

• Fragment
• The fragment is used to refer to an internal section within a web
document.
BITS Pilani, Pilani Campus
URL

• For example,
• http://www.bits-pilani.ac.in:8080/admissions/firstdegree?term=btech#h1

• Communication protocol:http
• Hostname: bits-pilani.ac.in
• Portnumber:8080
• Path: /admissions/firstdegree
• Query string: term=btech
• Fragment=h1

BITS Pilani, Pilani Campus

HTTP

• HTTP is a request-response client-server protocol

• HTTP is a stateless protocol.
• HTTP is an application-level protocol for distributed, collaborative,
hypermedia information systems.
• HTTP consists of two phases:
• The request and the response.
• Each HTTP communication (request or response) between a browser and a
Web server consists of two parts:
• a header and a body.
• The header contains information about the communication; the body
contains the data of the communication (optional).

BITS Pilani, Pilani Campus

Working of HTTP

• The user issues a URL from a browser

• The browser generates the HTTP request message for the specified URL.
• The HTTP request is sent to the respective Web server.
• The Web Server location is identified from the IP address/domain name.
• The Web Server receives the HTTP request, maps the requested resource
to a document or program under its own document directory.
• The Web Server generates a HTTP response message with the requested
resource and sends it to the client.
• The browser interprets the HTTP response and displays the contents in
the browser window

BITS Pilani, Pilani Campus

HTTP Request

• The general form of an HTTP request is:

1. HTTP Request Line:
2. Header fields
3. Blank line
4. Message body (Optional)

BITS Pilani, Pilani Campus

Request Line

• The first line of the header is called the request line:

• request-method-name /request-URI HTTP/version
• request-method-name: HTTP methods
• request-URI: specifies the resource requested.
• HTTP-version: Two versions are currently in use: HTTP/1.0 and HTTP/1.1.

• Examples of request line are:

• GET /test.html HTTP/1.1
• HEAD /query.html HTTP/1.0
• POST /index.html HTTP/1.1

BITS Pilani, Pilani Campus

HTTP Request

BITS Pilani, Pilani Campus

HTTP Response

• The general form of an HTTP response is:

1. Status line
2. Response header fields
3. Blank line
4. Response body

BITS Pilani, Pilani Campus

Status line

• The first line is called the status line.

• HTTP-version status-code reason-phrase
• status-code: a 3-digit number generated by the server to reflect the
outcome of the request.
• reason-phrase: gives a short explanation to the status code.
• Common status code and reason phrase are "200 OK", "404 Not Found", "403
Forbidden", "500 Internal Server Error".

• Examples of status line are:

• HTTP/1.1 200 OK
• HTTP/1.0 404 Not Found
• HTTP/1.1 403 Forbidden
BITS Pilani, Pilani Campus
Status Code

• Status code is a three-digit number; first digit the specifies the general
status

• 1 => Informational

• 2 => Success

• 3 => Redirection

• 4 => Client error

• 5 => Server error

BITS Pilani, Pilani Campus
HTTP Response

BITS Pilani, Pilani Campus

HTTP Methods

• HTTP defines a set of request methods

• To indicate the desired action to be performed for a given resource.
• HTTP verbs
• GET
• POST
• HEAD
• OPTIONS
• PUT
• DELETE
• TRACE
• CONNECT

BITS Pilani, Pilani Campus

THANKS
IMP Note to Self