Professional Documents
Culture Documents
UNIVERSITY OF DELHI
INTERNET
TECHNOLOGIES
PRACTICAL FILE
2022-23
1|Page
Q2. With help of ping, check if you are connected to other systems of your network
and find the route to connect to that system using tracert. List all the processes
which are using ports for TCP protocol.
Ping command-
Tracert command-
2|Page
Netstat command-
3|Page
Q3. Create an HTML page that shows information about you, your course, hobbies,
address, and your plans. Use CSS for styling of HTML page so that looks nice.
Source Code:
ITques3.html-
<!DOCTYPE html>
<html>
<div class="main_div">
<head>
<link rel="stylesheet" type="text/css" href="ITques1.css">
<h1>Nagadi Leela Rao</h1>
</head>
</div>
<body>
<div>
<h2>Basic Information</h2>
<table>
<tr>
<td><b>DOB: </b>20th March 2003</td>
<td><b>Age: </b>20 years </td>
<td><b>Gender: </b>Female (She/her)</td>
</tr>
</table>
</div>
<div>
<h2>Course</h2>
<p>B.Sc.(H) Computer Science</p>
</div>
<div>
<h2>Hobbies</h2>
<table>
<tr>
<td>Dancing</td>
<td>Listening to music</td>
<td>Singing</td>
<td>Art and craft</td>
<td>Reading webtoons</td>
<td>Cleaning</td>
</tr>
</table>
</div>
<div>
<h2>Address</h2>
4|Page
<p>106/1-D, Kishangarh, Vasant Kunj, New Delhi- 110070</p>
</div>
<div>
<h2>My Plans</h2>
<p>I plan to pursue MCA but haven't yet decided what I want to
specialise in. <br>
I'm interested in the fields of Data Science and Cyber Security.
<br>
After finishing MCA I'll apply and look for placements.</p>
</div>
</body>
</html>
ITques3.css-
.main_div{
margin-top: 30px;
width: 95%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(232, 39, 148);
border-radius: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
h1{
color: antiquewhite;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size:xx-large;
}
div{
background-color: beige;
width: 95%;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
padding: center;
margin-bottom: 40px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 12px 12px 0 rgba(0, 0, 0, 0.2);
}
h2{
padding: 15px;
color:rgb(255, 255, 255);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans
Unicode', Geneva, Verdana, sans-serif;
5|Page
background-color: rgb(49, 146, 112);
}
body{
background-image: url("C:/xampp/htdocs/Website_design.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
p{
font-family: Verdana;
color:black;
padding-left: 20px;
padding-bottom: 20px;
text-align: center;
line-height: 2;
}
table{
width: 90%;
display: flex;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
font-family: Verdana;
color:black;
justify-content: center;
align-items: center;
border-spacing: 15px;
}
td{
padding: 10px 20px;
background-color: rgb(255, 238, 141);
border-radius: 20px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
6|Page
Output:
7|Page
Q4. Create an HTML page with the sole purpose to show multiplication tables of 2
to 10 (row-wise) created by JavaScript. Initially, the page is blank. With help of
setInterval function print a row every 5 seconds in different colors and increasing
font size.
Source Code:
<!DOCTYPE html>
<html>
<head>
<center>
<h1>
Multiplication Tables (2 to 10)
</h1>
</center>
</head>
<body>
<center>
<div id="multiply"></div>
<script lang="javascript">
var mul_tab= document.createElement('table');
var num=2;
var col= new
Array("red","blue","green","orange","pink","brown","purple","gray","teal","lightgree
n");
document.getElementById('multiply').append(mul_tab);
var play= setInterval(()=>{
var row= document.createElement('tr');
row.style.textAlign='center'
for(num1=1; num1<=10; num1++)
{
row.innerHTML+= `<td>${num}x${num1}=${num*num1} </td>`;
let c= Array.from(row.children);
c.forEach(element
=>{element.style.fontSize=`${num+15}px`;});
}
row.style.color=col[num-1];
mul_tab.append(row);
num++;
if(num==11) clearInterval(play);}, 5000);
</script>
</center>
</body>
</html>
8|Page
Output:
9|Page
Q5. Create an HTML page with a paragraph written on it and under which 9 buttons
are placed in a 3X3 grid. The first row is for buttons labelled with colours names
Red, Green, and Blue, the second row with numbers 10, 20, and 30, and the third
row with different font names. Click event of each of the buttons should make the
appropriate change in the style of the paragraph.
Source Code:
<!DOCTYPE html>
<style>
p{
text-align: justify;
width: 60%;
}
button{
text-align: center;
width: 80px;
height: 40px;
}
</style>
<html>
<head>
<h1><center>Recipe for mini choco lava cake</center></h1>
<script>
function chngCol(color)
{ document.getElementById('para').style.color=color; }
function chngSize(fontSize)
{ document.getElementById('para').style.fontSize=fontSize; }
function chngFont(font)
{ document.getElementById('para').style.fontFamily=font; }
</script>
</head>
<body>
<center>
<p id="para">
Ingredients <br>
1/3 cup castor sugar, 2 tbsp melted butter, 1/2 cup warm milk,
3/4 cup all purpose flour, 1/4 cup cocoa powder, 1/2 tsp baking
powder,
10-12 chocolate pieces <br><br>
Process <br>
10 | P a g e
1. Take sugar and melted butter in a bowl and whisk well <br>
2. When incorporated well, add in the warm milk and mix again <br>
3. Then add all your dry ingredients that is flour, cocoa powder and
baking powder <br>
4. Mix everything together and transfer the batter into a piping bag
<br>
5. To make the mini cakes, heat an appe/paniyaram pan and grease it
lightly <br>
6. Carefully fill 1/2 the cavities with cake batter and then add in
chocolate piece in the center <br>
7. Cover the top of the chocolate piece with some more cake batter
and cook nicely from both sides <br>
8. Dust with some icing sugar and serve warm <br>
</p>
</center>
<center>
<table>
<tr>
<td><button onclick="chngCol('red')" style="color:
red;">Red</button></td>
<td><button onclick="chngCol('green')" style="color:
green;">Green</button></td>
<td><button onclick="chngCol('blue')" style="color:
blue;">Blue</button></td>
</tr>
<tr>
<td><button onclick="chngSize('10px')" style="font-size:
10px;">10</button></td>
<td><button onclick="chngSize('20px')" style="font-size:
20px;">20</button></td>
<td><button onclick="chngSize('30px')" style="font-size:
30px;">30</button></td>
</tr>
<tr>
<td><button onclick="chngFont('Arial')" style="font-family:
Arial;">Arial</button></td>
<td><button onclick="chngFont('Calibri')" style="font-family:
Calibri;">Calibri</button></td>
<td><button onclick="chngFont('Verdana')" style="font-family:
Verdana;">Verdana</button></td>
</tr>
</table>
</center>
</body>
</html>
11 | P a g e
Output:
Different colors-
12 | P a g e
Different font sizes-
13 | P a g e
Different fonts-
14 | P a g e
Q6. Create a form that takes data about a pet. The form must be well designed and
should accept the pet’s name, age, weight, type, and what it likes most. At the
submission of this form create a Pet object in JavaScript filled with these values and
log that object and equivalent JSON on the console.
Source Code:
ITques6.html-
<!DOCTYPE html>
<html>
<head>
<h2><center>Pet Info</center></h2>
</head>
<body>
<center> <br>
<form id="form" action="">
<table>
<tr>
<td><b>Name</b></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td><b>Age (in yrs)</b></td>
<td><input type="number" id="age" step="0.1"></td>
</tr>
<tr>
<td><b>Weight (in kg)</b></td>
<td><input type="number" id="weight" step="0.1"></td>
</tr>
<tr>
<td><b>Type</b></td>
<td><input type="text" id="type"></td>
</tr>
<tr>
<td><b>Favourites</b></td>
<td><input type="text" id="fav"></td>
</tr>
</table> <br> <br>
<button id="submit"><b>Submit</b></button>
</form>
15 | P a g e
</center>
</body>
<script src="ITques6.js"></script>
</html>
ITques6.css-
body{
background-image: url("C:/xampp/htdocs/pets.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
table{
color: brown;
font-family: Cambria;
background-color: rgb(255, 243, 228);
border-spacing: 20px;
border-style: dotted;
border-color: rgb(255, 214, 165);
border-radius: 5%;
padding: 20px;
}
input{
border-style: hidden;
height: 20px;
width: 200px;
}
button{
background-color: rgb(174, 253, 207);
color: rgb(16, 111, 79);
border-style: hidden;
padding: 10px 20px;
border-radius: 5%;
font-size: larger;
}
ITques6.js-
document.getElementById("form").addEventListener('submit', function(event){
event.preventDefault();
var Pet = {
name: document.getElementById('name').value,
age: document.getElementById('age').value,
weight: document.getElementById('weight').value,
16 | P a g e
type: document.getElementById('type').value,
fav: document.getElementById('fav').value,
};
console.log('The pet object')
console.log(Pet);
console.log('JSON:')
console.log(JSON.stringify(Pet))
window.alert('Form submitted');
document.getElementById('form').reset();
});
Output:
17 | P a g e
Console output-
18 | P a g e
Q7. Store JSON data of few pets that you created in previous practical in a JSON file
(copy from console output of previous program to a .json file). Using AJAX, load
data from the file and display it in a presentable way using HTML and CSS.
Source Code:
ITques7.html-
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="ITques7.css" />
<head>
<title>PETS INFO</title>
</head>
<body>
<table id="pets">
<tr>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Type</th>
<th>Favourites</th>
</tr>
</table>
ITques7.css-
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url("pets.jpg");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
h1 {
text-align: center;
color: #ff8080;
margin-top: 20px; }
#pets {
width: 70%;
margin: 20px auto;
19 | P a g e
border-collapse: collapse;
border-color: #683605;
}
#pets th {
background-color: rgb(245, 240, 202);
font-weight: bold;
color: #683605;
ITques7.js-
xhr.open("GET",'ITques7.json',true);
xhr.send(null);
20 | P a g e
ITques7.json-
{"pets":[
{"name":"Foxy","age":"5","weight":"12","type":"Dog","fav":"Pedigree, fetch"},
{"name":"Millie","age":"5","weight":"4","type":"Cat","fav":"Tuna, Eggs"},
{"name":"Chikoo","age":"1","weight":"3.5","type":"Cat","fav":"Petting, playing,
cat food"},
{"name":"Sheru","age":"7.5","weight":"25.3","type":"Dog","fav":"Pedigree"}
]}
Output:
21 | P a g e
Q8. Create a plain HTML page for B.Sc. Hons CS course, mentioning details like fee,
eligibility criteria, papers with names and credits, and future possibilities after the
course. A button for styling should be there at bottom of the page. On clicking on
this button JavaScript should redesign the complete page using jQuery in a nice
presentable way.
Source Code:
ITques8.html-
<!DOCTYPE html>
<html>
<head>
<title>BSc(H) CS</title>
<h1>B.Sc.(H) Computer Science</h1>
</head>
<body>
<div id="Fees">
<h4>Fee structure:</h4>
<table>
<tr><td>Year I</td><td>56800</td></tr>
<tr><td>Year II</td><td>42900</td></tr>
<tr><td>Year III</td><td>38600</td></tr>
</table>
</div>
<div id="Eligibility">
<h4>Eligibility:</h4>
<p>Merit will be calculated based on “Best Four” of Mathematics,
one language and two other subjects listed as academic/elective
subjects,
as specified in List A and List B above, as per the following:</p>
<ul>
<li>60% or more marks required in Mathematics</li>
<li>60% or more marks in aggregate of four subjects including
Mathematics,
one language and any two of Physics, Chemistry and Computer
Science/
Informatics Practices.</li>
<li>Applicants from other streams (with Mathematics in Class XII),
will
have a disadvantage of 2% in aggregate of the required four
subjects.</li>
</ul>
</div>
<div id="Papers">
22 | P a g e
<h4>Semester wise distribution of papers:</h4>
<table>
<tr> <th>Semester</th> <th>Paper</th> <th>Category</th>
<th>Credits</th> </tr>
23 | P a g e
<tr> <td>Information Security/Data Mining/Advanced Algorithms</td>
<td>DSE-III</td> <td>6</td> </tr>
<tr> <td>Machine Learning/Deep Learning/Unix Network
Programming/Project Work/Dissertation</td> <td>DSE-IV</td> <td>6</td> </tr>
</table>
</div>
<div id="Future">
<h4>Future Scope:</h4>
<p>
Computer Science provides various career options to the students.
Students have always been on a look out for a course in computers;
be it a full-fledged degree in the subject or a short-term course.
If you are also among such students and wish to pursue a career
in this subject, you can go for a B. Sc(H) in Computer Science .The
course covers all aspects, right from the fundamentals to
advanced courses such as Microprocessors, Network Programming,
Graphics and so on .This way the course prepares anyone for higher
education.<br>
As of now, there are many further options available for the students
after completing this course. They take up the placements
offered to them through campus placements. They enroll for
M.Sc.(CS)/MCA course after completing B.Sc.(H) Computer Science.
M.Sc. Computer Sc. and MCA courses of DU have 50 percent seats
reserved for the students who have a B.Sc. (H) degree in Computer
Science. Many of our students also enroll for MBA course after
graduating from this course.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="ITques8.js"></script>
</body>
</html>
ITques8.js-
$(function(){
var style= $('#style');
style.css({
'background':'white'
});
style.on('click', function(){
$('body').css('background', '#1a9997');
24 | P a g e
$('h1').css({
'color':'white',
'text-align': 'center'
});
$('div').css({
'background':'white',
'color': '#165c5a',
'font-family': 'helvetica',
'border-radius': '20px',
'box-sizing': 'border-box',
'padding': '20px',
'margin': '20px'
});
$('table').css({
'width': '90%',
'border': '2px solid black',
'border-collapse': 'collapse',
'margin': '0 auto'
});
$('th, td').css({
'border': '1px solid black',
'padding': '5px'
});
25 | P a g e
Output:
26 | P a g e
After clicking on the button to style the page-
27 | P a g e
Q9. Create an HTML page for an image gallery which shows the use of BOOTSTRAP
to rearrange and resize its contents on resizing the browser.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.container{
margin-top: 20px;
}
.gallery img{
width: 90%;
height: 220px;
transition: transform 0.3s;
}
.gallery img:hover{
transform: scale(1.1);
}
</style>
</head>
<body background="oldback.jpeg">
<h1 class="text-center" style="font-family: Roboto; color: rgb(98, 44,
8);">Indian Art Forms</h1>
<div class="container">
<div class="row gallery">
<div class="col-md-3" ><figure><img src="kalamkari.jpg"
alt="kalamkari"><figcaption><b>Kalamkari</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="pattachitra.webp"
alt="pattachitra"><figcaption><b>Pattachitra</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="madhubani.jpg"
alt="madhubani"><figcaption><b>Madhubani</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="kalighat.jpg"
alt="kalighat"><figcaption><b>Kalighat</b></figcaption></figure></div>
28 | P a g e
</div>
<br><br>
<div class="row gallery">
<div class="col-md-3" ><figure><img src="tanjore.webp"
alt="tanjore"><figcaption><b>Tanjore</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="mysore.jpeg"
alt="mysore"><figcaption><b>Mysore</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="warli.webp"
alt="warli"><figcaption><b>Warli</b></figcaption></figure></div>
<div class="col-md-3" ><figure><img src="sohrai.jpeg"
alt="sohrai"><figcaption><b>Sohrai</b></figcaption></figure></div>
</div>
</div>
</body>
</html>
Output:
29 | P a g e
On a different screen sizes-
30 | P a g e
Q10. Create an HTTP server using Node.js which handles requests on port 10000 or
a free port beyond 10000. Modify the server in such a way that opening
localhost:10000 will display “Hello world, This is my Node.js server” on browser.
Source Code:
Output:
Running node command-
31 | P a g e
Q11. Create index.html file containing two forms for SignIn and SignUp. Submitting
SignIn form should search for credentials in mysql database using server created in
previous practical. On successful signin, a welcome page should be displayed.
Submitting SignUp form should insert new entry for credentials in mysql database
using server created in previous practical. On successful signup, user should be
returned back to index.html.
Source Code:
index.html-
<!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">
<h1><center>Sign In/Sign Up</center></h1>
</head>
<body>
<center>
<h2>Sign In</h2>
<form action="\dosignin" method="post">
Username: <input type="text" name="user"><br><br>
Password: <input type="password" name="pwd"><br><br>
<button type="submit">Sign In</button>
</form> <br><br>
</center>
<center>
<br><h2>Sign Up!</h2><form action="\dosignup" method="post">
Username: <input type="text" name="user"><br><br>
Password: <input type="password" name="pwd"><br><br>
<button type="submit">Sign Up!</button>
</form>
</center>
</body>
</html>
server.js-
32 | P a g e
var con = mysql.createConnection({
host: "localhost",
user: "root",
password: "krishna106",
database: "IT"
});
con.connect(function (err) {
if (err) {
console.error('Error connecting to MySQL:', err);
return;
}
console.log('Connected to MySQL database');
})
33 | P a g e
const username = req.body.user;
const passwd = req.body.pwd;
Output:
Starting the server and connecting to mysql-
34 | P a g e
Signin/Signup page-
Signing up-
35 | P a g e
Valid Signin-
Database(IT), table(users)-
36 | P a g e