: SHANKAR HARTI
: 1NH24CS655-T
: III
:D
:2025-26
PART A
1)Design a static login page involves creating a simple and effective
web page that allows users to enter their credentials to access a
secure area.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
font-family: Arial;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-box {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
width: 300px;
}
input {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required />
<input type="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Output:
2) Design a class timetable using the colspan and rowspan
attributes in HTML, which can help to create an organized and
visually appealing layout. Create a simple class timetable for a
week (Monday to Friday) and number of class sessions per day.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
<style>
h2 {
color: #6fa8dc; /* light blue heading */
font-family: Arial;
}
table {
border-collapse: collapse;
width: 80%;
margin: auto;
}
th,
td {
border: 1px solid black;
padding: 10px;
text-align: center;
font-family: Arial;
}
th {
background-color: #d9e6f5; /* light blue box for heading cells */
}
</style>
</head>
<body>
<h2 align="center">Class Timetable</h2>
<table>
<tr>
<th>Day</th>
<th colspan="5">Sessions</th>
</tr>
<tr>
<th></th>
<th>9–10</th>
<th>10–11</th>
<th>11–12</th>
<th>1–2</th>
<th>2–3</th>
</tr>
<tr>
<td>Monday</td>
<td>PHYSICS</td>
<td>ENGLISH</td>
<td rowspan="2">COMPUTER</td>
<td>Break</td>
<td>SCIENCE</td>
</tr>
<tr>
<td>Tuesday</td>
<td>MATHS</td>
<td>HISTORY</td>
<td>Break</td>
<td>PHYSICS</td>
</tr>
<tr>
<td>Wednesday</td>
<td colspan="2">LAB</td>
<td>Break</td>
<td>PE</td>
<td>ART</td>
</tr>
<tr>
<td>Thursday</td>
<td>ENGLISH</td>
<td>SCIENCE</td>
<td>Break</td>
<td colspan="2">WORKSHOP</td>
</tr>
<tr>
<td>Friday</td>
<td>SCIENCE</td>
<td>COMPUTER</td>
<td>Break</td>
<td>MATHS</td>
<td>LIBRARY</td>
</tr>
</table>
</body>
</html>
Output:
3) Design a user form with a variety of controls as a fundamental
task in web development. Create a user form that includes at least
six different types of controls: lists (select menus), text boxes, radio
buttons, checkboxes, a drop-down menu, and submit/reset
buttons. (Assume your own use cases).
Code:
<!DOCTYPE html>
<html>
<head>
<title>User Form</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h2>User Registration Form</h2>
<form>
Name: <input type="text" name="name" /><br /><br />
Email: <input type="email" name="email" /><br /><br />
Gender:
<input type="radio" name="gender" value="Male" /> Male
<input type="radio" name="gender" value="Female" />
Female<br /><br />
Hobbies:
<input type="checkbox" name="hobby" value="Reading" />
Reading
<input type="checkbox" name="hobby" value="Sports" /> Sports
<input type="checkbox" name="hobby" value="Music" />
Music<br /><br />
Country:
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
<option>Australia</option>
<option>Canada</option></select
><br /><br />
Favorite Color: <input type="color" /><br /><br />
<input type="submit" />
<input type="reset" />
New Horizon Date: 6
</form>
</body>
</html>
Output:
4) Design a web page with CSS to style lists and tables, which can
significantly enhance the visual appeal and readability of your
content.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Styled Lists and Tables</title>
<style>
body {
background-color: skyblue;
font-family: Arial, sans-serif;
padding: 20px;
}
ul {
list-style-type: square;
color: blue;
}
table {
border-collapse: collapse;
width: 50%;
margin-top: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
New Horizon
Date:
7
text-align: center;
}
th {
background-color: rgb(161, 192, 120);
}
</style>
</head>
<body>
<h3>Favorite Fruits</h3>
<ul>
<li>BANANA</li>
<li>MANGO</li>
<li>APPLE</li>
<li>GRAPES</li>
</ul>
<h3>Student Marks</h3>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>RAMU</td>
<td>100</td>
</tr>
<tr>
<td>FAROOK</td>
<td>85</td>
</tr>
<tr>
<td>PANDU</td>
<td>90</td>
</tr>
<tr>
<td>DARSHAN</td>
<td>100</td>
</tr>
<tr>
<td>SUDEEP</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Output:
5 Design a web page using CSS to set background images for the
entire page and individual elements, while controlling the
repetition of the image using the background-repeat property,
which can create an engaging and visually appealing design.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Beautiful Background</title>
<style>
body {
/* Beautiful blended background */
background-image: linear-gradient(
rgba(255, 182, 193, 0.5),
rgba(173, 216, 230, 0.6)
),
url("[Link]
46273834b3fb");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
color: #fff;
}
.box {
background: rgba(0, 0, 0, 0.5);
border-radius: 15px;
padding: 40px;
margin: 100px auto;
width: 60%;
text-align: center;
box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
}
p{
font-size: 1.3em;
line-height: 1.6;
color: #f0f8ff;
}
</style>
</head>
<body>
<div class="box">
<h1>� Welcome to My Beautiful Page �</h1>
<p>
This page blends a stunning scenic image with a soft pastel
gradient
overlay for a peaceful and elegant vibe.
</p>
</div>
</body>
</html>
Output:
6 Design a web page using various selector forms with the
assistance of CSS, which allows you to precisely target and style
different elements within the webpage.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example</title>
<style>
*{
font-family: Arial, sans-serif;
box-sizing: border-box;
}
body {
background-color: #eef2f7;
padding: 30px;
}
h1 {
text-align: center;
color: #3b6ecb;
margin-bottom: 25px;
}
.container {
width: 420px;
background: #fff;
margin: auto;
padding: 25px;
border-radius: 10px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
.input-box {
width: 100%;
padding: 10px;
margin-top: 8px;
margin-bottom: 15px;
border: 1px solid #bbb;
border-radius: 5px;
}
#submitBtn {
background: #3b6ecb;
color: white;
padding: 10px;
width: 100%;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
/* 5. Pseudo-class Selector */
#submitBtn:hover {
background-color: #2a53a3;
}
/* 6. Descendant Selector */
.container p {
color: #444;
}
/* 7. Child Selector */
.container > label {
font-weight: bold;
}
/* 8. Attribute Selector */
input[type="email"] {
background-color: #f7faff;
}
</style>
</head>
<body>
<h1>CSS Selector Demonstration</h1>
<div class="container">
<p>This webpage demonstrates different CSS selector types.</p>
<label>Name:</label>
<input type="text" class="input-box" placeholder="Enter your
name" />
<label>Email:</label>
<input type="email" class="input-box" placeholder="Enter your
email" />
<label>Password:</label>
<input type="password" class="input-box" placeholder="Enter
password" />
<button id="submitBtn">Submit</button>
</div>
</body>
</html>
Output:
PART B
7) Create a HTML page with a dropdown menu featuring a list of
five countries and dynamically displaying their corresponding
capitals using CSS to customize the font properties as a common
web development task.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Country Capital Selector</title>
<style>
body {
background: #f0f4f8;
font-family: Arial, sans-serif;
padding: 40px;
}
h1 {
text-align: center;
color: #2c6ed5;
margin-bottom: 20px;
font-size: 32px;
}
.box {
width: 400px;
margin: auto;
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
text-align: center;
}
select {
width: 100%;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #999;
margin-bottom: 20px;
}
#capital {
font-size: 24px;
font-weight: bold;
color: #333;
margin-top: 15px;
}
</style>
</head>
<body>
<h1>Country & Capital Display</h1>
<div class="box">
<label><b>Select a Country:</b></label>
<select id="country" onchange="showCapital()">
<option value="">-- Choose Country --</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Australia">Australia</option>
</select>
<div id="capital"></div>
</div>
<script>
function showCapital() {
const country = [Link]("country").value;
let capital = "";
if (country === "India") capital = "New Delhi";
else if (country === "USA") capital = "Washington, D.C.";
else if (country === "Japan") capital = "Tokyo";
else if (country === "Germany") capital = "Berlin";
else if (country === "Australia") capital = "Canberra";
[Link]("capital").innerHTML = capital
? "Capital: " + capital
: "";
}
</script>
</body>
</html>
Output:
8) Create a XHTML document with three stacked paragraphs that
smoothly elevate to the top for full visibility when the cursor hovers
over any part of a paragraph.
Code:
<!DOCTYPE html>
<head>
<title>Hover Elevation Example</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.paragraph {
margin: 40px 0;
padding: 20px;
background-color: #f0f0f0;
border-radius: 8px;
transition: background-color 0.3s ease;
cursor: pointer;
.paragraph:hover {
background-color: #d0eaff;
</style>
<script type="text/javascript">
function scrollToParagraph(event) {
[Link]({ behavior: 'smooth', block:
'start' });
[Link] = function () {
var paragraphs =
[Link]('paragraph');
for (var i = 0; i < [Link]; i++) {
paragraphs[i].addEventListener('mouseover', scrollToParagraph);
};
</script>
</head>
<body>
<div class="paragraph">This is the introduction paragraph.</div>
<div class="paragraph">This paragraph provides additional
details.</div>
<div class="paragraph">This is the concluding paragraph.</div>
</body>
</html>
Output:
9) Create a XHTML document enhanced with JavaScript to manage
three short text paragraphs that gracefully return to their original
location when moved, rather than being sent to the bottom using
the z-index property.
Code:
<head>
<title>Draggable Paragraphs</title>
<style>
.box {
width: 600px;
height: 400px;
border: 1px solid gray;
position: relative;
}
.para {
position: absolute;
width: 180px;
padding: 10px;
background: #eee;
border: 1px solid #aaa;
cursor: move;
transition: all 0.5s;
}
</style>
</head>
<body>
<h3>Drag the Paragraphs</h3>
<div class="box">
<div class="para" id="p1" style="top:20px; left:20px; ">Box 1</div>
<div class="para" id="p2" style="top:120px; left:20px; ">Box
2</div>
<div class="para" id="p3" style="top:220px; left:20px; ">Box
3</div>
</div>
<script>
const paras = [Link]('.para');
const original = {};
let current = null, offsetX = 0, offsetY = 0;
[Link](p => {
original[[Link]] = { top: [Link], left: [Link] };
[Link]('mousedown', e => {
current = p;
offsetX = [Link] - [Link];
offsetY = [Link] - [Link];
[Link] = 'none';
});
});
[Link]('mousemove', e => {
if (current) {
[Link] = ([Link] - offsetX) + 'px';
[Link] = ([Link] - offsetY) + 'px';
}
});
[Link]('mouseup', () => {
if (current) {
const id = [Link];
[Link] = 'all 0.5s';
[Link] = original[id].left + 'px';
[Link] = original[id].top + 'px';
current = null;
}
});
</script>
</body>
</html>
Output:
10) Create a JavaScript code that generates an HTML page capable
of taking a set of integer numbers and arranging them in
descending order involves building both the HTML structure and
the JavaScript functionality.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Sort Numbers in Descending Order</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 30px;
}
input,
button {
padding: 8px;
margin: 5px;
}
#result {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<h2>Enter integers separated by commas:</h2>
<input type="text" id="numbers" placeholder="e.g., 10, 5, 8, 20" />
<button onclick="sortDescending()">Sort Descending</button>
<div id="result"></div>
<script>
function sortDescending() {
const input = [Link]("numbers").value;
let numArray = [Link](",").map((num) =>
parseInt([Link]()));
if ([Link](isNaN)) {
[Link]("result").innerHTML =
"Please enter valid integers.";
return;
}
[Link]((a, b) => b - a);
[Link]("result").innerHTML =
"Sorted Numbers: " + [Link](", ");
}
</script>
</body>
</html>
Output:
11 Create an XML document to store information about an airline
system and then using a CSS style sheet to style and display the
data involved. The Airline systems XML structure comprises of
airline number, name, destination, price, date of journey, and time
of journey.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Airline System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
h2 {
color: #2c3e50;
.airline {
border: 1px solid #333;
padding: 10px;
margin-bottom: 15px;
background-color: #f9f9f9;
.airlineNumber {
font-weight: bold;
color: #2c3e50;
.name {
font-size: 18px;
color: #2980b9;
.destination {
color: #16a085;
.price {
color: #e74c3c;
font-weight: bold;
.dateOfJourney, .timeOfJourney {
color: #7f8c8d;
</style>
</head>
<body>
<h2>Airline System Information</h2>
<div id="airlineData"></div>
<script>
// XML data as a string
const xmlData = `
<airlines>
<airline>
<airlineNumber>AI101</airlineNumber>
<name>Air India</name>
<destination>New York</destination>
<price>55000</price>
<dateOfJourney>2025-12-20</dateOfJourney>
<timeOfJourney>10:30 AM</timeOfJourney>
</airline>
<airline>
<airlineNumber>BA202</airlineNumber>
<name>British Airways</name>
<destination>London</destination>
<price>48000</price>
<dateOfJourney>2025-12-22</dateOfJourney>
<timeOfJourney>08:45 PM</timeOfJourney>
</airline>
<airline>
<airlineNumber>EK303</airlineNumber>
<name>Emirates</name>
<destination>Dubai</destination>
<price>32000</price>
<dateOfJourney>2025-12-25</dateOfJourney>
<timeOfJourney>06:15 AM</timeOfJourney>
</airline>
</airlines>
const parser = new DOMParser();
const xmlDoc = [Link](xmlData, "application/xml");
const airlines = [Link]("airline");
let output = "";
for (let i = 0; i < [Link]; i++) {
const airlineNumber =
airlines[i].getElementsByTagName("airlineNumber")[0].textContent;
const name =
airlines[i].getElementsByTagName("name")[0].textContent;
const destination =
airlines[i].getElementsByTagName("destination")[0].textContent;
const price =
airlines[i].getElementsByTagName("price")[0].textContent;
const dateOfJourney =
airlines[i].getElementsByTagName("dateOfJourney")[0].textContent;
const timeOfJourney =
airlines[i].getElementsByTagName("timeOfJourney")[0].textContent;
output += `
<div class="airline">
<div class="airlineNumber">Airline Number:
${airlineNumber}</div>
<div class="name">Name: ${name}</div>
<div class="destination">Destination: ${destination}</div>
<div class="price">Price: ₹${price}</div>
<div class="dateOfJourney">Date: ${dateOfJourney}</div>
<div class="timeOfJourney">Time: ${timeOfJourney}</div>
</div>
[Link]("airlineData").innerHTML = output;
</script>
</body>
</html>
Output:
12) Create an XML document to store information about students at
NHCE (New Horizon College of Engineering) and using a CSS style
sheet to display the data: USN (University Serial Number), Name,
Name of the College, Branch, Year of Joining, and Email ID.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>NHCE Student Information</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #2c3e50;
}
.student {
border: 1px solid #333;
padding: 10px;
margin-bottom: 15px;
background-color: #f9f9f9;
}
.usn {
font-weight: bold;
color: #2c3e50;
}
.name {
font-size: 18px;
color: #2980b9;
}
.college {
color: #16a085;
}
.branch {
color: #8e44ad;
}
.yearOfJoining {
color: #7f8c8d;
}
.email {
color: #e74c3c;
}
</style>
</head>
<body>
<h2>NHCE Student Information</h2>
<div id="studentData"></div>
<script>
// XML data as a string
const xmlData = `
<students>
<student>
<usn>1NH21CS192</usn>
<name>Shankar Harti</name>
<college>New Horizon College of Engineering</college>
<branch>Computer Science</branch>
<yearOfJoining>2024</yearOfJoining>
<email>Shankar@[Link]</email>
</student>
<student>
<usn>1NH24CS571</usn>
<name>Sunil Gadi</name>
<college>New Horizon College of Engineering</college>
<branch>Computer Science</branch>
<yearOfJoining>2024</yearOfJoining>
<email>Sunil.@[Link]</email>
</student>
<student>
<usn>1NH21ME003</usn>
<name>Vineet</name>
<college>New Horizon College of Engineering</college>
<branch>Mechanical Engineering</branch>
<yearOfJoining>2021</yearOfJoining>
<email>Vineet@[Link]</email>
</student>
</students>
`;
// Parse XML
const parser = new DOMParser();
const xmlDoc = [Link](xmlData,
"application/xml");
// Get all student elements
const students = [Link]("student");
let output = "";
for (let i = 0; i < [Link]; i++) {
const usn =
students[i].getElementsByTagName("usn")[0].textContent;
const name =
students[i].getElementsByTagName("name")[0].textContent;
const college =
students[i].getElementsByTagName("college")[0].textContent;
const branch =
students[i].getElementsByTagName("branch")[0].textContent;
const yearOfJoining =
students[i].getElementsByTagName("yearOfJoining")[0].textContent;
const email =
students[i].getElementsByTagName("email")[0].textContent;
output += `
<div class="student">
<div class="usn">USN: ${usn}</div>
<div class="name">Name: ${name}</div>
<div class="college">College: ${college}</div>
<div class="branch">Branch: ${branch}</div>
<div class="yearOfJoining">Year of Joining:
${yearOfJoining}</div>
<div class="email">Email: ${email}</div>
</div>
`;
}
[Link]("studentData").innerHTML = output;
</script>
</body>
</html>
Output:
