SCS 209: INTERNET TECHNOLOGY

WEB DEVELOPMENT
Web development and its importance:

Web development encompasses the tasks involved in developing websites for the Internet or an
intranet. It includes everything from building simple static pages to complex web-based
applications.

Web development plays a crucial role in enabling businesses, organizations, and individuals to
establish an online presence and interact with their target audience effectively.

Key Components of Web Development

Front-end development:

Front-end development focuses on the visual and interactive aspects of a website that users interact
with directly. Key technologies include:

 HTML (Hypertext Markup Language): Defines the structure and content of web pages.
 CSS (Cascading Style Sheets): Controls the presentation, layout, and design of web pages.
 JavaScript: Enables interactive elements and dynamic behavior on web pages.
Responsive design principles ensure that websites adapt seamlessly to various screen sizes and
devices, providing an optimal viewing experience for users.

Back-end development:

Back-end development involves server-side programming and manages the server, databases, and
application logic. Common technologies include:

 Server-side languages: Such as PHP, Python, and Node.js, handle server-side operations and logic.
 Database management systems (DBMS): Such as MySQL and MongoDB, store and manage data
efficiently.
Back-end developers focus on building robust server-side applications that interact with databases,
handle user authentication, and process business logic.

1
 Career Opportunities in Web Development

Roles and responsibilities:

Web development careers encompass various roles, including:

 Front-end developer: Creates user interfaces and enhances user experiences.

 Back-end developer: Manages server-side operations and database interactions.
 Full-stack developer: Handles both front-end and back-end development tasks.
 UX/UI designer: Focuses on the design and usability of websites.
 DevOps engineer: Optimizes development processes and manages deployments.

Skills and qualifications:

Key skills for web developers include proficiency in programming languages (e.g., HTML, CSS,
JavaScript), familiarity with frameworks and libraries (e.g., React, Node.js), and knowledge of
database management systems (e.g., MySQL, MongoDB). Soft skills such as problem-solving,
teamwork, and communication are essential for collaborating with cross-functional teams and
delivering successful projects.

Future outlook and growth potential:

The demand for skilled web developers continues to grow as businesses expand their online
presence and invest in digital transformation initiatives.

Emerging technologies like AI, IoT (Internet of Things), and blockchain offer new opportunities
for innovation in web development.

Continuous learning and upskilling in emerging technologies and frameworks (e.g., GraphQL,
Vue.js) enhance career prospects and adaptability to industry trends.

2
Conclusion
Web development is a dynamic and evolving field that plays a crucial role in the digital age.

From the basics of HTML, CSS, and JavaScript to advanced server-side languages and database
management, web development encompasses a wide range of skills and technologies.

Staying updated with the latest trends and best practices ensures that developers can create
innovative, secure, and high-performing websites and applications.

The importance of understanding the web development process, from planning and design to
development and testing, cannot be overstated.

By prioritizing SEO and embracing new trends like Progressive Web Apps and Single-Page
Applications, developers can deliver exceptional user experiences and drive business success.

Despite the challenges in browser compatibility, security, and performance optimization, a career
in web development offers numerous opportunities for growth and innovation.

With the right skills, qualifications, and a commitment to continuous learning, aspiring web
developers can look forward to a bright and promising future in this ever-evolving industry.

3
ELEMENT, CELL PADDING AND BODY ATTRIBUTES AND OTHER ELEMENTS

What are elements in web development?

There are various visual elements and some of them are given below: Layout: Layout
simply represents the overall structure of the website that includes graphics, ads, texts,
headers, menus, content, etc. The website layout is very important as it helps to guide
users and tell them where they want to look.

Elements are used to create the structure of a web page and are used to present information in
various ways. JAWS interacts with these elements to provide the information you need to
access the page contents. Some of the most common web page elements you will encounter
include: Links.

To Note: JAWS, Job Access With Speech, is the world's most popular screen reader,
developed for computer users whose vision loss prevents them from seeing screen content or
navigating with a mouse.

JAWS in combination with other keys on the keyboard to perform various actions. For example,
the JAWS Key+T reads the title of the current document while JAWS Key+F7 opens a list of
links in a web page.

NOTE:

Elements of Web Design

Web Design, as the name suggests, simply means designing websites. Designing websites is
quite complex and as well as daunting also i.e., difficult to deal with.
Web designing is a creative process that not only affects the audience but also affects ranking
and one’s brand. It simply affects the entire web presence.
Designing is basically creating something according to plan to show the look and function it.
Web design is similar as it also includes designing websites and presenting contents to end-user
through the internet by web browsers.
Elements of Web Design: It might look easy to design websites but in reality, it’s not easy as it
looks.
While designing websites, one has to keep in mind both the appearance and functionality of
websites.
A good web design will only impress the audience as the impression will either make remain on
your website and get to know about your business or will leave your website and look for
another one.
There are basically two elements of web design i.e., visual elements and functional elements.
4
1. Visual Elements:
Visual elements simply mean an aspect or representation of something that we see. There are
various visual elements and some of them are given below:
 Layout: Layout simply represents the overall structure of the website that includes graphics,
ads, texts, headers, menus, content, etc. The website layout is very important as it helps to
guide users and tell them where they want to look.
A good layout will also make it easy for one to have access to information and give a clear path
for navigation. There are different layouts available nowadays and one can choose any one of
them as there are no such rules when choosing a layout.
 Shapes: Shapes simply mark the boundaries of content. It also plays important role in
branding. Each geometrical or graphical shape has its own meaning that influences our mind.
Shapes simply represent a concept, create movement, affect the composition, help to create
complex drawings and paintings, provide depth and texture, etc. It also helps to increase the
number of visitors on the website as appearance influence peoples that in turn improve your
business.
 Colors: Choosing appropriate colors for web design is very essential and important. It can be
considered a powerful element in developing a website successfully. It is a way to connect to
users or visitors and increase brand recognition. Effective usage of color attracts people and
increases the number of visitors. One can choose different colors as per their choice.
 Images and Icons: Images and icons are the best way to improve the user experience of your
website as well as attract the attention of users. It is the best and most compatible way to
present information and explaining concepts. It makes the website look professional and
more interesting. It also supports text content and gives a quick summary of the text.
2. Functional Elements:
Functional elements simply mean aspect or representation of functionalities of websites. It
simply represents what the website can do and how it works. There are various functional
elements and some of them are given below:
 Navigation: Navigation simply means the process of monitoring and controlling the
movement around websites or screens, etc. It simply directs visitors or users to various web
pages and will allow searching websites for longer. It is one of the best ways to determine
whether the website is working properly or not.
 User Interaction: The user interface is very important as it will either make and increase
visitors to your website or break the user base. It simply attracts users and simplifies their
activities. It is basically a point where users interact with websites such as scrolling, clicking,
typing, etc.
 Animation: Animations play a very important role to attract more users and enhance the user
experience. Animation simply demonstrates a product or images and are mostly made with
CGI (Computer Generated Imagery). It allows one to do more with less, interacts with people
in a better way, and communicate clearly and effectively.

CELL PADDING
5
 Cell padding is the space between the cell edges and the cell content. By default the padding is set to 0.

An element's padding is the space between its content and its border. The padding property is
a shorthand property for: padding-top. padding-right. padding-bottom.

Cell padding is the space between the cell edges and the cell content. By default the padding is
set to 0.

NOTE:

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
padding: 15px;
}

Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-
right properties:

Example

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

Read W3schools Link on Cell Padding

6
BODY ATTRIBUTES

The body tag is used to define the main content of a web page, including text, images, links,
and other HTML elements.

It is also used to define the background color or image of the web page. The body tag can also
include attributes, such as the background color, text color, and link color.

NOTE:

HTML body Tag

The <body> tag in HTML is used to define the main content present inside an HTML page. It
is always enclosed within <HTML> tag. The <body> tag is the last child of the <html> tag.
 The <body> tag contains all the contents of an HTML document, such as headings, images,
hyperlinks, tables, lists, paragraphs, etc.
 The <body> tag is required in HTML documents.
 If omitted, the browser assumes its presence.
HTML

<!DOCTYPE html>
<html lang="en">
<body>
<h3>GeeksforGeeks</h3>
<p>This is paragraph text</p>
</body>
</html>

Syntax

<body> Body Contents... </body>

Attributes

There are many attributes in the <body> tag that are depreciated from HTML5 are listed below:

7
 Attribute Values Description

It contains the URL of the background image.

background
It is used to set the background image.

It is used to specify the background color of

bgcolor
an image.

It is used to specify the color of the active

alink
link.

link It is used to specify the color of visited links.

text It specifies the color of the text in a document.

vlink It specifies the color of visited links.

OTHER ELEMENTS

Of the 142 HTML tags that exist, all of them serve their purpose across different levels within the HTML
document, some of them become full elements and some become empty elements. Full elements have
permitted content while empty elements don't have any permitted content.

To Note: Permitted Content: It is defined using one of the five keywords require , optional , oneOrMore ,
zeroOrMore , and choice . Of these, require , optional , oneOrMore and zeroOrMore mean the number of
elements. Specify the tag name (or # text for text nodes) using the keyword as a key. Each keyword
cannot be simultaneously specified.

8
 ELEMENTS OF A GOOD WEBSITE IN WEB DEVELOPMENT
The Top Most Important Elements of A Website Design

 1 Navigation. The website design should be easy to navigate and the menu items should easily
accessible from any page.
 2 Visual Design.
 3 Content.
 4 Web Friendly.
 5 Interaction.
 6 Information Accessibility.
 7 Intuitiveness.
 8 Branding.

Basic elements of good website design:

Typography, color palettes, images, and videos are all critical components of visual
appeal. A number of sites look great at a first glance, but they should provide a
consistent user experience throughout. It's important to keep fonts and colors consistent
and ensure design elements complement each other.

NOTE:

THE TOP 10 MOST IMPORTANT ELEMENTS OF A WEBSITE DESIGN

If you are a business owner, your website is absolutely one of the most important tools you have
in your arsenal to get more - and better - clients and customers.

So what separates a good website from a bad website, or a good one from a great one?

Here are 10 qualities that a great website will need. Whether or not you end up retaining
makespace!

1 Navigation
The website design should be easy to navigate and the menu items should easily accessible from
any page.

The viewer should always know exactly where they are on the website and have easy access to
where they would like to be.

A site map is a great idea and will be used if available. This sounds elementary but most
websites could be improved in this area.
9
Remember, there is a fine line between an interactive menu and an annoying one, so
functionality should be the idea.

2 Visual Design
People are visually oriented creatures, and utilizing great graphics is a good way to make your
website more appealing.

Your website has about 1/10th of a second to impress your visitor - and potential customer - and
let them know that your website - and business (by proxy) - is trustworthy and professional.
However, it's important not to go overboard with too much.

Scrolling text, animation, and flash intros should be used sparingly in your web design and only
to emphasize a point for maximum effect.

3 Content
This is the backbone of your website. Not only does your content play a major role in your
search engine placement, it is the reason most visitors are seeking from your website in the first
place.
Your website text should be informative, easy to read, and concise.

Well thought out web content and copy will do more than anything else to make your website
design engaging, effective and popular.

4 Web Friendly
No matter how informative, beautiful, and easy to use your website design is, it's useless unless
it's web-friendly.

It is important that your web designers know the keys to making your website work on all the
major browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine
Optimization).

Many factors effect your search engine placement and visual appearance of your site, so make
sure your web designers know their stuff.

5 Interaction
A truly effective website design engages your visitors immediately and continues to hold their
attention through EVERY page, as well as influences them to contact you.

This is called 'conversion', and is probably your website's ultimate goal.

Again, there is a fine line between ʻinteractionʼ and ʻannoyanceʼ, so the level of interac- tion
should never outweigh the benefit.

10
6 Information Accessibility
Not all visitors to your website are interested in, or have the time to peruse the entire site.

They may need to access only a phone number or address, or just a certain bit of info. For this
reason itʼs important to place key information in plain site, in an area thatʼs easily accessible.

Weʼve all had the experience of not being able to locate some needed information on a website,
and the result is always a frustrated visitor.

The experience is annoying at best, and a disgruntled visitor wonʼt stay on your site very long
and is unlikely not to return, much less do business with you.

7 Intuitiveness
A great website anticipates what your visitor is thinking and caters directly to their needs, and
has elements arranged in a way that makes sense. If a visitor is searching for one of your
products or services on a search engine or directory where your site is listed, it's important that
your website have a landing page that is directly relevant to what they searched for rather than
forcing them to filter through all of your information. Remember, the shortest distance between
two points is a straight line.

8 Branding
Your website should be a direct reflection of your business and your brand.

Your visitor should immediately make a visual connection between your logo, print material, and
brick-and-mortar location.

A website that does this not only contributes to the memorability of your branding, but adds a
level of credibility and enhanced image of that of your overall business.

9 Turnaround Time
The number one complaint of website design customers is the time it takes to get the site up and
running.

Unfortunately, a firm that takes unusually long to complete your website is par for the course.
The longer it takes to complete the website, the more business - and value - you lose.

A website that isnʼt on the web isnʼt and working properly isn't going to bring you any business!

10 Conversion
Your website can be the most important client generator your business can have, and must place
the primary emphasis on bringing in new clients and making additional services available to
existing clients through increased awareness of all the services you offer.

11
 Providing them with the tools they need to do business with you in an easy and enjoyable way
will increase your website conversion and bring you the kind of success you seek.
Remember, the relationship with your web designer will likely last as long as your business, so
choose wisely! (I hope this helps!)

VARIOUS CATEGORIES OF OPERATORS IN JAVASCRIPT

Types of Operators in Javascript

 Arithmetic Operators.
 Assignment Operators.
 String Operators.
 Comparison Operators.
 Logical Operators.
 Conditional Operators.
 Bitwise Operators.
 Type-of Operator.

NOTE:
UNDERSTANDING OPERATORS IN JAVASCRIPT : TYPES & EXAMPLES

What is Javascript?

An object-oriented computer programming language commonly used to create interactive effects

within web browsers.

12
What is the simple definition of JavaScript?

JavaScript is a scripting or programming language that allows you to implement

complex features on web pages — every time a web page does more than just sit there
and display static information for you to look at — displaying timely content updates,
interactive maps, animated 2D/3D graphics, scrolling video jukeboxes,

What is this JavaScript?

JavaScript “this” keyword. “This” keyword refers to an object that is executing the
current piece of code. It references the object that is executing the current function. If
the function being referenced is a regular function, “this” references the global object.

What is the difference between HTML and JavaScript?

HTML defines the content and structure of a web page, while JavaScript allows for
manipulation of the content and the behavior of the page. HTML (Hypertext Markup
Language) is a markup language used for creating static web pages. JavaScript is a
programming language used for creating interactive and dynamic web pages.

How to define JavaScript?

JavaScript is the Programming Language for the Web. JavaScript can update and
change both HTML and CSS. JavaScript can calculate, manipulate and validate data.

What Is an Operator?

Types of Operators in Javascript

The concept of Operators is present in almost all programming languages present in today's
world.

13
Operators are used to perform certain operations. You often probably use (+) in your daily life to
perform addition, but, did you ever notice that this (+) sign is a character with a predefined work,
i.e., to add two numbers? In this tutorial, you will explore the different types of Operators
in JavaScript.

What Is an Operator?

In simple terms, an operator refers to the one that operates on something, like a person operating
a machine to perform some dedicated task. So, the person will be an operator.

Similarly, in computer programming, an operator refers to a character that tells the machine to
perform a particular operation. For example, the (+) sign is used to add two numerical values. In
any programming language, this (+) sign is an operator that performs the task of adding two
values.

 Operand refers to the values on which you operate, In the above example, the two numeric
values are the operands on which it performs the operation.

Consider the following code:

var x = 10;

var y = 5;

document.write("The sum is "+(x+y));

The two variables x & y are defined with values 10 & 5. The (+) operator is used to add the two
values and it will return the output on the browser.

The output of the above code will be:

14
So, this was a brief introduction to Operators. In the next section, you will go through the types
of Operators.

Types of Operators in Javascript

In JavaScript, there are eight different types of Operators present. They are:

 Arithmetic Operators
 Assignment Operators
 String Operators
 Comparison Operators
 Logical Operators
 Conditional Operators
 Bitwise Operators
 Type-of Operator

You'll go through each of these in this tutorial on Operators in JavaScript.

What Are Arithmetic Operators in Javascript?

As the name suggests, you use arithmetic operators to perform mathematical operations like
addition, subtraction, multiplication, division, and many other operations.

 For example, if you want to perform addition between two numeric values. In this case, you'll
use the (+) operator in JavaScript.

**Note: The (+) operator in JavaScript is also used to concatenate two Strings. You'll get to
know more about it in upcoming sections.

15
There are several different types of arithmetic operators present in JavaScript. Below is the list of
all the arithmetic operators present in JavaScript.

Implementation of arithmetic operators in a program:

var x = 10;

var y = 5;

document.write("Addition = "+(x+y)+"<br>");

document.write("Subtraction = "+(x-y)+"<br>");

document.write("Multiplication = "+(x*y)+"<br>");

document.write("Division = "+(x/y)+"<br>");

document.write("Modulus = "+(x%y)+"<br>");

document.write("Increment = "+(x++)+"<br>");

16
document.write("Decrement = "+(x--)+"<br>");

Arithmetic Operators

The two variables x & y are defined with values 10 & 5. The different types of arithmetic
operators are used in the above code to perform certain mathematical operations like addition,
subtraction, multiplication, division, and so on.

The output for the above code will be:

Operator Precedence in JavaScript

Operator Precedence in JavaScript refers to the order of operations. It evaluates different

operators falling under a single expression according to the precedence of operators.

 Parentheses have the highest precedence. In any expression, it evaluates the operations
present inside the parentheses first.

var x = 10;

var y = 5;

console.log(x+y*(3*2));
17
/*

(10+5*(3*2))

(10+5*(6))

(10+30)

40 (Expected output)

*/

The output for the above code will be:

 Division(/) and multiplication(*) holds higher precedence than addition(+) and subtraction(-).
 If any of the operations have the same precedence (like division and multiplication), it
evaluates them from left to right.

var x = 10;

var y = 5;

document.write("The output will be "+(x/y*2));

/*

18
(x+/y*2)

(10/5*2)

(2*2)

4 (expected output)

*/

It evaluates division first in the above example, followed by multiplication because both the
operators have the same precedence. Hence the expression is evaluated from left to right.

The output for the above example will be:

What Are Assignment Operators in Javascript?

You use assignment operators to assign values to different JavaScript variables. If you want to
assign a value 15 to a variable X, you can do it with the help of the assignment operator.

Consider the following example:

var x = 10;

document.write(x);

19
In the above example, the value assigned to variable x is 10. If you try to print the value variable
x is holding on to the browser, then, the output will be 10.

 Any value present to the right of (=) will be assigned to the variable present to the left of (=)

The different types of assignment operators present in JavaScript are:

Implementation of assignment operators:

var x = 10;

var y = 5;

console.log(x); // Returns the value of x.

console.log(x+=y); // Returns x = x+y

console.log(x-=y); // Returns x = x-y

console.log(x*=y); // Returns x = x*y

console.log(x/=y); // Returns x = x/y

20
console.log(x%=y); // Returns x = x%y

console.log(x^=y); // Returns x = x^y

console.log(x|=y); // Returns x = x|y

console.log(x**=y); // Returns x = x**y

The output for the above code will be:

What Are String Operators in Javascript?

String operators are used for performing operations on strings in JavaScript. You can use the (+)
operator to concatenate two different strings, or the (+=) can also be used to add something to an
existing string.

21
Implementation of string operators.

var x = "Hello"; // Variable x with string value

var y = "World"; // Variable y with string value

document.write(x+y+"<br>") // (+) operator will concatenate both the strings

document.write(x += "Everyone"); // (+=) operator will add "Everyone" to the existing String

 The (+) operator in the above code will concatenate both the values present inside the
variables x & y.
 The (+=) operator will add the word “Everyone” to the value present inside the variable y.

The output of the above code will be:

22
What Are Comparison Operators in Javascript?

Comparison operators are also used to check for true and false. As the name suggests, you use a
comparison operator to compare two values or variables using different operators.

Several comparison operators are present in JavaScript. Below is the list of comparison
operators:

23
 (=) operator in JavaScript is an assignment operator. It is used to assign a value to a variable.
To compare two variables in JavaScript, you have the double equals-to (==) operator.

Implementation of comparison operators:

var x = 5; // Declaring variable x

//comparing c with different values

console.log(x==8); // Return False (x<8)

console.log(x===5); // Return True

console.log(x!=8); // Return True (x!=8)

24
console.log(x!==5); // Returns False

console.log(x>8); // Returns false (x<8)

console.log(x<8); // Returns true because x = 5

console.log(x>=5); // Returns True (x = 5)

console.log(x<=8); // Returns True (x < 8)

 The (x===5) and (x!==5) operators will check for both: value and the data type. If both data
type and the value are equal, then, it will return true.

The output for the above code will be:

What Are Logical Operators in Javascript?

You use logical operators to determine the logic between two variables or values. Logical
operators return boolean values and check whether multiple conditions are true or false.

 In JavaScript, Logical Operators are of three different types:

 Logical And
 Logical Or
 Logical Not

25
 The and-operator will return true only if both conditions are true. If one of these two
conditions is false, it will return false.

var x = 5; // Declaring variable x

var y = 8;

document.write(x > 4 && y > 7) // Return True Because both the conditions are True

document.write("<br>");// Using <BR> for space.

document.write(x < 7 && y > 8); // Return False because y is not greater than 8

The output for the above code will be:

26
 The or operator will return true if any one of the conditions is true.

var x = 5; // Declaring variable x

var y = 8;

document.write(x > 6 || y > 9); // Return False because both the conditions are False

document.write("<br>");//Using<BR>for space.

document.write(x < 7 || y > 8); // Return true because one condition holds true

The output for the above code will be:

27
 The not operator checks if the value variable x is holding equals that of variable y. It will
return true if the values are not equal.

var x = 5; // Declaring variable x

var y = 8;

document.write(!(x==y)); // Return True because x is not equal to y.

The output for the above code will be:

28
 Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackEXPLORE PROGRAM

What Are Conditional Operators in Javascript?

The conditional operator in JavaScript is used to assign a value to the variable based on a
condition. It contains a condition, and for every condition, there are only two possibilities, either
true or false.

 The syntax for the conditional operator is straightforward. You have a variable name and a
condition. Depending upon the condition, you have two values, value 1 and value 2.

29
 For example, suppose you have a variable voter, next up, you have a condition. If age (of
voter) < 18 value 1, i.e., too young will be printed on the screen; otherwise if age > 18 value
2, i.e., old enough will be published on the console.

Refer to the following code for the above example:

var age = 20; //Age of person is 20

var x = (age >=18) ? "Old enough" : "Too Young"; // variable x will hold the value

document.write(x); // Return "Old enough"

The output will be:

30
What Are Bitwise Operators in Javascript?

This operator doesn't have much practical usage in the real world, although they are not useless.
But, this is something you are not going to use daily. In computers, the numbers are stored in
binary format. Bitwise operators work on 32-bit numbers.

 Any operand present in operation is first changed to a binary number and converted back to a
JavaScript number.
 The four most critical bitwise operators present in JavaScript are:

 Bitwise And
 Bitwise Or
 Bitwise Not
 Bitwise XOR

31
Implementation of bitwise operators:

var x = 5;

var y = 1;

document.write((x & y)+"<br>"); // works the same as logic gates

document.write((x | y)+"<br>"); // works the same as logic gates

document.write((~x)+"<br>"); // Returns (-6) and works the same as (-x-1)

document.write((x ^ y)+"<br>"); // Returns 4 and works the same as XOR gate.

For the XOR gate, the value will be true only when 1 of the two values is true. If both values are
true, then the final value will be false.

The output will be:

32
Type-of Operator in JavaScript

The type of() operator in JavaScript will tell you the kind of value a variable holds, whether it is
a number, string, or boolean value. It can also differentiate between null and undefined. These 5
are the primitive data types present in JavaScript, and the type of() operator can tell you about
which data type a variable is holding.

33
Consider the following code:

var x = 5; // Numeric value

var y = "hello"; // String value

var flag = false; // Boolean Value

var p; // No value

document.write(typeof(x)+"<br>"); // Return number

document.write(typeof(y)+"<br>"); // Return String

document.write(typeof(flag)+"<br>"); // Return Boolean

document.write(typeof(p)+"<br>"); // Return undefined

The output of the above code will be:

34
 Suppose you are using NULL as the value for any variable. The type of() operator will return
this variable as an object, but if you don’t give any value to the variable, you will leave it after
declaration. The type of() operator will return undefined.

var x = null; // variable with value as NULL

document.write(typeof(x)); // Returns Object

var y; // Variable with no value

document.write(typeof(y)); // Returns undefined

The output of the above code will be:

35
With this, you have reached the end of this "Operators in JavaScript" tutorial.

Master the complete JavaScript fundamentals, jQuery, Ajax, and more with
the Javascript Certification Training Course. Check out the course preview!

Conclusion

In this tutorial, you explored the concept of Operators. There are 8 different types of Operators
present, with each one consisting of a few more within.

You also went through the precedence of Arithmetic Operators. Following this, you understood
how to use different types of Operators while programming. You also encountered the coding
implementation of Type-of Operator.
36
Are you interested in expanding your knowledge of JavaScript or looking for online JavaScript
programming training?

If the answer is yes to either or both the above questions, the JavaScript certification course
offered by Simplilearn is something you should explore. This applied training program is
designed to help you grasp the concepts of JavaScript from basics to advance.

On that note, if you have any doubts about this tutorial on Operators in JavaScript, don't hesitate
to place them as comments at the end of this page; we will respond to them soon!

FUNCTIONS OF WEBSITES TO AN ORGANIZATION

A website helps your business build brand awareness and reach new customers. It showcases
your products or services and generates awareness about them. You can do SEO to increase
your online visibility, reach the right audience and further expand your business.

What are the uses of website in Organizations?

Easy Access To Business Information

With a website, customers can easily access information about your business. They can
see what products or services you sell, your prices, your location and much more.
Whatever you decide to tell them, they can find it with a few clicks of a mouse.

What are the main functions of a website?

Besides providing information, websites feature functionality that enables users to

complete tasks, such as searching the site, submitting an online form, or using
interactive design features.

NOTE:

37
Functionality

Besides providing information, websites feature functionality that enables users to complete
tasks, such as searching the site, submitting an online form, or using interactive design features.
The Web team in Marketing & Communications helps with designing, evaluating, selecting, and
integrating functional components of the University websites. Site functionality involves a
combination of code developed by the MarCom Web staff, third-party components, and external
services.

Successful website functionality involves considerations beyond a webpage. For a desired

function, consider:

 what’s the best method for the user to do what’s wanted?

 how will users find the function?
 who (or what system) will receive the results of the function?
 how will they receive it?
 what will they do with it?
 what follow up will be needed?
If you have a need for website functionality, feel free to contact MarCom to discuss goals and
possibilities. While we have a limited development resources for custom functionality, we are
happy to help you evaluate and implement options.

Usability

Usability is a critical facet of website quality that unfortunately often gets overlooked. Usability
is concerned with the question, “How easy is it for site visitors to use the site?” More
specifically:

 How quickly can visitors find the information they’re looking for?
 How easily can they accomplish tasks on a site?
Nothing is more important for a website than usability. A visually amazing website with bad
usability is a bad website. The best content in the world is rendered obscure away by poor site
usability. A complicating factor is that usability can seem quite abstract. You may have heard
about it in terms of user experience, user interface, or whether a site is “user-friendly.” Some
general aspects of usability are:

 accessibility
 consistency
 learnability
 memorability
 efficiency
38
 overall user feelings / satisfaction

NOTE:

IMPORTANT REASONS WHY AN ORGANIZATION NEEDS A WEBSITE

Despite just having a nice selling brand, the easiest way to increase your brand value is having an
organization website, where your company’s brand gets to be viewed across the internet, by a
wider target audience.

A website will carry key organizational information in different web pages ranging from About
the company, Services, Clients you have worked with, to the Contact information on how to
reach your company.

According to Internet users in the world 2021 | Statista, mobile internet users account for over
90% on a daily basis. Interestingly enough, mobile internet users averagely spend 2 hours and 25
minutes surfing over different internet sites.

Don’t you want a slice of the cake! Take your company online since the cake is actually big of
which we can all eat from. Head over to our website, Brainverse Technologies to inquire about
website design services.

We move with you all way through the web development process to its end with much more
services aiming to heighten your organization’s goals.

Importance of website

1. Far Cheaper and Much More Flexible Than Print Advertising

The above statistics have proven the internet to be the best profitable advertising platform
extremely different from print advertising.

On a website, advertising is cheap, your advert is able to last longer as you want, and also you
are able to customize the content yourself without anyone doing it for you.

Am actually not telling you that you should not use other advertising forms, they are essential in
enticing people to visit your website to find out about your organization as the connection is
evolving from 2D and beyond so should you.

2. Market Expansion

39
The World Wide Web has enabled fast seamless communication globally. Once you get a
website your organization will most definitely break through the geographical barriers making it
visible all over the world, accessible virtually by a potential client who has internet.

3. Diversify Revenue Streams

In this context, your organizational website not only displays your company’s portfolio and the
services that you offer. But fortunately enough it will increase your organization’s revenue.
Below are listed circumstances you will earn revenue from your website.

4. In advertising for other agencies at a cost

Where an online user wants to get a piece of information regarding a business using your
services i.e., catering for a company dealing with events management, electrical appliances to
feature in your directory

5. Through incorporating Google Ads

With increased online traffic in your website will definitely grant you a price

6. 24/7 Services
Normally, some organizations working hours end at 17:00 hrs. but with a website, you are able
to reach out to your client who is online past the closing time.

Web experts also have a way of inserting Chat features on the website well automated to interact
with potential customers on the internet, the website will as well convert the online user to a
legitimate lead.

7. Offer Convenience
A website automates your consultation services to be aired virtually depending on your
organization’s objectives. The internet has made it convenient for potential consumers to place
their orders via the website and get their products delivered to them. Consumers are as well in a
position to give their positive testimonials online concerning the services offered, thus increasing
more leads who are pleased with such testimonials.

8. Add Value and Satisfaction

A client is always right, he/she is subject to quality customer services as per your agreement.
Websites have a way to interact with the users creating incredible user experiences. Such
interactions ie blog posts, Social Media Feeds, etc. give your visitors the craving to always visit
your site.

9. Standardize Sales Performance

In this context, your organization is able to track their performances for a certain period of time.
Experts developing the websites have a way they add Google analytics to your website making it
track records of performance. Your organization will definitely make decisions depending on the
sales performance whether high or low.
40
10. Improve credibility
Whenever your organization has a website you will have the opportunity to tell potential clients
what you are about and why you really deserve their trust and money. In fact, some potential
Clients do window

shopping before the actual purchase to determine for themselves If your organization is worth
their Patronage, and won’t take them for a ride.

Conclusion
Be sure your organization will stand out once you take it online. Take into consideration the
above benefits of running your brand under a website.

With more benefits which are also key including displaying your actual geographical location,
growth opportunity as you can always update your site as you grow, and finally being cheap
market research. Visit our website home page and head over website design department and
place your order.

NOTE:

https://www.linkedin.com/pulse/role-website-modern-business-abdul-rafay/

THE ROLE OF A WEBSITE IN MODERN BUSINESS

Web Developer | HTML | CSS | JavaScript | Web Designer

August 5, 2023

In today’s digital age, the role of a website in modern business has become indispensable. A
well-designed and optimized website can significantly impact a company’s success, driving
growth, and establishing a strong online presence.

41
This article explores the importance of websites in modern business and the various aspects that
contribute to their effectiveness.

1. Introduction

In the past, businesses primarily relied on brick-and-mortar establishments to engage with

customers. However, with the advent of the internet and technology, the business landscape has
undergone a profound transformation. Websites have become virtual storefronts for businesses,
offering a platform to showcase products and services to a global audience.

2. The Importance of Websites in Modern Business

- Online Presence and Visibility

Having a website enables businesses to be accessible 24/7, breaking the barriers of time and
geography. Customers can visit the website at their convenience, learn about the company, and
explore its offerings. This continuous online presence enhances brand visibility and attracts
potential customers.

- Customer Engagement and Interaction

A website allows businesses to engage with customers on a deeper level. Interactive features
such as live chat, contact forms, and comment sections provide channels for direct
communication. This fosters a sense of trust and reliability, leading to increased customer
satisfaction and loyalty.

- Building Credibility and Trust

A professionally designed website creates a positive first impression on visitors. It serves as a

digital business card, showcasing the company’s achievements, testimonials, and certifications.
This instills confidence in potential customers and establishes credibility.

42
- Marketing and Branding

Websites offer a powerful platform for marketing and branding efforts. Companies can utilize
content marketing, blog posts, and social media integration to reach a broader audience. A
consistent brand message across the website helps reinforce the company’s identity in the minds
of customers.

3. Elements of an Effective Business Website

To ensure a website’s success, several essential elements must be considered:

- User-Friendly Navigation

An intuitive navigation structure helps visitors find the information they seek quickly. A well-
organized menu and clear categories improve the overall user experience.

- Mobile Responsiveness

With the rise of mobile device usage, a mobile-responsive website is crucial for reaching a vast
audience. Mobile optimization ensures that the website displays correctly on various devices.

43
- High-Quality Content

Compelling and informative content engages visitors and keeps them on the website longer.
Valuable content establishes the company as an industry expert and encourages repeat visits.

- Call-to-Action (CTA) Buttons

Strategically placed CTAs prompt visitors to take desired actions, such as making a purchase,
signing up for newsletters, or contacting the company.

4. Optimizing Websites for Search Engines

A website’s visibility in search engine results is critical for attracting organic traffic. SEO
optimization involves several strategies:

- Keyword Research and Implementation

Thorough keyword research helps identify relevant search terms that potential customers use.
Integrating these keywords into website content improves search engine rankings.

- Meta Tags and Descriptions

Well-crafted meta tags and descriptions provide concise summaries of webpage content.
Optimized meta tags enhance click-through rates in search results.

- Site Speed and Performance

A fast-loading website improves user experience and reduces bounce rates. Optimizing images,
using caching, and choosing reliable hosting contribute to site speed.

- Mobile-Friendly Design

Google prioritizes mobile-friendly websites in mobile search results. A mobile-responsive design

ensures a seamless experience for users on smartphones and tablets.

5. Website Analytics and Data Tracking

Analyzing website data helps businesses understand user behavior and make informed decisions:

- Understanding User Behavior

Web analytics tools track user interactions, such as page views, time on site, and conversion
paths. This data provides insights into user preferences and pain points.

- Measuring Website Performance

44
Monitoring key metrics, like bounce rates, conversion rates, and traffic sources, allows
businesses to gauge website performance.

- Conversion Tracking

Setting up conversion tracking helps identify the sources that drive the most valuable actions,
such as purchases or sign-ups.

6. The Role of E-Commerce Websites

E-commerce websites play a vital role in the modern business landscape:

- Online Shopping Trends

The convenience of online shopping has led to a significant shift in consumer behavior. E-
commerce websites cater to this trend by offering a seamless shopping experience.

- Secured Payment Gateways

Ensuring the security of online transactions is crucial to gain customer trust. Implementing
secure payment gateways safeguards sensitive customer information.

- Customer Reviews and Testimonials

E-commerce websites often feature customer reviews and testimonials, influencing purchase
decisions and building social proof.

7. Integrating Social Media with Websites

Social media integration provides several advantages for businesses:

- Social Media Marketing

Linking social media accounts to the website expands the reach of marketing efforts.

- Social Sharing and Viral Content

Social sharing buttons encourage visitors to share content with their networks, potentially
leading to viral exposure.

- Social Proof and User-generated Content

Displaying social media feeds or user-generated content reinforces brand credibility and
authenticity.

8. The Impact of Website Design on Business Success

45
A website’s design significantly affects how the company is perceived:

- Visual Appeal and Branding

A visually appealing website with consistent branding elements leaves a lasting impression on
visitors.

- User Experience (UX) Design

Optimizing the user journey and ensuring ease of use improves user satisfaction.

- Trustworthiness and Professionalism

A professional design instills confidence in customers, assuring them of the company’s

credibility.

9. Ensuring Website Security and Privacy

Website security is crucial to protect both the business and its customers:

- SSL Certificates

SSL certificates encrypt data transmitted between the website and visitors, enhancing security.

- Regular Backups and Updates

Regular backups and software updates protect the website from potential vulnerabilities.

- Protection Against Cyber Threats

Implementing security measures safeguards against hacking attempts and data breaches.

10. Responsive Customer Support through Websites

Customer support features on websites facilitate prompt assistance:

- Live Chat and Chatbots

Live chat support offers real-time assistance, enhancing customer satisfaction.

- FAQs and Knowledge Base

A comprehensive FAQ section provides instant solutions to common queries.

- Contact Forms and Email Support

46
Contact forms and email support enable customers to reach out easily.

11. Measuring Website ROI (Return on Investment)

Analyzing website performance in terms of ROI is essential for business success:

- Identifying Key Performance Indicators (KPIs)

Setting clear KPIs helps measure the effectiveness of the website’s impact on business goals.

- Tracking Conversions and Sales

Monitoring conversions and sales helps evaluate the website’s contribution to revenue
generation.

- Analyzing Traffic Sources

Understanding the sources of website traffic assists in refining marketing strategies.

12. Future Trends in Web Development and Business

Advancements in technology will shape the future of websites and business strategies:

- Voice Search and AI Integration

Voice-activated search and AI integration will revolutionize the way users interact with websites.

- Personalization and Customization

Websites will tailor content and user experiences based on individual preferences.

- Augmented Reality (AR) and Virtual Reality (VR)

AR and VR technologies will offer immersive and interactive website experiences.

13. Conclusion

In conclusion, websites play an indispensable role in modern business. They serve as powerful
tools for marketing, branding, customer engagement, and data tracking.

With the increasing reliance on online platforms, businesses must invest in well-designed and
optimized websites to stay competitive in the digital landscape.

47
 If you need a website developer or have any website-related work, I am available to assist
you. I have experience in web development and can help you create a professional and functional
website tailored to your specific needs.

Whether it’s building a new website from scratch, adding features and functionalities to an
existing one, or optimizing your site for better performance and SEO, I’ve got you covered.

Feel free to reach out to me

I look forward to working with you and creating a successful online presence for your business!

PREPARING HTML CODES TO FOR TABLE

Fundamentals of HTML tablesAn HTML table is created with an opening <table> tag and a closing
</table> tag. Inside these tags, data is organized into rows and columns by using opening and closing
table row <tr> tags and opening and closing table data <td> tags. Table row <tr> tags are used to create a
row of data.

Writing HTML code for a table:

Definition and Usage. The <table> tag defines an HTML table. An HTML table consists
of one <table> element and one or more <tr>, <th>, and <td> elements. The <tr>
element defines a table row, the <th> element defines a table header, and the <td>
element defines a table cell.

How do you make a table layout in HTML?

How to Make a Table in HTML

1. The <tr> tag defines a table row.
2. The <th> tag defines the table header. By default, any text in the <th> tag is
bold and centered.
3. The <td> tag defines the table data (ie. table cells). By default, any text in the
<td> tag is unbolded and left-aligned.

NOTE:

HTML TABLES: WHEN TO USE THEM AND HOW TO MAKE & EDIT THEM

https://blog.hubspot.com/website/make-a-table-in-html
48
 HTML tables can help you display large amounts of data in a way that's easy to scan, compare,
and analyze. For example, you may use a table on your pricing page to allow prospects to
compare the key features of your pricing plans.

Download Now: How to Land a Developer Role in

the World of AI [Free Checklist]

In this post, we'll go over everything you need to know about the HTML table element,
including:

 why make a table in HTML

 when to use (and not use) HTML tables
 how to make a basic table in HTML
 how to edit
 the table border
 the table padding
 the table header
 the table column width
 the table column span
 the table background color

 how to change the font size of a table cell

 how to center a table
 how to create a table within a table

Why Make a Table in HTML

Tables allow the reader to see results or conclusions at a glance, rather than poring over text to
find the numeric data or key points. Making a post or page more readable in this way can help
attract and keep visitors on your site and ultimately improve their user experience.

That’s why we use tables across the HubSpot blogs. Below is a table at the end of SiteGround vs.
HostGator Review, which summarizes the 2,000-word article in less than 200 words.

While this table was built with a click of a button in Content Hub, you can also use HTML and
CSS to make tables from scratch.

Let's walk through some specific use cases for HTML tables below.

How To Land a Developer Role in the World of AI

49
 A free checklist to you help you stand out from the competition featuring Software Developer
and YouTube Creator Tech With Tim.
 Expert advice on how to build a portfolio
 Top programming languages to learn
 Resume building and interview tips
 Resources to strengthen communication skills
Download for FreeLearn more

When to Use HTML Tables

When creating a blog post or web page, you might want to include data that isn’t best
represented by text. Say you want to display a breakdown of the diversity of your workforce.
Since this data would be too complicated or detailed to simply write out, you could use tables to
organize and present it.

Here are some other use cases for HTML tables:

 summarizing a blog post comparing multiple tools

 displaying key features of pricing plans for comparison
 showing the store hours of your retail location on your website
 reporting precise values, like the loading speed of the fastest WordPress themes
 displaying data with different units of measurement, like rank and percentage

While tables can be a great addition to some blog posts, pricing tables, and more, they should not
be used for certain purposes. Let's quickly look at those below.

When Not to Use HTML Tables

HTML tables should be used for displaying and organizing any type of tabular data. They should
not be used for laying out web pages. This was a technique used in the past when CSS was less
advanced and web browsers did not consistently and reliably support CSS positioning. Now,
CSS has multiple layout techniques, including the display property, flexbox, and grid, that are
more powerful than HTML tables and are widely supported by web browsers.

Below are the most common reasons to avoid using HTML tables for layout:

 Complex code: Table layouts generally involve more complex markup structures than proper
layout techniques, in part because they often include multiple layers of nested tables. That means
it is harder to write, maintain, and debug code for table layouts.
 Accessibility issue: Because of their complex markup structures, layouts built with tables pose
accessibility issues for visually impaired users and other types of users with screen readers. The
main issue is that content in a table layout doesn't always make sense when read left-to-right and
top-to-bottom. Nested tables and various spans and attributes on table cells can also be difficult
for a screen reader to parse.

50
 Lack of responsiveness: By default, tables are sized according to their content. So additional
code is required to optimize table layouts for a variety of devices. Flexbox, CSS Grid,
and Bootstrap, on the other hand, are all responsive layout models.

Now that we have a better understanding of why and when to use (and not use) HTML tables,
let's walk through the process of making one below.

How to Make a Table in HTML

To make a table in HTML, use the <table> tag. Within this table tag, you’ll place the <tr>, <th>,
and <td> tags.

 The <tr> tag defines a table row.

 The <th> tag defines the table header. By default, any text in the <th> tag is bold and centered.
 The <td> tag defines the table data (ie. table cells). By default, any text in the <td> tag is
unbolded and left-aligned.

It’s important to note that the <td> tag can contain a range of HTML elements — not just text.
Possible elements include images, numbered or bulleted lists, and other tables.

For a visual walkthrough of how to create a table using HTML only, take a look at this video.

You can also use the Bootstrap CSS framework to create stylish tables.

Check out A Walkthrough of the Bootstrap CSS Table Element to learn how.

HTML Table Example

Let’s say you’re creating a table for contact information of your staff. You want to list the name,
job title, and email address of each of your three employees. In that case, you’d need three
columns and four rows.

That first row would be the header of your table. Here you’d label each column by wrapping the
following text — Name, Job Title, and Email Address — in <th> tags. Here’s what that code
would look like:

HTML
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
Copy

51
Then you’d create three more rows. Within these <tr> tags, you’d place <td> tags containing the
name, job title, and email address of each employee. Here’s what the code would look like for
the second row:

HTML
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
Copy

You’d then wrap all four rows in the <table> tag. All together, your code would look something
like this:

HTML
<table>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
52
 </tr></table>
Copy

Here’s how the table would look on the front end of your website:

Notice that each column is just wide enough to fit the text, and that there are no borders
separating one column or row from the next. The result is cluttered-looking and difficult to read.

Below we’ll look at some ways you can make this table easier to read.

For a visual walkthrough of how to create a more complex HTML table example with HTML
and CSS, check out this video by FollowAndrew:

Editing the Table Border

Pro tip: Edit the table border to help the reader understand the relationship among the values,
and read the data from left to right and top to bottom.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer
and YouTube Creator Tech With Tim.
 Expert advice on how to build a portfolio
 Top programming languages to learn
 Resume building and interview tips
 Resources to strengthen communication skills

Tables do not have any borders by default. To add borders, use the CSS border property.

Let’s say I want to add a simple black border around my table above. Then I’d just need to add
the following CSS in the head section of my HTML file or in my external stylesheet.

CSS
table, th, td {
53
 border: 1px solid black;}
Copy

The HTML in the body section of the HTML file would stay the same.

Here’s how that would look on the front end:

Notice that the borders around the table, table header, and tables cells are separated from each
other. To collapse them, use the CSS border-collapse property. You’d simply add this property to
your CSS rule set, and set the value to “collapse.” Here’s how your CSS would look now:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
Copy

Again, the HTML stays the same.

Here’s how that would look on the front end:

Adding borders has already helped make this table easier to read by clearly delineating which
values are names, which are job titles, and which are email addresses — but it still looks
congested. Let’s look at how we can add more white space to this table.

54
Editing the Table Padding

Pro tip: Add padding to a table to make it appear less congested and easier to read.

As mentioned above, tables are only as large as their content requires by default. So your second
step is to add more space around the content within the table cells. To do so, use the CSS
padding property.

Since padding specifies the space between a cell’s content and its border, you only need to add
padding to the table header and table data elements, not the table element itself. That means
you’ll create a new CSS rule set that only uses two CSS selectors: th and td. You’d then set the
CSS padding property to whatever value you want. Below I’ll set it to 10px.

Here’s what the CSS would look like:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}
Copy

The HTML stays the same.

Here’s how that would look on the front end:

The table is looking much clearer now, but it's still difficult to cross reference the data. We can
make that easier by differentiating the header from the other cells. Let’s look at how below.

Editing the Table Header

55
Pro tip: Edit the table header to distinguish the categories of data from the data points.

To make the table header stand out, you can do something as simple as add a background color
to those cells. You’d just need to use the element selector “th” to apply unique style properties to
the header only.

Below, you’ll use the same CSS as above but add a third rule set that contains the CSS
background-color property. You can then set the property to a specific color value using a hex
color code. For this example, I’ll use a hex color code for a soft shade of yellow.

Here’s the CSS:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FDDF95;}
Copy

Here’s how that would look on the front end:

With the header styled, it's easier to scan the table for names, job titles, and email addresses.
Some more negative space might make it even easier to scan. Let's look at how to add some by
styling a column below.

Editing the Table Column Width

Pro tip: Edit the table column width to add more whitespace in a table.

If you had to guess how to style a column, you might think you’d have to add a style attribute to
the cell of each row. That’d be frustrating, right? The good news is you don’t have to.
56
You can use the <colgroup> tag instead. This tag specifies a group of one or more columns in a
table so you can apply CSS to columns rather than cell by cell.

To create this group, you’d add the <colgroup> tag to the body section of your HTML file.
Within this tag, you’d then add a <col> tag for every column in your table or every column you
want to style. Here’s what the HTML code looks like:

HTML
<colgroup>
<col>
<col>
<col></colgroup>
Copy

You can then target this group of columns with CSS. Let’s say you don’t want to just specify the
padding — or space between a cell’s content and its border — you also want to specify the width
of each column. Then you could add another rule set to your CSS and define the width property.

Here’s how the CSS would look:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FDDF95;}colgroup {
width: 250px;}
Copy

Here’s how the HTML would look:

HTML
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>

57
 <tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
</tr></table>
Copy

Here’s how that would look on the front end:

Let’s say you’d like to change the width of only one column, like the column containing email
addresses. Instead of adding internal CSS to the head section of your HTML file, you could

58
simply add a style attribute to the third <col> tag in the body section. Within that attribute, you’d
add and specify the width property. Here’s how the <colgroup> tag would look:

HTML
<colgroup>
<col>
<col>
<col style="width:300px"></colgroup>
Copy

Here’s how that would look on the front end:

Specifying the column width of your table in this way can provide more space for longer inputs,
like email addresses.

In addition to changing the column width of an HTML table, you can make a cell span multiple
columns. Let's look at how.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer
and YouTube Creator Tech With Tim.
 Expert advice on how to build a portfolio
 Top programming languages to learn
 Resume building and interview tips
 Resources to strengthen communication skills
Download for FreeLearn more

HTML Table Column Span

Pro tip: Use a column span if presenting two columns of data that are related, like cell phone
and home phone numbers.

59
In some instances, it makes sense for a cell to span multiple columns. For example, a header cell
that titles a group of columns should span more than one column.

To make a cell span more than one column, you can use the colspan attribute. Simply add it to
the opening tag of the table header (or a table cell) and set it to the number of columns you want
it to span.

For the example below, let’s say you’d like to add both the cell and home phone number of your
staff members to the table. In that case you'd add new <th> tag with a colspan attribute set to "2."
Then, you'd add two more <td> tags containing the employees' phone numbers to each row.

Note: we'll use the same CSS from the example above.

Here's how the HTML would look:

HTML
<table>
<colgroup>
<col>
<col>
<col>
<col>
<col></colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
<td>888-888-880</td>
<td>888-888-881</td>
</tr>
<tr>
<td>John Smith</td>
60
 <td>Marketing Manager</td>
<td>[email protected]</td>
<td>888-888-882</td>
<td>888-888-883</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
<td>888-888-884</td>
<td>888-888-885</td>
</tr></table>
Copy

Here’s how that would look on the front end:

Now that you’ve changed the padding, column width, alignment, and more of your table, you
might be looking for a few more ways to make your table stand out on the page. One way is to
change the background color of not just the header but the whole table. Let’s go over how.

Editing the Table Background Color

Pro tip: Edit the table background color to differentiate a table from other elements on a web
page and draw the reader's eye.

61
To change the background color of the whole table, not just the table header, then you simply
define the CSS background color property for both the table header and table data elements.
Here’s how your CSS would look:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;
background-color: #FDDF95;}
Copy

Here's how the HTML would look:

HTML
<table>
<colgroup>
<col>
<col>
<col style="width:300px">
</colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>[email protected]</td>
</tr>
62
 <tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
</tr></table>
Copy

Here’s how that would look on the front end:

Changing the background color of your table can help it stand out on a web page and draw the
visitor's eye to important information it contains.

If you’d like the table header and table data elements to have different background colors, then
simply use the two element selectors, “th” and “td,” and set the background color property to
different hex color codes or color names.

Here’s what the CSS might look like:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FFB500;}td {background-color: #FDDF95;}
Copy

The HTML stays the same.

Here’s how that would look on the front end:

63
Changing both the header and background color of a table can ensure it stands out on the page
and allows readers to easily cross reference the data.

Another way you can make sure your table is not getting lost among other content on the page is
to increase its font size. Below we’ll look at how.

HTML Table Font Size

Pro tip: Increase the font size of the table header to grab the reader's attention and help them
slow down when reading through the table data elements.

To change the size of the font in an HTML table, use the CSS font-size property. You can use
this property for the table header and table data elements. But let’s say you want to increase the
font size of the table header only.

Then your CSS would look like this:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FFB500;
font-size: 20px;}td {background-color: #FDDF95;}
Copy

Your HTML would stay the same.

Here’s how that would look on the front end:

64
Changing the font size is another way to differentiate the header from the rest of the data in a
table, which can make it easier to scan.

Once you’re mostly happy with the appearance of your table, you might be interested in
changing its position on the page. One way you can do that is by changing its default alignment.
Let’s look at how below.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer
and YouTube Creator Tech With Tim.
 Expert advice on how to build a portfolio
 Top programming languages to learn
 Resume building and interview tips
 Resources to strengthen communication skills

Centering a Table In HTML

Pro tip: Center a table to set it apart from the rest of the left-aligned content on a web page.

By default, elements, including the table element, will be left-aligned on the page. If you’d like
to center it on the page, use the CSS margin property.

First, you’ll add a class name to the table element. In the example below, I’ll use the name
“center.” Then you can use the class selector to center align the table element only. The other
elements on the page will remain left aligned. Here’s how the HTML will look:

HTML
<table class="center">
<colgroup>
65
 <col>
<col>
<col style="width:300px">
</colgroup>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
</tr></table>
Copy

You’ll then add another rule set to your CSS. Using the class selector “.center”, you’ll set the
margin-left and margin-right properties to “auto.” That way, the table will take up whatever
width is specified by CSS or by the content it contains and the browser will ensure the remaining
space is split equally between the left and right margins.

Here’s how the CSS would look all together:

CSS
table, th, td {
border: 1px solid black;
66
 border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FFB500;
font-size: 20px;}td {
background-color: #FDDF95;}.center {
margin-left: auto;
margin-right: auto;}
Copy

Here’s how that would look on the front end:

Nesting Tables in HTML

Pro tip: Nest a table within a table to create a complex, visually interesting table layout.

You can nest tables — or create tables within tables — in HTML. To make a nested table,
simply create another table element with table header, table row, and table data tags and place it
inside any <td> tag of the existing table.

Let's say I want to list the home and cell phone of a staff member in a nested table.

Here's how the CSS might look:

CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;}th, td {
padding: 10px;}th {
background-color: #FDDF95;}#nested {
67
 background-color: #EEEEEE;}
Copy

Here's how the HTML might look:

HTML
<table>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
<th>Nested Table</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
<td>
<table>
<tr>
<th id="nested">Home Phone</th>
<th id="nested">Cell Phone</th>
</tr>
<tr>
<td>888-888-880</td>
<td>888-888-881</td>
</tr>
</table>
</td>
</tr></table>
Copy

Here's how that would look on the front end:

68
Making Tables in HTML

If you want to share large amounts of data on your website, then use tables to present this data in
a way that’s easy for visitors to read and understand. Any of the steps described above can help
you add and customize tables to your unique website. You’ll just need to be familiar with some
HTML and CSS.

Editor's note: This post was originally published in September 2020 and has been updated for
comprehensiveness.

PRINCIPLES OF USER INTERFACE DESIGN

Principles of user interface design
From sources across the web

Consistency
Accessibility
Feedback
Clarity
User control
Error prevention
Usability
Visual hierarchy
Flexibility

69
NOTE:

THE BASIC PRINCIPLES OF USER INTERFACE DESIGN

A good user interface is critical to a good user experience. If the interface doesn’t allow people
to easily use the website or app, they won’t use the product or they’ll overwhelm tech support
with costs, ballooning costs.

UI has real, tangible business impacts. Paying attention to it isn’t window dressing, it’s crucial to
a business’s success.

Many of these principles boil down to “make life easy for the user”.

These 14 principles of user interface design will improve your users’ usability, so make them
enjoy your product while using it. Apply this principles in practice. Use UXPin for advanced
prototyping that makes you create beautiful and fully interactive prototypes in minutes. Try
UXPin for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

70
Table of Contents

1. What are UI Design Principles?

1. 1. During Early Planning and Conceptualization
2. 2. Wireframing and Prototyping
3. 3. User Testing and Iteration
4. 4. Final Design and Development Handoff
5. 5. Post-Launch Evaluation and Iteration
2. Why UI Design Principles Matter?
3. Principle #1: Place Users at the Center
4. Principle #2: Strive for Clarity
5. Principle #3: Minimize Actions and Steps Per Screen
6. Principle #4: Aim for Simplicity
7. Principle #5: Be Consistent
8. Principle #6: Make Your User Interface Design Invisible
9. Principle #7: Provide Useful Feedback
10. Principle #8: Reduce Cognitive Load
11. Principle #9: Make It Accessible
12. Principle #10: Include User Feedback in the UI
13. Principle #11: Flexibility
14. Principle #12: Visual Structure
15. Principle #12: Dialogs Should Result in Closure
16. Principle #13: Provide a Clear Next Step
What are UI Design Principles?

71
UI Design Principles are foundational guidelines aimed at creating user interfaces that provide a
positive, intuitive, and effective user experience. These principles guide designers in making
decisions that improve usability, accessibility, and overall satisfaction in digital interfaces.

You should apply UI design principles at every stage of the design process to create intuitive,
user-centered interfaces that meet user needs. Here’s how and when to apply these principles:

1. During Early Planning and Conceptualization

 Clarity and Accessibility: From the beginning, consider the clarity of the information
architecture and how accessible your design will be for all users. This helps establish a
strong foundation for an interface that is easy to navigate and understand.
 Consistency: Establish design guidelines early on (like style guides or design systems) to
maintain consistency across colors, typography, and interactions. This will ensure visual
and functional coherence throughout the design process.
2. Wireframing and Prototyping

 Hierarchy and Feedback: During wireframing, focus on visual hierarchy to make sure
the most important elements are prominent. Include feedback mechanisms, such as
placeholders for error messages or loading indicators, to provide users with a responsive
experience.
 Flexibility and Efficiency: For prototypes, consider ways to streamline interactions. This
could mean including keyboard shortcuts, visible cues, or easy navigation options for
users at different experience levels. Testing different iterations with these principles helps
refine and improve the layout.

3. User Testing and Iteration

72
  Applying Accessibility Principles: Accessibility testing ensures that the UI is usable for
everyone, including those with disabilities. This is crucial for refining areas like color
contrast, navigation paths, and text legibility.
 Feedback: Gather user feedback on the interface’s responsiveness. Users should feel
confident that the system reacts to their inputs in expected ways, reducing confusion and
improving satisfaction.
4. Final Design and Development Handoff

 Consistency and Clarity: Before handing off to development, verify that every element
adheres to design principles. Ensure consistent spacing, typography, color, and
interactions. Clear documentation also helps developers maintain these principles during
coding.
 Usability and Flexibility: Ensure that interactions are user-friendly and adaptable to
various devices, screen sizes, or input methods. This includes providing alternative paths
for novice and experienced users, enhancing overall usability.
5. Post-Launch Evaluation and Iteration

 Even after launch, it’s important to revisit UI design principles. Use data and feedback to
understand how users interact with the interface in real scenarios and make adjustments
to improve clarity, accessibility, and usability over time.
Why UI Design Principles Matter?

UI design principles are essential because they provide a structured approach to creating
interfaces that are usable, accessible, and enjoyable for users. When these principles are applied,
they guide the user seamlessly through a digital experience, helping them achieve their goals
without frustration.

1. Improved Usability: Design principles like clarity, consistency, and feedback help users
understand how to navigate an interface intuitively. When users can recognize icons,
understand labels, and feel confident in their actions, they’re more likely to complete
73
 tasks efficiently. For instance, feedback mechanisms, like button states and error
messages, let users know their actions are being processed, reducing uncertainty and
enhancing satisfaction.
2. Enhanced Accessibility: Accessibility principles ensure that digital products are usable
by people of all abilities, providing features such as text alternatives for images, high-
contrast text, and keyboard navigation. Without these considerations, people with
disabilities may face barriers that prevent them from fully accessing or interacting with
the product.
3. Consistency and Reliability: Consistency in visual style and interactions, such as using
the same color scheme and button behaviors across pages, builds user trust. Users learn
patterns and expectations, making navigation and action-taking more natural. If
consistency is lacking, users may become confused, leading to mistakes and frustration.
4. Supports Faster Learning and Engagement: Good UI design helps users learn an
interface quickly, especially if it incorporates recognizable patterns. For example, using a
clear visual hierarchy and logical groupings of information supports user engagement and
retention. Without these principles, users may experience a steep learning curve and are
likely to disengage if the interface feels confusing or overwhelming.
Principle #1: Place Users at the Center

As always, the first UI design principle is to focus on people (or, the “user” as we all say). A
good user interface is easy and natural to use, avoids confusing the user, and does what the user
needs.

You need to understand who your users are as well as understand what they want to do. Are they
experts? The best way to do this is to talk to them.

74
Creating and structuring interviews is beyond the scope of this post, but interview your audience,
learn who they are, and develop UI designs for them. Learning about human-centered design will
help you achieve the right mindset for best interfaces and focus on people first, design second.

Principle #2: Strive for Clarity

The purpose of the user interface is to allow the user to interact with the website or application
(or, more generally in broader design, any product). Avoid anything that confuses people or
doesn’t help them interact.

Principle #3: Minimize Actions and Steps Per Screen

Streamline tasks and actions so they can be done in as few steps as possible. Each screen should
have one primary focus. For example, the purpose of this blog is for you to read and, hopefully,
enjoy it and learn from it. It’s not to share it on Twitter or email a colleague (though please do if
you find it valuable enough to share).

Keep the primary action front and center and move secondary actions to deeper on a page or give
them lighter visual weight and the right typography.

Principle #4: Aim for Simplicity

Classics exist for a reason; they’re timeless and never go out of style, though they do benefit
from modern touches. Think of the little black cocktail dress or the tuxedo; each are fashion style
staples. They’re simple, elegant, and add a touch of class to the wearer.

A user interface should be simple and elegant. Read more about simplicity here: Design
Simplicity.

75
Principle #5: Be Consistent

Consistency creates familiarity, and familiar interfaces are naturally more usable. How
frustrating would it be to get behind the wheel of a car and the brake is on the right and the
accelerator on the left? Or filling in a Web form with the “Submit” button in red and the “Delete”
button in green.

Consistent design reduces friction for the user. A consistent design is predictable. Predictable
design means it’s easy to understand how to use functions without instruction. Not only should
UI design be consistent internally, but externally as well.

General conventions across websites and apps that work identically or nearly so make your site
easy to navigate and use. Apple’s Human Interface Guidelines provide a fantastic example of
consistency across apps. The guidelines detail how functions should work across apps and on all
Apple devices so that a user of any Apple product can pick up any other and easily use it.

This also means don’t invent or reinvent common patterns. Many patterns already exist for
design problems (patterns also reduce cognitive load, principle 9 below, because users already
know how they work). Putting the search bar at the bottom of the page wouldn’t be revolutionary
to design, it would just be confusing.

A design system is a great way to ensure consistency in UI design.

Principle #6: Make Your User Interface Design Invisible

Don’t draw attention to your user interface. A great UI allows people to use the product
without friction, not spend time figuring out how to interact with the interface.
76
Principle #7: Provide Useful Feedback

Feedback can be visual, audio (the ding of a new message alert), or sense of touch (useful in
gaming or the “buzz” alert for a new email or phone call when your phone is set to “silent”).
Every action should have feedback to indicate that the action was successful or not.

Feedback helps to answer questions in four areas:

1. Location: You are here.

2. Status: What’s going on? Is it still going on?
3. Future status: What’s next?
4. Outcomes & Results: Hey, what happened?

Hovering over a navigation item that then changes color indicates an item is clickable. Buttons
should look like buttons. Feedback lets the user know if they’re doing the right thing (or the
wrong thing).

Principle #8: Reduce Cognitive Load

Many of these UI design principles serve to reduce cognitive load for users. Basically, don’t
make users think (also a useful UX design principle as well). There are a few common ways to
reduce cognitive load and make using your website or app easier:

77
  Chunk actions and information – Most people can handle seven-plus-or-minus two
chunks of information when processing it. For instance, breaking up telephone numbers
in the usual 3-3-4 way rather than a 10 digit sequence results in fewer errors.
 Apply 3-click rule – it shouldn’t take more than three clicks to find any information.
 Minimize recall in favor of recognition – common images and icons in context help
users identify functionality, think of the trash can and the bell icons (commonly used for
notifications) and other commonly used icons that trigger pre-existing memory. This also
means don’t take a commonly used icon that most people understand and then use it to
represent something else, you’ll just confuse people.
Principle #9: Make It Accessible

UI designs need to take into account accessibility issues. Online, this often means ensuring the
visibly impaired can access and use the product. Don’t forget about color blindness as well.

Roughly 1 in 12 males (that’s about 8%) and 1 in 200 females (about .5%) are color blind to
some degree. Use color to accentuate and emphasize, but don’t rely entirely on color to
communicate information.

Principle #10: Include User Feedback in the UI

Don’t design in a vacuum. Test and validate design choices by gathering user feedback. Watch
users attempt to use your design (without coaching them). Are they confused? Can they achieve
the desired outcome easily?

Do this in both the design process and continually evaluate after launch (heat maps are one way
to track how effective a UI is; another one is A/B testing).

Principle #11: Flexibility

78
Create a UI that will work and look great across multiple platforms. Of course, it may have to be
tweaked depending on the form factor of a device and its operating system (Android and iOS, for
example), but it should be flexible enough to work on anything.

Principle #12: Visual Structure

Keep a consistent visual structure to create familiarity and relieve user anxiety by making them
feel at home. A few elements to focus on include a visual hierarchy with the most important
things made obvious, color scheme, consistent navigation, re-use elements, and create a visual
order using grids.

Principle #12: Dialogs Should Result in Closure

Actions should have a beginning, middle, and end (with feedback at each step). For example,
when making an online purchase we move from browsing and product selection to the checkout
and then finally confirmed that the purchase is completed.

Principle #13: Provide a Clear Next Step

Include a clear next step a user can take after an interaction. That could be as simple as a “back
to top” click at the end of a long blog post or a pointer to more information. Help the user
achieve their goals with the next step.

79
 One final thought to remember when designing a user interface, you will never successfully
appeal to everyone. You can do your best to appeal to most. You can also do your best to
personalize based on personas and well-defined users.

Even so, you’ll never appease everyone. However, keeping all fourteen of these UI design
principles in mind as you decide what to include and exclude in your user interface design will
help you keep the user front and center in your decision-making.

Creating a user interface is simple in UXPin. Work inside of a browser, get real-time feedback
and collaborate with your entire team all online. You’ll create, test, and iterate your UI designs
faster than ever with UXPin. Discover the power of UXPin for UI design. Try UXPin for free.

PREVENTING VIRUS ATTACKS ON COMPUTERS

How can computer viruses be prevented?

Keep your device secure

1. Keep up-to-date. Update your system, browser, and important apps
regularly, taking advantage of automatic updating when it's available.
2. Antivirus software.
3. Anti-spyware software.
4. Firewalls.
5. Choose strong passwords.
6. Use stronger authentication.
7. Be careful what you click.
8. Shop safely.

What is a virus and how to prevent it?

It overwrites files when they are opened and can quickly spread across systems and
networks. It largely affects files with .exe or .com extensions. The best way to avoid file
infector viruses is to only download official software and deploy an antivirus solution.

80
Main steps to protect your computer from viruses:

To protect your computer from viruses, you should install antivirus software and keep it
updated regularly. You should also avoid opening suspicious emails or downloading
attachments from unknown sources. Additionally, you can use a firewall to block
unauthorized access to your network.

Solution for computer viruses:

Use anti-virus software or a complete internet security solution, like Kaspersky Total
Security. For your Android mobile, consider Kaspersky Internet Security for Android.
Research apps and software by reading user reviews. Read developer descriptions
before you download apps and software.

NOTE:
PROTECT YOUR COMPUTER FROM VIRUSES, HACKERS, AND SPIES

. Home

. Privacy

. Online

. Protect Your Computer From Viruses, Hackers, and Spies

Protect Yourself and Your Devices

Today we use internet-connected devices in all aspects of our lives.

We go online to search for information, shop, bank, do homework, play games, and stay in touch
with family and friends through social networking.

As a result, our devices contain a wealth of personal information about us.

81
This may include banking and other financial records, and medical information—information
that we want to protect.

If your devices are not protected, identity thieves and other fraudsters may be able to get access
and steal your personal information.

Spammers could use your computer as a "zombie drone" to send spam that looks like it came
from you.

Malicious viruses or spyware could be deposited on your computer, slowing it down or

destroying files.

By using safety measures and good practices to protect your devices, you can protect your
privacy and your family. The following tips are offered to help you lower your risk while you're
online.

Keep your device secure

Make sure to download recommended updates from your device's manufacturer or operating
system provider, especially for important software such as your internet browser.

Antivirus software, antispyware software, and firewalls are also important tools to thwart attacks
on your device.

Keep up-to-date

Update your system, browser, and important apps regularly, taking advantage of automatic
updating when it's available.

These updates can eliminate software flaws that allow hackers to view your activity or steal
information.

Windows Update is a service offered by Microsoft. It will download and install software updates
to the Microsoft Windows Operating System, Internet Explorer, Outlook Express, and will also
deliver security updates to you.

Patching can also be run automatically for other systems, such as Macintosh Operating System.
For mobile devices, be sure to install Android or iPhone updates that are distributed
automatically.

Antivirus software

82
Antivirus software protects your device from viruses that can destroy your data, slow down or
crash your device, or allow spammers to send email through your account.

Antivirus protection scans your files and your incoming email for viruses, and then deletes
anything malicious.

You must keep your antivirus software updated to cope with the latest "bugs" circulating the
internet.

Most antivirus software includes a feature to download updates automatically when you are
online.

In addition, make sure that the software is continually running and checking your system for
viruses, especially if you are downloading files from the web or checking your email.

Set your antivirus software to check for viruses every day. You should also give your system a
thorough scan at least twice a month.

Antispyware software

Spyware is software installed without your knowledge or consent that can monitor your online
activities and collect personal information while you're online.

Some kinds of spyware, called keyloggers, record everything you key in—including your
passwords and financial information. Signs that your device may be infected with spyware
include a sudden flurry of ads, being taken to websites you don't want to go to, and generally
slowed performance.

Spyware protection is included in some antivirus software programs.

Check your antivirus software documentation for instructions on how to activate the spyware
protection features.

You can buy separate antispyware software programs. Keep your antispyware software updated
and run it regularly.

To avoid spyware in the first place, download software only from sites you know and trust. Make
sure apps you install on a mobile device come from the Apple App Store for iPhones or Google
Play for Android devices.

Firewalls

83
A firewall is a software program or piece of hardware that blocks hackers from entering and
using your computer.

Hackers search the internet the way some telemarketers automatically dial random phone
numbers.

They send out pings (calls) to thousands of computers and wait for responses.

Firewalls prevent your computer from responding to these random calls. A firewall blocks
communications to and from sources you don't permit.

This is especially important if you have a high-speed internet connection, like DSL or cable.

Some operating systems have built-in firewalls that may be shipped in the "off" mode. Be sure to
turn your firewall on. To be effective, your firewall must be set up properly and updated
regularly. Check your online "Help" feature for specific instructions.

Use strong protection

Making use of complex passwords and strong methods of authentication can help keep your
personal information secure.

Choose strong passwords

Protect your devices and accounts from intruders by choosing passwords that are hard to guess.
Use strong passwords with at least eight characters, a combination of letters, numbers and special
characters.

Don't use a word that can easily be found in a dictionary or any reference to personal
information, such as a birthday.

Some hackers use programs that can try every word in the dictionary, and can easily find
personal information such as dates of birth.

Try using a phrase to help you remember your password, using the first letter of each word in the
phrase. For example, HmWc@w2—How much wood could a woodchuck chuck.

Choose unique passwords for each online account you use: financial institution, social media, or
email. If you have too many passwords to remember, consider using password manager software,
which can help you create strong individual passwords and keep them secure.

84
Use stronger authentication

Many social media, email, and financial accounts allow the use of stronger authentication
methods. These methods can include using a fingerprint, one-time codes sent to a mobile device,
or other features that ensure a user is supposed to have access to the account. For more
information on strong authentication methods, visit the Lock Down Your Login Campaign.

Protect your private information

While checking email, visiting websites, posting to social media, or shopping, pay attention to
where you click and who you give your information to.

Unscrupulous websites or data thieves can attempt to trick you into giving them your personal
data.

Be careful what you click

Phishing attacks—where hackers send seemingly genuine messages to trick you to hand over
personal information—are becoming more sophisticated.

For instance, you may receive an urgent message stating that your bank account has been locked
and requiring you to enter your password and Social Security number to unlock it.

Think twice before clicking on links in messages such as this.

Most genuine messages from financial institutions will not ask for personal information directly,
but will instead instruct you to call or visit a website directly.

You can also verify the email address that sent the message to ensure it came from the expected
sender.

Shop safely

When shopping online, check out the website before entering your credit card number or other
personal information.

Read the privacy policy and look for opportunities to opt out of information sharing. (If there is
no privacy policy posted, beware! Shop elsewhere.) Learn how to tell when a website is secure.

Look for "https" in the address bar or an unbroken padlock icon at the bottom of the browser
window.
85
These are signs that your information will be encrypted or scrambled, protecting it from hackers
as it moves across the internet.

Be careful what you share

Social media allows sharing of all aspects of life, but it's important to control who has access to
the information you share.

Information thieves can use social media postings to gather information and then use the
information to hack into other accounts or for identity theft.

To protect yourself, make use of privacy settings to limit the visibility of personal posts to your
personal networks, and restrict the amount of information you share with the general public.

Responding to data breaches

Even if you make all the right moves, your data may be stolen from a company you trusted to
keep it safe.

If you find that your personal information has been accessed without your authorization, take
steps to protect yourself.

Place a fraud alert on your credit file. Review your annual credit reports.

And if you suspect your information has been breached, put a freeze on your credit file to
prevent fraudsters from opening new accounts in your name.

For more information, see the Attorney General's information sheets on identity theft.

Parents, take control

Don't let your children risk your family's privacy.

Make sure they know how to use the internet safely.

For younger children, install parental control software on devices that limits the websites kids
can visit.

To protect your children's future credit, consider setting up a credit freeze for your child. But
remember: no software can substitute for parental supervision.

86
 Additional Information

 How to Read a Privacy Policy

 Protecting Your Child's Privacy Online
 How to Request Annual Credit Reports
 How to Freeze your Credit
 How to Freeze your Child's Credit

Consumer information from the California Department of Justice, available

at www.oag.ca.gov/privacy.

OnGuard Online

Practical tips from the federal government and the technology industry to help you be on guard
against internet fraud, secure your computer, and protect your personal information.

Online Guide to Practical Privacy Tools

Computer security resources from the non-profit Electronic Privacy Information Center.

<br

This fact sheet is for informational purposes and should not be construed as legal advice or as
policy of the State of California.

If you want advice on a particular case, you should consult an attorney or other expert.

The fact sheet may be copied, if (1) the meaning of the copied text is not changed or
misrepresented, (2) credit is given to the California Department of Justice, and (3) all copies are
distributed free of charge.

HISTORY OF THE WORLD WIDE WEB

Where the Web was born. Tim Berners-Lee, a British scientist, invented the World Wide Web
(WWW) in 1989, while working at CERN. The Web was originally conceived and developed to
meet the demand for automated information-sharing between scientists in universities and
institutes around the world.

87
Origin of the word World Wide Web:

Etymology. From worldwide + web, coined by English computer scientist Tim Berners-
Lee (born 1955) and Belgian informatics engineer and computer scientist Robert
Cailliau (born 1947) in a paper published on 12 November 1990: see the quotation.

To Note: The European Organization for Nuclear Research, abbreviated as CERN (from the
French 'Conseil européen pour la Recherche Nucléaire' or European Council for Nuclear
Research, as its predecessor was called), is the world's largest particle physics laboratory,
situated in the northwest suburbs of Geneva on the Franco

NOTE:

Where the Web was born

Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while
working at CERN.

The Web was originally conceived and developed to meet the demand for automated
information-sharing between scientists in universities and institutes around the world.

Tim

Bernese-Lee, pictured at CERN (Image: CERN)

88
CERN is not an isolated laboratory, but rather the focal point for an extensive community that
includes more than 17 000 scientists from over 100 countries.

Although they typically spend some time on the CERN site, the scientists usually work at
universities and national laboratories in their home countries. Reliable communication tools are
therefore essential.

The basic idea of the WWW was to merge the evolving technologies of computers, data
networks and hypertext into a powerful and easy to use global information system.

How the Web began

89
90
The first page of Tim Berners-Lee's proposal for the World Wide Web, written in March 1989
(Image: CERN)

Tim Berners-Lee wrote the first proposal for the World Wide Web in March 1989 and his second
proposal in May 1990. Together with Belgian systems engineer Robert Cailliau, this was
formalised as a management proposal in November 1990. This outlined the principal concepts
and it defined important terms behind the Web. The document described a "hypertext project"
called "WorldWideWeb" in which a "web" of "hypertext documents" could be viewed by
“browsers”.

By the end of 1990, Tim Berners-Lee had the first Web server and browser up and running at
CERN, demonstrating his ideas. He developed the code for his Web server on a NeXT computer.
To prevent it being accidentally switched off, the computer had a hand-written label in red ink:
"This machine is a server. DO NOT POWER IT DOWN!!"

A replica of the NeXT machine used by Tim Berners-Lee in 1990 to develop and run the

first WWW server, multimedia browser and web editor (Image: Maximilien Brice/Anna
Pantelia/CERN)

info.cern.ch was the address of the world's first website and Web server, running on a NeXT
computer at CERN. The first Web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html

This page contained links to information about the WWW project itself, including a description
of hypertext, technical details for creating a Web server, and links to other Web servers as they
became available.

91
A screenshot showing the NeXT world wide web browser created by Tim Berners-Lee (Image:
92
CERN)

The WWW design allowed easy access to existing information and an early web page linked to
information useful to CERN scientists (e.g. the CERN phone book and guides for using CERN’s
central computers). A search facility relied on keywords - there were no search engines in the
early years.

Berners-Lee’s original Web browser running on NeXT computers showed his vision and had
many of the features of current Web browsers. In addition, it included the ability to modify pages
from directly inside the browser – the first Web editing capability. This screenshot shows
the browser running on a NeXT computer in 1993.

The Web extends

Only a few users had access to a NeXT computer platform on which the first browser ran, but
development soon started on a simpler, ‘line-mode’ browser, which could run on any system. It
was written by Nicola Pellow during her student work placement at CERN.

In 1991, Berners-Lee released his WWW software. It included the ‘line-mode’ browser, Web
server software and a library for developers. In March 1991, the software became available to
colleagues using CERN computers. A few months later, in August 1991, he announced the
WWW software on Internet newsgroups and interest in the project spread around the world.

Going global

Thanks to the efforts of Paul Kunz and Louise Addis, the first Web server in the US came online
in December 1991, once again in a particle physics laboratory: the Stanford Linear Accelerator
Center (SLAC) in California. At this stage, there were essentially only two kinds of browser.
One was the original development version, which was sophisticated but available only on NeXT
machines. The other was the ‘line-mode’ browser, which was easy to install and run on any
platform but limited in power and user-friendliness. It was clear that the small team at CERN
could not do all the work needed to develop the system further, so Berners-Lee launched a plea
via the internet for other developers to join in. Several individuals wrote browsers, mostly for the
X-Window System. Notable among these were MIDAS by Tony Johnson from SLAC, Viola by
Pei Wei from technical publisher O'Reilly Books, and Erwise by Finnish students from Helsinki
University of Technology.
93
Early in 1993, the National Center for Supercomputing Applications (NCSA) at the University of
Illinois released a first version of its Mosaic browser. This software ran in the X Window System
environment, popular in the research community, and offered friendly window-based interaction.
Shortly afterwards the NCSA released versions also for the PC and Macintosh environments.
The existence of reliable user-friendly browsers on these popular computers had an immediate
impact on the spread of the WWW. The European Commission approved its first web project
(WISE) at the end of the same year, with CERN as one of the partners. On 30 April 1993, CERN
made the source code of WorldWideWeb available on a royalty-free basis, making it free
software. By late 1993 there were over 500 known web servers, and the WWW accounted for
1% of internet traffic, which seemed a lot in those days (the rest was remote access, e-mail and
file transfer). 1994 was the “Year of the Web”. Initiated by Robert Cailliau, the First
International World Wide Web conference was held at CERN in May. It was attended by 380
users and developers, and was hailed as the “Woodstock of the Web”.

As 1994 progressed, stories about the Web hit the media. A second conference, attended by 1300
people, was held in the US in October, organised by the NCSA and the newly-
formed International WWW Conference Committee (IW3C2). By the end of 1994, the Web had
10 000 servers - 2000 of which were commercial - and 10 million users. Traffic was equivalent
to shipping the entire collected works of Shakespeare every second. The technology was
continually extended to cater for new needs. Security and tools for e-commerce were the most
important features soon to be added.

Open standards

An essential point was that the web should remain an open standard for all to use and that no-one
should lock it up into a proprietary system. In this spirit, CERN submitted a proposal to the
Commission of the European Union under the ESPRIT programme: “WebCore”. The goal of the
project was to form an international consortium, in collaboration with the US Massachusetts
Institute of Technology (MIT). In 1994, Berners-Lee left CERN to join MIT and founded
the International World Wide Web Consortium (W3C). Meanwhile, with approval of the LHC
project clearly in sight, CERN decided that further web development was an activity beyond the
laboratory’s primary mission. A new European partner for W3C was needed.

The European Commission turned to the French National Institute for Research in Computer
Science and Controls (INRIA), to take over CERN's role. In April 1995, INRIA became the first
94
 European W3C host, followed by Keio University of Japan (Shonan Fujisawa Campus) in Asia
in 1996. In 2003, ERCIM (European Research Consortium in Informatics and Mathematics) took
over the role of European W3C Host from INRIA. In 2013, W3C announced Beihang
University as the fourth Host. In September 2018, there were more than 400 member
organisations from around the world.

IMPORTANT COMPONENTS OF THE WWW

The key components of the World Wide Web include:

 Web Pages.
 Web Browsers.
 Uniform Resource Locator (URL)
 Web Servers.
 Hypertext Transfer Protocol (HTTP)
 Hyperlinks.
 Domain Names.
 Internet Protocol (IP) Address.

There are 3 components of the web: Uniform Resource Locator (URL): URL serves as a system
for resources on the web. Hyper Text Transfer Protocol (HTTP): HTTP specifies communication
of browser and server. Hyper Text Markup Language (HTML): HTML defines the structure,
organization and content of a web page.

What is the World Wide Web composed of?

There are three main ingredients that make up the world wide web. URL (uniform
resource locator), which is the addressing scheme to find a document; HTTP (hypertext
transfer protocol), which connects computers together; and HTML (hypertext markup
language), which formats pages containing hypertext links.

95
NOTE:

What is WWW?
WWW stands for World Wide Web and is commonly known as the
Web. The WWW was started by CERN in 1989. WWW is defined as
the collection of different websites around the world, containing
different information shared via local servers(or computers).
Web pages are linked together using hyperlinks which are HTML-
formatted and, also referred to as hypertext, these are the
fundamental units of the Internet and are accessed through Hypertext
Transfer Protocol(HTTP). Such digital connections, or links, allow users to easily access desired
information by connecting relevant pieces of information. The benefit of hypertext is it allows
you to pick a word or phrase from the text and click on other sites that have more information
about it.
History of the WWW
It is a project created, by Tim Berner Lee in 1989, for researchers to work together effectively at
CERN. It is an organization, named the World Wide Web Consortium (W3C), which was
developed for further development of the web. This organization is directed by Tim Berner’s
Lee, aka the father of the web. CERN, where Tim Berners worked, is a community of more than
1700 researchers from more than 100 countries. These researchers spend a little time on CERN
and the rest of the time they work at their colleges and national research facilities in their home
country, so there was a requirement for solid communication so that they can exchange data.
System Architecture
From the user’s point of view, the web consists of a vast, worldwide connection of documents or
web pages. Each page may contain links to other pages anywhere in the world. The pages can be
retrieved and viewed by using browsers of which internet explorer, Netscape Navigator, Google
Chrome, etc are the popular ones. The browser fetches the page requested interprets the text and
formatting commands on it, and displays the page, properly formatted, on the screen.
The basic model of how the web works are shown in the figure below. Here the browser is
displaying a web page on the client machine. When the user clicks on a line of text that is linked
to a page on the abd.com server, the browser follows the hyperlink by sending a message to the
abd.com server asking it for the page.

96
Here the browser displays a web page on the client machine when the user clicks on a line of text
that is linked to a page on abd.com, the browser follows the hyperlink by sending a message to
the abd.com server asking for the page.
Working of WWW
A Web browser is used to access web pages. Web browsers can be defined as programs which
display text, data, pictures, animation and video on the Internet. Hyperlinked resources on the
World Wide Web can be accessed using software interfaces provided by Web browsers. Initially,
Web browsers were used only for surfing the Web but now they have become more universal.
The below diagram indicates how the Web operates just like client-server architecture of the
internet. When users request web pages or other information, then the web browser of your
system request to the server for the information and then the web server provide requested
services to web browser back and finally the requested service is utilized by the user who made
the request.

97
 World Wide Web
Web browsers can be used for several tasks including conducting searches, mailing, transferring
files, and much more. Some of the commonly used browsers are Internet Explorer, Opera Mini,
and Google Chrome.
Features of WWW
 WWW is open source.
 It is a distributed system spread across various websites.
 It is a Hypertext Information System.
 It is Cross-Platform.
 Uses Web Browsers to provide a single interface for many services.
 Dynamic, Interactive and Evolving.

Components of the Web

There are 3 components of the web:
 Uniform Resource Locator (URL): URL serves as a system for resources on the web.
 Hyper Text Transfer Protocol (HTTP): HTTP specifies communication of browser and
server.
 Hyper Text Markup Language (HTML): HTML defines the structure, organisation and
content of a web page.
Difference Between WWW and Internet
WWW Internet

It is originated in 1989. It is originated in 1960.

98
 WWW Internet

WWW is an interconnected network of websites and Internet is used to connect a

documents that can be accessed via the Internet. computer with other computer .

Internet used protocols such

WWW used protocols such as HTTP
as TCP/IP

It is based on software. It is based on hardware.

There is a entire infrastructure in

It is a service contained inside an infrastructure.
internet.

Web Browser Evolution and the Growth of the World Wide Web
In the early 1990s, Tim Berners-Lee and his team created a basic text web browser. It was the
release of the more user-friendly Mosaic browser in 1993 that really sparked widespread interest
in the World Wide Web (WWW). Mosaic had a clickable interface similar to what people were
already familiar with on personal computers, which made it easier for everyone to use the
internet.
Mosaic was developed by Marc Andreessen and others in the United States. They later made
Netscape Navigator, which became the most popular browser in 1994. Microsoft’s Internet
Explorer took over in 1995 and held the top spot for many years. Mozilla Firefox came out in
2004, followed by Google Chrome in 2008, both challenging IE’s dominance. In 2015,
Microsoft replaced Internet Explorer with Microsoft Edge.
Conclusion
The World Wide Web (WWW) has revolutionized how information is accessed and shared
globally. It provides a vast network of interconnected documents and resources accessible via
the Internet. Through web browsers, users can navigate websites, access multimedia content,
communicate, and conduct transactions online. The WWW has transformed communication,
commerce, education, and entertainment, shaping modern society and facilitating a connected
global community. Its continued evolution and accessibility drive innovation and connectivity
worldwide.
Frequently Asked Questions on World Wide Web – FAQs

Can we Use the Web Without an Internet ?

99
 If a website is on your computer or a computer connected to the same local area
network , you can browse it without an internet .

What problems does World Wide Web face?

 Our private data is no longer under our control.

 Misinformation on the internet spreads very easily.

What is the world’s first website?

The first website is info.cern.ch.

What is a URL?

URL stands for Uniform Resource Locator, it is an online address that is given to
the web page.

Are you a student in Computer Science or an employed professional looking to take up

the GATE 2025 Exam? Of course, you can get a good score in it but to get the best score
our GATE CS/IT 2025 - Self-Paced Course is available on GeeksforGeeks to help you with its
preparation. Get comprehensive coverage of all topics of GATE, detailed explanations,
and practice questions for study. Study at your pace. Flexible and easy-to-follow modules. Do
well in GATE to enhance the prospects of your career. Enroll now and let your journey to
success begin!

Similar Reads

Computer Network Tutorial

A computer network is a collection of computers or devices connected to share resources. Any
device which can share or receive the data is called a Node. Through which the information or
data propagate is known as channels, It can be guided or unguided. In this Computer network
tutorial, you’ll lear

Basics of Computer Network

Network Hardware and Software

100
Network Topology

OSI Model

Protocols

TCP/IP Model

Medium Access Control

SLIDING WINDOW PROTOCOLS

IP Addressing

Routing

Congestion Control Algorithms

Network Switching

Application Layer:DNS

Domain Name System (DNS) in Application Layer

The Domain Name System (DNS) is like the internet's phone book. It helps you find websites
by translating easy-to-remember names (like www.example.com) into the numerical IP
addresses (like 192.0.2.1) that computers use to locate each other on the internet. Without DNS,
you would have to remember lo

Details on DNS

DNS (Domain Name System) allows you to interact with devices on the Internet without having
to remember long strings of numbers. Each computer on the Internet has its own unique
address, known as an IP address,

101
CASCADING STILE SHEET (CSS) CODES AND THE IMPORTANCE OF CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe

the presentation of a document written in HTML or XML (including XML
dialects such as SVG, MathML or XHTML). CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.

To Note: XML; Extensible Markup Language (XML) lets you define and store data in a
shareable manner. XML supports information exchange between computer systems such as
websites, databases, and third-party applications.

SVG; Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based
raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a
grid..

MathML; MathML stands for Mathematics Markup Language. It is used to represent mathematical
equations or expressions in web browsers like other HTML elements.

MathML is a markup language for describing mathematical notation and capturing both its
structure and content. The goal of MathML is to enable mathematics to be served, received,
and processed on the World Wide Web, just as [ HTML ] has enabled this functionality for text.

XHTML;
CSS; What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you
can control the color, font, the size of text,

CSS; Codes for controlling Text color, aligning the text to required margins.

102
NOTE:

SECURITY THREATS AS USED IN WEB DESIGN

Web Security Considerations

Web Security deals with the security of data over the internet/network or web or while it is being
transferred over the internet.
Web security is crucial for protecting web applications, websites, and the underlying servers
from malicious attacks and unauthorized access. In this article, we will discuss about web
security.
What is Web Security?
Web Security is an online security solution that will restrict access to harmful websites, stop
web-based risks, and manage staff internet usage.
Web Security is very important nowadays. Websites are always prone to security threats/risks.
For example- when you are transferring data between client and server and you have to protect
that data that security of data is your web security.
What is a Security Threat?
A threat is nothing but a possible event that can damage and harm an information system.
A security Threat is defined as a risk that, can potentially harm Computer systems &
organizations.
Whenever an individual or an organization creates a website, they are vulnerable to security
attacks. Security attacks are mainly aimed at stealing altering or destroying a piece of personal
and confidential information, stealing the hard drive space, and illegally accessing passwords.
So whenever the website you created is vulnerable to security attacks then the attacks are going
to steal your data alter your data destroy your personal information see your confidential
information and also it accessing your password.
Top Web Security Threats
 Cross-site scripting (XSS)
 SQL Injection
 Phishing
 Ransomware
 Code Injection
 Viruses and worms
 Spyware
 Denial of Service

Security Consideration
 Updated Software: You need to always update your software. Hackers may be aware
of vulnerabilities in certain software, which are sometimes caused by bugs and can be used to
103
 damage your computer system and steal personal data. Older versions of software can
become a gateway for hackers to enter your network. Software makers soon become aware of
these vulnerabilities and will fix vulnerable or exposed areas. That’s why It is mandatory to
keep your software updated, It plays an important role in keeping your personal data secure.
 Beware of SQL Injection: SQL Injection is an attempt to manipulate your data or your
database by inserting a rough code into your query. For e.g. somebody can send a query to
your website and this query can be a rough code while it gets executed it can be used to
manipulate your database such as change tables, modify or delete data or it can retrieve
important information also so, one should be aware of the SQL injection attack.
 Cross-Site Scripting (XSS): XSS allows the attackers to insert client-side script into web
pages. E.g. Submission of forms. It is a term used to describe a class of attacks that allow an
attacker to inject client-side scripts into other users’ browsers through a website. As the
injected code enters the browser from the site, the code is reliable and can do things like
sending the user’s site authorization cookie to the attacker.
 Error Messages: You need to be very careful about error messages which are generated to
give the information to the users while users access the website and some error messages are
generated due to one or another reason and you should be very careful while providing the
information to the users. For e.g. login attempt – If the user fails to login the error message
should not let the user know which field is incorrect: Username or Password.
 Data Validation: Data validation is the proper testing of any input supplied by the user or
application. It prevents improperly created data from entering the information system.
Validation of data should be performed on both server-side and client-side. If we perform
data validation on both sides that will give us the authentication. Data validation should
occur when data is received from an outside party, especially if the data is from untrusted
sources.
 Password: Password provides the first line of defense against unauthorized access to your
device and personal information. It is necessary to use a strong password. Hackers in many
cases use complex software that uses brute force to crack passwords. Passwords must be
complex to protect against brute force. It is good to enforce password requirements such as a
minimum of eight characters long must including uppercase letters, lowercase letters, special
characters, and numerals.
Conclusion
Web security is critical for protecting web applications and data from malicious attacks and
unauthorized access. It is critical to implement precautions such as updated software,
understanding of SQL injection and cross-site scripting, proper error handling, extensive data
validation, and strong password restrictions. These methods assure the integrity, confidentiality,
and availability of information, protecting both users and organizations from security risks.
Frequently Asked Questions on Web Security – FAQs

How can I prevent SQL Injection?

 Validate user input.

 Use parameterized queries or prepared statements.
 Avoid dynamic SQL queries with concatenated input.
104
Why is online security important?

Web security is critical for protecting sensitive data, ensuring the integrity and
availability of web services, and avoiding unauthorized access, which can result
in financial loss, reputational harm, and legal implications.

Web service security requirements:

 Authentication
 Confidentiality
 Message integrity

You can also read:

Cyber Technology

Cyber Ethics

Cyber Crimes

Cyber Crime Techniques

Keyloggers and Spyware

Prevention and Protection

Cyber Forensics

Cyber Crime Investigation

Cyber Law

Cyber security Evolution

Cyber security Objectives

Classical Encryption Techniques

Block Ciphers and the Data Encryption Standard

Advanced Encryption Standard

Moreon Symmetric Ciphers

Introduction to Number Theory

105
Public-Key Cryptography and RSA

Key Management:OtherPublic-Key Cryptosystems

Message Authentication and Hash Functions

Hashand MAC Algorithms

Digital Signatures and Authentication Protocols

Authentication Applications

Electronic Mail Security

IP Security

Web Security

Intruders

Malicious Software

SPYWARE

Spyware is malicious software that enters a user's computer, gathers data

from the device and user, and sends it to third parties without their consent.
A commonly accepted spyware definition is a strand of malware designed to
access and damage a device without the user's consent.

What are some examples of spyware?

Some examples of spyware could be the following: Keyloggers are spyware software
that monitor and record keystrokes made by a user on a device. Every piece of
keystroke data is saved to a file, which is sent to the attacker.

106
Characteristics of spyware:

Certain characteristics define spyware against other types of cyber-attacks,

including: Steals Sensitive Information: Spyware monitors internet activity, tracks login
credentials, and spies on sensitive information.

How does spyware infect a computer?

Some common ways your device might become infected with spyware include:
Accepting a prompt or pop-up without reading it first. Downloading software from an
unreliable source. Opening email attachments from unknown senders.

NOTE:

SPYWARE: WHAT IT IS AND HOW TO PROTECT YOURSELF

Spyware is a type of malicious software that is installed on your computer or mobile device without
your consent, and it can gain access to your sensitive personal information and then relay it to other
parties, resulting in anything from pesky advertising and pop-ups to tracking your keystrokes and
capturing your login credentials. Follow this guide to learn more, including about how Norton 360
Deluxe can help keep your device safe.
Get Norton 360 Deluxe

What is spyware?

107
Spyware is a type of malware that's installed on your device without your knowledge or permission,
covertly gathering intel about you.

Although the term "spyware" may sound like something right out of a secret agent movie, this sneaky
software is anything but entertaining. Spyware is actually one of the most common threats on the
internet today. It can easily infiltrate your device and, because of its covert nature, can be hard to
detect.

It's worth noting that not all software that tracks your web activity does so for bad reasons. Some
online tracking is used for things like remembering your login information or customizing your
website experience. Spyware, on the other hand, is used with malicious intent.

Types of Spyware:

The four common types of spyware are adware, Trojans, internet tracking, and system monitors. Their
function ranges from tracking your browser activity so marketers can target your interests, for
instance, to monitoring your keystrokes and nearly everything you do on your device.

Here are some of the unique tactics each type of spyware uses to track you:

 Adware tracks your browser history and downloads with the intent of predicting what products or
services you’re interested in. It's used for marketing purposes.
 Trojans are a type of malware disguised as legitimate software. Just like the Trojan horse from
Greek mythology, a Trojan tricks you into letting it in (or, more specifically, onto your device), by
acting like a benign software update or file. Then it damages, disrupts, or steals your data.

108
 Internet tracking is a common practice used to follow your web activities—like browsing history
and downloads—mostly for marketing purposes.
 System monitors are a type of spyware that can capture just about everything you do on your
computer. Keyboard loggers can record all of your keystrokes, emails, chat room conversations,
websites visited, and programs run. System monitors are often disguised as freeware or safe
shareware.

109
How does spyware work?

Just like any other form of malware, spyware infects your device. Here is a breakdown of how
spyware works.
110
1. Infiltrates your device: This could happen when you visit a malicious website, unwittingly install
a malicious app, or even open a file attachment.
2. Captures your data: Once the spyware is on your device, it begins to collect data, which could be
anything from your web activity to screen captures to even your keystrokes.
3. Provides data to a third party: The captured data is then supplied to the spyware creator, where
it is either used directly or sold to third parties.

The data collected through spyware may include things like:

 Web browsing history

 Keyboard strokes
 Email addresses
 Login credentials (usernames and passwords)
 Credit card details and account PINs

Common spyware tactics

 Software backdoors: Hackers can quickly gain access to your device when your hardware is
vulnerable through software bugs or backdoors.
 Phishing: Criminals may attempt to get you to perform an action by clicking a malicious link.
 Spoofing: Some types of hackers disguise themselves to send emails from people or organizations
you trust.
111
 Manipulative marking: Cybercriminals use misleading marketing tactics to promote helpful tools
so folks are eager to download them and become a victim of the bait.

 Software packages: Be cautious of hidden add-ons or plugins concealed within a program.

 Trojans: Cybercriminals use Trojans to send malware and steal your data.
 Mobile apps: Watch out for pop-ups and malicious download links when using mobile apps.

112
113
Potential problems caused by spyware

Being a target of spyware can be annoying and even dangerous. Here are some common problems:

 Damage to your device: Spyware can drain the performance of your device, making it run slowly
or lag.
 Browsing disruptions: Spyware can alter your device’s settings and search engine results.
 Data theft: Your email accounts, passwords, browsing history, and social network access may be
stolen.
 Identity fraud: Cybercriminals can imitate your identity through the personal information
they’ve gained.

How to recognize spyware

While spyware was once a more common problem for Windows operating systems, that's no longer
strictly the case. Spyware can affect PCs, Macs, and iOS or Android devices, including mobile phones
and tablets. Basically, if your device can connect to the internet, it can be infected with spyware.

Some common ways your device might become infected with spyware include:

 Accepting a prompt or pop-up without reading it first

 Downloading software from an unreliable source
 Opening email attachments from unknown senders
 Pirating media such as movies, music, or games
 Clicking a link to a malware-laden website

114
Spyware creators may use clever tricks to deceive you. The spyware may be packaged alongside free
software made to seem like a useful tool, or in an email attachment that seems legitimate.

Spyware can be difficult to recognize on your device—it’s meant to be deceptive and hard to find.
Like a spy, it works covertly. Even so, there are clues that can help you identify whether you’ve been
infected.

You may have a spyware issue if you spot any of these signs:

 Your device is slow, crashes unexpectedly, or starts displaying error messages.

 Your device is running out of hard drive space.
 You're annoyed by frequent and persistent pop-ups.
 Your browser redirects you to pages you haven't navigated to.
 Your browser no longer points to your usual homepage.
 You discover icons for programs you didn't download on your device.
 Your browser displays a new toolbar or plugin you didn't add.

How to protect yourself from spyware

 Don't open unsolicited or

Spyware creators tend to cast a broad net to gather vast amounts of suspicious email

information from as many people as possible. That's why it's important attachments.

to take precautions and practice goointernet safety.

115
Although anyone who uses the internet can potentially get spyware on
their devices, there are ways to prevent spyware infections.

Do’s and Don’ts of Minimizing Spyware

 Do use reputable antivirus

 Don't open suspicious-looking
software with spyware
emails from unknown senders.
protection.

 d Do use a pop-up blocker or avoid clicking pop-up ads.

 Don't click links in text

 Do keep your computer or mobile operating systems updated. messages from unknown
senders.

Spyware authors have sophisticated ways of tricking internet users into unwittingly downloading
spyware. It pays to treat anything unexpected or unknown that appears on your device or in your
email inbox as suspect until proven otherwise.

116
How to remove spyware

Spyware is a common problem for internet users. If you think your device has been infected, there are
steps you can take to help remedy the problem.

From your computer

While it used to be more common on Windows, Mac spyware is increasingly becoming an issue. Mac
spyware attacks have included stolen passwords and backdoors.

If you suspect your desktop or laptop computer has been infected with spyware, take these steps to
identify the infection and remove it:

 Run a scan with your security software: The scan will help to identify and remove malware.
 Download and run a virus removal tool: A reputable virus removal tool scans for threats that
traditional antivirus software may not detect.

Get Norton Spyware and Virus Removal

117
Once you've cleaned your system, consider practicing prevention. There are high-quality anti-spyware
tools available that will monitor your system continuously to help guard against spyware from
accessing or modifying your personal information.

From your mobile phone

Mobile devices can become infected with spyware, too. If you've noticed any , there are steps you can
take to remove the spyware.

1. Uninstall apps you don't recognize: Go to your phone's settings, click on "Apps," and uninstall
any apps you find suspicious.
2. Run an antivirus or malware scan: You may have an app that came packaged with your phone,
or you may need to download and install a reputable app from the official app store for your
device.

If uninstalling apps and running a malware scan doesn't fix the problem, consider backing up your
data and then factory resetting your phone.

118
What to do after spyware removal

Your work isn't quite finished once the spyware has been removed from your device. There are some
steps you should take to protect your personal data from being further exposed.

 Change your passwords: Once your system has been cleaned, take steps to secure your personal
data by changing your email and other important account passwords.
 Alert your financial institutions: If you believe financial credentials such as credit card data may
have been exposed, make sure your financial institution is on the lookout for fraudulent activity
and keep an eye out for yourself.

Keeping your devices safe

Although not all spyware gains access to things like your passwords and credit card information, it
can still make sense to safeguard important personal data after an infection.

With a better understanding of what spyware is and how it functions, you can take steps to keep your
devices and your confidential data more secure.

Still concerned about potential hackers who want to access your data? Norton 360 Deluxe increases
your chances of minimizing threats. Not only does it help protect against cybercriminals accessing
your information, but it also helps avoid suspicious behavior that can affect your device.

119
 Get Norton 360 Deluxe

FAQ about spyware

Here are answers to a few of the most-asked questions about spyware.

Is spyware a virus?

Spyware and are in the same family—they're both malicious types of software. But there are some
differences. Spyware is a type of malware that collects your personal information and gathers data
about you without your consent. Viruses are a type of malicious software designed to spread from
your device to other devices.

Can spyware be detected?

Spyware can be detected by advanced internet security software and anti-malware software. If you've
noticed that your computer or device is behaving differently (such as running slowly or displaying
unusual or especially intrusive pop-ups), run a scan to identify and remove the threat.

120
What are examples of spyware?

Some of the most notorious spyware programs that have been identified include:

 CoolWebSearch (CWS): This spyware has been around since 2003. It redirects your browser to a
new homepage and then continuously creates pop-up ads, often to unsavory sites while changing
browser permissions so that unsafe sites are marked "safe."
 Olympic Vision: Olympic Vision spreads through email campaigns aimed at employees of
specific companies. It logs keystrokes and steals clipboard data and other user credentials.
 HawkEye: This keylogger covertly captures things like keystrokes, account credentials, and other
high-risk personal information.

Are tracking cookies spyware?

Tracking cookies can be spyware, but it depends on the type of tracking cookie. Not all tracking
cookies are harmful or disruptive.

First-party cookies aren't necessarily spyware. Reputable websites will ask you to accept their tracking
cookies the first time you visit. These cookies help the website to identify you when you visit again
and assist with things like login, accessing your user profile, and personalizing your browsing
experience while you're using the site.

121
Third-party cookies are often a type of spyware. They come from a website or ad server other than the
site you're currently surfing, and they often allow advertisers to track your online activities or analytics
companies to collect and sell your data.

What should I do if my device is infected?

If you believe your device is infected, isolate the device. Make sure to uninstall any suspicious apps or
programs. You’ll then want to use a spyware removal tool to scan for any threats and remove them.

Hoaxes
Hoaxes are emails typically arriving in chain letter fashion that often describe impossible events, highly
damaging malware or urban legends. Their intent is to frighten and mislead recipients and get them to
forward to friends.

NOTE:
What is a virus hoax?
A virus hoax is a false warning about a computer virus. Typically, the warning arrives in an
email note or is distributed through a note in a company's internal network.

These notes are usually forwarded using distribution lists, and they will typically suggest that the
recipient forward the note to other distribution lists.

If someone gets a message warning about a new virus, they can check it out by going to one of
the leading websites that keep up with viruses and computer virus hoaxes. If someone sends
them a note about a virus that they learn is a virus hoax, they should reply to the sender that the
virus warning is a hoax.

122
How to identify a virus hoax
When receiving a virus alert, recipients can typically tell a hoax email by its sensational claims.
For example, the malicious software would cause their hard drive to implode or the operating
system to crash.

Typically, they also include fake quotes from reputable news outlets, like CNN,
and cybersecurity or antivirus software providers, like Symantec, and urgent emotive language to
scare the reader into taking a particular action.

In so doing, they contribute to the sender's attempts at social engineering, even though they
simply believe themselves to be passing along important information.

While most virus hoaxes don't amount to more than a chain letter or a prank, there are some that
urge the reader to download critical system files that could cause significant harm to the
computer -- for example, the SULFNBK.exe and jdbgmgr.exe virus hoaxes.

Examples of notable virus hoaxes

A few examples of other notable virus hoaxes are the following:

 Antichrist. This hoax message stated that McAfee and Microsoft had discovered the virus
that was sent via email with the subject line: "SURPRISE?!!!!!!!!!!" It then made the readers
hard disk unusable.
 Irina. This was a warning sent out about a nonexistent virus by a publisher to promote an
interactive book with that name.
 Black in the White House. This virus hoax carried a chain message that warned users that
opening the file would unleash an Olympic torch that would burn down their C drive.
 Goodtimes. This message warned computer users that a computer virus that went by the
name "Good Time" was circulating and that they should delete any email that mentioned the
phrase in the subject line.
 Budweiser Frogs, aka BUDSAVER.EXE. Taken from the iconic Budweiser commercials,
this supposed virus was said to steal a user's login information and corrupt their hard drive.

123
In spite of the name, virus hoaxes can still compromise corporate security through an email
message.

What to do if you receive a virus hoax message

Still, the question remains of what someone should do if they receive a virus warning. Should
they assume it's a hoax and delete the message, or should they forward it just in case?

Antivirus software vendors recommend that recipients delete email virus hoax messages and not
propagate the hoax by forwarding it on.

Professionally, organizations should include a nonforwarding policy for any email messages
received about viruses.

It's also important to remember that virus hoaxes circulate today in more than just email. They
can also be seen on social media messenger platforms. As a general rule of thumb, users should
never open or forward messages or URL links that seem suspicious.

Even if the message comes from someone they know, it could be a fake account meant to
impersonate that person, or it could be that the sender has fallen for a scam. It's important that it
be stopped before it gets passed on to others.
124
Explore these ransomware removal tools and this rundown of antivirus products for Windows.

This was last updated in November 2021

Continue Reading About virus hoax

 10 tips to keep personal data safe and secure

 The dark web in 2021: Should enterprises be worried?

 Fake antivirus site promises coronavirus protection, delivers trojan

 10 ways to prevent computer security threats from insiders

 What are the security priorities for the post-coronavirus world?

PHISHING

Phishing is the practice of sending fraudulent communications that appear to

come from a legitimate and reputable source, usually through email and text
messaging. The attacker's goal is to steal money, gain access to sensitive
data and login information, or to install malware on the victim's device.

What is phishing in cybersecurity?

Phishing is a type of cyberattack that uses fraudulent emails, text messages, phone
calls or websites to trick people into sharing sensitive data, downloading malware or
otherwise exposing themselves to cybercrime.

What is phishing explain with examples?

Phishing definition

The email typically asks the recipient to provide login credentials for their bank, credit
card or other account by 1) replying directly to the email, or 2) clicking on a link that
takes them to a website or login page.

125
 NOTES:

PHISHING; EXAMPLES, TYPES, AND TECHNIQUES

Phishing is a type of cyberattack that uses disguised email to trick the recipient into giving up
information, downloading malware, or taking some other desired action.

It’s the cyber pest that will not die.

Three decades after phishing first emerged from the swamps of the dark web, it remains a global
plague.

An average of 31,000 phishing attacks were sent out per day in 2023, according to a report by
SlashNext.

It’s a costly scourge: an IBM study estimated the average organization spent $4.91
million responding to phishing-related data breaches in 2021.

Here’s a primer on how phishing works, how it originated in the 1990s, and how to prevent it.

126
Phishing definition

Phishing is a cyber-attack that uses email and social engineering to trick a target into taking actions
that will compromise their security, such as providing sensitive information or downloading
malware.

In a common phishing attack, the target receives an email from a source pretending to be
legitimate, such as their bank, coworker, friend, or workplace IT department.

The email typically asks the recipient to provide login credentials for their bank, credit card or
other account by 1) replying directly to the email, or 2) clicking on a link that takes them to a
website or login page.

But it’s all fake, designed to scam the recipient into giving away access to sensitive accounts or
networks.

Alternatively, a phishing email encourages a target to click on a link or attachment that’s actually
designed to download malware, spyware or ransomware to their device or network.

Phishing remains the primary initial attack vector for cybersecurity incidents, according to a 2023
report from Cloudflare. More recently, Zimperium Labs found that four out of five phishing
attacks target mobile devices specifically.

How phishing attacks work

Hackers use several methods to con their targets.

Their messages often sport logos and fonts identical to those used by the brands and organizations
they impersonate.

Fraudsters may also use link-shortening services like Bitly to mask the URLs of malicious links in
their phishing messages.

Email spoofing, another popular phishing technique, involves sending messages from scam email
addresses that are deliberately similar to authentic ones.
127
 “Cyber actors set up spoofed domains with slightly altered characteristics of legitimate domains.

A spoofed domain may feature an alternate spelling of a word (‘electon’ instead of ‘election’) or
use an alternative top-level domain such as a ‘.com’ version of a legitimate ‘.gov’ website,” the
FBI warned in a 2020 alert.

Explore related questions

 What are the most common types of phishing attacks?

 How does AI make phishing emails more believable?
 How can you recognize different types of phishing attacks?
 What is the financial impact of phishing attacks?
 How does social engineering play a role in phishing attacks?

Ask

Here’s how often some of the most common phishing techniques were deployed in 2023,
according to a report by Cloudflare Inc.

 Malicious link: 35.6%

 identity deception: 14.2%
 credential harvester: 5.9%
 brand impersonation: 5.4% (Microsoft was the most impersonated brand)
 malicious attachment: 1.9%

The dark web is littered with phishing kits, ready-made bundles of key technical components
needed to launch an email attack. These kits commonly include cloned versions of popular
websites and fake login pages designed to steal credentials.

Phishing attack examples

Although phishing is deployed through digital means, it preys on very human emotions like fear,
anxiety and compassion. Ironically, the following example taps into the desire of conscientious
recipients to protect their DocuSign accounts from cyber threats:

128
Christine Wong

Some phishing attacks target very specific niches. This email was distributed to employees of the
International Committee of the Red Cross:

Christine Wong

Shrewd hackers often launch phishing attacks to exploit events unfolding in real life. This
fraudulent email appeal for charitable donations circulated less than 24 hours after earthquakes hit
Turkey and Syria in 2023:
129
Christine Wong

Types of phishing attacks

Phishing has evolved into different formats and techniques over the past three decades, including
the following. For more on these and other types of attacks, see “9 types of phishing attacks and
how to identify them.”

Spear phishing

Spear phishing targets one specific individual, often someone with access to an organization’s
sensitive assets, such as an accountant or IT help desk employee.

These emails usually contain personal information stolen from the dark web or gleaned from the
target’s own social media posts.

A 2015 spear-phishing attack temporarily knocked out Ukraine’s power grid. Hackers targeted
certain employees of the utility with emails containing malicious attachments; that malware gave
the hackers access to the grid’s IT network.

130
Business email compromise (BEC)

Business email compromise (BEC) takes phishing to the next level. With BEC, the hacker
impersonates a CEO or other top executive at a company, and then dupes an employee at that
company into transferring corporate funds to a fake bank account.

Sixty-eight percent of all phishing emails in 2022 were BEC attacks, according to SlashNext’s
report. Per the FBI, global losses from BEC incidents reported between 2013 and
2022 totaled $50.8 billion.

Always keen to capitalize on current events, cyber crooks hijacked virtual meeting platforms
during the pandemic, co-opting them for BEC attacks.

“Criminals … [are] compromising an employer or financial director’s email, such as a CEO or

CFO, and requesting employees to participate in a virtual meeting platform,” the FBI warned in a
2022 alert.

“The criminal will insert a still picture of the CEO with no audio, or deep fake audio, and claim
their video/audio is not properly working.

They then proceed to instruct employees to initiate transfers of funds via the virtual meeting
platform chat or in a follow-up email.”

An elaborate BEC hoax collectively cost Facebook and Google an eye-watering $100 million.
Between 2013 and 2015, a scammer impersonated a board member from a real Taiwanese
company.

He sent phishing emails to Facebook and Google employees who regularly deal with large fund
transactions, convincing them to ‘pay’ fake invoices to a fraudulent bank account.

Whale phishing

Whale phishing targets a ‘big fish’ like a corporate CEO in order to steal a company’s funds, trade
secrets or intellectual property.

131
Smishing

Smishing is phishing via SMS text message. Thirty-nine percent of all mobile phishing attacks in
2022 involved smishing, according to the SlashNext report. For more on smishing, see “Smishing
and vishing: How these cyber attacks work and how to prevent them.”

Quishing

Quishing is phishing by QR code.

The code is usually sent by email to dupe the target into downloading malware or visiting a
fraudulent login page.

A relatively newer form of phishing, quishing has been on the rise dramatically, thanks in part to
the use of zero-trust policies and multifactor authentication in reducing the effectiveness of
phishing campaigns.

To Note: QR; A QR code (quick response code) is a type of two dimensional (2D) bar
code that is used to provide easy access to online information through the digital
camera on a smartphone or tablet.

Vishing

Vishing is phishing by phone call or voicemail. It often employs VoIP to thwart caller ID or
wardialing to deliver thousands of automated voice messages.

132
Despite constant innovations in cybersecurity technology, some of the largest corporations on the
planet have been fooled by low-tech phishing schemes. A vishing expedition shut down MGM
Resorts (and its lucrative Las Vegas casinos) for more than a week in 2023.

Cybercriminals monitored an MGM employee’s LinkedIn account for personal details, then used
that info to impersonate him in a phone call to MGM’s help desk. The hackers persuaded help desk
staff to reset the employee’s password. Ransomware was deployed, guest data were stolen, and that
sham phone call cost MGM $100 million.

VOIP: Voice over Internet Protocol (VoIP), is a technology that allows you to make voice calls
using a broadband Internet connection instead of a regular (or analog) phone line.

AI and phishing

Hackers have added artificial intelligence to their phishing arsenal.

Generative AI chatbots can quickly scrape millions of data points from the internet to craft
phishing emails with no factual errors, convincingly mimicking the writing style of real individuals
and organizations.

Singapore’s cybersecurity agency reported that, in pen testing, phishing emails produced by
ChatGPT “matched or exceeded the effectiveness” of those created by humans.

The number of phishing emails skyrocketed by 1,265 percent in the 12 months following
ChatGPT’s general availability, prompting SlashNext CEO Patrick Harr to suggest it was “not a
coincidence.”

Moreover, the IBM X-Force research team reported in October 2023 that, with only five simple
prompts, it was able to trick a generative AI model into developing “highly convincing” phishing
emails almost on par with those created by skilled humans in just five minutes, potentially saving
nearly two days of work for attackers.

Vishing scammers can harvest samples of people’s voices from social media video clips, and then
clone their voices using generative AI.

133
 A Canadian grandma lost $7,000 (CDN) when fraudsters used AI to impersonate her grandson
over the phone.

AI vishing has even penetrated the C-suite. The CEO of a UK energy firm received three phone
calls from the firm’s parent company, asking him to transfer $243,000 (USD) to a supplier.
He dutifully sent the funds, but the voice was actually an AI replication.

To Note: Generative AI; Generative AI, or gen AI, is a type of artificial intelligence (AI) that
can create new content and ideas, like images and videos, and also reuse what it
knows to solve new problems.

How to prevent phishing

For individuals:

 If you think an email could be phishing, don’t reply, click on any links or attachments, or provide
any sensitive information. Phone the organization or verify their email domain or URL by
finding their website online.
 If an email requests a password or other sensitive information, or pressures you to take urgent
action, pause and verify as noted above.
 Don’t post personal information on social media about your bank, birthdate, middle name, pets’
names or vacation plans.

For organizations:

 Ensure all software and applications are set to update and patch automatically.
 Implement multifactor authentication and strong password policies.
 Deploy tools such as Domain-based Message Authentication, Reporting and Conformance
(DMARC), Sender Policy Framework (SPF) and Domain Keys Identified Mail (DKIM).
 Regularly conduct pen testing.
 Continuously educate everyone in your organization about the latest phishing hazards using
resources from organizations such as the SANS Institute.

For a deeper look at how to defend your organization against phishing attacks, see “9 tips to
prevent phishing” and “6 reasons why your anti-phishing strategy isn’t working.”

134
 See also “10 top anti-phishing tools and services” to read about technologies that can aid you in
hardening your phishing defenses.

The history of phishing

Hackers may have adopted the term phishing because it sounds like fishing, a play on their goal of
trawling for unsuspecting victims.

The “ph” is part of a tradition of whimsical hacker spelling, and was probably influenced by the
term “phreaking,” short for “phone phreaking,” an early form of hacking that involved playing
sound tones into telephone handsets to get free phone calls.

Some tech historians believe the term phishing dates to the 1990s when hackers used the characters
— <>< — (resembling a fish) to disguise conversations about fraudulent activity in AOL chat
logs.Others trace the word phishing back to 1996 when it was first mentioned by a hacker news
group.

Some of the first phishing took place in the early 1990s when hackers used fake screen names to
pose as AOL administrators and steal sensitive information via AOL Instant Messenger.

Phishing really blew up in 2000, when an email with the subject line “ILOVEYOU” duped
millions of people into clicking on an attachment loaded with a virulent computer worm.

In the early 2000s, hackers started impersonating sites such as PayPal by registering similar
domain names for use in phishing emails.

Circa the late 2000s, hackers began weaponizing personal information posted on social media sites,
using it to make phishing emails seem more authentic. In the 2010s, bad actors began using
malicious email attachments to spread ransomware like Cryptolocker and WannaCry.

More on phishing:

 9 types of phishing attacks and how to identify them

 10 top anti-phishing tools and services

135
 9 tips to prevent phishing
 6 reasons why your anti-phishing strategy isn’t working
 5 best practices for conducting ethical and effective phishing tests

EMPTY TAG AND EXAMPLES

What is an empty tag in HTML with an example?

Empty tags require just a starting tag and not an ending tag. <HTML>and </HTML>,
<TITLE> and </TITLE> are examples of container tags. <BR>, <IMG> are examples of
empty tags. A tag is a coded HTML command that defines the structure and
appearance of a web page.

Some examples of empty tags are img, embed, area, meta, link, etc. The
empty elements are those elements of HTML that cannot have some
content like text or child element inside them. There is no need to specify
the closing tag, and the opening tag should end with /> instead of >.
What is an example of an empty element?

Detailed Solution. The br> element, which denotes a line break, is a common example
of an empty element. Other often used empty elements include img>, input>, link>,
meta>, hr>, etc. HTML elements that cannot contain content like text or a child element
are known as empty elements.

NOTE:

What are Empty Tags in HTML?

The HTML consists of several elements and their associated tags to represent some
corresponding view on the screen.

As you might know from the concept of the Document Object Model in HTML, the entire
HTML Document can be represented in a tree structure where each node corresponds to an
element, and they can have their attributes as well as child nodes. But not every HTML element
can have a child node, and those all are called Empty Elements.

136
Although if we try to embed content in the empty element, HTML will not stop rendering it, the
HTML parses it in a way that nested content gets positioned at the same level just after that
empty element in DOM, but it is not a good practice because some framework, library, etc. might
throw an error in this situation.

List of Empty Elements used in HTML

Element Description

It accepts a source link of the image and some other attributes like height, width, etc., and
img
is used to embed the image in the HTML Document.

br The term br is an abbreviation for a break. It introduces a line break in the document.

The horizontal rule is used to introduce a graphical line in the HTML document. It is also
hr
called a thematic break. Follow this.

The area element is used inside the image map. It defines some particular clickable areas
area
for the image, which further may lead the user to a different link.

The embed element is used as a container to display any external resource like image,
embed
video, plugin, etc.

input This element is used to receive input from the user.

We write this element in the head tag of the document. It is used to specify some metadata
meta
(information) about the page.

source The source element specifies the media element for the picture, video, or audio element.

It is used inside the colgroup element of tables in HTML and specifies the common
col
properties of columns, ex-style.

It establishes a link or association between some external resource and an HTML

link
document. It is generally used inside the head tag.

Examples

1. img element

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-

equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>HTML Empty
137
Tag</title></head><body> <img src="https://images.pexels.com/photos/11614039/pexels-
photo-11614039.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width="300px"/></body></html>

Output:

2. br and hr element

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-

equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>HTML Empty
Tag</title></head><body> <h1>Hello, Everyone</h1> <br/> <p>The br tag introduces a
line break, but the hr tag introduces a visible thematic line break in the HTML Document.</p>
<hr/> <h2>A hr tag used above</h2></body></html>

138
Output:

3. input element

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-

equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>HTML Empty
Tag</title></head><body> <p>Enter your Name:</p> <input type="text" id="fname"
name="fname"/></body></html>

Output:

139
4. embed element

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-

equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
content="width=device-width, initial-scale=1.0"> <title>HTML Empty
Tag</title></head><body> <h1>The Video will be Shown Below:</h1> <embed
type="video/webm" src="https://static.videezy.com/system/resources/previews/000/004/690/
original/Squared_-_Slideshow.mp4"/></body></html>

Output:

140
Conclusion

 In this article, we have discussed the empty elements of HTML.

 Some examples of empty tags are img, embed, area, meta, link, etc.
 The empty elements are those elements of HTML that cannot have some content like text
or child element inside them.
 There is no need to specify the closing tag, and the opening tag should end
with /> instead of >. The proper syntax to write these elements is <tagname
attributes="values"..... />.

Intranet and extranet

An intranet is a network where employees can create content, communicate,

collaborate, and develop the company culture. Meanwhile an extranet
provides controlled access to authorized customers, vendors, partners, or
others outside the company.

NOTE:

WHAT IS THE DIFFERENCE BETWEEN INTRANET AND EXTRANET?

141
An intranet is a network where employees can create content, communicate, collaborate, and
develop the company culture. Meanwhile an extranet provides controlled access to authorized
customers, vendors, partners, or others outside the company.

For many, understanding the difference between an intranet and extranet can be confusing—
especially for those who have never used them before.

Intranet and extranet software supports two different areas in a business, but has similar goals:
to improve how employees work with clients and each other. Sometimes they are combined in
the same software, other times, separately.

Once integrated into a business model, these portals can make day-to-day activities more
efficient, more streamlined, better connected, and more productive.

But let’s not get ahead of ourselves. Before you plan on implementing extranet or intranet
software, you need to understand how these platforms work, what their features do, and how they
will benefit your business. The better you grasp these concepts, the more likely you’ll reap their
advantages.

What is an intranet?

The prefix intra means within or inside. Therefore, an intranet is the company’s digital
workspace that centralizes employee data, documents, tools, conversations, and projects in your
company.

The major difference from an extranet, however, is that an intranet is used internally. An
intranet allows employees and colleagues to work together in a virtual workspace to
communicate, collaborate, and access documents and resources—for the most part, no outside
parties are involved.

Businesses use intranet software for a variety of reasons, like extranet software, a company
intranet streamlines daily activity, organizes people and data, improves internal communications,
and increases employee engagement. It also solves many challenges for remote teams and large
organizations by connecting staff with colleagues, information, and projects, no matter where
they are.

Strong intranet software is packed with features that improve 3 main areas in your business:
communication, collaboration, and connectivity. When you prioritize all three, your staff will
work better, smarter, and have the resources to make informed decisions on the spot. Let’s take a
look at how these features work.
142
The benefits of implementing an intranet

There are many reasons why it might be beneficial for your business to implement an intranet.

Improved internal communication and alignment

Communication is key. According to a Pumble study, 86% of employees and

executives cite the lack of effective collaboration and communication as the main
causes for workplace failures. With strong communication, teams can complete
tasks efficiently, grow as individuals and departments, and become more aligned
with your organization.

An intranet improves communication in the workplace because employees have

an intuitive, organized, and clear way to check in with each other. Rather than
relying on email, users have access to numerous communication channels where
discussions are tracked and all team members are alerted when a new discussion
takes place. Because intranet platforms are built for flexibility, all three levels
of internal communication have a place to move initiatives forward: leaders to
teams, teams to leaders, and teams to each other.

Streamlined project management

Projects and goals are how your teams and organization evolves. An intranet
gives directors, managers, and employees a secure and automated platform that
keeps everyone on track. The ability to co-edit allows employees to work from
any location, and task management abilities ensures managers can set deadlines,
priority settings, and reminders to teams.

Centralized information that connects members

Communication and collaboration requires access to relevant information. If

employees have to shuffle between platforms, run into confusion because they
don’t know where anything is, or have to rely on another person to find an easy
answer, productivity, morale, and engagement hinders.

143
An intranet becomes the single source of truth for employees. It stores and organizes all internal
data, delivers targeted information, and is the knowledge management system that employees
rely on. The ability to integrate with third-party tools, like Google Workspace and Microsoft
Office 365, centralizes important systems, accelerates projects, and provides employees with one
place for all resources.

144
Essential intranet features

What are the features that drive the benefits of intranet software? Let’s take a look.

High impact communication tools

Fluid conversation spurs creativity and productivity. Direct messenger, comments,

activity streams, notifications, and workspaces are specific intranet features that improve
communication in the workplace and across your entire company.

Let’s say you are in a meeting and your CEO has a question but a team member who has
the answer is not present, or maybe you need to access a document but you do not have
time to stop at your colleague’s desk to get it before a conference call. With an intranet,
you can ask your peer(s) instantly and directly without sending a single email. People can
even drag-and-drop files and create group threads on the spot—eliminating the time it
takes to send large files or dig through clogged email threads and inboxes.

145
146
Knowledge discovery

Accessing and distributing department information is also important. With online

workspaces, departments and internal groups have their own livable homes in your
intranet. Everything imperative to that department—employee directory, documents,
calendars, articles, news, etc.—exists in one dedicated area in your intranet and is
accessible for a select team of members or can be open to everyone.

Users receive alerts whenever a space moderator shares information—another method of

communicating without sending emails that could get lost, unread, or take up unnecessary
space. Plus, an intranet comes with an elastic search where files, third-party documents,
people, and conversations are searchable. Make documents private to a select group or
public to everyone with fine-grain permissions.

Relevant information, always

The intranet becomes the ultimate company knowledge base where your entire staff
receives company-wide announcements, asks general questions in Q&A forums, or
accesses internal documents. By dispersing knowledge, you set every employee up for
success. You also align staff with your company’s values, goals, and people. The
information you share must be useful, which means it must be relevant.

Your intranet ensures content is both. Alert authors to update documents by specified
dates, add expiration dates for content, and make sure employees are reading important
information with a Required Reading tool (this feature notifies recipients when content is
mandatory reading by prompting them to hit a “confirm” button after completion). This
way, you never have to worry if content is outdated or unread by teams. And your
intranet is always the source for current and important information.

Efficient project management and workflow systems

Have you ever managed a project but had a difficult time tracking your team’s progress?
It’s no secret: how your staff executes projects will affect your company’s overall
success. An intranet will assist your employees and managers with every stage of a
project through organized and easy-to-use features.

147
 If a director wants to assign a task, for example, they can alert team members within
seconds and share assignment details. Every aspect of the project will be recorded in a
task management tool and trackable through an activity stream.Team members can also
comment in discussion forums, digital workspaces, and files. So long are the days of
confusion for team players and leaders. The intranet keeps everyone on track and makes
project collaboration an engaging experience.

Intranet in short

The intranet is your digital workplace where employees chat directly with colleagues, access
department information, and collaborate on projects as efficiently and successfully as possible.

When you provide your business—no matter the industry—with modern tools to streamline these
efforts, you create an informed and connected staff, which in turn, optimizes your company’s
success.

For more details on intranet software, uses, and benefits, check out this post: What is an Intranet?

What is an extranet?

148
If an intranet is a digital workplace for internal communications, an extranet is a digital platform
used for external communications.

Think of it this way:

Extra refers to any contact outside of your business, such as clients, vendors, and suppliers.

Therefore, an extranet is a private network where these individuals, like clients, vendors,
suppliers, partners, etc., can communicate with you and your employees in a closed digital
workspace. Extranet software serves an extremely important role, because it supports private
communication, collaboration, knowledge sharing, document sharing, and data transfer between
partners and organizations.

An extranet is designed to streamline a variety of needs. Large volumes of data can be

exchanged between parties via extranet software, for example, thus facilitating easy
collaboration. These collaboration tools are particularly useful for companies that need to
brainstorm or communicate frequently with clients and customers. It saves hours of time in
149
comparison to email and phone. Extranet software also monitors potential issues that can occur
with a company’s products or services—almost like built-in quality control.

The benefits of implementing an extranet

There are many reasons why it’s beneficial for your business to implement an extranet.

Streamlines repetitive business processes

Let’s say you order from a particular vendor on a regular basis using email or phone.
With a well-designed extranet, all of your ordering can take place via your secured
private network in a virtual space. Interactions with vendors occur in real-time, and you
can store invoices, along with other pertinent information, in one place. This makes
referring back to prior purchases easier. Storing everything in one virtual space not only
saves time, but accelerates B2B interactions.

Increases customer satisfaction

One of the key benefits of an extranet is the accessibility 24/7 for you and your clients to
work together. Customers want to find what they need quickly. Depending on what your
business model looks like, a powerful example of an extranet benefit is the ability to
create a self-serve helpdesk. In fact, here’s how an Axero client saves $120,000 a year in
hiring costs by leveraging extranet features. For situations where clients and your
employees work closer together, extranet platforms allow customers and employees to
collaborate in one interactive place. Users can freely and securely upload documents, ask
questions, or approve designs/concepts around the clock. Regardless of where employees
and partners are located, everyone can work together.

150
151
 Highly secure when properly designed

In some industries, such as healthcare and insurance, security is of the utmost importance
and a breach could be disastrous. Email and other tools used to transfer documents lack
the security to avoid potential breaches. Modern extranet software is designed to ensure
these concerns are not an issue and sensitive information is protected.

Essential extranet features

For an extranet to truly deliver, it needs key features to support your goals. Here’s a list of the
top extranet tools you should be looking for.

Enhanced deliverability of information

You need to get information out to your customers—and they need an easy way to find
what they’re looking for. Extranet software allows you to create a public space to share
information with customers and interact with them, too. Similar to how spaces give
internal teams a homebase to receive targeted announcements, messages, and resources, a
public space sets the same experience for external parties. Launch a blog with publishing
tools, automate announcements, create forums for customers to interact with each other
and build a community, or designate a FAQ page for customers to find answers to their
questions. Flexibility for communication is a huge extranet advantage because it
improves customer experience.

Robust collaboration

Easy-to-use collaboration tools empowers internal and external parties to work together
seamlessly. Collaboration with customers means different things for different
organizations—and luckily an advantage of extranet software is the variety of
collaboration tools that support different kinds of projects. If you work with freelancers,
for example, an extranet gives you a digital hub to co-collaborate on documents in real-
time. You can also centralize handbooks, policies, calendars, and guides specific to your
freelancers. Other times, collaboration can mean interacting with clients to troubleshoot
issues or crowdstorm ideas. With discussion forums, polls, and surveys, you can collect
feedback and gather intel from your target audience.

152
 Data security

Customer information needs to be protected. Secure extranet platforms are built with data
encryption and application security to ensure confidential information is protected. With
a wide variety of permission settings, you can restrict different groups of people from
accessing files and areas in your site.

Branding and customization

The extranet is a place where clients can interact with your company and brand. The
ability to customize and design pages to match your colors, logo, and culture sets a
positive user experience that strengthens customer loyalty and satisfaction with your
product and company. With Axero’s Page Builder, you can easily drag and drop widgets
to make your customer-facing pages match your vision. Permissions also allow you to
open up parts of your site to the public, and keep other areas private to internal users.
You can pick and choose what your pages look like and who has access to what.

Extranet in short

Extranet software plays an integral role for companies that conduct business with other
organizations. Sharing large bulks of information, collaborating on projects, and discussing
private information with individuals outside of your company can be accomplished with an
extranet. This streamlines projects and creates a pleasant experience that increases client and
partner retention.

Intranets and Extranets of the past vs. today

Intranet and extranet software have advanced rapidly in the past couple of decades.

Frontier Technologies was the first major company to release an intranet platform. Back in 1996
—seven years after the invention of the internet—Frontier Technologies launched Intranet
Genie. Intranet Genie was the first platform to combine document management and messaging to
support a more modern and effective way to approach internal communication strategies.

Though Intranet Genie was a revolutionary step in advancing how companies worked internally,
it was a clunky platform, difficult to download and even more difficult to navigate.

153
Intranets and extranets evolved from networks that were simplistic in design with minimal
augmentation or tweaking capabilities. Companies and their clients or vendors could
communicate and share small documents, but that was the extent of it.

So, what can you expect from your intranet these days?

Modern intranet and extranet platforms look and function entirely different than what existed
years ago.

Today’s platforms are far more versatile and flexible. Intranet and extranet software have
multiple communication options, project management tools, document storage and knowledge
management tools, and integrations (for example, Axero allows over 500+ REST API
integrations!).

Sharing large files is easier than ever; real-time conversations are possible; and two-way sync
calendars keep everyone on the same page. Intranet and extranet software are full-fledged digital,
interactive, collaborative communities for you and your customers. Every action is intuitive.
Every feature supports your people. It’s easy to distribute and manage knowledge for different
groups.

Tying it all together with modern intranet software

154
In the past, intranet and extranet software were two separate entities.

Multiple programs were typically involved, and getting them to communicate and integrate was
next to impossible in many cases.

Today, intranet and extranet software live in harmony as part of modern intranet software
—one of the biggest advancements to hit the professional sector in recent years.

One of the top benefits of intranet software is that it combines intranet and extranet into a single
package, cutting out communication and integration issues of different software platforms.
Platforms such as Axero are equipped with features that enable collaboration with internal
employees and external stakeholders.

This way, you can communicate with clients, vendors, employees, and colleagues all in the same
place, which saves time, money, and energy. Other internal processes such as sales and
marketing are also incorporated, with the end result being a “one-stop-shop” digital workplace
where you can address a variety of different business needs.

Intranet and extranet software are no longer mutually exclusive, and they’re highly beneficial
when properly implemented. With modern intranet software, you can ensure that both internal
and external processes are carried out smoothly and efficiently.

Learning how to use intranet software is easy, and the sooner you get started, the more your
business will benefit. Download the free guide below to learn more about launching an intranet
for your organization.

155
 BENEFITS OF THE INTERNET TO AN ORGANIZATION
Your business can use the internet to increase:

 profits.
 visibility.
 customer base.
 customer support options.
 opening hours (since the internet is 'on' 24 hours a day)
 cost savings.
 networking opportunities.
 research capabilities.

With IoT, companies can gather real-time data to track performance and optimize processes.
This ability to keep an eye on things as they happen means fewer inefficiencies, faster decisions,
and smoother workflows.

What are the benefits of the internet?

The Internet enables local communities, regions and, nations to develop, attract, retain and,
expand job-creating businesses and institutions. It also improves the productivity and
profitability of large, small and, home-based businesses and allows them to compete in local,
national and global markets.

What are 10 uses of the internet?

This blog also takes a look at who provides high-speed internet for a seamless internet
experience.
 Social Networking. There is no doubt that social networking sites are the most popular use of the
internet
 Online Shopping.
156
 Online Banking.
 Education and Upskilling.
 Gaming.
 Trading.
 Dating.
 Email Communication.

Advantages and disadvantages of the internet:

Advantages and Disadvantages of the Internet

Advantages Disadvantages

Global connections through virtual communications Loss of personal information

E-commerce Spread of fake news

Online Education Internet addiction and time wastage

Abundance of information Physical and mental health issues

What are the importance of the internet?

The internet allows people more affordable and efficient access to basic amenities such as
education, health care, public safety, and government services by: Affording people
opportunities to participate in online learning and distance education.

What are the 10 advantages and 10 disadvantages of social media?

157
Pros and Cons of Social Media

Advantages of Social Media Disadvantages of Social Media

Convenience and Ease of Access Social Media Addiction

Fosters Innovation and Learning Enables Bullying and Harassment

Provides Entertainment Promotes Social Isolation

Platform for Societal Change Causes Depression and Anxiety

What is the main purpose of an internet?

In general, the internet can be used to communicate across large or small distances, share
information from any place in the world, and access information or answers to almost any
question in moments.

158