UNIT – I: Introduction to Internet & World Wide Web

Concept of website:

A website is a collection of many web pages, and web pages are digital files that are
written using HTML(HyperText Markup Language). To make your website available to every
person in the world, it must be stored or hosted on a computer connected to the Internet round a
clock. Such computers are known as a Web Server.
The website’s web pages are linked with hyperlinks and hypertext and share a common interface
and design. The website might also contain some additional documents and files such as images,
videos, or other digital assets.

Components of a Website:
We know that a website is a collection of a webpages hosted on a web-server. These are the
components for making a website.
 Webhost: Hosting is the location where the website is physically located.
 Address: Address of a website also known as the URL of a website. When a user wants to
open a website then they need to put the address or URL of the website into the web
browser, and the asked website is delivered by the webserver.
 Homepage : It is the first webpage that appears when a visitor visits the website.
 Design : It is the final and overall look and feel of the website that has a result of proper
use and integration elements like navigation menus, graphics, layout, navigation menus
etc.
 Content : Every web pages contained on the website together make up the content of the
website.
 The Navigation Structure: The navigation structure of a website is the order of the pages,
the collection of what links to what. Usually, it is held together by at least one navigation
menu.

How to access Websites?

When we type a certain URL in a browser search bar, the browser requests the page from the
Web server and the Web server returns the required web page and its content to the browser.
Now, it differs from how the server returns the information required in the case of static and
dynamic websites.
Types of Website:
 Static Website
 Dynamic Website
Static Website:
In Static Websites, Web pages are returned by the server which are prebuilt source code files
built using simple languages such as HTML, CSS, or JavaScript. There is no processing of
content on the server (according to the user) in Static Websites. Web pages are returned by the
server with no change therefore, static Websites are fast. There is no interaction with databases.
Also, they are less costly as the host does not need to support server-side processing with
different languages.
Dynamic Website:
In Dynamic Websites, Web pages are returned by the server which is processed during runtime
means they are not prebuilt web pages, but they are built during runtime according to the user’s
demand with the help of server-side scripting languages such as PHP, [Link], [Link] and
many more supported by the server. So, they are slower than static websites but updates and
interaction with databases are possible. Dynamic Websites are used over Static Websites as
updates can be done very easily as compared to static websites (Where altering in every page is
required) but in Dynamic Websites, it is possible to do a common change once, and it will reflect
in all the web pages.
There are different types of websites on the whole internet, we had chosen some most common
categories to give you a brief idea –

● Blogs
● E-commerce
● Portfolio
● Brochure
● News and Magazines
● Social Media
● Educational.
● Portal

Need and Purpose:

Some reasons why a business or an individual need a website are:

● Brand Credibility & Trust

● 24/7 Availability
● Businesses With a Website are Easily Accessible
● Enhancing Customer Service
● Showcasing Products and Services
● Reaching a Wider Audience
 ● Cost-effective Marketing
● Establishing Your Brand
● You can benefit from Google Searches
● Competitive Advantage

The purpose of a website varies depending on the needs of the website [Link] purposes
for a website are:

● Make Money
● Sell Products
● Sell Services
● Save Money
● Build An Online Presence
● Branding
● Showcase Authority And Establish Trust
● Generate Leads
● Nurture Sales
● Informational
● Entertainment
● Online Education
● Social Media And Social Networking
● Blogging
● Express Creativity And Originality

Types of websites: Static and dynamic website:

Website is the collection of web pages, different multimedia content such as text, images, and
videos which can be accessed by the URL which you can see in the address bar of the browser\

Types of Website:

● Static Website
● Dynamic Website

Static Website:
In Static Websites, Web pages are returned by the server which are prebuilt source code files
built using simple languages such as HTML, CSS, or JavaScript. There is no processing of
content on the server (according to the user) in Static Websites. Web pages are returned by the
server with no change therefore, static Websites are fast. There is no interaction with databases.
Also, they are less costly as the host does not need to support server-side processing with
different languages.
Architecture of Static Website
Note: Static does not mean that it will not respond to user actions, These Websites are called
static because these cannot be manipulated on the server or interact with databases (which is the
case in Dynamic Websites).
Dynamic Website:
In Dynamic Websites, Web pages are returned by the server which are processed during
runtime means they are not prebuilt web pages but they are built during runtime according to the
user’s demand with the help of server-side scripting languages such as PHP, [Link], [Link]
and many more supported by the server. So, they are slower than static websites but updates and
interaction with databases are possible.
Dynamic Websites are used over Static Websites as updates can be done very easily as compared
to static websites (Where altering in every page is required) but in Dynamic Websites, it is
possible to do a common change once and it will reflect in all the web pages.
Architecture of Dynamic Website
Difference Between Static and Dynamic Websites:
Static Website Dynamic Website

Content of Web pages can not be change at

Content of Web pages can be changed.
runtime.

No interaction with database possible. Interaction with database is possible

It is faster to load as compared to dynamic

It is slower than static website.
website.

Cheaper Development costs. More Development costs.

No feature of Content Management. Feature of Content Management System.

HTML, CSS, Javascript is used for Server side languages such as PHP,
developing the website. [Link] are used.

Same content is delivered everytime the Content may change everytime the page
page is loaded. is loaded.
Web Browsers:

What is a Web Browser?

The web browser is an application software to explore www (World Wide Web). It
provides an interface between the server and the client and requests to the server for web
documents and services. It works as a compiler to render HTML which is used to design a
webpage. Whenever we search for anything on the internet, the browser loads a web page written
in HTML, including text, links, images, and other items such as style sheets and JavaScript
functions. Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web
browsers.

History of the Web Browser

The first web browser WorldWideWeb was invented in the year of 1990 by Tim Berners-
Lee. Later, it becomes Nexus. In the year of 1993, a new browser Mosaic was invented by Mark
Andreessen and their team. It was the first browser to display text and images at a time on the
device screen. He also invents another browser Netscape in 1994. Next year Microsoft launched
a web browser Internet Explorer which was already installed in the Windows operating system.
After this many browsers were invented with various features like Mozilla Firefox, Google
Chrome, Safari, Opera, etc.

How does a Web Browser Work?

A web browser helps us find information anywhere on the internet. It is installed on the
client computer and requests information from the web server such a type of working model is
called a client-server model.

Client-server model
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 in HTML to user-
readable form and, information is displayed on the device screen.
Website Cookies
When we visited any website over the internet our web browser stores information about
us in small files called cookies. Cookies are designed to remember stateful information about our
browsing history. Some more cookies are used to remember about us like our interests, our
browsing patterns, etc. Websites show us ads based on our interests using cookies.

Some Popular Web Browsers: Here is a list of 7 popular web browsers:

 Google Chrome
 Mozilla Firefox
 Apple Safari
 Microsoft Edge
 Opera
 Brave
 Tor Browser

These are some of the most popular web browsers, there are other browsers available such as
Vivaldi, Brave, and so on. The choice of a web browser depends on the user’s preference and
requirements.

Web Servers:
Web Server: Web server is a program which processes the network requests of the users and
serves them with files that create web pages. This exchange takes place using Hypertext Transfer
Protocol(HTTP).
Basically, web servers are computers used to store HTTP files which makes a website and when
a client requests a certain website, it delivers the requested website to the client. For example,
you want to open Facebook on your laptop and enter the URL in the search bar of google. Now,
the laptop will send an HTTP request to view the facebook webpage to another computer known
as the webserver. This computer (webserver) contains all the files (usually in HTTP format)
which make up the website like text, images, gif files, etc. After processing the request, the
webserver will send the requested website-related files to your computer and then you can reach
the website.
Different websites can be stored on the same or different web servers but that doesn’t affect the
actual website that you are seeing in your computer. The web server can be any software or
hardware but is usually a software running on a computer. One web server can handle multiple
users at any given time which is a necessity otherwise there had to be a web server for each user
and considering the current world population, is nearly close to impossible. A web server is
never disconnected from the internet because if it was, then it won’t be able to receive any
requests, and therefore cannot process them.
There are many web servers available in the market both free and paid. Some of them are
described below:
 Apache HTTP server: It is the most popular web server and about 60 percent of the
world’s web server machines run this web server. The Apache HTTP web server was
developed by the Apache Software Foundation. It is an open-source software which
means that we can access and make changes to its code and mold it according to our
preference. The Apache Web Server can be installed and operated easily on almost all
operating systems like Linux, MacOS, Windows, etc.

 Microsoft Internet Information Services (IIS): IIS (Internet Information Services) is a

high performing web server developed by Microsoft. It is strongly united with the
operating system and is therefore relatively easier to administer. It is developed by
Microsoft, it has a good customer support system which is easier to access if we
encounter any issue with the server. It has all the features of the Apache HTTP Server
except that it is not an open-source software and therefore its code is inaccessible which
means that we cannot make changes in the code to suit our needs. It can be easily
installed in any Windows device.

 Lighttpd: Lighttpd is pronounced as ‘Lightly’. It currently runs about 0.1 percent of the
world’s websites. Lighttpd has a small CPU load and is therefore comparatively easier to
run. It has a low memory footprint and hence in comparison to the other web servers,
requires less memory space to run which is always an advantage. It also has speed
optimizations which means that we can optimize or change its speed according to our
requirements. It is an open-source software which means that we can access its code and
add changes to it according to our needs and then upload our own module (the changed
code).

 Jigsaw Server: Jigsaw has been written in the Java language and it can run CGI (common
gateway interference) scripts as well as PHP programs. It is not a full-fledged server and
was developed as an experimental server to demonstrate the new web protocols. It is an
 open-source software which means that we can access its code and add changes to it
according to our needs and then upload our own module (the changed code). It can be
installed on any device provided that the device supports Java language and
modifications in Java.

 Sun Java System: The Sun Java System supports various languages, scripts, and
technologies required for Web 2.0 such as Python, PHP, etc. It is not an open-source
software and therefore its code is inaccessible which means that we cannot make changes
in the code to suit our needs.

Uniform Resource Locator:

URL is the abbreviation of Uniform Resource Locator. It is the resource address on the internet.
The URL (Uniform Resource Locator) is created by Tim Berners-Lee and the Internet
Engineering working group in 1994. URL is the character string (address) which is used to
access data from the internet. The URL is the type of URI (Uniform Resource Identifier).

A URL contains the following information which is listed below:

 Protocol name
 A colon followed by double forward-slash (://)
 Hostname (domain name) or IP address
 A colon followed by port number (optional – unless specified otherwise, “:80” is
the default when using HTTP, and “:443” is the default when using HTTPS)
 Path of the file

Syntax of URL:
protocol://hostname/filename
Protocol: A protocol is the standard set of rules that are used to allow electronic devices to
communicate with each other.
Hostname: It describes the name of the server on the network.
Filename: It describes the pathname to the file on the server.

The URL [Link] contains the information protocol: https,

hostname: [Link] and filename: php-function.

Tools and Web Programming Languages.

1. GitHub

GitHub is an open-source, cloud-based Git repository hosting service that offers a web-
based graphical interface.
It can be an excellent platform for expanding your networks and building a personal brand as a
web developer. It also comes with flexible project management tools to help organizations adapt
to any team, project, or workflow.
GitHub offers a free plan with unlimited repositories and collaborators and 500 MB of storage
space.

2. Chrome Developer Tools

Chrome Developer Tools are a set of web editing and debugging tools built into the Google
Chrome browser.
Using it, developers can easily view and update web pages’ styles, debug JavaScript code, and
optimize website speed.
This web application development tool offers helpful commands and shortcuts for navigating its
UI and running certain tasks like disabling JavaScript.

3. Sublime Text

Sublime Text is the best option for beginners who have just started learning how to code.
It’s an all-in-one text editor for code, markup, and prose.
It’s lightweight yet still offers the advanced features you’d expect from a great text editor. For
example, developers can enable simultaneous editing to control multiple cursors and edit several
lines of code at once.
This code editor can be downloaded for free, but you’ll need a license to use it. Sublime Text
licenses cost $99 for personal use and $65/year for business use.

4. Marvel
 Marvel is one of the best wireframing tools to quickly and easily design different
projects. This web-based collaborative design platform offers robust prototyping and user testing
features.
Because of its user-friendly interface, web developers and designers of all levels can use Marvel
to create high-quality mockups and design specifications for their web applications in no time.
In addition to a free plan that comes with limited features, Marvel offers three premium plans.
Pro at $12/month, Team at $42/month, and Enterprise, which is available upon request. This
wireframing tool is also offered at a discounted rate for non-profits and students.

5. Visual Studio Code

Visual Studio Code is an open-source code editor that runs on Windows, Linux, and
macOS. It includes built-in features such as syntax highlighting, auto-complete, and Git
commands to make coding faster and easier.
In addition to a built-in terminal and debugger, it supports code analysis tools and software
integrations with other powerful web development tools like Git, PHP CS Fixer, and ESLint.
Visual Studio Code is completely free to use. You can download the Insiders version to access
the tool’s latest releases and new features. It’s also possible to install both versions and use them
together or independently.

6. Node Package Manager (npm)

Node Package Manager (npm) is a JavaScript software registry for sharing and deploying
local or global packages.
JavaScript developers can use npm to find and install code packages for their networking
applications or server-side projects.
Using npm packages simplifies the development process as developers don’t have to write new
code for each functionality that their project requires.
The free version of npm includes unlimited public packages. However, if you want to enhance its
functionality, there are also two paid plans available, Pro for $7/month with unlimited packages
and Team for $7/month with team-based management options.

7. Sass

Syntactically Awesome Style Sheets (Saas) is one of the most popular preprocessors for
the CSS framework. CSS developers mostly use it to add more logical syntax to a CSS site, such
as variables, nested rules, and loops.
This web development tool is also great for learning how to make websites because it lets you
change colors, fonts, and other user interface elements. Moreover, Sass facilitates easy design
sharing within and across projects, allowing seamless project management.

8. Bootstrap
 Bootstrap is a widely-used front-end development framework for creating responsive web
applications.
It features various HTML, CSS, and JavaScript-based scripts for web design components and
functions, saving web developers a lot of time from having to code them manually.
Anyone with basic knowledge of HTML, CSS, and JavaScript can easily navigate it. You can
also learn Bootstrap by developing themes for popular CMSs like WordPress.

9. Grunt

Grunt is a powerful JavaScript task runner for automating repetitive tasks like unit testing,
minification, and compilation. It enables users to improve project efficiency by reducing
development time.
Web developers can use Grunt to implement coding style guides throughout the code base of
their project to ensure consistency and readability. It also has linting and image optimization
capabilities.
Grunt’s code, which is released under the MIT license, can be downloaded from its official
website and is also available for free on GitHub.

10. Ruby on Rails

Ruby on Rails is a popular full-stack framework for building reliable web apps quickly.
This framework can be used for server-side development, such as managing servers’ databases
and files. On the client side, it can be used to render HTML and update web pages in real time.
For that reason, it has become one of the most popular web technologies for eCommerce
businesses and startups when developing desktop and web applications.

There are many languages available for web development and some of them are:

1)JavaScript
JavaScript is a lightweight, interpreted scripting language widely used to enhance and
add content to a web page. It gets used in various ways, from adding simple functions or buttons
to creating complex animations. JavaScript runs on top of a browser’s built-in engine and adds
functionality with simple commands placed inside <script> tags within an HTML document.
With JavaScript installed on your computer, you can make changes to any part of a website and
create entirely new pages from scratch. Most Internet users already have JavaScript enabled,
which means it has excellent browser support, making it one of the most sought-after options
among designers. According to Failory, approximately 79% percent of all internet surfers have
JavaScript enabled at all times. One thing to consider is that older versions may not work
correctly due to browser changes or third-party programs interfering with its execution. So
installing updates will help ensure compatibility issues are minimized.
Top companies using JavaScript: Microsoft, PayPal, Netflix, etc.

2)HTML/CSS:
HTML is the most basic of all coding languages. If you’re planning to develop a website
or web app, HTML will provide you with a solid foundation for website development. Since
most websites get built on top of HTML, developers can style your code to fit your specific
needs by an experienced developer. HTML gives you a good start at writing code that will do
something besides displaying information on the screen. And knowing how to build basic pages
can come in handy if you plan on publishing your content online somewhere down the line, too!
On the other hand, CSS (Cascading Style Sheets) is a language that describes how to display
HTML documents on screen, paper, or in other media. When it comes to modern web design,
CSS is vital; using CSS enables designers to separate style from content. Doing so makes it
easier for multiple people to work on different parts of a website since they can modify styles
without accidentally breaking other components. At its core, CSS gives you ways of formatting
text elements on a page—such as headings or paragraphs—with predefined fonts and colors.
Note: Together HTML & CSS holds a popularity of 56% among developers worldwide.

Top companies using HTML/CSS: Fluffbucket, Acme, etc.

3)Python
Python is a great language to go for web development if you want to do just about
anything. It’s an incredibly versatile language that you can employ in any number of industries
and for any number of purposes. Plus, it’s easy to learn if you already have some experience with
other programming languages, and top IT companies are looking for people who know Python.
From web development to artificial intelligence to big data science, Python has something for
everyone. Best of all, because Python code is so straightforward, even new programmers can
write clean code that’s pretty free from bugs.

Top companies using Python: Instagram, Spotify, Uber, etc.

4)SQL:
If you want to do a web project involving data science or work with massive datasets,
SQL is an obvious choice. It is because of excellent query databases and data analyzing capacity.
It’s similar to learning a spoken language—the only way to learn is by doing it. Getting a solid
grasp of SQL can take months but has a massive payoff in career opportunities. The more
advanced versions of SQL such as MySQL and PostgreSQL are also widely used in data science,
so those might be good ones to focus on as well.

Top companies using SQL: Microsoft, Dell, Accenture, etc.

4)Java:
 Java is extensively used in developing web applications and other software solutions.
Also, it stands out as a very reliable, safe, and robust language for web development. The
language has been around since 1996, but that hasn’t stopped Java from evolving. Multiple
updates have added significant features to improve overall functionality. On top of being a great
programming language used in all types of software solutions, it’s also one of the most
commonly used server-side scripting languages. You can hire Java developers for creating
dynamic Web content using Servlets or JSP pages.

Top companies using Java: Uber, Pinterest, Amazon, etc.

5)C#
C# is a general-purpose, object-oriented language. It has powerful features that allow
developers to create high-performance applications. .NET makes it even better with tools and
libraries that make C# code easier to write and compile and simplify deployment. Microsoft
designed the language within its .NET framework, which has evolved into one of the most
widely used platforms in history. Whether you’re writing video games or apps, designing
software solutions, or exploring entirely new ways of creating content, C# can help you achieve
your goals faster than ever before.

Top companies using C#: Accenture, Alibaba Travels, Intuit, etc.

6)C++
C++ is among the most popular programming languages out there. Using C++, you can
create high-performing web projects across multiple platforms, including mobile OS. Noticeably,
Apple’s iOS operating system was developed using C++, so you can start here if apps are your
thing. The game engine Unity uses C++; game development companies looking for people who
know what they’re doing won’t hesitate to hire someone who specializes in that language.

Top companies using C++: Amazon, Google, etc.

7)PHP
Loved by website developers, PHP is one of the most popular server-side scripting
languages in use today. If you’re looking to write dynamic websites with WordPress, start your
career as a web developer or add to your existing skill set, PHP is a great place to begin. The
language is based on C and incorporates many concepts from JavaScript, which makes it
especially easy to pick up if you have prior coding experience. Moreover, since it’s free and runs
on all major platforms—Windows, Linux, and Mac OS X—PHP provides professional
programmers with maximum flexibility when writing code for business websites.

Top companies using PHP: Tumblr, Wikipedia, Slack, etc.

8)C
The C language has been used in various forms since 1972. It can be used to program on
all platforms and is one of the most highly regarded and widely used programming languages in
existence. Its portability makes it easy to use regardless of what type of operating system your
software will run on. However, while C might be a great choice when you’re just getting started
with coding, it isn’t necessarily a great option if you want to quickly and easily develop complex
software programs. Due to its relatively high level of difficulty and many features, producing
code with C can be more time-consuming than other options.

Top companies using C: GitHub, Twitch, Klarna, etc.

9)Go
Go is a modern, open-source project with an impressive pedigree. Google describes Go
as combining powerful ideas from programming languages like C++ and Haskell with features in
modern scripting languages like Python, Ruby, and JavaScript. The Goroutines feature makes it
easy to create applications that can handle millions of simultaneous connections without adding
additional servers or hardware. Its performance is unparalleled for a system-level language,
making it ideal for building services and fast back-end systems on which other things get built.

Top companies using Go: Twitch, Dropbox, Uber, etc.

Web Standards:

History of Web Standards:

The web came into existence when the US military created a network for communication in the
1960s which was known as ARPANET. ARPANET uses a packet switching method for
transmitting information and it was the first network to use TCP/IP model. After two decades
means in 1980, the concept of transmission of data among different nodes through linking was
given by Tim Berners-Lee.
In the year 1990, Tim Berners-Lee made all the necessary arrangements to implement the first
model of the web. It consists of HTTP protocols, HTML for creating web pages and a web
browser to view web pages, and lastly an HTTP server. This is how the web started.
Web Standards
Web standards are defined as technologies that are used in building websites. Web Standards
consist of technical documents known as specifications, which provide detailed information on
how web technology should work. These documents are really helpful for engineers in making
web applications in a more efficient manner for the users.
Need for Web Standards
After the creation of the web, it was accessible by people by using a computer system, at that
time only a handful of systems were there to access the web but with the rise of technology the
way people access the web changed completely. Now people use different types of devices like
mobile phones, tablets, laptops, desktops, etc. There are even more devices like interfaces
provided in vehicles for navigation and smart speakers using speech. Moreover, screen sizes are
also different when accessing the web and different operating systems are also available along
with a number of web browsers. All of this has made it quite different for everyone to access the
same web in a different manners on different devices.
Hence it becomes a need to make certain standards while developing websites so that those
websites work smoothly on all devices with different configurations. Web standards form the
foundation of rules and regulations for the developers for developing websites.
Therefore in 1994, World Wide Web Consortium also known as W3C was founded by Tim
Berners-Lee. W3C organization collaborated with many different IT organizations to work on
making the standards/governing rules for web development.
Components of Web Standards

1. W3C recommendations for HTML, CSS, and also for different image formats to be
used in websites.
2. Living Standards provided by Web Hypertext Application Technology Working
Group (WHATWG), these standards consist of Document Object Model Standard,
URL Standard, Encoding Standards, etc.
3. JSON standards are given by ECMA International.
4. Recommendations of the International Organization for Standardization (ISO).

Open Standards
Tim Berners-Lee and representatives of the W3C organization had given the most precious
feature of Web Standards which says that the web will always be free for use and also for the
contribution by developers means it will not limit itself by patent rights or licensing. Because of
this feature, everyone is independent to write code for building websites without paying anything
to anyone. Because of its openness, there is no chance of censorship means a single organization
cannot control it.
World Wide Web Consortium (W3C)
The credit for maintaining and creating new web standards goes to World Wide Web Consortium
(W3C) which is considered the main organization. A number of standards have been defined by
W3C which includes different languages that are used in making websites like HTML, CSS,
JavaScript, etc.
Any website will be considered to follow the given web if that website or web page has correct
HTML and CSS. These languages also need to comply with semantic and accessibility
procedures.
Features of World Wide Web Consortium (W3C)

1. Web for All: It is the main goal of (W3C) to make web service accessible to all
people, no matter what their software or hardware configuration is, and also no matter
where they live. This feature helps people worldwide to connect and communicate
with each other.
2. Web on Everything: This feature ensures that each and every device can easily access
the web because people are using a large variety of devices and interfaces like
mobiles, tablets, smart assistants, etc.
3. Web Of Easy Interaction: Websites should be easy to load and must be interactive so
that users don’t feel bored. It should be built by keeping in mind the interest of users.
4. Web of Trust: The web should be secure and must win the trust of its users so
guidelines are made to use various security measures like SSL certificates for
websites, HTTPS protocol which is more secure than HTTP, and many other
measures which reduce the risk of attacks on these websites.

Tiered Architecture: Client Server Model:

The Client-server model is a distributed application structure that partitions task or

workload between the providers of a resource or service, called servers, and service requesters
called clients. In the client-server architecture, when the client computer sends a request for data
to the server through the internet, the server accepts the requested process and deliver the data
packets requested back to the client. Clients do not share any of their resources. Examples of
Client-Server Model are Email, World Wide Web, etc.
How the Client-Server Model works ?
In this article we are going to take a dive into the Client-Server model and have a look at how the
Internet works via, web browsers. This article will help us in having a solid foundation of the
WEB and help in working with WEB technologies with ease.
 Client: When we talk the word Client, it mean to talk of a person or an organization using
a particular service. Similarly in the digital world a Client is a computer (Host) i.e.
capable of receiving information or using a particular service from the service providers
(Servers).
 Servers: Similarly, when we talk the word Servers, It mean a person or medium that
serves something. Similarly in this digital world a Server is a remote computer which
provides information (data) or access to particular services.
So, its basically the Client requesting something and the Server serving it as long as its present in
the database.

How the browser interacts with the servers ?

There are few steps to follow to interacts with the servers a client.
 User enters the URL(Uniform Resource Locator) of the website or file. The Browser then
requests the DNS(DOMAIN NAME SYSTEM) Server.
 DNS Server lookup for the address of the WEB Server.
 DNS Server responds with the IP address of the WEB Server.
 Browser sends over an HTTP/HTTPS request to WEB Server’s IP (provided by DNS
server).
 Server sends over the necessary files of the website.
 Browser then renders the files and the website is displayed. This rendering is done with
the help of DOM (Document Object Model) interpreter, CSS interpreter and JS Engine
collectively known as the JIT or (Just in Time) Compilers.

Advantages of Client-Server model:

 Centralized system with all data in a single place.
 Cost efficient requires less maintenance cost and Data recovery is possible.
 The capacity of the Client and Servers can be changed separately.
Disadvantages of Client-Server model:
 Clients are prone to viruses, Trojans and worms if present in the Server or uploaded into
the Server.
 Server are prone to Denial of Service (DOS) attacks.
 Data packets may be spoofed or modified during transmission.
 Phishing or capturing login credentials or other useful information of the user are
common and MITM(Man in the Middle) attacks are common.

Three Tier Model:

The most common type of multi-tier architecture in distributed systems is a three-tier

client-server architecture. In this architecture, the entire application is organized into three
computing tiers
 Presentation tier
 Application tier
 Data-tier

The major benefit of the three tiers in client-server architecture is that these tiers are developed
and maintained independently and this would not impact the other tiers in case of any
modification. It allows for better performance and even more scalability in architecture can be
made as with the increasing demand, more servers can be added.

Three-tier client-server architecture in a distributed system:

 Presentation Tier: It is the user interface and topmost tier in the architecture. Its purpose
is to take request from the client and displays information to the client. It communicates
with other tiers using a web browser as it gives output on the browser. If we talk about
Web-based tiers then these are developed using languages like- HTML, CSS, JavaScript.
 Application Tier: It is the middle tier of the architecture also known as the logic tier as
the information/request gathered through the presentation tier is processed in detail here.
It also interacts with the server that stores the data. It processes the client’s request,
formats, it and sends it back to the client. It is developed using languages like- Python,
Java, PHP, etc.
 Data Tier: It is the last tier of the architecture also known as the Database Tier. It is used
to store the processed information so that it can be retrieved later on when required. It
consists of Database Servers like- Oracle, MySQL, DB2, etc. The communication
 between the Presentation Tier and Data-Tier is done using middle-tier i.e. Application
Tier.

Advantages:
 Logical separation is maintained between Presentation Tier, Application Tier, and Database
Tier.
 Enhancement of Performance as the task is divided on multiple machines in distributed
machines and moreover, each tier is independent of other tiers.
 Increasing demand for adding more servers can also be handled in the architecture as tiers
can be scaled independently.
 Developers are independent to update the technology of one tier as it would not impact the
other tiers.
 Reliability is improved with the independence of the tiers as issues of one tier would not
affect the other ones.
 Programmers can easily maintain the database, presentation code, and business/application
logic separately. If any change is required in business/application logic then it does not
impact the presentation code and codebase.
 Load is balanced as the presentation tier task is separated from the server of the data tier.
 Security is improved as the client cannot communicate directly with Database Tier.
Moreover, the data is validated at Application Tier before passing to Database Tier.
 The integrity of data is maintained.
 Provision of deployment to a variety of databases rather than restraining yourself to one
particular technology.

Disadvantages:
 The Presentation Tier cannot communicate directly with Database Tier.
 Complexity also increases with the increase in tiers in architecture.
 There is an increase in the number of resources as codebase, presentation code, and
application code need to be maintained separately.

Service Oriented Architectures:

 Service-Oriented Architecture (SOA) is a stage in the evolution of application
development and/or integration. It defines a way to make software components reusable using
the interfaces.
Formally, SOA is an architectural approach in which applications make use of services available
in the network. In this architecture, services are provided to form applications, through a network
call over the internet. It uses common communication standards to speed up and streamline the
service integrations in applications. Each service in SOA is a complete business function in
itself. The services are published in such a way that it makes it easy for the developers to
assemble their apps using those services. Note that SOA is different from microservice
architecture.
 SOA allows users to combine a large number of facilities from existing services to form
applications.
 SOA encompasses a set of design principles that structure system development and
provide means for integrating components into a coherent and decentralized system.
 SOA-based computing packages functionalities into a set of interoperable services, which
can be integrated into different software systems belonging to separate business domains.

The different characteristics of SOA are as follows :

o Provides interoperability between the services.
o Provides methods for service encapsulation, service discovery, service composition,
service reusability and service integration.
o Facilitates QoS (Quality of Services) through service contract based on Service Level
Agreement (SLA).
o Provides loosely couples services.
o Provides location transparency with better scalability and availability.
o Ease of maintenance with reduced cost of application development and
Deployment.
There are two major roles within Service-oriented Architecture:

● Service provider: The service provider is the maintainer of the service and the
organization that makes available one or more services for others to use. To advertise
services, the provider can publish them in a registry, together with a service contract that
specifies the nature of the service, how to use it, the requirements for the service, and the
fees charged.
● Service consumer: The service consumer can locate the service metadata in the registry
and develop the required client components to bind and use the service.
Services might aggregate information and data retrieved from other services or create workflows
of services to satisfy the request of a given service consumer. This practice is known as service
orchestration Another important interaction pattern is service choreography, which is the
coordinated interaction of services without a single point of control.
Components of SOA:

Guiding Principles of SOA:

1. Standardized service contract: Specified through one or more service description

documents.
2. Loose coupling: Services are designed as self-contained components, maintain
relationships that minimize dependencies on other services.
3. Abstraction: A service is completely defined by service contracts and description
documents. They hide their logic, which is encapsulated within their implementation.
4. Reusability: Designed as components, services can be reused more effectively, thus
reducing development time and the associated costs.
5. Autonomy: Services have control over the logic they encapsulate and, from a service
consumer point of view, there is no need to know about their implementation.
 6. Discoverability: Services are defined by description documents that constitute
supplemental metadata through which they can be effectively discovered. Service
discovery provides an effective means for utilizing third-party resources.
7. Composability: Using services as building blocks, sophisticated and complex
operations can be implemented. Service orchestration and choreography provide a
solid support for composing services and achieving business goals.

Advantages of SOA:
 Service reusability: In SOA, applications are made from existing services. Thus, services
can be reused to make many applications.
 Easy maintenance: As services are independent of each other they can be updated and
modified easily without affecting other services.
 Platform independent: SOA allows making a complex application by combining services
picked from different sources, independent of the platform.
 Availability: SOA facilities are easily available to anyone on request.
 Reliability: SOA applications are more reliable because it is easy to debug small services
rather than huge codes
 Scalability: Services can run on different servers within an environment, this increases
scalability

Disadvantages of SOA:
 High overhead: A validation of input parameters of services is done whenever services
interact this decreases performance as it increases load and response time.
 High investment: A huge initial investment is required for SOA.
 Complex service management: When services interact they exchange messages to tasks.
the number of messages may go in millions. It becomes a cumbersome task to handle a
large number of messages.

Practical applications of SOA: SOA is used in many ways around us whether it is mentioned or
not.

1. SOA infrastructure is used by many armies and air forces to deploy situational
awareness systems.
2. SOA is used to improve healthcare delivery.
3. Nowadays many apps are games and they use inbuilt functions to run. For example,
an app might need GPS so it uses the inbuilt GPS functions of the device. This is
SOA in mobile solutions.
 4. SOA helps maintain museums a virtualized storage pool for their information and
content.

REST services:

Representational State Transfer (REST) is an architectural style that defines a set of

constraints to be used for creating web services. REST API is a way of accessing web services in
a simple and flexible way without having any processing.
REST technology is generally preferred to the more robust Simple Object Access Protocol
(SOAP) technology because REST uses less bandwidth, simple and flexible making it more
suitable for internet usage. It’s used to fetch or give some information from a web service. All
communication done via REST API uses only HTTP request.
Working: A request is sent from client to server in the form of a web URL as HTTP GET or
POST or PUT or DELETE request. After that, a response comes back from the server in the form
of a resource which can be anything like HTML, XML, Image, or JSON. But now JSON is the
most popular format being used in Web Services.

In HTTP there are five methods that are commonly used in a REST-based Architecture i.e.,
POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete
(or CRUD) operations respectively. There are other methods which are less frequently used like
OPTIONS and HEAD.
 GET: The HTTP GET method is used to read (or retrieve) a representation of a resource.
In the safe path, GET returns a representation in XML or JSON and an HTTP response
code of 200 (OK). In an error case, it most often returns a 404 (NOT FOUND) or 400
 (BAD REQUEST).

 POST: The POST verb is most often utilized to create new resources. In particular, it’s
used to create subordinate resources. That is, subordinate to some other (e.g. parent)
resource. On successful creation, return HTTP status 201, returning a Location header
with a link to the newly-created resource with the 201 HTTP status.

NOTE: POST is neither safe nor idempotent.

 PUT: It is used for updating the capabilities. However, PUT can also be used to create a
resource in the case where the resource ID is chosen by the client instead of by the server.
In other words, if the PUT is to a URI that contains the value of a non-existent resource
ID. On successful update, return 200 (or 204 if not returning any content in the body)
from a PUT. If using PUT for create, return HTTP status 201 on successful creation. PUT
is not safe operation but it’s idempotent.
 PATCH: It is used to modify capabilities. The PATCH request only needs to contain the
changes to the resource, not the complete resource. This resembles PUT, but the body
contains a set of instructions describing how a resource currently residing on the server
should be modified to produce a new version. This means that the PATCH body should
not just be a modified part of the resource, but in some kind of patch language like JSON
Patch or XML Patch. PATCH is neither safe nor idempotent.
 DELETE: It is used to delete a resource identified by a URI. On successful deletion,
return HTTP status 200 (OK) along with a response body.

Idempotence: An idempotent HTTP method is a HTTP method that can be called many times
without different outcomes. It would not matter if the method is called only once, or ten times
over. The result should be the same. Again, this only applies to the result, not the resource itself.

Request and Response

Now we will see how request and response work for different HTTP methods. Let’s assume we
have an API([Link] for all students data of gfg.
 GET: Request for all Students.
 Request

GET:/api/students

 POST: Request for Posting/Creating/Inserting Data

Request

POST:/api/students

{“name”:”Raj”}

 PUT or PATCH: Request for Updating Data at id=1

Request

PUT or PATCH:/api/students/1

{“name”:”Raj”}
  DELETE: Request for Deleting Data of id=1

Request

DELETE:/api/students/1

RESTful web services are very popular because they are light weight, highly scalable and
maintainable and are very commonly used to create APIs for web-based applications.

Introduction to HTML:
HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is a combination of Hypertext and Markup language. Hypertext
defines the link between web pages. A markup language is used to define the text document
within the tag which defines the structure of web pages. This language is used to annotate (make
notes for the computer) text so that a machine can understand it and manipulate text accordingly.
Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.
HTML is a markup language used by the browser to manipulate text, images, and other content,
in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991.
The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0,
published in 1995.

Elements and Tags: HTML uses predefined tags and elements which tell the browser how to
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.

<!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares a
document as being an HTML document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within
the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head>
element include:
 <style>-This html tag allows us to insert styling into our webpages and make them
appealing to look at with the help of CSS.
 <title>-The title is what is displayed on the top of your browser when you visit a
website and contains the title of the webpage that you are viewing.
 <base>-It specifies the base URL for all relative URL’s in a document.
 <noscript>– Defines a section of HTML that is inserted when the scripting has been
turned off in the users browser.
 <script>-This tag is used to add functionality in the website with the help of
JavaScript.
 <meta>-This tag encloses the meta data of the website that must be loaded every time
the website is visited. For eg:- the metadata charset allows you to use the standard
UTF-8 encoding in your website. This in turn allows the users to view your webpage
in the language of their choice. It is a self closing tag.
 <link>– The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self
closing.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words, the
body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html or .htm.
Once saved as an HTML document, the file can be opened as a webpage in the browser.
Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs). Basic text editors
are entirely sufficient for when you’re just getting started. As you progress, there are many
feature-rich text editors available which allow for greater function and flexibility.
Example: This example illustrates the basic structure of HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--The above meta characteristics make a website compatible with different devices. -->
<title>Demo Web Page</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>

Output:

Features of HTML:
  It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.

Why learn HTML?

 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.

Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:
 HTML can only create static web pages. For dynamic web pages, other languages have to
be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.

Introduction to XML:
Extensible Markup Language (XML) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. The design
goals of XML focus on simplicity, generality, and usability across the Internet. It is a textual data
format with strong support via Unicode for different human languages. Although the design of
XML focuses on documents, the language is widely used for the representation of arbitrary data
structures such as those used in web services.

1. XML stands for extensible Markup Language

2. XML is a markup language like HTML
3. XML is designed to store and transport data
4. XML is designed to be self-descriptive

Differences between XML and HTML: XML and HTML were designed with different goals:
  XML is designed to carry data emphasizing on what type of data it is.
 HTML is designed to display data emphasizing on how data looks
 XML tags are not predefined like HTML tags.
 HTML is a markup language whereas XML provides a framework for defining markup
languages.
 HTML is about displaying data,hence it is static whereas XML is about carrying
information,which makes it dynamic.

EXAMPLE :
XML code for a note is given below

HTML code for the note is given below:

<!DOCTYPE html>

<html>
<h1>Note</h1>
<body>
<p>To:RAJ
<br>
From:RAVI
</p>
<h1>Reminder</h1>
<p>Meeting at 8am</p>
</body>
</html>
OUTPUT:

Note: The output in both the cases is same but while using HTML we have used predefined tags
like p tag and h1 tag whereas while using XML we have used self defined tags like “To” tag and
“from” tag.

Introduction to JSON:
JSON stands for JavaScript Object Notation. It is a format for structuring data. This format is
used by different web applications to communicate with each other. JSON is the replacement of
the XML data exchange format in JSON. It is easy to struct the data compare to XML. It
supports data structures like arrays and objects and the JSON documents that are rapidly
executed on the server. It is also a Language-Independent format that is derived from JavaScript.
The official media type for the JSON is application/json and to save those file .json extension.
Features of JSON:
 Easy to understand: JSON is easy to read and write.
 Format: It is a text-based interchange format. It can store any kind of data in an array of
video, audio, and image anything that you required.
 Support: It is light-weighted and supported by almost every language and OS. It has a
wide range of support for the browsers approx each browser supported by JSON.
 Dependency: It is an Independent language that is text-based. It is much faster compared
to other text-based structured data.

JSON Syntax Rules: Data is in name/value pairs and they are separated by commas. It uses curly
brackets to hold the objects and square brackets to hold the arrays.

Example:
{
"Courses": [
 {
"Name" : "Java Foundation",
"Created by" : "Geeksforgeeks",
"Content" : [ "Java Core", "JSP",
"Servlets", "Collections" ]
},

{
"Name" : "Data Structures",
"also known as" : "Interview Preparation Course",
"Topics" : [ "Trees", "Graphs", "Maps" ]
}
]
}

Advantages of JSON:
 JSON stores all the data in an array so data transfer makes easier. That’s why JSON is the
best for sharing data of any size even audio, video, etc.
 Its syntax is very easy to use. Its syntax is very small and light-weighted that’s the reason
that it executes and response in a faster way.
 JSON has a wide range for the browser support compatibility with the operating systems,
it doesn’t require much effort to make it all browser compatible.
 On the server-side parsing the most important part that developers want, if the parsing
will be fast on the server side then the user can get the fast response, so in this case JSON
server-side parsing is the strong point compare tot others.

Disadvantages of JSON:
 The main disadvantage for JSON is that there is no error handling in JSON, if there was a
slight mistake in the JSON script then you will not get the structured data.
 JSON becomes quite dangerous when you used it with some unauthorized browsers. Like
JSON service return a JSON file wrapped in a function call that has to be executed by the
browsers if the browsers are unauthorized then your data can be hacked.
 JSON has limited supported tools that we can use during JSON development.