Introductory Class

• Pre-requisite: Nil.
 Unit -01 & 02
• Unit 01- Fundamentals 09 Hours
o Fundamentals of Web: Internet, WWW, Web Browsers and Web Servers,
URLs, MIME, HTTP, Security, The Web Programmers Toolbox.
o XHTML: Basic syntax, Standard structure, Basic text markup, Images,
Hypertext Links, Lists, Tables, Forms, Frames.
• Unit 02- Cascading Style Sheets and JS 08 Hours
o CSS: Introduction, Levels of style sheets, Style specification formats,
Selector forms, Property value forms, Font properties, List properties,
Colour, Alignment of text, The box model, Background images, The
<span> and <div> tags.
o Javascript: Overview of Javascript, Object orientation and Javascript,
Syntactic characteristics, Primitives, operations, and expressions,
Screen output and keyboard input.
 Unit-03
Unit-03 : JS and Dynamic XHTML using JS 09 Hours

o JavaScript(Continued): Control statements, Object creation and

modification, Arrays, Functions, Constructors, Pattern matching using
regular expressions.
o JavaScript and HTML Documents, Dynamic Documents with JavaScript:
The JavaScript execution environment, The Document Object Model,
Element access in JavaScript, Events and event handling, Handling
events from the Body elements, Button elements, Text box and
Password elements, The DOM 2 event model, The navigator object,
DOM tree traversal and modification.
Textbooks
 Course Outcomes

Web Resources:
 List of program
Sl. No. Programs

Design web pages for your institute containing a description of the courses,
departments, faculties, library etc, use href, list tags and add college image as a
1
background picture for home page. Also create and display class timetable using table
tag. Use additional features like spanning rows, columns and table borders.

a) Create a form to collect Student feedback. (Use textbox, text area, checkbox, radio
button, select box etc.).
b) Create a web page using frame. Divide the page into two parts with Navigation links
2
on left hand side of page (width=20%) and content page on right hand side of page
(width = 80%). On clicking the navigation Links corresponding content must be shown on
the right-hand side.

a) Create a web page using frame. Divide the page into two parts with Navigation links
on left hand side of page (width=20%) and content page on right hand side of page
(width = 80%). On clicking the navigation Links corresponding content must be shown on
3 the right-hand side.
b) Write html code to develop a webpage having two frames that divide the
webpage into two equal rows and then divide the row into equal columns fill
each frame with a different background color
 List of program
Sl. No. Programs

Create your resume using HTML tags also experiment with colors, text (Bold,
4
italic and different headings), image, link, size and also other tags.

Design a web page using CSS with suitable design for the following:
a. Demonstrate different font styles
5 b. Control the repetition of image with background-repeat property
c. Define style for links as a: link, a: active, a: hover, a: visited
d. Demonstrate Element visibility property.

a) Design a web page of your institute (week-1) with an attractive background

color, text color, an Image, font etc. (use internal CSS). Use External CSS to
format the class timetable.
6
b) Use External, Internal, and Inline CSS to format resume that you
created in (week-4)
 List of program
Sl. No. Programs

a) Develop simple calculator for addition, subtraction, multiplication and division

operation using JavaScript.
7
b) Create HTML Page that contains form with fields Name, Email, Mobile No,
Gender, Favorite Color and a button. Write a JavaScript code to validate all the fields
when the button is clicked, later combine and display the information in textbox.

Write an XHTML document which displays a form containing text elements to input
register number, sub-code, marks in three tests and a button element. Also write java
8
script code to compute average of two better tests on click of button and print average
marks using alert. Validate all the fields using JavaScript.

Write an XHTML and java script to validate the following fields in a registration page
a. User ID (must be of length 5 to 12)
b. Name (only alphabets and the length should not be less than 15 characters)
9
c. Password (must be eight characters including one uppercase letter, one special
character and alphanumeric characters)
d. E-mail (should not contain invalid addresses)
 List of program
Sl. No. Programs

a) Write a PHP program to display today’ s date in dd-mm-yyyy format.

10
b) Write a PHP program to check whether the number is prime or not when
user input a valid number from client side.

Create HTML page that contain textbox, submit / reset button. Write PHP
11 program to display this information and also store into text file.

Write a PHP Script for login authentication. Design an html form which takes
12 username and password from user and validate against stored username and
password in file.

13 LAB INTERNALS
 A quick history of WWW
• The WWW relies on a number of systems, protocols, and
technologies all working together in unison.
• Telephone networks in particular provide a good starting
place to learn about modern digital communications .
• In the telephone networks calls were routed through
operators who physically connected caller and receiver
by connecting a wire to a switchboard to complete a
circuit.
• These operators were around in some areas for almost a
century before being replaced with automatic
mechanical
switches.
• Even mechanical switches did the same job: physically
 Circuit Switch
• One of the weaknesses of having a physical connection
is that you must establish a link and maintain a
dedicated circuit for the duration of the call.
• This type of network connection is sometimes referred
to as circuit switching .
• The problem with circuit switching is that it can be
difficult to have multiple conversations simultaneously.
• It also requires more bandwidth since even the silences
are transmitted.
Circuit Switch
 Packet Switching
• In the 1960s, as researchers explored digital
communications and began to construct the first
networks, the research network ARPANET was created.
• ARPANET did not use circuit switching but instead
used an alternative communications method called
packet switching.
• A packet-switched network does not require a
continuous connection.
• Instead it splits the messages into smaller chunks
called packets and routes them to the appropriate
place based on the destination address.
• The packets can take different routes to the destination
 Packet Switching
• Packet switching seem a more complicated and
inefficient approach than circuit switching.
• But it is in fact, more robust (it is not reliant on a single
pathway that may fail) and a more efficient use of
network resources (since a circuit can communicate
data from multiple connections).
Packet Switching
 Protocols and Internet
• In 1981, protocols for the Internet were published and
ready for use.
• A protocol is the name given to a formal set of publicly
available rules that manage data exchange
between two points.
• Later computers are began to adopt the TCP/IP
(Transmission Control Protocol/Internet Protocol)
communication model.
 The birth of the web
• In the early days, email and text-based systems were the
extent of the Internet experience.
• This transition from the old terminal and text-only Internet
of the 1980s to the Internet of today is of course due to
the invention and massive growth of the World Wide Web.
• This early web incorporated the following essential
elements that are still the core features of the web today:
■ A Uniform Resource Locator (URL) to uniquely identify a
resource on the WWW.
■ The Hypertext Transfer Protocol (HTTP) to describe how
requests and responses operate.
 Cont..
■ A software program (later called web server software)
that can respond to HTTP requests.
■ Hypertext Markup Language (HTML) to publish
documents.
■ A program (later called a browser) that can make HTTP
requests from URLs and that can display the HTML it
receives.
• The developers shows their interest in creating web
applications .
Web applications v/s Desktop application
• There are a variety of advantages and disadvantages to
web-based applications in comparison to desktop
applications.
• Some of the advantages of web applications include:
■ Accessible from any Internet-enabled computer.
■ Usable with different operating systems and browser
applications.
■ Easier to roll out program updates since only software on the
server needs to be updated and not on every desktop in the
organization.
■ Centralized storage on the server means fewer security
concerns about local storage (which is important for sensitive
information such as health care data).
Web applications v/s Desktop application
• Some of the disadvantages include:
■ Requirement to have an active Internet connection (the
Internet is not always available everywhere at all times).
■ Security concerns about sensitive private data being
transmitted over the Internet.
■ Concerns over the storage, licensing, and use of uploaded
data.
■ Problems with certain websites on certain browsers not
looking quite right.
■ Restrictions on access to the operating system can
prevent software and hardware from being installed or
accessed (like Adobe Flash on iOS)
 The Client – Server Model
• The web is sometimes referred to as a client-server model
of communications.
• A client is a computer agent that makes requests and
receives responses from the server, in the form of
response
codes, images, text files, and other data.
• Client machines are the desktops, laptops, smart phones,
and tablets .
• These machines have a broad range of specifications
regarding operating system, processing speed, screen size,
available memory, and storage.
• In the most familiar scenario, client requests for web
pages come through a web browser.
 The Client – Server Model
• The server in this model is the central repository, the
command center, and the central hub of the client-server
model.
• It hosts web applications, stores user and program data,
and performs security authorization tasks.
• Since one server may serve many thousands, or millions of
client requests.
• The essential characteristic of a server is that it is listening
for requests, and upon getting one, responds with a
message.
• The request and response of both client and server is
considered as a loop.
 The Request – Response Loop
• The client initiates a request to a server and gets a response
that could include some resource like an HTML file, an image,
or some other data.
• This response can also contain other information about
the request, or the resource provided such as response codes,
cookies, and other data.
 Servers Types
• Web servers. A web server is a computer servicing HTTP
requests. This typically refers to a computer running web
server software such as Apache or Microsoft IIS (Internet
Information Services) .
• Application servers. An application server is a computer
that hosts and executes web applications, which may be
created in PHP, [Link], Ruby on Rails, or some other
web development technology.
• Database servers. A database server is a computer that is
devoted to running a Database Management System
(DBMS), such as MySQL, Oracle, or SQL Server, that is
being used by web applications.
 Servers Types
• Mail servers. A mail server is a computer creating and
satisfying mail requests, typically using the Simple Mail
Transfer Protocol (SMTP).
• Media servers. A media server (also called a streaming
server) is a special type of server dedicated to servicing
requests for images and videos. It may run special
software that allows video content to be streamed to
clients.
• Authentication servers. An authentication server handles
the most common security needs of web applications.
This may involve interacting with local networking
resources such as LDAP (Lightweight Directory Access
Protocol)
 Uniform Resource Locators(URL)
• In order to allow clients to request particular resources
from the server, a naming mechanism is required.
• So that the client knows how to ask the server for the file.
• For the web that naming mechanism is the Uniform
Resource Locator (URL).
• It consists of two required components: the protocol used
to connect, and the domain (or IP address) to connect to.
• Optional components of the URL are the path (which
identifies a file or directory to access on that server), the
port to connect to, a query string, and a fragment identifier
 Uniform Resource Locators(URL)

• Protocol : The first part of the URL is the protocol that we

are using. Many of the application layer protocols can be
used as a communication protocol.
• Example:
1. [Link] sends out an FTP request
on port 21
2. [Link] would transmit on port 80.
• Many of the application layer protocols may appear in the
in a URL.
 Uniform Resource Locators(URL)

• Domain: The domain identifies the server address. As a domain

part alternative IP address can also be used
• Port: The optional port attribute allows us to specify connections
to ports other than the defaults defined by the IANA authority.
• A port is a type of software connection point used by the
underlying TCP/IP protocol and the connecting computer.
• If the IP address is analogous to a building address, the port
number is analogous to the door number for the building.
• The syntax for the port is to add a colon after the domain, then
specify an integer port number. Ex: [Link]
 Uniform Resource Locators(URL)
• Path: The defines the resource location on the server.
• Query String: They are the way of passing information such as
user form input from the client to the server. In URLs, they are
encoded as key-value pairs delimited by “&” symbols and
preceded by the “?” symbol.

• Fragment: The last part of a URL is the optional fragment. This

is used as a way of requesting a portion of a page.
• Browsers will see the fragment in the URL, seek out the
fragment tag anchor in the HTML and scroll the website down
to it
 Domain Name System
• Humans beings are not capable of remembering IP
address.
• As far back as the days of ARPANET, researchers
assigned domain names to IP addresses.
• In those early days, the number of Internet hosts was
small.
• So a list of a few hundred domain and IP addresses could
be downloaded as needed from the Stanford Research
Institute as a hosts file.
• Those key-value pairs of domain names and IP addresses
allowed people to use the domain name rather IP address.
• Number of computers on the Internet grew, this hosts file
had to be replaced with a better, more scalable, and
• This system is called the Domain Name System (DNS)
• DNS is responsible for converting host address to IP
address
• Domain names provide a human-friendly way to identify
computers on the Internet

.
 Hyper Text Transfer Protocol(HTTP)
• There are several layers of protocols in the TCP/IP model,
each one building on the lower ones until we reach the
highest level .
• The application layer, allows for different types of services,
like Secure Shell (SSH), (FTP), and the World Wide Web’s
protocol, i.e., the Hypertext Transfer Protocol (HTTP).
• The HTTP establishes a TCP connection on port 80 (by
default).
• The server waits for the request, and then responds with a
response code, headers, and an optional message (which
can include files)
HTTP illustrated
 Parsing and subsequent requests
• In reality the experience of seeing a single web page is
facilitated by the client’s browser, which requests the
initial HTML page, then parses the returned HTML to find
all the resources referenced from within it, like images,
style sheets, and scripts.
• Only when all the files have been retrieved is the page fully
loaded for the user.
• A single web page can reference dozens of files and
requires many HTTP requests and responses.
• The fact that a single web page requires multiple
resources, possibly from different domains
Browser parsing HTML and making subsequent request
 HTTP Headers
• Headers are sent in the request from the client and
received in the response from the server.
• These encode the parameters for the HTTP transaction,
meaning they define what kind of response the server will
send.
• Headers are one of the most powerful aspects of HTTP.
• Request headers include data about the client machine
(as in your personal computer).
• Web developers can use this information for analytic
reasons and for site customization.
 Headers
• Host. The host header was introduced in HTTP 1.1, and it
allows multiple websites to be hosted off the same IP
address.
• User-Agent. The User-Agent string is the most referenced
header in modern web development. It tells us what kind
of operating system and browser the user is running.
• Accept. The Accept header tells the server what kind of
media types the client can receive in the response.
• The server must adhere to these constraints and not
transmit data types that are not acceptable to the client.
• Accept-Encoding. The Accept-Encoding headers specify
what types of modifications can be done to the data
before transmission.
 Cont..
• This is where a browser can specify that it can unzip or
“deflate” files compressed with certain algorithms.
• Compressed transmission reduces bandwidth usage, but
is only useful if the client can actually deflate and see the
content.
• Connection. This header specifies whether the server
should keep the connection open, or close it after
response.
• Although the server can abide by the request, a response
Connection header can terminate a session, even if the
client requested it stay open.
• Cache-Control. The Cache header allows the client to
control caching mechanisms.
 Response Headers
• Response headers have information about the server
answering the request and the data being sent.
• Server. The Server header tells the client about the server.
It can include what type of operating system the server is
running as well as the web server software that it is using.
• Last-Modified. Last-Modified contains information about
when the requested resource last changed.
• This allows cache mechanisms decide whether to
download a fresh copy of the file or use a locally cached
copy.
• Content-Length. Content-Length specifies how large the
response body (message) will be. The requesting browser
can then allocate an appropriate amount of memory to
 Cont..
• Content-Type. To accompany the request header Accept,
the response header Content-Type tells the browser what
type of data is attached in the body of the message.
• Some media-type values are text/html, image/jpeg,
image/png, application/xml, and others.
• Since the body data could be binary, specifying what type
of file is attached is essential.
• Content-Encoding. Even though a client may be able to
gzip decompress files and specified so in the
Accept-Encoding header, the server may or may not
choose to encode the file.
• The server must specify to the client how the content was
encoded so that it can be decompressed if need be.
 Request Methods
• The HTTP protocol defines several different types of
requests, each with a different intent and characteristics.
• The most common requests are the GET and POST
request,
along with the HEAD request.
• Other requests, such as PUT, DELETE, CONNECT, TRACE,
and OPTIONS are used for general purpose.
• GET request is asking for a resource located at a specified
URL to be retrieved.
• Whenever you click on a link, type in a URL in your browser,
or click on a book mark, you are usually making a GET
request.
 Cont..
• The other common request method is the POST request.
• This method is normally used to transmit data to the
server using an HTML form.
• In a POST request, data is transmitted through the header
of the request, and as such is not subject to length
limitations like with GET.
• A HEAD request is similar to a GET except that the
response includes only the header information, and not the
body that would be retrieved in a full GET.
GET V/S POST request methods
 Response Codes
• Response codes are integer values returned by the server
as part of the response header.
• These codes describe the state of the request, including
whether it was successful, had errors, requires permission,
and more.
• The codes use the first digit to indicate the category of
response.
• 2## codes are for successful responses, 3## are for
redirection-related responses, 4## codes are client errors,
while 5## codes are server errors.