NAME NADEEM ISRAR

Reg No F20-BSSE-091

Subject HCI

WHAT IS HTML?

HTML stands for Hyper Text Markup Language. HTML is the standard markup language for
creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of
elements. HTML elements tell the browser how to display the content.

HOW HTML WORKS?

The HTML file plays a couple of significant roles in a webpage. First, we use the structure
created by our HTML code to reference, enhance, and manipulate elements on a web page using
CSS and JavaScript. For instance, you could use HTML to mark all of the headings on a web
browser page, then pick the size and color you want to apply to those headings to reflect your
organization’s branding, or simply a visual design developed for the site.

Second, HTML text lets us indicate the roles of different structural elements to search engines
and other services that index the content and summarize it for other users. For instance, marking
the caption of an image with the “figcaption” element and enclosing the image and its caption in
the “figure” Meta element helps a search engine understand that these two pieces of content are
related and that the caption describes the associated image.

WHY HTML IS USED?

Obviously, most pages aren’t stored on your computer. Instead, they’re stored on web servers out
on the internet. So, when you visit an article or other content on any website, the server sends
your browser the .html file that contains the content for that page. (You can see the HTML code
for any web page in the Chrome browser by right-clicking anywhere on the page and
selecting View page source).

You’ll also notice that the source code contains other types of tags that aren’t HTML tags at all.
You may see code that calls. PHP or .JS files. These are PHP and JavaScript scripts that allow
dynamic web pages that load different content depending on user inputs or the output of other
scripts that run on the webserver or browser and deliver content into the same HTML file that
your browser reads. (In short HTML is necessary for loading a website. We can’t browse any
website without html).

What is CSS?

CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed
on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple
web pages all at once. External style sheets are stored in CSS files. CSS give the beauty to
website. CSS is not technically a necessity, but you probably wouldn’t want to look at a web page
that features only HTML elements as it would look completely bare-boned.
How CSS Works?

When a browser displays a document, it must combine the document's content with its style
information. It processes the document in a number of stages, which is listed below. Bear in mind
that this is a very simplified version of what happens when a browser loads a webpage, and that
different browsers will handle the process in different ways. But this is roughly what happens.

1. The browser loads the HTML (e.g. receives it from the network).
2. It converts the HTML into a DOM (Document Object Model). The DOM represents the
document in the computer's memory. The DOM is explained in a bit more detail in the
next section.
3. The browser then fetches most of the resources that are linked to by the HTML document,
such as embedded images, videos, and even linked CSS! JavaScript is handled a bit later
on in the process, and we won't talk about it here to keep things simpler.
4. The browser parses the fetched CSS, and sorts the different rules by their selector types
into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it finds,
it works out which rules should be applied to which nodes in the DOM, and attaches style
to them as required (this intermediate step is called a render tree).
5. The render tree is laid out in the structure it should appear in after the rules have been
applied to it.
6. The visual display of the page is shown on the screen (this stage is called painting).

WHY WE USE CSS?

CSS helps you to keep the informational content of a document separate from the details of how
to display it. The details of how to display the document are known as its style. You keep the
style separate from the content so that you can:

 Avoid duplication
 Make maintenance easier
 Use the same content with different styles for different purposes

Web site might have thousands of pages that look similar. Using CSS, we store the style
information in common files that all the pages share. When a user displays a web page, the user’s
browser loads the style information along with the content of the page. When a user prints a web
page, We might provide different style information that makes the printed page easy to read.

In general, you use HTML to describe the content of the document, not its style. We use CSS to
specify its style, not its content. That’s why we use CSS.

What is PHP?

PHP is an acronym for "PHP: Hypertext Pre-processor". PHP is a widely-used, open source
scripting language. PHP scripts are executed on the server.

Why PHP is used?

PHP is compatible with almost all servers used today like Apache, IIS, etc. PHP supports a wide
range of databases. It is powerful enough to be at the core of the biggest blogging system on the
web like Word Press. It is deep enough to run large social networks. It is also easy enough to be a
beginner’s first server side language. That’s why PHP is used now a days.

How PHP WORKS?

Step 1  The user enters `http://laravel.com` into their browser and taps/hits 'enter'.

Step 2  After the user has tapped/hit 'enter', the browser sends the page request over the Internet
to the web server.

Step 3 The web server gets the request and analyses the request information. Apache realizes
that we didn't specify a file, so it looks for a directory index and finds `index.php`.

Step 4 Since Apache knows to send files that end with the php file extension to the PHP
interpreter, it asks PHP to execute the file.

Step 5  In this step, PHP is executing the code contained in the index.php file from the request.
During this step, PHP may interact with databases, the file system or make external API calls,
amongst other things.

Step 6 After PHP has finished executing the `index.php` file, it sends the output back to
Apache.

Step 7  Apache receives the output from PHP and sends it back over the Internet to a user's web
browser. This is called the `web response`.

Step 8 The user's web browser receives the response from the server, and renders the web page
on a computer or device.

As you can see, PHP interacts with a web server in a very real way. The actual request process is
very simple, and one of the reasons that PHP is so well suited for web application development

What is Node Js?

Node.js is an open-source, cross-platform JavaScript runtime environment and library for running
web applications outside the client's browser. Ryan Dahl developed it in 2009, and its latest
iteration, version 15.14, was released in April 2021. Developers use Node.js to create server-side
web applications, and it is perfect for data-intensive applications since it uses an asynchronous,
event-driven model

How Node js works?

 Node.js accepts the request from the clients and sends the response, while working with the
request node.js handles them with a single thread. To operate I/O operations or requests node.js
use the concept of threads. Thread is a sequence of instructions that the server needs to perform.
It runs parallel on the server to provide the information to multiple clients. Node.js is an event
loop single-threaded language. It can handle concurrent requests with a single thread without
blocking it for one request.

Node.js basically works on two concept

  Asynchronous
 Non-blocking I/O

Asynchronous: Asynchronous is executing a call back function. The moment we get the response
from the other server or database it will execute a call back function. Call back functions are
called as soon as some work is finished and this is because the node.js uses an event-driven
architecture. The single thread doesn’t work with the request instead it sends the request to
another system which resolves the request and it is accessible for another request. To implement
the concept of the system to handle the request node.js uses the concept of Libuv. Libuv is an
open-source library built-in C. It has a strong focus on asynchronous and I/O, this gives node
access to the underlying computer operating system, file system, and networking.

Non-blocking I/o:  Non-blocking i/o means working with multiple requests without blocking the
thread for a single request. I/O basically interacts with external systems such as files, databases.
Node.js is not used for CPU-intensive work means for calculations, video processing because a
single thread cannot handle the CPU works.

Why Do We Use Node Js?

There are many reasons for which we prefer using NodeJs for the server side of our application,
some of them are discussed in the following:

 NodeJs is built on Google Chrome’s V8 engine, and for this reason its execution time is
very fast and it runs very quickly.
 There are more than 50,000 bundles available in the Node Package Manager and for that
reason developers can import any of the packages any time according to their needed
functionality for which a lot of time is saved.
 As NodeJs do not need to wait for an API to return data, so for building real time and data
intensive web applications, it is very useful. It is totally asynchronous in nature that
means it is totally non-blocking.
 The loading time for an audio or video is reduced by NodeJs because there is better
synchronization of the code between the client and server for having the same code base.
 As NodeJs is open-source and it is nothing but a JavaScript framework, so for the
developers who are already used to JavaScript, for them starting developing their projects
with NodeJs is very easy.

What is Angular js?

AngularJS is a JavaScript framework designed to extend the syntax of HTML. AngularJS

empowers developers to build rich internet applications (RIAs) more easily. Where many
JavaScript frameworks focus on expanding the capabilities of JavaScript itself, AngularJS instead
provides methods for enhancing HTML. AngularJS expands the capabilities of HTML beyond
being a simple markup language. By adding features such as data-binding, AngularJS allows
developers to avoid the complex workarounds that are traditionally necessary when attempting to
build responsive web applications with HTML front ends.

How angular js works?

2-way data binding is the core of AngularJS

AngularJS application gets initialized when DOM Content Loaded events gets fired. A DOM
Content Loaded event is fired on the document when all the HTML elements are loaded and
parsed. It does not wait for all the resources like images, styles and other to be downloaded to
browser. Once this event is fired Angular executes the below steps.

1. Angular looks for ngApp directives in the DOM tree. ngApp works like a marker to
AngularJS, which tells the AngularJS that the portion of HTML markup needs
compilation.
2. If Angular finds multiple ngApp directives then it takes the 1st ngApp covered HTML
portion and starts the process of auto-boot strapping.In auto-bootstrapping all other
depended modules and injectors gets loaded to the AngularJS application.
3. The other remaining ngApp directives needs manual boot strapping. A manual
bootstrapping can be done using angular.bootstrap() method. Once the ngApp root is
determined the compilation process of HTML markup gets triggered by considering the
ngApp element as the root of the application. During the compilation process it loads all
the dependencies like injector or modules.

SCOPE OBJECT

Scope object is simply a plain old JavaScript object. It provides the execution context where
Model and View lives and get evaluated based on the given expression.AngularJS provides 2
types of scope objects global and local scope. These scope objects are listed below. 

1. Root scope: This object provides the application level scope and hence any properties
defined inside this context is global and accessible throughout the application.
2. Scope: This object provides local scope and hence any properties defined inside this
context is not accessible beyond that scope.

AngularJS also support two more useful features that really helps in developing the
application.The details of these features are listed below.

 Nested Scope: Scope object can be nested. A child scope can access the properties of
parent scope.This is made possible by JavaScript prototypal inheritance.
 Isolated Scope: This type of scope object does not participate in protypal inheritance
instead they create their own private scope.

DIGEST CYCLE

Digest cycle is the centre of an AngularJS application. Using digest cycle AngularJS keeps the
model and view in sync. A digest cycle run by AngularJS application by calling digest () method.

In JavaScript when an event is fired, an event object is created and a callback function gets
executed with this event object. This callback method then runs inside the JavaScript function and
returns to the browser for the DOM update.A digest cycle is like callback function which is get
triggered by AngularJS application.

ANGULARJS STATE

The digest cycle creates this magic of 2-way data binding is using different states for the scope
variables.There are many different states a scope variable can have. But digest cycle only uses
dirty and pristine state.The details of these states are listed below.
 1. Dirty State: When users interact with the models of the scope these models changed their
state to dirty state. If you inspect the HTML elements through a developer tool you can
find that a new class call ng-dirty has been get attached to the element’s class.
2. Pristine State: The state of the model when it is untouched or after the digest cycle
completed is called pristine state. If you inspect the HTML elements through a developer
tool you can find that a new class called ng-pristine has been get attached to the
element’s class.

The process of digest cycle is also known as dirty checking. Where the system collects all the
objects which have dirty bit set to true and do the defined process to make the object to pristine
state.

ANGULAR WATCH METHOD

AngularJS scope object provides watch() method for watching the changes to the scope

variables. Each watch callback method gets called with a digest cycle. As the digest cycle is
responsible to create a sync between model and view.

ANGULAR APPLY METHOD

When an scope variable gets updated from outside Angular context then AngularJS cannot
detect the change which results in inconsistency between model and view. In this type of
scenario apply () method come in handy. Apply method is defined inside the scope object. So if
we are writing any code outside of AngularJS then it must be wrapped around the apply method
to get a proper sync between model and view. Apply method achieve this magic by simply
calling the digest method after the block code execution. In simple words apply () method is
upper level of wrapper around digest.

Why we use angular js?

Following are the reasons to use AngularJS:

o Dependency Injection: Dependency Injection specifies a design pattern in which

components are given their dependencies instead of hard coding them within the
component.
o Two way data binding: AngularJS creates a two way data-binding between the select
element and the order Prop model. order Prop is then used as the input for the order By
filter.
o Testing: Angular JS is designed in a way that we can test right from the start. So, it is
very easy to test any of its components through unit testing and end-to-end testing.
o Model View Controller: In Angular JS, it is very easy to develop application in a clean
MVC way. You just have to split your application code into MVC components i.e.
Model, View and the Controller.
o No need to learn another scripting language. It's just pure JavaScript and HTML.
o Supports separation of concerns by using MVC design pattern.
o Built-in attributes (directives) makes HTML dynamic.
o Easy to extend and customize.
o Supports Single Page Application and easy to Unit test.

What is React js?

React is a JavaScript-based UI development library. Facebook and an open-source developer
community run it. Although React is a library rather than a language, it is widely used in web
development. The library first appeared in May 2013 and is now one of the most commonly used
frontend libraries for web development. React offers various extensions for entire application
architectural support, such as Flux and React Native, beyond mere UI.

HOW React js works?

While building client-side apps, a team of Facebook developers realized that the DOM is slow
(The Document Object Model (DOM) is an application programming interface (API) for HTML
and XML documents. It defines the logical structure of documents and the way a document is
accessed and manipulated.). So, to make it faster, React implements a virtual DOM that is
basically a DOM tree representation in JavaScript. So when it needs to read or write to the DOM,
it will use the virtual representation of it. Then the virtual DOM will try to find the most efficient
way to update the browser’s DOM. Unlike browser DOM elements, React elements are plain
objects and are cheap to create. React DOM takes care of updating the DOM to match the React
elements. The reason for this is that JavaScript is very fast and it’s worth keeping a DOM tree in
it to speed up its manipulation.
Although React was conceived to be used in the browser, because of its design it can also be used
in the server with Node.js. 

Why use react js?

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is
why:

 Easy creation of dynamic applications: React makes it easier to create dynamic web
applications because it requires less coding and offers more functionality, as opposed to
JavaScript, where coding often gets complex very quickly.
 Improved performance: React uses Virtual DOM, thereby creating web applications
faster. Virtual DOM compares the components’ previous states and updates only the
items in the Real DOM that were changed, instead of updating all of the components
again, as conventional web applications do. 
 Reusable components: Components are the building blocks of any React application, and
a single app usually consists of multiple components. These components have their logic
and controls, and they can be reused throughout the application, which in turn
dramatically reduces the application’s development time.
 Unidirectional data flow: React follows a unidirectional data flow. This means that when
designing a React app, developers often nest child components within parent components.
Since the data flows in a single direction, it becomes easier to debug errors and know
where a problem occurs in an application at the moment in question.
 Small learning curve: React is easy to learn, as it mostly combines basic HTML and
JavaScript concepts with some beneficial additions. Still, as is the case with other tools
and frameworks, you have to spend some time to get a proper understanding of React’s
library.
 It can be used for the development of both web and mobile apps: We already know that
React is used for the development of web applications, but that’s not all it can do. There
is a framework called React Native, derived from React itself that is hugely popular and is
used for creating beautiful mobile applications. So, in reality, React can be used for
making both web and mobile applications.
  Dedicated tools for easy debugging: Facebook has released a Chrome extension that can
be used to debug React applications. This makes the process of debugging React web
applications faster and easier.

The above reasons more than justify the popularity of the React library and why it is being
adopted by a large number of organizations and businesses.

What is ASP?

ASP.NET is an open-source web framework for building web apps on the .NET (dotNET)
framework. It is created by Microsoft and version 1.0 was released in 2002 to allow developers to
build dynamic web apps, services, and sites. The framework is built to work with the standard
HTTP protocol, which is the standard protocol used across all web applications. An ASP is a
Web page that contains HTML and embedded programming code written in VBScript or Jscript.
ASPs are Microsoft's alternative to CGI scripts and Java Server Pages (JSPs), which allow Web
pages to interact with databases and other programs. Third-party products add ASP capability to
non-Microsoft Web servers. The Active Server Page technology is an ISAPI program and ASP
documents use an .ASP extension.

How ASP WORKS?

1. Through an URL, a request is sent for an asp.net file by a web browser to the webserver.
2. As a process, the request is received by the asp.net web server, i.e. IIS, which in return
gives the appropriate file from memory.
3. Now for processing of the asp.net file, it is redirected to the asp.net script engine for the
further task by the webserver.
4. The script engine runs the server-side script it encounters from top to bottom of the file.
5. After the script engine completes the server-side scripting, it sends an html page to the
webserver.

WHY USE ASP?

 ASP.NET requires less coding for application development.

 Just in time compilation, early binding and caching services are available right out of
the box.
 You can reuse a large library of built-in classes. This significantly reduces the amount
of coding required.
 ASP.NET supports common language runtime. Subsequently, it can support several
languages, such as C#, VB, etc.
 Execution is fast. The ASP application is located in the server in compiled form. This
reduces response time.
 Security features, such as Windows authentication and form authentication, are built
right in.
 You can integrate ASP.NET with ADO.NET. This streamlines database functionalities
for websites.
 ASP.NET separates presentation and programming logic with the use of code-behind
classes.

Overall, the ASP-based approach provides a myriad of advanced capabilities. As a result, web

development is easy for both laymen and professionals, and ASP dot net projects remain popular.
What is CGI?

The Common Gateway Interface (CGI) provides the middleware between WWW servers and
external databases and information sources. The World Wide Web Consortium (W3C) defined
the Common Gateway Interface (CGI) and also defined how a program interacts with a Hyper
Text Transfer Protocol (HTTP) server. The Web server typically passes the form information to a
small application program that processes the data and may send back a confirmation message.
This process or convention for passing data back and forth between the server and the application
is called the common gateway interface (CGI).

How CGI WORKS?

A reader sends a URL that causes the AOL server to use CGI to run a program. The AOL server
passes input from the reader to the program and output from the program back to the reader. CGI
acts as a "gateway" between the AOL server and the program you write.

The program run by CGI can be any type of executable file on the server platform. For example,
you can use C, C++, Perl, UNIX shell scripts, FORTRAN, or any other compiled or interpreted
language. You can also use Tcl scripts with CGI, though the extensions to Tcl With AOL server,
you have the option of using the embedded Tcl and C interfaces instead of CGI. Typically, the
Tcl and C interfaces provide better performance than CGI. (See the AOL server Tcl Developer's
Guide for information on the Tcl interface and the AOL server C Developer's Guide for
information on the C interface.)

You may want to use CGI for existing, shareware, or freeware programs that use the standard
CGI input, output, and environment variables. Since CGI is a standard interface used by many
Web servers, there are lots of example programs and function libraries available on the World
Wide Web and by ftp

WHY USE CGI?

 The advanced tasks are currently a lot easier to perform in CGI than in Java.
 It is always easier to use the code already written than to write your own.
 CGI specifies that the programs can be written in any language, and on any platform, as
long as they conform to the specification.
 CGI-based counters and CGI code to perform simple tasks are available in plenty.