INTERNET TECHNOLOGIES

(CORE SUBJECT)
(DISCIPLINE SPECIFIC ELECTIVE)

PRACTICAL FILE

Submitted to:-
MRS. SWEETY KATARIA (Teacher In-charge)

As part of academic curriculum (3 RD YEAR- 5TH SEMESTER)

BSC. (HONS) COMPUTER SCIENCE

NAME: KASHISH MADAN

COLLEGE ROLL NO: 21570006
EXAMINATION R.N0: 21033570029
COLLEGE NAME: KALINDI COLLEGE, DU
 INDEX
SNO. PRACTICAL PAGE NO.
Display your systems IP Address, Subnet mask using ipconfig,
1) and find out the network address and the maximum number of
5
systems possible on your network and range of IP addresses
available to these systems.

With help of ping, check if you are connected to other systems

2) 6
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.

Create an HTML page that shows information about you, your

3) course, hobbies, address, and your plans. Use CSS for styling
7-8
of HTML page so that looks nice.

Create an HTML page with the sole purpose to show

4) multiplication tables of 2 to 10 (row-wise) created by
9-11
JavaScript. Initially, the page is blank. With help of set
Interval() function print a row every 5 seconds in different
colours and increasing font size.

Create an HTML page with a paragraph written on it and under

5) 12-15
which 9 buttons are placed in a 3X3 grid. The first row is for
buttons labeled with colours names Red, Green, and Blue, the
second row with numbers 10, 20, 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 paragraph.
 Create a form that takes data about a pet. The form must be
6) 16-18
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.

Store JSON data of few pets that you created in previous

7) practical in a JSON file (copy from console output of previous
19-21
program to a .json file). Using AJAX, load data from the file
and display it in a presentable way using HTML and CSS.

Create a plain HTML page for B.Sc. Hons CS course, mentioning

8) 22-30
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.

Create an HTML page for an image gallery which shows the

9) use of BOOTSTRAP to rearrange and resize its contents on
31-33
resizing the browser.

Create an HTTP server using Node.js which handles requests on port

10) 34
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.

Create index.html file containing two forms for SignIn and

11) SignUp.
35
 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.

-----------------------------------------------
 PRACTICAL 1
Display your systems IP Address, Subnet mask using ipconfig, and find out the network
address and the maximum number of systems possible on your network and range of IP
addresses available to these systems.

//CODE

OUTPUT:

Network address: 192.168.29.1

Subnet Mask: 255.255.255.0
IPv4 Address: 192.168.29.137
Range of IP address available to systems: 192.168.29.1 to 192.168.29.254
 PRACTICAL 2
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.

//CODE

Active processes using ports for TCP protocol:

 PRACTICAL 3
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.
//CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Me</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

header {
background-color: red;
color:yellow;
text-align: center;
padding: 20px;
}

h1 {
font-size: 24px;
}

section {
margin: 20px;
padding: 20px;
background-color: pink;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
color: #007BFF;
}

p {
margin-bottom: 15px;
}
 </style>
</head>
<body>
<header>
<h1>About Me</h1>
</header>

<section>
<h2>Personal Information</h2>
<p>Name: Kashish Madan</p>
<p>Course: BSC. (H) Computer Science</p>
<p>Address: New Delhi, India</p>
</section>

<section>
<h2>Hobbies</h2>
<p>I enjoy dancing,reading and drawing. Also, I am fond of music.</p>
</section>

<section>
<h2>My Plans</h2>
<p>I plan to complete my graduation and then pursue MSC.</p>
</section>
</body>
</html>
OUTPUT:
 PRACTICAL 4
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
set Interval() function print a row every 5 seconds in different colours and
increasing font size.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"></script>
</head>
<body>
<h2>Multiplication Tables</h2>
<br /><br /><br />
<div id="result"></div>
<script>
var num1=2;
var num2=10;
var row=1;
var fontSize=100;
var interval;
const color = ["#FFC1CF", "#CD5C5C",
"E2A0FF","#E9967A","#40E0D0","#eaac8b","#b56576","#","#CCCCFF","#e8e8e4","#5a1
89a","#b1a7a6","#4361ee","#7209b7","#c4fff9","#1f7a8c","#f4845f","#eae0d5","#a
eb4a9","#a6808c"];
var table = document.createElement('table');
table.setAttribute('class', 'table table-hover');
if(row==1){
var tr = document.createElement('tr');
for(var num=num1;num<=num2;num++){
var td = document.createElement('td');
var textNode=document.createTextNode('Table of '+num);
td.appendChild(textNode);
tr.appendChild(td);
}
table.appendChild(tr);
document.body.appendChild(table);
}
interval=setInterval(multiplicationTable,1000);

function multiplicationTable() {
console.log(num1+" "+num2+" "+row);
var tr = document.createElement('tr');
for(num=num1;num<=num2;num++){
var td = document.createElement('td');
var textNode=document.createTextNode(num*row);
td.appendChild(textNode);
tr.appendChild(td);
tr.style.backgroundColor = color[row];
td.style.fontSize = fontSize+'%';
fontSize+=0.5;
}
table.appendChild(tr);
row++;
if(row>20){
console.log("row is"+row);
clearInterval(interval);
}
}

</script>
</body>
</html>

OUTPUT:

In this way tables will appear after an equal intervals

 PRACTICAL 5
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 labeled with colours names Red, Green, and Blue, the
second row with numbers 10, 20, 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 paragraph.

//CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style Changer</title>
<style>
.button-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

button {
padding: 10px;
margin: 5px;
cursor: pointer;
}

#output-paragraph {
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p id="output-paragraph">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 labeled with colors names Red, Green,
and Blue, the
second row with numbers 10, 20, 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
paragraph.</p>

<div class="button-grid">
<button onclick="changeColor('red')">Red</button>
<button onclick="changeColor('green')">Green</button>
 <button onclick="changeColor('blue')">Blue</button>
<button onclick="changeFontSize(10)">10</button>
<button onclick="changeFontSize(20)">20</button>
<button onclick="changeFontSize(30)">30</button>
<button onclick="changeFontFamily('Arial, sans-serif')">Arial</button>
<button onclick="changeFontFamily('Times New Roman, serif')">Times New
Roman</button>
<button onclick="changeFontFamily('Courier New, monospace')">Courier
New</button>
</div>

<script>
const outputParagraph = document.getElementById("output-paragraph");

function changeColor(color) {
outputParagraph.style.color = color;
}

function changeFontSize(fontSize) {
outputParagraph.style.fontSize = `${fontSize}px`;
}

function changeFontFamily(fontFamily) {
outputParagraph.style.fontFamily = fontFamily;
}
</script>
</body>
</html>

OUTPUT:
BUTTON COLOUR CHANGE
FONT SIZE CHANGES

FONT STYLE CHANGES

 PRACTICAL 6
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.

//CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pet Information Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: plum;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: red;
}

form {
max-width: 400px;
margin: 0 auto;
background-color: yellow;
border: 1px solid grey;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}

label {
display: block;
margin-top: 10px;
}

input[type="text"] {
width: 100%;
padding: 10px;
margin-top: 5px;
 }

input[type="submit"] {
background-color: green;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
margin-top: 10px;
}

input[type="submit"]:hover {
background-color: antiquewhite;
}
</style>
</head>
<body>
<h1>Pet Information Form</h1>

<form id="pet-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="age">Age:</label>
<input type="text" id="age" name="age" required>

<label for="weight">Weight:</label>
<input type="text" id="weight" name="weight" required>

<label for="type">Type:</label>
<input type="text" id="type" name="type" required>

<label for="likes">What it likes most:</label>

<input type="text" id="likes" name="likes" required>

<input type="submit" value="Submit">

</form>

<script>
const petForm = document.getElementById("pet-form");

petForm.addEventListener("submit", function (event) {

event.preventDefault();

const name = document.getElementById("name").value;

const age = document.getElementById("age").value;
const weight = document.getElementById("weight").value;
const type = document.getElementById("type").value;
 const likes = document.getElementById("likes").value;

const pet = {
name,
age,
weight,
type,
likes
};

console.log("Pet Object:", pet);

console.log("Pet JSON:", JSON.stringify(pet));
});
</script>
</body>
</html>

OUTPUT:
 PRACTICAL 7
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.
//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pets Information</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}

.container {
width: 60%;
margin: 0 auto;
}

h1 {
font-size: 24px;
color: #333;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ccc;
padding: 10px;
}

th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Pets Information</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Weight (lbs)</th>
<th>Type</th>
<th>Likes</th>
</tr>
<tbody id="petTable"></tbody>
</table>
</div>

<script>
// Load and display pet data from JSON file
const petTable = document.getElementById('petTable');

const xhr = new XMLHttpRequest();

xhr.open('GET', 'pets.json', true);
xhr.onload = function () {
if (xhr.status === 200) {
const pets = JSON.parse(xhr.responseText);
pets.forEach((pet) => {
const row = document.createElement('tr');
row.innerHTML =
`<td>${pet.name}</td><td>${pet.age}</td><td>${pet.weight}</td><td>${pet.type}<
/td><td>${pet.likes}</td>`;
petTable.appendChild(row);
});
}
};
xhr.send();
</script>
</body>
</html>

Pets .json
[
{
"name": "Fluffy",
"age": 4,
"weight": 456,
"type": "dog",
"likes": "food"
 }
]

OUTPUT:
 PRACTICAL 8
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.

//CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B.Sc. Hons Computer Science</title>
<style>
/* Default styles for the initial HTML */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
background-color: whitesmoke;
}
.button {
padding: 10px 20px;
background-color: yellowgreen;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bachelor of Science (Hons) in Computer Science</h1>
<h2>Details:</h2>
<p><strong>overview:</strong>The Bsc in cs is a bachelor's degree that
teaches the student about computer programming,development,maintenance and
more.This degree teaches student to view computers as a science and takes them
deep
into all the aspects involved in computer systems.Computer science
is the subject for students who have a deep love and understanding of
computers.<br>
 however,it;s important to know about a course before you decide to
enroll.In the following
article,you will find information like
eligbility,syllabus,fee,careers,jobs and
more that will help you realise the potential of the B.sc in
computer science degree course.
</p>
<p><strong>Fee:</strong> Rs. 30030.The B.Sc in CS is an important
degree course that also includes a lot of practical work.
The fee range for this course is high because it is being
provided by government-run institutes and private institutes as
well. Hence,the wide range. Currenttly,the fee for B.sc in computer science
degree course range from INR 1lahks to
INR 7lakhs. </p>
<p><strong>Eligibility Criteria:</strong> Aspirants seeking admission
into this course should have 10+2 from a recognized board/university.in which
pcm marks will be calculated with one more subject
<h2>Kalindi College UG Selection Criteria</h2>
<li>Admission will be based on the marks secured in the qualifying
examination.</li>
<li>Cut-off marks will be uploaded on the website of the college
(http://kalindi.du.ac.in).</li>
<li>Eligible candidates should have to present themselves for admission along
with required documents.</li>
<li>Document verification and online payment of programme fee will confirm
admission.</li>
</p>

<div id="div1">
<h2><b>Paper name with Credits</b></h2>
<h3>First SEM</h3>
<table id="t1" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>CSA</td>
<td>10.00</td>
</tr>
<tr>
<td>C++</td>
<td>10.00</td>
</tr>
<tr>
<td>AECC-English</td>
<td>8.00</td>
 </tr>
<tr>
<td>GE-1</td>
<td>9.00</td>
</tr>
</table>
<h3>Second SEM</h3>
<table id="t2" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Discrete Structure</td>
<td>9.00</td>
</tr>
<tr>
<td>Java </td>
<td>8.00</td>
</tr>
<tr>
<td>Environmental Studies</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-2</td>
<td>9.00</td>
</tr>
</table>
<h3>Third SEM</h3>
<table id="t3" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Data Structure</td>
<td>9.00</td>
</tr>
<tr>
<td>Computer Networking</td>
<td>9.00</td>
</tr>
<tr>
<td>Operating System</td>
<td>9.00</td>
 </tr>
<tr>
<td>Web design and development</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-3</td>
<td>7.00</td>
</tr>
</table>
<h3>Fourth SEM</h3>
<table id="t4" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Design and Analysis of algorithm</td>
<td>9.00</td>
</tr>
<tr>
<td>Software Engineering</td>
<td>10.00</td>
</tr>
<tr>
<td>DBMS</td>
<td>10.00</td>
</tr>
<tr>
<td>Android Programming</td>
<td>10.00</td>
</tr>
<tr>
<td>GE-4</td>
<td>9.00</td>
</tr>
</table>
<h3>Fifth SEM</h3>
<table id="t5" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Internet Technology</td>
<td>10.00</td>
 </tr>
<tr>
<td>Theory of computation</td>
<td>10.00</td>
</tr>
<tr>
<td>Micropricessor</td>
<td>10.00</td>
</tr>
<tr>
<td>Data Analysis and Visualization</td>
<td>10.00</td>
</tr>
</table>
<h3>Sixth SEM</h3>
<table id="t6" border="1px solid black" style="text-
align:center;position:relative">
<tr>
<th>Paper</th>
<th>Credits</th>
</tr>
<tr>
<td>Artificial Intelligence</td>
<td>10.00</td>
</tr>
<tr>
<td>Computer Graphics</td>
<td>9.00</td>
</tr>
<tr>
<td>Machine Language</td>
<td>10.00</td>
</tr>
<tr>
<td>Data Mining</td>
<td>10.00</td>
</tr>
</table>
</div>

<p><strong>Future Possibilities after the course:</strong> Buisness

Analyst, Game developer, SEO Specialist, System Analyst,Website Designer
etc.The B.Sc in CS has immense scope in India.Computer education has always
had a lot of of importance
owing to the country's IT industry.therefore,a B.sc in CS degree
has a lot of values and will most
likely lead to employment with a good salary and benefits.Computer
education in India is so important
 that people who do other degrees also do additional computer-based
certification courses to add valueto their degree.</p>
<button class="button" id="styleButton">Click to Style</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#styleButton').on('click', function() {
// jQuery code to restyle the page
$('.container').css({
'max-width': '120%',
'margin': '20px auto',
'padding': '30px',
'background-color': 'teal',
'border': '10px solid #ccc',
'border-radius': '10px'
});
$('h1, h2, p').css('color', '#333');
$('button').css({
'background-color': 'teal',
'color': 'orange',
'margin-top': '40px'
});
});
</script>
</body>
</html>

OUTPUT:
BUTTON TO CHANGE THE STYLE OF PAGE
 PRACTICAL 9
Create an HTML page for an image gallery which shows the use of
BOOTSTRAP to rearrange and resize its contents on resizing the browser.
//CODE
<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Example</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.6.0/jquery.min.js"></scrip
t >
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>
</head >
<body style="background-color: rgba(33, 215, 251, 0.875);">
<div class="container">
<b><h1 style="text-align:center; font-family: 'Times New Roman', Times, serif;
color: brown;">Image Gallery</h1></b>

<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\sunflower.jpg"
target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\sunflower.jpg"
alt="Lights" style="width:100%">

<div class="caption">
<p>flower 1</p>
</div>

</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem
5\image3.webp" target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem
5\image3.webp" alt="Nature" style="width:100%; height: 270px;">
<div class="caption">
<p>flower 2</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\lotus.jpg"
target="_blank">
<img src="C:\Users\Kashish\Desktop\bsc hons cs\cs sem 5\lotus.jpg"
alt="Fjords" style="width:100%">
<div class="caption">
<p>flower 3</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html >

OUTPUT:
On clicking the image link, images get resized

On resizing the browser, content is resized

 PRACTICAL 10
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.

//CODE
const http = require('http');

const hostname = '127.0.0.1'; const

port = 10000;

const server = http.createServer((req, res) => { res.statusCode =

200; res.setHeader('Content-Type', 'text/plain');
res.end('Hello world, This is my Node.js server\n');
});

server.listen(port, hostname, () => { console.log(`Server running at

http://${hostname}:$

{port}/`);
});

OUTPUT:
 PRACTICAL 11
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.

-----------------------------------------------------------------------------------------