Web Technology -JS,HTML,CSS LAB
1.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My College</title>
</head>
<body>
<h1>My College</h1>
<img src="college-logo.png" alt="College Logo" width="150">
<h2>Departments</h2>
<ul>
<li><a href="computer_science.html">Computer Science</a></li>
<li><a href="electronics.html">Electronics</a></li>
<li><a href="mechanical.html">Mechanical Engineering</a></li>
<li><a href="civil.html">Civil Engineering</a></li>
<li><a href="business.html">Business Administration</a></li>
</ul>
</body>
</html>
2. Create a class timetable using table tag.
<!DOCTYPE html>
<html>
<head>
<title>Class Timetable</title>
<style>
table { width: 100%; border-collapse: collapse; text-align: center; }
th, td { border: 1px solid black; padding: 10px; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h2>Class Timetable</h2>
<table>
<tr>
<th>Day</th><th>9-10</th><th>10-11</th><th>11-12</th><th>12-1</th><th>Lunch</
th><th>2-3</th><th>3-4</th>
</tr>
<tr>
<td>Mon</td><td>Math</td><td>Sci</td><td>Eng</td><td>Hist</td><td
rowspan="6">Break</td><td>Phy</td><td>Comp</td>
</tr>
<tr>
<td>Tue</td><td>Eng</td><td>Math</td><td>Phy</td><td>Sci</td><td>Hist</
td><td>Sports</td>
</tr>
<tr>
<td>Wed</td><td>Sci</td><td>Comp</td><td>Eng</td><td>Math</td><td>Hist</
td><td>Phy</td>
</tr>
</table>
</body>
</html>
3. Write a HTML code to design Student registrations form for your college Admission
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
form { width: 50%; margin: auto; padding: 20px; border: 1px solid #ccc; background:
#f9f9f9; }
input, select, textarea { width: 100%; margin-top: 5px; padding: 8px; }
button { margin-top: 10px; padding: 10px; background: #28a745; color: white; border:
none; }
</style>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
<input type="text" placeholder="Full Name" required>
<input type="date" required>
<select><option>Male</option><option>Female</option><option>Other</option></
select>
<input type="email" placeholder="Email" required>
<input type="tel" placeholder="Phone" required>
<textarea placeholder="Address" rows="3" required></textarea>
<select><option>B.Sc</option><option>B.Com</option><option>B.A</option><option>B.Te
ch</option></select>
<button type="submit">Submit</button>
</form>
</body>
</html>
4. design webpages with includes multi media data(image,audio,video,gifs
etc)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Page</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #f4f4f4; }
.container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0
10px rgba(0, 0, 0, 0.1); width: 80%; max-width: 500px; margin: auto; }
img, video, audio { width: 100%; margin: 10px 0; }
</style>
</head>
<body>
<div class="container">
<h2>Multimedia Showcase</h2>
<img src="https://via.placeholder.com/600x300" alt="Image">
<video controls><source src="sample-video.mp4" type="video/mp4"></video>
<audio controls><source src="sample-audio.mp3" type="audio/mp3"></audio>
<img src="https://media.giphy.com/media/26AHONQ79FdWZhAI0/giphy.gif"
alt="GIF">
</div>
</body>
</html>
5.Create a webpage using Frames
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="20%,80%">
<frame src="header.html" name="headerFrame" noresize>
<frameset cols="20%,80%">
<frame src="sidebar.html" name="sidebarFrame" noresize>
<frame src="content.html" name="contentFrame">
</frameset>
</frameset>
<noframes>
<body>
<p>Your browser does not support frames.</p>
</body>
</noframes>
</html>
6. Write code in HTML to develop a webpage having two frames that divide
the webpage into two equal rows and then divide the row into equal columns
fill each frame with a different background color.
<!DOCTYPE html>
<html>
<head>
<title>Two Row Frames with Columns</title>
<style>
body, html {
margin: 0;
height: 100%;
}
.row {
display: flex;
height: 50%;
}
.column {
flex: 1;
}
.top-left {
background-color: #FF6666; /* Red */
}
.top-right {
background-color: #66B2FF; /* Blue */
}
.bottom-left {
background-color: #66FF66; /* Green */
}
.bottom-right {
background-color: #FFFF66; /* Yellow */
}
</style>
</head>
<body>
<div class="row">
<div class="column top-left"></div>
<div class="column top-right"></div>
</div>
<div class="row">
<div class="column bottom-left"></div>
<div class="column bottom-right"></div>
</div>
</body>
</html>
7. Write CSS code to Use Inline CSS to format your ID Card.
<!DOCTYPE html>
<html>
<head>
<title>ID Card</title>
</head>
<body>
<div style="width: 300px; height: 180px; border: 2px solid #000; padding:
10px; font-family: Arial, sans-serif; background-color: #f2f2f2; border-radius:
10px; text-align: center;">
<img src="https://via.placeholder.com/80" alt="Profile Photo"
style="border-radius: 50%; margin-bottom: 10px;">
<h2 style="margin: 5px; font-size: 20px; color: #333;">John Doe</h2>
<p style="margin: 5px; font-size: 14px;"><strong>ID:</strong>
123456789</p>
<p style="margin: 5px; font-size: 14px;"><strong>Department:</strong>
IT</p>
<p style="margin: 5px; font-size: 14px;"><strong>Role:</strong> Web
Developer</p>
</div>
</body>
</html>
8. Using HTML, CSS create display a text called ―Hello India !ǁ on top of an
image of India-Map using an overlay.
<!DOCTYPE html>
<html>
<head>
<title>Hello India Overlay</title>
</head>
<body>
<div style="position: relative; width: 600px; max-width: 100%; margin: 0
auto;">
<!-- India Map Image -->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/India-
locator-map-blank.svg/1200px-India-locator-map-blank.svg.png"
alt="India Map"
style="width: 100%; height: auto; display: block;">
<!-- Overlay Text -->
<div style="
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 36px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 10px;
text-align: center;
">
Hello India!
</div>
</div>
</body>
</html>
PART-B
1. Write a JavaScript Program to perform Basic Arithmetic operations
<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations</title>
</head>
<body>
<h2>Basic Arithmetic Operations</h2>
<label>Enter first number: </label>
<input type="number" id="num1"><br><br>
<label>Enter second number: </label>
<input type="number" id="num2"><br><br>
<button onclick="calculate()">Calculate</button>
<h3>Results:</h3>
<p id="add"></p>
<p id="sub"></p>
<p id="mul"></p>
<p id="div"></p>
<script>
function calculate() {
var a = parseFloat(document.getElementById("num1").value);
var b = parseFloat(document.getElementById("num2").value);
document.getElementById("add").innerHTML = "Addition: " + (a + b);
document.getElementById("sub").innerHTML = "Subtraction: " + (a -
b);
document.getElementById("mul").innerHTML = "Multiplication: " + (a
* b);
if (b !== 0) {
document.getElementById("div").innerHTML = "Division: " + (a / b);
} else {
document.getElementById("div").innerHTML = "Division: Cannot
divide by zero";
}
}
</script>
</body>
</html>
2. JavaScript Program to Check Prime Number
<!DOCTYPE html>
<html>
<head>
<title>Prime Number Checker</title>
</head>
<body>
<h2>Check Prime Number</h2>
<label>Enter a number: </label>
<input type="number" id="numberInput">
<button onclick="checkPrime()">Check</button>
<h3 id="result"></h3>
<script>
function checkPrime() {
let num = parseInt(document.getElementById("numberInput").value);
let isPrime = true;
if (num <= 1) {
isPrime = false;
} else {
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
isPrime = false;
break;
}
}
}
if (isPrime) {
document.getElementById("result").innerHTML = num + " is a Prime
Number.";
} else {
document.getElementById("result").innerHTML = num + " is NOT a
Prime Number.";
}
}
</script>
</body>
</html>
3.JavaScript Program to implement JavaScript Object Concept
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Object Example</title>
</head>
<body>
<h2>JavaScript Object Demo</h2>
<button onclick="showDetails()">Show Student Details</button>
<p id="output"></p>
<script>
// Create a JavaScript object
var student = {
name: "Aarav",
age: 21,
course: "Computer Science",
display: function() {
return `Name: ${this.name} <br> Age: ${this.age} <br> Course: $
{this.course}`;
}
};
// Function to show details
function showDetails() {
document.getElementById("output").innerHTML =
student.display();
}
</script>
</body>
</html>
4. JavaScript Program to Create Array and inserting Data into Array
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
</head>
<body>
<h2>JavaScript Array: Insert & Display</h2>
<input type="text" id="item" placeholder="Enter item">
<button onclick="addItem()">Add to Array</button>
<h3>Array Contents:</h3>
<p id="output"></p>
<script>
// Create an empty array
let myArray = [];
// Function to add item
function addItem() {
let value = document.getElementById("item").value;
if (value !== "") {
myArray.push(value); // insert into array
document.getElementById("item").value = ""; // clear input
displayArray();
}
}
// Function to display array
function displayArray() {
document.getElementById("output").innerHTML = myArray.join(",
");
}
</script>
</body>
</html>
5. JavaScript Program to Validate an Email Address
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<h2>Email Validator</h2>
<input type="text" id="email" placeholder="Enter your email">
<button onclick="validateEmail()">Validate</button>
<p id="result"></p>
<script>
function validateEmail() {
var email = document.getElementById("email").value;
// Simple email regex pattern
var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (pattern.test(email)) {
document.getElementById("result").innerHTML = "✅ Valid Email
Address";
document.getElementById("result").style.color = "green";
} else {
document.getElementById("result").innerHTML = "❌ Invalid Email
Address";
document.getElementById("result").style.color = "red";
}
}
</script>
</body>
</html>
