University Institute of Technology

web engineering assignment

Submitted by:- Submitted to:-

PIYUSH KUMAR GOUR Dr. Raju Baraskar
0101CS181073
1

Figure.1 Basic components of Web application

Evaluate above fig.1 carefully and describe the role of Content management
server and Legacy application

2 Discuss the problems and restrictions in Integrated Web Design ;Also Discuss
. the Search fundamentals and their strategies.

Figure 2. Architecture of Web applications

 Interpret and explain each component working as listed above fig.2

Figure. 3 The WebE process Framework activity

What Techniques Can You Use for Communication and Why? Justify
your answer with referred above fig. 3?

5 What is Email (WebApp or Service)? Justify your answer.

.
6
.

Figure. 4 Streaming media architecture using point-to-point connections

You can identify two distinct client locations for multimedia data streaming
applications. First, identify existing content available on-demand, e.g., video-
on-demand, and compare this model with broadcasting live content to many
users ; Compare Webcasting different requirements based on architectures
fig. 4 and Identify the significant causes for bandwidth and server load
problems.
7 How does RE for Web engineering differ from RE for conventional software
.
 systems? and what do you mean by Twin Peaks model? Explain in brief.

8. Interactive Web Applications must be able to distinguish requests by

multiple simultaneous users and identify related requests coming from the
same user. Which term is used to define such a sequence of related HTTP
requests between a specific user and a server within a specific time window?
Discuss with examples.
9.

Figure. 5 Test scheme for Web applications

If you join these three dimensions – quality characteristics, test objects, and
phases – the result can be visualized as a three-dimensional cube as shown
in fig. 5; Explain each tests outlines of cube contains. Also discuss What Types
of Errors Occur Within a WebApp Environment?

10. Explain why large WebApps incorporate searching mechanisms? Discuss

the Steps of Searching Mechanisms Lead to Problems? Also Explain How Is
the Relationship Management Methodology (RMM) Model Used for
Navigation Design?

11 Explain the necessity of Interface design for WebApps. How Are Interface
. Objects and Actions Translated into a Layout?

12. Why Is WebML Appropriate for Workflow Modeling? Justify your answers.
Also explain how is design focus used for identify patterns?

13. List the merits and demerits of Link popularity and PageRank

14. What is Usability of Web applications? Explain in brief ; Draw and discuss
Layered usability model.

15 What do you mean by Web Caching and Content Pre-fetching also discuss the
.
 fundamentals of the Semantic Web

16 XML (eXtensible Markup Language )document is well-formed, there are

. general rules for the syntax of XML
Correct the following XML well-formedness rules
(i) <A><B></A></B> [ All tags have to appear in pairs on the same
nesting depth. In addition, there are empty tags (<B/>)].
(ii) <A></a> [Tags are uppercase- and lowercase-sensitive].
(iii) <A elem = 5/> [All attributes must be enclosed in quotation marks].
(iv) <A B></A B> [Tag names have to comply with the rules for element
names. For example, blanks and < or > are invalid].
17.

Figure. 6 Schematic view of an XSLT processor works

The XSLT language elements can be grouped in four distinct categories: classify
them and also explain XSLT processor working as above shown in fig.6.

18. A Server-Side Include (SSI) represents a simple mechanism allowing the

creation of HTML pages, composed of several text fragments, on the fly. This
mechanism is implemented by a pre-processor for HTML pages, which is
normally integrated in modern Web servers. An HTML page that uses SSI is
forwarded to the pre-processor when a Web browser requests it. The pre-
processor’s output is then delivered by the server. The server generally
identifies such pages by a special file extension (normally shtml). The
commands used to control the pre-processor are embedded in SGML
comments and have the following form:
<!--#command attribute=value ... attribute=value -->
The value of command specifies the command type, which is parameterized
by an attribute-value list. Explain what types of commands are supported by
SSI; Justify your answer.
19.

Figure.7 XML example of the DOM structure for a fragment of the “purchase order”

The above Fig.7 shows a Document Object Model (DOM) of an object-oriented

view on XML documents; illustrate the following:
(i) Which parses and structure of an XML document are instantiates an object
tree.
(ii) Write the benefit of this method is to access the nodes in an object-
oriented ways.
(iii) The drawback of this approach.

20.

Figure.8 User-defined types

An XML schema can be used to describe various pre-defined data types, such
as string, byte, decimal, or date. In addition, they let one define facets which
support user-defined data types similar to templates. Let’s assume, for
example, that all valid ISBN attributes of the XML element book in the
“purchase order” example must follow the notation for ISBNs. illustrate the
above fig.8 explain uses of a facet, and describe the combined numbers and
dashes with the pattern N\-NNNN\-NNNN\-N.
2
1
.

Figure.9 An n-layer architecture for Web applications

Observed fig.9 carefully and identify which one is used to integrate external
systems, e.g., business partner systems, or to integrate legacy applications
and enterprise information systems. Explain in brief .

2 What do you mean by the SSL Handshake Protocol and Digital Signature;
2 Explain in brief.
.

2 Design the navigation scheme : Short answer the

3 following (i)What navigation links and nodes are
. required?
(ii) What navigation conventions and aids are to be used?
(iii) Do navigation mechanisms correspond to the interface requirements
and design?
(iv) Has navigation been optimized for different user categories?
(v) Do navigation semantics agree with each usage scenario?
2
4
.

Figure .10 Technical details on Web Services

 For example, "A service that sells airline tickets between Vienna and
Amsterdam and that accepts payment by Master Card.” Currently, the user
must perform this task, first using a search engine to find a service and then
either reading the Web site associated with that service or executing the
service to see and check whether it adheres to the specified task true or not
before doing it. Above fig.10 identifies the different E-commerce services
and who can specify the information necessary for web service discovery as
computer-interpretable semantic markup at the service websites, a service
registry or an (ontology-enhanced) search engine. How it can automatically
locate appropriate services to do it, described them.

25. E-commerce, cashless payment systems ; At present, credit cards are a very
widespread payment system used for Internet transactions. Customers
transmit their name, credit card number, and expiration date to the vendor
or a trusted intermediary payment service. In order to this write the details
working procedures of Electronic Payment Systems and Credit Card Security.

26. Define Hyper Text Markup Language , why this is the most popular standard
markup language for documents designed to be displayed in a web browser.
Also explain their technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.

27. Element example

<head>
<title>The Title</title>
<link rel="stylesheet" href="stylebyjimbowales.css" /> <!-- Imports
Stylesheets -->
</head>
HTML documents imply a structure of nested HTML elements. These are
indicated in the document by HTML tags, enclosed in angle brackets thus
define given example in brief.
28. HTTP cookies are known as web cookies, Internet cookies, browser cookies,
or simply cookies; It is a small blocks of data created by a web server
while a user is browsing a website and placed on the user's computer or
other device by the user's web browser.
State your answer
(i) Is Cookies are placed on the device used to access a website, and more
than one cookie may be placed on a user's device during a session?
(ii) Is it can serve useful and essential functions on the web?
(iii) Is Authentication cookies commonly used by web servers to authenticate?
(iv) Is Tracking cookies, and especially third-party tracking cookies,
commonly used as ways to compile long-term records of individuals?
 (v) Is a cookie wall pop up on a website informing the user of the website's cookie
usage?

_____________________________________________________________________________________

Answers-

1 .A CMS provides a graphical user interface with tools to create, edit and publish
web content without the need to write code from scratch.

A CMS has two components: a content management application (CMA) and a

content delivery application (CDA).

● The CMA is a graphical user interface that enables users to design, create,
modify and remove content from a website without HTML knowledge.
● The CDA component provides the back-end services that support management
and delivery of the content once a user creates it in the CMA.

Features can vary amongst the various CMS offerings, but core functions include:

● Intuitive indexing, search and retrieval. These features index all data for easy
access through search functions and enable users to search by attributes such as
publication dates, keywords or author.
● Format management. This helps turn scanned paper documents and legacy
electronic documents into HTML or PDF documents.
● Revision features. These features enable content to be updated and edited
after initial publication. Revision control also tracks any changes individuals make to
files.
● Publishing. This functionality enables individuals to use a template or a set of
templates that an organization approves -- as well as wizards and other tools -- for
content creation and modification.

2.There's no clear path. You want to extend a warm welcome to your visitors. Give
them an easy way in and through. Too much competition for attention is a turn off.
When you provide too many options, the functional result is no options.

1. Outdated design. Your site was state of the art in 2009. It's got a header, a
couple of sidebars, and a big chunk of information running down the center. Guess
what? It looks like it's nearly a decade old. Because it is. Time to refresh with current
design thinking. The layout of a page has evolved over the past decade. These days
the best sites break up content into smaller, digestible bits.
2. Overused stock images and icons. If visitors see the same image on multiple
sites, it erodes trust. That picture of people sitting around the conference table? They
sure get around to a lot of offices!
3. Too many textures and colors. You are trying to add interest, but you just add
clutter. Limit colors and fonts. Maintain a thematic color scheme. For professional
sites, try to limit the variety of fonts to three or fewer.
4. Design for the wrong reasons. Always begin by identifying your target audience
and customizing design and content. You may want your site to look "modern" or like
another site you've seen, but if you haven't checked in with what your audience
needs and wants, you can fail miserably.
5. Cute that doesn't cut it. When your links have adorable, witty names, the
experience gets tired fast. Links that don't make much sense are not user friendly and
won't ingratiate you with your visitors. Be practical and basic when naming links.
Make it easy for people. Design for multiple visits. A rotating banner is cool the first
time, and maybe the second, but at some point it's just a stale eyesore. Monotonous
calls to action.
6. Your site isn't optimized for mobile. You shouldn't need to be reminded of this,
but numbers don't lie. Mobile is overtaking desktop. It's increasingly likely that your
visitors see your site on a tiny screen. If they have to pinch and stretch to read, they'll
find a better source of information. Be sure to test your site on smartphone and tablet.
7. You play hard to get. If you want customers to find you, make sure your
address, phone number and hours of operation are easily accessible on your site.
Too often, that information is hidden or completely absent.

3. When we say web application components, we can mean any of the following two:
● UI/UX Web Application Components – This includes activity logs, dashboards,
notifications, settings, statistics, etc. These components have nothing to do with the
operation of a web application architecture. Instead, they are part of the interface
layout plan of a web app.
● Structural Components – The two major structural components of a web app
are client and server sides.
● Client Component - The client component is developed in CSS, HTML, and JS.
As it exists within the user’s web browser, there is no need for operating system or
device-related adjustments. The client component is a representation of a web
application’s functionality that the end-user interacts with.
● Server Component - The server component can be build using one or a
combination of several programming languages and frameworks, including
Java, .Net, NodeJS, PHP, Python, and Ruby on Rails. The server component has at
least two parts; app logic and database. The former is the main control center of the
web application while the latter is where all the persistent data is stored.

5.Email stands for Electronic Mail. It is a method to sends messages from one
computer to another computer through the internet. It is mostly used in business,
education, technical communication, document interactions. It allows communicating
with people all over the world without bothering them. In 1971, a test email sent Ray
Tomlinson to himself containing text.
To differentiate between email and webmail, we need to know that it’s a working
platform. Those types of mail that are sent through the browser are called webmail
and those mails that are sent through the specific application and browser are also
called email. Gmail is a browser-based email whereas outlook for office 365 is a non-
browser email service. To send browser-based mail, we just use the internet whereas
sending non-browser emails, we need a specific application and non-browser-based
email offered some security-related advantages.

7. There are a number differences mostly related to scale, performance, security,

resilience, failover, uptime and so on. Systems developed for small numbers of users
or install bases often do not need to meet those kinds of demands, whereas web
systems must meet them all.
Furthermore, web apps need to meet usability constraints far in excess of most other
kinds of apps: every kind of device, browser, platform, not to mention languages and
input methods.

Web apps often need to cope with enormous variations in load too. For example,
online betting systems often cope with spikes 2-3 orders of magnitude larger than
their everyday normal use. Being able to spin up and down servers automatically on
demand is a must.

Whilst some answers here correctly identity that the lead time from idea to delivery
can be quite short on the web, other kinds of apps are adopting the same practices to
allow them to be competitive and responsive as a business. For example, banking
applications need to be robust and respond to rapid changes in business demand.

The Twin Peaks Model deals with the development of the requirements and the
architecture of a software system. Invented by Bashar Nuseibeh, an IT professor at
the Open University in the UK, it aims to solve the "chicken and egg problem" of
software development:
Before you design an architecture, the requirements must be defined. However,
requirements can only be derived once the architecture is known.
In practice, a classic waterfall model often resulted: First the requirements were
specified, then the architecture was developed based on them. However, this
procedure led, for example, to requirements that could not be implemented using the
available technical means; or a poorly performing architecture that failed to meet
stakeholder expectations.

8. Interactive web applications require an interactive design that integrates software

into your web page to enhance customer engagement levels through an excellent
and relevant visitor experience. In this modern world submerged with global
competition, digital presence is not sufficient. Getting the attention of genuine visitors
is the mandatory goal. Interactive websites play a vital role in attracting users.

To convert a lead into a sale, the brand should deliver the users more engaging and
strategic features with the business or products. Businesses that own interactive
websites get quality traffic and leads in the long-term. The design components turn
ideas into reality, and companies reap the same when they visualize improved user
engagement levels.

Objectives of Interactive Web Applications

Your potential customers learn through your interactive web designs, and it solidifies
the brand too. The more interactive the web page is, the more interest the customer
shows. Customers need information nowadays before they make a buying decision.
They search for full transparency. An interactive website’s primary objective is to offer
users an enjoyable, exciting, and engaging experience. User experience is one of the
essential elements of any website for the following reasons

● UX is one of the important ranking factors of Google

● UX engages users on your site
● UX defines the target audience’s viewpoint of your business
● UX boosts business conversion
● UX ensures customer satisfaction
9.1) DNS issues and network connectivity

An essential element of successful web traffic management is DNS queries, which is

why an issue with these systems can result in a plethora of issues. Without the proper
protection, faulty DNS queries can prevent visitors from reaching your website, while
also causing errors, 404s, and incorrect pathways. In a similar vein, network
connectivity and an efficient firewall are key parts of your site’s access and
productivity.

2) Slow servers and loading time

If your servers are particularly slow, they could be hosted using a shared account,
which means that your site is sharing the server with hundreds, possibly thousands of
other websites. You can address this common roadblock by checking with your
hosting company to determine whether or not the site is hosted on a dedicated
server. If it isn’t, you can request this service, but it may come at an additional price.

3) Poorly written code

Another web application performance problem that many face is with poorly written
code, which could refer to inefficient code, memory leaks, or synchronization issues.
Your application could also deadlock due to ineffectual algorithms, as well as the
performance degradation of a web application. Old versions of software or integrated
legacy systems can also take a toll on your website’s performance.

4) Lack of load balancing

Slow response times can also be caused by poor load distribution. When new site
visitors are assigned incorrectly, it can drown out your servers even if the system is
under capacity. Such an issue can cause a slow response time, especially if your site
is receiving too many requests.

5) Traffic spikes
Spikes happen, especially during a marketing promotion with videos, and a company
may not be prepared for the extra traffic. This issue can also cause your servers to
slow down, hindering the performance of your site and harming your brand.
10.1. Verify the need for scaling and manage expectations

If you already have an app, scaling could be costly. On the other hand, besides the
issues with increasing traffic, if you intend to develop features to your system or make
the existing ones more complex, the current functionality might not handle the
changes.

Make sure that your expectations of scaling justify the expenses. And ensure that
you’re not simply jumping on the bandwagon because everyone is talking about
scalability.

How do you know if you need to build a large-scale web app? Here are a few
questions that can help you decide:

● Do you expect an increase in users? By how much, and within what time frame
– six months, a year?
● For how long can your customer/user base fit the server(s) you currently use?
● What storage plan do you use? Is it flexible for size changes?
● What options do you have in case you experience a drastic increase in user
and data traffic?

2. Apply metrics to define your scalability challenges

After careful consideration, you decide that your application needs to be scaled. The
next step is to decide what scalability issues you need to focus on. This can be done
by tracking the following metrics:

● Use of CPU. This is a basic and essential metric that can be measured by most
app-monitoring tools. High CPU usage suggests that your app is already
experiencing performance issues.
● Use of memory. This is calculated per each process that happens in your app
and then aggregated into a single execution.
● Network Input/Output. This is the time spent on sending data from one tracked
process to another. Look for instances that consume the most time.
● Disk Input/Output. This is all the operations that happen on a physical disk. And
it’s another process attributed to time—while your app is reading data from a file, the
CPU is on standby.

3. Choose tools for evaluating metrics and further monitor scalability

To find problematic areas, you need app-monitoring tools to track related metrics.
Some examples are AppDynamics, Stackify Retrace, and New Relic AMP.

Once you choose a tracking tool, perform tests for the above-mentioned metrics. If
any of them show high results, you need to dig deeper into the problem and create
test cases to scale your app.

These initial results are your benchmarks. Hold onto the tool you choose to keep
tracking the metrics during and after developing a large-scale app.

If you use a PaaS, such as Amazon Web Service, Heroku, IBM Cloud, or Microsoft
Azure, they have built-in monitoring tools. On this note:

4. Choose the right infrastructure options for scalability

Using a PaaS for a web app is recommended because cloud services take care of
many aspects involved in web app development and maintenance. These aspects
include the infrastructure and storage, servers, networking, databases, middleware,
and runtime environment.

PaaS can make scaling easier since they offer auto-scaling, along with reliability and
availability of SLAs.

If you don’t yet use a PaaS, consider AWS, Heroku, IBM Cloud, or MS Azure.

5. Choose an architecture pattern that will suit your app’s scalability

Choosing the right architecture pattern matters because some features of your app
will depend on its scalability, while others will be essential only for certain users or at
certain times and could be bundled as plugins.

The top four most used architecture patterns are:

1) Layered architecture

The name is pretty self-explanatory since apps with this architecture are built in
layers. Each layer has its task, and data has to travel through each from top to
bottom, where there’s usually a database.

This type is most suitable for:

● new apps with a limited time frame,

● apps that require strict standards in maintenance and testing,
● developer teams that don’t have much experience or understanding of different
architectures, and
● enterprises that mirror traditional IT department processes.

2) Event-driven architecture- Unlike in the layered architecture, this type consists of a

central unit and modules that interact with data that’s particular to them. When an
event triggers the central unit, it delegates the data to a module that’s dedicated to
the data type.

Event-driven architecture is most suitable for:

● developing asynchronous systems, and

● user interfaces.

3) Microkernel architecture

This type consists of a core system and plug-in modules that offer additional features
and specialized processing to enhance the core functionality. A simple example of
such architecture would be WordPress.

This type is most suitable for:

● apps that have a wide target audience,

● instances where you can clearly distinguish between basic and higher needs,
and
● instances where you can distinguish between core and dynamic routines.

4) Microservices architecture

This is high-performance web application architecture that helps build flexible

applications by making it a distributed system that loosely connects to individual web
services via lightweight protocols.

With the microservices approach, you can develop, test, and deploy individual
services without affecting the whole app.

Microservices architecture is most suitable:

● when different tasks can be separated and don’t affect each other,
● for websites with small components,
● for rapidly growing applications, and
● when hiring a software development team that is distributed across different
countries.

6. Choose the right database to scale

The kind of database you choose will depend on the data types you need to store –
relational or disconnected. In the first case, you will need a relational database, such
as MySQL or PostgreSQL. For the latter, you’ll need a NoSQL database, like
MongoDB.

Any database you choose should be easy to integrate into your app.

7. Choose a scalable application framework

Application frameworks support graphical user interfaces and web-based application
development. For example, they allow sharing of code for different modules, reducing
developmental issues.

11. 1. MAKE EVERYTHING A USER MAY NEED EASILY ACCESSIBLE

It doesn’t matter what kind of app you are designing — if users can’t find what they
want in a matter of minutes, they’ll leave. This is why making things easily accessible
is a fundamental rule. Use the shortcuts, hover tooltips, and tabs to make your web-
based user interface clear and simple.

2. GIVE A FEW OPTIONS FOR CONTACTING YOU

Such toolbar options as Help, Support, and Contact should be easily accessible as
well. At some point, your customers will need to get in touch with you and it should be
as simple as possible.

3. BE CONSISTENT

Your product has to work, look, and feel like one single unit. Therefore, being
consistent is another crucial rule to follow when creating user interface for web
application. The consistency of your interface is where the consistency of the entire
app begins.
Consistency refers to everything from the font, colors, and design that users see on
every page to the menu on the front page which has to be perfectly structured. It
would be a great idea to make the web app interface feel more intuitive so the users
are able to navigate easily.

4. APPROACH THE DESIGN WITH UTMOST CLARITY

People who use your app don’t have to wreck their brains to understand what to do,
where to click, and what to choose. It should be clear from the very beginning. One of
the ways to make things obvious is to create a new page for every new step of the
process. Here is one of a good web application user interface design examples:

5. PROVIDE USERS WITH FEEDBACK

Make sure that your users receive small feedback on whatever actions they are
taking. Once they click on something it would be useful of the system let them know
how much time is left to upload the next page or download the file. Keep in mind that
most people are impatient, but it’s less frustrating for them to see that the system is
processing something.

6. USE RECOGNITION INSTEAD OF RECALL

No one wants to guess what icon they should click. Hence, all icons should be as
recognizable as possible, so their usage becomes intuitive. Recognizing instead of
recalling makes UX much more satisfying.

7. CHOOSE STABLE WAYS OF INTERACTION

This point connects to consistency because the ways a user will be interacting with
the app have to be logical. Every page has to have the same way of interaction and
include only functional images. This way users will avoid the confusion and
frustration, and you — loss of customers.

8. GIVE USERS A CLEAR UNDERSTANDING OF WHAT TO DO

When Siri was designed, voice input was chosen as the main way of using the app
and it never changed. Users just need to talk to the app, can’t get much clearer than
that. Make instructions understandable to the users.
14.The main reason that usability is so important is because there are so many
similar websites that people will go to the next site if the first one they visit is not
usable. You can have the most beautiful website in the world, but people will leave
immediately if they are unable to figure out how to navigate your site quickly.

Usability testing is used to test all forms of interactions that humans have with
devices (Image credit – Mediamatic)

As stated in the article Why Web Site Usability is Important for a Company, on the
web, companies entirely rely on their web presence in order to achieve their online
goals. Similarly, a user of a company’s web site will formulate a judgement about that
company that is strongly correlated with the way they perceive its web site.
Furthermore, usable websites increase user satisfaction whereas web sites which
violate usability conventions confuse users and result in a loss of revenue for the
companies behind them. This is because improving usability is a great way to
encourage users to visit your site instead of the sites that belong to your competitors
and is often an approach that keeps customers coming back to your site again and
again. Indeed, high-quality websites that are easy to use bring in customers and give
a particular site a competitive edge over the competition.

15.The Semantic Web is a mesh of data that are associated in such a way that they
can easily be processed by machines instead of human operators. It can be
conceived as an extended version of the existing World Wide Web, and it represents
an effective means of data representation in the form of a globally linked database.
By supporting the inclusion of semantic content in Web pages, the Semantic Web
targets the conversion of the presently available Web of unstructured documents to a
Web of information/data.

Web caching is the activity of storing data for reuse, such as a copy of a web page
served by a web server.

It is cached or stored the first time a user visits the page and the next time a user
requests the same page, a cache will serve the copy, which helps keep the origin
server from getting overloaded.

Web caching solutions and strategies enhance page delivery speed significantly and
reduce the work needed to be done by the backend server.
Caching servers can be set to refresh at specific intervals or in response to certain
events to ensure that the freshest content is cached (useful for rapidly changing
information, such as breaking news or rapidly changing pricing).

Caching can also protect against total outages, delivering already cached content
when servers are down.

17.XSL consists of four parts:

● XSLT - a language for transforming XML documents

● XPath - a language for navigating in XML documents
● XSL-FO - a language for formatting XML documents (discontinued in 2013)
● XQuery - a language for querying XML documents

● XSLT stands for XSL Transformations

● XSLT is the most important part of XSL
● XSLT transforms an XML document into another XML document
● XSLT uses XPath to navigate in XML documents
● XSLT is a W3C Recommendation

18.Server-side includes (SSI) are a mechanism for employing the web server to
perform tasks like displaying files as part of other files or displaying information like
the URL of web pages or dates and times dynamically.

Reasons why you might like to use SSI on your web site are:

● If used in templates, SSI can help you to ensure that you retain a consistent
layout when you need to change the visual appearance of your web site.
● SSI can help you to avoid unnecessary duplication of data that appears on a
number of pages (e.g. contact details, dropdown menus, navigation bars).
● Keeping repetitive content separate in one file makes updates of these details
easier and more efficient.

SSI directives are inserted within html comments. Like in html there are a number of
elements, and these elements can be used in conjunction with various attributes. The
general syntax of an SSI directive is

<!--#element attribute="value" -->

or, if the element has more than one attribute,

<!--#element attribute1="value1" attribute2="value2" -->

These notes are not exhaustive. They will cover some of the uses of the following
elements:

● include
● echo
● config

19.HTML is used to structure the web pages and Javascript is used to add behavior
to our web pages. When an HTML file is loaded into the browser, the javascript can
not understand the HTML document directly. So, a corresponding document is
created(DOM). DOM is basically the representation of the same HTML document but
in a different format with the use of objects. Javascript interprets DOM easily i.e
javascript can not understand the tags(<h1>H</h1>) in HTML document but can
understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p,
etc) by using different functions.

Structure of DOM: DOM can be thought of as a Tree or Forest(more than one tree).
The term structure model is sometimes used to describe the tree-like representation
of a document. One important property of DOM structure models is structural
isomorphism: if any two DOM implementations are used to create a representation of
the same document, they will create the same structure model, with precisely the
same objects and relationships.
Methods of Document Object:
● write(“string”): Writes the given string on the document.
● getElementById(): returns the element having the given id value.
● getElementsByName(): returns all the elements having the given name value.
● getElementsByTagName(): returns all the elements having the given tag name.
● getElementsByClassName(): returns all the elements having the given class
name.
22. Handshake Protocol is used to establish sessions. This protocol allows the client
and server to authenticate each other by sending a series of messages to each other.
Handshake protocol uses four phases to complete its cycle.

● Phase-1: In Phase-1 both Client and Server send hello-packets to each other.
In this IP session, cipher suite and protocol version are exchanged for security
purposes.
● Phase-2: Server sends his certificate and Server-key-exchange. The server end
phase-2 by sending the Server-hello-end packet.
● Phase-3: In this phase, Client replies to the server by sending his certificate and
Client-exchange-key.
● Phase-4: In Phase-4 Change-cipher suite occurred and after this Handshake
Protocol ends.

A digital signature is exactly what it sounds like a modern alternative to signing

documents with paper and pen.

It uses an advanced mathematical technique to check the authenticity and integrity of

digital messages and documents. It guarantees that the contents of a message are
not altered in transit and helps us overcome the problem of impersonation and
tampering in digital communications.

Digital signatures also provide additional information such as the origin of the
message, status, and consent by the signer.

23. Navigation design is the discipline of creating, analyzing and implementing ways
for users to navigate through a website or app.

Navigation plays an integral role in how users interact with and use your products. It
is how your user can get from point A to point B and even point C in the least
frustrating way possible.

To make these delightful interactions, designers employ a combination of design

patterns including links, labels and other UI elements. These patterns provide
relevant information and make interacting with products easier.

Good navigation design can:

Enhance a user’s understanding
Give them confidence using your product
Provide credibility to a product

The best kind of navigation design is one which promotes usability. Poor navigation
will result in fewer users for your product and this is why navigation design is central
to user experience design.

Navigation design is complex and there are many design patterns to choose from
when optimizing the user experience. A design pattern is a general, reusable solution
to a problem.

No one pattern is necessarily better than the other. Each pattern that you use in your
product will have to be carefully considered and tested before implementation.

This ensures that the navigation pattern you have chosen is right for your product but
more importantly that it is right for your users.

Ideally, you want to approach navigation from a user-centered design perspective.

Without well thought out navigation, your user may have trouble using your product
and abandon you altogether. The reason that navigation design is so important is
because it is method by which your user is able to explore and enjoy your product.

There exist many mechanisms to help users navigate. Many products will use a
combination of these mechanisms in their designs because some patterns work
better depending on the circumstances at hand.

For example, a breadcrumb menu might be useful for an ecommerce website with a
large number of sub-categories which are structured in a hierarchical manner.

25. An e-payment or Electronic Payment system allows customers to pay for the
services via electronic methods.

They are also known as online payment systems. Normally e-payment is done via
debit, credit cards, direct bank deposits, and e-checks, other alternative e-payment
methods like e-wallets, bitcoin, cryptocurrencies, bank transfers are also gaining
popularity.
Types of e-payment system

E-payments can be done in the following ways,

Internet banking – In this case, the payment is done by digitally transferring the funds
over the internet from one bank account to another.

Some popular modes of net banking are, NEFT, RTGS, IMPS.

Card payments – Card payments are done via cards e.g. credit cards, debit cards,
smart cards, stored valued cards, etc. In this mode, an electronic payment accepting
device initiates the online payment transfer via card

Credit/ Debit card – An e payment method where the card is required for making
payments through an electronic device.

Smart card – Also known as a chip card, a smart card, a card with a microprocessor
chip is needed to transfer payments.

Stored value card – These types of cards have some amount of money stored
beforehand and are needed to make funds transfer. These are prepaid cards like gift
cards, etc.

Working of e-payments can be explained in the following three steps,

Payment initiation – Customer finalizes the product/service and chooses the payment
method to initiate the transaction.

Depending on the payment method, the customer enters the required information like
card number, CVV, personal details, expiration date, PIN, etc.

The chosen payment method either redirects the customer to an external payment
page or a bank’s payment page to continue the payment process.

Payment authentication – The information submitted by the customer along with other
details like payment information, customer’s account information is authenticated by
the operator.

The operator can be a payment gateway or any other solution involved. If everything
gets authenticated positively, the operator reports a successful transaction.

26.HTML, or HyperText Markup Language, allows web users to create and structure
sections, paragraphs, and links using elements, tags, and attributes. However, it’s
worth noting that HTML is not considered a programming language as it can’t create
dynamic functionality.

HTML has a lot of use cases, namely:

● Web development. Developers use HTML code to design how a browser
displays web page elements, such as text, hyperlinks, and media files.
● Internet navigation. Users can easily navigate and insert links between related
pages and websites as HTML is heavily used to embed hyperlinks.
● Web documentation. HTML makes it possible to organize and format
documents, similarly to Microsoft Word.

It’s also worth noting that HTML is now considered an official web standard. The
World Wide Web Consortium (W3C) maintains and develops HTML specifications,
along with providing regular updates.
This article will go over the basics of HTML, including how it works, its pros and cons,
and how it relates to CSS and JavaScript.
The average website includes several different HTML pages. For instance, a home
page, an about page, and a contact page would all have separate HTML files.
HTML documents are files that end with a .html or .htm extension. A web browser
reads the HTML file and renders its content so that internet users can view it.
All HTML pages have a series of HTML elements, consisting of a set of tags and
attributes. HTML elements are the building blocks of a web page. A tag tells the web
browser where an element begins and ends, whereas an attribute describes the
characteristics of an element.
● Beginner-friendly. HTML has a clean and consistent markup, as well as a
shallow learning curve.
● Support. The language is widely used, with a lot of resources and a large
community behind it.
● Accessible. It is open-source and completely free. HTML runs natively in all web
browsers.
● Flexible. HTML is easily integrable with backend languages such as PHP and
Node.js.
27.The easiest way to understand nesting is to think of HTML tags as boxes that hold
your content. Your content can include text, images, and related media. HTML tags
are the boxes around the content. Sometimes, you need to places boxes inside of
other boxes. Those "inner" boxes are nested inside of others.

If you have a block of text that you want bold inside a paragraph, you'll have two
HTML elements as well as the text itself.
Example: This is a sentence of text.

That text is what we will use as our example. Here is how it would be written in
HTML:
Example: This is a sentence of text.
To make the word sentence bold, add opening and closing tags before and after that
word.
Example: This is a sentence of text.
As you can see, we have one box (the paragraph) which contains the content of the
sentence, plus a second box (the strong tag pair), which renders that word as bold.
When you nest tags, close the tags in the opposite order that you opened them. You
open the
first, followed by the , which means you reverse that and close the and then the
Another way to think about this is to once again use the analogy of boxes. If you
place a box inside another box, you have to close the inner one before you can close
the outer or containing box.
Accessibility and browser compatibility matters, too. If your HTML is incorrectly
nested, it won't be as accessible to screen readers and older browsers—and it could
even completely break the visual appearance of a page if the browsers cannot figure
out how to properly render a page because HTML elements and tags are out of
place.
Finally, if you're striving to write completely correct and valid HTML, you'll need to
use correct nesting. Otherwise, every validator will flag your HTML as incorrect.
28. i) Cookies are small files of information that a web server generates and sends to
a web browser. Web browsers store the cookies they receive for a predetermined
period of time, or for the length of a user's session on a website. They attach the
relevant cookies to any future requests the user makes of the web server.

Cookies help inform websites about the user, enabling the websites to personalize
the user experience. For example, ecommerce websites use cookies to know what
merchandise users have placed in their shopping carts. In addition, some cookies are
necessary for security purposes, such as authentication cookies (see below).

The cookies that are used on the Internet are also called "HTTP cookies." Like much
of the web, cookies are sent using the HTTP protocol.

ii) Cookies help associate website activity with a specific user. A session cookie
contains a unique string (a combination of letters and numbers) that matches a user
session with relevant data and content for that user.

Suppose Alice has an account on a shopping website. She logs into her account from
the website's homepage. When she logs in, the website's server generates a session
cookie and sends the cookie to Alice's browser. This cookie tells the website to load
Alice's account content, so that the homepage now reads, "Welcome, Alice."

iii) Some cookies record what websites users visit. This information is sent to the
server that originated the cookie the next time the browser has to load content from
that server. With third-party tracking cookies, this process takes place anytime the
browser loads a website that uses that tracking service.

If Alice has previously visited a website that sent her browser a tracking cookie, this
cookie may record that Alice is now viewing a product page for jeans. The next time
Alice loads a website that uses this tracking service, she may see ads for jeans.

iv)A third-party cookie is a cookie that belongs to a domain other than the one
displayed in the browser. Third-party cookies are most often used for tracking
purposes. They contrast with first-party cookies, which are associated with the same
domain that appears in the user's browser.

When Alice does her shopping at jeans.example.com, the jeans.example.com origin

server uses a session cookie to remember that she has logged into her account. This
is an example of a first-party cookie. However, Alice may not be aware that a cookie
from example.ad-network.com is also stored in her browser and is tracking her
activity on jeans.example.com, even though she is not currently accessing
example.ad-network.com. This is an example of a third-party cookie.

v) cookies can be used to record browsing activity, including for advertising purposes.
However, many users do not want their online behavior to be tracked. Users also lack
visibility or control over what tracking services do with the data they collect.

Even when cookie-based tracking is not tied to a specific user's name or device, with
some types of tracking it could still be possible to link a record of a user's browsing
activity with their real identity. This information could be used in any number of ways,
from unwanted advertising to the monitoring, stalking, or harassment of users. (This
is not the case with all cookie usage.)