Scribd
Upload
11 views20 pages

Iwt Kaif

C++ notes

Uploaded by

gaurav2708raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views20 pages

Iwt Kaif

C++ notes

Uploaded by

gaurav2708raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

IES University, Bhopal

PRACTICAL FILE
Name of Student : ABHIJEET KUMAR

Enrollment No : 1IES22CSE006

Subject : Internet Of Web Technology

Subject code : DCS - 511

Course : Diploma

Branch : CSE

Semester : 5TH

Session : August 2024 – December 2024

Department of Computer Science & Engineering


INDEX

S. NO. EXPERIMENT NAME EXPERIMENT SUBMISSION SIGN &


DATE DATE REMARK
1 Design a Home Page of a Website using
HTML tags.
2 Write a HTML Document to provide a from
that collects name and phone numbers.

3 WAP in Java Script to compare numbers


whose inputs will be taken from HTML
Form.

4 Write a Java Script function to display


current date and time using Date Object.
5 Write a Java Script to generate Random
Numbers.

6 Design three pages of your Home Page and


link all of them to a single style sheet.

7 Design a web page that demonstrates


blinking and scrolling text.

8 Design a e Commerce site displaying the


details of the items that are sold in that
store. The site should provide a feature to
short the items based on the prize of the
items.
9 Design a XML document using basic
syntax.
EXPERIMENT :- 1

AIM :- Design a Home Page of a Website using HTML tags.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>index2</title>
<link rel="stylesheet" href="./project1.css">
</head>
<body>
<header>
<h1> <marquee>Welcome to My Website</marquee> </h1>
</header> <nav> <ul> <li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#ContactUs">Contact Us</a></li> </ul></nav>
<div id="home">
<h3>Home</h3>
<p> Hey This is my first home pages of website using html tags. This pages
is making only html basic tags so that that is not too attractive. </p>
</div>
<div id="about">
<h3>About</h3>
<p> I am Kundan Kumar Yadav. I belong to Gopalganj Bihar, now I
persuing diploma computer science & engineering from IES University
Bhopal. </p> </div>
<div id="services">
<h3>Services</h3>
<p> I give diifernt categories of Services such as: <br>
* DBMS Tutorials <br>
* Linux Tutorials <br>
* Computer Networking Tutorials <br>
* Basic Microprocessor Tutorials </p> </div> <div id="contactUs">
<h3>#ContactUs</h3> <p> Mobile: +91 7322961045 <br> E-mail -
[email protected] </p>
</div>
<footer>
<p>&copy; 2023 Your Website. All rights reserved.</p>
</footer> </body> </html>

OUTPUT:
AIM:-

EXPERIMENT :- 2

Write a HTML Document to provide a form that collects name


and phone numbers. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h2>Forms to collect the data</h2>
</header>
<form>
<p>Name: <input type="text" placeholder="Enter your name"></p>
<p>Roll Number: <input type="number" placeholder="Enter your roll
number"></p>
<p>Mobile Number: <input type="number" placeholder="Enter your
mobile number"></p>
</form>

<h4>Thanks For Giving Details</h4>


</body>
OUTPUT:

EXPERIMENT :- 3

Write a Program in javascript to compare numbers whose


input will be taken from HTML form.
<!DOCTYPE html>
<html lang="en">
AIM:-

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Number Comparison</title>
</head>
<body>
<!-- Taking input from user -->
<form id="numberForm">
<label for="num1">Enter first number:</label>
<input type="number" id="num1" required>
<label for="num2">Enter second number:</label>
<input type="number" id="num2" required>
<button type="button" onclick="compareNumbers()">Compare
Numbers</button>
</form>
<p id="result"></p>
<script>
function compareNumbers() { var num1 =
parseFloat(document.getElementById("num1").value); var num2 =
parseFloat(document.getElementById("num2").value);
document.getElementById("result").innerText = "Both numbers are
equal.";
} else if (num1 > num2)
{ document.getElementById("result").innerText = "First number is
greater.";
} else { document.getElementById("result").innerText = "Second
number is greater.";}
} else { document.getElementById("result").innerText = "Please enter
valid numbers.";}}
</script>
</body>
</html>

OUTPUT:
EXPERIMENT :- 4

AIM:-
Write a Javascript function to display current date and time
using date object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Date and Time</title>
</head>
<body>
<h2>Here is Current Date and Time</h2><br>
<p id="result">This Button is Show Current Date and Time.</p>
<button onclick="getDate()">Date</button>
</body>
<script> var date = new Date(); function getDate()
{ document.getElementById('result').innerText = date; }
</script>
</html>

OUTPUT:
EXPERIMENT :- 5

AIM:-
Write a javascript to generate random numbers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Random Number</title>
</head>
<body>
<h2>This Button is Generate Random Number.</h2>
<button onclick="randomInteger()">Generate Random
Number</button>
<p id="random"></p>
</body>
<script> function randomInteger() {
var random = Math.floor(Math.random() * 10000000) + 1;
document.getElementById('random').innerHTML = "The
Random Number is:" + random;}
</script>
</html>

OUTPUT:
EXPERIMENT :- 6

AIM:-
Design three pages of your home page and link all of them to
a single stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>index2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>
<marquee>Welcome to My Website</marquee>
</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#ContactUs">Contact Us</a></li> </ul>
</nav>
<div id="home">
<h3>Home</h3>
EXPERIMENT :- 7

AIM:-
<p> Hey This is my first home pages of website using html tags. This
pages is making only html basic tags so that that is not too attractive.
</p>
</div>
<div id="about">
<h3>About</h3>
<p> I am Kundan Kumar Yadav. I belong to Gopalganj Bihar, now I
persuing diploma computer science & engineering from IES
University Bhopal. </p>
</div>
<div id="services">
<h3>Services</h3>
<p> I give diifernt categories of Services such as: <br>
* DBMS Tutorials <br>
* Linux Tutorials <br>
* Computer networking Tutorials <br>
* Basic microprocessor Tutorials </p>
</div>
<div id="contactUs">
<h3>#ContactUs</h3>
<p>Mobile: +91 7322961045 <br> E-mail-
[email protected] </p>
</div>
<footer>
<p>&copy; 2023 Your Website. All rights reserved.</p> </footer>
</body>
</html>
Notes -> These HTML codes is written three times in the VS code
editer.
CSS Codes:
body{ background-color: rgb(48,
166, 166);
} h1{ color: crimson; } nav ul li a:hover{ color:
gold; font-size: 18px; } div p:hover{
font-size: larger; color: green; } footer{ font-size:
large; color: aqua; display: inline-flexbox; }

OUTPUT:

EXPERIMENT :- 7

AIM:- Design a web page that demonstrates blinking and scrolling


text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1.0">
<title>Blinking and Scrolling</title>
<style>
.blink{ animation: blinker 1s linear infinite; color: red; }
@keyframes blinker{
50%
{ opacity: 0;
}}
</style>
</head> <body>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
<marquee class="blink">Here we are show Scrolling and Blinking
effect.</marquee>
</body> </html>

OUTPUT:

EXPERIMENT :- 8

AIM:- Design a eCommerce site displaying the detail of the items


that are sold in that store. The site should provide a feature to sort
the items based on the prize of the items.
*Here directly attached output because code is very lenthy.
OUTPUT:
EXPERIMENT :- 9
AIM:- Design a XML document using basic syntax. <?xml
version="1.0" encoding="UTF-8"?>
<fruitList>
<fruit>
<name>Apple</name>
<price>$5</price>
</fruit>
<fruit>
<name>Orange</name>
<price>$2</price>
</fruit>
</fruitList>

You might also like