IT SKILLS

IT SKILLS
(For I/II sem diploma students of all branches )
Course Objective
1. Demonstrate the basics of coding
2. Design and develop web pages that include static and dynamic content
3. Describe the concepts of Cloud and IoT
4. Express the workflow and business automation
5. Recognition the best practices of Cyber and security
SYLLABUS
UNITS
1) Introduction to basics of coding
2) Design and develop web pages
3) Business process automation/ERP
4) Introduction to cloud and IoT concepts
5) Cyber security and safety

Kavana Kumari L, BE, M. Tech 1

 IT SKILLS
UNIT 1
INTRODUCTION TO BASIC CODING

1.1 INTRODUCTION
A computer programming is a sequential set of instructions written in some
computer language that is used to direct the computer to perform some specific task of
computation.
The objective of programming is problem solving through computers speedily and
accurately
1.2 FLOWCHARTING AND ALGORITHM
A set of steps involving arithmetic computation and/or logical manipulation
is required to obtain the desired result.
Algorithm: A set of computational steps that generates a finite sequence of elementary
operations leading to the solution for a given problem is called algorithm. Pictorial
representation of an algorithm is flowchart
Flowchart also be defined as the diagrammatic representation of the steps of the algorithm
and it can be classified as follows
Program flowchart- acts like mirrors of computer programs in terms of flowcharting
symbols. They contain steps of solving a problem unit for a specific result
System flowchart-contains solutions of many problem units together that are closely
related to each other and interact with each other to achieve goal
The following rules should be followed while drawing flowcharts.
• Only the standard symbols should be used.
• Program logic should depict the flow from top to bottom and left to right…
• Each symbol should have only one entry point and exit point.
• Operations shown within a symbol of a program flowchart should be expressed
independent of any particular programming language, and All decision branches should
be properly labeled.

Kavana Kumari L, BE, M. Tech 2

 IT SKILLS

Standard symbols of flowchart

1.3 INTRODUCTION TO APPLICATION DEVELOPMENT

Application development

It is the process of creating a computer program or a set of programs to

perform the different tasks that a business requires. It can be done by massive
organizations with large teams working on projects, or by a single freelance developer.
Application development may refer to:
 Mobile application development(app development)
 Desktop application software
Android application development

Android is a mobile operating system based on a modified version of the

Linux Kernel and other open source software, designed primarily for touchscreen mobile
devices such as smart phones and tablets. Android applications are developed in the Java
language using the android software development kit.

Kavana Kumari L, BE, M. Tech 3

 IT SKILLS
App builder platforms
There are various coding platforms which beginners can use to get coding
experience online/offline. Users can choose based on their requirements like coding/no
code, complexity etc.
Some of the coding plaftforms are:
1. Scratch https://scratch.mit.edu/
2. Code.org https://studio.code.org/projects
3. MIT app inventor https://appinventor.mit.edu/
4. Thunkable https:// Thunkable.com/
5. Ibuildapp https:// Ibuildapp.com

MIT-scratch
Scratch is a slide-and-drop programming language designed for children to
create things such as games, animations etc
Sprite – Pictures available in scratch
Blocks – we can give commands to sprits and those commands are called as blocks
Program or script – in the middle of the screen is a blank area. You can put together
blocks here to make more complicated commands. This is called a script.
MIT APP INVENTOR

• It is a web application integrated development environment originally provided by

google and now maintained by the Massachusetts Institute of Technology(MIT)
• example program for Application development by using MIT APP INVENTOR
refer practical program 3
____________________________@@@@@@@@_______________________________________

Kavana Kumari L, BE, M. Tech 4

 IT SKILLS
Unit 2
DESIGN AND DEVELOP WEB PAGES

2.1 Basic web technologies

Web technologies refers to “the way computer devices communicates each other”
Web: Bunch of interconnected computers communicates by using internet
Internet: It is a network of networks based on TCP/IP communication protocol.
Web server: every website resides on a computer called a server. The basic objective of
the web server is to store, process and deliver web pages to the users. This
intercommunication is done using Hypertext Transfer Protocol (HTTP).

Website: Collection of various pages written in HTML markup language

Each page available on the website is called webpage which includes texts, audio/video
hyperlinks
First page on any website is known as home page.
Client-server model
This describes how a server provides resources and services to one or more clients. It
works on request-response basis
It has a centralized system with all the data in a single place
URL stands for Uniform Resource Locator. Each website or webpage has a unique
address called URL.
Syntax
scheme://prefix.domain:port/path/filename
SEO techniques (Search engine optimization)
It is the activity of optimizing WebPages or whole site in order to make them search
engine friendly, thus getting higher positions in search results
SEO used for the following reasons
1) To make the website rank well in search engine result
2) Improve the volume and quality of traffic to a website from search engines
3) Marketing-by understanding how search algorithms work, and what human visitors might
search

Kavana Kumari L, BE, M. Tech 5

 IT SKILLS
Domain Name & Domain Name System (DNS)
A domain name is a unique name for a web site, like w3schools.com. Domain names must be
registered. When domain names are registered they are added to a large domain name register,
and information about your site - including your internet IP address - is stored on a DNS
server.
DNS stands for Domain Name System. A DNS server is responsible for informing all other
computers on the Internet about your domain name and your site address.

2.2 CREATING WEB PAGES WTH HTML5

HTML it is a combination of hyper text and the markup language, HTML is a standard
markup language for creating web pages and it describes the structure of the webpage
Basic structure of html document
<!DOCTYPEhtml>
<html>
<head>
<title > title here </title >
</head>
<body>
content of the html document
</body>
</html>
Static web page is a web page that is delivered to the user’s web browser exactly as
stored and it contains only static web pages. On the other hand dynamic web pages display
differently to different users or n different situation.
HTML TAGS:
HTML tags are like keywords which defines that how web browser will format and
display the content.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:

Kavana Kumari L, BE, M. Tech 6

 IT SKILLS
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Each HTML tags have different properties.

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document

<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment

HTML Heading
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
HTML LINKS, IMAGES, TABLES, FORMS
LINKS: this defines a hyper link that links one page to another page
< a href=”url”>hyper link to another page </a>
IMAGES: this attribute is used attach image in a webpage, it uses <img> tag and does
not have a closing tag.
<img> tag has src & alt attribute where src defines the path to the image and alt specifies
an alternate text for the image
LIST: It is used to list the items with <li> tag.
We have Ordered and Unordered list where ordered list starts with <ol> tag.
In ordered list items will be marked with numbers by default.

Kavana Kumari L, BE, M. Tech 7

 IT SKILLS
Unordered list starts with <ul> tag, all the items will be marked with bullets by default
TABLE tag: This tag is used to display the data n table, table is created by using <table>
tag in which <th> is used to create table head, and text in <th> are bold and centered by
default. <tr> tag used to create table row and <td> to create data cell, the elements in<td>
are regular and left aligned by default.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or
in other media. CSS saves a lot of work; it can control the layout of multiple web pages
all at once
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External CSS-- With an external style sheet, you can change the look of an entire website
by changing just one file
Internal CSS-- An internal style sheet may be used if one single HTML page has a
unique style.
The internal style is defined inside the <style> element, inside the head section.
Inline CSS-- An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
FORMS: HTML <form> tag is used to create an HTML form. Form elements can be
radio button, checkbox, text fields, etc.
Example <body> <form>
Enter your name
<input type=”text” name=”username”>
</form></body>
Formatting tag: these tags are used to format the text in a webpage, some important
formatting tags are <b> to bold the text, <i> text is n italic <sub> to subscript the text,
<strong> defines important text, etc.
Layout element: this helps to display the content of a webpage in multiple columns like
in magazines or newspaper, with <header>, <footer>, <article> tags, etc.

Kavana Kumari L, BE, M. Tech 8

 IT SKILLS
Iframes: it is used to display a webpage within a webpage with <iframe> tag
Syntax: <iframe src=”url” title=”webpage within a webpage”>
CSS Margins, Padding, Borders
Margins: this css property is used to create space around elements, like margin-top,
margin-right, margin-left, margin-bottom.
Padding is to generate space around element’s content, inside of any defined borders; it
has properties like padding-top, padding-right, padding- left, padding-bottom.
CSS border property allows user to specify the style, width and color of an element’s
border with the values as solid, dotted, dashed, etc.
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web. JavaScript is easy to learn.
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed
JavaScript Identifiers
Identifiers are names.
In JavaScript, identifiers are used to name variables (and keywords, and functions, and
labels).
The rules for legal names are much the same in most programming languages. In JavaScript,
the first character must be a letter, or an underscore (_), or a dollar sign ($). Subsequent
characters may be letters, digits, underscores, or dollar signs. Numbers are not allowed as
the first character. This way JavaScript can easily distinguish identifiers from numbers.

Kavana Kumari L, BE, M. Tech 9

 IT SKILLS
Unit 3
BUSINESS PROCESS AUTOMATION/ERP
Business process automation (BPA), also known as business automation or digital
transformation, it is the use of technology to execute difficult processes in a business
where manual effort can be replaced. It is done to increase efficiency, streamline a
business for simplicity and to minimize costs.
Types of organizational structure:
1. Function organizational structure
2. Geographical/divisional organizational structure
3. Matrix organizational structure
4. Product organizational structure
Function organizational structure: It is most traditional approach. It starts with the
highest levels of responsibility at the top and goes down. Employees organized based on
their skills and corresponding function in the company. Each separate department is
managed independently.
Geographical/divisional organizational structure: In a geographical structure, people are
grouped together based on the product
It brings together employees from different functional specialties and allows
geographical division. The organization responds more quickly and efficiently to market
needs, and focuses efforts solely on the objectives of each business unit, increasing results.
Matrix organizational structure: A matrix structure is a hybrid of the functional and
divisional structures. It is organized to manage multiple dimensions. It provides for
reporting levels both horizontally as well as vertically and uses cross-functional teams to
contribute to functional expertise. As such employees may belong to a particular functional
group but may contribute to a team that supports another program.
A matrix organizational chart looks like a grid, and it shows cross-functional teams
that form for special projects. For example, an engineer may regularly belong to the
engineering department (led by an engineering director) but work on a temporary project
(led by a project manager). The matrix org chart accounts for both of these roles and
reporting relationships

Kavana Kumari L, BE, M. Tech 10

 IT SKILLS

Product organizational structure It is a framework in which a business is organised in

separate divisions, each focusing on a different product or service and functioning as an
individual unit within the company
Functional units
Enterprise resource planning (ERP) systems and software connect an organization’s
functional areas, processes and systems. Business functions such as human resources,
finance, manufacturing and inventory control can be linked by one platform that ideally
increases efficiency and quality, lowers costs, and provides greater organizational flexibility
and decision support. Each unit s managed by a functional manager who reports to the
strategic direction of the organization
Workflows
Workflow Automation refers to the design, execution, and automation of processes based
on workflow rules where human tasks, data or files are routed between people or systems
based on pre-defined business rules.
ERP(Enterprise Resource Plan )- it is a business strategy and a set of industry domain
specific applications that build customer and shareholder communities value network
system. It is an effective way of centralizing information and workflow processes through
data management.
Uses of ERP
 More money saved

 Improved collaboration
 Better analytics

 Improved productivity

 Improved production planning and resource management

ERP software tools
ERPNext, Bitrix24, Oodo
----------------------------************---------------------------------------------------------------

Kavana Kumari L, BE, M. Tech 11

 IT SKILLS
Unit 4
INTRODUCTION TO CLOUD AND IOT CONCEPTS
Cloud: It refers to a internet or network which is present in remote location and provides
services over network.
Cloud computing: Manipulating, configuring and accessing the hardware and software
remotely called as cloud computing
Advantages of cloud computing
1. Back-up and restore data
2. Low maintenance cost
3. Unlimited storage capacity
4. Data security and accessibility
5. Mobility and device & location independence
IOT concepts
Internet of Things (IoT)
IoT refers to a system of interrelated, internet-connected objects that are able
to collect and transfer data over a wireless network without human intervention. In simple
words Internet of Things means taking all the things (devices) in the world and
connecting them to the Internet
Examples of “IoT” systems are
I) Smart Home
II) Smart City
III) Smart Farming etc
---------------------**************-----------------------------------------------------

Kavana Kumari L, BE, M. Tech 12

 IT SKILLS
Unit 5
CYBER SECURITY AND SAFETY
Cyber security is the protection of Internet-connected systems, including hardware,
software, and data from cyber attacks
VIRUS: Vital Information Resources Under Seize
A computer virus is a computer program or a piece of code that is loaded onto your
computer without your knowledge and run against your consent. Virus has a property to
replicate itself and spread itself from one computer to another computer. It can affect the
data files, boot sector of hard drive etc. when its replication succeeds. The affected area is
said infected.
Antivirus is a software utility program designed to protect a system from internal attacks
from viruses, trojan horse, spyware and so on. It identifies and corrects any weaknesses
found in the computer system. The main function of an antivirus is to scan, detect,
prevent and remove any existential threat to the computer system.
Examples: Norton, McAfee and Kapersky.
Brief awareness on cyber safety measures

 Keep privacy settings on

 Keep personal information professional and limited

 Practice safe browsing and make sure internet connection is secured

 Choose strong password

 Keep your antivirus up-to-date

 Make online purchase secure sites

Security issues in personal computers (PC)

1. Computer virus

2. Hackers and predators

3. Phishing

Firewall Concepts Firewall is a network device that isolates organization’s internal network
from larger outside network/Internet. It can be hardware, software, or combined system that

Kavana Kumari L, BE, M. Tech 13

 IT SKILLS

prevents unauthorized access to or from internal network.

All data packets entering or leaving the internal network pass through the firewall, which
examines each packet and blocks those that do not meet the specified security criteria.
@@@@@@@@@@@@@@@@@

LAB PROGRAMS
1. Write an algorithm for programmable problems

a) Add/subtract two numbers

Step 1: start
Step 2: Input a,b
Step 3: compute sum=a+b
Step 4: print sum
Step 5: end

Or
Step 1: start
Step 2: Input num1, num2
Step 3: compute answer=num1-num2
Step 4: print answer
Step 5: end
b) Find the largest/smallest of 3 numbers
Step 1: start
Step 2: Input A, B, C
Step 3: if A>B
Then if A>C
Largest num is A
Else
Largest num is C
End if
Else if B>C
Then largest num is B

Kavana Kumari L, BE, M. Tech 14

 IT SKILLS
Else
Largest num is C
End if
End if
Step 4: print larger num
Step 5: stop
Or
Step 1: start
Step 2: Input A, B, C
Step 3: if A<B
Then if A<C
Smaller num is A
Else
Smaller num is C
End if
Else if B<C
Then smaller num is B
Else
Smaller num is C
End if
End if
Step 4: print smaller num
Step 5: stop
c) Calculate and print sum of ‘N’ numbers
Step 1: start
Step 2: assign sum=0,i=0
Step 3: read limit of number n
Step 4: repeat

Kavana Kumari L, BE, M. Tech 15

 IT SKILLS
step5 to 6 until i=n
Step 5: compute sum=sum+i
Step 6: compute i=i+1
Step 7 print sum
Step 8: end
_ ************ ************_

2. Design a flowchart for programmable problems

Add/subtract two numbers

Kavana Kumari L, BE, M. Tech 16

 IT SKILLS
a) Find the largest/smallest of 3 numbers

Or

Kavana Kumari L, BE, M. Tech 17

b) IT SKILLS
Calculate and print sum of ‘N’ numbers

_____________ ************ ************_

3. Design and create a simple game using MIT-scratch

Sprite – Pictures available in scratch
Blocks – we can give commands to sprits and those commands are called as blocks
Program or script – in the middle of the screen is a blank area. You can put together blocks
here to make more complicated commands. This is called a script.
Steps to develop a game to catch a falling objectGo to Google mit-scratch start creating
1. Move the catcher
2. Object should be at the top
3. Falling down a selected object
4. Catch it
5. Keep score
To select and move the catcher
Choose a sprite (bowl) and backdrop.
In the code section select the following codes to move the bowl

Events and control sselect forever block

Kavana Kumari L, BE, M. Tech 18

 IT SKILLS
a) Control if block , sensing select andselect
right arrow in the place of space
b) Motions change x by 10

c) Control if block , sensing select andselect

left arrow in the place of space

d) Motions change x by -10

To select and move an object

Choose a sprite (apple) and to place the apple randomly at the top

Events

a) Motions
b) Motions set y to 180
To make an object (apple) falling down

a) Control forever block

b) Motion change y by -5

c) Control select if block, then then

motion y position and set -170

d) Motion select go to random position and set y to 180

Kavana Kumari L, BE, M. Tech 19

 IT SKILLS

To catch an object (apple)

a) Events
b) Variable give variable name as score set variable(score) to0(zero)
c) Control forever loop ,if loop then select
d) Variable change score by 1

e) Sound

f) Motions
g) Motions set y to 180

4. Design and create simple android application (MIT-app inventor)

Creating Light ON and OFF app using button and image.

Install MIT AI2 companion to our smart phones then follow the steps

Step 1: login to https://appinventor.mit.edu/ using your Gmail account

Step 2: project-- start new project--give name to your project

Kavana Kumari L, BE, M. Tech 20

 IT SKILLS

Step 3: layout--vertical arrangement, go to properties and change height & width to “fill
parent” then click ok. Change background color to blue.

Step 4: user interface--image then go to components and vertical arrangement—left--center

User interface--image1 and in properties select fill parent and set height =30% and width
=20%

User interface-- image2 and in properties select fill parent and setheight =30% and width
=20%

Step 5: drag and drop two buttons for ON and OFF Select “button1” and change text for
button1 to ON Select “button2” and change text for button1 to OFF Rename button1 & 2 to
ON and OFF

Kavana Kumari L, BE, M. Tech 21

 IT SKILLS
Step 6: upload images to image1 and image2
Download 2 images (which is on & off) of bulb then click on image1 and go to picture--
upload image where the bulb is ON and uncheck the visible option

Click on image2 and go to picture upload image where the bulb is OFF

Step 7: go to block and write the code for button 1 & 2 by dragging “when on click” and
“when off click” and also select “set image 1&2visible to true and/or false”

Step 8: connect AI companion then QR code will be generated then scan that QRR code by
your smart phones using MIT AI 2companion app. Then we can run the Light ON and OFF
app

Kavana Kumari L, BE, M. Tech 22

 IT SKILLS
5. Design and create webpage for displaying your poem (Title, header, paragraph,
formatting tags)

<!doctype html>

<html>

<head>

<title>My Poem </title>

<meta charset="UTF-8">

</head>

<body>

<h1>Rhymes</h1>

<p> twinkle twinkle, little star, <br>

<b><i> how i wonder what you are!</b></i> <br>

Up above the world so high, <br>

Like a diamond in the sky!

</p>

</body>

</html>

_____________ ************ _************_

6. Design and create webpage for your wish list (what you want to do). Also list
challenges and opportunities along with images to present your dreams (list ordered
and unordered, image, table)

<!DOCTYPE html>

Kavana Kumari L, BE, M. Tech 23

<html> IT SKILLS
<head>

<title> list </title>

</head>
<body>
<table border="1" >
<caption>Wish List</caption>
<tr>
<th>SL NO</th>
<th>LIST</th>
<th >dreams</th>
</tr>
<tr>
<td>1</td>
<td><ul>
<li>civil engineer</li>
<li>singer</li>
</ul>
</td>
<td><h4>Civil Engineer</h4>
<img src="civil.jpg" width=200 height=300>
<p>
One of the major challenges faced in civil engineering in the
developing countries <br>is that of sustainability in construction.
</p>
<h4>Singer</h4>
<img src="singer.jpg" width=200 height=300>
<p>
A musician not only creates and plays music for the love of it, but
also masters the nuts and bolts of business management <br> with the goal to
share their music.
</p>
</td>
</tr>
<tr>
<td>2</td>
<td><ol>
<li>dancer</li>
<li>Teacher</li>

Kavana Kumari L, BE, M. Tech 24

 </ol> IT SKILLS
</td>

<td><h4>dancer</h4>
<img src="dance.jpg" width=200 height=300>
<p>
The pressure to perform can be too much for the talented dancer.
Dancers can feel so much pressure to perform well, <br> to live up to their teacher’s
expectations or their previous achievements.
</p>
<h4>Teacher</h4>
<img src="teacher.jpg" width=200 height=300>
<p>
Teaching is a noble profession. In the present era, with the advent of
new methodologies <br> in teaching and the way digital and smart learning has made <br>
inroads into the field of education.
</p>
</td>
</tr> </table>
</body>
</html>
OUTPUT

Kavana Kumari L, BE, M. Tech 25

 IT SKILLS
7. Design and create webpage using HTML and CSS and an awesome animal (use
necessary CSS tags)
<!doctype html>
<html>
<style>
div.a {font-size: 150%; }
div.b {font-family: "Times New Roman", Times, serif; }
</style>
<head>
<title>awesome animal </title>
<h1 style="background-color:Blue";> NATIONALANIMAL</h1>
</head>
<body>
<div class="a"> <div class="b">
<p style="background-color:powderBlue;">
The national animal of India is chosen to be the <b> <i>Royal Bengal Tiger
</b></i> <br> In Hindu mythology and the Vedic era, the tiger was a symbol of power <br>
It was often depicted as the animal-vehicle of thevarious forms of Goddess Durga.<br>
India is home to 80 percent of tigers in the world <br> The Royal Bengal Tiger has
featured in Indian currency notes as well as postage stamps.
</p>
</div>
</body>
</html>
OUTPUT

Kavana Kumari L, BE, M. Tech 26

 IT SKILLS
.
8 Design and create webpage for a travel book /recipe book with more than 3 pages,
table to list places/recipes (iframe, hyperlink)

<!doctype html>

<html>

<head>

<title> my travel book</title>

<meta charset="UTF-8">

</head>

<body>

<h1>places to visit</h1>

<table>

<tr> <th>Places </th>

<th>Distance from coorg </th>

<th> About city </th>

</tr>

<tr> <td>Mysore</td>

<td>100kms</td>

<td> <a href=https://en.wikipedia.org/wiki/Mysore>visit heritage

city</a>

</tr>

<tr>

<td>Banglore </td>

<td>250kms </td>

<td> <a href=https://en.wikipedia.org/wiki/Bangalore> visit capital

city of karnataka</a>

Kavana Kumari L, BE, M. Tech 27

 </td> IT SKILLS

</tr>

<tr>

<td>Udupi </td>

<td>300kms </td>

<td> <a href=https://en.wikipedia.org/wiki/Udupi> visit templecity</a>

</td>

</tr>

</body>

</html>
OUTPUT

---------------------------------------------------------------------------
8A using Iframe

<!doctype html>
<html
<head> <title>HTML Iframes</title>
</head>
<body>
<p>MY Travel book</p>
<iframe src =program8.html width = "600" height =350">
</iframe>

Kavana Kumari L, BE, M. Tech 28

</body> IT SKILLS
</html>

OUTPUT

Output when we click on the link

9. Design and create webpage with javascript to design a simple calculator to

perform the following operations: sum, product, difference and quotient
<!doctype html>
<html>
<head>

Kavana Kumari L, BE, M. Tech 29

<script> function dis(val) { IT SKILLS
document.getElementById("result").value+=val
}
function solve() {
let x = document.getElementById("result").value
let y = eval(x) document.getElementById("result").value = y
}
function clr() {
document.getElementById("result").value = ""
}
</script>
<style>
.title {
margin-bottom: 10px;text-align:center; width: 200px; color:green;
border: solid black 2px;
}
input[type="button"]
{
background-color:blue;color: black;
border: solid black 2px;width:100%
}
input[type="text"]
{
background-color:white;border: solid black 2px; width:100%
}
</style>
</head>
<body>
<div class = title >Calculator</div>
<table border="1">
<tr>

Kavana Kumari L, BE, M. Tech 30

 <td colspan="3"><inputITtype="text"
SKILLS id="result"/></td>
<td><input type="button" value="c" onclick="clr()"/> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="2" onclick="dis('2')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
<td><input type="button" value="/" onclick="dis('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="6" onclick="dis('6')"/> </td>
<td><input type="button" value="-" onclick="dis('-')"/> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="8" onclick="dis('8')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input type="button" value="+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="0" onclick="dis('0')"/> </td>
<td><input type="button" value="=" onclick="solve()"/> </td>
<td><input type="button" value="*" onclick="dis('*')"/> </td>
</tr>
</table>
</body>
</html>

Kavana Kumari L, BE, M. Tech 31

 IT SKILLS
OUTPUT

************
10. Design and create a personal webpage with dashboard. Steps create and manage a
blog using blogger
1) sign into blogger using the link http://www.blogger.com using your Google
account
2) On the left, click the down arrow, click NEW blog and enter aname for your blog
3) Click next and choose a blog address or URL
4) Click save, click on new post
5) Give title and write the content for your post
6) Take a note of the link for your post from the permalink tab
7) Click on publish the post.
You can see the dashboard here.
OUTPUT

Kavana Kumari L, BE, M. Tech 32

 IT SKILLS

Kavana Kumari L, BE, M. Tech 33

 IT SKILLS
11. Design and create web page about advantages of business process automation with
respect to you branch of engineering
<!doctype html>
<html>
<head>
<title>Civil engineering</title>
<style>
h1{ color:red; }h3 {color:blue;}
img{ position:absolute;top:200px; left:500px; }
</style>
</head>
<body>
<h1>the use of automation in construction industry </h1>
<img src="civil.jpg">
<h2>what is civil engineering</h2>
<p> civil engineering is a professional engineering discipline that deals with the
design, <br> construction and maintenance of the physical and naturally builtenvironment.
</p>
<h3>advantages of automation in construction</h3>
<p> Replacing humans in tasks performed in dangerous environmentsuch as<br>
heights, over a see etc.<br> increasingproductivity.<br>economic improvement.
</p>
<h3>areas of automation in construction</h3>
<p><ol>
<li>roads and runways construction</li>
<li>building construction</li>
<li>ports</li>
<li>tunnels etc</li>
</ol>
</p></body></html>

Kavana Kumari L, BE, M. Tech 34

 IT SKILLS
OUTPUT

________________________________________________
12. Create a workflow for education loan approval in bank / diploma admission
process
Diploma admission process

1) After the seat is allotted by Director of technical Education (DTE), for admission of
the first year diploma in any stream, college office work will start from thereafter.
2) Admission form will be collected.
3) Document verification in college will be done by collecting original documents like
SSLC marks card, income or caste certificate, photo and other documents which are needed
4) Date will announced by DTE for student approval, on the date verification is done
by DTE approval process team
5) If all the documents are correct then student approval will be successful or else it
will be rejected.

6) Once approval is successful, the register number for such students will be
generated form DTE

Workflow using Trello software

Step1: go to https://trello.com/en/login and login to Trello usingyour gmail.

Kavana Kumari L, BE, M. Tech 35

 IT SKILLS
Step 2: give appropriate team name (“diploma admission process”) and select team type from
the dropdown
Step 3: click on “create new board”
Step 4: Give a board name select the board visibility from the dropdown.
Step 5: create lists by clicking on add list button. Here we have created five lists as follows
Step 6: you can add one or more labels for every card(optional) for quick analysis of the
status. Here we have created three labels in different colors (click on pencil mark in the
label you will see many options and select “edit label” from that list)
 Green color--All good & accepted
 Yellow & purple color--under process
 Red color--rejected
Step 7: click on Label you will see many options and can still improve look with better
options.
Step 8: you can change background image, can add stickers and many more by clicking on
Menu option in the right corner of the page. And the final look of our workflow is below
____________________________________________________________
14. Create user account and demonstrate use of google drive, google docs, google co-
lab(usage of jupyter notebook)

How to create a Gmail account?

You can use your username and password to sign in to Gmail and other Google
products like YouTube, Google Play, and Google Drive. Follow the steps, create your Gmail
account and start sending emails.
Step 1: Visit Google account creation page, accounts.google.com
Step 2: Click on Create account.
Step 3: The sign-up form will appear. Enter your first and last name.
Step 4: Choose a Username for your account. (Here you can also use an existing email
address)
Step 5: After choosing a username, enter a password. Type the password again to confirm.
(As per Google's instruction always use 8 or more characters with a mix of letters, numbers

Kavana Kumari L, BE, M. Tech 36

& symbols) IT SKILLS
Step 6: At last tap on Next. (Right corner of the screen)
Step 7: On the next page enter your phone number to verify your account. (It is a two-step
verification process for security)
Step 8: On the given mobile number you will receive a text message from Google with a
verification code. Enter the verification codeand tap on Verify.
Step 9: On the next page enter your DOB in the specified fields.
Step 10: Choose a Gender.Tap on Next.
Step 11: Read, Google's Terms of Service and Privacy Policy will appear on the screen
and click on I agree.
Congratulations! your account has been created. From now onwards every time you sign in
you just have to enter your email id and password. And every time you sign-in don't forget to
sign-out becauseit prevents others from viewing your emails. Do you know how to sign-out?
Navigate to the circle(in the top-right corner of the page). Here tap on it, from the below
option, select Sign-out.
Steps to access google drive Accessing Google Drive
We can access Google Drive by going to http://drive.google.com in your web browser.
You can also navigate to Google Drive from any Google page (such as Gmail or Google
search) by selecting the grid icon near the top- right corner, then clicking Drive.
The Google Drive interface
Your Google Drive may be empty right now, but as you begin to upload and
create files you'll need to know how to view, manage, and organize them in the interface.
Click the buttons in the interactive below to become familiar with the Google Drive
interface.
GOOGLE CO_LAB
If you have used Jupyter notebook previously, you would quickly learn to use
Google Colab. To be precise, Colab is a free Jupyter notebook environment that runs entirely
in the cloud. Most importantly, it does not require a setup and the notebooks that you create
can be simultaneously edited by your team members - just the way you edit documents in
Google Docs. Colab supports many popular machine learning libraries which can be easily
loaded in your notebook.

Kavana Kumari L, BE, M. Tech 37

 IT SKILLS

15. Demonstrate Internet of Things using with examples

a. Smart home
b. Smart city
c. Smart farming
Internet of Things (IoT)
IoT refers to a system of interrelated, internet-connected objects that are able to
collect and transfer data over a wireless network without human intervention. In simple
words Internet of Things means taking all the things (devices) in the world and connecting
them to the Internet
Examples of “IoT” systems are Smart Home, Smart City, Smart Farming etc
SMART HOME: What Is a Smart Home?
A smart home refers to a convenient home setup where appliances and devices
can be automatically controlled remotely from anywhere with an internet connection using a
mobile or other networked device.
 Devices in a smart home are interconnected through the internet, allowing the user to
control functions such as security access to the home, temperature, lighting, and a home
theater remotely.
How Smart Homes Work?

 A smart home’s devices are connected with each other and can be accessed through
one central point—a Smartphone, tablet, laptop, or game console.
Door locks, televisions, thermostats, home monitors, cameras, lights, and even appliances
such as the refrigerator can be controlled throughone home automation system.
 The system is installed on a mobile or other networked device, and the user can create
time schedules for certain changes to take effect.
Advantages of Smart Home system
 Installing a smart home technology system provides homeowners with convenience.

Rather than controlling appliances, thermostats, lighting, and other features using different
devices, homeowners can control them all using one device—usually a smart phone or

Kavana Kumari L, BE, M. Tech 38

tablet. IT SKILLS

 Since they're connected to a portable device, users can get notifications and updates on
issues in their homes.

Examples of Smart Home systems and devices.

1) Amazon Alexa
2) Google Assistant
3) Sony Smart TV
4) Perfect Bake pro
5) Amazon Echo etc.
SMART CITY
 A “Smart city” is a city that uses technology to provide services and solve city
problems.
 A smart city does things like improve transportation and accessibility, improve social
services, promote sustainability, and give its citizens a voice.

 The main purpose of the Smart Cities Mission is to drive economic growth and
improve the quality of life of people by enabling local area development and harnessing
technology, especially technology that leads to Smart outcomes.
Advantages of Smart Cities

1) Making more effective and data-based decisions:

2) Better transport services.
3) Efficient public services.
4) Reduction of the environmental footprint
5) Increase in digital equity
6) New economic development opportunities
7) Infrastructure improvement Examples of Smart Cities in India
New Delhi, Mumbai, Bengaluru

SMART FARMING (SMART AGRICULTURE)

Kavana Kumari L, BE, M. Tech 39

 IT SKILLS
 A “Smart Farming” is an emerging concept that refers to managing farms using
modern Information and Communication Technologies to increase the quantity and quality of
products while optimizing the human labor required.
 The goal of “Smart Farming” research is to ground a decision making support system
for farm management. By providing them with the benefits of technological advancements,
smart farming aims to reduce the heavy workload of the farm workers, hence improving
their quality of life
Advantages of Smart Farming
1) Increased Production.
2) Water Conservation.
3) Real-Time Data and Production Insight.
4) Lowered Operation Costs.
5) Increased Quality of Production.
6) Accurate Farm and Field Evaluation.
7) Improved Livestock Farming.

DEMONSTRATION LINKS (YOUTUBE VIDEOS):

1) Internet of Things (IoT): https://www.youtube.com/watch?v=h0gWfVCSGQQ

2) SMART HOME: https://www.youtube.com/watch?v=EzCVpaEb0kQ
3) START CITY: https://www.youtube.com/watch?v=Br5aJa6MkBc

4) START FARMING: https://www.youtube.com/watch?v=DEqwIKwMM9k

16. Installation of antivirus software

There are many antivirus products available in market like Avast, McAfee,
Kaspersky , Norton etc
Now we are considering Avast antivirus and below are the steps to install and use this
product
Step 1:type below link in your internet browser’s address bar
https://download.cnet.com/Avast-pro- antivirus/3000_2239_410181058.html
This link redirects you to fill download page

Kavana Kumari L, BE, M. Tech 40

 IT SKILLS
Step 2: click on “download now” button
Step 3: wait for the yellow bar to appear and then right click and choose download the
file
Step 4: click on the run and wait the program to be downloading andrun
Step 5: once download is finished this screen will come up. Click onnext
Step 6: uncheck participation and check custom installation and click“next” to continue
Step 7: choose install in trial mode and click on “next” Step 8: choose custom setting and
uncheck network slide
Then click on “next” to continue program will install itself and Avast will do a quick scan,
setup will finish. Double click on the license file that is in the attachment “license.Avastlic”
Say “yes” and your installation has been complete click “OK” to close
17.Demonstration and hands on browser settings

Kavana Kumari L, BE, M. Tech 41

 IT SKILLS
18. Demonstration and hands on privacy settings and password policy
There are many steps you can take to keep your private data secure
1) Password-protection: all your digital devices should be password protected for
increased security.
2) Password complexity and length: Choose strong password so that it should have at
least one uppercase and lowercase alphabet, one/more special character.
3) Keep your computer virus free: make sure your devices are up- to-date with the
latest security patches
4) Secure your browser, use secured Wi-Fi connections and only use genuine soft wares
19. Demonstration of common security threats
a) Phishing b) DoS attack c) Man in the middle attack d) Spamming e) Virus
The phishing attacks often come in the form of instant messages or phishing emails
designed to appear legitimate. The recipient of the email is then tricked into opening a
malicious link, which leads to the installation of malware on the recipient’s computer
https://www.kaspersky.co.in/resource-center/definitions/spear-phishing
A DoS attack is performed by one machine and its internet connection, by flooding a
website with packets and making it impossible for legitimate users to access the content of
flooded website
Man-in-the-middle attacks are cyber security attacks that allow the attacker to eavesdrop
on communication between two targets. It can listen to a communication which should, in
normal settings, be private.
https://www.youtube.com/watch?v=dEaDgOZY80Y
Spamming is the use of messaging systems to send an unsolicited message (spam) to large
numbers of recipients for the purpose of commercial advertising, for the purpose of non-
commercial proselytizing, or for any prohibited purpose (especially the fraudulent purpose
of phishing).
https://www.youtube.com/watch?v=NI37JI7KnSc
Computer viruses are pieces of software that are designed to be spread from one computer
to another. They’re often sent as email attachments or downloaded from specific websites
with the intentto infect your computer https://www.youtube.com/watch?v=Dk-ZqQ-bfy4

Kavana Kumari L, BE, M. Tech 42

 IT SKILLS
IT skills Viva questions
1. What is an algorithm?
2. What is flowchart?
3. What is web browser, web server?
4. What is website, webpage?
5. What is HTML?
6. What is CSS and 3 ways of adding CSS to html documents?
7. Which are the formatting tags, HTML elements, attributes?
8. How many headings are there?
9. What is antivirus?
10. What is virus?
11. What are common security threats?
12. What is blog?
13. What are spirits?
14. What is application development?
15. What is domain name and domain name system?
16. What is business process automation?
17. What is IOT? Give examples

ALL THE BEST

Kavana Kumari L, BE, M. Tech 43