Scribd
Upload
81 views51 pages

Web Project

web technology project

Uploaded by

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

Web Project

web technology project

Uploaded by

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

Experiment 1

Qs. Write an HTML code to display your education


details in a tabular format.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education Details</title>
</head>
<body>
<h1>Educational Qualifications - ATUL CHAUDHARY</h1>
<table border="1">
<tr>
<th>Degree</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>Bachelor's</td>
<td>IIMT ENGINEERING COLLEGE</td>
<td>2025</td>
</tr>
<tr>
<td>High School</td>
<td>ARYAN INTERNATIONAL SCHOOL</td>
<td>2019</td> </tr>
</table>
</body>
</html>
OUTPUT
Experiment 2
Qs. Write an HTML code to display your CV on a
webpage.
Code:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your CV</title>
</head>
<body>
<h1>Atul Chaudhary - Curriculum Vitae</h1>

<h2>Education</h2>
<p>Bachelor's Degree - IIMT ENGINEERING COOLEGE MEERUT (2025)</p>
<p>High School - Aryan International School (2019)</p>
<h2>Experience</h2>

<p>Internship at Company A (2024)</p>


<p> Virtual internship at Proutor@iit kanpur</p>
<h2>Skills</h2><ul>

<li>Programming: Python, JavaScript</li>


<li>Web Development: HTML, CSS, jQuery</li>
<li>Database: SQL</li>
</ul>

</body> </html>

Output
Experiment 3
Qs. Write an HTML code to create a homepage having
links for About Us, Our Services and Contact Us.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</body>
</html>

About.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
</head>
<body>
<h1>About Us</h1>
<p>We are a company dedicated to providing excellent services to our clients.</p>
</body>
</html>
Services.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services</title></head>
<body>
<h1>Our Services</h1>
<p>We offer a wide range of services to meet the needs of our customers.</p>
<P> like online products</P>
</body>
</html>
Contact.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
</head><body>
<h1>Contact Us</h1>
<p>Name :Atul Chaudhary</p>
<p> phone no : 7351079248</p>
<p>
email : [email protected]
</p>
</body>
</html>
OUTPUT
Experiment 4
Qs. Write an HTML code to create a login form. On
submitting the form, the user should be navigated to a
profile page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}

.background {
background-image: url(bggg.jpg);
background-size: cover;
background-position: center;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.login-container {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form {
max-width: 300px;
margin: 0 auto;
}

h2 {
text-align: center;
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 6px;
}
input[type="text"],
input[type="password"],
button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="background">
<div class="login-container">
<h2>Login</h2>
<form action="profile.html" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
OUTPUT
Experiment 5
Qs. Write an HTML code to create a registration
form. On submitting the form, the user should be
asked to login with new credentials.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
<h2>Online Registration Form </h2>

<br><label for="name">Name:</label>
<input type="text" name="name" id="name">
<br/>
<br/>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<br/>
<br/>
<p>Sex:
<label for="gender">Male</label>
<input type="radio" name="name" id="gender">

<label for="gender">Female
</label>
<input type="radio" name="name" id="gender">
<br/>
<br/>
<label for="account">Account Type:</label>
<select name="account" id="account">
<option value="saving Account">Saving Account</option>
<option value="current account">Current Account</option>
</select>
<br/>
<br/>
<label for="number">Account Number:</label>
<input type="text" name="name" id="number">
<br/>
<br/>
<label for="name">Facilities:</label>
<input type="checkbox" name="name" id="name"> ATM Card

<input type="checkbox" name="name" id="name"> Cheque Book


<br/>
<br/>
<button>Submit</button>
<button>Clear</button>
</form>
</body>
</html>
OUTPUT
Experiment 6
Qs. Write an HTML code to illustrate the usage of :
ordered list, unordered list, definition list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>orderlist</title>
</head>
<body>
<h1>The game and players </h1>
<ol><b>Cricket</b>
<hr>
<ol>India

<li>Hardik pandey</li>
<li>rohit sharma</li>
<li>ms dhoni</li>
<li>sikhar dhawan</li>
</ol>
<br>
<ol>Australia
<li>Pat cummins</li>
<li>Maxwell</li>
<li>starc</li>
</ol>
</ol>
<br>
<ol><b>FOOTBALL</b>
<hr>
<ol>India
<li>sunil chhetri</li>
<li>Anirudh Thapa</li>
</ol>
<br>
<ol>Argentina
<li>sunil chhetri</li>
<li>Anirudh Thapa</li>

</ol>
</ol>

</body>
</html>
OUTPUT
Experiment 7
Qs. Write an HTML code to illustrate the usage of
internal CSS.
Code:

<HTML>
<HEAD>
<TITLE>Great Recipes</TITLE>
</HEAD>

<FRAMESET ROWS="15%,*">
<FRAME SRC="recipetitlebar.html" NAME=TITLE SCROLLING=NO>

<FRAMESET COLS="20%,*">
<FRAME SRC="recipesidebar.html" NAME=SIDEBAR>
<FRAME SRC="recipes.html" NAME=RECIPES>
</FRAMESET>

<NOFRAMES>
<H1>Great Recipes</H1>
No frames? No Problem! Take a look at our
<A HREF="recipes.html">no-frames</A> version.
</NOFRAMES>
</FRAMESET>
</HTML>
recipes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H4>BREAKFAST</H4>
<OL>
<LI>
TACOS
</LI>
<LI>BURGER</LI>
<LI>
PIZZA
</LI>
</OL>
</body>
</html>
recipesidebar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>
CONTENT
</h4>
<a href="">google</a><br>
<a href="">google</a><br>
<a href="">google</a><br>
<a href="">google</a><br>
<a href="">google</a><br>
</body>
</html>
recipetitlebar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
GREAT RECEPIES
</h1>
</body>
</html>
OUTPUT
Experiment 8
Qs. Write an HTML code to illustrate the usage of
internal CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
/* Internal CSS Styles */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
text-align: center;
}

p{
color: #666;
font-size: 16px;
line-height: 1.6;
}

.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert {
padding: 10px;
background-color: #ffcc00;
color: #333;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Internal CSS Example</h1>
<p>This is an example of using internal CSS within an HTML document to
style elements.</p>
<div class="alert">
<p>This is a styled alert box.</p>
</div>
<p>Internal CSS allows you to define styles that are specific to this HTML
document.</p>
</div>
</body>
</html>
Experiment 9
Qs. Write an HTML code to illustrate the usage of
external CSS, HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styless.css">
</head>
<body>
<header>
<h1>Welcome to External CSS Example</h1>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<div class="container">
<section>
<h2>About Us</h2>
<p>This is an example of using external CSS in HTML. With external
CSS, you can easily manage the styling of your website across multiple pages.</p>
</section>
<section>
<h2>Our Services</h2>
<p>We offer a wide range of services including web design, development,
and digital marketing solutions.</p>
</section>
</div>

<footer>
<p>&copy; 2024 External CSS Example. All rights reserved.</p>
</footer>
</body>
</html>
EXTERNAL CSS
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

section {
margin-bottom: 40px;
}

h2 {
color: #333;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
Experiment 10
Qs. Write program in XML for creation of DTD with
student information.
DTD Code:
<!DOCTYPE studentInformation [
<!ELEMENT studentInformation (student*)>
<!ELEMENT student (name, age, address, contact)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT address (#PCDATA)>
<!ELEMENT contact (#PCDATA)>
]>

<studentInformation>
<student>
<name>ATUL CHAUDHARY</name><br>
<age>20</age><br>
<address>123 L block shastri nagar, meerut</address>
<contact>[email protected]</contact><br>
</student>
<student>
<name>]> Jane Smith</name><br>
<age>22</age>
<address>456 Elm St, Town</address>
<contact>[email protected]</contact>
</student>
</studentInformation>
Experiment 11
Qs. Write a script that reads an integer and
determines to display whether it's odd or even. Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

form {
text-align: center;
}

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

input[type="number"] {
padding: 10px;
width: 100%;
margin-bottom: 20px;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

p#result {
text-align: center;
font-size: 18px;
margin-top: 20px;
}

.popup {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
color: white;
padding: 16px;
border-radius: 5px;
z-index: 9999;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Odd or Even Checker</h1>
<form id="numberForm">
<label for="numberInput">Enter an integer:</label>
<input type="number" id="numberInput" required>
<button type="submit">Check</button>
</form>
<p id="result"></p>
</div>

<div class="popup" id="popup"></div>

<script>
document.getElementById('numberForm').addEventListener('submit',
function(event) {
event.preventDefault();

// Get the input value


var num = parseInt(document.getElementById('numberInput').value);
// Check if the number is odd or even
var result = num % 2 === 0 ? "even" : "odd";

// Remove previous result


document.getElementById('result').textContent = "";

// Display the result as a popup bar


var popup = document.getElementById('popup');
popup.textContent = `${num} is ${result}.`;
popup.style.display = 'block';
setTimeout(function() {
popup.style.display = 'none';
}, 3000); // Hide popup after 3 seconds
});
</script>
</body>
</html>
Experiment 12
Qs. Develop a JavaScript page to determine an if
condition by which the time on your browser is less
than 10 A.M. , you will get a Good Morning greeting.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#message { font-size: 24px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
{
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
if(h < 10)
document.getElementById('message').innerText = "Good Morning!!!. It's
" + h + ":" + m + ":" + s + " A.M.";
else
document.getElementById('message').innerText = "Have a good day!!!.
It's " + h + ":" + m + ":" + s + " P.M.";
}
</script>
</body> </html>
Experiment 13
Qs. Develop a Button using JavaScript in HTML
form.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.button-container {
text-align: center;
}
.custom-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.custom-button:hover {
background-color: #45a049;
}

</style>
<script>
function handleClick() {
alert("Button Clicked!");
}
</script>
</head>
<body>
<div class="button-container">
<form>
<input type="button" value="Click me!" class="custom-button"
onclick="handleClick()">
</form>
</div>
</body>
</html>
Experiment 14
Qs. Develop a Radio Button using JavaScript in
HTML form.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RadioButton</title>

<script type="text/javascript">
function buttonDemo(obj)
{
alert("You have Selected option "+obj.value);
}
</script>
</head>
<body>
<form>
<input type="radio" name="gender" id="male" value="male"
onclick="buttonDemo(this)"/>
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female"
onclick="buttonDemo(this)"/>
<label for="female">Female</label>
<input type="radio" name="gender" id="other" value="other"
onclick="buttonDemo(this)" />
<label for="other">Other</label>
</form>
</body>
</html>
Experiment 15
Qs. Write a code using JavaScript to validate the
password
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function myFunc(){
var mypwd = document.getElementById("pwd");
var myrepwd = document.getElementById("repwd");

if(mypwd.value === "") {


alert("You have not entered the password");
mypwd.focus();
return false;
}
if(mypwd.value !== myrepwd.value) {
alert("Password not verified. Re-enter the password");
myrepwd.focus();
myrepwd.select();
return false;
} else {
alert("Great!! Password verified");
return true;
}
}
</script>
</head>
<body>
<form method="post" id="form1" onsubmit="return myFunc()">
<label>Enter your Password<input type="password" name="password"
placeholder="Enter
Password" id="pwd"></label><br><br>
<label>Re-enter your Password<input type="password" name="password"
placeholder="Re
Enter Password" id="repwd" onblur="myFunc()"></label><br><br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>
Experiment 16
Qs. Write a code using Asynchronous
JavaScript(AJAX) to change the content of webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function myFunc(){
var req;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function() {
if(req.readyState === 4 && req.status === 200) {
document.getElementById("myID").innerHTML = req.responseText;
}}
req.open("GET", "newdata.txt", true);
req.send();
}
</script>
</head>
<body>
<div id="myID">This text can be changed</div>
<button type="button" onclick="myFunc()">Change</button>
</body> </html>

You might also like