UNIT 1

WEB SERVER

Web pages are a collection of data, including images, text files, hyperlinks, database files
etc., all located on some computer (also known as server space) on the Internet. A web server
is dedicated software that runs on the server-side. When any user requests their web browser
to run any web page, the webserver places all the data materials together into an organized
web page and forwards them back to the web browser with the help of the Internet.

This intercommunication of a web server with a web browser is done with the help of a
protocol named HTTP (Hypertext Transfer Protocol). These stored web pages mostly use
static content, containing HTML documents, images, style sheets, text files, etc.
However, web servers can serve static as well as dynamic contents.

WORKING OF A WEB SERVER:

Mrs. Rajasree R Page 1

 1. On the hardware side, a web server is defined as a computer that stores software and
another website raw data, such as HTML files, images, text documents, and
JavaScript files. The hardware of the web servers are connected to the web and
supports the data exchange with different devices connected to the Internet.
2. On the software side, a web server includes server software accessed through website
domain names. It controls how web users access the web files and ensures the supply
of website content to the end-user. The web server contains several components,
including an HTTP server.

Whenever any web browser, such as Google Chrome, Microsoft Edge or Firefox, requests for
a web page hosted on a web server, the browser will process the request forward with the
help of HTTP. At the server end, when it receives the request, the HTTP server will accept
the request and immediately start looking for the requested data and forwards it back to the
web browser via HTTP.

Let's discover the step-by-step process of what happens whenever a web browser approaches
the web server and requests a web file or file. Follow the below steps:

1. First, any web user is required to type the URL of the web page in the address
bar of your web browser.
2. With the help of the URL, your web browser will fetch the IP address of your
domain name either by converting the URL via DNS (Domain Name System) or by
looking for the IP in cache memory. The IP address will direct your browser to the
web server.
3. After making the connection, the web browser will request for the web page from
the web server with the help of an HTTP request.
4. As soon as the web server receives this request, it immediately responds by sending
back the requested page or file to the web browser HTTP.
5. If the web page requested by the browser does not exist or if there occurs some
error in the process, the web server will return an error message.
6. If there occurs no error, the browser will successfully display the webpage.

WEB BROWSER

Web Browser is an application software that allows us to view and explore information on
the web. User can request for any web page by just entering a URL into address bar.
Web browser can show text, audio, video, animation and more. It is the responsibility of a
web browser to interpret text and commands contained in the web page.

Mrs. Rajasree R Page 2

Earlier the web browsers were text-based while now a days graphical-based or voice-based
web browsers are also available. Following are the most common web browser available
today:
Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari

How does web browser works?

The browser receives information through HTTP protocol. In which transmission of data is
defined. When the browser received data from the server, it is rendered by HTML to user-
readable form and, information displayed on the device screen.

1. The User Interface: The user interface is the space where User interacts with the
browser. It includes the address bar, back and next buttons, home button, refresh and stop,
bookmark option, etc. Every other part, except the window where requested web page is
displayed, comes under it.

2. The Browser Engine: The browser engine works as a bridge between the User interface
and the rendering engine. According to the inputs from various user interfaces, it queries
and manipulates the rendering engine.

3. The Rendering Engine: The rendering engine, as the name suggests is responsible for
rendering the requested web page on the browser screen. The rendering engine interprets
the HTML, XML documents and images that are formatted using CSS and generates the
layout that is displayed in the User Interface. However, using plugins or extensions, it can
display other types data also. Different browsers user different rendering engines:

Mrs. Rajasree R Page 3

 * Internet Explorer: Trident
* Firefox & other Mozilla browsers: Gecko
* Chrome & Opera 15+: Blink
* Chrome (iPhone) & Safari: Webkit

4. Networking: Component of the browser which retrieves the URLs using the common
internet protocols of HTTP or FTP. The networking component handles all aspects of
Internet communication and security. The network component may implement a cache of
retrieved documents in order to reduce network traffic.

5. JavaScript Interpreter: It is the component of the browser which interprets and

executes the javascript code embedded in a website. The interpreted results are sent to the
rendering engine for display. If the script is external then first the resource is fetched from
the network. Parser keeps on hold until the script is executed.

6. UI Backend: UI backend is used for drawing basic widgets like combo boxes and
windows. This backend exposes a generic interface that is not platform specific. It
underneath uses operating system user interface methods.

7. Data Persistence/Storage: This is a persistence layer. Browsers support storage

mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. It is a small
database created on the local drive of the computer where the browser is installed. It
manages user data such as cache, cookies, bookmarks and preferences.

Mrs. Rajasree R Page 4

 SEARCH ENGINE

A search engine is an online answering machine, which is used to search, understand, and
organize content's result in its database based on the search query (keywords) inserted by the
end-users (internet user). To display search results, all search engines first find the valuable
result from their database, sort them to make an ordered list based on the search algorithm,
and display in front of end-users. The process of organizing content in the form of a list is
commonly known as a Search Engine Results Page (SERP).

Google, Yahoo!, Bing, YouTube, and DuckDuckGo are some popular examples of search
engines.

DOCUMENT OBJECT MODEL

The Document Object Model (DOM) is a programming API for HTML and XML
documents. It defines the logical structure of documents and the way a document is accessed
and manipulated.
• DOM stands for 'Document Object Model'. It is a structured representation of
HTML in the webpage or application.
• It represents the entire UI(User Interface) of the web application as the tree data
structure.
• It is a structural representation of HTML elements of a web application in simple
words.

Mrs. Rajasree R Page 5

 • the DOM is rendered and manipulated with every change for updating the application
User Interface, which affects the performance and slows it down.

DOM REACTION AND ITS WORKING:

• React maintains two virtual DOMs every time. The first one contains the updated
virtual DOM, and the other is a pre-updated version of the updated virtual DOM.
• It compares the pre-updated version of the updated virtual DOM and finds what was
changed in the DOM, like which components will be changed.
VIRTUAL DOM SPEED THINGS UP:
• When any new things are added to the application, the virtual DOM is created,
represented as a tree. Every element in the application is a node in the tree.
• Therefore, whenever there is a change in the position of an element, a new virtual
DOM is created. The newer virtual DOM tree is compared with the latest, where the
changes are noted.
• It finds the possible way to make these changes by the actual DOM. Then the updated
elements would re-render on the page.

Fig: Virtual DOM

WEB APPLICATION

Mrs. Rajasree R Page 6

 • A web-application is an application program that is usually stored on a remote server,
and users can access it through the use of Software known as web-browser.
• It is a type of computer program that usually runs with the help of a web browser and
also uses many web technologies to perform various tasks on the internet.

HOW IT WORKS:
• the web application is a computer program that usually resides on the remote server.
Any user can access it by using one of the standard web browsers such as Google
Chrome, Safari, Microsoft Edge, etc., and most of them are available free for
everyone.
• A web application are generally coded using the languages supported by almost every
web-browsers such as HTML, JavaScript
• To operate a web- application, we usually required a web server

HTTP
The Hypertext Transfer Protocol (HTTP) is application-level protocol for collaborative,
distributed, hypermedia information systems.
It is the data communication protocol used to establish communication between client and
server.

Mrs. Rajasree R Page 7

HTTP is TCP/IP based communication protocol, which is used to deliver the data like
image files, query results, HTML files etc on the World Wide Web (WWW)

• Intercommunication of a web server with a web browser is done with the help of a
protocol named HTTP (Hypertext Transfer Protocol)
• These stored web pages mostly use static content, containing HTML documents,
images, style sheets, text files, etc. However, web servers can serve static as well as
dynamic contents.
HTTP Characteristics / Features:

HTTP ARCHITECTURE:

HTTP HEADER:
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading.
• <h1>Heading 1</h1>

Mrs. Rajasree R Page 8

 HTTP STATUS CODE
• HTTP response status codes indicate whether a specific HTTP request has been
successfully completed. Responses are grouped in five classes:

1. Informational responses (100–199)

2. Successful responses (200–299)
3. Redirection messages (300–399)
4. Client error responses (400–499)
5. Server error responses (500–599)
The Status-Code element in a server response, is a 3-digit integer where the first digit of the
Status-Code defines the class of response and the last two digits do not have any
categorization role
HTTP status codes are extensible and HTTP applications are not required to understand the
meaning of all the registered status codes.
HTTP REDIRECTION
• The simplest way to redirect to another URL is to use an HTML <meta>tag with the
http-equiv parameter set to “refresh”. The content attribute sets the delay before the
browser redirects the user to the new web page. To redirect immediately, set this
parameter to “0” seconds for the content attribute.

• <meta http-equiv="Refresh" content="0; url='[Link] />

• Page redirection is a situation where you clicked a URL to reach a page X but
internally you were directed to another page Y. It happens due to page redirection.

Mrs. Rajasree R Page 9

 • EXAMPLE:

<html>
<head>
<title>HTML Redirect</title>
<meta http-equiv="refresh" content="5; url =
[Link] />
</head>
<body>
<h1>WELCOME TO Tutorialspoint</h1>
<p>you'll be redirected to Tutorialspoint Homepage, in 5 seconds.</p>
</body>
</html>
HTTP CATCHING
• The HTTP cache stores a response associated with a request and reuses the stored
response for subsequent requests.
• There are several advantages to reusability. First, since there is no need to deliver the
request to the origin server, then the closer the client and cache are, the faster the
response will be. The most typical example is when the browser itself stores a cache
for browser requests.
• HTTP is typically used for distributed information systems, where performance can
be improved by the use of response caches. The HTTP/1.1 protocol includes a number
of elements intended to make caching work.
• The goal of caching in HTTP/1.1 is to eliminate the need to send requests in many
cases, and to eliminate the need to send full responses in many other cases.
• The basic cache mechanisms in HTTP/1.1 are implicit directives to caches where
server-specifies expiration times and validators. We use the Cache-Control header
for this purpose.
• The Cache-Control header allows a client or server to transmit a variety of directives
in either requests or responses. These directives typically override the default caching
algorithms. The caching directives are specified in a comma-separated list.
• Example: Cache-control: no-cache

WEB STANDARD
Web standards are the technologies we use to build web sites. These standards exist as long
technical documents called specifications, which detail exactly how the technology should
work. These documents are not very useful for learning how to use the technologies they
describe (this is why we have sites like MDN Web Docs), but instead are intended to be used
by software engineers to implement these technologies (usually in web browsers).

Mrs. Rajasree R Page 10

For example, the HTML Living Standard describes exactly how HTML (all the HTML
elements, and their associated APIs, and other surrounding technologies) should be
implemented.

Web standards are created by standards bodies — institutions that invite groups of people
from different technology companies to come together and agree on how the technologies
should work in the best way to fulfill all of their use cases. The W3C is the best known web
standards body, but there are others such as the WHATWG (who maintain the living
standards for the HTML language), ECMA (who publish the standard for ECMAScript,
which JavaScript is based on), Khronos (who publish technologies for 3D graphics, such as
WebGL), and others.
SEARCH ENGINE OPTIMIZATION
Search engine optimization, or SEO, is the process of improving your website so that it
achieves a higher ranking in search engine SERPs (Search Engine Result Page), and so that
more search engine users click on your website listing in the search engine results.
Search Engine Optimization (SEO) is the practice of increasing a web page ranking in an
online search.
NEED OR BENEFITS OF SEO:
1. SEO Increases Organic Discovery & High-Quality Website Traffic
Organic visibility, leading to increased website traffic, is a monumental benefit of SEO.
Search engine optimization is hyper-targeted and customer-centric. An effective SEO
strategy will help deliver your web pages to a relevant audience via pertinent search queries.
2. SEO Offers Impressive ROI
When evaluating digital marketing channels, return on investment (ROI) is often a priority
consideration, if not the most important. While SEO results take time, a high-quality strategy
eventually delivers impressive ROI. SEO benefits for many companies.
3. SEO Improves Credibility & Trust
Ranking on the first page of Google boosts credibility among potential clients. Google ranks
websites based on dozens of on-page and off-page signals, such as created content, website
speed, and mobile usability. While the majority of consumers probably do not consider these
signals, users do expect Google to deliver relevant, valuable content first.
4. SEO Provides 24/7 Promotion
Search engine optimization efforts do not stop after work hours. Content does not disappear
after a budget runs out, such as with paid advertising. Rankings achieved through SEO
promote your website 24/7, taking absolute advantage of the (at least) 60,000 Google
searches occurring every second. Once more, SEO is unique because it allows your company
to reach users while they’re searching for you – not on a billboard spotted on the way out of
town.
5. SEO Targets the Entire Marketing Funnel

Mrs. Rajasree R Page 11

Content marketing, driven by SEO, includes a variety of content types targeting every stage
of the marketing funnel. While a top-of-the-funnel or middle-of-the-funnel blog post won’t
convert initially, content such as this builds brand loyalty and awareness – traits that lead to
conversions.
6. SEO Reaches Your Entire Target Audience
SEO is not only for organizations with a single target audience. Search engine optimization is
equally effective for companies targeting various audiences, perhaps with the same service.
7. SEO Optimizes User Experience
User experience is a critical component of SEO and a significant Google ranking factor.
Search Engine Journal explains, “Google has learned how to interpret a favorable or
unfavorable user experience, and a positive user experience has become a pivotal element to
a website’s success.”
8. SEO Enhances PPC Success
Paid search engine advertising (PPC) and SEO work well together. Website rankings at the
top of paid search results and among first-page organic rankings provide consumers
additional opportunities to visit your website and bolster brand credibility. Additionally, SEO
data can be utilized to inform and optimize your PPC strategy.
9. SEO is a Long-Term Marketing Strategy
While quality SEO often delivers significant business impact with the first year, SEO efforts
will compound over time, leading to increased results for several years.
Implementing thoughtful SEO strategy – such as content creation and on-page optimization –
and mastering Google’s algorithm take dedicated time.
10. SEO is Key to Search Visibility
We live in an undeniably digital era. Organizations intent on creating an influential brand
presence should be visible on the web. However, if you’re not on page one, you’re likely not
winning clicks or promoting your brand to anyone. Today, search engine optimization is
critical to a thriving brand identity.

Mrs. Rajasree R Page 12