lOMoARcPSD|23278960

IT-Skills-LAB Manual-2021

Computer Science and Engineering (Siddaganga Institute of Technology)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)
 lOMoARcPSD|23278960

IT SKILLS LAB

Computer
A computer system is a basic, complete and functional hardware and software setup with
everything needed to implement computing performance.

A computer system is a set of integrated devices which takes input, process it and give output. It
stores data and information. Computer system allows users to input, manipulate and store data.
Computer systems include a CPU, monitor, keyboard, mouse and other optional components.

Basic Units of a Computer

Following are the main basic units or components of the computer:

1. Input Unit
2. Output Unit
3. Central Processing Unit (CPU/ Processor)
4. Memory Unit
5. Storage Unit (Secondary storage i.e., Hard Disk)

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

1. Input Unit
Input unit consists of input devices. Input devices are used to enter data and instructions into
computer memory. Examples of input devices are Keyboard, mouse, joystick and microphone etc.
2. Output Unit
Output unit consists of output devices. Output devices are used to show results produced by
computer after data processing. Examples of output devices are Monitor, Printer, plotter and
speaker etc.
3. Central Processing Unit (CPU / Processor)
Central processing unit is also called CPU or Processor. It is the brain of the computer. It performs
data processing. It controls overall operations and components of the computer.
4. Memory Unit
Memory unit consists of memory devices to store data. For Example, RAM is most common
example of memory.
5. Storage Unit
Storage unit consists of storage media. Storage media are used to store large amounts of data
permanently. Examples of storage media are Hard disk, CD, DVD and Zip disk etc.
Hardware:
Computer hardware refers to the physical parts of a computer and related devices. Internal
hardware devices include motherboards, hard drives, and RAM. External hardware devices
include monitors, keyboards, mice, printers, and scanners.
Software:
Software is a collection of data or computer instructions or progrms that tell the computer how to
work.
Types of Software:
1. System Software
2. Application Software

System Software:
System Software is a set of programs that control and manage the operations of computer
hardware. It also helps application programs to execute correctly.

Example: Operating Systems, Translators.

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

Application Software:
Application software (app for short) is a program or group of programs designed for end-
users. Examples of an application include a word processor, a spreadsheet, an
accounting application, a web browser, an email client, a media player, a file viewer, simulators, a
console game, or a photo editor.

Operating System:

An Operating System (OS) is an interface between computer user and computer hardware.
An operating system is a software which performs all the basic tasks like file management, memory
management, process management, handling input and output, and controlling peripheral devices
such as disk drives and printers.

Example: Microsoft Windows, Apple macOS, Linux, Android and Apple's iOS.

Types of Memory
1. Primary Memory
2. Secondary Memory

1. Primary Memory:
The primary memory stores instructions. It is important to understand primary memory generally
holds currently executing instructions. It is also called User memory or Read / write memory
There are two types of memory in primary memory, RAM and ROM., you should focus on RAM,
and not ROM.

 RAM is Random Access Memory which loses its contents when the computer is switched
off (it is volatile or temporary memory). This memory can be written to, instructions
and data can be loaded into it.

 ROM, or Read Only Memory is non-volatile and is used to store system programs like
Operating system permanently (to start-up or" boot " instructions). It cannot store user
data.
2. Secondary Memory
It is a Permanent memory. When the programs and data files are not in RAM, they are stored on
secondary storage (also known as backing store) such as hard disc, CD, magnetic floppy disc, pen
drives etc.

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

Command

A command is a specific instruction given to a computer application to perform some kind of task
or function.

Instruction
An instruction is an order given to a computer processor by a computer program.

Program
A computer program is a collection of instructions[1] that can be executed by a computer to perform
a specific task.

Types of Computer Languages

1. Machine Language

2. Assembly Language

3. High Level Language

Machine Language
Sometimes referred to as machine code or object code, machine language is a collection
of binary digits or bits that the computer reads and interprets. Machine language is the only
language a computer is capable of understanding.

Assembly Language
Sometimes referred to as assembly or ASM, an assembly language is a low-level programming
language.

Programs written in assembly languages are compiled by an assembler. Every assembler has its
own assembly language, which is designed for one specific computer architecture.

High level Language

Sometimes abbreviated as HLL, a high-level language is a computer programming language ,
designed for a specific job, and is easier to understand. It is more like human language. However,
for a computer to understand and run a program created with a high-level language, it must be

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

translated into machine language. Examples of high level languages are BASIC, C,C+
+, COBOL, FORTRAN, Java, Pascal, Perl, PHP, Python, Ruby, and Visual Basic Etc.

Translators
A translator is a software program that converts code from one computer language into another.

Types of translators
1. Assembler

2. Interpreter

3. Compiler

1.Assembler
An assembler is a program that converts assembly language into machine code.

Assembly Assembler Machine code

Language

2.Interpreter OR Compiler
An Interpreter or Compiler is a program that converts High level language into machine
code.

High Level Interpreter/ Machine code

Language Compiler

Algorithm:

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

An algorithm is a finite sequence of well-defined, computer-implementable instructions, to solve a

problem or to perform a computation. Algorithms are always unambiguous and are used for
performing calculations, data processing and other tasks.

Flowchart:
Pictorial representation of an Algorithm is called Flowchart.

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

1. Write an algorithm for programmable problems Example for Reference:

•Add/subtract two numbers
•Find the largest/smallest of 3 numbers
•Calculate and print sum of 'N' numbers

2. Design a flowchart for programmable problems Example for Reference:

Add/subtract two numbers Find the largest/smallest of 3 numbers Calculate and
print sum of 'N' numbers

// WRITE AN ALGORITHM TO FIND THE SUM OF TWO NUMBERS.

Step 1: Start
Step 2: Read values for Number1, Nnumber2.
Step 3: Add Number1 and Number2 and assign the result to a variable Sum.
Sum=Number1 + Nnumber2
Step 4: Display Sum
Step 5: Stop

FLOWCHART

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

// WRITE AN ALGORITHM TO FIND BIGGEST OF THREE NUMBERS.

Step 1: Start
Step 2: Declare variables a,b and c.
Step 3: If ((a>b) && (a>c) )then
Print “ a is biggest number”
Else if (( b>a) && (b>c)) then
Print “ b is biggest number”
Else
Print “ c is biggest number”
Step 4: Stop.
FLOWCHART

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

// WRITE AN ALGORITHM TO FIND SUM OF ‘N’ NATURAL NUMBERS.

Step 1: Start
Step 2: Read N.
Step 3: Initialize the values of sum and i
sum=0
i=1
Step 4: Repeat while (i < = N)
sum=sum + i
Step 5: Display sum

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

Step 6: Stop.
FLOWCHART

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

<HTML>
<TITLE>My first web page </TITLE>

<HEAD>
<H1 align="center"> Webpage To Display a Poem </H1><HR></BR>
</HEAD>

<BODY bgcolor=pink text="orange">

<FONT color="red" face="Cambria">

<P>
Twinkle, twinkle, little star, </BR>

10

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

How I wonder what you are, </BR>

Up above the world so high, </BR>
Like a diamond in the sky, </BR>
twinkle, twinkle, little star, </BR>
How I wonder what you are. </BR>
</P>
</FONT>

<FONT color="green" face="Arial">

<P>
I’m a little teapot, short and stout </BR>
Here’s my handle ,Here’s my spout </BR>
When I get all steamed up, hear me shout </BR>
Just tip me over and pour me out </BR>
</P>
</FONT>

<FONT color="violet" face="Comic sans Ms">

<P>
London Bridge is falling down, </BR>
Falling down, falling down. </BR>
London Bridge is falling down, </BR>
My fair lady.</BR>
</P>
</FONT>
</BODY>
</HTML>
OUTPUT

11

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

12

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

4. 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).

<HTML>
<TITLE> Wish List </TITLE>

<HEAD>
<H1 align="center"> My Wish List, Challenges and Opportunities </H1><HR>

<BODY bgcolor="yellow" text="blue">

<IMG src="C:\Users\Sever\Desktop\dream.jpg" width=800 height=400

align=right></BR>

<TABLE border="1" bgcolor="pink" >

<CAPTION> MY WISH LIST </CAPTION>

<TR >
<TD> SL. NO.</TD>
<TD> My Wish List </TD>
</TR>

<TR>
<TD> 1</TD>
<TD>I want to travel to abroad </TD>
</TR>

<TD>2</TD>
<TD>Open my own business.</TD>
</TR>

<TR>
<TD>3</TD>
<TD>Help some in need</TD>
</TR>
</TABLE>

13

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

<H2> Opportunities</H2>

<OL type="1" start="1">

<LI>Software Developer</LI>
<LI>Software Test Engineer</LI>
<LI>Network Admin </LI>
<LI>Project Manager</LI>
<LI>Data Entry Operator</LI>
</OL>

<H2>Challenges</H2>
<UL>
<LI>Mastering Your Mind</LI>
<LI>Overcome a Fear</LI>
<LI>Get a New Job</LI>
<LI>Setbacks</LI>
<LI>Failure</LI>
</UL>
</BODY>
</HTML>

14

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

OUTPUT

8. Design and create webpage using HTML and CSS about an awesome

15

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

animal (Use necessary CSS tags).

<HTML>
<HEAD>
<STYLE>

H1{text-align:center; color:red;font-family:comic sans ms}

P{text-align:left;color:blue;font-family: Viner Hand ITC;font-size:16}
BODY{color:blue;background-color:pink}

</STYLE>
</HEAD>
<BODY>
<H1 align=center>Description About An Awesome Animal</H1><HR>
<IMG src="c:\polarbear.jpg" height=300 width=300 align=left ></BR>

<P>
Polar bears are the largest carnivorous land mammals on Earth. They are
about seven to</BR>
eight feet long, measured from the nose to the tip of their very short tail. Male
polar bears/<BR>
are much larger than the females. A large male can weigh more than 1,700
pounds, while a large </BR>
female is about half that size (up to 1,000 pounds). Bears can weigh about 50
percent more after </BR>
a successful hunting season than they do at the start of the next; most of this
additional weight is </BR>
accumulated fat. A newborn polar bear weighs only about 1.5 pounds.</BR>
</P></BR>

<IMG src=”c:\polarbear2.jpg" ></BR>

16

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

<P STYLE="text-align:left;color:green;font-size:14;font-family:arial black">

Many of the polar bear's physical adaptations help it maintain body heat and
deal with its icy habitat.</BR>
The bear's outer layer of fur is hollow and reflects light, giving the fur a white
color that helps the bear </BR>
remain camouflaged. The skin under the polar bear's fur is actually black;
this black is evident only on the nose.</BR>
Polar bears also have a thick layer of fat below the surface of the skin, which
acts as insulation on the body to trap heat.</BR>
This is especially important while swimming and during the frigid Arctic
winter. The bear's large size reduces the amount </BR>
of surface area that's exposed to the cold per unit of body mass (pounds of
flesh), which generates heat. </BR>

</P>
</BODY>
</HTML>

9. Design and create web page for a travel book/recipe book with more than 3 pages,

17

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

table to list places/recipes (use hyperlink).

Filename: satara.html

<html>

<title>Tours and travels</title>

<head>

<style>

h1{color:green;text-align:center;font-family:Matura MT Script Capitals}

p{color:green;font-family:arial black;font-size:15}

</style>

</head>

<body bgcolor=orange>

<h1>Satara Tours and Travels</h1>

<marquee loop=2 >Welcome to Satara tours and travels</marquee>

<p>Satara is a city located in the Satara District of Maharashtra state of India,</br>

near the confluence of the river Krishna and its tributary, the Venna.</br>

The city was established in the 16th century and was the seat of the Chhatrapati of
Maratha Empire, Shahu I.</br>

It is the headquarters of Satara Tehsil, as well as the Satara District. </br>

The city gets its name from the seven forts (Sat-Tara) which are around the
city.</br>

The city is known as a Soldier's city as well as Pensioner's city.</br></br>

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\IMG_3047 (1).JPG"

align=right width=300 height=250></br></br>

18

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\4 (1).jpeg" align=right

width=300 height=250>

</p>

<ol>

<li>Thoseghar waterfalls</li>

<a href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\t1.html">click

here</a></br></br>

<li>

Pratapgad Fort</li>

<a href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\pratapgad.html">click

here</a></br></br>

<li>KaasPathar-Vally of Flowers</li<a
href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\kaas.html">click
here</a></br></br>
</ol>

</body>

</html>

Filename:t1.html
<html>

<title>Tours and travels</title>

<head>

<style>

h1{color:violet;text-align:center;font-family:Matura MT Script Capitals}

p{color:green;font-family:arial black;font-size:15}

</style>

19

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

</head>

<body bgcolor=lavender>

<h1>Thoseghar Waterfalls</h1>

<p>Thoseghar waterfalls is a scenic spot located near the small village of Thoseghar,</br>

20 km from Satara city, at the edge of the Konkan region, in Western India.</br>

There are a series of waterfalls, some of them 15 to 20 metres and one of approx 200 metres in
height.</br>

People come from all over Maharashtra to visit the area, especially during the rainy or monsoon
season, July to November. </br>

Heavy rain falls during that season and because of this the falls have more water and are more
spectacular.</br>

The immediate area is calm and quiet, with a clean lake and dark woods in a hilly area.</br></br>

<img src="C:\Users\varsh\OneDrive\Desktop\New folder (5)\thoseghar-falls-satara-

1585641002.jpg" width=250 height=200>

<img src="C:\Users\varsh\OneDrive\Desktop\New folder (5)\thoseghar-waterfalls.jpg2_.jpg"

width=250 height=200></br></br></br>

<a href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\satara.html?">Go back</a></br></br>

</body>

</html>

Filename=pratapgad.html
<html>

<title>Tours and travels</title>

<head>

<style>

h1{color:green;text-align:center;font-family:Matura MT Script Capitals}

p{color:green;font-family:arial black;font-size:15}

</style>

20

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

</head>

<body bgcolor=orange>

<h1>Pratapgad Fort</h1>

<p>Pratapgad literally 'Valour Fort' is a large fort located in Satara district,</br>

in the Western Indian state of Maharashtra.</br>

Significant as the site of the Battle of Pratapgad, the fort is now a popular tourist destination.</br>

</p>

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\resizer.jpg"height=300 width=250>

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\az.jpg" height=300

width=250></br></br>

<a href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\satara.html">go back</a></br></br>

</body>

</html>

Filename=kaas.html

<html>

<title>Tours and travels</title>

<head>

<style>

h1{color:violet;text-align:center;font-family:Matura MT Script Capitals}

p{color:green;font-family:arial black;font-size:15}

</style>

</head>

<body bgcolor=lavender>

<h1>Kaaspathar-Vally of flowers</h1>

<p>The Kas Plateau Reserved Forest, also known as the KaasPathar,</br>

21

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

is a plateau situated 25 kilometres west from Satara city in Maharashtra, India.</br>

It falls under the Sahyadri Sub Cluster of the Western Ghats, </br>

and it became a part of a UNESCO World Natural Heritage Site in 2012</br></br>

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\download.jpg" width=250

height=200>

<imgsrc="C:\Users\varsh\OneDrive\Desktop\New folder (5)\img-20180923-wa0034-largejpg.jpg"

width=250 height=200></br></br></br>

<a href="C:\Users\varsh\OneDrive\Desktop\New folder (5)\satara.html?">Go back</a></br></br>

</body>

</html>

OUTPUT

22

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

23

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

24

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

10. Design and create web page with JavaScript to design a simple calculator to
perform the following operations: sum, product, difference and quotient.
<HTML>
<BODY>
<HEAD>
<H1 align="center"> Simple calculator to perform sum, product, difference

and quotient </H1><HR>

</HEAD>
<FORM>
25

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

Enter number for N1:<input type="text" Id="n1"></BR></BR>

Enter number for N2:<input type="text" Id="n2"></BR></BR>
Result:<input type="text" Id="res"></BR></BR>

<input type="button" value="ADDITION" onclick="ADD( )">

<input type="button" value="SUBTRACTION" onclick="SUB( )">
<input type="button" value="MULTIPLICATION" onclick="MUL( )">
<input type="button" value="DIVISION" onclick="DIV( )">

</FORM>

<script>
function ADD( )
{
var n1=document.getElementById("n1").value;
var n2=document.getElementById("n2").value;
document.getElementById("res").value=parseInt(n1)+parseInt(n2);
}

function SUB( )
{
var n1=document.getElementById("n1").value;
var n2=document.getElementById("n2").value;
document.getElementById("res").value=parseInt(n1)-parseInt(n2);
}

function MUL( )
{
var n1=document.getElementById("n1").value;
var n2=document.getElementById("n2").value;
document.getElementById("res").value=parseInt(n1)*parseInt(n2)
}

function DIV( )
{
var n1=document.getElementById("n1").value;
26

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

var n2=document.getElementById("n2").value;
document.getElementById("res").value=parseInt(n1)/parseInt(n2);
}

</script>
</BODY>
</HTML>

OUTPUT

27

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

8. Design and create a personal webpage with Dashboard

28

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

Step 1: Sign into Blogger using the link " http://www.blogger.com/ using your Google
Account.
Step 2: Click new blog and enter a name for your blog
Step 3: Click next and choose a blog address or URL
Step 4: Click on New Post
Step 5: Give Title and write the contents for your post
Step 6: Take a note of the link for your post from the permalink tab
Step 7: Click on Publish the Post. You can see the dashboard there.

Each time when you open your Blog you can see the dashboard, which gives all analysis
information .

OUTPUT:
Choosing a Name for your Blog

Choosing a URL for your Blog

29

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

30

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

10. Design and create webpage about advantages of business process automation
with respect to your branch of Engineering.

<HTML>
<HEAD>
<H1 align=center> COMPUTER SCIENCE AND ENGINEERING </H1><HR>
</HEAD>
<BODY bgcolor="yellow" text="green">
<H2> HOW AUTOMATION IN COMPUTER SCIENCE IS BENEFICIAL FOR
TECHNOLOGY</H2></BR>
<IMG src="C:\Users\admin\Desktop\Computer.jpg">

<OL>
<LI> Transport</LI>
<P>
Drivers for Ola and Uber, as well as those who deliver for appslike</BR>
postmates all automated by programming will encroach on theit livelihood</BR>
</P>
<LI> Healthcare</LI>
<P>
Automation advancements in healthcare have helped increase the quality of</BR>
patient care and interactions. it is also helped to increase efficiency while</BR>
bringing down the cost</BR>
</P>
<LI> Online Marketing</LI>
<P>
Make purchase when you sign into an online account. Automation can also help </BR>
marketers run messaging testing to see which marketing campaign resonates more </BR>
with customers.
</P>
</OL>
</BODY>
</HTML>

31

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)

 lOMoARcPSD|23278960

IT SKILLS LAB

OUTPUT:

32

Downloaded by Hareesh Bhat (hareeshkomdi@gmail.com)